/* ============================================================================
   slides-02.css — REFERENCIÁK + PR KAMPÁNYOK (PPT dia-10 … dia-14 + Bridgestone)
   Saját sáv: site/slides/02-referenciak-pr.html. Más fájlt ez a lap nem ír.
   ----------------------------------------------------------------------------
   Diák:
     1. #slide-referenciak-chapter — fejezetcím, korall duotone fejezetfotó
     2. #slide-logowall            — 29 ügyféllogó, fehér plaketten, SZÍNESEN
     3. #slide-pr-chapter          — fejezetcím, ugyanaz a fejezetfotó
     4. #slide-case-eon            — case study
     5. #slide-case-popeyes        — case study
     6. #slide-case-bridgestone    — case study (valódi fotókkal, brief/media-bs/)

   ELRENDEZÉS (user, 2026-08-14, az éles oldalt nézve): EGY, vízszintesen
   KÖZÉPRE ZÁRT ÜVEGKÁRTYA — balra szöveg, jobbra képrács, alul metrikasáv.
   A részletes indoklás és a méretezés képlete a 4. szakasz fejlécében van.

   FONTOS: a 4. szakasz elrendezését a SOCIAL case-diák is használják
   (site/slides/03-social.html) — a user kérése az volt, hogy „az összes
   referenciánál" ugyanaz legyen. Ha itt elrendezést módosítasz, az AZONNAL
   érinti a social-diákat is; ellenőrizd mind a hetet.

   Betűméret: 13 px alatt semmi, és diánként legfeljebb 7 különböző méret.

   KEMÉNY SZABÁLYOK, amiket ez a fájl betart:
     - `.slide`-ra SOHA nem adunk `position`-t, és nincs csupasz `.slide {}`
       vagy `.slide__inner {}` szabály — minden `.s2-*`-gal szűkítve.
     - a lapozó alatti 96 px tiltott zónába semmi nem ér bele.
   ============================================================================ */

:root {
  --content-w: 1180px;
  --nav-h: 72px;
}

/* ============================================================================
   0 · A BLOKK BETŰSKÁLÁJA — öt fokozat, semmi közte.
   (A közös tokenek a css/olvashatosag.css-ben élnek; itt csak a saját
   neveinkre képezzük le őket, hogy egy helyen lássam, mi mekkora.)
   ============================================================================ */
/* MINDEN ÉRTÉK A slides-03.css-BŐL VAN ÁTMÁSOLVA, karakterre azonosan (user,
   2026-08-14: „nem sikerül a referenciás részt visszahozni olyanra, mint az sm
   rész"). Ha a social-diákon változik egy fokozat, ITT IS változtatni kell —
   különben a két blokk megint kétféle rendszernek fog látszani. */
.s2-chapter-slide,
.s2-logowall-slide,
.s2-case-slide {
  --s2-t-apro:    0.84rem;                        /* 13.4px — kicker, címke, díj */
  --s2-t-sorszam: 0.9rem;                         /* 14.4px — a 01/02/03 sorszám */
  --s2-t-alap:    clamp(0.9rem, 1.05vw, 1rem);    /* 16px   — folyószöveg, lista */
  --s2-t-emelt:   clamp(0.98rem, 1.3vw, 1.14rem); /* 18.2px — blokkcím           */
  --s2-t-szam:    clamp(1.45rem, 2.3vw, 2rem);    /* 32px   — metrika-szám       */
  --s2-t-cim:     clamp(1.7rem, 2.7vw, 2.4rem);   /* 38.4px — dia-cím            */
}

/* ============================================================================
   1 · FEJEZETCÍM- ÉS LOGÓFAL-DIÁK VÁZA
   FONTOS: ez CSAK ennek a blokknak a diáira vonatkozhat. Amíg globális `.slide`
   szabály volt, felülírta a slides-base.css `position: absolute` keretét —
   ettől a diák egymás ALÁ csúsztak. `position`-t itt SOHA nem adunk.
   ============================================================================ */
.s2-chapter-slide,
.s2-logowall-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-inline: clamp(24px, 4vw, 64px);
}

.s2-chapter-slide .slide__inner,
.s2-logowall-slide .slide__inner {
  width: 100%;
  max-width: var(--content-w);
  margin-inline: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
}

/* ============================================================================
   2 · FEJEZETCÍM-DIÁK — REFERENCIÁK / PR KAMPÁNYOK
   VISSZAVONT KÍSÉRLET (user, 2026-08-14: „ez full rossz!!!!!"): a forrás-PPT
   korall duotone fejezetfotóját teljes képernyős háttérként tettem be. Ettől a
   dia rózsaszín-barna lett, a videó eltűnt mögüle, és kilógott az oldal sötét,
   üveges világából. A fotó ezekről a diákról KIKERÜLT — nem szabad visszatenni.
   Így marad az alaphangulat a sötét videó, és így konzisztens a többi
   fejezetcím-diával is (azok szintén fotó nélküliek).
   A cím a videón áll, dobozok nélkül; a fehér betűk fekete ragyogását a
   css/olvashatosag.css adja globálisan.
   ============================================================================ */
.s2-chapter {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 20px;
}

/* lime kicker + lime vonal: pontosan úgy, mint a social fejezetcím-dián —
   a két blokk EGY rendszernek látszik */
.s2-chapter__kicker {
  margin: 0;
  font-size: var(--s2-t-apro);
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-accent, #93d14f);
}

.s2-chapter__title {
  margin: 0;
  font-size: clamp(2.6rem, 7.4vw, 5.6rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.04;
  text-transform: uppercase;
  color: #fff;
}

/* vékony lime vonal a cím alatt: vizuális horgony doboz nélkül */
.s2-chapter__rule {
  display: block;
  width: 112px;
  height: 3px;
  margin-inline: auto;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--c-accent-hi, #a1e657), transparent);
  box-shadow: 0 0 18px rgba(147, 209, 79, 0.5);
}

/* LEAD a vonal alatt — karakterre a `.s03-chapter__lead`-ből (css/slides-03.css),
   hogy a PR- és a social-fejezetcím EGY rendszer maradjon. Egyetlen eltérés:
   ott 24px felső margó van, itt a `.s2-chapter` 20px `gap`-je adja a távolságot,
   ezért csak 4px-et teszünk hozzá. */
.s2-chapter__lead {
  /* `margin-inline: auto` KELL: a `.s2-chapter-slide .slide__inner` szabály
     (0,2,0) erősebb, mint a `.s2-chapter` (0,1,0), ezért a valóságban
     `align-items: stretch` van érvényben, nem `center`. Enélkül a 720px-es
     doboz a bal szélre tapad, és a mondat 228px-szel a cím KÖZEPÉTŐL BALRA
     jelenik meg (mérve 1366x768-on: cím közepe 683px, leadé 455px). */
  margin: 4px auto 0;
  max-width: 720px;
  font-size: clamp(0.95rem, 1.7vw, 1.12rem);
  line-height: 1.6;
  color: rgba(235, 237, 245, 0.9);
}

/* ============================================================================
   3 · LOGÓFAL — 29 logó egy képernyőn.
   A logók SZÍNESEK (a szürkeárnyalat-szűrőt a globális olvashatosag.css
   kapcsolta ki — ide vissza NEM hozzuk).

   MÉRT HIBA (2026-08-14, saját mérés): a globális elrendezes.css a logóknak
   `height: 100% !important`-ot ad. A cella rácscellája viszont TARTALOM szerint
   méreteződik, ezért a 100% határozatlan → a böngésző a kép NATÍV magasságát
   használja, és a logók kilógtak a plakettből (mérve: 99px túlcsordulás,
   a Burger King / ALDI / McDonald's logó belelógott az alatta lévő sorba).
   Itt szűkítve visszavesszük: a logó a plakett belmagasságát kapja meg
   (74px cella − 2×8px padding = 58px), a szélessége az arányából jön.
   ============================================================================ */
.s2-logowall { width: 100%; }
.s2-logowall .c-logowall__head { margin-bottom: 18px; }
.s2-logowall .c-logowall__title { font-size: clamp(1.3rem, 3vw, 2rem); }
.s2-logowall .c-logowall__grid { gap: 8px; }
/* MÉRT HIBA #2 (2026-08-18, saját mérés): MIND A 30 cella levágta a logót
   (1440x900-on 5px, 1536x864-en 7px). Két, egymást nem ismerő szabály ütközött:
     · a KÉSŐBB betöltődő css/elrendezes.css a cellának
       `height: clamp(54px, 7.2vh, 76px) !important`-ot ad → 900px-en a cella
       63px, nem 74 — az itteni fix magasság sosem érvényesült;
     · a css/kepek-teljes.css a KÉPRE tesz `padding: 8px`-et, ami még 16px-et
       hozzáad a kép dobozához.
   Az itteni fix `height: 58px !important` tehát egy 47px-es belmagasságba
   kényszerített 74px-es képdobozt. Ezért a magasságot NEM kötjük meg többé:
   a kép a cella belmagasságához igazodik (`max-height: 100%`), így a méret
   automatikusan követi az elrendezes.css clampjét minden képernyőn. */
.s2-logowall .c-logowall__cell {
  padding: 4px 10px !important;   /* felülírja az elrendezes.css 8px/12px-ét */
  overflow: hidden;               /* biztonsági háló: a plakettből semmi nem lóghat ki */
}

.s2-logowall .c-logowall__cell img {
  height: auto !important;
  width: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  padding: 2px !important;        /* a kepek-teljes.css 8px-e helyett */
  object-fit: contain !important;
}

/* ============================================================================
   4 · CASE-DIÁK — KÖZÖS ELRENDEZÉS
   Ezt a szakaszt HÁROM PR-case (E.ON · Popeyes · Bridgestone) ÉS a négy
   social-case (site/slides/03-social.html) EGYARÁNT használja. Ezért él itt,
   egy helyen: a user kérése az volt, hogy „az összes referenciánál" ugyanaz az
   elrendezés legyen. A slides-03.css csak a saját diáinak KÉPSOR-ARÁNYAIT és a
   fejezetcím-diáját tartja meg.

   MIÉRT LETT ÁTÍRVA (user, 2026-08-14, az éles oldalt nézve):
     „full balra van igazítva és nem szép" · „ezek belelógnak majdnem a menübe"
     · „tök szép volt még, amikor még ilyesmi volt"
   A korábbi teli szélességű megoldás (a képernyő bal széléig futó képoszlop +
   jobb oldali szöveg) 1920 px-en a jobb oldal ~45%-át üresen hagyta, a szöveget
   a bal szélre tapasztotta, és a képoszlop teteje majdnem a menüig ért.
   Helyette EGY, vízszintesen KÖZÉPRE ZÁRT ÜVEGKÁRTYA:

     ┌──────────────────── .s2-card ─────────────────────────┐
     │  .s2-panel (szöveg)        │  .s2-media (képrács)     │
     │  logó + kicker · NAGY CÍM  │  3 kép/sor, 2 sor,       │
     │  01 Kihívás · 02 Megoldás  │  természetes arányokkal  │
     ├────────────────────────────┴──────────────────────────┤
     │  .s2-bar — metrikasáv a kártya TELJES szélességében   │
     └───────────────────────────────────────────────────────┘

   A MÉRETEZÉS LOGIKÁJA — ez a szakasz lelke:
   1. `--s2-band`: a menü alja és a lapozó tiltott zónája közötti sáv. A menü
      alatt SZÁNDÉKOSAN nagy a levegő (nav + 4vh), mert a user kifogásolta, hogy
      a képek majdnem a menübe lógnak. A kártya pontosan ezt a sávot tölti ki,
      tehát diáról diára ugyanott van a kerete — ettől látszik egy rendszernek.
   2. `--s2-mh`: a képdoboz magassága = sáv − kártyapadding − köz − metrikasáv.
      MINDEN sormagasság ebből számol, tehát a képek SOHA nem lóghatnak ki.
   3. `--s2-mw`: a képrács szélessége. Nem szabadon választott szám: a sorok
      képarány-összegeiből (`S_i`) visszafelé számolt érték, ami PONTOSAN
      `--s2-mh` magas rácsot ad, és amiben minden sor ugyanolyan széles →
      a rács mindkét széle egyenes vonal, levágás és üres sáv nélkül:
          mh = Σ((mw − közök_i) / S_i) + (sorok−1)·12px
          ⇒ mw = (mh − (sorok−1)·12px + Σ(közök_i/S_i)) / Σ(1/S_i)
      Innen a diánkénti `K·mh + C` alak a 4f szakaszban. A `--s2-mwmax` plafon
      csak azt akadályozza meg, hogy a rács a szöveg helyére nőjön; ha belép,
      a rács a képdobozon belül KÖZÉPRE kerül.
   4. A kép `height: 100%; width: auto` — a magassága kötött, a szélessége a
      saját arányából jön, tehát a kép sem nem vágódik, sem nem torzul.
   Ha képet cserélsz vagy sorrendet váltasz, a 4f szakasz számait ÚJRA KELL
   SZÁMOLNI — különben vagy üres sáv marad, vagy kilóg a rács.

   KEMÉNY SZABÁLYOK: `.slide`-ra SOHA nincs `position`, és nincs csupasz
   `.slide {}` / `.slide__inner {}` szabály — minden `.s2-*`-gal szűkítve.
   ============================================================================ */

.s2-case-slide {
  /* a sáv: a menü alja és a lapozó tiltott zónája között, MINDKÉT végén valódi
     levegővel (user: „ezek belelógnak majdnem a menübe") */
  --s2-top: calc(var(--nav-h, 72px) + clamp(20px, 4vh, 44px));
  --s2-bot: clamp(92px, 11vh, 120px);
  --s2-band: calc(100svh - var(--s2-top) - var(--s2-bot));

  /* a kártya geometriája */
  --s2-marg: clamp(20px, 3vw, 56px);                       /* oldalsó margó    */
  --s2-cw: min(calc(100vw - 2 * var(--s2-marg)), 1560px);  /* kártyaszélesség  */
  --s2-pad: clamp(16px, 2.6vh, 30px);                      /* függőleges pad.  */
  --s2-padx: clamp(18px, 2.2vw, 38px);                     /* vízszintes pad.  */
  --s2-colgap: clamp(16px, 2.2vw, 40px);                   /* szöveg ↔ képrács */
  --s2-vgap: clamp(12px, 2vh, 22px);                       /* rács ↔ metrikasáv*/
  --s2-mbar: clamp(70px, 9.4vh, 100px);                    /* metrikasáv magas.*/
  --s2-ig: 12px;                                           /* képköz           */

  /* a képdoboz — ebből számol MINDEN sormagasság */
  --s2-mh: calc(var(--s2-band) - 2 * var(--s2-pad) - var(--s2-vgap) - var(--s2-mbar));
  /* a képrács maximális szélessége: a kártya belsejének 58%-a. A szöveg 42%-ot
     kap — mérve ez ~600 px 1920-on, vagyis pont a kényelmes 62 karakteres
     sorhossz, amit a social-diákon is használunk. */
  --s2-mwmax: calc((var(--s2-cw) - 2 * var(--s2-padx)) * 0.58 - var(--s2-colgap));

  /* térközök a szövegpanelen belül */
  --s2-sp-s: 6px;
  --s2-sp-m: 14px;
  --s2-sp-l: clamp(14px, 2.2vh, 24px);
}

/* A dia csak keret: a kártyát vízszintesen középre teszi. A `.slide.s2-*` alak
   azért kell, hogy a később betöltődő közös lapok `!important` paddingját
   felülírja — a `.slide` egymagában gyengébb. */
.slide.s2-case-slide {
  padding: var(--s2-top) var(--s2-marg) var(--s2-bot) !important;
}

.slide.s2-case-slide .slide__inner {
  max-width: none;
  width: 100%;
  height: var(--s2-band);
  max-height: var(--s2-band);
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  margin-block: 0;
}

/* ── 4a · A KÁRTYA ────────────────────────────────────────────────────────── */

.s2-card {
  width: min(100%, 1560px);
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s2-vgap);
  padding: var(--s2-pad) var(--s2-padx);
  border-radius: var(--glass-radius, 20px);
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.16));
  background: var(--glass-scrim-soft, rgba(9, 12, 19, 0.84));
  box-shadow: var(--glass-shadow-lift, 0 20px 60px rgba(6, 8, 14, 0.55));
  overflow: hidden;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .s2-card {
    background: rgba(9, 12, 19, 0.66);
    -webkit-backdrop-filter: blur(var(--glass-blur, 14px)) saturate(1.15);
            backdrop-filter: blur(var(--glass-blur, 14px)) saturate(1.15);
  }
}

/* felső sáv: balra a szöveg, jobbra a képrács */
.s2-card__top {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: stretch;
  gap: var(--s2-colgap);
}

/* ── 4b · BAL OLDAL — a szövegpanel ───────────────────────────────────────── */

/* „saját, finoman elváló belső panel" (user): épp csak annyi világosodás és
   keret, hogy elváljon a kártyától — nem egy második, hangos doboz. */
.s2-panel {
  flex: 0 0 42%;
  align-self: center;   /* a panel a TARTALMÁHOZ simul, nem nyúlik teljes magasra
                           — különben a szövegszegény diákon (BK, Chio Intense)
                           egy nagy üres keret maradna a szöveg körül */
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(14px, 2vh, 24px) clamp(16px, 1.6vw, 26px);
  border-radius: var(--glass-radius-sm, 12px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.045);
  overflow: hidden;
}

.s2-head { margin-bottom: var(--s2-sp-l); }

.s2-head__row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: var(--s2-sp-s);
}

.s2-brand {
  margin: 0;
  font-size: var(--s2-t-apro);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(235, 237, 245, 0.9);
}

/* A festékdobozok margóit a site/assets/logos/ fájlokba vágtuk ki (196x58 / 113x86 / 330x100), ezért a sima contain helyes, diánkénti nagyítás nem kell. */
.s2-panel .s2-logo {
  flex: 0 0 auto;
  width: clamp(112px, 10.5vw, 164px);
  height: clamp(46px, 5.2vh, 66px);
  border-radius: 10px;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 6px 10px;
}
.s2-panel .s2-logo img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.s2-title {
  margin: 0;
  font-size: var(--s2-t-cim);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: #fff;
  text-wrap: balance;
}

.s2-sub {
  margin: var(--s2-sp-s) 0 0;
  max-width: 62ch;
  font-size: var(--s2-t-alap);
  line-height: 1.5;
  color: rgba(235, 237, 245, 0.86);
}

/* ── 4c · SZÁMOZOTT BLOKKOK (01 Kihívás · 02 Megoldás) ────────────────────── */

.s2-blocks {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s2-sp-l);
}

/* sorszám + cím egy sorban, alatta a tartalom. A bal oldali vékony lime vonal a
   jelölés — doboz sehol. */
.s2-block {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: 12px;
  row-gap: var(--s2-sp-s);
  padding-left: var(--s2-sp-m);
  border-left: 2px solid rgba(147, 209, 79, 0.55);
}

.s2-block__num {
  grid-column: 1;
  grid-row: 1;
  font-size: var(--s2-t-sorszam);
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--c-accent-hi, #a1e657);
}

.s2-block__title {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-size: var(--s2-t-emelt);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fff;
}

.s2-block__body {
  grid-column: 1 / -1;
  grid-row: 2;
  min-width: 0;
}

/* ── 4d · A PANEL SZÖVEGEI — mind ugyanazon a fokozaton ───────────────────── */

.s2-text {
  margin: 0;
  max-width: 62ch;
  font-size: var(--s2-t-alap);
  line-height: 1.5;
  color: rgba(235, 237, 245, 0.92);
}

.s2-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
  max-width: 62ch;
}

.s2-list li {
  position: relative;
  padding-left: 15px;
  font-size: var(--s2-t-alap);
  line-height: 1.45;
  color: rgba(235, 237, 245, 0.92);
}

.s2-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--c-accent, #93d14f);
}

/* AZ ESZKÖZLISTA DOBOZ NÉLKÜL (user: „nem kellenek nekik boxok"): korábban 6–9
   pirulakeret volt, ami dobozosnak mutatta a diát. Most folyó szöveg, lime
   ponttal elválasztva — pontosan úgy olvasódik, mint a social-diák „Megoldás"
   bekezdése. */
.s2-chips {
  display: block;
  margin: var(--s2-sp-s) 0 0;
  padding: 0;
  list-style: none;
  max-width: 62ch;
  font-size: var(--s2-t-alap);
  line-height: 1.5;
  color: rgba(235, 237, 245, 0.86);
}

.s2-chips li { display: inline; }

.s2-chips li + li::before {
  content: "·";
  margin: 0 0.5em;
  font-weight: 700;
  color: var(--c-accent, #93d14f);
}

/* a Bridgestone záró mondata — egyetlen sor, a panel alján */
.s2-closing {
  margin: var(--s2-sp-l) 0 0;
  font-size: var(--s2-t-alap);
  font-weight: 700;
  font-style: italic;
  color: var(--c-accent-hi, #a1e657);
}

/* ── 4e · JOBB OLDAL — a képrács ──────────────────────────────────────────── */

.s2-media {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;   /* ha a rács alacsonyabb a doboznál, KÖZÉPEN áll  */
  align-items: center;       /* és vízszintesen is — soha nem tapad a szélhez  */
  gap: var(--s2-ig);
}

.s2-row {
  display: flex;
  gap: var(--s2-ig);
  align-items: stretch;
  justify-content: center;
  min-height: 0;
}

/* A sor magassága kötött, a kép a magasságot tölti ki, a szélessége a saját
   arányából jön → nincs levágás, nincs üres sáv. A `max-width: none` azért
   kell, mert a később betöltődő kepek-teljes.css `.slide img { max-width:100% }`
   szabálya különben ellapítaná az egy-képes sorokat. */
.s2-case-slide .s2-row > img {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
  max-height: 100%;
  border-radius: 10px;
  border: 0;
  background: transparent;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

/* ── 4f · A METRIKASÁV — a kártya teljes szélességében ────────────────────── */

.s2-bar {
  flex: 0 0 auto;
  height: var(--s2-mbar);
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 40px);
  padding-top: clamp(8px, 1.4vh, 16px);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

/* a sáv bal fejrésze: a „03 Eredmények" blokkcím és a hozzá tartozó megjegyzés
   — ezek a szövegek a régi 03-as blokkból jönnek, egy szó sem veszett el */
.s2-bar__label {
  flex: 0 0 clamp(140px, 15%, 236px);
  min-width: 0;
  border-left: 2px solid rgba(147, 209, 79, 0.55);
  padding-left: var(--s2-sp-m);
}

.s2-bar__title {
  margin: 0;
  font-size: var(--s2-t-apro);
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.25;
  text-transform: uppercase;
  color: #fff;
}

.s2-bar__note {
  margin: 3px 0 0;
  font-size: var(--s2-t-apro);
  font-weight: 400;
  line-height: 1.3;
  color: rgba(235, 237, 245, 0.78);
}

.s2-metrics {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(14px, 2vw, 34px);
}

/* két metrikánál a `space-between` a két végére lökné a számokat — ilyenkor
   balra zárva, nagy közökkel áll a sor */
.s2-metrics--few {
  justify-content: flex-start;
  gap: clamp(28px, 5vw, 92px);
}

.s2-metric {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 260px;
}

.s2-metric__num {
  font-size: var(--s2-t-szam);
  font-weight: 800;
  line-height: 1;
  color: var(--c-accent-hi, #a1e657);
  text-shadow: 0 0 24px rgba(147, 209, 79, 0.35);
}

.s2-metric__label {
  font-size: var(--s2-t-apro);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-transform: uppercase;
  color: rgba(235, 237, 245, 0.9);
}

/* a hosszú, mondat értékű címkék (E.ON, Bridgestone) szélesebb hasábot kapnak,
   különben négy sorba törnének a sávban */
.s2-metric--wide { max-width: 340px; }

/* DÍJAK — keret nélkül, a metrikacímke fokozatán: a sáv jobb végén álló arany
   sor. Korábban aranykeretes pirula volt, ami megint doboz. */
.s2-awards {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: right;
}

.s2-award {
  font-size: var(--s2-t-apro);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-transform: uppercase;
  color: #f4cf78;
}

.s2-award::before {
  content: "✦";
  margin-right: 7px;
}

/* ── 4g · SORMÉRETEZÉS DIÁNKÉNT ─────────────────────────────────────────────
   `--s2-mw` = min(K · --s2-mh + C, --s2-mwmax). A K és C a fenti képletből jön,
   a sorok VALÓDI képarány-összegeivel. A sormagasság ugyanebből: minden sor
   pontosan `--s2-mw` széles lesz, tehát a rács széle egyenes vonal. */

/* E.ON · 4 kép, 2+2 — a PREXA-plakett (image41) 2026-08-18-án kikerült, és a
   maradék négyet ÚJRAPÁROZTUK. Ugyanaz az elv, mint a Bridgestone-on: soronként
   egy álló + egy fekvő, hogy a két sor képarány-összege közel essen egymáshoz —
   így lesz a rács a lehető legszélesebb, és így nőnek a képek.
   sor A: image38 (0.7042) + image42 (1.0880) = 1.7922  (1 köz)
   sor B: image43 (0.7336) + image40 (2.4644) = 3.1980  (1 köz)
   Σ(1/S)=0.870668 · Σ(köz/S)=10.448 → mw = 1.148545·mh − 1.78
   Mérve 1366×768-on (mh=445.8): mw=510 (a régi 3+2-vel 456 volt),
   sor A = 278px, sor B = 156px. Egyik méreten sem éri el az --s2-mwmax plafont. */

.s2-case--eon { --s2-mw: min(calc(1.148545 * var(--s2-mh) - 1.78px), var(--s2-mwmax)); }
.s2-case--eon .s2-row--a { height: calc((var(--s2-mw) - 12px) / 1.7922); }
.s2-case--eon .s2-row--b { height: calc((var(--s2-mw) - 12px) / 3.1980); }

/* POPEYES · 3 kép, egyetlen sorban
   sor A: image7 (0.8003) + image45 (0.8003) + image6 (1.0000) = 2.6006  (2 köz)
   → mw = 2.6006·mh + 24. Ez mindig a plafonba fut, tehát a rács teli szélességű,
   és a maradék hely a képdobozban fent-lent egyenlően oszlik el. Három képből
   ez az egyetlen elrendezés, ami nem lóg ki függőlegesen. */
.s2-case--popeyes { --s2-mw: min(calc(2.6006 * var(--s2-mh) + 24px), var(--s2-mwmax)); }
/* A Popeyes az egyetlen négymetrikás case, és a „…legbefolyásosabb médiavállalattól"
   címke három sorba törik. Mérve (scrollHeight − clientHeight a `.s2-bar`-on):
   1366x768 −12px, 1440x900 −7px, 965x1002 −7px levágva az alapértelmezett
   `clamp(70px, 9.4vh, 100px)`-szel; ezzel az értékkel mind a négy mért méreten 0.
   A képrács ebből számol (`--s2-mh`), tehát a magasabb sáv a képeket arányosan visszaveszi. */
.s2-case--popeyes { --s2-mbar: clamp(92px, 12.5vh, 124px); }
.s2-case--popeyes .s2-row--a { height: calc((var(--s2-mw) - 24px) / 2.6006); }

/* BRIDGESTONE · 4 kép, 2+2 — a párokat SZÁNDÉKOSAN keverve (egy álló + egy
   fekvő soronként), mert így a két sor képarány-összege majdnem azonos, és
   ettől lesz a rács a lehető legszélesebb (mérve: 818 px a 636 helyett).
   sor A: bs1 (0.7500) + bs3 (1.7498) = 2.4998  (1 köz)
   sor B: bs5 (0.9144) + bs2 (1.5007) = 2.4151  (1 köz)
   Σ(1/S)=0.814093 · Σ(köz/S)=9.769 → mw = 1.22836·mh − 2.74 */
/* ÚJRASZÁMOLVA 2026-08-18: a képek kicserélődtek (user). Csak a csoportkép
   maradt; a másik három helyére a gyár saját fotói kerültek, mind 3:2 fekvő.
   sor A: bs-image1 (0.7500) + bs-csomagolas (1.5005) = 2.2505  (1 köz)
   sor B: bs-elrejtve (1.5005) + bs-fa-alatt (1.5005) = 3.0010  (1 köz)
   Σ(1/S)=0.777568 · Σ(köz/S)=9.3308 → mw = 1.286061·mh − 3.43 */
.s2-case--bridgestone { --s2-mw: min(calc(1.286061 * var(--s2-mh) - 3.43px), var(--s2-mwmax)); }
.s2-case--bridgestone .s2-row--a { height: calc((var(--s2-mw) - 12px) / 2.2505); }
.s2-case--bridgestone .s2-row--b { height: calc((var(--s2-mw) - 12px) / 3.0010); }

/* ============================================================================
   5 · ALACSONY ABLAK: a szöveg két lépcsőben sűrűsödik. A képméretezés magától
   követi (a `--s2-mh`-ból számol), ott nincs mit állítani.
   ============================================================================ */
@media (max-height: 900px) {
  .s2-case-slide {
    --s2-t-alap: 0.84rem;
    --s2-t-emelt: 0.92rem;
    --s2-t-cim: clamp(1.45rem, 2.3vw, 1.8rem);
    /* 2026-08-18: 10px → 9px. A Bridgestone-dia hosszabb szöveget kapott a
       usertől, és 1366x768-on 2px-et levágott; a `--s2-sp-l` három helyen
       fut (fejléc alatt, blokkok között, a záró sor előtt), tehát 1px itt
       3px-et ad vissza. Mérve utána: 0. */
    --s2-sp-l: clamp(9px, 1.5vh, 16px);
    --s2-sp-m: 12px;
    --s2-sp-s: 4px;
  }
  .s2-text,
  .s2-list li,
  .s2-chips,
  .s2-sub { line-height: 1.4; }
  .s2-list { row-gap: 3px; }
}

@media (max-height: 780px) {
  .s2-case--eon,
  .s2-case--bridgestone { --s2-mbar: clamp(76px, 10vh, 84px); }
  /* A logó magasságát ITT SEM kötjük meg — a cella belmagasságát követi
     (lásd a 3. szakasz mért indoklását). */
}

@media (max-height: 760px) {
  .s2-case-slide {
    --s2-t-alap: 0.82rem;
    --s2-t-emelt: 0.9rem;
    --s2-t-cim: clamp(1.25rem, 2.1vw, 1.6rem);
    /* 2026-08-18: 8px → 6px és 1.35 → 1.3 — a hosszabb Bridgestone-szöveg
       1280x720-on 7px-et vágott le. Mérve utána: 0. */
    --s2-sp-l: 5px;
    --s2-sp-m: 10px;
    --s2-sp-s: 4px;
  }
  .s2-text,
  .s2-list li,
  .s2-chips,
  .s2-sub { line-height: 1.3; }
  .s2-list { row-gap: 2px; }
}

/* ============================================================================
   5b · NEM TELJES KÉPERNYŐS, ALACSONY ABLAK — HÁROM LÉPCSŐ
   ----------------------------------------------------------------------------
   MÉRT HIBA (2026-08-18, saját mérés): a user nem teljes képernyőn nézi az
   oldalt. 1030x545-ös ablakban a `.s2-panel` tartalma 394 px volt, a hely 205 —
   és mivel a panel `align-self: center`, a hiány FELÜL ÉS ALUL IS levágódott:
   eltűnt a dia CÍME a tetején és a záró zöld sor az alján. A `.s2-card`
   `overflow: hidden`-je miatt ebből semmi nem látszott, csak hiányzott.
   Mérve a 7 case-dián: E.ON 95 · Popeyes 75 · Bridgestone 95 · slide-13 22 ·
   slide-14 3 px levágás (ez a LÁTHATÓ fele; a valódi hiány ennek a duplája,
   mert a `justify-content: center` fele-fele arányban vágja le fönt és lent).

   Térközök hangolásával ez önmagában NEM oldható meg — 40%-os hiány volt.
   Két emelő van, és SZÁNDÉKOSAN nem egyszerre lépnek be:

     A · FÜGGŐLEGES HELY VISSZASZERZÉSE (≤700px) — nincs elrendezés-változás.
     B · A HASÁBARÁNY MEGFORDÍTÁSA (≤620px, majd ≤580px) — csak ahol A kevés.

   MIÉRT KÉT KÜLÖN LÉPCSŐ: mérve (a teljes 5×8-as szélesség×magasság rácson) az
   „A" lépcső ÖNMAGÁBAN elég 1280x600 · 1366x650 · 1440x700-on — ott a régi 42%-os
   hasáb marad, és a képek NAGYOBBAK, mint bármelyik megfordított változatban
   (1440x700 Popeyes: 264 px magas képek a megfordított ~175 helyett). A hasábot
   tehát csak ott fordítjuk meg, ahol muszáj. A mért töréshatár 42%-kal:
        szélesség →  1024  1152  1280  1440  1680
        h=600         4     3     0     0     0
        h=580        13    13     6     0     0
        h=545        29    30    24     6     6      (px panel-túlcsordulás)
   Innen a két küszöb: 620 (a 600-as sor fölé, ráhagyással) és 580.

   1. LÉPCSŐ — ≤700px: VISSZANYERT FÜGGŐLEGES HELY.
      Mérve: a menü valódi alja 73 px, a lapozó (`.dia-nav`) teteje pedig 63 px-re
      van a képernyő aljától. A régi `--s2-top` 93.8, a `--s2-bot` 92 px volt —
      mindkettőben volt tartalék. Az új értékek a MÉRT akadályokhoz igazodnak:
        --s2-top = nav + 8px                → a menü alja alatt 8 px levegő
        --s2-bot = a lapozó alsó eltolása + 48px magassága + 6px levegő
      A lapozó alatti tiltott zónába így SEM lóg bele semmi — mérve az AKTÍV
      dián (a nem aktív diákat a slides-base.css eltolja, azokon a kártya
      pozíciója félrevezető): 545/600/650/700 px-en egyaránt 6 px a levegő.
      FIGYELEM: a `--s2-bot`-ot azért nem fix szám adja, mert a lapozó
      `bottom: clamp(14px, 2.6vh, 28px)`-je a magassággal nő; fix 68 px-szel
      700 px-en a kártya alja már PONTOSAN a lapozó tetejét érte (mérve: 0 px).

      A `--s2-mbar` értékek a metrikasáv MÉRT igényéből jönnek (a sávot
      `height:auto`-ra állítva megmérve, a legkeskenyebb ablakban, ahol a címkék
      a legtöbbet törik): E.ON/Bridgestone 66–68, Popeyes 107 (ez az egyetlen
      négymetrikás dia, háromsoros címkével), a social-diák 51–64 px.
      Az E.ON/Bridgestone `clamp(66px, 11.7vh, 70px)`: 545 px-en 66 (ott van a
      legkevesebb hely, és ott a metrikaszám is kisebb), 600 px fölött 70 (ott a
      `--s2-t-szam` nagyobb, tehát a sáv is többet kér).

      A `line-height: 1.3` `!important`-ja NEM stílusdöntés: a css/kepek-teljes.css
      `@media (max-height: 950px)` blokkja `.slide p { line-height: 1.45
      !important }`-ot ad, ami a fenti 760-as blokk 1.3-át CSENDBEN felülírta
      (mérve: 13.12 px betűn 19.02 px sormagasság, azaz 1.45). Itt tehát csak
      érvényre jut az, amit ez a fájl már két lépcsővel ezelőtt eldöntött.

   2. LÉPCSŐ — ≤620px: a szövegpanel 42% → 50%. Szélesebb hasáb = kevesebb
      sortörés = alacsonyabb tartalom.
   3. LÉPCSŐ — ≤580px: a szövegpanel 50% → 58%, és a térközök még egy fokozatot
      szűkülnek. Ez a user 545 px-es ablaka.
   4. LÉPCSŐ — ≤512px: a szövegpanel 58% → 66%. A feladat méretlistáján ez már
      nem szerepelt; azért van, hogy a levágás ne térjen vissza csendben, ha a
      néző még kisebbre húzza az ablakot.
   Külön, a case-diáktól függetlenül: 5b/0 a LOGÓFAL cellamagasságát viszi le
   (1024x520-on 8 px-t vágott a rács).

      MINDKÉT lépcsőben EGYÜTT mozog a képrács plafonja (`--s2-mwmax`) és a
      sorhossz-plafon:
        · a `--s2-mwmax` szorzója mindig `1 − panel%` (0.58 → 0.50 → 0.42),
          különben a rács belelógna a szövegbe;
        · a `62ch` sorhossz-plafon 1030 px-en 438 px-nél lép be, tehát a
          szélesebb hasábot elnyelné — ezért 74ch, illetve 90ch. Fölöttük a
          13.12 px-es betűn a sor már kényelmetlenül hosszú lenne.
      A képek a megfordítástól sem lettek kisebbek a régi állapotnál: a
      visszanyert függőleges hely többet ad, mint amennyit a keskenyebb hasáb
      elvesz (mérve 1030x545-en: E.ON 80→104, Bridgestone 110→132 px).

   MIÉRT `min-width: 768px` MINDHÁROM LÉPCSŐN: a 6. szakasz mobil blokkja KÉSŐBB
   jön, de gyengébb szelektorral (`.s2-panel` = 0,1,0) — az itteni
   `.s2-case-slide .s2-panel` (0,2,0) különben felülírná, és a mobil kártya
   fix százalékos szövegpanelt kapna a saját `flex: 0 0 auto`-ja helyett.

   MÉRVE UTÁNA — panel-túlcsordulás mind a 7 case-dián, mind a 10 méreten
   (1030x545 · 1280x600 · 1366x650 · 1440x700 · 1280x720 · 1366x768 · 1440x900 ·
   1536x864 · 1600x900 · 1920x1080): 0. A 700 px fölötti méretek NEM változtak,
   ezek a blokkok oda be sem lépnek.
   ============================================================================ */

/* ── 5b/0 · ≤700px — A LOGÓFAL cellamagasságának padlója ───────────────────
   MÉRT HIBA (2026-08-18): 1024x520-on a `.slide__inner` 8 px-t levágott a
   logófalból (500 px-en 18-at). Ok: a css/elrendezes.css a cellának
   `height: clamp(54px, 7.2vh, 76px) !important`-ot ad, és 520 px-es ablakban a
   7.2vh már csak 37 px — vagyis az 54 px-es PADLÓ kapcsol be, öt sor pedig
   annyival nem fér ki (grid 299 px, hely 346−fejléc). A padlót visszük le
   40 px-re: a cella 520 px-en 40 lesz, a rács 299 → 232 px.
   A LOGÓ MÉRETÉT NEM KÖTJÜK MEG — a 3. szakasz mért indoklása szerint a kép
   `max-height: 100%`-kal a cella belmagasságát követi, tehát a kisebb cella
   magától kisebb logót ad. Fix px-es logómagasságot ide SOHA nem teszünk.
   `min-width: 768px`: a 6. szakasz mobil blokkja (60 px-es cella) KÉSŐBB jön,
   de azonos erősségű szelektorral — enélkül ez az `!important` felülírná.
   Mérve utána: 500 · 520 · 545 · 600 · 650 · 700 px-en a túlcsordulás 0. */
@media (min-width: 768px) and (max-height: 700px) {
  .s2-logowall .c-logowall__cell { height: clamp(40px, 7.2vh, 76px) !important; }
}

/* ── 5b/1 · ≤700px — csak függőleges visszanyerés, az elrendezés marad ────── */
@media (min-width: 768px) and (max-height: 720px) {
  .s2-case-slide {
    --s2-top: calc(var(--nav-h, 72px) + 8px);
    /* NEM fix szám: a lapozó SAJÁT geometriájából számol. A `.dia-nav`
       48 px magas, és `bottom: clamp(14px, 2.6vh, 28px)`-szel ül — az az
       alsó eltolás a magassággal NŐ. Fix 68 px-szel a levegő 545 px-en még
       5 px volt, 700 px-en viszont már 0 (mérve: a kártya alja pontosan a
       lapozó tetején). Így minden magasságon 6 px marad. */
    --s2-bot: calc(clamp(14px, 2.6vh, 28px) + 48px + 6px);
    --s2-pad: 8px;
    --s2-vgap: 8px;
    --s2-mbar: 66px;   /* social case-diák; 64-gyel 1024 px széles ablakban 1 px-et vágott */
    --s2-sp-l: 3px;
    --s2-sp-s: 2px;
    --s2-t-szam: clamp(1.2rem, 1.9vw, 1.5rem);
  }

  /* A metrikasáv MÉRT igénye diánként. A sáv igénye a SZÉLESSÉGGEL nő, nem a
     magassággal: a `--s2-t-szam` `vw`-ből számol, tehát széles-de-alacsony
     ablakban nagyobb a metrikaszám. Ezért `vw` a középső tag: 1215 px-ig 68,
     fölötte 70. (Fix 66-tal 1280x545-en 2 px-et vágott a sáv.) */
  .s2-case--eon,
  .s2-case--bridgestone { --s2-mbar: clamp(68px, 5.6vw, 70px); }
  .s2-case--popeyes     { --s2-mbar: 109px; }

  .s2-case-slide .s2-panel { padding: 6px 14px; }

  /* a kepek-teljes.css `!important`-ja miatt kell ide is `!important` */
  .s2-case-slide .s2-text,
  .s2-case-slide .s2-chips,
  .s2-case-slide .s2-sub,
  .s2-case-slide .s2-closing { line-height: 1.3 !important; }

  /* a sorszám+blokkcím sora `normal` sormagassággal 20 px-et kért 14.4 px-es
     betűre; 1.2-vel 17.3 — diánként két blokk, tehát ~5 px */
  .s2-case-slide .s2-block__num,
  .s2-case-slide .s2-block__title { line-height: 1.2; }

  /* a logó adja a fejlécsor magasságát (a márkanév csak 19 px) */
  .s2-case-slide .s2-panel .s2-logo {
    height: clamp(30px, 4vh, 42px);
    width: clamp(80px, 7.6vw, 116px);
  }
}

/* ── 5b/2 · ≤620px — a szövegpanel 42% → 50%, a rács plafonja 0.58 → 0.50 ── */
@media (min-width: 768px) and (max-height: 620px) {
  .s2-case-slide {
    --s2-mwmax: calc((var(--s2-cw) - 2 * var(--s2-padx)) * 0.50 - var(--s2-colgap));
  }
  .s2-case-slide .s2-panel { flex: 0 0 50%; }
  .s2-case-slide .s2-text,
  .s2-case-slide .s2-list,
  .s2-case-slide .s2-chips,
  .s2-case-slide .s2-sub { max-width: 74ch; }
}

/* ── 5b/3 · ≤580px — a szövegpanel 50% → 58% (ez a user 545 px-es ablaka) ──
   A térközök itt még egy fokozatot szűkülnek. Ez NEM finomhangolás: 1024x520-on
   a Popeyes-panel 23, a Bridgestone-é 17 px-t lógott ki pusztán az 58%-os
   hasábbal (a Bridgestone szövege 2026-08-18-án hosszabb lett: kétmondatos
   Kihívás, három felsorolás, hetedik chip). Az itteni sűrítés 520 px-en 0-ra
   viszi mindkettőt, és a user 545 px-es ablakában is megnöveli a tartalékot
   (Bridgestone: −7 → −34 px). A `--s2-t-cim` 21.5 → 19.5 px 1024 px szélességen
   — a Popeyes háromsoros címén ez soronként 2 px, és 13 px fölött marad. */
@media (min-width: 768px) and (max-height: 580px) {
  .s2-case-slide {
    --s2-mwmax: calc((var(--s2-cw) - 2 * var(--s2-padx)) * 0.42 - var(--s2-colgap));
    --s2-top: calc(var(--nav-h, 72px) + 5px);
    --s2-pad: 6px;
    --s2-vgap: 6px;
    --s2-sp-l: 2px;
    --s2-sp-s: 1px;
    --s2-t-cim: clamp(1.15rem, 1.9vw, 1.45rem);
  }
  .s2-case-slide .s2-panel { flex: 0 0 58%; padding: 4px 14px; }
  .s2-case-slide .s2-text,
  .s2-case-slide .s2-list,
  .s2-case-slide .s2-chips,
  .s2-case-slide .s2-sub { max-width: 90ch; }
  .s2-case-slide .s2-panel .s2-logo {
    height: clamp(26px, 3.6vh, 38px);
    width: clamp(70px, 6.8vw, 104px);
  }
}

/* ── 5b/4 · ≤512px — a legszűkebb ablak: a hasáb 58% → 66% ─────────────────
   Nem szerepelt a feladat méretlistáján; azért van itt, hogy a levágás NE
   térjen vissza csendben, ha a néző még kisebbre húzza az ablakot. Enélkül
   1024x500-on a Popeyes 8, a Bridgestone 5 px-t vágott. Ezzel 500 és 512 px-en
   is 0. (1024x480-on a Bridgestone még mindig 3 px — ott már nincs mit
   visszanyerni, ezt tudatosan nem üldözzük tovább.) */
@media (min-width: 768px) and (max-height: 512px) {
  .s2-case-slide {
    --s2-mwmax: calc((var(--s2-cw) - 2 * var(--s2-padx)) * 0.34 - var(--s2-colgap));
    --s2-pad: 4px;
  }
  .s2-case-slide .s2-panel { flex: 0 0 66%; padding: 3px 12px; }
  .s2-case-slide .s2-text,
  .s2-case-slide .s2-list,
  .s2-case-slide .s2-chips,
  .s2-case-slide .s2-sub { max-width: 110ch; }
}

/* ============================================================================
   6 · MOBIL — a kártya marad, csak egymás alá rendeződik: szöveg, alatta a
   képek két hasábban, legalul a metrikasáv. A `display: contents` kiveszi a
   sor-dobozokat, így a képek közvetlenül a rács cellái lesznek — a soronkénti
   magasságoknak itt nincs értelmük.
   ============================================================================ */
@media (max-width: 767px) {
  .slide.s2-case-slide {
    padding: calc(var(--nav-h, 60px) + 12px) 14px 92px !important;
  }
  .slide.s2-case-slide .slide__inner {
    height: auto;
    max-height: 100%;
  }
  .s2-card {
    height: auto;
    max-height: 100%;
    overflow-y: auto;
  }
  .s2-card__top { flex-direction: column; }
  .s2-panel { flex: 0 0 auto; }
  .s2-media {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .s2-row { display: contents; }
  .s2-case-slide .s2-row > img { width: 100%; height: auto; border-radius: 8px; }
  .s2-bar {
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .s2-bar__label { flex: 0 0 auto; }
  .s2-metrics { flex-wrap: wrap; justify-content: flex-start; gap: 12px 20px; }
  .s2-metric { max-width: 46%; }
  .s2-metric--wide { max-width: 100%; }
  .s2-awards { text-align: left; }

  .s2-chapter-slide,
  .s2-logowall-slide { padding-top: calc(3.55rem + 24px); }
  .s2-chapter__title { font-size: clamp(2rem, 11vw, 3.2rem); }
  .s2-logowall .c-logowall__grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .s2-logowall .c-logowall__cell { height: 60px; }
  .s2-logowall .c-logowall__cell img { height: 44px !important; max-height: 44px !important; }
}

/* ============================================================================
   7 · MOZGÁSCSÖKKENTÉS — ebben a fájlban semmi nem animál magától, de az
   örökölt hover-átmenetek is maradjanak inertek
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .s2-case-slide .s2-row > img,
  .s2-logowall .c-logowall__cell {
    transition: none !important;
  }
}