/*
  Nyitooldal-szekciok - a design audit (docs/design/design-audit.md) "KEEP"
  besorolasu szerkezete: eyebrow + szekciocim, kartyaracs, szamozott lepesek,
  GYIK harmonika.

  A markupot a tartalom adja (ADR-009): a szerkeszto ":::" kontenereket ir
  markdownban, azokbol lesznek az itt stilizalt osztalyok. Lasd
  SectionContainerRenderer.

  KIZAROLAG szemantikus token hasznalhato (DS-BRAND-002) - architecture teszt orzi.
*/

@layer components {
    /*
      A landing SZANDEKOSAN nem orokli a .content 68ch szelesseget: ott a
      folyoszoveg olvashatosaga a cel, itt viszont racs es teljes szelesseg.
    */
    .landing > * + * {
        margin-block-start: var(--space-16);
    }

    /*
      A nagy koz SZEKCIOK koze valo, nem a szekciocim es a sajat tartalma
      köze - ott ugyanaz a tavolsag azt sugallna, hogy a cim nem ehhez a
      blokkhoz tartozik. A markdownbol lapos testverek jonnek (h2, p, div),
      ezert a csoportositast itt kell visszaadni.
    */
    .landing > h2 + * {
        margin-block-start: var(--space-4);
    }

    .landing > p + * {
        margin-block-start: var(--space-6);
    }

    /* Szekciocim ala tartozo bevezeto: folyoszoveg, nem foszoveg. */
    .landing > p {
        max-width: 60ch;
        color: var(--text-secondary);
    }

    /* ---------- Hero ---------- */

    .landing-hero-image {
        width: 100%;
        max-height: clamp(12rem, 26vw + 5rem, 22rem);
        object-fit: cover;
        border-radius: var(--radius-xl);
    }

    .landing-hero {
        display: grid;
        gap: var(--space-6);
        align-items: center;
    }

    @media (min-width: 1024px) {
        .landing-hero {
            grid-template-columns: 1.1fr 0.9fr;
            gap: var(--space-12);
        }
    }

    .landing-hero img {
        width: 100%;
        max-height: clamp(14rem, 30vw + 6rem, 26rem);
        object-fit: cover;
        border-radius: var(--radius-xl);
    }

    /*
      Az eyebrow VIZUALIS elem, nem cimsor: azert bekezdes, mert egy H1 fole
      tett H2 vagy egy ures cimsorszint megtevesztene a kepernyoolvasot
      (accessibility.md 2. pont: a cimsorszintek nem ugorhatnak).

      HELYZET SZERINT azonosul, nem osztaly szerint: a markdownt szerkeszto
      ember nem tud (es ne is kelljen) osztalyt irni egy bekezdesre. A
      konvencio: a hero (es a korhinta minden slide-ja) elso bekezdese az
      eyebrow, a cim utani pedig a lead. A .eyebrow / .lead osztaly a Razor
      oldalak kedveert marad meg.
    */
    .hero > p:first-child,
    .carousel-slide-body > p:first-child,
    .eyebrow {
        display: inline-block;
        padding: var(--space-1) var(--space-3);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-pill);
        color: var(--brand-primary);
        font-size: var(--font-size-body-small);
        letter-spacing: 0.04em;
        text-transform: uppercase;
        margin-block-end: var(--space-4);
    }

    .hero > h1 + p,
    .lead {
        color: var(--text-secondary);
        font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
        max-width: 46ch;
        margin-block: var(--space-4) var(--space-6);
    }

    /*
      A gombsor UTANI bekezdes a hero labjegyzete ("0 Ft a nyilt betaban").
      Ugyanaz a helyzet-alapu azonositas, mint fent: a markdownt szerkeszto
      embernek ne kelljen osztalyt irnia. A "bekezdes, amiben gomb van" utan
      kovetkezo bekezdes pontosan ez - masra nem illeszkedik, mert a heroban
      a gombsor az utolso elotti elem.
    */
    .hero > p:has(.button) + p {
        color: var(--text-secondary);
        font-size: var(--font-size-body-small);
        margin-block-start: calc(-1 * var(--space-2));
    }

    /*
      A gombsor sortori, hogy 320px szelessegen se csusszon ki.

      A :has() azert kell, mert a markdownbol a ket gomb egyetlen bekezdesbe
      kerul, osztaly nelkul - a "bekezdes, amiben gomb van" pontosan az a
      bekezdes, amit gombsorkent kell tordelni.
    */
    p:has(> .button),
    .actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-3);
    }

    /* ---------- Szekciofej ---------- */

    .section-head {
        max-width: 56ch;
        margin-block-end: var(--space-8);
    }

    .section-head p {
        color: var(--text-secondary);
        margin-block-start: var(--space-3);
    }

    /* ---------- Kartyaracs ---------- */

    /*
      auto-fit + minmax: a racs a HELYHEZ igazodik, nem egy elore megadott
      oszlopszamhoz. Igy nem kell breakpointonkent ujraszamolni, es harom
      kartya ugyanugy jol all, mint hat.
    */
    .card-grid {
        display: grid;
        gap: var(--space-4);
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));

        /* A racs LISTA (lasd SectionContainerRenderer) - a jelolo es a
           behuzas viszont racsban ertelmetlen. */
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .card {
        display: flex;
        flex-direction: column;
        padding: var(--space-6);
        background: var(--surface-elevated);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-lg);
    }

    /* Kartyak listaja (ertekelesek, belepesi modok): a lista-jelolo es a behuzas nelkul. */
    .card-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }

    .card-list > .card {
        padding: var(--space-4);
        gap: var(--space-2);
    }

    /*
      A JEL A CIMSOR FOLE kerul, pedig a markupban utana all: a kartyat a
      "###" cimsor hatarolja (lasd SectionContainerRenderer), tehat a
      cimsornak KELL elol allnia a forrasban. A szemnek viszont eloszor a
      jel szol - szakmat valasztani olvasas nelkul is lehessen.

      A ":has()" azert kell, mert a markdownbol a kep egy OSZTALY NELKULI
      bekezdesben erkezik; a "bekezdes, amiben kep van" pontosan az, amit
      vizualkent kell kezelni. Ugyanaz az indok, mint a gombsornal.
    */
    .card > p:has(> img) {
        order: -1;
        margin-block-end: var(--space-4);
    }

    .card > p:has(> img) img {
        display: block;
        inline-size: 100%;
        block-size: auto;
        aspect-ratio: 3 / 2;
        object-fit: cover;
        border-radius: var(--radius-md);
    }

    /*
      A SZAKMA-JEL nem fotó: nem tolti ki a kartya szelesseget, hanem egy
      jel meretu marad. A megkulonboztetes az UTVONALBOL jon ("/icons/"),
      mert a markdownt szerkeszto ember nem tud (es ne is kelljen) osztalyt
      irni egy kepre - ugyanaz az elv, mint a gombsornal es az eyebrow-nal.
    */
    .card > p:has(> img[src*="/icons/"]) img {
        inline-size: 2.5rem;
        block-size: 2.5rem;
        aspect-ratio: auto;
        border-radius: 0;
    }

    /*
      A gomb a kartya ALJARA kerul, fuggetlenul attol, milyen hosszu a
      szoveg felette: kulonben egy racsban a kulonbozo magassagu kartyak
      gombjai lepcsot alkotnanak.
    */
    .card > p:has(> .button) {
        margin-block: auto 0;
        padding-block-start: var(--space-4);
    }

    .card h3 {
        margin-block-end: var(--space-2);
    }

    .card p,
    .card li {
        color: var(--text-secondary);
        margin-block: 0 var(--space-2);
    }

    .card ul {
        padding-inline-start: var(--space-6);
        margin-block: 0;
    }

    /* ---------- Szamozott lepesek ---------- */

    /*
      <ol>, mert a sorrend TARTALMI allitas. A sajat szamlalo csak azert kell,
      mert a beepitett listajelolo nem stilizalhato koros jelolonek.
    */
    .steps {
        display: grid;
        gap: var(--space-6);
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
        counter-reset: step;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .step {
        counter-increment: step;
    }

    .step::before {
        content: counter(step);
        display: flex;
        align-items: center;
        justify-content: center;
        inline-size: 2.5rem;
        block-size: 2.5rem;
        margin-block-end: var(--space-3);
        border-radius: var(--radius-pill);
        background: var(--action-primary-background);
        color: var(--action-primary-text);
        font-family: var(--font-family-display);
        font-weight: 700;
    }

    .step h3 {
        margin-block-end: var(--space-2);
    }

    .step p {
        color: var(--text-secondary);
        margin-block: 0;
    }

    /* ---------- GYIK ---------- */

    /*
      A harmonika SORAI a szekcio teljes szelesseget kapjak - egy fel oldal
      szeles oszlop a teljes szelessegu kartyaracsok alatt ugy nezett ki,
      mintha elcsuszott volna.

      A VALASZ szovege viszont tovabbra is olvasasi oszlop szeles: egy
      1200px hosszu sort a szem nem tud kovetni. Vagyis a keret szeles, a
      szoveg nem - nem ugyanaz a ket dolog.
    */
    .faq {
        display: grid;
        gap: var(--space-2);
    }

    .faq-item {
        border: 1px solid var(--border-default);
        border-radius: var(--radius-md);
        background: var(--surface-elevated);
    }

    .faq-item > summary {
        /* A touch target a WCAG 2.5.8 miatt kell: a summary kattintofelulet. */
        display: flex;
        align-items: center;
        gap: var(--space-3);
        min-block-size: var(--touch-target-min);
        padding: var(--space-3) var(--space-4);
        font-family: var(--font-family-display);
        font-weight: 600;
        cursor: pointer;
    }

    /*
      Sajat nyitasjelzo: a bongeszo alapertelmezett haromszoge platformonkent
      mashogy nez ki, high contrast modban pedig el is tunhet - viszont ez az
      EGYETLEN jel arrol, hogy a sor nyithato.

      A currentColor miatt a kontrasztot a summary szovegszine hordozza, tehat
      kulon szinparositast nem kell orizni ra.
    */
    .faq-item > summary::marker,
    .faq-item > summary::-webkit-details-marker {
        content: "";
        display: none;
    }

    .faq-item > summary::after {
        content: "";
        inline-size: 0.55em;
        block-size: 0.55em;
        margin-inline-start: auto;
        flex: none;
        border-inline-end: 2px solid currentcolor;
        border-block-end: 2px solid currentcolor;
        transform: rotate(45deg) translate(-0.1em, -0.1em);
        transition: transform var(--motion-fast) ease;
    }

    .faq-item[open] > summary::after {
        transform: rotate(-135deg) translate(-0.1em, -0.1em);
    }

    .faq-item[open] > summary {
        color: var(--brand-primary);
    }

    .faq-item > :not(summary) {
        max-width: 68ch;
        color: var(--text-secondary);
        margin: 0 var(--space-4) var(--space-4);
    }

    /* ---------- Statisztika / kiemelt szamok ---------- */

    .stats {
        display: grid;
        gap: var(--space-4);
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
        padding: var(--space-8);
        /*
          Sotet teman a --surface-subtle (egyetlen lepessel vilagosabb az
          alapnal) gyakorlatilag eltunt a hatterben: a doboz csak a
          kerettol latszott. A kiemelt szamoknak sajat feluletnek kell
          lenniuk, ezert ugyanazt az emelt szintet kapjak, mint a kartyak.
        */
        background: var(--surface-elevated);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-xl);
    }

    .stats p {
        margin: 0;
        color: var(--text-secondary);
    }

    .stats strong {
        display: block;
        font-family: var(--font-family-display);
        font-size: var(--font-size-h2);
        color: var(--brand-primary);
    }

    /*
      Kiemelt megjegyzes. A markdown ">" idezetblokkjabol jon, es a
      tartalomban tenyleg kiemelesre valo (pl. "ez meg nem vegleges arazas"),
      nem szo szerinti idezetre.
    */
    .landing > blockquote {
        max-width: 60ch;
        margin-inline: 0;
        padding: var(--space-4) var(--space-6);
        border-inline-start: 3px solid var(--brand-primary);
        border-radius: 0 var(--radius-md) var(--radius-md) 0;
        background: var(--surface-elevated);
        color: var(--text-secondary);
    }

    .landing > blockquote p {
        margin: 0;
    }

    /* ---------- Zaro CTA ---------- */

    .cta {
        padding: var(--space-12) var(--space-8);
        text-align: center;
        background: var(--surface-elevated);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-xl);
    }

    .cta p {
        color: var(--text-secondary);
        max-width: 48ch;
        margin-inline: auto;
    }

    .cta .actions {
        justify-content: center;
        margin-block-start: var(--space-6);
    }
}

/*
  ---------- Scroll-reveal (design-audit.md: KEEP) ----------

  A ".js" osztalyt a <html> elemre a layoutban levo egysoros script teszi
  fel. Enelkul a szabaly NEM lep eletbe - vagyis JavaScript nelkul a
  tartalom egyszeruen ott van, nem tunik el. Ez nem elmeleti eset: a
  script betoltese elbukhat halozati hiba miatt is.
*/
@layer components {
    .js .reveal,
    .js [data-reveal] > * {
        opacity: 0;
        transform: translateY(14px);
        transition:
            opacity var(--motion-reveal) var(--easing-reveal),
            transform var(--motion-reveal) var(--easing-reveal);
    }

    .js .reveal.is-visible,
    .js [data-reveal] > *.is-visible {
        opacity: 1;
        transform: none;
    }

    /*
      A lepcsozetes indulas adja a "sorban erkeznek" erzetet. Csak az elso
      negy elemre: ennel tobbnel a kesobbi elemek varakozasa mar
      lassusagnak latszik, nem ritmusnak.
    */
    .js .reveal:nth-child(2),
    .js [data-reveal] > *:nth-child(2) { transition-delay: 80ms; }

    .js .reveal:nth-child(3),
    .js [data-reveal] > *:nth-child(3) { transition-delay: 160ms; }

    .js .reveal:nth-child(4),
    .js [data-reveal] > *:nth-child(4) { transition-delay: 240ms; }

    /*
      prefers-reduced-motion eseten a reveal.js fel sem epiti az observert,
      hanem azonnal lathatova tesz mindent. Ez a szabaly a masodik halo:
      ha a script barmi miatt nem fut le, a tartalom akkor is latszik.
    */
    @media (prefers-reduced-motion: reduce) {
        .js .reveal,
    .js [data-reveal] > * {
            opacity: 1;
            transform: none;
            transition: none;
        }
    }
}

/* ------------------------------------------------------------------
   Ertesitesi kozpont (docs/features/in-app-notifications.md).

   A sor EGY gomb, nem link: a megnyitas allapotot valtoztat (olvasottnak
   jeloles), ezert POST - egy GET link ezt egy elonezetbol vagy crawler
   kerésbol is kivaltana.
   ------------------------------------------------------------------ */
.notification-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-block-end: var(--space-6);
}

.notification-header h1 {
    margin: 0;
}

.notification-list {
    list-style: none;
    margin: var(--space-6) 0 0;
    padding: 0;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* 9. fazis (asztali): az ertesites idorendi folyam - egy oszlop marad, olvashato szelessegben. */
@media (min-width: 768px) {
    .notification-header,
    .notification-list {
        max-inline-size: 48rem;
    }
}

.notification-item + .notification-item {
    border-block-start: 1px solid var(--border-default);
}

/* Az atlatszo csik a MAR OLVASOTT soroknal is helyet foglal, kulonben a
   szoveg 3 pixelt ugrana, amikor a sor olvasotta valik. */
.notification-item {
    border-inline-start: 3px solid transparent;
}

/*
  Az olvasatlan allapot NEM csak hatterszinnel jelolt: a --surface-subtle es
  a --surface-default kozott negy hexa-pont a kulonbseg, ami sotet temaban
  gyakorlatilag lathatatlan. A bal oldali akcentus-csik viszont egyertelmu,
  es nem a szinlatasra tamaszkodik egyedul (WCAG 1.4.1) - a sor vegi pottyel
  es a listaelem aria-label-jevel egyutt harom jelzes fedi ugyanazt.
*/
.notification-item-unread {
    background: var(--surface-subtle);
    border-inline-start: 3px solid var(--action-primary-background);
}

.notification-form {
    margin: 0;
}

.notification-button {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    inline-size: 100%;
    padding: var(--space-4);
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.notification-button:hover {
    background: var(--surface-elevated);
}

.notification-avatar {
    flex: none;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: var(--radius-pill);
    object-fit: cover;
}

.notification-avatar-monogram {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-elevated);
    border: 1px solid var(--border-default);
    color: var(--text-secondary);
    font-size: var(--font-size-body-small);
    font-weight: 700;
}

.notification-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-inline-size: 0;
}

.notification-text {
    color: var(--text-primary);
}

.notification-context {
    color: var(--text-secondary);
}

.notification-meta {
    color: var(--text-muted);
    font-size: var(--font-size-body-small);
}

/* A jelolo a sor VEGEN all, es sajat szinnel jelzi az olvasatlansagot -
   a hatterszin onmagaban nem lenne eleg (WCAG 1.4.1: a szin nem lehet az
   egyetlen informaciohordozo), ezert a listaelem aria-label-t is kap. */
.notification-dot {
    flex: none;
    margin-inline-start: auto;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: var(--radius-pill);
    background: var(--action-primary-background);
}

.notification-pager {
    display: flex;
    gap: var(--space-3);
    margin-block-start: var(--space-6);
}

/*
  ---------- HERO KORHINTA (docs/design/plusseat-home.md) ----------

  A KORHINTA MAGA A HERO: az oldalsablon nem tesz fole arculati kepsavot
  (ContentDocument.ProvidesOwnHero). Ket dolgot kell egyszerre tudnia:

    1. ALLITAST TENNI - nagy cimsor es nagy vizual, ket hasabban;
    2. NEM ELNYELNI A HAJTAST - a kovetkezo szekcio (a szerep-valaszto, az
       oldal fo konverzios pontja) egy resze mar az elso kepernyon
       latszodjon. Ezert a slide magassaga a NEZETABLAKHOZ kotott, nem a
       kep aranyahoz: a fejlec es a korhinta egyutt kb. 70svh, a maradek
       mar a kovetkezo blokke.

  A SORREND SZANDEKOS: alapertelmezesben a slide-ok EGYMAS ALATT allnak,
  teljes tartalommal. A vizszintes sav csak akkor kapcsol be, ha a JS
  megjelolte a korhintat (.is-interactive) - igy JS nelkul semmi nem
  tunik el, es nem marad halott vezerlo sem.

  Csak szemantikus tokenek szerepelnek (DS-BRAND-002): a nyers szinek a
  tokens.css primitiv retegeben maradnak, es az arculatvaltas ezt a
  komponenst nem erinti.
*/
.carousel {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.carousel-track {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/*
  A slide-nak a renderer utan pontosan KET gyereke van: a vizual es a
  szoveg (SectionContainerRenderer.WriteSlideChildren). A kep a markupban
  ELOL all, mert mobilon felul a helye; asztali nezetben a CSS teszi at a
  jobb hasabba.
*/
.carousel-slide {
    display: grid;
    grid-template-columns: 1fr;
    background: var(--surface-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/*
  A kep a KARTYA SZELEIG er, nincs korulotte padding: a keretbe zart kep
  illusztraciokent olvasodik, a kifuto kep viszont maga a hero.
*/
.carousel-slide-media {
    min-inline-size: 0;
    overflow: hidden;
}

.carousel-slide-media img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    max-block-size: 34svh;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.carousel-slide-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-8);
    min-inline-size: 0;
}

/* A fuggoleges ritmust a gap adja, nem az elemek sajat margoja. */
.carousel-slide-body > * {
    margin-block: 0;
}

.carousel-slide-body > :is(h1, h2) {
    font-size: var(--font-size-h1);
    line-height: 1.1;
    text-wrap: balance;
}

/*
  A KIEMELT SZO A JEL SZINET KAPJA. A markajel "+" jele es a focim "Plusz"
  szavai ugyanazt mondjak - ez a kapcsolat eddig ott volt a szovegben, de
  senki nem vette eszre. A szin teszi lathatova, hogy a nev nem dekoracio,
  hanem az ajanlat osszefoglalasa.

  A vastagitas a cimsorban amugy sem latszana (a cim maga is vastag), ezert
  a font-weight orokolt marad - csak a szin valtozik.
*/
.carousel-slide-body > :is(h1, h2) strong {
    color: var(--brand-primary);
    font-weight: inherit;
}

.carousel-slide-body > :is(h1, h2) + p {
    color: var(--text-secondary);
    max-inline-size: 42ch;
}

@media (min-width: 60rem) {
    .carousel-slide {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);

        /*
          Az also korlat tartja a hajtas kozeleben a kovetkezo szekciot, a
          felso pedig azt akadalyozza meg, hogy nagy kepernyon a hero egy
          ertelmetlenul magas doboz legyen.
        */
        min-block-size: min(26rem, 52svh);
        max-block-size: 34rem;
    }

    .carousel-slide-body {
        grid-area: 1 / 1;
        padding: var(--space-8) var(--space-12);
    }

    .carousel-slide-media {
        grid-area: 1 / 2;
    }

    .carousel-slide-media img {
        block-size: 100%;
        max-block-size: none;
        aspect-ratio: auto;
    }
}

/*
  A hero es a kovetkezo szekcio koze SZUKEBB koz jut, mint ket szekcio
  koze: a szerep-valaszto nem egy tovabbi tema, hanem a hero folytatasa -
  a valasz arra, amit a hero felvetett.
*/
.landing > .carousel + * {
    margin-block-start: var(--space-8);
}

/*
  ASZTALI NEZETBEN A VEZERLOK A VIZUAL SARKABAN ULNEK, nem a korhinta
  alatt kulon sorban. Az a sor ugyanis a hajtas felett vitt el hatvan
  pixelt - pont annyit, amennyi a kovetkezo szekcio megpillantasahoz
  kellett. Sajat felulettel es kerettel allnak, hogy a fotó felett is
  olvashatok maradjanak.

  Csak .is-interactive allapotban: JS nelkul a slide-ok egymas alatt
  allnak, ott egy lebego vezerlo a masodik slide-ra esne.
*/
@media (min-width: 60rem) {
    .carousel.is-interactive .carousel-controls {
        position: absolute;
        inset-block-end: var(--space-4);
        inset-inline-end: var(--space-4);
        gap: var(--space-1);
        padding: var(--space-1);
        background: var(--surface-elevated);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-pill);
    }
}

/* A JS altal atvett allapot: vizszintes, egy slide egy kepernyo. */
.carousel.is-interactive .carousel-track {
    flex-direction: row;
    overflow-x: hidden;
    scroll-snap-type: x mandatory;
    gap: 0;
}

.carousel.is-interactive .carousel-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
}

.carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
}

.carousel-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: var(--touch-target-min);
    min-block-size: var(--touch-target-min);
    background: var(--surface-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-pill);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.carousel-arrow:hover {
    border-color: var(--border-strong);
}

.carousel-dots {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/*
  A pottyok LATHATO merete kicsi, a KATTINTHATO teruletuk viszont teljes
  ertekű touch target - ezert a padding a gombon van, a szinezett pont
  pedig a hatterkep helyett egy belso kerek hatter.
*/
.carousel-dot {
    inline-size: var(--touch-target-min);
    block-size: var(--touch-target-min);
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
}

.carousel-dot::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    translate: -50% -50%;
    inline-size: 10px;
    block-size: 10px;
    border-radius: var(--radius-pill);
    background: var(--text-secondary);
    transition: background var(--motion-fast) linear, scale var(--motion-fast) linear;
}

.carousel-dot.is-current::after {
    background: var(--action-primary-background);
    scale: 1.3;
}

.carousel-arrow:focus-visible,
.carousel-dot:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/*
  Mozgas-tiltas eseten a lapozas UGRAS, nem csusztatas. A JS ugyanezt
  kezeli a scroll behaviornal - a ketto egyutt fedi a programozott es a
  felhasznaloi gorgetest is.
*/
@media (prefers-reduced-motion: reduce) {
    .carousel.is-interactive .carousel-track {
        scroll-behavior: auto;
    }

    .carousel-dot::after {
        transition: none;
    }
}


/*
  ---------- TELJES BLOKKOS CTA (szerep-valaszto) ----------

  A kartya EGESZE kattinthato, nem csak a benne levo gomb: a valasztas
  ("melyik oldalan ulsz a szeknek") az oldal fo konverzios pontja, es egy
  gomb-meretu celterulet ehhez keves - kiemelten mobilon.

  A minta "stretched link": a kartyaban levo GOMB marad az egyetlen
  interaktiv elem, es egy pszeudoelem teriti ki a kartya teljes teruletere.
  Igy a billentyuzet-fokusz es a kepernyoolvaso egyetlen, ertelmes linket
  lat - nem egy kattinthato divet, es nem ket egymasba agyazott linket.
*/
.card-grid .card:has(.button) {
    position: relative;
    transition: border-color var(--motion-fast) linear, transform var(--motion-fast) linear;
}

.card-grid .card:has(.button):hover {
    border-color: var(--border-strong);
    transform: translateY(-2px);
}

/*
  A kiteritett link a tartalom FOLE kerul (z-index), nem ala. Forditva a
  cimsorra vagy a leirasra kattintva nem tortent semmi - vagyis pont az
  veszett el, amiert a minta letezik: a kartya nem volt kattinthato ott,
  ahova a szem nez.

  Az ara az, hogy a kartyan belul a szoveg nem jelolheto ki. Egy
  linkkartyanal ez elfogadott csere (a Bootstrap "stretched-link" is igy
  mukodik): a kartya elsodleges funkcioja a tovabblepes, nem az olvasas.
*/
.card-grid .card .button::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

@media (prefers-reduced-motion: reduce) {
    .card-grid .card:has(.button),
    .card-grid .card:has(.button):hover {
        transition: none;
        transform: none;
    }
}

/*
  ---------- HERO (G5, docs/design/g5-landing-ket-utas-hero.md) ----------

  A SZOVEG FIX, CSAK A FOTO LAPOZ. A korhinta-hero ota egy latogato negybol
  harom esetben nem a ket-utas uzenetet latta eloszor - itt a cim, az alcim
  es a ket gomb mindig ott van, a fotok diszito szerepben forognak.

  Ket hasab asztali nezetben (szoveg | foto), mobilon a foto felul. A
  magassag a nezetablakhoz kotott, hogy a szerep-valaszto egy resze mar az
  elso kepernyon latszodjon (ugyanaz az elv, mint a korhintanal).

  JS NELKUL: az elso foto latszik, a tobbi rejtve marad - a fotok diszek, a
  szoveg viszont nem fugg semmitol. A vezerloket a carousel.js veszi elo.
*/
/* KIVUL a retegen, mint a korhinta: a .carousel-slide retegtelen szabalyait csak igy tudja felulirni. */
    .hero {
        position: relative;
        display: grid;
        grid-template-columns: 1fr;
        background: var(--surface-elevated);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-lg);
        overflow: hidden;
    }

    .hero-body {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: var(--space-4);
        padding: var(--space-8);
        min-inline-size: 0;
    }

    .hero-body > * {
        margin-block: 0;
    }

    /* Eyebrow: a cim ELOTTI rovid sor. */
    .hero-body > p:first-child {
        color: var(--brand-primary);
        font-size: var(--font-size-body-small);
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .hero-body > h1 {
        font-size: var(--font-size-h1);
        line-height: 1.1;
        text-wrap: balance;
    }

    .hero-body > h1 strong {
        color: var(--brand-primary);
        font-weight: inherit;
    }

    .hero-body > h1 + p {
        color: var(--text-secondary);
        max-inline-size: 44ch;
    }

    /* A ket CTA egy sorban, tordelve ha nem fer. */
    .hero-body > p:has(> .button) {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-3);
    }

    /* Mobilon a foto felul (mint a korhintanal), a szoveg alatta; asztalon a jobb hasab. */
    .hero-media {
        position: relative;
        order: -1;
        min-inline-size: 0;
        overflow: hidden;
    }

    .hero-track {
        display: flex;
        flex-direction: row;
        gap: 0;
        overflow-x: hidden;
        scroll-snap-type: x mandatory;
        block-size: 100%;
    }

    /* A .carousel-slide osztaly a JS-nek kell (lapozas); a kartya-stilusat itt levesszuk. */
    .hero-photo {
        display: block;
        flex: 0 0 100%;
        margin: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        scroll-snap-align: start;
        min-inline-size: 0;
    }

    .hero-photo img {
        display: block;
        inline-size: 100%;
        block-size: 100%;
        max-block-size: 34svh;
        aspect-ratio: 16 / 10;
        object-fit: cover;
    }

    /* JS nelkul csak az elso foto: a tobbi disz, nem tartalom. */
    .hero:not(.is-interactive) .hero-photo:not(:first-child) {
        display: none;
    }

    .hero-controls {
        position: absolute;
        inset-block-end: var(--space-3);
        inset-inline-end: var(--space-3);
        gap: var(--space-1);
        padding: var(--space-1);
        background: var(--surface-elevated);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-pill);
    }

    @media (min-width: 60rem) {
        .hero {
            grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
            min-block-size: min(26rem, 52svh);
            max-block-size: 34rem;
        }

        .hero-body {
            grid-area: 1 / 1;
            padding: var(--space-8) var(--space-12);
        }

        .hero-media {
            grid-area: 1 / 2;
            order: 0;
        }

        /*
          A foto-sav ABSZOLUT a hasabban: igy a sor magassagat a szoveg adja
          (min/max a .hero-n), nem a kep termeszetes magassaga - kulonben a
          4 foto natur magassaga huzta volna szet a herot, es a szoveg a
          levagott resz aljara csuszott.
        */
        .hero-track {
            position: absolute;
            inset: 0;
        }

        .hero-photo img {
            max-block-size: none;
            aspect-ratio: auto;
        }
    }

    .landing > .hero + * {
        margin-block-start: var(--space-8);
    }

    @media (prefers-reduced-motion: reduce) {
        .hero-track {
            scroll-behavior: auto;
        }
    }

/*
  ---------- Foto nelkuli hero (#61) ----------

  A ketoszlopos racs a FOTO miatt van: a .hero-media a masodik hasab. Ha a
  tartalom nem hoz fotot, a jobb hasab URESEN marad - a szoveg a panel bal
  feleben ul, a masik fele meg egy nagy ures felulet a kereten belul.

  EZ NEM A KEZDOLAP MIATT KELL. A /szakembereknek es a /szalonoknak heroja
  SOSEM hozott fotot, tehat ott ez a hiba 2026-08-30 ota latszott - csak
  senki nem nezte meg 60rem folott. A kezdolapi fotok kivetele most
  ugyanebbe az allapotba tette a fooldalt is. Ezert a szabaly ALTALANOS:
  minden foto nelkuli herora vonatkozik, nem a kezdolapra.
*/
    .hero:not(:has(.hero-media)) {
        grid-template-columns: 1fr;
    }

    @media (min-width: 60rem) {
        /*
          A magassag-korlatok a FOTO aranyait vedtek (lasd a .hero-track
          abszolut pozicionalasat). Foto nelkul a szoveg adja a magassagot;
          a 34rem-es plafon itt levagna a hosszabb alcimet.
        */
        .hero:not(:has(.hero-media)) {
            min-block-size: 0;
            max-block-size: none;
        }

        .hero:not(:has(.hero-media)) > .hero-body {
            grid-area: 1 / 1 / 2 / -1;
        }
    }

/*
  ---------- A kezdolap egy-kepernyos heroja (#61, Ruben javaslata) ----------

  Ruben szandeka: az elso kepernyo "egy allitas, egy mondat, ket ut" - es
  semmi mas. A javaslat CSS-e (PR #60) .home-hero__* osztalyokkal dolgozott;
  itt HELYZET SZERINTI valtozatban all, mert a kezdolap markupja markdownbol
  jon (ADR-009), es a szerkesztonek nem kell (es ne is kelljen) osztalyt irnia.

  A MAGASSAG NEM SZAMOLT ERTEK - ES NEM IS LEHET AZ. A javaslat
  calc(100vh - var(--site-header-h, 66px) - var(--site-footer-h, 210px))
  formaban kerte. Egyik valtozo sem letezik a repoban, a 210px pedig tipp -
  es MEGMERTEM: a mi lablecunk 1280x860-on kb. 500px (markablokk + tagline +
  kilenc link). Vagyis a fejlec es a lablec egyutt a nezetablak 68%-a; "az
  egesz lap egy kepernyo" ennel a lablecnel egyszeruen nem megoldhato, a
  javaslat szerinti kepletbol pedig 280px-es gorgetes lett volna.

  Amit ELERHETO es amit Ruben szovege ker: az ELSO KEPERNYON csak a hero
  legyen, a lablec alatta. Ezert a main kap 100svh-t, es a hero tolti ki -
  a lablec igy biztosan a hajtas ala kerul, BARMILYEN magas is. Se fejlec-,
  se lablec-merettel nem szamolunk, tehat elcsuszni sincs min. A fejlec
  magassaganyi (~78px) tulnyulas ara ennek: a lap annyival gorog a lablec
  elott, ami nem latszik.

  Az ATLATSZOSAG sem kozmetika: a .hero alapertelmezesben tomor panel
  (surface-elevated + keret). Egy teljes kepernyot kitolto tomor panel
  eltakarna a plusz-racsot, ami elesben be van kapcsolva.

  MIERT ":only-child". A .landing-home a Razor lapon ul, az pedig MINDEN
  site kezdolapjat kiszolgalja - a borbely es a szepsegszalon arculati
  csomage is, amik tovabbra is nyolc szekciosak. Egy nyolc szekcios oldal
  elso blokkjat nem szabad kepernyo-magasra huzni. A feltetel ezert pont azt
  mondja ki, ami a szandek: AKKOR egy kepernyo, ha a kezdolap nem all masbol,
  mint a heroja. Ha a tartalom kesobb bovul, a lap helyesen visszaall normal
  gorgetos oldalla - ez nem nema elromlas, hanem a szabaly ertelme.
*/
    body:has(> main > .landing-home > .hero:only-child) > main {
        /* Ruben #79: telefonon, ful-savval a hero alja (a beta-sor) ne a sav es a "+" ala keruljon. */
        min-block-size: calc(100svh - var(--tab-bar-clearance, 0px));
    }

    body:has(> main > .landing-home > .hero:only-child) > main,
    .landing-home:has(> .hero:only-child) {
        display: flex;
        flex-direction: column;
    }

    .landing-home:has(> .hero:only-child),
    .landing-home > .hero:only-child {
        flex: 1 1 auto;
    }

    .landing-home > .hero:only-child {
        background: none;
        border: 0;
        border-radius: 0;
        overflow: visible;
    }

    .landing-home > .hero:only-child > .hero-body {
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 0;
        padding: var(--space-16) var(--space-6);
    }

    /*
      A KOZOK SZANDEKOSAN NAGYOK (Ruben, 2026-09-22: "kozepen jo, csak ne
      minden oda surusodjon"): kozepre zart szoveg konnyen osszetorlodik,
      ezert a gap helyett elemenkenti, nagyobb tavolsag all.
    */
    .landing-home > .hero:only-child > .hero-body > p:first-child {
        letter-spacing: 0.2em;
        line-height: 1.6;
    }

    .landing-home > .hero:only-child > .hero-body > h1 {
        font-family: var(--font-family-display);
        font-size: clamp(2rem, 1.2rem + 3.4vw, 3.4rem);
        line-height: 1.24;
        letter-spacing: -0.02em;
        max-inline-size: 24ch;
        margin-block-start: var(--space-8);
    }

    .landing-home > .hero:only-child > .hero-body > h1 + p {
        font-size: 1.1875rem;
        line-height: 1.75;
        max-inline-size: 54ch;
        margin-block-start: var(--space-8);
    }

    .landing-home > .hero:only-child > .hero-body > p:has(> .button) {
        justify-content: center;
        margin-block-start: var(--space-12);
    }

    /* A beta-sor: a CTA UTANI bekezdes - a markdownban nincs rajta osztaly. */
    .landing-home > .hero:only-child > .hero-body > p:has(> .button) + p {
        border: 1px solid color-mix(in srgb, var(--brand-primary) 40%, transparent);
        border-radius: var(--radius-pill);
        padding: var(--space-2) var(--space-4);
        font-size: var(--font-size-body-small);
        color: var(--text-secondary);
        margin-block-start: var(--space-12);
    }

    .landing-home > .hero:only-child > .hero-body > p:has(> .button) + p strong {
        color: var(--brand-primary);
    }

    @media (max-width: 47.9375rem) {
        /*
          Mobilon a lablec onmagaban tobb kepernyonyi, tehat az "egy kepernyo"
          ugysem ertelmezheto - ott a hero a sajat magassagat veszi fel, szuk
          kozokkel. Ruben ugyanezt kerte (min-height: 0).
        */
        .landing-home > .hero:only-child > .hero-body {
            padding: var(--space-12) var(--space-5);
        }

        .landing-home > .hero:only-child > .hero-body > h1 {
            line-height: 1.28;
            margin-block-start: var(--space-6);
        }

        .landing-home > .hero:only-child > .hero-body > h1 + p {
            margin-block-start: var(--space-6);
        }

        .landing-home > .hero:only-child > .hero-body > p:has(> .button),
        .landing-home > .hero:only-child > .hero-body > p:has(> .button) + p {
            margin-block-start: var(--space-8);
        }
    }

/* ---------- #22 Kedvenceim lap (2026-09-14-ig a Dashboard szekcioja; a dashboard.css sosem volt linkelve) ---------- */
@layer components {
    .favorite-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: var(--space-2);
    }

    /* 9. fazis (asztali): ket oszlop, mint a talalatok es a foglalasok. */
    @media (min-width: 768px) {
        .favorite-list {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            align-items: start;
        }
    }

    .favorite-item {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-2) var(--space-4);
        padding: var(--space-3) var(--space-4);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-md);
        background: var(--surface-elevated);
    }

    .favorite-item.is-unavailable {
        opacity: 0.7;
    }

    .favorite-item-body {
        display: grid;
        gap: 2px;
        min-inline-size: 0;
    }
}

/* ---------- Hibalap (mozgas-modell, 8. fazis) ----------
   Kozepre igazitott kartya: nagy, halk kod a kijelzo-betuvel, cim, magyarazat, kiut.
   Csak szemantikus tokenek (DS-BRAND-002). */
@layer components {
    .error-page {
        display: grid;
        gap: var(--space-4);
        justify-items: center;
        padding-block: var(--space-8);
        text-align: center;
    }

    .error-card {
        display: grid;
        gap: var(--space-3);
        justify-items: center;
        inline-size: 100%;
        max-inline-size: 32rem;
        padding: var(--space-6) var(--space-5);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-lg);
        background: var(--surface-elevated);
    }

    .error-card > * {
        margin: 0;
    }

    .error-code {
        color: var(--brand-primary);
        font-family: var(--font-family-display);
        font-size: clamp(3rem, 2.4rem + 3vw, 4.5rem);
        font-weight: 800;
        line-height: 1;
        letter-spacing: -0.02em;
    }

    .error-card h1 {
        font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
    }

    .error-lead {
        color: var(--text-secondary);
        max-inline-size: 36ch;
    }

    .error-actions {
        justify-content: center;
        margin-block-start: var(--space-2);
    }

    .error-request-id {
        max-inline-size: 32rem;
        color: var(--text-secondary);
        font-size: var(--font-size-body-small);
    }
}