/* ============================================================================
   slides-01.css — 01-rolunk.html egyedi stílusai (PPT diák 1–5)
   ----------------------------------------------------------------------------
   Diák: #slide-01 nyitó · #slide-02 claim · #slide-03 az öt lépés ·
         #slide-04 dióhéjban · #slide-05 pillérek.
   A közös box-modellt (.slide { height:100svh; overflow:hidden }, .slide__inner
   szélességi sáv --content-w + padding-top --nav-h) a DIA-SPEC.md szerint egy
   közös fájl adja — itt csak ID-vel skálázva, a tartalom elrendezését és
   tipográfiáját írjuk. Semmi bare `.slide` / `.slide__inner` szabály, hogy ne
   ütközzön a közös réteggel.
   Komponensek (c-timeline--row, c-featurelist--pillars) a components.css-ből,
   csak méretre hangolva — lásd site/components/KATALOGUS.md.
   ============================================================================ */

#slide-01 .slide__inner,
#slide-02 .slide__inner,
#slide-03 .slide__inner,
#slide-04 .slide__inner,
#slide-05 .slide__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* ============================================================================
   #slide-01 · NYITÓ — "AVANTGARDE GROUP"
   ============================================================================ */

.s1-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2vw, 22px);
  width: 100%;
  max-width: 62rem;
  text-align: center;
}

.s1-hero__mark {
  width: clamp(48px, 5.5vw, 72px);
  height: auto;
  opacity: 0.95;
  filter: drop-shadow(0 0 20px rgba(147, 209, 79, 0.4));
}

.s1-hero__title {
  margin: 0;
  font-size: clamp(2.9rem, 7.8vw, 6.6rem);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--white, #ebedf5);
  text-shadow: 0 10px 44px rgba(6, 8, 14, 0.55), 0 0 60px rgba(147, 209, 79, 0.12);
}

.s1-hero__companies {
  margin: 0;
  max-width: 40rem;
  font-size: clamp(0.85rem, 1.6vw, 1.05rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--muted, rgba(235, 237, 245, 0.78));
}

.s1-hero__rule {
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 32px);
  margin-top: clamp(4px, 1.2vw, 12px);
  width: min(100%, 34rem);
}

.s1-hero__line {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(235, 237, 245, 0.4), transparent);
}

.s1-hero__tagline {
  margin: 0;
  flex: 0 0 auto;
  font-size: clamp(0.78rem, 1.4vw, 0.92rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lime-bright, #a1e657);
  white-space: nowrap;
}

/* A gondolati felütés — a korábbi külön claim-diáról került ide (user, 2026-08-14:
   "aztán jöjjön ez … de ebbe összerakva"). Egy dián a cégbemutatkozás és a
   felütés; a nyitóképernyő már kimondta a claimet, ezért az nem ismétlődik. */
.s1-hero__lead {
  max-width: 46rem;
  margin: clamp(10px, 1.6vh, 20px) auto 0;
  font-size: clamp(0.98rem, 1.5vw, 1.18rem);
  line-height: 1.55;
  color: rgba(235, 237, 245, 0.9);
  text-wrap: balance;
}

/* ============================================================================
   #slide-02 · CLAIM — "A szerencse pillanatnyi. A márkaélmény tartós."
   ============================================================================ */

.s1-claim {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 3.6vw, 36px);
  width: 100%;
  max-width: 54rem;
  text-align: center;
}

.s1-claim__tag {
  margin: 0;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--lime-bright, #a1e657);
}

.s1-claim__headline {
  margin: 0;
  font-size: clamp(2.2rem, 5.4vw, 4.2rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--white, #ebedf5);
  text-shadow: 0 8px 36px rgba(6, 8, 14, 0.5);
}

.s1-claim__lead {
  margin: 0;
  max-width: 42rem;
  font-size: clamp(1rem, 1.85vw, 1.28rem);
  line-height: 1.7;
  color: var(--muted, rgba(235, 237, 245, 0.82));
}

/* ============================================================================
   #slide-03 · AZ ÖT LÉPÉS — c-timeline--row, öt izzó megálló, nincs nyíl
   ============================================================================ */

.s1-steps {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(32px, 4.6vw, 52px);
  width: 100%;
}

.s1-steps__head { text-align: center; }

.s1-steps__kicker {
  margin: 0 0 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--lime-bright, #a1e657);
}

.s1-steps__title {
  margin: 0;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  font-weight: 700;
  color: var(--white, #ebedf5);
}

.s1-steps__row {
  width: min(100%, var(--content-w, 1180px));
}

.s1-steps__row .c-timeline__marker {
  width: 62px;
  height: 62px;
  font-size: 1rem;
}

.s1-steps__row .c-timeline__card {
  padding: 1.05rem 0.4rem 0;
  background: none;
  border: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.s1-steps__row .c-timeline__title {
  font-size: clamp(0.8125rem, 1.05vw, 0.92rem);
  letter-spacing: 0.02em;
  line-height: 1.32;
}

/* MÉRT OLVASHATÓSÁGI HIBA: a lépésszámok (01…05) LIME KÖRÖN, LIME BETŰVEL
   álltak, tehát gyakorlatilag eltűntek. Két globális szabály találkozott:
   az `is-active` állapot lime háttérgradienst ad a körnek, az olvashatosag.css
   pedig MINDEN markert lime betűre fest `!important`-tal. A lime körön a sötét
   szám a legerősebb (~9:1), ezért itt, csak a saját diámon, visszaveszem. */
.s1-steps__row .c-timeline__step.is-active .c-timeline__marker {
  color: #11131c !important;
  text-shadow: none;
  /* A komponens csak GRADIENST tett a körre (`background: linear-gradient(...)`),
     ami a `background-color`-t átlátszóra állítja. Így a mérőszkript — ami csak
     a background-color-t olvassa — a dia sötét alapját hitte a szám mögé, és
     1:1-et mért. Tömör lime alapszín + fölé a gradiens: a látvány ugyanaz,
     de a szám mögötti szín mérhető is (#11131c a #93d14f-en ≈ 9:1). */
  background-color: var(--lime, #93d14f);
  background-image: linear-gradient(160deg, var(--lime-hi, #a1e657), var(--lime, #93d14f));
}

/* A vízszintes változat sormagassága a komponensben 48px, a körök viszont itt
   62px-esek — a kör kilógott a sorából, és az összekötő szál a kör közepe FÖLÉ
   került. A sort és a szál magasságát a tényleges körmérethez igazítom. */
@media (min-width: 721px) {
  .s1-steps__row .c-timeline__step { grid-template-rows: 62px auto; }
  .s1-steps__row .c-timeline__step::before { top: 31px; }
}

/* ============================================================================
   #slide-04 · DIÓHÉJBAN — 2 kép + tényblokk, PPT-anatómia
   ============================================================================ */

/* A blokk térköze a MAGASSÁGHOZ kötött, nem a szélességhez. Mért hiba
   (2026-08-18, 1030x545): a `2.6vw` egy alacsony, de széles ablakban 27px-es
   térközöket adott — háromszor —, miközben a diának összesen 371px helye volt.
   A vw a rossz mérce: a hely, ami elfogy, függőleges. */
.s1-nutshell {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 2.4vh, 28px);
  width: min(100%, var(--content-w, 1180px));
}

.s1-nutshell__head { text-align: center; }

.s1-nutshell__kicker {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--lime-bright, #a1e657);
}

.s1-nutshell__title {
  margin: 0;
  font-size: clamp(1.55rem, 2.9vw, 2.3rem);
  font-weight: 700;
  color: var(--white, #ebedf5);
}

/* KÉPSOR — a régi megoldás egy 3 oszlopos, FIX magasságú rács volt, benne
   `object-fit: cover` képekkel és a harmadik cellában a tényszöveggel. Ez három
   hibát okozott egyszerre (mind a user listáján): a rács kilógott a diából, a
   képek le voltak vágva és dobozban ültek, a szövegdoboz pedig magasabb volt a
   tartalmánál, ezért "nagy lukak" nyíltak benne.
   Az új minta a VIZUALIS-SZABALYOK 4. pontja: a SOR magassága kötött, a kép
   `height: 100%; width: auto` — nincs levágás, nincs üres sáv, és a két kép
   egyforma magas, tehát tényleg egy vonalon áll. */
.s1-nutshell__photos {
  display: flex;
  align-items: center;          /* egy vonalra igazítva: azonos magasság */
  justify-content: center;
  gap: clamp(16px, 2vw, 28px);
  /* ~34% a dia magasságából: a szabály 30%-os minimuma fölött, de nem óriás.
     MÉRT HIBA (2026-08-18, 1024x520 és 1030x545): a `clamp` 200px-es ALSÓ
     korlátja pont ott lépett életbe, ahol a legkevesebb a hely — 545px magas
     ablakban 371px állt rendelkezésre, ebből a képsor egyedül 200-at kért, és a
     dia 38px-et levágott a saját tetejéből (a fejléc a menü alá csúszott).
     Ezért a képsor a MARADÉK helyet kapja, nem egy fix minimumot: a `calc` a
     dia többi elemét vonja ki az ablakmagasságból, a `min` pedig magas ablakban
     visszaadja a 34vh-t. Nincs levágás: a kép magassága 100%, a szélessége az
     arányból jön.
     A 400px-es állandó MÉRT: 1030x545-ben a dia felső-alsó paddingja 174px, a
     fejléc 55, a három tény 79, a záró sor 27, a három térköz 39 — összesen
     374px. A maradék 26px szándékos tartalék: a betűrenderelés gépenként
     néhány pixelt mozdul, és ez a dia korábban pont ezen bukott el. */
  height: max(88px, min(34vh, calc(100svh - 400px)));
  max-height: 330px;
}

.s1-nutshell__photo {
  height: 100%;
  width: auto;
  max-width: 46%;               /* egy szélesebb kép se nyomja ki a másikat */
  display: block;
  border-radius: 14px;
  /* doboz NÉLKÜL (user): se keret, se plakett, se háttér — csak a kép.
     A lágy vetett árnyék marad, az nem doboz, csak elemeli a videóról. */
  filter: drop-shadow(0 14px 34px rgba(0, 0, 0, 0.45));
}

/* HÁROM TÉNY — három egyenrangú hasáb egymás mellett. Nincs doboz és nincs
   `space-between`: a blokk magassága a tartalomé, így nincs mit szétfeszíteni. */
.s1-nutshell__facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 34px);
  align-items: start;
}

.s1-nutshell__fact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* finom lime elválasztó a hasábok elején — rend doboz nélkül */
  padding-left: 12px;
  border-left: 2px solid rgba(147, 209, 79, 0.55);
}

.s1-nutshell__facttitle {
  margin: 0;
  font-size: clamp(0.8125rem, 1.05vw, 0.9rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lime-bright, #a1e657);
}

.s1-nutshell__facttext {
  margin: 0;
  font-size: clamp(0.8125rem, 1.05vw, 0.92rem);
  line-height: 1.5;
  color: rgba(235, 237, 245, 0.9);
}

.s1-nutshell__closing {
  margin: 0;
  padding-top: clamp(6px, 1.2vh, 14px);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  text-align: center;
  font-size: clamp(0.92rem, 1.4vw, 1.05rem);
  font-weight: 600;
  color: var(--white, #ebedf5);
}

/* ============================================================================
   #slide-05 · EZEKBEN SZÁMÍTHATNAK RÁNK — 5 pillér, teljes felsorolással
   ============================================================================ */

/* Ugyanaz a mérce, mint a dióhéj-dián: a térköz a MAGASSÁGHOZ kötött. */
.s1-pillars {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 2.2vh, 26px);
  width: min(100%, 46rem);
}

.s1-pillars__head { text-align: center; }

.s1-pillars__kicker {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--lime-bright, #a1e657);
}

.s1-pillars__title {
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 700;
  color: var(--white, #ebedf5);
}

/* A panel és a tételek belső tere is a MAGASSÁGHOZ skálázódik: öt tétel × két
   oldalpadding a legnagyobb egybefüggő tétel a dia mérlegében. */
.s1-pillars__list {
  width: 100%;
  padding: clamp(10px, 1.8vh, 20px) clamp(16px, 2.4vw, 28px);
}

.s1-pillars__list .c-featurelist__item { padding: clamp(5px, 1.1vh, 10px) 8px; gap: 4px; }
.s1-pillars__list .c-featurelist__pillar { font-size: 0.86rem; line-height: 1.2; }
/* 0.79rem = 12.6px volt: a KEMÉNY 13px-es padló alatt. A mérőszkript nem látta,
   mert a részletsor közvetlen gyerekei <i> elemek, nem szövegcsomópontok — a
   szabály viszont akkor is szabály. 0.82rem = 13.1px, a közös --t-apro fokozat;
   a szűkebb sortáv visszaadja azt a magasságot, amit a nagyobb betű elvesz. */
.s1-pillars__list .c-featurelist__details { font-size: 0.82rem; line-height: 1.4; }

/* ============================================================================
   ALACSONY ABLAK — 640px-nél kisebb magasság (a tulajdonos nem teljes képernyőn
   néz, és „nem tudhatjuk, ügyfél mekkora képernyőn nézi majd").
   MÉRT (2026-08-18) 1024x520-ban: a #slide-04 447px-t kért 346px helyre, a
   #slide-05 458-at — mindkettő a saját TETEJÉBŐL vágott, mert a tartalom
   középre igazodik, tehát a hiány fölül tűnik el, a menü alatt.
   Ez a blokk EGY helyről sűrít. Betűméret sehol nem megy 13px alá: a kicker és
   a részletsor marad 0.82rem (13.1px), csak a térközök fogynak.
   A DIA-CÍMEK MÉRETE NEM ITT DŐL EL: 950px alatti ablakban a kepek-teljes.css
   `.slide h2 { font-size: clamp(1.5rem, 2.8vw, 2.4rem) !important }` szabálya
   írja felül mindet. Mérve: 1030x545-ben mindkét cím 28.8px — ide írt saját
   címméret HALOTT KÓD lenne, ezért nincs itt. A kiférést a képsor rugalmas
   magassága és a térközök adják, nem a cím zsugorítása.
   A mobil blokk ez UTÁN jön, tehát telefonon továbbra is a mobil értékek élnek.
   ============================================================================ */

@media (max-height: 640px) {
  /* #slide-04 — dióhéjban */
  .s1-nutshell__kicker { margin-bottom: 4px; }
  .s1-nutshell__facts { gap: clamp(12px, 2vw, 24px); }
  .s1-nutshell__facttext { line-height: 1.42; }
  .s1-nutshell__closing { padding-top: 5px; }

  /* #slide-05 — pillérek. A keskeny 46rem-es sáv alacsony ablakban KÁROS: a
     leghosszabb pillér részletsora két sorra tördelődik, és a második sor
     ugyanannyiba kerül, mint egy egész tétel padingja. Széles, alacsony
     ablakban a teljes sávot használjuk — így mind az öt tétel egysoros. */
  .s1-pillars { width: min(100%, var(--content-w, 1180px)); }
  .s1-pillars__kicker { margin-bottom: 4px; }
  .s1-pillars__list { padding: 8px clamp(14px, 2.2vw, 24px); }
  .s1-pillars__list .c-featurelist__item { padding: 4px 8px; gap: 2px; }
  .s1-pillars__list .c-featurelist__details { line-height: 1.32; }
}

/* ============================================================================
   responsive — mobil: szűk középső oszlop (a videó vágott sávja)
   ============================================================================ */

@media (max-width: 720px) {
  .s1-hero__title { font-size: clamp(2.3rem, 12vw, 3.4rem); }
  .s1-hero__rule { flex-direction: column; gap: 8px; }
  .s1-hero__line { display: none; }

  .s1-nutshell__photos { height: clamp(120px, 18vh, 170px); }
  .s1-nutshell__facts { grid-template-columns: 1fr; gap: 10px; }

  .s1-steps__row .c-timeline__marker { width: 46px; height: 46px; font-size: 0.82rem; }

  .s1-pillars__list { padding: 16px 16px; }
}