/* ==========================================================================
   Hälsoveckan i Trelleborg
   Neutral bas + en accent (Kvällssol). Alla färger via variabler → dark mode.
   ========================================================================== */

@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm-sans-latin.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  /* Ljust läge: djuphav i stället för svart (samma ton som loggan) */
  --bg: #ffffff;
  --fg: #143a40;              /* Djuphav */
  --muted: #4f6568;           /* dämpat djuphav, 6,2:1 mot vitt */
  --line: #e2e4df;
  --surface: #f5f3ee;         /* ljus strand */
  --shots-disc: #f3e6d3;      /* varm strand bakom Anette */
  --added-disc: #e9f3d6;      /* ljust gräs bakom Barbro (GillaTRÄNAs gröna) */
  --accent: #f39200;          /* Kvällssol */
  --logo-ink: #143a40;        /* Djuphav: loggans människor, ring och främre vågor */
  --on-accent: #143a40;
  --invert-bg: #0f2b30;       /* lördagsblocket: havsdjup */
  --invert-fg: #eee8d7;       /* Strand */
  --invert-muted: #a3b8b6;
  --invert-line: #24454b;
  /* Fred tränar: rekvisitans färger (ljust läge: mörk metall) */
  --prop-line: #3a2a22; --prop-rim: rgba(238, 232, 215, 0);
  --tm-frame: #3b4449; --tm-belt: #23282b; --tm-stripe: #56626a; --tm-metal: #7d8e96;
  --db-plate: #3b4449; --db-plate-outer: #5d6b73; --db-plate-far: #2c3337; --db-rim: #56626a; --db-hub: #a9b8be;
  --fin: #7d8e96; --fin-dark: #5d6d75; --fin-light: #a9b8be; --strap: #23282b; --buckle: #d9dde0;

  --font: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --step--1: clamp(0.84rem, 0.8rem + 0.18vw, 0.94rem);
  --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.15rem);
  --step-1: clamp(1.2rem, 1.08rem + 0.55vw, 1.55rem);
  --step-2: clamp(1.5rem, 1.25rem + 1.2vw, 2.3rem);
  --step-3: clamp(2rem, 1.5rem + 2.4vw, 3.6rem);
  --step-4: clamp(2.4rem, 1.6rem + 4vw, 5.4rem);

  --gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);
  --section: clamp(3.5rem, 2.5rem + 4vw, 7rem);
  --maxw: 88rem;
  --radius: 1.25rem;
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --header-h: 4rem;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a1a1d;               /* nästan svart med en aning djuphav */
  --fg: #eee8d7;               /* Strand */
  --muted: #a9b3ad;            /* dämpad strand, 8:1 */
  --line: #1f3539;
  --surface: #10262a;
  --shots-disc: #1b3a3f;
  --added-disc: #1c3a31;
  --invert-bg: #0f2b30;        /* lördagsblocket: något ljusare än sidan */
  --invert-fg: #eee8d7;
  --invert-muted: #a3b8b6;
  --invert-line: #24454b;
  --logo-ink: #eee8d7;        /* Strand */
  /* Fred tränar: ljusare metall och ett svagt kantljus i strandfärgen */
  --prop-rim: rgba(238, 232, 215, .3);
  --tm-frame: #5b6870; --tm-belt: #2c353a; --tm-stripe: #8a98a2; --tm-metal: #a9b8be;
  --db-plate: #66757d; --db-plate-outer: #8e9da5; --db-plate-far: #505e66; --db-rim: #8a98a2; --db-hub: #dfe6e9;
  --fin: #8e9fa7; --fin-dark: #6d7e86; --fin-light: #bccbd1;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0a1a1d;               /* nästan svart med en aning djuphav */
    --fg: #eee8d7;               /* Strand */
    --muted: #a9b3ad;            /* dämpad strand, 8:1 */
    --line: #1f3539;
    --surface: #10262a;
  --shots-disc: #1b3a3f;
  --added-disc: #1c3a31;
    --invert-bg: #0f2b30;        /* lördagsblocket: något ljusare än sidan */
    --invert-fg: #eee8d7;
    --invert-muted: #a3b8b6;
    --invert-line: #24454b;
    --logo-ink: #eee8d7;        /* Strand */
    /* Fred tränar: ljusare metall och ett svagt kantljus i strandfärgen */
    --prop-rim: rgba(238, 232, 215, .3);
    --tm-frame: #5b6870; --tm-belt: #2c353a; --tm-stripe: #8a98a2; --tm-metal: #a9b8be;
    --db-plate: #66757d; --db-plate-outer: #8e9da5; --db-plate-far: #505e66; --db-rim: #8a98a2; --db-hub: #dfe6e9;
    --fin: #8e9fa7; --fin-dark: #6d7e86; --fin-light: #bccbd1;
  }
}

/* ---------- Grund ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  transition: background-color .4s var(--ease), color .4s var(--ease);
}
/* Mobil: det som sticker ut i sidled (Anettes armar och glas m.m.) klipps redan här. Klippet på body räcker inte i
   mobilwebbläsare: sidan blev bredare än skärmen och kunde dras snett. clip (inte hidden) = ingen egen scroll, y orört. */
main { overflow-x: clip; }
h1, h2, h3, h4, p, ol, ul, dl, dd { margin: 0; }
/* Inga ensamma ord eller orimliga brytningar i brödtext; tal, belopp och namn är låsta med hårda mellanslag i HTML */
p, li, dd { text-wrap: pretty; }
.nowrap { white-space: nowrap; }
/* Led med mittpunkter emellan (datum · tid · plats). Varje led har sin punkt framför sig och är förskjutet
   en punktbredd åt vänster; det led som börjar en rad får sin punkt utanför rutan, där den klipps bort.
   Då hamnar en punkt aldrig först eller sist på en rad när raden bryts. */
.dots { display: flex; flex-wrap: wrap; overflow: hidden; }
.dots > span { margin-left: -1em; padding-right: 1em; }
.dots > span:last-child { padding-right: 0; }   /* annars bryts raden i onödan */
.dots > span::before { content: "·"; display: inline-block; width: 1em; text-align: center; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--fg); color: var(--bg); padding: .6rem 1rem; border-radius: .5rem;
}
.skip:focus { top: 1rem; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: var(--step--1); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
}
.eyebrow > span { min-width: 0; }   /* texten får krympa och radbrytas bredvid pricken */
.eyebrow::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--accent); flex: none; align-self: flex-start; margin-top: .3em; }

.section-head { max-width: 52rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.section-head--split {
  max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1.75rem var(--gutter);
}
.section-head--split > div { max-width: 52rem; }
/* Fred simmar lugnt i luften mellan programrubriken och veckodagarna: spegelvänd (mot rubriken) och större än i schemat.
   Bara från 80rem, där ytan finns (uppmätt: rubrik, Fred och veckodagar ryms på en rad).
   .section-head först i väljaren: .fred-box längre ner sätter display: block. */
.section-head--split { position: relative; }
.section-head .program__fred {
  /* Ligger ovanpå ytan (absolut): tar ingen höjd, så rubrikraden blir inte högre och det blir ingen tom rad ovanför */
  /* Över Haj intensity och en bit av Torsk på IW (56 % av bredden; passen delar bredden lika), så att han inte hör till
     ett enskilt pass. Storleken uppmätt: han når varken ingressen ovanför eller veckodagarna till höger. */
  position: absolute; left: 56%; bottom: -.5rem; translate: -50% 0;
  width: clamp(15rem, 21vw, 21rem); transform: scaleX(-1);
}
@media (max-width: 79.99rem) { .section-head .program__fred { display: none; } }   /* under 1280 px skulle han knuffa ner veckodagarna på en egen rad */

/* Veckoremsan: klickbara dagar. Hover = lyft + fylld (bara transform/opacity), lördagen orange,
   under själva veckan pulserar dagens datum. */
.weekstrip { display: flex; gap: .5rem; }
.weekday {
  position: relative; isolation: isolate;
  display: grid; justify-items: center; gap: .3rem;
  width: 3.6rem; padding: .8rem 0 .85rem;
  border: 1px solid var(--line); border-radius: 999px;
  text-decoration: none; color: var(--fg);
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
.weekday span { font-size: .7rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); transition: color .3s var(--ease); }
.weekday b { font-size: var(--step-1); font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; transition: color .3s var(--ease); }
.weekday::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit;
  background: var(--fg); opacity: 0; transition: opacity .3s var(--ease);
}
.weekday--main { border-color: var(--accent); }
.weekday--main::before { background: var(--accent); opacity: 1; }
.weekday--main span, .weekday--main b { color: var(--on-accent); }
@media (hover: hover) {
  .weekday:hover { transform: translateY(-.35rem); }
  .weekday:hover::before { opacity: 1; background: var(--fg); }
  .weekday:hover span, .weekday:hover b { color: var(--bg); }
}
.weekday:focus-visible { outline-offset: 4px; border-radius: 999px; }
.weekday.is-today::after {
  content: ""; position: absolute; inset: -6px; border-radius: inherit;
  border: 2px solid var(--accent);
}
@media (prefers-reduced-motion: no-preference) {
  .weekday.is-today::after { animation: today 2.2s var(--ease) infinite; }
  @keyframes today { 0% { opacity: .9; transform: scale(.94); } 70%, 100% { opacity: 0; transform: scale(1.14); } }
}
/* Dagen man klickat till markeras */
.day:target::before { transform: scaleY(1); }
@media (max-width: 47.99rem) {
  .weekstrip { width: 100%; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .4rem; }
  .weekday { width: auto; }
}

.section-head h2 {
  margin-top: 1rem;
  font-size: var(--step-3); font-weight: 750; line-height: 1.02; letter-spacing: -0.035em;
  text-wrap: balance;
}
#partners-title { font-size: min(var(--step-3), calc((100vw - 2 * var(--gutter)) / 9.7)); }

.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .95rem 1.4rem; border-radius: 999px;
  background: var(--fg); color: var(--bg);
  font-weight: 650; text-decoration: none; white-space: nowrap;
  transition: transform .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
}
.btn:hover { background: var(--accent); color: var(--on-accent); }
.btn:active { transform: scale(.97); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background-color .4s var(--ease);
  padding-top: env(safe-area-inset-top);
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
/* Blur på ett pseudo-element, annars blir headern "containing block" för mobilmenyn (position: fixed) */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
}
body.menu-open .site-header::before { background: var(--bg); }
.site-header__inner { height: var(--header-h); display: flex; align-items: center; gap: 1.5rem; }

.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; margin-right: auto; }
.brand__mark {
  width: 2.1rem; height: 2rem; fill: currentColor;
  /* Menyloggan är för liten för färger: helt i djuphav/strand (variablerna ärvs in i <use>) */
  --logo-jump-fill: var(--logo-ink); --logo-sun-fill: var(--logo-ink); --logo-sea-fill: var(--logo-ink);
}
.brand__name { font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; font-size: 1rem; }

.nav__list { display: flex; gap: clamp(1rem, 2vw, 2.25rem); }
.nav a {
  position: relative; display: inline-block; padding-block: .75rem;   /* klickyta ca 44 px hög */
  text-decoration: none; font-weight: 550; font-size: .98rem;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .45rem; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: right;
  transition: transform .35s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="true"]::after { transform: scaleX(1); transform-origin: left; }

.site-header__tools { display: flex; align-items: center; gap: .25rem; }
.icon-btn {
  display: inline-grid; place-items: center;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: none; border: 0; color: inherit; cursor: pointer;
  transition: background-color .25s var(--ease);
}
.icon-btn:hover { background: var(--surface); }

.theme-toggle svg { grid-area: 1 / 1; width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; transition: transform .5s var(--ease), opacity .3s; }
.theme-toggle__moon { fill: currentColor; stroke: none; }
:root .theme-toggle__moon { opacity: 0; transform: rotate(-60deg) scale(.6); }
:root[data-theme="dark"] .theme-toggle__sun { opacity: 0; transform: rotate(60deg) scale(.6); }
:root[data-theme="dark"] .theme-toggle__moon { opacity: 1; transform: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle__sun { opacity: 0; transform: rotate(60deg) scale(.6); }
  :root:not([data-theme="light"]) .theme-toggle__moon { opacity: 1; transform: none; }
}

.menu-toggle { display: none; }
.menu-toggle span {
  grid-area: 1 / 1; width: 1.35rem; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform .35s var(--ease);
}
.menu-toggle span:first-child { transform: translateY(-4px); }
.menu-toggle span:last-child { transform: translateY(4px); }
.menu-toggle[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }

@media (max-width: 47.99rem) {
  .menu-toggle { display: inline-grid; }
  .nav {
    position: fixed; inset: calc(var(--header-h) + env(safe-area-inset-top)) 0 0 0;
    background: var(--bg);
    padding: 2rem var(--gutter) calc(2rem + env(safe-area-inset-bottom));
    opacity: 0; visibility: hidden; transform: translateY(-.75rem);
    transition: opacity .3s var(--ease), transform .4s var(--ease), visibility 0s .4s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nav__list { flex-direction: column; gap: 0; }
  .nav__list li { border-bottom: 1px solid var(--line); }
  .nav a { display: block; padding: 1.1rem 0; font-size: var(--step-2); font-weight: 700; letter-spacing: -0.02em; }
  .nav a::after { display: none; }
  body.menu-open { overflow: hidden; }
}

/* ---------- Hero ---------- */
.hero {
  --word: calc(100cqi / 6.585);   /* "HÄLSOVECKAN" är 6,55 × teckenstorleken bred → fyller exakt radens bredd */
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto auto;
  column-gap: var(--gutter);
  padding-block: clamp(1.25rem, 2.5vw, 2.25rem) clamp(1.5rem, 3vw, 2.5rem);
}
.hero__mark {
  grid-column: 8 / -1; grid-row: 1; align-self: end; justify-self: end;
  width: min(100%, 30rem, 46svh);
  margin-bottom: clamp(1rem, 2vw, 2rem);
}
.hero__intro {
  container-type: inline-size;
  grid-column: 1 / 8; grid-row: 1; align-self: end;
  display: grid; gap: clamp(1.25rem, 2vw, 1.75rem); justify-items: start;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.hero__lead { font-size: var(--step-2); font-weight: 500; line-height: 1.15; letter-spacing: -0.025em; text-wrap: balance; max-width: 30rem; }

/* Knappen och partnerloggorna på samma rad; får de inte plats hamnar loggorna på egen rad under */
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem clamp(1.5rem, 3vw, 2.5rem); width: 100%; }
.hero__partners { display: grid; gap: .55rem; }
.hero__partners-label { font-size: var(--step--1); color: var(--muted); }
.hero__logos {
  /* Bas för loggornas storlek, räknad på radens bredd (uppmätt): knappen + mellanrum tar ~21,5rem,
     loggorna tar tillsammans 11,9 × basen. Då ryms allt på en rad och blir så stort som möjligt. */
  --b: clamp(17px, calc((100cqi - 21.5rem) / 11.9), 36px);
  display: flex; align-items: center; flex-wrap: wrap; gap: .75rem clamp(.9rem, 2.2vw, 1.6rem);
}
/* Varje logga i en ruta lika stor som själva märket (uppmätt). Filen är orörd: bilden placeras
   så att luften runt märket hamnar utanför rutan. Storlekarna är satta efter visuell tyngd, inte höjd. */
.hlogo { position: relative; display: block; }
.hlogo::after { content: ""; position: absolute; left: -.4rem; right: -.4rem; top: min(0px, calc(50% - 22px)); bottom: min(0px, calc(50% - 22px)); }
.hlogo .swap { position: absolute; }
.hlogo--fred       { height: calc(var(--b) * 1.55); aspect-ratio: .98; }
/* Den tända badgen (ring runt ordbilden) sticker ut ~0,25 × basen på alla sidor: raden får plats för den,
   så att ringen aldrig kommer för nära texten ovanför eller loggorna under */
.hlogo--fred { margin-block: calc(var(--b) * .26); }
.hlogo--fred .swap { width: 119.35%; left: -8.63%; top: -8.27%; }
.hlogo--gillatrana { height: calc(var(--b) * .95); aspect-ratio: 2.432; }
.hlogo--gillatrana .swap { width: 123.41%; left: -11.70%; top: -105.93%; }
.hlogo--intersport { height: calc(var(--b) * .5); aspect-ratio: 9.666; }
.hlogo--intersport .swap { width: 102.07%; left: -1.35%; top: -4.54%; }
.hlogo--oasen { height: calc(var(--b) * 1.15); aspect-ratio: 2.804; }
.hlogo--oasen .swap { width: 120.55%; left: -10.27%; top: -34.50%; }
@media (hover: hover) {
  .hlogo:hover .swap__mono { opacity: 0; }
  .hlogo:hover .swap__color { opacity: 1; transform: none; }
}
/* Touch: loggan under fingret tänds (main.js) */
.hlogo.is-lit .swap__mono { opacity: 0; }
.hlogo.is-lit .swap__color { opacity: 1; transform: none; }
.hero__meta {
  display: grid; grid-template-columns: repeat(3, auto); justify-content: start;
  gap: .25rem clamp(1.5rem, 3vw, 2.5rem);
}
.hero__meta dt { font-size: var(--step--1); color: var(--muted); }
.hero__meta dd { font-size: var(--step-1); font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Ordbild: en rad, alltid exakt radens bredd */
.hero__title { grid-column: 1 / -1; grid-row: 2; font-weight: 850; }
.hero__word {
  display: block; white-space: nowrap;
  font-size: var(--word); line-height: .8;
  text-transform: uppercase; letter-spacing: -0.05em;
  margin-left: -0.045em;   /* H:ets luft till vänster, så svärtan börjar exakt i kanten */
  padding-top: .16em; margin-top: -.16em;   /* plats för prickarna över Ä när bokstäverna maskas */
  overflow: clip; overflow-clip-margin: .05em;
}
[data-letters] .l { display: inline-block; }
/* Hjärtat i stället för O (ritas i main.js). Rutan håller sig inom raden; hjärtat ritas utanför den
   (overflow: visible) så att radhöjden och ordets bredd är exakt som med ett O. */
.l__heart {
  display: inline-block; vertical-align: baseline;
  width: .725em; height: .7em; overflow: visible;
  fill: currentColor;
  transform-origin: 54.7% 50.6%;   /* hjärtats mitt (inte rutans) */
  transform: scale(.9259);   /* ritat i 108 %: här O:ets storlek */
}
/* "i Trelleborg": en linje som löper fram till Trelleborgs logga, högerställd mot N:et (texten finns kvar dold för skärmläsare) */
.hero__place {
  display: flex; align-items: center; gap: .55em;
  margin-top: .45em;
  font-size: clamp(1.15rem, calc(var(--word) * .2), 2.5rem);
}
.hero__rule { flex: 1; height: max(1.5px, .06em); background: currentColor; transform-origin: left center; }
/* Trelleborgs logga (rund) i textfärgen via mask, filen orörd. Liten: knappt två gånger den gamla textens höjd. */
.hero__logo {
  flex: none; width: max(1.9em, 2.75rem); aspect-ratio: 1; background: currentColor;   /* minst 44 px: bokstäverna ska gå att läsa på mobil */
  -webkit-mask: url("../img/trelleborg.svg") center / contain no-repeat;
          mask: url("../img/trelleborg.svg") center / contain no-repeat;
}

@media (max-width: 63.99rem) {
  .hero { grid-template-rows: auto auto auto; }
  .hero__mark { grid-column: 1 / -1; grid-row: 1; justify-self: center; align-self: center; width: min(72%, 24rem, 46svh);   /* svh: mobil på tvären, ordbilden syns på första skärmen */
    margin-block: .5rem clamp(1.5rem, 4vw, 2.5rem); }
  .hero__title { grid-row: 2; }
  .hero__intro { grid-column: 1 / -1; grid-row: 3; max-width: none; margin: clamp(2rem, 6vw, 3rem) 0 0; }
}
@media (max-width: 29.99rem) {
  .hero__meta { grid-template-columns: repeat(2, auto); }
  .hero__meta div:nth-child(3) { grid-column: 1 / -1; }
}
/* Om raden bredvid knappen blir för smal (under 40rem) lägger sig loggorna på egen rad under knappen,
   och får då sin storlek från hela radens bredd i stället. */
@container (width < 40rem) {
  .hero__partners { width: 100%; }
  .hero__logos { --b: clamp(15px, calc((100cqi - 3.25rem) / 11.9), 30px); }
}
/* Mobil: knappen på full bredd, loggorna sprids ut över hela bredden */
@media (max-width: 39.99rem) {
  .hero__cta { width: 100%; justify-content: center; }
  .hero__logos { justify-content: space-between; flex-wrap: nowrap; }
}
/* Allra smalast: två och två, annars blir de breda loggorna för låga */
@container (width < 22rem) {
  .hero__logos {
    --b: min(30px, calc((100cqi - 1rem) / 9.9));
    display: grid; grid-template-columns: 1fr 1fr; justify-items: center; gap: 1.1rem .75rem;
  }
}

/* Logga */
.mark { width: 100%; height: auto; overflow: visible; fill: currentColor; }
/* Loggans färger: djuphav/strand, sol (hopparen + spåret ovanför) och hav (de fyra undre vågorna).
   Filen är orörd; färgerna sätts per del här. Gradienterna ligger i <defs> överst i index.php. */
.logo-ink { fill: var(--logo-ink); }
.logo-jump { fill: var(--logo-jump-fill, var(--accent)); }
.logo-sun { fill: var(--logo-sun-fill, url(#logo-sun)); }
.logo-sea { fill: var(--logo-sea-fill, url(#logo-sea)); }
.mark g { transform-box: view-box; }
.mark__all { transform-origin: 145px 142px; }
.mark__palm { transform-origin: 192px 62px; }   /* kronans mitt */

/* ---------- Rullande band ---------- */
.ticker {
  overflow: hidden;
  border-block: 1px solid var(--line);
  padding-block: clamp(.9rem, 2vw, 1.4rem);
  user-select: none;
  /* Lika brett som sidans innehåll (inte hela fönstret på stor skärm), och tonar ut mjukt i kanterna, linjerna också */
  max-width: calc(var(--maxw) - 2 * var(--gutter)); margin-inline: auto;
  --fade: clamp(2rem, 8%, 7rem);
  -webkit-mask: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
          mask: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
}
.ticker__track {
  display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 3rem);
  width: max-content;
  animation: ticker 76s linear infinite;   /* tio namn: samma fart som när bandet hade fem (38 s) */
  font-size: var(--step-3); font-weight: 750; letter-spacing: -0.035em; line-height: 1; white-space: nowrap;
}
.ticker__track span:nth-of-type(even) { color: var(--muted); font-weight: 400; }
.ticker__track i { width: .5em; height: .5em; border-radius: 50%; background: var(--accent); flex: none; }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- Slogan ---------- */
.statement {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter);
  padding-block: var(--section);
}
.statement__quote {
  grid-column: 1 / -1;
  font-size: var(--step-4); font-weight: 750; line-height: 1; letter-spacing: -0.045em;
  text-wrap: balance;
}
.statement__quote .w { opacity: .14; transition: opacity .35s linear; }
.statement__quote .w.is-on { opacity: 1; }
.statement__body {
  grid-column: 6 / -1;
  margin-top: clamp(2rem, 3.5vw, 3.5rem);
  display: grid; gap: clamp(1.25rem, 2vw, 1.75rem);
  color: var(--muted);
  font-size: clamp(1rem, .72rem + .55vw, 1.3rem); line-height: 1.6;   /* växer med skärmen: det är den första texten man läser */
}
.statement__body .lead { color: var(--fg); font-size: clamp(1.2rem, .55rem + 1.45vw, 2rem); line-height: 1.3; letter-spacing: -0.015em; text-wrap: pretty; }

/* Nyckeltal till vänster om ingressen. Siffrorna räknas upp när de syns (main.js). */
.stats {
  grid-column: 1 / 5; grid-row: 2; align-self: start;
  margin-top: clamp(2rem, 3.5vw, 3.5rem);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem) var(--gutter);
}
.stat { display: grid; gap: .45rem; align-content: start; padding-top: .9rem; border-top: 1px solid var(--line); }
.stat__num {
  justify-self: start; display: inline-block;
  font-size: clamp(3rem, 2rem + 4vw, 6rem); font-weight: 850; line-height: .82; letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  transform-origin: 20% 90%;
  transition: scale .5s cubic-bezier(.34, 1.56, .64, 1);
}
.stat__label { color: var(--muted); font-size: var(--step--1); font-weight: 550; }
@media (hover: hover) { .stat:hover .stat__num { scale: 1.08; } }
.statement__body { grid-row: 2; }
/* Surfplatta och mobil: nyckeltalen ovanför ingressen i stället för bredvid */
@media (max-width: 63.99rem) {
  .statement__body { grid-column: 1 / -1; grid-row: 3; }
  .stats { grid-column: 1 / -1; }
}
@media (min-width: 40rem) and (max-width: 63.99rem) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Program ---------- */
.program { padding-bottom: var(--section); }
.days { border-top: 1px solid var(--line); }
.day {
  position: relative;
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 1rem var(--gutter);
  align-items: start;
  padding-block: clamp(1.5rem, 3vw, 2.4rem);
  border-bottom: 1px solid var(--line);
}
.day::before {
  content: ""; position: absolute; inset: 0 calc(var(--gutter) * -1);
  background: var(--surface); z-index: -1;
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .45s var(--ease);
}
.day__date { display: flex; flex-direction: column; line-height: 1; }
.day__dow { font-size: var(--step--1); font-weight: 650; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.day__num { font-size: var(--step-4); font-weight: 800; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; margin-top: .3rem; }

/* Passen under en dag: tid till vänster, passnamn och typ till höger */
.sessions { display: grid; gap: clamp(1.4rem, 2.5vw, 2rem); }   /* luft mellan passen, så att Fredarna inte staplas */
/* Stor skärm, som en tabell: tid – Fred – passets namn och typ – instruktör – plats */
.session {
  display: grid; grid-template-columns: 6.75em 8.5rem minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.3fr) 5.5rem;
  grid-template-rows: 1fr auto auto 1fr; column-gap: clamp(.75rem, 2vw, 1.5rem); align-items: baseline;
}
.session__time { grid-column: 1; grid-row: 2; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.session__fred { grid-column: 2; grid-row: 1 / -1; align-self: center; }
.session__name { grid-column: 3; grid-row: 2; }
.session__type { grid-column: 3; grid-row: 3; }
.session__who, .session__where { grid-row: 2 / span 2; align-self: center; font-size: var(--step--1); color: var(--muted); }
.session__who { grid-column: 4; font-size: var(--step-0); font-weight: 600; color: var(--fg); }   /* instruktören: tydligare än platsen */
.session__where { grid-column: 5; }
.session__book { grid-column: 6; grid-row: 2 / span 2; align-self: center; justify-self: end; }
/* Liten dator (64-85rem): instruktör ovanför platsen i samma kolumn, annars ryms inte namnen */
@media (min-width: 64rem) and (max-width: 84.99rem) {
  .session { grid-template-columns: 6.75em 8.5rem minmax(0, 1.4fr) minmax(0, 1fr) 5.5rem; }
  .session__who, .session__where { grid-column: 4; }
  .session__who { grid-row: 2; align-self: end; }   /* instruktör och plats ihop, även när passnamnet tar två rader */
  .session__where { grid-row: 3; align-self: start; margin-top: .15rem; }
  .session__book { grid-column: 5; }
}
/* Mellanbredd: instruktör och plats under typen */
@media (max-width: 63.99rem) {
  .session { grid-template-columns: 6.75em 8.5rem minmax(0, 1fr); grid-template-rows: 1fr auto auto auto auto auto 1fr; }
  .session__who, .session__where { grid-column: 3; align-self: auto; margin-top: .1rem; }
  .session__who { grid-row: 4; font-size: var(--step--1); }
  .session__where { grid-row: 5; }
  .session__book { grid-column: 3; grid-row: 6; justify-self: start; margin-top: .6rem; }
}
.session__name {
  font-size: var(--step-1); font-weight: 750; line-height: 1.15; letter-spacing: -0.025em; text-wrap: balance;
  transition: transform .45s var(--ease);
}
.session__type { font-size: var(--step--1); color: var(--muted); margin-top: .15rem; }
/* Hover markerar bara passets rad: en mjuk platta bakom raden (bara opacity) och namnet glider lite */
.session { position: relative; isolation: isolate; }
.session::before {
  content: ""; position: absolute; z-index: -1;
  inset: calc(clamp(1.4rem, 2.5vw, 2rem) * -.45) calc(clamp(.6rem, 1.5vw, 1.1rem) * -1);
  border-radius: 1.1rem; background: var(--surface);
  opacity: 0; transition: opacity .35s var(--ease);
}
@media (hover: hover) {
  .session:hover::before { opacity: 1; }
  .session:hover .session__name { transform: translateX(.3rem); }
}
a.session__name { text-decoration: none; }
a.session__name::after { content: "\00a0→"; color: var(--accent); }

/* Bokning: en rad mellan passen och dagarna */
.program__book {
  display: grid; gap: .9rem;
  padding: 1.25rem 0; margin-bottom: clamp(1rem, 2vw, 1.5rem);
}
.program__book p { font-size: var(--step-1); font-weight: 600; letter-spacing: -0.02em; text-wrap: pretty; }   /* en rad där den ryms */
/* Vad som gäller för vem: en rad per gym, med en prick i gymmets knappfärg */
.book-rules { display: grid; gap: .45rem; }
.book-rules li { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; color: var(--muted); font-size: var(--step--1); }
.book-rules strong { color: var(--fg); font-weight: 700; }
.book-rules__dot { width: .7rem; height: .7rem; border-radius: 50%; flex: none; align-self: center; background: linear-gradient(120deg, var(--b1), var(--b2)); }

/* Bokningsknappar i gymmens egna färger (från loggorna), så att man ser var passet bokas.
   Oasen: rött till blått med vit text. GillaTRÄNA: ljusgrönt till grönt med mörk text (vit text blir för svag).
   Vilande: en ren, skarp gradient utan sken eller blanka lager.
   Hover: en tunn list i samma gradient tänds runt knappen, med litet mitt avstånd, som ett lysrör
   (listan = ::before med mask, ett snävt sken = ::after). Bara opacity och transform animeras. */
.book {
  --ink: #fff;
  position: relative;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .6rem .95rem .6rem 1.1rem; border-radius: 999px;
  background: linear-gradient(120deg, var(--b1), var(--b2));
  color: var(--ink); font-size: var(--step--1); font-weight: 700; letter-spacing: -0.01em; line-height: 1;
  text-decoration: none; white-space: nowrap;
  transition: transform .3s var(--ease);
}
.book::before, .book::after {
  content: ""; position: absolute; inset: -4px; border-radius: inherit; pointer-events: none;
  opacity: 0; transform: scale(.94); transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.book::before {
  padding: 2px; background: linear-gradient(120deg, var(--b1h), var(--b2h));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.book::after { box-shadow: -3px 0 8px -2px var(--g1), 3px 0 8px -2px var(--g2); z-index: -1; }
.book__icon { display: inline-block; transition: transform .3s var(--ease); }
.book--oasen { --b1: #a20621; --b2: #2a4b8b; --b1h: #d0102f; --b2h: #3f6fd0; --g1: rgb(208 16 47 / .55); --g2: rgb(63 111 208 / .55); }
.book--gilla { --b1: #a0d14a; --b2: #728d31; --b1h: #b4e85a; --b2h: #8fb13c; --g1: rgb(180 232 90 / .6); --g2: rgb(143 177 60 / .6); --ink: #14230a; }
@media (hover: hover) {
  .book:hover::before, .book:hover::after { opacity: 1; transform: none; }
  .book:hover .book__icon { transform: translate(2px, -2px); }
}
.book:active { transform: scale(.97); }
.book:focus-visible { outline: none; }
.book:focus-visible::before { opacity: 1; transform: none; }

.offers__terms { margin-top: clamp(1.5rem, 3vw, 2.25rem); font-size: var(--step--1); color: var(--muted); max-width: 40rem; text-wrap: balance; }

/* De fem passen, beskrivna en gång ovanför dagarna. Kolumnerna fylls på automatiskt, så att fler pass
   (t.ex. från GillaTRÄNA) också får plats: fem i rad på bred skärm, färre på smalare. */
.passes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.5rem), 1fr)); gap: 2rem var(--gutter);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
/* Stor skärm: alltid fem i rad, så att båda gymmens kort får samma rutnät (Oasen 5, GillaTRÄNA 5 + 4) */
@media (min-width: 64rem) { .passes { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* Passen grupperade per gym: gymmets namn med en prick i bokningsknappens färger ovanför korten */
.pass-group__gym { display: flex; align-items: center; gap: .55rem; margin-bottom: 1.1rem; font-size: var(--step--1); font-weight: 700; letter-spacing: .02em; }
.pass { border-top: 2px solid var(--fg); padding-top: 1rem; }
/* Typ, namn och text linjerar över korten i samma rad även när ett namn tar två rader */
@supports (grid-template-rows: subgrid) {
  .passes { row-gap: 0; }
  .pass { display: grid; grid-template-rows: subgrid; grid-row: span 3; align-content: start; padding-bottom: 2rem; }
}
.pass__type { font-size: var(--step--1); font-weight: 600; color: var(--muted); }
.pass__type span { display: block; }   /* kort med två pass: en typ per rad */
.pass__name { margin: .45rem 0 0; font-size: var(--step-1); font-weight: 750; line-height: 1.12; letter-spacing: -0.025em; text-wrap: balance; }
.pass__text { margin-top: .5rem; color: var(--muted); font-size: var(--step--1); text-wrap: pretty; }

/* Fred som gör passets övning (assets/js/fred-tranar.js). Stillbilden syns tills animationen är redo (is-live),
   sedan tonar den levande Fred in. Vid "minska rörelse" eller utan JavaScript ligger stillbilden kvar. */
.fred-box { position: relative; display: block; aspect-ratio: 4 / 3; }   /* ingen bakgrund: Fred klarar sig själv */
.fred-box__still, .fred-box__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.fred-box__still { object-fit: contain; transition: opacity .5s var(--ease); }
.fred-box__canvas { opacity: 0; transition: opacity .5s var(--ease); }
.fred-box.is-live .fred-box__canvas { opacity: 1; }
.fred-box.is-live .fred-box__still { opacity: 0; }
.fred-box__still--dark { display: none; }
:root[data-theme="dark"] .fred-box__still--light { display: none; }
:root[data-theme="dark"] .fred-box__still--dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fred-box__still--light { display: none; }
  :root:not([data-theme="light"]) .fred-box__still--dark { display: block; }
}
/* Ordbildernas bokstäver (main.js, data-letters) ritas här, så att bara det dolda hela ordet räknas som text */
.l[data-ch]::before { content: attr(data-ch); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.day--main .day__num { position: relative; z-index: 0; margin-top: .3em; }
.day--main .day__num::before {
  content: ""; position: absolute; z-index: -1;
  left: 50%; top: 52%; width: 1.2em; height: 1.2em; translate: -50% -50%;
  border-radius: 50%; background: var(--accent);
}
.day--main .day__num { color: var(--on-accent); align-self: flex-start; padding-inline: .05em; }

@media (max-width: 47.99rem) {
  /* Mobil: datumet ovanför passen (på en rad), så att passen får hela bredden */
  .day { grid-template-columns: minmax(0, 1fr); row-gap: 1rem; }
  .day__date { flex-direction: row; align-items: baseline; gap: .6rem; }
  .day__date .day__num { margin-top: 0; }
  .day__num { font-size: var(--step-3); }
  .session { grid-template-columns: 7.5rem minmax(0, 1fr); grid-template-rows: 1fr auto auto auto auto auto auto 1fr; }
  .session__fred { grid-column: 1; grid-row: 1 / -1; }
  .session__time { grid-column: 2; grid-row: 2; font-size: var(--step--1); color: var(--muted); }
  .session__name { grid-column: 2; grid-row: 3; }
  .session__type { grid-column: 2; grid-row: 4; }
  .session__who { grid-column: 2; grid-row: 5; }
  .session__where { grid-column: 2; grid-row: 6; }
  .session__book { grid-column: 2; grid-row: 7; }
}

/* ---------- Lördag ---------- */
.saturday {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--invert-bg); color: var(--invert-fg);
  padding-block: var(--section);
}
.saturday .eyebrow { color: var(--invert-muted); }
.saturday__sun {
  position: absolute; z-index: -1;
  width: clamp(12rem, 26vw, 24rem); aspect-ratio: 1;
  right: clamp(-6rem, -4vw, -2rem); top: clamp(-7rem, -6vw, -2rem);
  border-radius: 50%; background: var(--accent);
  will-change: transform;
}
.saturday__head { max-width: 46rem; }
.saturday__head h2 {
  margin-top: 1rem;
  font-size: min(var(--step-4), calc((100vw - 2 * var(--gutter)) / 8));   /* sista raden "veckan kulminerar." är ~7,8em bred */
  font-weight: 750; line-height: 1; letter-spacing: -0.045em;
  text-wrap: balance;
}
.highlights {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter);
  margin-top: clamp(2.5rem, 4vw, 4.5rem);
  counter-reset: h;
}
.highlights li { border-top: 1px solid var(--invert-line); padding-top: 1.25rem; }
.highlights__num { font-size: var(--step--1); font-weight: 650; color: var(--accent); font-variant-numeric: tabular-nums; }
.highlights h3 { margin-top: 1.5rem; font-size: var(--step-2); font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; }
.highlights p { margin-top: .75rem; color: var(--invert-muted); }
/* Kustjoggarnas logga ERSÄTTER rubriken i punkt 04 (texten finns kvar för skärmläsare), i samma färg som texten (de har ingen bestämd färg). Filen är orörd och används som mask.
   Märket börjar 3 % in i filen, därav den negativa marginalen: då linjerar det med texten. */
.highlights__logo-title { line-height: 0; }
.highlights__logo {
  display: block; width: min(100%, 12rem); aspect-ratio: 566.93 / 283.46;
  margin-left: calc(min(100%, 12rem) * -0.03);
  background: var(--invert-fg);
  -webkit-mask: url("../img/partners/kustjoggarna.svg") center / contain no-repeat;
          mask: url("../img/partners/kustjoggarna.svg") center / contain no-repeat;
}
/* Fyra punkter: två och två i mellanbredd, en kolumn på mobil */
@media (max-width: 79.99rem) { .highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: clamp(2rem, 4vw, 3rem); } }
@media (max-width: 47.99rem) { .highlights { grid-template-columns: minmax(0, 1fr); gap: 2rem; } .highlights h3 { margin-top: .75rem; } }
@media (max-width: 47.99rem) { .saturday__sun { width: 9rem; top: -6.25rem; right: -3.5rem; } }   /* ligger ovanför texten på mobil */

/* ---------- Anettes hälsoshots ---------- */
.shots {
  /* inget klipp här: armar, glas och droppar får gå ut över texten (body har overflow-x: clip mot sidscroll) */
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter);
  grid-template-rows: auto 1fr;   /* den höga textkolumnen sträcker bara nedre raden: budskapet ligger direkt under Anette */
  align-items: start; padding-top: var(--section);   /* ingen luft nedtill: erbjudandena under har redan sin egen */
}
.shots__figure { grid-column: 1 / 6; grid-row: 1; position: relative; z-index: 2; isolation: isolate; }   /* ovanför texten */
/* Stor skärm: Anette linjerar mot toppen, i höjd med rubriken (ingen fastlåsning: den gav känslan av scroll i scroll) */
/* Varm skiva bakom henne, så att figuren står fint mot både ljus och mörk bakgrund */
.shots__figure::before {
  content: ""; position: absolute; z-index: -1;
  left: 8%; right: 8%; top: 14%; aspect-ratio: 1; border-radius: 50%;
  background: var(--shots-disc);
}
.anette { position: relative; aspect-ratio: 843 / 1149; }   /* inget klipp: armarna och dropparna får gå utanför */
.anette__still { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .4s var(--ease); }
.anette.is-live .anette__still { opacity: 0; }
.anette__rig { position: absolute; left: 0; width: 100%; transform-origin: 50% 100%; }
.anette__rig img, .anette__rig canvas, .anette__rig svg { position: absolute; display: block; }
.anette__rig svg { inset: 0; width: 100%; height: 100%; }
.anette__rig canvas { pointer-events: none; }   /* läge och storlek sätts i anette.js (får gå utanför figuren) */
.anette__joint { position: absolute; inset: 0; }
/* Greppytor över händerna: där går det att ta tag och skaka (touch-action bara där, resten scrollar som vanligt) */
.anette__grab { position: absolute; border-radius: 50%; cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; }
.anette.is-grabbing, .anette.is-grabbing .anette__grab { cursor: grabbing; }
.anette__rig { -webkit-user-select: none; user-select: none; }
.shots__body { grid-column: 6 / -1; grid-row: 1 / span 2; }
/* Stort budskap under Anette (fyller luften i vänsterkolumnen); allergiinfo som mindre rad */
.shots__note {
  grid-column: 1 / 6; grid-row: 2; margin-top: clamp(2rem, 4vw, 3rem);
  font-size: var(--step-2); font-weight: 750; line-height: 1.05; letter-spacing: -0.035em; text-wrap: balance;
  /* Vänsterställd text, men blocket centrerat under Anettes jeans (smalare än kolumnen) */
  justify-self: center; width: min(100%, 9em);
  margin-left: 2.2%;   /* jeansens mitt ligger 1,1 % till höger om figurens mitt (uppmätt; blocket förskjuts halva marginalen) */
}
.shots__note > span {
  display: block; margin-top: .75rem;
  font-size: var(--step--1); font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; color: var(--muted);
}
.shots__body .section-head { margin-bottom: 1.25rem; }
/* Loggan under notisen: vem som bjuder (i färg; mörkt läge = den negativa versionen). Filerna har luft runt märket, så
   bilden görs större och förskjuts (inget beskärs, uppmätt): märkets vänsterkant linjerar med texten ovanför. */
.shots__note > .note-logo { position: relative; display: block; margin-top: clamp(2rem, 4vw, 3rem); }
.note-logo img { position: absolute; max-width: none; height: auto; }
.note-logo--oasen { width: 100%; aspect-ratio: 2.798; }   /* så bred som notisen: de är våra kompisar */
.note-logo--oasen img { width: 120.48%; left: -10.24%; top: -34.26%; }
.note-logo--gilla { width: 100%; aspect-ratio: 2.429; }
.note-logo--gilla img { width: 123.21%; left: -11.61%; top: -105.47%; }
.note-logo .is-dark { display: none; }
:root[data-theme="dark"] .note-logo .is-light { display: none; }
:root[data-theme="dark"] .note-logo .is-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .note-logo .is-light { display: none; }
  :root:not([data-theme="light"]) .note-logo .is-dark { display: block; }
}
.shots__lead { font-size: var(--step-1); line-height: 1.4; letter-spacing: -0.01em; max-width: 36rem; text-wrap: pretty; }
.shot-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--gutter); margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.shot-card { display: grid; align-content: start; gap: .6rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
/* Liten bild av shoten bredvid namnet (samma glas som Anette håller) */
.shot-card__head { display: flex; align-items: center; gap: .85rem; }
.shot-card__head img { width: 2.6rem; height: auto; flex: none; }
.shot-card h3 { font-size: var(--step-1); font-weight: 750; line-height: 1.15; letter-spacing: -0.025em; text-wrap: balance; }
.shot-card__note { color: var(--muted); font-size: var(--step--1); }
.shot-card__list { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .35rem; }
.shot-card__list li {
  padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--line);
  font-size: var(--step--1); font-weight: 600; line-height: 1.2;
}
.ingredients { margin-top: clamp(2.75rem, 5vw, 4rem); }
.ingredients__title { font-size: var(--step-1); font-weight: 750; line-height: 1.15; letter-spacing: -0.025em; }
.ingredients__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: clamp(1.25rem, 2.5vw, 1.75rem) var(--gutter); margin-top: 1.25rem;
}
.ingredients__grid li { position: relative; isolation: isolate; border-top: 1px solid var(--line); padding-top: .9rem; }
/* Rutan tänds när man hovrar över etiketten (eller rutan själv): en varm platta bakom, bara opacity animeras */
.ingredients__grid li::before {
  content: ""; position: absolute; z-index: -1; inset: -1px -.9rem -.9rem;
  border-radius: 0 0 .9rem .9rem; background: var(--shots-disc);
  opacity: 0; transition: opacity .3s var(--ease);
}
.ingredients__grid li.is-lit::before { opacity: 1; }
.shot-card__list li { transition: border-color .3s var(--ease), background-color .3s var(--ease); }
.shot-card__list li[data-ing] { cursor: default; }
.shot-card__list li.is-lit { border-color: var(--fg); background: var(--shots-disc); }
.ingredients__grid h4 { display: flex; align-items: center; gap: .5rem; font-size: var(--step-0); font-weight: 750; letter-spacing: -0.01em; }
.ingredients__grid p { margin-top: .4rem; color: var(--muted); font-size: var(--step--1); line-height: 1.5; text-wrap: pretty; }
/* Små prickar i shotsens färger: visar vilken shot ingrediensen finns i (samma färger som korten ovanför) */
.ing__in { display: inline-flex; gap: .2rem; }
.ing__in i { width: .6rem; height: .6rem; border-radius: 50%; background: var(--shot); }
@media (max-width: 63.99rem) {
  .shots__figure { grid-column: 1 / -1; width: min(100%, 24rem, 77vw); justify-self: center; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
  .shots__body { grid-column: 1 / -1; grid-row: auto; }
  .shots__figure, .shots__note { grid-row: auto; }
  /* Mobil/surfplatta: notisen och loggan vänsterställda mot textkanten (som resten av texten), inte under figuren */
  .shots__note { grid-column: 1 / -1; justify-self: start; margin-left: 0; }
}

/* ---------- Barbros ADDED (spegelvänd mot Anettes hälsoshots: texten till vänster, Barbro till höger) ---------- */
.added {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter);
  grid-template-rows: auto 1fr; align-items: start; padding-top: var(--section);
  --shots-disc: var(--added-disc);   /* korten och ingredienserna tänds i Barbros gröna */
}
.added__figure { grid-column: 8 / -1; grid-row: 1; position: relative; z-index: 2; isolation: isolate; }
/* Barbro lika stor som Anette: hennes bild rymmer de utsträckta armarna, så kropp och huvud blir 1,3 gånger mindre vid
   samma bredd (uppmätt). Bilden är därför 130 % av kolumnen och armarna går utanför, mest åt vänster: armbågen når in
   över textsidan (som Anettes armar när man drar i dem). */
.added__figure .barbro { width: 130%; margin-left: -22%; }
.added__figure::before {
  content: ""; position: absolute; z-index: -1;
  left: -2%; right: 18%; top: 14%; aspect-ratio: 1; border-radius: 50%;   /* bakom hennes kropp (ligger till vänster i kolumnen) */
  background: var(--added-disc);
}
.added__body { grid-column: 1 / 7; grid-row: 1 / span 2; }   /* en kolumn luft: där når hennes armbåge in */
.added__body .section-head { margin-bottom: 1.25rem; }
/* ADDED:s logga i rubriken, i textfärgen (mask, loggfilen orörd). Bokstäverna fyller hela loggans höjd = versalhöjden. */
.added__logo {
  display: inline-block; height: .7em; aspect-ratio: 165 / 39; vertical-align: baseline;
  background: currentColor;
  -webkit-mask: url("../img/partners/added.svg") center / contain no-repeat;
          mask: url("../img/partners/added.svg") center / contain no-repeat;
}
.shots__note.added__note { grid-column: 8 / -1; margin-left: -23%; width: min(100%, 10.5em); }   /* under hennes byxor (centrerat block: förskjuts halva marginalen) */
.barbro { position: relative; aspect-ratio: 896 / 945; }
.barbro__still { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .4s var(--ease); }
.barbro.is-live .barbro__still { opacity: 0; }
.barbro__rig { position: absolute; left: 0; width: 100%; transform-origin: 50% 100%; -webkit-user-select: none; user-select: none; }
.barbro__rig img, .barbro__rig canvas, .barbro__rig svg { position: absolute; display: block; }
.barbro__rig svg { inset: 0; width: 100%; height: 100%; pointer-events: none; }
.barbro__rig canvas { pointer-events: none; }   /* kartongerna: läge och storlek sätts i barbro.js */
.barbro__joint { position: absolute; inset: 0; }
/* Greppytor över kartongerna: där går det att vrida dem (touch-action bara där, resten scrollar som vanligt) */
.barbro__grab { position: absolute; border-radius: 50%; cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; }
.barbro.is-grabbing, .barbro.is-grabbing .barbro__grab { cursor: grabbing; }
@media (max-width: 63.99rem) {
  /* 1,3 x Anettes bredd (se ovan). På telefon når händerna skärmkanten (sidans marginal) och Anette är lite smalare (77vw). */
  .added__figure { grid-column: 1 / -1; width: min(calc(100% + 2 * var(--gutter)), 31.2rem); justify-self: center; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
  .added__figure .barbro { width: 100%; margin-left: 0; }
  .added__body { grid-column: 1 / -1; grid-row: auto; }
  .added__figure, .shots__note.added__note { grid-row: auto; }
  .added__figure::before { left: 8%; right: 8%; top: 18%; }
  .shots__note.added__note { grid-column: 1 / -1; justify-self: start; margin-left: 0; }
}

/* ---------- Linjer mellan avdelningar som inte skiljs åt av färg ----------
   Samma tunna linje som i schemat och sidfoten, i innehållets bredd (innanför sidmarginalen), mitt i luften mellan
   avdelningarna. Luften på var sida är 0,7 x en avdelnings vanliga avstånd (lite mer luft totalt än utan linje). */
.statement { padding-bottom: calc(var(--section) * .7); }
.shots { padding-bottom: calc(var(--section) * .7); }
.added { padding-bottom: calc(var(--section) * .7); }
.program, .added, .offers, .partners {
  padding-top: calc(var(--section) * .7);
  background: linear-gradient(var(--line), var(--line)) center top / calc(100% - 2 * var(--gutter)) 1px no-repeat;
}

/* ---------- Erbjudanden ---------- */
.offers { padding-block: calc(var(--section) * .7); }   /* linje och luft: se Linjer mellan avdelningar */
.coupons { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; gap: var(--gutter); }
/* ALLA kuponger är lika breda och lika höga, oavsett skärm (Mathias): raderna är lika höga som den högsta kupongen
   (grid-auto-rows: 1fr). Mobil: en per rad, stående. Halvstora skärmar (40–64rem): en per rad, liggande (se längre ner).
   Dator: högst tre per rad i ett rutnät med sex kolumner där varje kupong tar två; går antalet inte jämnt upp i treor
   CENTRERAS de sista (aldrig bredare kort): 5 = 3 + 2 centrerade, 4 = 2 + 2 centrerade, 7 = 3 + 2 + 2 osv. */
@media (min-width: 64rem) {
  .coupons { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .coupon-wrap { grid-column: span 2; }
  /* rest 2 (5, 8, 11 …): de två sista centrerade */
  .coupon-wrap:nth-last-child(2):nth-child(3n+1) { grid-column: 2 / span 2; }
  /* rest 1 (4, 7, 10 …): de fyra sista som två centrerade par */
  .coupon-wrap:nth-last-child(4):nth-child(3n+1),
  .coupon-wrap:nth-last-child(2):nth-child(3n+3) { grid-column: 2 / span 2; }
}
/* Omslaget bär inglidningen (reveal); själva kortet bär hover-lyftet.
   Skuggan är en suddig fläck under kortets MITT (inte en kopia av kortet): den når aldrig ut till kanterna,
   så den syns varken genom hålslagen eller som en kant under kortet. Oskärpan är fast och ritas en gång;
   vid hover animeras bara opacity och transform. */
.coupon-wrap { position: relative; isolation: isolate; }
.coupon-wrap::before {
  content: ""; position: absolute; z-index: -1;
  left: 7%; right: 7%; top: 45%; bottom: 3%;
  border-radius: 40% / 50%;
  background: rgb(20 58 64 / .55);
  filter: blur(22px);
  opacity: 0; transform: translateY(0) scale(.9);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
  will-change: opacity, transform;
}
.coupon-wrap:hover::before { opacity: .5; transform: translateY(1rem) scale(1); }
:root[data-theme="dark"] .coupon-wrap::before { background: rgb(0 0 0 / .95); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .coupon-wrap::before { background: rgb(0 0 0 / .95); }
}

.coupon {
  container-type: inline-size;
  --notch: 1.1rem;
  --cut: clamp(13rem, 11rem + 4vw, 15.5rem);
  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface);
  border-radius: var(--radius);
  /* Hålslag i kanterna, som en riktig kupong */
  -webkit-mask: radial-gradient(circle var(--notch) at 0 var(--cut, 11rem), #0000 98%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle var(--notch) at 100% var(--cut, 11rem), #0000 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle var(--notch) at 0 var(--cut, 11rem), #0000 98%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle var(--notch) at 100% var(--cut, 11rem), #0000 98%, #000) right / 51% 100% no-repeat;
  height: 100%;
  transition: transform .55s var(--ease);
  will-change: transform;   /* eget grafiklager: masken ritas en gång, sedan flyttas bara lagret */
}
/* Ljus hinna över kortet vid hover (syns mest i mörkt läge), också bara opacity */
.coupon::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, rgb(255 255 255 / .55), rgb(255 255 255 / 0) 55%);
  opacity: 0; transition: opacity .55s var(--ease);
}
.coupon-wrap:hover .coupon { transform: translateY(-.75rem); }
.coupon-wrap:hover .coupon::after { opacity: .5; }
:root[data-theme="dark"] .coupon::after { background: linear-gradient(160deg, rgb(255 255 255 / .09), rgb(255 255 255 / 0) 60%); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .coupon::after { background: linear-gradient(160deg, rgb(255 255 255 / .09), rgb(255 255 255 / 0) 60%); }
}
.coupon__top { height: var(--cut, 11rem); padding: clamp(1.5rem, 3vw, 2.25rem); display: flex; flex-direction: column; border-bottom: 2px dashed var(--line); }
.coupon__when { color: var(--muted); font-weight: 550; max-width: calc(100% - 5rem); text-wrap: balance; }
/* Övre raden: "Du får", liten logga för den som ger erbjudandet, och plats för stämpeln. Loggan är samma orörda fil som
   uppe i toppen (rutan = märket, uppmätt) och mitt i den lediga ytan; den krymper om ytan blir smal. Enfärgad i textfärg,
   i färg när man pekar på kupongen (touch: kupongen mitt på skärmen, main.js). */
.coupon__head {
  --b: 1.8rem;
  container: chead / inline-size;   /* raden mäts (inte innehållet): textloggan byter rad när den blir smal */
  padding-right: calc(5.45rem + .8rem - clamp(1.5rem, 3vw, 2.25rem));   /* stämpeln: 1,25 + 4,2 rem från kortets kant */
}
.coupon__row {
  display: flex; align-items: center; gap: .75rem; min-height: 3rem;
  /* Ordbilderna (Intersport, A Fish named Freds textlogga) har samma bokstavshöjd. Höjden är vald så att Intersport
     ryms även i de smalaste korten (tre i rad vid 1024 px); bara i liggande kort på 640 px krymper den lite. */
  --wm-h: .7rem;
}
.coupon__row .coupon__when { flex: none; max-width: none; }
.coupon__logo { flex: 0 1 auto; min-width: 0; margin-inline: auto; height: auto; }   /* krymper (med bibehållen form) om ytan blir smal */
.coupon__logo.hlogo--fred       { width: calc(var(--b) * 1.7 * .98); aspect-ratio: .98; margin-block: 0; }
.coupon__logo.hlogo--oasen      { width: calc(var(--b) * 1.15 * 2.804); aspect-ratio: 2.804; }
.coupon__logo.hlogo--gillatrana { width: calc(var(--b) * 1.05 * 2.432); aspect-ratio: 2.432; }
.coupon__logo.hlogo--intersport { width: calc(var(--wm-h) * 9.666); aspect-ratio: 9.666; }
.coupon__logo::after { content: none; }
/* A Fish named Freds textlogga (rutan = ordbilden, uppmätt i PDF:en 47,5..1504,3 × 727,9..826,9 av 1532 × 1555) i textfärg.
   Bara i erbjudandena, och bara där den ryms; det runda märket används överallt annars. Samma bokstavshöjd som Intersport. */
.coupon__logo--word { display: none; position: relative; aspect-ratio: 14.721; width: calc(var(--wm-h) * 14.721); }
.coupon__logo--word img { position: absolute; display: block; max-width: none; height: auto; width: 105.163%; left: -3.263%; top: -735.57%; filter: url(#logo-tint); opacity: .9; }
/* Textloggan bara där den får plats i full storlek bredvid "Du får"; annars det runda märket (Mathias). Textloggan
   används inte någon annanstans på sidan. */
@container chead (min-width: 14.5rem) {
  .coupon__logo--word { display: block; }
  .coupon__logo--emblem { display: none; }
}
}
@media (hover: hover) {
  .coupon-wrap:hover .coupon__logo .swap__mono { opacity: 0; }
  .coupon-wrap:hover .coupon__logo .swap__color { opacity: 1; transform: none; }
}
.coupon-wrap.is-lit .coupon__logo .swap__mono { opacity: 0; }
.coupon-wrap.is-lit .coupon__logo .swap__color { opacity: 1; transform: none; }
.coupon__big { font-size: min(var(--step-4), 15cqi); font-weight: 800; letter-spacing: -0.05em; line-height: .95; margin-top: auto; padding-top: .5rem; }
.coupon__bottom { padding: clamp(1.5rem, 3vw, 2.25rem); display: grid; gap: 1rem; }
.coupon__sub { font-size: var(--step-1); font-weight: 650; line-height: 1.2; letter-spacing: -0.01em; margin-top: .4rem; text-wrap: balance; }
/* Vad du gör och var, var det löses in och vad det är värt: samma rader på varje kupong */
.coupon__facts { margin: 0; display: grid; gap: .95rem; }
.coupon__facts > div { display: grid; gap: .2rem; }
.coupon__facts dt { font-size: var(--step--1); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.coupon__facts dd { margin: 0; font-size: var(--step-0); line-height: 1.45; text-wrap: pretty; }
.coupon__value dd { font-weight: 700; }
.coupon__stamp {
  position: absolute; top: 1.25rem; right: 1.25rem; z-index: 1;
  width: 4.2rem; height: 4.2rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent);
  font-weight: 800; font-size: 1rem; letter-spacing: -0.02em;
  rotate: 12deg;
  transition: rotate .7s cubic-bezier(.34, 1.56, .64, 1), scale .7s cubic-bezier(.34, 1.56, .64, 1);
}
.coupon-wrap:hover .coupon__stamp { rotate: -6deg; scale: 1.08; }
/* Halvstora skärmar: liggande kupong. "Du får" till vänster, perforeringen lodrät (hålslagen uppe och nere),
   Gör så här / Löses in hos / Värde till höger. Stämpeln sitter kvar i den vänstra delens övre hörn. */
@media (min-width: 40rem) and (max-width: 63.999rem) {
  .coupons { grid-auto-rows: 1fr; }   /* alla lika höga */
  .coupon {
    --stub: 46%;
    flex-direction: row;
    -webkit-mask: radial-gradient(circle var(--notch) at var(--stub) 0, #0000 98%, #000) top / 100% 51% no-repeat,
                  radial-gradient(circle var(--notch) at var(--stub) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
            mask: radial-gradient(circle var(--notch) at var(--stub) 0, #0000 98%, #000) top / 100% 51% no-repeat,
                  radial-gradient(circle var(--notch) at var(--stub) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
  }
  .coupon__top { flex: 0 0 var(--stub); height: auto; min-height: 12rem; border-bottom: 0; border-right: 2px dashed var(--line); }
  .coupon__bottom { flex: 1; align-content: center; }
  .coupon__stamp { right: calc(100% - var(--stub) + 1.25rem); }
}

/* ---------- Partners ---------- */
.partners { padding-bottom: var(--section); }
.partner-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
.partner-grid li {
  --logo-box: min(9.75rem, 70cqi);  /* samma loggyta i alla rutor → texterna linjerar */
  position: relative; isolation: isolate;
  container-type: inline-size;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem;
  text-align: center;
  min-height: clamp(16rem, 23vw, 19rem);
  padding: clamp(1.5rem, 2.5vw, 2.25rem) clamp(1rem, 2vw, 1.75rem);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
/* Bakgrunden vid hover är ett eget lager som bara tonas (opacity), så grafikkortet sköter det */
.partner-grid li::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--surface); opacity: 0;
  transition: opacity .45s var(--ease);
}
.partner__mark { position: relative; display: grid; place-items: center; width: 100%; height: var(--logo-box); }
/* Hela rutan är klickbar: en tom länk (med aria-label) täcker rutan */
.partner__link { position: absolute; inset: 0; z-index: 1; }
.partner__link:focus-visible { outline: 2px solid var(--fg); outline-offset: -2px; }
.partner__url {
  margin-top: -.5rem; font-size: var(--step--1); font-weight: 600; color: var(--muted);
  transition: color .45s var(--ease);
}
.partner-grid li.is-lit .partner__url { color: var(--fg); }
@media (hover: hover) { .partner-grid li:hover .partner__url { color: var(--fg); } }
.partner__role {
  min-height: 2.7em; max-width: 20rem; line-height: 1.35; text-wrap: balance;
  color: var(--muted); font-size: var(--step--1);
  transition: color .45s var(--ease);
}
/* Smala rutor (mobil): plats för tre rader så texterna i samma rad börjar på samma höjd */
@container (width < 14rem) { .partner__role { min-height: 4.05em; } }

/* Loggorna: originalfilerna, orörda. Två lager per logga: ett svartvitt (fast filter, animeras aldrig)
   och ett i färg ovanpå. Vid hover tonas bara lagrens opacity, vilket är mjukt även på svaga datorer.
   Storlekar i cqi = andel av rutans bredd, så loggorna väger lika mycket på alla skärmar. */
.swap { position: relative; display: block; }
.swap img { display: block; width: 100%; height: auto; max-width: none; }
/* Svartvit = loggans form fylld med exakt samma djuphav/strand som texten (SVG-filtret #logo-tint i index.php) */
.swap__mono { filter: url(#logo-tint); opacity: .9; }
.logo-tint-flood { flood-color: var(--logo-ink); }
.swap__color { position: absolute; left: 0; top: 0; opacity: 0; }
.swap__mono, .swap__color { transition: opacity .45s var(--ease), transform .6s var(--ease); will-change: opacity; }

/* gillaTRÄNA-filen har mycket luft runt märket, så bilden görs bredare än märket (inget beskärs) */
.swap--gillatrana { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: min(100cqi, 15rem); pointer-events: none; }
.swap--intersport { width: min(88cqi, 14rem); }
/* Oasens märke ligger mitt i filen med luft runt om, så bilden görs bredare än märket (inget beskärs) */
.swap--oasen { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: min(100cqi, 14.5rem); pointer-events: none; }

/* Fred: svartvit ordbild (LOGO.svg) + färgbadgen ovanpå. Uppmätt så att fisken ligger exakt still:
   badgen är 1,134 × ordbildens bredd och förskjuten -7,57 % / -6,85 %.
   Bredden väljs så att den tända badgen precis fyller loggytan: 1,134 × 0,882 = 1. */
.swap--fred { width: calc(var(--logo-box) * 0.882); }
.swap--fred .swap__color { left: -7.57%; top: -6.85%; width: 113.4%; transform: scale(.96); transform-origin: 49.7% 50%; }

/* Tänd: hover med mus. På touch sätter main.js .is-lit (en i taget när man scrollar). :hover bara med mus,
   annars fastnar en tryckt ruta tänd på mobilen. */
.partner-grid li.is-lit::before { opacity: 1; }
.partner-grid li.is-lit .swap__mono { opacity: 0; }
.partner-grid li.is-lit .swap__color { opacity: 1; transform: none; }
.partner-grid li.is-lit .partner__role { color: var(--fg); }
@media (hover: hover) {
  .partner-grid li:hover::before { opacity: 1; }
  .partner-grid li:hover .swap__mono { opacity: 0; }
  .partner-grid li:hover .swap__color { opacity: 1; transform: none; }
  .partner-grid li:hover .partner__role { color: var(--fg); }
}

/* Mörkt läge: GillaTRÄNA och Oasen har mörk text, så där visas negativa versioner (texten i strand) i stället.
   Originalfilerna är orörda; *-negativ.svg är kopior där bara den svarta/mörkgrå texten är ljus. */
.swap .swap__color--dark { display: none; }   /* .swap för att vinna över ".swap img" */
:root[data-theme="dark"] .swap__color--light { display: none; }
:root[data-theme="dark"] .swap__color--dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .swap__color--light { display: none; }
  :root:not([data-theme="light"]) .swap__color--dark { display: block; }
}
@media (max-width: 63.99rem) { .partner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Touch: under varandra, så att bara en tänds i taget när den passerar mitten av skärmen */
@media (hover: none) and (max-width: 63.99rem) {
  .partner-grid { grid-template-columns: minmax(0, 1fr); }
  .partner-grid li { min-height: 0; padding-block: clamp(2rem, 7vw, 2.75rem); }
  .partner__role { min-height: 0; }
}

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding-block: clamp(2rem, 5vw, 4rem) calc(1.5rem + env(safe-area-inset-bottom)); overflow: hidden; }
.site-footer__word {
  font-weight: 850; text-transform: uppercase; letter-spacing: -0.05em; line-height: .8;
  font-size: calc(100cqi / 6.585);   /* samma uträkning som i hero: fyller exakt radens bredd */
  margin-left: -0.045em; white-space: nowrap;
}
.site-footer .wrap { container-type: inline-size; }
.site-footer__row {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem); color: var(--muted); font-size: var(--step--1);
}
.site-footer__row a { text-decoration: none; color: var(--fg); font-weight: 600; }
.site-footer__top { display: inline-block; padding-block: .8rem; margin-block: -.8rem; }

/* ==========================================================================
   Animationer (bara med JS och om besökaren inte bett om mindre rörelse)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(1.75rem); transition: opacity .9s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0s); }
  .js .reveal.is-in { opacity: 1; transform: none; }

  /* Hero: bokstäverna reser sig en i taget, linjen dras ut, Trelleborgs logga rullar in */
  .js .hero__word .l { transform: translateY(105%); }
  .js .hero__rule { transform: scaleX(0); transition: transform 1.1s var(--ease) .55s; }
  /* Loggan rullar in längs linjen och stannar i slutet av den (1,5em framåt = ett kvarts varv för en 1,9em stor cirkel) */
  .js .hero__logo { opacity: 0; transform: translateX(-1.5em) rotate(-90deg); transition: opacity .6s var(--ease) 1s, transform 1.1s var(--ease) 1s; }
  .js .hero__intro { opacity: 0; transform: translateY(1rem); transition: opacity .9s var(--ease) .7s, transform .9s var(--ease) .7s; }
  .js .is-loaded .hero__word .l, .js .is-loaded .hero__rule, .js .is-loaded .hero__logo, .js .is-loaded .hero__intro { opacity: 1; transform: none; }

  /* Ordbilden (rubriken och footern): hjärtat slår hela tiden, dubbelslag som ett riktigt hjärta
     (ca 60 slag i minuten). Bara transform (grafikkortet sköter det). Rubriken börjar slå när introt är klart (.is-done). */
  .hero__word.is-done { overflow: visible; }
  .js .hero__word .l { transition: transform 1s var(--ease) calc(var(--i) * 45ms); }
  [data-letters].is-done .l__heart { animation: heartbeat 1.1s ease-in-out infinite; will-change: transform; }
  /* Dubbelslag som ett riktigt hjärta: först lite (104 %), sedan mer (108 %), sedan paus.
     Hjärtat får gå lite utanför S och V i toppen. Det är ritat i 108 %, så slaget skalar bara nedåt och blir aldrig suddigt. */
  @keyframes heartbeat {
    0%, 48%, 100% { transform: scale(.9259); }
    10% { transform: scale(.963); }
    18% { transform: scale(.9352); }
    30% { transform: scale(1); }
  }

  /* Logga. Bara fristående delar rör sig på egen hand. Ringen, vågorna och löparen längst
     till vänster sitter ihop (samma former) och rör sig därför bara som en enhet. */
  .js .mark g { opacity: 0; transition: opacity .9s var(--ease), transform 1.3s var(--ease); }
  .js .mark__all { opacity: 1; transform: scale(.94); }
  .js .mark__palm { transform: scale(.85); }
  .js .is-loaded .mark g { opacity: 1; transform: none; }
  .js .is-loaded .mark__fig--1 { transition-delay: .3s; }
  .js .is-loaded .mark__fig--2 { transition-delay: .45s; }
  .js .is-loaded .mark__fig--3 { transition-delay: .6s; }
  .js .is-loaded .mark__palm { transition-delay: .8s; }

  /* Efter intro: palmen vajar lätt i kronan (±1,5°, uppmätt så att inget krockar).
     Hoppet hos personen längst till höger är borttaget på användarens begäran. */
  /* Palmen vajar. Börjar på 0° (där introt slutar), så att den inte hoppar när vajningen tar över, och svänger
     som en sinus: samma fart genom mitten i loopens skarv som mitt i, så att loopen aldrig rycker. */
  .mark.is-idle .mark__palm { animation: sway 14s infinite; }
  @keyframes sway {
    0%   { transform: rotate(0deg);    animation-timing-function: cubic-bezier(.33, .67, .67, 1); }   /* ut från mitten, bromsar */
    25%  { transform: rotate(1.5deg);  animation-timing-function: cubic-bezier(.37, 0, .63, 1); }     /* vänder, genom mitten */
    75%  { transform: rotate(-1.5deg); animation-timing-function: cubic-bezier(.33, 0, .67, .33); }   /* vänder, tillbaka mot mitten */
    100% { transform: rotate(0deg); }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .ticker__track [data-clone] { display: none; }
  .statement__quote .w { opacity: 1; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}