/* ==========================================================================
   OPTIMUM AUTÓSISKOLA — gyik.css  (v3 · design-system.md 3. kiadás)
   A GYIK oldal (gyik.html) egyedi stílusai. Az akkordeon, a page-hero, a
   morzsamenü, a .split és a .media-slot a base.css-ben él — ez a fájl csak
   elrendez és kiegészít.

   Szekciók (sorrendben):
     0. Szekció-ritmus: egy közös --rhythm (84px mobilon → ~104px asztalon)
     1. Oldal-fejléc: szöveg + négyzetes videóhely (.faq-hero)
     2. Kérdések: akkordeon, az első kérdés nyitva (.faq)
     3. Záró CTA: fotóhely + „Nem találtad meg a válaszod?” (.faq-cta)
     +  Média-helyek posztere (data-art="gyik-…")

   Csak a base.css tokenjei: nincs gradiens, elmosott árnyék, üveghatás.
   ========================================================================== */


/* ================= MÉDIA-HELYEK POSZTEREI =================
   Lapos SVG-poszterek (assets/media-art/gyik-*.svg), a keret arányában rajzolva,
   .media-slot--fill változattal. Csere: a figure data-src attribútuma (_media/C.md). */
.media-slot__poster[data-art="gyik-kerdes"]  { background-image: url("../assets/media-art/gyik-kerdes.svg?v=202610210915"); }
.media-slot__poster[data-art="gyik-telefon"] { background-image: url("../assets/media-art/gyik-telefon.svg?v=202610210915"); }


/* ================= 0. SZEKCIÓ-RITMUS =================
   bar.md 1.: a szekciók között 80–120px függőleges levegő — mindkét eszközön.
   Egyetlen érték: --rhythm (84px mobilon → ~104px 1440px-en). Minden szekció
   CSAK alul kap ennyit (felül 0): két szekció tartalma között pontosan egy --rhythm,
   és a vörös lábléc-sáv előtt is ugyanennyi. */
main { --rhythm: clamp(5.25rem, 3.9rem + 2.8vw, 6.5rem); }
.faq-hero { padding-bottom: var(--rhythm); }
.faq,
.faq-cta { padding-top: 0; padding-bottom: var(--rhythm); }


/* ================= 1. OLDAL-FEJLÉC =================
   bar.md 1.: az első képernyőn egy szövegblokk (cím + bekezdés + két gomb) és egy
   vizuális elem (a négyzetes videóhely) — és ennyi. Asztalon (≥ 900px) a fejléc
   legalább a nézet magasságú; a tartalom a sáv ALJÁHOZ igazodik, alatta pontosan egy
   --rhythm, így az első (nyitott) kérdés a hajtásnál kezdődik, és a hős és a kérdések
   között sincs 120px-nél több üres hely. Morzsamenü és eyebrow-pilla szándékosan nincs
   (mint a Kategóriák / Tanfolyamok / Kapcsolat oldalon). */
.faq-hero__text > p { max-width: 46ch; }
/* Kétsoros cím, mint a főoldalon: első fele --ink, a második vörös display */
.faq-hero__text h1 .hero-line { display: block; }
.faq-hero__media { max-width: 540px; margin-inline: auto; }

@media (min-width: 900px) {
  .faq-hero {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    padding-top: calc(var(--nav-h) + var(--space-6));
  }
  .faq-hero > .container { margin-top: auto; }
  .faq-hero__split {
    grid-template-columns: minmax(0, 1fr) minmax(0, min(46%, 540px));
    gap: var(--space-8);
  }
}


/* ================= 2. KÉRDÉSEK (akkordeon) ================= */

/* A kérdés h3-ba csomagolva (címsor-navigáció), a gomb stílusa a base.css-ből */
.accordion__heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: normal;
  text-wrap: wrap;           /* a h3 „balance” tördelése ne szűkítse a kérdés sorait */
}
.accordion__trigger > span { flex: 1 1 auto; min-width: 0; }

/* Szövegközi link a válaszban: nagyobb érintési felület a sor tolása nélkül */
.accordion__panel p a { padding-block: 12px; }


/* ================= 3. ZÁRÓ CTA ================= */
.faq-cta__media { max-width: 460px; margin-inline: auto; }

@media (min-width: 900px) {
  /* .split--flip: a fotó (2. gyermek) balra, a szöveg jobbra, szélesebb oszlopban */
  .faq-cta .split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}

.faq-cta__contact {
  display: grid;
  gap: var(--space-1);
}
.split__text > .faq-cta__contact { margin-top: var(--space-5); }
.faq-cta__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  font-size: var(--fs-body);                          /* 17px / 700, --ink */
  font-weight: 700;
  color: var(--ink);
  border-radius: var(--radius-sm);
}
.faq-cta__link span {
  min-width: 0;
  text-decoration: underline;
  text-decoration-color: var(--brand);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.faq-cta__link:hover span { text-decoration-color: var(--brand-lip); }
.faq-cta__link svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--brand-lip); }