/* ============================================================================
   slides-03.css — SOCIAL MEDIA KAMPÁNYOK (PPT dia-12 … dia-16)
   Saját sáv: site/slides/03-social.html.
   ----------------------------------------------------------------------------
   ELRENDEZÉS (user, 2026-08-14, az éles oldalt nézve): „az összes referenciánál"
   ugyanaz az elrendezés kell. Ezért a négy case-dia NEM tart saját vázat: a
   `.s2-*` üvegkártyás rendszert használja, ami a css/slides-02.css 4. szakaszában
   él (kártya · balra szövegpanel · jobbra képrács · alul metrikasáv).

   Ebben a fájlban EZÉRT már csak két dolog van:
     1. a fejezetcím-dia (slide-12) saját stílusai — az nem case-dia
     2. a négy case-dia KÉPSOR-MÉRETEZÉSE: `--s2-mw` és a soronkénti magasságok

   A méretezés képlete (a teljes levezetés a slides-02.css 4. szakaszában van):
       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) = K·mh + C
   ahol `S_i` a sorban lévő képek szélesség/magasság arányainak ÖSSZEGE. Ha
   képet cserélsz vagy sorrendet váltasz, ezeket a számokat ÚJRA KELL SZÁMOLNI —
   különben vagy üres sáv marad, vagy a rács kilóg a kártyából.
   ============================================================================ */

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

/* ============================================================================
   1 · FEJEZETCÍM — SLIDE-12
   Doboz nélkül: nagy szöveg közvetlenül a videón, a fehér betűk fekete
   ragyogását a css/olvashatosag.css adja globálisan.
   FONTOS: `.slide`-ra sose adunk `position`-t és csupasz `.slide {}` szabályt —
   a közös vázat a slides-base.css adja (`position: absolute; inset: 0`).
   ============================================================================ */

.s03-inner--center {
  align-items: center;
  justify-content: center;
}

.s03-chapter {
  width: min(100%, 980px);
  text-align: center;
}

.s03-chapter__kicker {
  margin: 0 0 20px;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-accent, #93d14f);
}

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

.s03-chapter__rule {
  display: block;
  width: 112px;
  height: 3px;
  margin: 28px auto 0;
  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);
}

.s03-chapter__lead {
  margin: 24px 0 0;
  font-size: clamp(0.95rem, 1.7vw, 1.12rem);
  line-height: 1.6;
  color: rgba(235, 237, 245, 0.9);
}

@media (max-width: 767px) {
  .s03-chapter__title { font-size: clamp(2rem, 11vw, 3.2rem); }
}

/* ============================================================================
   2 · A NÉGY CASE-DIA KÉPRÁCSA
   A váz a slides-02.css-ből jön; itt csak a diánkénti sorméretek vannak.
   ============================================================================ */

/* SLIDE-13 · Chio — 4 kép, 2+2
   sor A: image46 (1.0370) + image47 (1.0000) = 2.0370   (1 köz)
   sor B: image48 (1.0000) + image49 (1.4990) = 2.4990   (1 köz)
   Σ(1/S)=0.891078 · Σ(köz/S)=10.693 → mw = 1.12224·mh − 1.47 */
.s2-case--sm13 { --s2-mw: min(calc(1.12224 * var(--s2-mh) - 1.47px), var(--s2-mwmax)); }
.s2-case--sm13 .s2-row--a { height: calc((var(--s2-mw) - 12px) / 2.0370); }
.s2-case--sm13 .s2-row--b { height: calc((var(--s2-mw) - 12px) / 2.4990); }

/* SLIDE-14 · Burger King — 4 ÁLLÓ kép, 2+2
   sor A: image50 (0.7393) + image51 (0.7393) = 1.4786   (1 köz)
   sor B: image52 (0.7626) + image53 (0.7626) = 1.5252   (1 köz)
   Σ(1/S)=1.331968 · Σ(köz/S)=15.984 → mw = 0.75077·mh + 2.99
   Négy álló kép magas rácsot ad, ezért itt a rács keskenyebb, mint a plafon —
   a képdobozon belül középre kerül. Szélesebbé csak úgy lehetne tenni, ha egy
   sorba kerülne mind a négy, de akkor a képek harmadakkorák lennének. */
.s2-case--sm14 { --s2-mw: min(calc(0.75077 * var(--s2-mh) + 2.99px), var(--s2-mwmax)); }
.s2-case--sm14 .s2-row--a { height: calc((var(--s2-mw) - 12px) / 1.4786); }
.s2-case--sm14 .s2-row--b { height: calc((var(--s2-mw) - 12px) / 1.5252); }

/* SLIDE-15 · Chio Intense — 5 kép, 3+2
   sor A: image54 (1.0335) + image55 (0.8994) + image56 (1.0354) = 2.9683 (2 köz)
   sor C: image60 (1.0337) + image61 (1.0370)                    = 2.0707 (1 köz)
   Σ(1/S)=0.819822 · Σ(köz/S)=13.880 → mw = 1.219777·mh + 16.93 */
.s2-case--sm15 { --s2-mw: min(calc(1.219777 * var(--s2-mh) + 16.93px), var(--s2-mwmax)); }
.s2-case--sm15 .s2-row--a { height: calc((var(--s2-mw) - 24px) / 2.9683); }
.s2-case--sm15 .s2-row--c { height: calc((var(--s2-mw) - 12px) / 2.0707); }

/* SLIDE-16 · Servier — 6 kép, 3+3: fent három fekvő poszt, lent három álló
   sor A: image62 (1.7729) + image63 (1.7729) + image64 (1.7739) = 5.3197 (2 köz)
   sor B: image65 (0.7979) + image66 (0.7979) + image67 (0.7979) = 2.3937 (2 köz)
   Σ(1/S)=0.605746 · Σ(köz/S)=14.538 → mw = 1.650863·mh + 4.19 */
.s2-case--sm16 { --s2-mw: min(calc(1.650863 * var(--s2-mh) + 4.19px), var(--s2-mwmax)); }
.s2-case--sm16 .s2-row--a { height: calc((var(--s2-mw) - 24px) / 5.3197); }
.s2-case--sm16 .s2-row--b { height: calc((var(--s2-mw) - 24px) / 2.3937); }