/*
 * components.css — komponensek (v3 — editorial irány).
 *
 * Alapelv: sík felületek. Nincs box-shadow, nincs border-radius, nincs
 * kártyaháttér. Az elválasztást hajszálvonalak és üres hely adják, a
 * hangsúlyt a betűméret — nem a szín.
 */

/* ==========================================================================
   Navigáció
   ==========================================================================
   Tulajdonosi döntés (2026-08-05): a menüsor kikerült. A fejlécben csak a
   balra igazított wordmark és a jobb szélen a nyelvváltó marad — így nincs
   szükség hamburgerre, lenyíló panelre és a hozzájuk tartozó JS-re sem.
*/

.site-nav {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 100;
    height: var(--nav-height);
    display: flex;
    align-items: center;
    background-color: var(--paper);
    border-bottom: var(--hairline) solid var(--rule);
}

/* Wordmark balra, nyelvváltó jobbra. */
.site-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
}

/*
 * Bal csoport: Vissza link + wordmark. A min-width: 0 engedi, hogy keskeny
 * kijelzőn a hosszú szekciónév (pl. „Business Central (AL)") kipontozódjon,
 * ahelyett hogy a nyelvváltót kitolná a képből — a Vissza link sosem zsugorodik.
 */
.site-nav__start {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-width: 0;
}

.site-nav__brand {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-small);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
 * ⚠️ A BÁZIS SZABÁLYNAK a módosítók ELŐTT kell állnia.
 *
 * Korábban a `.site-nav__link` a `--lang` után jött, és mivel azonos a
 * specifikusságuk, a későbbi `border-bottom: 2px solid transparent` felülírta
 * a nyelvváltó alsó keretét — a doboz alja láthatatlan lett.
 */
.site-nav__link {
    font-size: var(--fs-small);
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color var(--transition), color var(--transition);
}

/*
 * Nyelvváltó: keretes, hogy elváljon a wordmarktól — ez nem navigáció
 * ugyanabban a tartalomban, hanem átkapcsolás egy másik nyelvre.
 */
.site-nav__link--lang {
    padding: 0.35rem 0.6rem;
    border: var(--hairline) solid var(--rule-ink);
    line-height: 1;
}

/*
 * Vissza link (nyíl nélkül — tulajdonosi döntés, 2026-09-16): jobb oldali
 * hajszálvonal választja el a wordmarktól, hogy ne olvadjon bele a címbe.
 */
.site-nav__link--back {
    flex-shrink: 0;
    padding-inline-end: 1.5rem;
    border-inline-end: var(--hairline) solid var(--rule);
    line-height: 1;
}

.site-nav__link--back:hover,
.site-nav__link--back:focus-visible {
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

.site-nav__link--lang:hover,
.site-nav__link--lang:focus-visible {
    background-color: var(--ink-surface);
    color: var(--ink-surface-text);
}

/* ==========================================================================
   Csempék — editorial rács
   ==========================================================================
   A csempék MEGMARADNAK (eredeti követelmény: középre rendezett csempék),
   de síkban: nincs kártyaháttér, árnyék és kerekítés — a csempét a felső
   hajszálvonal, a sorszám és a nagy verzál cím határolja.
*/

/*
 * A rács kerete: a KÜLSŐ élek (fent, balra) magára a rácsra kerülnek, a
 * BELSŐ elválasztókat pedig a csempék adják (lent, jobbra).
 *
 * Miért nem a csempéken van a bal keret is? Az oszlopszám reszponzív
 * (`auto-fit`), ezért a sorok első elemét nem lehet `:nth-child`-del megfogni
 * — minden csempére tett bal keret dupla vonalat adna a belső határokon.
 * Így viszont a bal szélső oszlop egyetlen, folytonos vonalat kap, akárhány
 * sorba is tördel a rács.
 *
 * A jobb szélen a csempék `border-right`-ja lógna ki a rácsból; ezt a
 * negatív margó + `overflow: hidden` vágja le.
 */
.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: 0;
    border-top: var(--hairline) solid var(--rule);
    border-left: var(--hairline) solid var(--rule);
    overflow: hidden;
    margin-right: calc(var(--hairline) * -1);
}

/*
 * Szélesebb oszlopok: hat csempe a 17rem-es alaprácsban 4 + 2 elrendezést adna,
 * a második sor jobb fele üresen maradna. A 22rem-es minimum széles képernyőn
 * hármas rácsot ad, tehát 3 + 3-at — mobilon ugyanúgy egy oszlopba esik vissza.
 * Ott is jól jön, ahol a csempeszöveg hosszabb egy-két mondatnál.
 */
.tile-grid--wide {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

.tile {
    display: flex;
    flex-direction: column;
    padding: var(--space-block) clamp(1rem, 0.5rem + 1.5vw, 2rem);
    border-bottom: var(--hairline) solid var(--rule);
    border-right: var(--hairline) solid var(--rule);
    position: relative;
    isolation: isolate;
    transition: background-color var(--transition);
}

.tile:hover,
.tile:focus-visible {
    background-color: var(--paper-deep);
}

/*
 * Technológia-jel a csempe tetején (csak ott, ahol a sablon kéri — lásd
 * views/components/tile.php). Nincs keret és nincs háttér: a jel ugyanaz a
 * hajszálvonal-vastagságú rajz, mint a többi ikon, csak nagyobb méretben.
 *
 * A `--ink-muted` szándékos: a csempe hangsúlya a cím marad, a jel csak
 * gyors megkülönböztetés. Hoverre a jel is teljes tintára vált, hogy a
 * csempe egyben reagáljon.
 */
.tile__icon {
    display: block;
    margin-bottom: 1rem;
    color: var(--ink-muted);
    transition: color var(--transition);
}

.tile__icon svg {
    display: block;
    width: 2.5rem;
    height: 2.5rem;
}

/*
 * Bitmap logó (hivatalos termékembléma). A MAGASSÁG a közös mérték, a szélesség
 * a képarányból jön — a C# hatszöge és a Business Central köre így optikailag
 * egyforma súlyú, pedig a képfájlok aránya eltér (227×256 vs. 256×256).
 *
 * A `width: auto` felülírja a HTML width attribútumot; az attribútum így csak
 * a helyfoglaláshoz kell (lásd views/components/tile.php).
 */
.tile__icon--logo img {
    display: block;
    /* Nagyobb, mint a vonalas jel (2.5rem): a képjelek részletesek, 40px-en
       összemosódnak (a 3D szkenner rajza a legérzékenyebb). 4rem mellett a
       256px-es fájl még 4× tartalék retina kijelzőre. */
    height: 4rem;
    width: auto;
}

.tile:hover .tile__icon,
.tile:focus-visible .tile__icon {
    color: var(--ink);
}

.tile--accent .tile__icon {
    color: color-mix(in srgb, var(--ink-surface-text) 72%, transparent);
}

.tile--accent:hover .tile__icon,
.tile--accent:focus-visible .tile__icon {
    color: var(--ink-surface-text);
}

/*
 * A csempecím verzál, és a magyar összetett szavak hosszúak
 * („Változásmenedzsment"). Szótörés helyett — az elválasztójel a verzál
 * csempecímben csúnya és nehezen olvasható — a sor CSAK szóköznél törik; ahol
 * ez kevés, ott a keskenyebb rács kisebb betűmérete old (lásd lentebb).
 */
.tile__title {
    font-size: var(--fs-tile);
    font-stretch: 92%;
    text-transform: uppercase;
    line-height: 1.05;
    margin-bottom: 0.75rem;
    hyphens: manual;
}

/*
 * A hármas rács oszlopai keskenyebbek, mint a főoldali csempéké, a címek pedig
 * itt hosszabbak (egy-egy bővítmény teljes neve). Kisebb betűvel a leghosszabb
 * szó is elfér egy sorban, törés nélkül.
 */
.tile-grid--wide .tile__title {
    font-size: var(--fs-tile-sm);
}

.tile__desc {
    color: var(--ink-muted);
    font-size: 0.9375rem;
    margin-bottom: 1.25rem;
}

.tile__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    margin-bottom: 1.25rem;
}

/*
 * Nem kattintható csempe (views/components/tile.php: nincs `url`). Felsoroláshoz
 * használjuk — például a Business Central bővítményekhez, amelyek mögött nincs
 * aloldal. A rács hajszálvonalai és a ritmus maradnak, csak a visszajelzés tűnik
 * el: hover nélkül semmi nem ígéri, hogy kattintani lehet rajta. A „Tovább" nyíl
 * is elmarad, ezért az utolsó elem alsó margóját is le kell szedni.
 */
.tile--static:hover,
.tile--static:focus-visible {
    background-color: transparent;
}

.tile--static > :last-child {
    margin-bottom: 0;
}

/*
 * A nyíl hoverre kicsúszik — az egyetlen mozgás az oldalon.
 * A `margin-top: auto` a nyílon van (nem a badge-eken), így a csempe aljára
 * kerül akkor is, ha az adott csempéhez nem tartozik badge.
 */
.tile__arrow {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--fs-small);
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

.tile__arrow svg {
    width: 1.25rem;
    height: 1.25rem;
    transition: transform var(--transition);
}

.tile:hover .tile__arrow svg,
.tile:focus-visible .tile__arrow svg {
    transform: translateX(0.35rem);
}

@media (prefers-reduced-motion: reduce) {
    .tile:hover .tile__arrow svg,
    .tile:focus-visible .tile__arrow svg {
        transform: none;
    }
}

/* Kiemelt csempe: megfordított, sötét felület — szín helyett tónussal. */
.tile--accent {
    background-color: var(--ink-surface);
    color: var(--ink-surface-text);
}

.tile--accent .tile__desc {
    color: color-mix(in srgb, var(--ink-surface-text) 72%, transparent);
}

.tile--accent:hover,
.tile--accent:focus-visible {
    background-color: color-mix(in srgb, var(--ink-surface) 88%, var(--paper));
}

.tile--accent .badge {
    border-color: color-mix(in srgb, var(--ink-surface-text) 45%, transparent);
}

/*
 * Egyetlen csempe esetén (jelenleg a C# oldal: egy alkalmazás) a rács egy
 * teljes szélességű sávvá nyúlik — a leírás ilyenkor 150 karakteres sorokban
 * futna. A rács szerkezetéhez nem nyúlunk (a hajszálvonalak maradnak), csak a
 * SZÖVEG hosszát fogjuk vissza. A szabály magától kikapcsol, amint a második
 * csempe felkerül.
 */
.tile:only-child .tile__title,
.tile:only-child .tile__desc {
    max-width: 42ch;
}

/* ==========================================================================
   Badge
   ========================================================================== */

.badge {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border: var(--hairline) solid var(--rule);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1.5;
}

/* ==========================================================================
   Szekciócím
   ========================================================================== */

.section-heading {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: var(--hairline) solid var(--rule);
    margin-bottom: var(--space-block);
}

.section-heading__title {
    font-stretch: 92%;
    text-transform: uppercase;
}

.section-heading__index {
    color: var(--ink-muted);
    flex: 0 0 auto;
}

/*
 * Középre igazított osztófelirat a csempesorok között (pl. „Kész megoldások"
 * a főoldali szolgáltatás-csempék és a NIS2-szekció között) — ugyanaz a
 * tipográfia, mint a .section-heading__title-é, de keret és index nélkül.
 */
.section-divider-label {
    text-align: center;
}

/* ==========================================================================
   Folyamat
   ========================================================================== */

/*
 * Egyetlen vonal van a szekcióban: a címsor alatti (a .section-heading adja).
 * A lépéseknek NINCS saját felső vonaluk — az irányt a nyilak jelölik.
 *
 * Az oszlopszám szándékosan nem `auto-fit`: a nyilak elhelyezéséhez tudni kell,
 * hány oszlop van. Két állapot van — egy oszlop (a nyíl lefelé mutat) és négy
 * oszlop (a nyíl jobbra).
 */
.process {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--space-block) * 1.5);
}

@media (min-width: 62em) {
    .process {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-block);
    }
}

.process__step {
    position: relative;
    padding-block: var(--space-block) 0;
}

/* --- Irányjelző nyilak a lépések között --- */

.process__arrow {
    position: absolute;
    display: block;
    color: var(--rule);
    /* Egy oszlopban a nyíl a lépés alá kerül, és lefelé mutat. */
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 90%) rotate(90deg);
}

.process__arrow svg {
    width: 1.5rem;
    height: 1.5rem;
}

@media (min-width: 62em) {
    /* Négy oszlopban a nyíl a lépések közé kerül, és jobbra mutat. */
    .process__arrow {
        left: auto;
        bottom: auto;
        right: 0;
        top: calc(var(--space-block) + 1rem);
        transform: translateX(80%);
    }
}

.process__number {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem);
    font-stretch: 85%;
    font-weight: 700;
    line-height: 1;
    color: var(--rule);
    margin-bottom: 0.75rem;
}

.process__title {
    text-transform: uppercase;
    font-stretch: 92%;
    font-size: 1.0625rem;
    margin-bottom: 0.5rem;
}

.process__text {
    color: var(--ink-muted);
    font-size: 0.9375rem;
}

/* ==========================================================================
   Záró CTA — megfordított, sötét sáv
   ==========================================================================
   A főoldalról tulajdonosi kérésre kikerült, de a komponens megmarad: a
   szolgáltatás-aloldalak (2. fázis) és a Rólam oldal használni fogják.
*/

.cta-band {
    background-color: var(--ink-surface);
    color: var(--ink-surface-text);
    padding-block: var(--space-section);
    text-align: center;
}

.cta-band__text {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-stretch: 92%;
    font-weight: 700;
    line-height: var(--lh-heading);
    letter-spacing: var(--tracking-display);
    text-transform: uppercase;
    max-width: 30ch;
    margin-inline: auto;
    text-wrap: balance;
}

.cta-band .cta-link {
    margin-top: var(--space-block);
}

/* ==========================================================================
   Alkalmazásoldal (views/pages/app.php)
   ==========================================================================
   Ugyanaz a nyelv, mint a többi komponensé: hajszálvonalak, verzál
   mikro-feliratok, sík felületek. Se keret, se kitöltés, se kerekítés.
*/

/*
 * Az oldal minden szekciója a `container--mid` sávban áll (52rem), hogy a
 * szöveg és a képernyőképek széle egy vonalba essen. A folyó szöveg viszont
 * ennél a szélességnél már 90 karakteres sorokat adna, ezért a bekezdés
 * külön meg van fogva — a felsorolások, az adatlap és a hivatkozáslista
 * szándékosan NINCS, azok a teljes sávot kihasználják.
 *
 * A `main` a láblécet zárja ki, a `:not([class])` pedig azokat a `p`-ket,
 * amelyek nem szövegtörzsek (`.app-mark` az ikonnak, `.badge-row`, `.lead` —
 * ez utóbbinak saját, szűkebb mértéke van a base.css-ben).
 */
.page-app main p:not([class]) {
    max-width: 72ch;
}

/*
 * Az alkalmazás ikonja a cím fölött. Nagyobb, mint a csempén (4rem), mert itt
 * ez az oldal egyetlen képi eleme — de nem hero: a hangsúly a címé marad.
 * A `width: auto` a HTML width attribútumot írja felül (az csak a
 * helyfoglaláshoz kell), így az ikon a képarányát tartja.
 */
.app-mark {
    margin-bottom: 1.25rem;
}

.app-mark img {
    height: 5.5rem;
    width: auto;
}

/* --- Adatlap (spec-list) --- */

/*
 * A sorok hajszálvonallal válnak el, az utolsó után is van vonal: így a blokk
 * zárt egységként ül a szövegben. Keskeny kijelzőn egymás alá kerül a
 * megnevezés és az érték, `min-width: 20em`-től két oszlopba rendeződik.
 */
.spec-list {
    margin-top: var(--space-block);
    border-top: var(--hairline) solid var(--rule);
}

.spec-list__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.15rem 1.5rem;
    padding-block: 0.7rem;
    border-bottom: var(--hairline) solid var(--rule);
}

@media (min-width: 30em) {
    .spec-list__row {
        grid-template-columns: minmax(8rem, 12rem) 1fr;
        align-items: baseline;
        gap: 1.5rem;
    }
}

.spec-list__term {
    color: var(--ink-muted);
}

.spec-list__value {
    margin: 0;
    font-size: 0.9375rem;
}

/* --- Képességlista (feature-list) --- */

/*
 * A térköz szándékosan kisebb a szekciók közöttinél (--space-block): ez hét
 * elem, amelyeknek EGY blokként kell olvasódniuk, nem hét külön szigetként.
 */
.feature-list {
    display: grid;
    gap: 1.5rem;
}

.feature {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.85rem;
    align-items: start;
}

/*
 * A pipa a cím első sorával egy magasságban ül. A `--ink-muted` szándékos:
 * a jel csak a felsorolás ritmusát adja, a hangsúly a címé.
 */
.feature__mark {
    color: var(--ink-muted);
    /* A cím sortávjának feléhez igazítva — így a pipa optikailag középen áll. */
    padding-top: 0.15em;
}

.feature__mark svg {
    width: 1.15rem;
    height: 1.15rem;
}

.feature__title {
    font-size: 1.0625rem;
    font-stretch: 92%;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
}

.feature__text {
    color: var(--ink-muted);
    font-size: 0.9375rem;
}

/* --- Badge-sor (a technológia szekcióban, csempén kívül) --- */

.badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    margin-top: var(--space-block);
}

/* --- Hivatkozáslista (letöltés, dokumentáció) --- */

/*
 * A listának NINCS felső vonala: a szekciócím alatti hajszálvonal már lezárja
 * a blokk tetejét, egy második vonal két üres sávot csinálna egymás alá. A
 * sorokat így kizárólag a hivatkozások ALATTI vonalak választják el.
 *
 * A negatív inline margó a LISTÁN van, a belső vízszintes térköz pedig a
 * sorokon — így a hover-háttér a szövegoszlopnál szélesebb (nem tűnik
 * szorosnak), a sorok SZÖVEGE mégis a bekezdésekkel egy vonalba esik.
 *
 * A 0.75rem kisebb a legszűkebb --gutter értéknél (1.25rem), ezért mobilon
 * sem lóg ki a lista a képernyőről.
 */
.link-list {
    margin-inline: -0.75rem;
}

/* A teljes sor kattintható — ugyanaz a hover-logika, mint a csempéken. */
.link-list__item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0.75rem;
    border-bottom: var(--hairline) solid var(--rule);
    transition: background-color var(--transition);
}

.link-list__item:hover,
.link-list__item:focus-visible {
    background-color: var(--paper-deep);
}

.link-list__icon {
    color: var(--ink-muted);
}

.link-list__icon svg {
    width: 1.4rem;
    height: 1.4rem;
}

.link-list__body {
    display: block;
}

.link-list__label {
    display: block;
    font-weight: 600;
}

.link-list__note {
    display: block;
    color: var(--ink-muted);
    font-size: var(--fs-small);
    margin-top: 0.15rem;
}

.link-list__arrow svg {
    width: 1.25rem;
    height: 1.25rem;
    transition: transform var(--transition);
}

.link-list__item:hover .link-list__arrow svg,
.link-list__item:focus-visible .link-list__arrow svg {
    transform: translateX(0.35rem);
}

@media (prefers-reduced-motion: reduce) {
    .link-list__item:hover .link-list__arrow svg,
    .link-list__item:focus-visible .link-list__arrow svg {
        transform: none;
    }
}

/* --- Képernyőképek --- */

/*
 * Két megjelenítési mód, a képek számától függően (lásd
 * views/components/shot-viewer.php):
 *   .shot-grid     — sík rács (egyetlen kép),
 *   .shot-carousel — nyilakkal léptethető megjelenítő (2 vagy több kép).
 */

.shot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
    gap: var(--space-block);
}

.shot {
    margin: 0;
}

.shot img {
    width: 100%;
    height: auto;
    border: var(--hairline) solid var(--rule);
}

.shot__caption {
    color: var(--ink-muted);
    font-size: var(--fs-small);
    margin-top: 0.6rem;
}

/*
 * Léptethető megjelenítő JS NÉLKÜL (2 vagy több kép).
 *
 * A lapok ugyanabba a rácscellába kerülnek (`grid-area: 1 / 1`), tehát egymáson
 * állnak — mindig az van láthatóan, amelyikhez tartozó rádiógomb be van jelölve.
 * Abszolút pozicionálás és fix `aspect-ratio` helyett azért rács, mert így a
 * doboz magasságát maguk a képek adják, nem egy CSS-be égetett arány.
 *
 * A képek képaránya NEM kell egyezzen. A `start` igazítás a felső élükhöz köti
 * őket: két ablak-képernyőképnél így a címsor fedésbe kerül, és a váltás az
 * ablakon belüli tartalmat cseréli. Az alacsonyabbik kép alatt maradó sáv a lap
 * háttere — nem keret. A rejtett lapok `visibility: hidden`-nel tűnnek el, nem
 * `display: none`-nal: így megtartják a helyüket, a doboz magassága a legmagasabb
 * képé marad, és váltáskor nem ugrik a lap.
 */
.shot-carousel {
    display: grid;
}

.shot-carousel__stage {
    display: grid;
    align-items: start;
}

/*
 * A `visibility` is átmenetet kap, nem csak az átlátszóság. Enélkül a kimenő kép
 * azonnal eltűnne, és az áttűnés alatt üres lenne a doboz. Így viszont a
 * `visible` -> `hidden` váltás a ciklus VÉGÉN történik meg (a visibility ilyen
 * irányban kivárja az átmenetet), a `hidden` -> `visible` pedig azonnal — a két
 * kép tehát fedésben vált, és a rejtett lapok utána kikerülnek a
 * képernyőolvasók fájából is.
 */
.shot-carousel__slide {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), visibility var(--transition);
}

/*
 * A rádiógombok a jelölésben a lapok ELŐTT állnak, mert a CSS csak „utána
 * következő testvér" irányban tud szelektálni. A :nth-of-type a gomb sorszámát
 * köti a lap sorszámához — ezért nem kerülhet más <input> a csoportba.
 */
.shot-carousel__state:nth-of-type(1):checked ~ .shot-carousel__stage .shot-carousel__slide:nth-child(1),
.shot-carousel__state:nth-of-type(2):checked ~ .shot-carousel__stage .shot-carousel__slide:nth-child(2),
.shot-carousel__state:nth-of-type(3):checked ~ .shot-carousel__stage .shot-carousel__slide:nth-child(3),
.shot-carousel__state:nth-of-type(4):checked ~ .shot-carousel__stage .shot-carousel__slide:nth-child(4),
.shot-carousel__state:nth-of-type(5):checked ~ .shot-carousel__stage .shot-carousel__slide:nth-child(5),
.shot-carousel__state:nth-of-type(6):checked ~ .shot-carousel__stage .shot-carousel__slide:nth-child(6) {
    opacity: 1;
    visibility: visible;
}

/* --- Léptető nyilak --- */

/*
 * Képenként egy vezérlősáv, egymáson — mindig csak az aktív képhez tartozó
 * látszik. Így mutathatnak a nyilak mindig a helyes szomszédra, és így írhatja
 * a számláló a helyes sorszámot, JavaScript nélkül.
 */
.shot-carousel__nav {
    display: grid;
    justify-items: center;
    margin-top: 0.85rem;
}

.shot-carousel__controls {
    grid-area: 1 / 1;
    display: none;
    align-items: center;
    gap: 1rem;
}

.shot-carousel__state:nth-of-type(1):checked ~ .shot-carousel__nav .shot-carousel__controls:nth-child(1),
.shot-carousel__state:nth-of-type(2):checked ~ .shot-carousel__nav .shot-carousel__controls:nth-child(2),
.shot-carousel__state:nth-of-type(3):checked ~ .shot-carousel__nav .shot-carousel__controls:nth-child(3),
.shot-carousel__state:nth-of-type(4):checked ~ .shot-carousel__nav .shot-carousel__controls:nth-child(4),
.shot-carousel__state:nth-of-type(5):checked ~ .shot-carousel__nav .shot-carousel__controls:nth-child(5),
.shot-carousel__state:nth-of-type(6):checked ~ .shot-carousel__nav .shot-carousel__controls:nth-child(6) {
    display: flex;
}

.shot-carousel__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border: var(--hairline) solid var(--rule-ink);
    color: inherit;
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition);
}

.shot-carousel__arrow svg {
    width: 1.1rem;
    height: 1.1rem;
}

.shot-carousel__arrow:hover {
    background-color: var(--ink-surface);
    color: var(--ink-surface-text);
}

.shot-carousel__position {
    font-size: var(--fs-small);
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    font-variant-numeric: tabular-nums;
}

/*
 * A rádiógomb csak vizuálisan rejtett, tehát fókuszálható marad: tabbal a
 * csoportra állva a nyílbillentyűk váltanak képet. A fókuszgyűrűt ezért a
 * látható vezérlősávra kell kirajzolni — a fókuszált gomb egyben a bejelölt is,
 * így mindig a látható sáv kapja meg.
 */
.shot-carousel__state:focus-visible ~ .shot-carousel__nav .shot-carousel__controls {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
}

/*
 * Mozgáscsökkentett mód: marad a léptetés, csak az áttűnés tűnik el — a váltás
 * ilyenkor azonnali. A base.css globális szabálya a `transition`-t úgyis
 * elhanyagolható hosszúra rövidíti; ez a blokk teszi a szándékot egyértelművé.
 */
@media (prefers-reduced-motion: reduce) {
    .shot-carousel__slide {
        transition: none;
    }
}

/* --- Fényképgaléria (`variant: photo`) --- */

/*
 * A képernyőképek mind fekvők, ezért ott elég a képek természetes magassága.
 * A FÉNYKÉPEKNÉL viszont álló és fekvő felvételek keverednek: egy 3:4-es álló
 * fotó a sáv teljes szélességén másfélszer olyan magas lenne, mint egy 4:3-as
 * fekvő, és a fekvő lapok alatt akkora üres sáv maradna, hogy a galéria
 * szétesne.
 *
 * A megoldás nem vágás és nem is fix képarányú doboz (az álló fotó köré
 * levegőt keretező hajszálvonalat rajzolna), hanem KÖZÖS MAGASSÁG: minden kép
 * pontosan ugyanolyan magas, a szélességét a saját képaránya adja, és a sávban
 * középre kerül. Így a doboz magassága lapváltáskor meg sem rezzen.
 *
 * A magasság felső korlátja a sáv szélességéből jön, hogy a LEGSZÉLESEBB
 * (4:3-as fekvő) kép se lógjon ki: szélesség = 4/3 × magasság, tehát a
 * magasság legfeljebb a rendelkezésre álló szélesség 3/4-e. A 34rem ezen felüli
 * plafon — enélkül nagy képernyőn a galéria kitolná a hajtást.
 */
.shot-carousel--photo .shot img,
.shot-grid--photo .shot img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: min(34rem, calc(0.75 * (min(var(--container-mid), 100vw) - 2 * var(--gutter))));
    margin-inline: auto;
}

/* A képaláírás a képhez, nem a sávhoz igazodik — a kép viszont középen áll. */
.shot-carousel--photo .shot__caption,
.shot-grid--photo .shot__caption {
    text-align: center;
}

/* ==========================================================================
   Lábléc
   ========================================================================== */

.site-footer {
    margin-top: auto;
    border-top: var(--hairline) solid var(--rule);
    padding-block: var(--space-block);
    font-size: var(--fs-small);
}

.site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
}

.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.5rem;
}

.site-footer__social {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.site-footer__social svg {
    width: 1.1rem;
    height: 1.1rem;
}

/* ==========================================================================
   Kézikönyv-oldal (docs)
   ==========================================================================
   Egy 30+ fejezetes használati útmutató. A vizuális nyelv ugyanaz, mint a
   többi oldalé — hajszálvonalak, sík felületek, verzál mikro-feliratok —,
   csak sűrűbben: itt a bekezdés, a felsorolás, az ábra és a figyelmeztetés
   váltakozik, és az olvasónak látnia kell, hol ér véget az egyik és hol
   kezdődik a másik.
*/

/* Ugyanaz a mérték, mint az alkalmazásoldalon: a sáv 52rem, a folyó szöveg 72ch. */
.page-docs main p:not([class]) {
    max-width: 72ch;
}

/*
 * A fejezetek egységes függőleges ritmusa. A base.css `p + p` szabálya csak
 * egymást követő bekezdésekre hatna; itt viszont ábra után felsorolás, majd
 * megjegyzés jön — a távolságnak MINDEN blokkpár között azonosnak kell lennie,
 * különben a fejezet szakadozottnak látszik.
 */
.doc-chapter > * + * {
    margin-top: 1.25rem;
}

/*
 * A fejezetcímek horgonyok: a tartalomjegyzékből ide ugrik az olvasó. A fejléc
 * fix pozíciójú, ezért a cím e nélkül alácsúszna.
 */
.doc-chapter .section-heading__title,
.doc-subheading {
    scroll-margin-top: calc(var(--nav-height) + 1rem);
}

/*
 * Alcím a fejezeten belül (h3). A fejezetcímnél kisebb és nem verzál, hogy a
 * két szint ránézésre elkülönüljön; a fölötte lévő extra levegő köti a
 * következő bekezdéshez, nem az előzőhöz.
 */
.doc-subheading {
    font-size: var(--fs-h3);
    font-stretch: 92%;
    line-height: var(--lh-heading);
}

.doc-chapter > .doc-subheading + * {
    margin-top: 0.75rem;
}

.doc-chapter > * + .doc-subheading {
    margin-top: 2.25rem;
}

/* --- Tartalomjegyzék --- */

/*
 * Számozott lista hajszálvonalas sorokban. A sorszámot CSS-számláló adja, mert
 * az `ol[class]` a base.css-ben elveszíti a saját jelölőit — a szemantika
 * (számozott lista) viszont megmarad a HTML-ben.
 */
.doc-toc__list {
    counter-reset: doc-toc;
    border-top: var(--hairline) solid var(--rule);
}

.doc-toc__list li {
    counter-increment: doc-toc;
    border-bottom: var(--hairline) solid var(--rule);
}

.doc-toc__list a {
    display: flex;
    gap: 1rem;
    padding-block: 0.6rem;
    transition: background-color var(--transition);
}

.doc-toc__list a::before {
    content: counter(doc-toc, decimal-leading-zero);
    color: var(--ink-muted);
    font-size: var(--fs-small);
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    /* A számot a szöveg első sorával egy vonalba emeli. */
    line-height: calc(var(--lh-body) * var(--fs-body) / var(--fs-small));
}

.doc-toc__list a:hover,
.doc-toc__list a:focus-visible {
    background-color: var(--paper-deep);
}

/* --- Felsorolások --- */

/*
 * A jelölőket vissza kell tenni: a base.css minden osztályozott listáról
 * leszedi őket (a navigációk és a csempegridek miatt), egy kézikönyvben
 * viszont a felsorolásjel és a sorszám az olvasás támpontja.
 *
 * A `ul.` / `ol.` előtag NEM dísz: a base.css `ul[class]` szabálya erősebb egy
 * önmagában álló osztálynál (0,1,1 vs. 0,1,0), így a jelölő visszakapcsolása
 * hatástalan lenne. Az elemnévvel a két szabály azonos erősségű, és ez a
 * későbbi — a components.css a base.css után töltődik be.
 */
ul.doc-list,
ol.doc-list {
    list-style: revert;
    padding-inline-start: 1.5rem;
    max-width: 72ch;
}

.doc-list li + li {
    margin-top: 0.4rem;
}

/* --- Ábra --- */

/*
 * A képernyőképek a teljes 52rem-es sávot kihasználják — sok közülük széles
 * Business Central-oldal, kisebb méretben olvashatatlan lenne. A hajszálvonalas
 * keret elválasztja a kép világos hátterét a papírtól.
 */
.doc-figure img {
    width: 100%;
    height: auto;
    border: var(--hairline) solid var(--rule);
}

.doc-figure__caption {
    margin-top: 0.5rem;
    color: var(--ink-muted);
    font-size: var(--fs-small);
    line-height: 1.45;
}

/* --- Kiemelt megjegyzés --- */

/*
 * FIGYELEM / TIPP / INFORMÁCIÓ. A típust a FELIRAT mondja meg, nem a szín — a
 * bal oldali vonal vastagsága csak megerősíti (WCAG 1.4.1: a szín nem lehet az
 * egyetlen hordozó).
 */
.doc-note {
    background-color: var(--paper-deep);
    border-left: 3px solid var(--rule);
    padding: 1rem 1.25rem;
}

.doc-note--warning {
    border-left-color: var(--rule-ink);
}

.doc-note__title {
    margin-bottom: 0.35rem;
}

.doc-note__text {
    max-width: 68ch;
}

/* ==========================================================================
   Kapcsolat oldal (views/pages/contact.php)
   ==========================================================================
   Ugyanaz a nyelv, mint a többi oldalé: hajszálvonalak, verzál címkék, sík
   mezők — nincs keret-kerekítés, nincs kártyaháttér (02-design-system.md 6.7).
   Az egyetlen "kitöltött" felület a beküldés gomb, ugyanazzal a sötét
   megfordítással, mint a kiemelt csempéké és a CTA sávé.
*/

.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-section);
}

@media (min-width: 62em) {
    .contact-layout {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
        align-items: start;
    }
}

.contact-layout__form form {
    display: flex;
    flex-direction: column;
    gap: var(--space-block);
}

.field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.field label {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}

.field__hint {
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
    background: transparent;
    border: 0;
    border-bottom: var(--hairline) solid var(--rule);
    border-radius: 0;
    padding-block: 0.5rem;
    width: 100%;
    transition: border-color var(--transition);
}

.field textarea {
    resize: vertical;
    min-height: 8rem;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
    outline: none;
    border-bottom-color: var(--rule-ink);
}

/* Hibaállapot: 1px helyett 2px alsó vonal + a mező alatti szöveg — szín
   helyett vastagsággal jelöl, a palettának nincs külön "hiba" színe. */
.field--invalid input,
.field--invalid select,
.field--invalid textarea {
    border-bottom-width: 2px;
    border-bottom-color: var(--rule-ink);
}

.field__error {
    font-size: var(--fs-small);
    font-weight: 600;
}

.field__counter {
    font-size: var(--fs-small);
    text-align: right;
}

.field--checkbox label {
    align-items: flex-start;
    gap: 0.6rem;
    cursor: pointer;
}

.field--checkbox input {
    margin-top: 0.3em;
    flex-shrink: 0;
}

/* Honeypot: valós látogatónak láthatatlan és fókuszálhatatlan (tabindex="-1"
   a jelölésben), de a DOM-ban jelen van, hogy a botok kitölthessék. */
.field--trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/*
 * Az egyetlen kitöltött gomb az oldalon - ugyanaz a sötét megfordítás, mint
 * a kiemelt csempéké (.tile--accent) és a CTA sávé, nem egy külön "primary"
 * szín. Verzál, mert minden hangsúlyos felirat itt is az.
 */
.button-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    background-color: var(--ink-surface);
    color: var(--ink-surface-text);
    font-family: var(--font-display);
    font-size: var(--fs-small);
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    border: 0;
    padding: 0.9rem 2rem;
    cursor: pointer;
    transition: background-color var(--transition);
}

.button-primary:hover,
.button-primary:focus-visible {
    background-color: color-mix(in srgb, var(--ink-surface) 88%, var(--paper));
}

.button-primary:disabled {
    cursor: progress;
    opacity: 0.7;
}

/* Siker/hiba banner - a .doc-note idiómája (bal szegély + paper-deep), a
   szöveg tartalma hordozza a jelentést, nem a szín. */
.form-banner {
    background-color: var(--paper-deep);
    border-left: 3px solid var(--rule-ink);
    padding: 1rem 1.25rem;
    margin-bottom: var(--space-block);
}

.form-banner:focus-visible {
    outline: none;
}

.form-banner__heading {
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.aside-block + .aside-block {
    margin-top: var(--space-block);
}

.aside-block p.label {
    margin-bottom: 0.5rem;
}

.aside-block__list li {
    position: relative;
    padding-left: 1.1rem;
}

.aside-block__list li + li {
    margin-top: 0.5rem;
}

.aside-block__list li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--ink-muted);
}

/* ==========================================================================
   Jogi szövegoldal (views/pages/legal.php)
   ==========================================================================
   Tartalomjegyzék + szakaszok, ugyanazzal a hajszálvonalas nyelvvel, mint a
   kézikönyv-oldalé. A cél az olvashatóság - itt nincs csempe, nincs kép.
*/

.legal-toc {
    border-top: var(--hairline) solid var(--rule);
    border-bottom: var(--hairline) solid var(--rule);
    padding-block: var(--space-block);
}

.legal-toc p.label {
    margin-bottom: 0.75rem;
}

/*
 * Nincs külön sorszámozás CSS-ből: a fejezetcímek (heading) már maguk is
 * "1. ", "2. " stb. előtaggal érkeznek a tartalomfájlból, ahogy a jogi
 * dokumentum eredetije is számozott volt - egy második, CSS-generált szám
 * duplázná azt.
 */
.legal-toc ol {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.legal-toc a {
    text-decoration: underline;
    text-underline-offset: 0.22em;
    text-decoration-thickness: 1px;
}

.legal-section + .legal-section {
    margin-top: var(--space-section);
    padding-top: var(--space-section);
    border-top: var(--hairline) solid var(--rule);
}

.legal-section h2 {
    font-size: var(--fs-h3);
    margin-bottom: var(--space-block);
}

.legal-section h3 {
    font-size: 1.05em;
    margin-top: var(--space-block);
    margin-bottom: 0.75rem;
}

.legal-section .spec-list {
    margin-block: 1rem;
}

.legal-list {
    display: grid;
    gap: 0.75rem;
    margin-block: 1rem;
}

.legal-list li {
    padding-left: 1.1rem;
    position: relative;
}

.legal-list li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--ink-muted);
}