@charset "UTF-8";

/* ==========================================================================
   RSVIRUS.HU — PUBLIKUS DESIGN SYSTEM
   ==========================================================================

   Kanonikus forrás:  docs/RSVIRUS_ARCULATI_KEZIKONYV.md
   Technikai review:  docs/RSVIRUS_ARCULATI_TECHNIKAI_REVIEW.md

   EGYETLEN TOKENFORRÁS
     Minden szín, betűméret, térköz, lekerekítés és árnyék EBBŐL a fájlból, a
     `:root` blokkból származik. Párhuzamos design token ugyanarra a funkcióra
     nem jöhet létre (kézikönyv §21). Új szín nem kerülhet a rendszerbe: ami itt
     nincs, azt nem használjuk.

   BOOTSTRAP-ELHATÁROLÁS
     A publikus oldal saját Bootstrap-buildet kap (`/assets/css/bootstrap.min.css`,
     v5.3.8); az admin Skodash-készlete külön útvonalon él, és a kettő soha nem
     kerül ugyanarra az oldalra (technikai review §3.3).
     A Bootstrap itt LAYOUT- és UTILITY-alap. A megjelenés nem a Bootstrap
     alapértelmezett színeiből épül: a `--bs-*` custom property-ket lentebb a
     saját tokenekre állítjuk át, Sass-fordítás nélkül.

     A build JS-fele (`/assets/js/bootstrap.bundle.min.js`, azonos verzió) a
     projektben van, de a főoldal NEM tölti be: a fejléc dropdownjai, a
     mobilmenü és a GYIK natív <details> elemekből épülnek, tehát JavaScript
     nélkül is működnek. A bundle akkor kerül majd betöltésre, amikor egy
     komponens (pl. keresőréteg) ténylegesen igényli.

   NÉVTÉR
     Minden saját osztály `rsv-` előtaggal. Így nem ütközhet a Bootstrap
     osztályaival, és a kettő rétege bármikor szétválasztható.

   ========================================================================== */


/* --------------------------------------------------------------------------
   1. WEBFONT — Manrope, saját szerverről
   --------------------------------------------------------------------------
   A CSP `font-src 'self' data:`, tehát külső fontszolgáltató nem működne — és
   nem is cél (technikai review §3.1). A Manrope VÁLTOZÓ (variable) font: egyetlen
   fájl viszi a 200–800 súlytartományt, ezért súlyonként nem kell külön letöltés.
   Két subset kell: `latin` és `latin-ext` (a magyar ő/ű a latin-ext-ben van).
   -------------------------------------------------------------------------- */

@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("/assets/fonts/manrope-latin-ext-var.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("/assets/fonts/manrope-latin-var.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* --------------------------------------------------------------------------
   2. TOKENEK
   -------------------------------------------------------------------------- */

:root {

    /* 2.1 Márkaszínek — kézikönyv §3.1 */
    --rsv-brand-dark: #2A0E2E;        /* Deep Plum    — logó, footer, sötét felület */
    --rsv-brand-primary: #5A1F68;     /* Primary Plum — fő CTA, link, aktív UI */
    --rsv-brand-primary-hover: #43164E;
    --rsv-brand-secondary: #8D45A2;   /* Royal Plum   — kiemelés, illusztráció */
    --rsv-brand-soft: #F1E6F4;        /* Soft Lavender — kártya-/szekcióháttér */
    --rsv-brand-bare: #FAF6FB;        /* Bare Lavender */

    /* 2.2 Olvasási és neutrális színek — kézikönyv §3.2 */
    --rsv-surface-page: #FCFAFC;
    --rsv-surface-card: #FFFFFF;
    --rsv-text-primary: #211823;
    --rsv-text-secondary: #6B5F6D;
    --rsv-border-default: #E5DDE7;

    /* 2.3 Kiegészítő színek — kézikönyv §3.3 */
    --rsv-accent-warm: #E9B18A;       /* CSAK háttér/illusztráció — review §4.1 */
    --rsv-success: #3F725F;
    --rsv-warning: #9A6700;
    --rsv-urgent: #A53045;

    /*
     * 2.4 Jelentéshordozó kontúr és focus
     *
     * A `--rsv-border-default` fehér alapon 1.33 : 1, tehát kizárólag DEKORATÍV
     * elválasztó (review §4.1). Ahol a kontúr jelentést hordoz — űrlapmező
     * határa, focus ring, kiválasztott állapot —, a WCAG 1.4.11 3 : 1-et kér.
     * Ott a márkapaletta sötétebb fokozatait használjuk; új szín nem kerül be.
     */
    --rsv-border-interaktiv: var(--rsv-brand-secondary);   /* 5.99 : 1 fehéren */
    --rsv-focus: var(--rsv-brand-primary);                 /* 11.47 : 1 fehéren */

    /* 2.5 Tipográfia — kézikönyv §4 */
    --rsv-font: "Manrope", system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, sans-serif;

    --rsv-meret-h1: clamp(2.25rem, 1.45rem + 3vw, 3.5rem);      /* 36 → 56 px */
    --rsv-meret-h2: clamp(1.75rem, 1.25rem + 2.1vw, 2.75rem);   /* 28 → 44 px */
    --rsv-meret-h3: clamp(1.25rem, 1.1rem + .55vw, 1.5rem);     /* 20 → 24 px */
    --rsv-meret-h4: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
    --rsv-meret-torzs: clamp(1.0625rem, 1rem + .2vw, 1.125rem); /* 17 → 18 px */
    --rsv-meret-lead: clamp(1.125rem, 1.03rem + .45vw, 1.3125rem);
    --rsv-meret-kicsi: .9375rem;
    --rsv-meret-meta: .8125rem;

    --rsv-sormagassag-cim: 1.15;
    --rsv-sormagassag-torzs: 1.7;

    /* 2.6 Térközskála — kézikönyv §8 */
    --rsv-ter-1: 4px;
    --rsv-ter-2: 8px;
    --rsv-ter-3: 12px;
    --rsv-ter-4: 16px;
    --rsv-ter-5: 24px;
    --rsv-ter-6: 32px;
    --rsv-ter-7: 48px;
    --rsv-ter-8: 64px;
    --rsv-ter-9: 96px;

    /* Nagy szekció-köz: mobilon sem esik 56 px alá, desktopon 96 px. */
    --rsv-szekcio-ter: clamp(56px, 7vw, 96px);

    /* 2.7 Lekerekítés — kézikönyv §9 */
    --rsv-radius-sm: 10px;
    --rsv-radius-md: 16px;
    --rsv-radius-lg: 24px;
    --rsv-radius-pill: 999px;
    --rsv-radius-gomb: 14px;
    --rsv-radius-input: 12px;

    /* 2.8 Árnyékok — kézikönyv §10 (visszafogott depth) */
    --rsv-arnyek-sm: 0 1px 2px rgba(42, 14, 46, .05), 0 1px 3px rgba(42, 14, 46, .04);
    --rsv-arnyek-md: 0 4px 14px rgba(42, 14, 46, .07);
    --rsv-arnyek-lg: 0 14px 36px rgba(42, 14, 46, .10);

    /* 2.9 Konténerszélességek — kézikönyv §7.1 / PROJECT_RULES §16/A */
    --rsv-burok-normal: 1200px;
    --rsv-burok-szeles: 1360px;
    --rsv-burok-olvasas: 820px;
    --rsv-oldalmargo: 20px;

    /* 2.10 Ikon */
    --ikon-meret: 1em;

    /*
     * 2.10/b A lebegő fejléc TELJES magassága (sáv-padding + kártya).
     * A hero ennyivel csúszik a fejléc alá, hogy a kártya a hero gradiensén
     * lebegjen — és a horgonylinkek se ugorjanak a fejléc mögé.
     */
    --rsv-fejlec-magassag: 108px;

    /* ----------------------------------------------------------------------
       2.11 A BOOTSTRAP RÁÜLTETÉSE A SAJÁT TOKENEKRE
       ----------------------------------------------------------------------
       A Bootstrap 5.3 minden alapértékét `--bs-*` custom property-ből olvassa,
       ezért a keretrendszer színvilága Sass-fordítás nélkül átállítható.
       Így a Bootstrap alapértelmezett kékje sehol nem jelenik meg.
       ---------------------------------------------------------------------- */
    --bs-body-font-family: var(--rsv-font);
    --bs-body-font-size: var(--rsv-meret-torzs);
    --bs-body-line-height: var(--rsv-sormagassag-torzs);
    --bs-body-color: var(--rsv-text-primary);
    --bs-body-bg: var(--rsv-surface-page);
    --bs-secondary-color: var(--rsv-text-secondary);
    --bs-emphasis-color: var(--rsv-brand-dark);

    --bs-primary: var(--rsv-brand-primary);
    --bs-primary-rgb: 90, 31, 104;
    --bs-link-color: var(--rsv-brand-primary);
    --bs-link-color-rgb: 90, 31, 104;
    --bs-link-hover-color: var(--rsv-brand-primary-hover);
    --bs-link-hover-color-rgb: 67, 22, 78;

    --bs-border-color: var(--rsv-border-default);
    --bs-border-radius: var(--rsv-radius-md);
    --bs-border-radius-sm: var(--rsv-radius-sm);
    --bs-border-radius-lg: var(--rsv-radius-lg);
    --bs-border-radius-pill: var(--rsv-radius-pill);

    --bs-focus-ring-color: rgba(90, 31, 104, .35);
    --bs-heading-color: var(--rsv-brand-dark);
}

@media (min-width: 768px) {
    :root { --rsv-oldalmargo: 32px; }
}

@media (min-width: 992px) {
    /*
     * NAGYOBB FEJLÉC (2026-08-28-i vizuális review): a kártya 88 -> 104 px,
     * ezért a fejléc TELJES magassága is nő. A token minden oldal heróját
     * vezérli, ezért itt kell átvezetni — enélkül a fejléc rácsúszna a
     * hero tartalmára.
     */
    :root { --rsv-fejlec-magassag: 136px; }
}

@media (min-width: 1200px) {
    :root { --rsv-oldalmargo: 48px; }
}

@media (min-width: 1400px) {
    /* A kártya itt 96 -> 116 px. */
    :root { --rsv-fejlec-magassag: 152px; }
}


/* --------------------------------------------------------------------------
   3. ALAPOK
   -------------------------------------------------------------------------- */

html {
    scroll-behavior: smooth;
    /* A sticky fejléc alá horgonyzott ugrás ne csússzon a fejléc mögé. */
    scroll-padding-top: calc(var(--rsv-fejlec-magassag) + 12px);
}

body {
    font-family: var(--rsv-font);
    font-size: var(--rsv-meret-torzs);
    font-weight: 400;
    line-height: var(--rsv-sormagassag-torzs);
    color: var(--rsv-text-primary);
    background-color: var(--rsv-surface-page);
    -webkit-font-smoothing: antialiased;
    /* Vízszintes scroll SOHA nem keletkezhet (PROJECT_RULES §16/A). */
    overflow-x: hidden;
}

img,
picture,
svg {
    max-width: 100%;
}

/*
 * A <main> saját blokkformázási kontextust kap. Enélkül a hero negatív felső
 * margója KICSORDULNA a <main> elemből (margin collapsing), és nem a herót,
 * hanem az egész fő tartalmat tolná a fejléc alá.
 */
main { display: flow-root; }

img {
    height: auto;
}

/*
 * 3.1 Látható focus MINDEN interaktív elemen — kézikönyv §19
 *
 * SZÁNDÉKOSAN NEM `:where()`-rel: annak nulla a specificitása, így a Bootstrap
 * bármelyik későbbi szabálya felülírhatná, és a focus-gyűrű némán eltűnne.
 */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--rsv-focus);
    outline-offset: 2px;
    border-radius: var(--rsv-radius-sm);
    /* A Bootstrap saját `box-shadow` alapú focus-gyűrűje ne duplázódjon rá. */
    box-shadow: none;
}

/* A böngésző alapértelmezett focus-gyűrűjét csak akkor vesszük el, ha sajátot adunk. */
summary:focus:not(:focus-visible) { outline: none; }

/* 3.2 Ugrás a tartalomra */
.rsv-ugras {
    position: absolute;
    left: var(--rsv-ter-4);
    top: var(--rsv-ter-4);
    z-index: 1200;
    padding: var(--rsv-ter-3) var(--rsv-ter-5);
    background: var(--rsv-brand-primary);
    color: #fff;
    font-weight: 600;
    border-radius: var(--rsv-radius-gomb);
    transform: translateY(-200%);
}

.rsv-ugras:focus {
    transform: translateY(0);
}

/* 3.3 Ikonok */
.ikon {
    width: var(--ikon-meret);
    height: var(--ikon-meret);
    vertical-align: -.125em;
    fill: currentColor;
    flex: none;
}

/* A saját `i-rsv-*` szimbólumok kontúros rajzok: a fill/stroke a sprite-ból jön. */


/* --------------------------------------------------------------------------
   4. TIPOGRÁFIA
   -------------------------------------------------------------------------- */

h1, h2, h3, h4,
.rsv-h1, .rsv-h2, .rsv-h3 {
    font-family: var(--rsv-font);
    color: var(--rsv-brand-dark);
    line-height: var(--rsv-sormagassag-cim);
    letter-spacing: -.015em;
    text-wrap: balance;
    /*
     * A magyar összetett szavak (pl. „kisgyermekeknél") 320 px-en szélesebbek
     * lehetnek, mint a tartalomoszlop. Enélkül a címsor kilógna és levágódna.
     * Csak SZÜKSÉG esetén tör, tehát a normál tördelést nem rontja el.
     */
    overflow-wrap: break-word;
    margin: 0 0 var(--rsv-ter-4);
}

h1, .rsv-h1 { font-size: var(--rsv-meret-h1); font-weight: 800; }
h2, .rsv-h2 { font-size: var(--rsv-meret-h2); font-weight: 700; }
h3, .rsv-h3 { font-size: var(--rsv-meret-h3); font-weight: 700; letter-spacing: -.01em; }
h4          { font-size: var(--rsv-meret-h4); font-weight: 600; letter-spacing: 0; }

p { margin: 0 0 var(--rsv-ter-4); }
p:last-child { margin-bottom: 0; }

a {
    color: var(--rsv-brand-primary);
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
}

a:hover { color: var(--rsv-brand-primary-hover); }

strong, b { font-weight: 700; }

/* Szemöldökcímke a szekciók fölött */
.rsv-szemoldok {
    display: inline-block;
    font-size: var(--rsv-meret-meta);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rsv-brand-secondary);
    margin-bottom: var(--rsv-ter-3);
}

/*
 * Vonallal aláhúzott változat — a „Mi az RSV?" szakasz jóváhagyott
 * referenciája szerint. Dekoratív, ezért `::after`, nem külön elem.
 */
.rsv-szemoldok--vonalas {
    position: relative;
    padding-bottom: var(--rsv-ter-3);
}

.rsv-szemoldok--vonalas::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 2px;
    border-radius: var(--rsv-radius-pill);
    background: var(--rsv-brand-secondary);
    opacity: .45;
}

.rsv-lead {
    font-size: var(--rsv-meret-lead);
    line-height: 1.6;
    color: var(--rsv-text-secondary);
}

.rsv-meta {
    font-size: var(--rsv-meret-meta);
    color: var(--rsv-text-secondary);
}

.rsv-kicsi {
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
}


/* --------------------------------------------------------------------------
   5. LAYOUT
   -------------------------------------------------------------------------- */

.rsv-burok {
    width: 100%;
    max-width: calc(var(--rsv-burok-normal) + 2 * var(--rsv-oldalmargo));
    margin-inline: auto;
    padding-inline: var(--rsv-oldalmargo);
}

.rsv-burok--szeles {
    max-width: calc(var(--rsv-burok-szeles) + 2 * var(--rsv-oldalmargo));
}

.rsv-burok--olvasas {
    max-width: calc(var(--rsv-burok-olvasas) + 2 * var(--rsv-oldalmargo));
}

.rsv-szekcio {
    padding-block: var(--rsv-szekcio-ter);
}

/*
 * A rács- és flexelemek alapértelmezett `min-width: auto` értéke a
 * MIN-CONTENT szélességet jelenti: egyetlen hosszú magyar összetett szó így
 * szétfeszítheti az oszlopot, és a tartalom kilógna a konténerből. Ez a szabály
 * mindenhol felülírja — a tördelést a fenti `overflow-wrap` végzi el.
 */
.rsv-hero__szoveg > *,
.rsv-ketto > *,
.rsv-helyzetracs > *,
.rsv-utak > *,
.rsv-kockazat__racs > *,
.rsv-idovonal > *,
.rsv-lanc > *,
.rsv-tovabb > *,
.rsv-tunetlista > *,
.rsv-lepes > *,
.gyik__lista > *,
.rsv-kviz__panel > *,
.rsv-kviz__elonyok > *,
.rsv-cikkracs > *,
.rsv-tudastar__fejlec > *,
.rsv-koraszulottek__panel > *,
.rsv-megelozes__hero > *,
.rsv-utkartya > *,
.rsv-lanc > *,
.rsv-tunetek__racs > *,
.rsv-tunetkartya__torzs > *,
.rsv-surgos__sor > * {
    min-width: 0;
}

/* Szekcióháttér-változatok. A lila a karakter, nem a tapéta (kézikönyv §3). */
.rsv-szekcio--lap   { background: var(--rsv-surface-page); }
.rsv-szekcio--feher { background: var(--rsv-surface-card); }
.rsv-szekcio--bare  { background: var(--rsv-brand-bare); }
.rsv-szekcio--soft  { background: var(--rsv-brand-soft); }

/* Szekciófej */
.rsv-szekciofej {
    max-width: 760px;
    margin-bottom: clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-7));
}

.rsv-szekciofej--kozep {
    margin-inline: auto;
    text-align: center;
}

.rsv-szekciofej > :last-child { margin-bottom: 0; }

/* Kétoszlopos, editorial elrendezés: szöveg + vizuál */
.rsv-ketto {
    display: grid;
    gap: clamp(var(--rsv-ter-6), 5vw, var(--rsv-ter-8));
    align-items: center;
}

@media (min-width: 992px) {
    .rsv-ketto { grid-template-columns: 1fr 1fr; }
    .rsv-ketto--szoveg-suly { grid-template-columns: 1.05fr .95fr; }

    /* Mobilon MINDIG a szöveg jön előbb, desktopon cserélhető a sorrend. */
    .rsv-ketto--forditott .rsv-ketto__vizual { order: -1; }
}

.rsv-ketto__szoveg > :last-child { margin-bottom: 0; }


/* --------------------------------------------------------------------------
   6. GOMBOK — kézikönyv §11 (három típus, nem több)
   -------------------------------------------------------------------------- */

.rsv-gomb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--rsv-ter-2);
    min-height: 48px;                       /* kényelmes érintési cél */
    padding: var(--rsv-ter-3) var(--rsv-ter-5);
    font-family: inherit;
    font-size: var(--rsv-meret-torzs);
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: var(--rsv-radius-gomb);
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.rsv-gomb--elsodleges {
    background: var(--rsv-brand-primary);
    border-color: var(--rsv-brand-primary);
    color: #fff;
}

.rsv-gomb--elsodleges:hover,
.rsv-gomb--elsodleges:focus {
    background: var(--rsv-brand-primary-hover);
    border-color: var(--rsv-brand-primary-hover);
    color: #fff;
}

.rsv-gomb--masodlagos {
    background: var(--rsv-surface-card);
    border-color: var(--rsv-brand-primary);
    color: var(--rsv-brand-primary);
}

.rsv-gomb--masodlagos:hover,
.rsv-gomb--masodlagos:focus {
    background: var(--rsv-brand-soft);
    color: var(--rsv-brand-primary-hover);
    border-color: var(--rsv-brand-primary-hover);
}

/* Sötét felületen (footer, sürgős sáv) */
.rsv-gomb--vilagos {
    background: var(--rsv-surface-card);
    border-color: var(--rsv-surface-card);
    color: var(--rsv-brand-primary);
}

.rsv-gomb--vilagos:hover,
.rsv-gomb--vilagos:focus {
    background: var(--rsv-brand-soft);
    color: var(--rsv-brand-primary-hover);
}

/*
 * Szöveges link mint harmadlagos CTA.
 * NYILAT NEM TESZÜNK MINDEN LINK VÉGÉRE (vizuális átadó §3.2): a chevron csak
 * ott jelenik meg, ahol tényleg segíti az affordance-t, és akkor is diszkréten.
 */
.rsv-szoveglink {
    display: inline-flex;
    align-items: center;
    gap: var(--rsv-ter-2);
    font-weight: 600;
    color: var(--rsv-brand-primary);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
}

.rsv-szoveglink:hover { color: var(--rsv-brand-primary-hover); }

.rsv-szoveglink .ikon {
    --ikon-meret: .7em;
    transition: transform .18s ease;
}

.rsv-szoveglink:hover .ikon { transform: translateX(2px); }

.rsv-gombsor {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rsv-ter-3) var(--rsv-ter-5);
    margin-top: var(--rsv-ter-6);
}

.rsv-gombsor--kozep { justify-content: center; }


/* --------------------------------------------------------------------------
   7. KÁRTYÁK — kézikönyv §12
   -------------------------------------------------------------------------- */

.rsv-kartya {
    display: flex;
    flex-direction: column;
    gap: var(--rsv-ter-3);
    padding: var(--rsv-ter-5);
    background: var(--rsv-surface-card);
    border: 1px solid var(--rsv-border-default);
    border-radius: var(--rsv-radius-lg);
    box-shadow: var(--rsv-arnyek-sm);
}

/* Kattintható routing-kártya. A teljes kártya egyetlen linkfelület. */
.rsv-utkartya {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--rsv-ter-3);
    padding: clamp(var(--rsv-ter-5), 2.5vw, var(--rsv-ter-6));
    background: var(--rsv-surface-card);
    border: 1px solid var(--rsv-border-default);
    border-radius: var(--rsv-radius-lg);
    text-decoration: none;
    color: inherit;
    box-shadow: var(--rsv-arnyek-sm);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.rsv-utkartya:hover {
    border-color: var(--rsv-border-interaktiv);
    box-shadow: var(--rsv-arnyek-md);
    transform: translateY(-2px);
    color: inherit;
}

.rsv-utkartya__ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--rsv-radius-md);
    background: var(--rsv-brand-soft);
    color: var(--rsv-brand-primary);
}

.rsv-utkartya__ikon .ikon { --ikon-meret: 28px; }

.rsv-utkartya__cim {
    font-size: var(--rsv-meret-h4);
    font-weight: 700;
    color: var(--rsv-brand-dark);
    margin: 0;
}

.rsv-utkartya__leiras {
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
    margin: 0;
}

/*
 * A `.rsv-utkartya` a MEGELŐZÉS-SZAKASZ (9.) routing-kártyája; a belső rácsát
 * és a hover-dinamikáját a 11.6 blokk adja hozzá.
 *
 * Korábban a továbblépés-panelé volt, de az azóta saját komponenst kapott
 * (`.rsv-tovabb`). A főoldal 3. szakaszának élethelyzet-kártyái szintén
 * külön komponensben élnek (11.7): azok jóval kidolgozottabbak — saját
 * illusztrációval, háttérréteggel és mozgással.
 */


/* --------------------------------------------------------------------------
   8. ALERT / ÁLLAPOTDOBOZ — kézikönyv §13
   --------------------------------------------------------------------------
   A szín SOHA nem az egyetlen jelentéshordozó (kézikönyv §19): minden típushoz
   ikon ÉS szöveges címke tartozik.
   -------------------------------------------------------------------------- */

.rsv-alert {
    display: flex;
    gap: var(--rsv-ter-4);
    padding: var(--rsv-ter-5);
    border-radius: var(--rsv-radius-lg);
    border: 1px solid;
    border-left-width: 4px;
}

.rsv-alert__ikon { --ikon-meret: 24px; margin-top: 2px; }
.rsv-alert__cim  { font-size: var(--rsv-meret-h4); font-weight: 700; margin: 0 0 var(--rsv-ter-2); }
.rsv-alert__torzs > :last-child { margin-bottom: 0; }

.rsv-alert--info {
    background: var(--rsv-brand-bare);
    border-color: var(--rsv-brand-secondary);
    color: var(--rsv-text-primary);
}
.rsv-alert--info .rsv-alert__ikon { color: var(--rsv-brand-secondary); }
.rsv-alert--info .rsv-alert__cim  { color: var(--rsv-brand-dark); }

.rsv-alert--figyelem {
    background: color-mix(in srgb, var(--rsv-warning) 8%, #fff);
    border-color: var(--rsv-warning);
}
.rsv-alert--figyelem .rsv-alert__ikon { color: var(--rsv-warning); }

.rsv-alert--surgos {
    background: color-mix(in srgb, var(--rsv-urgent) 7%, #fff);
    border-color: var(--rsv-urgent);
}
.rsv-alert--surgos .rsv-alert__ikon { color: var(--rsv-urgent); }
.rsv-alert--surgos .rsv-alert__cim  { color: var(--rsv-urgent); }


/* --------------------------------------------------------------------------
   9. FEJLÉC ÉS NAVIGÁCIÓ — kézikönyv §16, IA §3, HEADER_HERO_SPEC §1
   --------------------------------------------------------------------------
   LEBEGŐ, PRÉMIUM FEJLÉCKÁRTYA
     A fejléc egy teljes szélességű, átlátszó sáv, amelyben egy fehér, enyhén
     lekerekített kártya lebeg. Görgetéskor a sáv frosted háttérré válik, a
     kártya pedig „beleolvad" — így a fejléc végig nyugodt marad, és nem
     keletkezik kártya-a-kártyán hatás.

   NINCS FEJLÉC-CTA
     A korábbi „Mit tegyek most?" gomb projektgazdai döntés alapján kikerült
     (spec §1). A jobb oldalon a keresési belépő áll.
   -------------------------------------------------------------------------- */

.rsv-fejlec {
    position: sticky;
    top: 0;
    z-index: 1030;
    padding-block: clamp(10px, 1.1vw, 18px);
    transition: box-shadow .28s ease;
}

/*
 * ===========================================================================
 *  A FROSTED RÉTEG KÜLÖN PSZEUDOELEMEN ÜL — EZ NEM KOZMETIKA
 * ===========================================================================
 *  A `backdrop-filter` — a `transform`-hoz és a `filter`-hez hasonlóan —
 *  CONTAINING BLOCKOT hoz létre a `position: fixed` leszármazottainak.
 *
 *  A mobilmenü panelje (9.4) `position: fixed`, és a fejléckártyán BELÜL van
 *  (a `<details class="rsv-mobilmenu">` a `.rsv-fejlec__jobb`-ban ül). Amíg a
 *  szűrő magán a sávon vagy a kártyán állt, a panel
 *  `inset: var(--rsv-fejlec-magassag) 0 0` értéke NEM a nézetablakhoz, hanem a
 *  ~82 px magas kártyához oldódott fel: 390 px-es nézetablaknál a menü
 *  348 × 89 px-es csíkká zsugorodott, és a navigáció ~646 px-e levágódott —
 *  a keresőmezőn kívül semmi nem látszott belőle. Görgetett állapotban
 *  ugyanez történt a sávval, mert akkor az kapta meg a szűrőt.
 *
 *  A szűrő ezért dedikált, `z-index: -1` rétegre került. A HÁTTÉR IS ide
 *  költözött, hogy a festési sorrend változatlan maradjon: előbb a
 *  homályosított háttértartalom, utána a féligáttetsző lap — pontosan úgy,
 *  ahogy a szűrő és a `background` egy elemen viselkedett. A vizuális
 *  eredmény tehát azonos (spec §1 lebegő, frosted kártya), de a szűrt elem
 *  már nem őse a panelnak.
 *
 *  AMIT SOHA NE TEGYÜNK VISSZA: `backdrop-filter`, `filter`, `transform`,
 *  `perspective` vagy `contain: paint` MAGÁRA a `.rsv-fejlec` vagy a
 *  `.rsv-fejlec__kartya` elemre. A 17/C tesztcsoport ezt őrzi.
 * ===========================================================================
 */
.rsv-fejlec::before,
.rsv-fejlec__kartya::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    transition: background-color .28s ease;
}

/* Görgetés közben klasszikus, letisztult sticky sáv lesz belőle. */
.rsv-fejlec--gorgetve {
    box-shadow: 0 1px 0 var(--rsv-border-default);
}

.rsv-fejlec--gorgetve::before {
    background: rgba(252, 250, 252, .88);
    backdrop-filter: saturate(180%) blur(14px);
}

.rsv-fejlec__kartya {
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(var(--rsv-ter-4), 1.6vw, var(--rsv-ter-6));
    min-height: 72px;
    padding: var(--rsv-ter-3) clamp(var(--rsv-ter-4), 1.8vw, var(--rsv-ter-6));
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: var(--rsv-radius-lg);
    box-shadow: 0 2px 6px rgba(42, 14, 46, .04), 0 14px 34px rgba(42, 14, 46, .07);
    transition: box-shadow .28s ease, border-color .28s ease, min-height .28s ease;
}

/* A kártya fehér lapja és homálya — a fenti okból pszeudoelemen. */
.rsv-fejlec__kartya::before {
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(16px);
}

/*
 * DESKTOP FEJLÉCMAGASSÁG.
 *
 * A spec §1 eredetileg 88–96 px-et írt elő, de a 2026-08-28-i élő vizuális
 * review szerint az így kapott kártya „összenyomott toolbar" hatású volt: a
 * hero fölött nem volt elég vizuális súlya. A magasság ezért 104 / 116 px-re
 * nőtt — ez még nem vastag sáv, de már valódi fejléc-jelenlét.
 *
 * A `--rsv-fejlec-magassag` tokent EGYÜTT kell vele mozgatni (2.10/b): abból
 * számol minden oldal heroja, hogy mennyivel csúszik a fejléc alá.
 */
@media (min-width: 992px) {
    .rsv-fejlec__kartya { min-height: 104px; }
}

@media (min-width: 1400px) {
    .rsv-fejlec__kartya { min-height: 116px; }
}

.rsv-fejlec--gorgetve .rsv-fejlec__kartya {
    min-height: 68px;
    border-color: transparent;
    box-shadow: none;
}

.rsv-fejlec--gorgetve .rsv-fejlec__kartya::before {
    background: transparent;
    backdrop-filter: none;
}

/* 9.1 Logó — „a logó ne legyen apró" (spec §1) */
.rsv-logo {
    display: inline-flex;
    align-items: center;
    flex: none;
    line-height: 0;
}

.rsv-logo img {
    width: 168px;
    height: auto;
}

/*
 * A NAGYOBB FEJLÉCKÁRTYÁHOZ ARÁNYOSAN NAGYOBB LOGÓ — DE CSAK AHOL VAN RÁ HELY.
 *
 * A 2026-08-28-i nagyítás első változata minden desktop szélességen egyszerre
 * növelte a logót, a menü betűméretét és a menü belső térközét. A fejléc egy
 * sorba rendezett flex-sáv, amelyben a menüpontok `white-space: nowrap`
 * értékkel állnak: ha a három elem együtt nem fér el, NEM tördel, hanem
 * EGYMÁSRA CSÚSZIK. Pontosan ez történt — 1200 px-en 81, 1920 px-en 63 pixel
 * hiányzott.
 *
 * A méretek ezért lépcsőzetesek: a legszűkebb sávban (1200–1400 px) közel az
 * eredeti értékek maradnak, és csak ott nőnek, ahol a kártya tényleg
 * szélesebb. A kártya MAGASSÁGA mindenhol a nagyobb, 104/116 px-es marad —
 * azt nem a vízszintes hely korlátozza.
 */
@media (min-width: 992px)  { .rsv-logo img { width: 180px; } }
@media (min-width: 1200px) { .rsv-logo img { width: 188px; } }
@media (min-width: 1400px) { .rsv-logo img { width: 208px; } }
/*
 * 1700 px fölött a logó sem nő tovább: a kártya szélessége ott már fix, és a
 * menünek kell a hely.
 */

.rsv-fejlec__jobb {
    display: flex;
    align-items: center;
    gap: var(--rsv-ter-3);
    margin-left: auto;
}

/* 9.2 Desktop menü */
.rsv-menu { display: none; }

.rsv-menu__lista {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/*
 * A DESKTOP MENÜ KAPCSOLÓPONTJA 1200 -> 1320 px.
 *
 * MIÉRT? A hat menüpont `white-space: nowrap` értékkel áll, tehát a sáv NEM
 * tördel: ha nincs elég hely, a menü a logóra és a keresőre csúszik rá.
 * 1200 px-es nézetablaknál a burok még csak 1089 px, a kártya belseje ~1044 px,
 * a három elem igénye viszont ~1064 px — vagyis a menü ott MÁR A NAGYÍTÁS ELŐTT
 * IS 20 px-rel túllógott, csak kevésbé feltűnően.
 *
 * 1320 px-től van valódi tartalék. Alatta a natív, már működő hamburger menü
 * veszi át — az teljes értékű navigáció, nem csonkolt változat.
 */
@media (min-width: 1320px) {
    .rsv-menu {
        display: block;
        flex: 1 1 auto;
        min-width: 0;
    }
}

.rsv-menu__elem { position: relative; }

.rsv-menu__link,
.rsv-menu__kapcsolo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px var(--rsv-ter-2);
    font-size: var(--rsv-meret-kicsi);
    font-weight: 600;
    color: var(--rsv-brand-dark);
    text-decoration: none;
    background: none;
    border: 0;
    border-radius: var(--rsv-radius-sm);
    cursor: pointer;
    white-space: nowrap;
    list-style: none;
}

/*
 * OLVASHATÓBB NAVIGÁCIÓ — LÉPCSŐZETESEN, A RENDELKEZÉSRE ÁLLÓ HELYHEZ MÉRTEN.
 *
 * A hat menüpont `white-space: nowrap` értékkel áll, tehát a menü NEM tördel:
 * ha nincs elég hely, a logóra és a keresőre csúszik rá. A betűméret és a
 * belső térköz ezért csak ott nő, ahol a kártya ténylegesen szélesebb.
 *
 * A FÜGGŐLEGES térköz (12 px) mindenhol megmarad: az a kártya magasságához
 * tartozik, és nem fogyaszt vízszintes helyet.
 *
 * MÉRT IGÉNY a hat menüponttal (a legszűkebb pont az 1200 px-es sáv, mert ott
 * a burok még keskeny, a menü viszont már megjelenik).
 */
/*
 * A BETŰMÉRET a review kérése szerint 15 -> 16 px. A TÉRKÖZ viszont szűkebb
 * marad, mint az első nekifutásban: a kártya belső szélessége 1360 px-nél
 * megáll, tehát a menü szélessége az egyetlen mozgatható tétel. 8 px-es belső
 * térköz mellett marad valódi tartalék; 1600 px-től már 12 px is elfér.
 */
@media (min-width: 1320px) {
    .rsv-menu__link,
    .rsv-menu__kapcsolo {
        padding: 12px var(--rsv-ter-2);
        font-size: 1rem;
    }
}

/*
 * 1600 px FÖLÖTT SINCS TOVÁBBI TÉRKÖZ-NÖVEKMÉNY. A burok 1360 px-nél megáll,
 * tehát a kártya belső szélessége NEM nő tovább — a 12 px-es belső térköz
 * viszont 48 px-rel szélesítené a menüt, és 1920 px-en csak 5 px tartalék
 * maradna. Mérés szerint 8 px mellett ~57 px.
 */

/*
 * 1700 px FÖLÖTT SINCS TOVÁBBI TÉRKÖZ-NÖVEKMÉNY. A burok 1360 px-nél megáll,
 * tehát a kártya belső szélessége NEM nő tovább — a menü viszont igen, ha
 * engednénk. Itt tehát csak a logó kap még egy kicsit.
 */

.rsv-menu__kapcsolo::-webkit-details-marker { display: none; }
.rsv-menu__kapcsolo::marker { content: ""; }

.rsv-menu__link:hover,
.rsv-menu__kapcsolo:hover {
    background: var(--rsv-brand-soft);
    color: var(--rsv-brand-primary);
}

/*
 * VALÓDI SVG CHEVRON — nem `v` betű, nem nyílkarakter (vizuális átadó §3.1).
 * Diszkrét, ~12 px vizuális méret; a spec §6 tiltja az „AI-hatású", esetleges
 * kis nyilacskákat, ezért csak a valóban lenyíló csoportok kapják meg.
 */
.rsv-menu__chevron {
    --ikon-meret: 12px;
    color: var(--rsv-text-secondary);
    opacity: .75;
    transition: transform .18s ease;
}

.rsv-menu__elem[open] > .rsv-menu__kapcsolo {
    background: var(--rsv-brand-soft);
    color: var(--rsv-brand-primary);
}

.rsv-menu__elem[open] > .rsv-menu__kapcsolo .rsv-menu__chevron {
    transform: rotate(180deg);
    color: var(--rsv-brand-primary);
    opacity: 1;
}

.rsv-menu__panel {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 320px;
    padding: var(--rsv-ter-3);
    background: var(--rsv-surface-card);
    border: 1px solid var(--rsv-border-default);
    border-radius: var(--rsv-radius-lg);
    box-shadow: var(--rsv-arnyek-lg);
    list-style: none;
    margin: 0;
    z-index: 20;
}

.rsv-menu__panel a {
    display: block;
    padding: var(--rsv-ter-3) var(--rsv-ter-4);
    font-size: var(--rsv-meret-kicsi);
    font-weight: 500;
    color: var(--rsv-text-primary);
    text-decoration: none;
    border-radius: var(--rsv-radius-sm);
    white-space: nowrap;
}

.rsv-menu__panel a:hover {
    background: var(--rsv-brand-soft);
    color: var(--rsv-brand-primary);
}

/* 9.3 Kereső — valódi mező, nem link-álca (spec §1) */
.rsv-kereso {
    position: relative;
    display: flex;
    align-items: center;
    flex: none;
}

.rsv-kereso__ikon {
    position: absolute;
    left: 14px;
    --ikon-meret: 16px;
    color: var(--rsv-text-secondary);
    pointer-events: none;
}

.rsv-kereso__mezo {
    width: 100%;
    min-height: 46px;
    padding: 10px var(--rsv-ter-4) 10px 40px;
    font-family: inherit;
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-primary);
    background: var(--rsv-surface-card);
    border: 1px solid var(--rsv-border-default);
    border-radius: var(--rsv-radius-pill);
    transition: border-color .18s ease, box-shadow .18s ease, width .22s ease;
    -webkit-appearance: none;
    appearance: none;
}

/*
 * A NAGYOBB FEJLÉCKÁRTYÁBAN A KERESŐ SEM MARADHAT MINIATŰR (review) — de a
 * nagyobb betűméret szélesebb mezőt is jelent, ezért csak 1400 px-től kapja
 * meg. 1200–1400 px között a sáv amúgy is a legszűkebb.
 */
@media (min-width: 1400px) {
    .rsv-kereso__mezo { min-height: 52px; font-size: 1rem; }
    .rsv-kereso__ikon { --ikon-meret: 18px; }
}

.rsv-kereso__mezo::placeholder { color: var(--rsv-text-secondary); }

.rsv-kereso__mezo:hover { border-color: var(--rsv-border-interaktiv); }

.rsv-kereso__mezo:focus {
    border-color: var(--rsv-brand-primary);
    box-shadow: 0 0 0 3px rgba(90, 31, 104, .14);
}

.rsv-kereso__mezo:focus-visible { box-shadow: 0 0 0 3px rgba(90, 31, 104, .14); }

/* A `type="search"` natív törlő gombja böngészőnként eltér — elrejtjük. */
.rsv-kereso__mezo::-webkit-search-decoration,
.rsv-kereso__mezo::-webkit-search-cancel-button { -webkit-appearance: none; }

/*
 * A fejléc keresőmezője csak ott jelenik meg, ahol a desktop navigáció mellett
 * elfér anélkül, hogy a menü mikroszkopikussá zsugorodna (spec §6).
 * Kisebb kijelzőn a mező a mobilmenü tetején él (`.rsv-kereso--mobil`).
 */
.rsv-kereso--fejlec { display: none; }

@media (min-width: 1200px) {
    .rsv-kereso--fejlec { display: flex; width: 148px; }
}

@media (min-width: 1400px) {
    .rsv-kereso--fejlec { width: 190px; }
}

@media (min-width: 1600px) {
    .rsv-kereso--fejlec { width: 224px; }
}

.rsv-kereso--mobil { width: 100%; }
.rsv-kereso--mobil .rsv-kereso__mezo { min-height: 52px; }

@media (min-width: 1200px) {
    .rsv-kereso--mobil { display: none; }
}

/* 9.4 Mobil menü — natív <details>, JavaScript nélkül is működik */
.rsv-mobilmenu { flex: none; }

/* A hamburger addig marad, amíg a desktop menü be nem fér (lásd 9.2). */
@media (min-width: 1320px) {
    .rsv-mobilmenu { display: none; }
}

.rsv-mobilmenu__kapcsolo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid var(--rsv-border-default);
    border-radius: var(--rsv-radius-sm);
    background: var(--rsv-surface-card);
    color: var(--rsv-brand-dark);
    cursor: pointer;
    list-style: none;
}

.rsv-mobilmenu__kapcsolo::-webkit-details-marker { display: none; }
.rsv-mobilmenu__kapcsolo::marker { content: ""; }
.rsv-mobilmenu__kapcsolo .ikon { --ikon-meret: 22px; }
.rsv-mobilmenu__kapcsolo .rsv-mobilmenu__bezar { display: none; }
.rsv-mobilmenu[open] .rsv-mobilmenu__kapcsolo .rsv-mobilmenu__nyit { display: none; }
.rsv-mobilmenu[open] .rsv-mobilmenu__kapcsolo .rsv-mobilmenu__bezar { display: inline-block; }

.rsv-mobilmenu__panel {
    position: fixed;
    inset: var(--rsv-fejlec-magassag) 0 0;
    overflow-y: auto;
    padding: var(--rsv-ter-5) var(--rsv-oldalmargo) var(--rsv-ter-8);
    background: var(--rsv-surface-page);
    border-top: 1px solid var(--rsv-border-default);
    z-index: 1020;
}

/*
 * A panel felső blokkja. 2026-09-09 óta CSAK a keresőt tartalmazza — a
 * „Mit tegyek most?" gomb projektgazdai döntéssel lekerült (lásd fejlec.php).
 * Az oszlopirány és a térköz azért marad, hogy a blokk egy esetleges második
 * elemmel is helyesen viselkedjen.
 */
.rsv-mobilmenu__fej {
    display: flex;
    flex-direction: column;
    gap: var(--rsv-ter-3);
    margin-bottom: var(--rsv-ter-5);
}

.rsv-mobilcsoport {
    border-bottom: 1px solid var(--rsv-border-default);
}

.rsv-mobilcsoport__fej {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rsv-ter-3);
    padding: var(--rsv-ter-4) 0;
    font-size: var(--rsv-meret-torzs);
    font-weight: 700;
    color: var(--rsv-brand-dark);
    cursor: pointer;
    list-style: none;
    min-height: 52px;
}

.rsv-mobilcsoport__fej::-webkit-details-marker { display: none; }
.rsv-mobilcsoport__fej::marker { content: ""; }
.rsv-mobilcsoport__fej .ikon { --ikon-meret: 14px; color: var(--rsv-text-secondary); transition: transform .18s ease; }
.rsv-mobilcsoport[open] .rsv-mobilcsoport__fej .ikon { transform: rotate(180deg); }

.rsv-mobilcsoport__lista {
    list-style: none;
    margin: 0;
    padding: 0 0 var(--rsv-ter-4);
}

.rsv-mobilcsoport__lista a,
.rsv-mobillink {
    display: block;
    padding: var(--rsv-ter-3) 0;
    min-height: 48px;
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-primary);
    text-decoration: none;
}

.rsv-mobillink {
    font-size: var(--rsv-meret-torzs);
    font-weight: 700;
    color: var(--rsv-brand-dark);
    padding-block: var(--rsv-ter-4);
    border-bottom: 1px solid var(--rsv-border-default);
}

.rsv-mobilcsoport__lista a:hover,
.rsv-mobillink:hover { color: var(--rsv-brand-primary); }


/* --------------------------------------------------------------------------
   10. HERO — HEADER_HERO_SPEC §2–§5
   --------------------------------------------------------------------------
   RÉTEGELT KOMPOZÍCIÓ
     A hero nem egyetlen képből áll, hanem négy külön rétegből. Mindegyik saját
     `.rsv-reteg` wrapperben él, és a `--rsv-parallax-y` custom property-n
     keresztül mozgatható. A scroll-vezérelt finom parallaxot ezért a HTML
     újraírása nélkül lehet rátenni (a `publikus.js` csak ezt a változót írja).

   A FEJLÉC BELELÓG A HEROBA
     A fejléc sticky és átlátszó, ezért a hero felső padding-je tartalmazza a
     fejléc magasságát — így a szöveg soha nem csúszik a fejléckártya alá.
   -------------------------------------------------------------------------- */

.rsv-hero {
    position: relative;
    isolation: isolate;
    /* A háttér teljes viewport-szélességben kifut (vizuális átadó §4). */
    background:
        radial-gradient(120% 90% at 78% 30%, rgba(141, 69, 162, .12) 0%, rgba(141, 69, 162, 0) 60%),
        linear-gradient(168deg, var(--rsv-brand-bare) 0%, var(--rsv-brand-soft) 100%);
    overflow: hidden;
    /* A sticky fejléc a hero fölött lebeg, ezért a helyét itt hagyjuk ki. */
    margin-top: calc(-1 * var(--rsv-fejlec-magassag, 96px));
    padding-top: var(--rsv-fejlec-magassag, 96px);
}

/* 10.1 Képi kompozíció — mind a négy réteg egyetlen wrapperben */

/*
 * MOBIL (alapállapot): a kompozíció a FOLYAMBAN marad, és a szöveg alá kerül.
 * A hero flexbox-oszlop, az `order` pedig biztosítja, hogy a szöveg és a CTA
 * mindig elöl legyen (vizuális átadó §4).
 */
.rsv-hero {
    display: flex;
    flex-direction: column;
}

/*
 * VÉGLEGES MOBIL SORREND (spec 3. pont):
 *   eyebrow -> H1 -> intro -> CTA -> képi kompozíció -> insight-doboz.
 * Az insight tehát NEM szakítja ketté a szöveg és a fő vizuál kapcsolatát.
 */
.rsv-hero__burok         { order: 1; }
.rsv-hero__kompozicio    { order: 2; }
.rsv-hero__insight-burok { order: 3; }

.rsv-hero__kompozicio {
    position: relative;
    /* Mobilon a vizuál KAPJON teret: nem kis kép a hero végén. */
    height: clamp(400px, 108vw, 560px);
    margin-top: clamp(var(--rsv-ter-5), 5vw, var(--rsv-ter-7));
    pointer-events: none;
    /*
     * A sáv alja LÁGYAN old fel. Enélkül a torzó egy éles vízszintes vonalnál
     * végződne — az insight-doboz csak a közepét takarná el. Így a lezárás
     * tudatos, és a doboz ráúszása is természetes marad.
     */
    -webkit-mask-image: linear-gradient(to bottom, #000 74%, transparent 99%);
    mask-image: linear-gradient(to bottom, #000 74%, transparent 99%);
    overflow: hidden;
}

/*
 * Közös rétegviselkedés.
 *
 * A `transform` HÁROM változóból áll:
 *   --rsv-reteg-x      a réteg statikus vízszintes finomhangolása,
 *   --rsv-parallax-x   a scroll vízszintes komponense,
 *   --rsv-parallax-y   a scroll függőleges komponense.
 *
 * Így a statikus elhelyezés és a mozgás nem írja felül egymást, a folyamatos
 * (keyframes) animációk pedig a rétegek KÉPÉN futnak — azok sem ütköznek ezzel.
 */
.rsv-reteg {
    position: absolute;
    line-height: 0;
    transform: translate3d(
        calc(var(--rsv-reteg-x, 0px) + var(--rsv-parallax-x, 0px)),
        var(--rsv-parallax-y, 0px),
        0
    );
    will-change: transform;
}

.rsv-reteg img {
    display: block;
    width: 100%;
    height: auto;
}

/*
 * A két hátsó réteg forrásképe TÉGLALAP alakú, és a széléig tart benne halvány
 * tartalom. Maszk nélkül ezért a réteg befoglaló doboza látható élként jelenne
 * meg a hero közepén. A lágy radiális maszk feloldja a peremet, így a réteg
 * észrevétlenül olvad a háttérbe.
 */
/*
 * A két hátsó réteg forrásképe TÉGLALAP alakú, és a széléig tart benne halvány
 * tartalom. Két dolog kell ahhoz, hogy a doboza ne legyen látható élként:
 *
 *   1) a réteg TÚLLÓG a hero peremén, tehát a saját széle a látható zónán
 *      kívülre esik (ezért méreteződik a glow magasság alapján);
 *   2) lágy radiális maszk oldja a belső átmenetet a világos háttér felé.
 */
.rsv-reteg--glow {
    inset: -12% -8% auto auto;
    height: 126%;
    width: auto;
    opacity: .9;
    z-index: 0;
}

.rsv-reteg--glow img {
    width: auto;
    height: 100%;
    max-width: none;
    -webkit-mask-image: radial-gradient(78% 96% at 76% 44%, #000 30%, transparent 78%);
    mask-image: radial-gradient(78% 96% at 76% 44%, #000 30%, transparent 78%);
}

.rsv-reteg--reszecskek {
    inset: auto -10% -24% auto;
    height: 104%;
    width: auto;
    opacity: .85;
    z-index: 1;
}

.rsv-reteg--reszecskek img {
    width: auto;
    height: 100%;
    max-width: none;
    -webkit-mask-image: radial-gradient(74% 92% at 74% 60%, #000 28%, transparent 76%);
    mask-image: radial-gradient(74% 92% at 74% 60%, #000 28%, transparent 76%);
}

/*
 * A TORZÓ magasság alapján méreteződik, és alul-jobbra KIFUT a hero pereme
 * alá. Így a vágás mindig a képernyőn kívül esik, nem a kompozíció közepén.
 * A bal oldali lágy maszk elrejti azt a függőleges élt, ahol a forráskép
 * pereme elvágja a kart.
 */
.rsv-reteg--torzo {
    right: -14%;
    bottom: -16%;
    height: 132%;
    width: auto;
    z-index: 2;
}

/*
 * A forráskép pereme MINDKÉT oldalon elvágja a kart. A kétirányú lágy maszk
 * ezt tudatos, lágy lezárássá teszi — nem esetleges, éles vágássá (spec 2. pont).
 */
.rsv-reteg--torzo img {
    width: auto;
    height: 100%;
    max-width: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 11%, #000 90%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 11%, #000 90%, transparent 100%);
}

.rsv-reteg--klaszter {
    left: -6%;
    bottom: 4%;
    width: 46%;
    z-index: 3;
}

@media (min-width: 992px) {
    /*
     * DESKTOP: a kompozíció kilép a folyamból, és a TELJES szekciót kitölti —
     * a konténer 1360 px-es korlátjától függetlenül a képernyő jobb széléig fut.
     * A hero MARAD flex-oszlop: így a szövegblokk és az insight-doboz a
     * rendelkezésre álló magasságban arányosan oszlik el.
     */
    .rsv-hero__kompozicio {
        position: absolute;
        inset: 0;
        height: auto;
        margin-top: 0;
        z-index: 0;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .rsv-reteg--glow      { inset: -14% -4% auto auto; height: 122%; }
    .rsv-reteg--reszecskek { inset: auto -2% -20% auto; height: 100%; }

    .rsv-reteg--torzo {
        right: -12%;
        bottom: -8%;
        height: 82%;
    }

    /*
     * A vírusklaszter a torzó ELŐTT lebeg, önálló rétegként. A jobb oldalhoz
     * van kötve, hogy a szövegoszlopot ne érje el — és lejjebb ül, hogy ne
     * üljön rá a tüdőre (spec 2. pont).
     */
    .rsv-reteg--klaszter {
        left: auto;
        right: 30%;
        bottom: 10%;
        width: min(21vw, 280px);
    }
}

@media (min-width: 1200px) {
    /* Kissé kisebb és balrább: a jobb váll vágása tudatos, nem esetleges. */
    .rsv-reteg--torzo   { right: -1%; height: 88%; }
    .rsv-reteg--klaszter { right: 32%; bottom: 9%; width: min(20vw, 290px); }
}

@media (min-width: 1400px) {
    .rsv-reteg--torzo   { right: 1%; height: 90%; }
    .rsv-reteg--klaszter { right: 33%; bottom: 9%; width: min(19vw, 300px); }
}

@media (min-width: 1700px) {
    /*
     * Nagy felbontáson a kompozíció NEM zsugorodik középsávvá: a torzó a hero
     * magasságához igazodik, és továbbra is a jobb szélig fut ki
     * (spec §5 — „nagy desktopon se keskenyedjen mini középsávvá").
     */
    .rsv-reteg--torzo   { right: 3%; height: 92%; }
    .rsv-reteg--klaszter { right: 34%; bottom: 8%; width: min(18vw, 330px); }
}

/* 10.2 Tartalmi zóna */
.rsv-hero__burok {
    position: relative;
    z-index: 2;
    padding-block: clamp(var(--rsv-ter-6), 5vw, var(--rsv-ter-8));
}

@media (min-width: 992px) {
    .rsv-hero {
        /* Erős nyitóképernyős hatás — a fejléc magasságával együtt (spec §5). */
        min-height: clamp(640px, 88vh, 920px);
    }

    .rsv-hero__burok {
        padding-top: clamp(var(--rsv-ter-6), 3vw, var(--rsv-ter-8));
        padding-bottom: var(--rsv-ter-5);
    }
}

/* 10.3 Szövegblokk */
.rsv-hero__szoveg {
    position: relative;
    z-index: 2;
}

/*
 * A szövegoszlop SAJÁT MÉRETKONTÉNER. Így a H1 a rendelkezésre álló oszlophoz
 * méreteződik, nem a viewporthoz — enélkül kis desktopon a rövid, kétsoros
 * címsor négy sorba törne.
 */
.rsv-hero__szoveg { container-type: inline-size; }

@media (min-width: 992px) {
    /* Kis desktopon a szövegoszlop szélesebb, hogy a H1 két sor maradjon. */
    .rsv-hero__szoveg { max-width: 54%; }
}

@media (min-width: 1200px) {
    /* Bal szövegoszlop kb. 46% — a jobb 54% a képi kompozícióé (spec §5). */
    .rsv-hero__szoveg { max-width: 46%; }
}

@media (min-width: 1600px) {
    .rsv-hero__szoveg { max-width: 44%; }
}

.rsv-hero .rsv-szemoldok {
    font-size: .8125rem;
    letter-spacing: .14em;
    margin-bottom: var(--rsv-ter-4);
}

/*
 * A H1 a hero legerősebb eleme. A kézikönyv §4.3 desktop sávja 52–64 px; a
 * hero — mint nyitó vizuális egység — a sáv tetejét használja.
 */
.rsv-hero__cim {
    /* Tartalék azoknak a böngészőknek, amelyek nem ismerik a `cqi` egységet. */
    font-size: clamp(2.25rem, 1.5rem + 3.6vw, 4rem);
    /* A hosszabb sor („Tudd, mire figyelj!") pontosan kiférjen az oszlopba. */
    font-size: clamp(2.25rem, 10.4cqi, 4rem);
    line-height: 1.06;
    letter-spacing: -.025em;
    margin-bottom: var(--rsv-ter-5);
}

/* A két sor pontosan ott törik, ahol a projektgazdai döntés kéri. */
.rsv-hero__cim-sor { display: block; }

.rsv-hero__lead {
    max-width: 44ch;
    font-size: var(--rsv-meret-lead);
    color: var(--rsv-text-secondary);
    line-height: 1.65;
}

.rsv-hero__gombsor { margin-top: clamp(var(--rsv-ter-6), 3vw, var(--rsv-ter-7)); }

.rsv-hero__gombsor .rsv-gomb {
    min-height: 54px;
    padding-inline: var(--rsv-ter-6);
    font-size: var(--rsv-meret-torzs);
}

/* Telefonon a két CTA azonos szélességű — így nem lesz csálé a gombsor. */
@media (max-width: 575.98px) {
    .rsv-hero__gombsor {
        flex-direction: column;
        align-items: stretch;
    }

    .rsv-hero__gombsor .rsv-gomb { width: 100%; }
}

/* 10.5 Insight-doboz a hero alsó peremén */

/*
 * Mobilon a doboz RÁÚSZIK a kompozíció alsó részére — így a vizuál és az
 * insight egyetlen, összetartozó lezárást ad (spec 3. pont).
 */
.rsv-hero__insight-burok {
    position: relative;
    z-index: 3;
    margin-top: -64px;
    padding-bottom: clamp(var(--rsv-ter-5), 4vw, var(--rsv-ter-7));
}

.rsv-hero__insight {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: flex-start;
    gap: var(--rsv-ter-4);
    max-width: 560px;
    margin-top: clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-8));
    padding: var(--rsv-ter-5) clamp(var(--rsv-ter-5), 2vw, var(--rsv-ter-6));
    background: rgba(255, 255, 255, .9);
    backdrop-filter: saturate(160%) blur(12px);
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: var(--rsv-radius-lg);
    box-shadow: 0 2px 6px rgba(42, 14, 46, .04), 0 18px 44px rgba(42, 14, 46, .10);
}

.rsv-hero__insight-ikon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: var(--rsv-radius-md);
    background: var(--rsv-brand-soft);
    color: var(--rsv-brand-primary);
}

.rsv-hero__insight-ikon .ikon { --ikon-meret: 26px; }

.rsv-hero__insight-cim {
    font-size: var(--rsv-meret-h4);
    font-weight: 700;
    color: var(--rsv-brand-dark);
    margin: 0 0 var(--rsv-ter-2);
}

.rsv-hero__insight-szoveg {
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
    margin: 0;
}

/*
 * Desktopon a doboz a hero ALJÁRA kerül: a `.rsv-hero__burok` flex-oszlop,
 * ezért az `auto` felső margó lenyomja a rendelkezésre álló tér aljára.
 */
@media (min-width: 992px) {
    /*
     * Desktopon a hero flex-oszlop: a szövegblokk és az insight-doboz `auto`
     * felső margója egyenletesen osztja el a szabad teret, így a szöveg kissé
     * a közép fölött, a doboz pedig a hero alján ül.
     */
    .rsv-hero__burok         { margin-top: auto; }
    .rsv-hero__insight-burok {
        margin-top: auto;
        padding-bottom: clamp(var(--rsv-ter-7), 5vw, 104px);
    }

    .rsv-hero__insight { max-width: min(560px, 54%); }
}

@media (min-width: 1200px) {
    .rsv-hero__insight { max-width: min(560px, 50%); }
}

/*
 * 10.5/b ALAP MOZGÁS — finom, lassú, prémium
 *
 * A scroll-parallaxot a `publikus.js` adja (`--rsv-parallax-y`). Az alábbi
 * folyamatos mozgások ATTÓL FÜGGETLENÜL, a rétegek KÉPÉN futnak, ezért nem
 * ütköznek a wrapper transformjával.
 *
 * Mind a `@media (prefers-reduced-motion: no-preference)` blokkban van: aki
 * mozgáscsökkentést kért, annak el sem indul. A hero minden információja
 * statikus állapotban is teljes (kézikönyv §17).
 */
@media (prefers-reduced-motion: no-preference) {

    /*
     * Előtéri vírusklaszter — a hero legérzékelhetőbb folyamatos mozgása.
     * Néhány másodpercen belül látszania kell, hogy él, de nem „ugrálhat":
     * ezért hosszú, `ease-in-out` ciklus, kis amplitúdó és alig érzékelhető
     * elfordulás.
     */
    .rsv-reteg--klaszter img {
        animation: rsv-lebeges 10s ease-in-out infinite;
    }

    /*
     * Háttér-részecskék — a klaszterrel ELLENTÉTES irányú, lassabb sodródás.
     * Ettől nem mozog minden réteg egyszerre, egy irányba.
     */
    .rsv-reteg--reszecskek img {
        animation: rsv-reszecske-sodras 21s ease-in-out infinite alternate;
    }

    /* Ambient glow — nagy amplitúdójú, de lassú háttérsodródás. */
    .rsv-reteg--glow img {
        animation: rsv-sodrodas 27s ease-in-out infinite alternate;
    }

    /*
     * Insight-doboz — finom felfelé belépés.
     *
     * SZÁNDÉKOSAN nincs „előre elrejtett" kiinduló állapot: a doboz alapból
     * látható, és csak akkor játszik le EGYSZER egy belépést, amikor a
     * JavaScript megjelöli. Így semmilyen hiba (nem futó JS, elakadt
     * IntersectionObserver, félbeszakadt átmenet) nem hagyhatja láthatatlanul
     * a tartalmat.
     */
    html.rsv-mozgas .rsv-hero__insight--belep {
        animation: rsv-belepes .8s cubic-bezier(.22, .61, .36, 1) both;
    }
}

@keyframes rsv-belepes {
    from { opacity: 0; transform: translate3d(0, 26px, 0); }
    to   { opacity: 1; transform: none; }
}

/*
 * Vírusklaszter: kb. 16 px függőleges lebegés, kb. 8 px vízszintes drift és
 * legfeljebb 1.2 fok elfordulás. A négyfázisú ciklus adja az organikus,
 * nem gépies mozgást.
 */
@keyframes rsv-lebeges {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
    25%  { transform: translate3d(5px, -9px, 0) rotate(.55deg); }
    50%  { transform: translate3d(8px, -16px, 0) rotate(1.2deg); }
    75%  { transform: translate3d(2px, -7px, 0) rotate(.4deg); }
    100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}

/* Háttér-részecskék: a klaszterrel ellentétes irányú, puha sodródás. */
@keyframes rsv-reszecske-sodras {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-14px, 9px, 0); }
}

/* Ambient glow: nagy, lassú sodródás, nagyon finom fényerő-változással. */
@keyframes rsv-sodrodas {
    from { transform: translate3d(0, 0, 0) scale(1); opacity: .82; }
    to   { transform: translate3d(-3.2%, 2.4%, 0) scale(1.06); opacity: 1; }
}

/* 10.6 Alsó ívzárás — lágy átmenet a következő szekcióba */
.rsv-hero__ivzaras {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    z-index: 1;
    line-height: 0;
    pointer-events: none;
}

.rsv-hero__ivzaras svg {
    display: block;
    width: 100%;
    height: clamp(40px, 5.5vw, 104px);
}

.rsv-hero__ivzaras path { fill: var(--rsv-surface-page); }


/* --------------------------------------------------------------------------
   11. FŐOLDALI BLOKKOK
   -------------------------------------------------------------------------- */

/* 11.1 Vizuál keret — a képek karaktere marad, csak a keret kulturált */
.rsv-vizual {
    line-height: 0;
    border-radius: var(--rsv-radius-lg);
    overflow: hidden;
}

.rsv-vizual img {
    display: block;
    width: 100%;
    height: auto;
}

.rsv-vizual--parnas {
    background: var(--rsv-brand-bare);
    padding: clamp(var(--rsv-ter-4), 2vw, var(--rsv-ter-6));
}

.rsv-vizual--soft { background: var(--rsv-brand-soft); }

/* Széles, teljes szekciót átfogó vizuál (Hogyan terjed?) */
.rsv-vizual--szeles {
    max-width: 1080px;
    margin-inline: auto;
}

/*
 * 11.2 A számozott „kiemelt pontok" komponens MEGSZŰNT.
 *
 * Egyetlen helyen élt, a „Miért kell komolyan venni?" blokkban, és azt a
 * `RSVIRUS_KOCKAZAT_ATADO.md` §1 kifejezetten elvetette: a `01 / 02 / 03`
 * számozás helyére ikonos kártyák kerültek (lásd 11.9). A szabályok azért
 * kerültek ki, hogy ne maradjon holt CSS a fájlban.
 */

/* 11.3 Tünetlisták */
.rsv-tunetlista {
    display: grid;
    gap: var(--rsv-ter-3);
    list-style: none;
    margin: 0;
    padding: 0;
}

.rsv-tunetlista li {
    display: flex;
    align-items: flex-start;
    gap: var(--rsv-ter-3);
    font-size: var(--rsv-meret-kicsi);
}

.rsv-tunetlista .ikon { --ikon-meret: 18px; margin-top: 4px; }
.rsv-tunetlista--gyakori .ikon { color: var(--rsv-brand-secondary); }

/*
 * A figyelmeztető jelek listája diszkrét pontot kap, nem ismételt piktogramot:
 * a jelentést a panel ikonja és címe hordozza. A szín itt nem az egyetlen
 * jelentéshordozó (kézikönyv §19) — a lista a „Figyelmeztető jelek" cím alatt áll.
 */
.rsv-tunetlista--jelek li::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    margin-top: 10px;
    border-radius: 50%;
    background: var(--rsv-urgent);
}

/* 11.4 „Az RSV lefolyása" — a főoldal 7. szakasza
   --------------------------------------------------------------------------
   Kanonikus forrás: `docs/RSVIRUS_LEFOLYAS_ATADO.md`; kötelező elsődleges
   vizuális referencia a csomag két jóváhagyott képe (desktop és mobil).

   VALÓDI HTML/CSS IDŐVONAL — nem beillesztett kép (átadó §1):
     - 992 px-től vízszintes, öt oszlopban;
     - alatta függőleges. A 768–991 sáv is függőleges marad: ott az öt oszlop
       kb. 140 px-es lenne, és a „Fertőződés után 4–6 nap" címke szétesne.
       Az átadó §8 a tömörebb vízszintes elrendezést csak akkor engedi, „ha
       olvasható" — itt nem az.

   ÚJ SZÍN NEM KERÜLT A RENDSZERBE: minden érték a 2. szakasz tokenjeiből vagy
   azok `rgba()` alakjából jön. A csomag öt SVG-jének fix hexei
   `currentColor`-ra lettek cserélve (kézikönyv §21).

   SZEKCIÓHATÁR: a teteje `--rsv-brand-bare` (a tünetek-blokk kifutása), az
   alja fehér (a következő, „Hogyan terjed?" szakasz háttere).
   -------------------------------------------------------------------------- */

.rsv-lefolyas {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(72px, 8vw, 120px);
    background: linear-gradient(
        180deg,
        var(--rsv-brand-bare) 0%,
        var(--rsv-brand-soft) 38%,
        var(--rsv-brand-soft) 66%,
        var(--rsv-surface-card) 100%
    );
}

/*
 * Dekoratív háttérréteg. Az átadó §6 kifejezetten kéri, hogy itt NE legyen
 * újabb mozgó háttér: ebben a szakaszban az idővonal animációja a fő
 * történés. Ezért ez a réteg statikus — se parallax, se idle sodródás —, és
 * nagyon halvány.
 */
.rsv-lefolyas__hatter {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    line-height: 0;
}

.rsv-lefolyas__hatter img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    /*
     * Nagyon halvány. Az első hangolásnál (.38) a master sarkaiban lévő
     * fényhullámok dominánsak voltak a szekció alján, és elnyomták az
     * idővonalat — az átadó §6 ennél a szakasznál kifejezetten visszafogott
     * atmoszférát kér.
     */
    opacity: .2;
}

.rsv-lefolyas__burok { position: relative; }
.rsv-lefolyas__fej > :last-child { margin-bottom: 0; }

/* 11.4/b Az idővonal — függőleges alapelrendezés (mobil first)
   --------------------------------------------------------------------------
   Minden lépés saját rácsot kap:  [pont] [korong] [szöveg].
   A pont és a korong tisztán vizuális jelölő, ezért `aria-hidden`; a
   jelentést az időcímke és a cím viszi. A lista `<ol>`, mert a SORREND
   hordozza a jelentést.
   -------------------------------------------------------------------------- */

.rsv-idovonal {
    --rsv-pont: 22px;
    --rsv-korong: 60px;

    display: grid;
    gap: clamp(var(--rsv-ter-5), 3.5vw, var(--rsv-ter-7));
    list-style: none;
    margin: 0;
    padding: 0;
}

.rsv-lepes {
    position: relative;
    display: grid;
    grid-template-columns: var(--rsv-pont) var(--rsv-korong) minmax(0, 1fr);
    align-items: start;
    gap: clamp(var(--rsv-ter-3), 2.5vw, var(--rsv-ter-5));
}

/*
 * A PONT. Alapállapotban üres karika, aktív állapotban tömör Deep Plum korong
 * fehér gyűrűvel és két rétegű fénykoszorúval — pontosan a csomag
 * `active-marker-reference.png` szerint.
 *
 * A függőleges igazítás a KORONG KÖZEPÉHEZ szól: enélkül a pont a szöveg
 * tetejéhez tapadna, és elcsúszna a hozzá tartozó ikontól.
 */
.rsv-lepes__pont {
    position: relative;
    z-index: 1;
    width: var(--rsv-pont);
    height: var(--rsv-pont);
    margin-top: calc((var(--rsv-korong) - var(--rsv-pont)) / 2);
    border-radius: 50%;
    background: var(--rsv-surface-card);
    box-shadow: inset 0 0 0 2px rgba(141, 69, 162, .42);
    transition: background-color .45s ease, box-shadow .45s ease;
}

/*
 * A pont és a korong közötti rövid szaggatott összekötő (referencia).
 * Függőleges elrendezésben vízszintes, vízszintesben függőleges — ezért él
 * saját pszeudóelemben, nem a rács gap-jében.
 */
.rsv-lepes__pont::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    width: clamp(var(--rsv-ter-3), 2.5vw, var(--rsv-ter-5));
    border-top: 2px dashed rgba(141, 69, 162, .3);
}

/*
 * AZ ÖSSZEKÖTŐ VONAL. Nem az `<ol>` húzza egyben, hanem minden lépés a
 * SAJÁT szakaszát a következőig: így nem kell százalékban kiszámolni, hol
 * van az első és az utolsó pont közepe, és a „megtett út" színezése is
 * elemenként megy — bármelyik állomás lehet az aktív.
 */
.rsv-lepes:not(:last-child)::after {
    content: "";
    position: absolute;
    left: calc(var(--rsv-pont) / 2 - 1px);
    top: calc((var(--rsv-korong) + var(--rsv-pont)) / 2);
    bottom: calc(-1 * clamp(var(--rsv-ter-5), 3.5vw, var(--rsv-ter-7)) - (var(--rsv-korong) - var(--rsv-pont)) / 2);
    width: 2px;
    background: var(--rsv-border-default);
    transition: background-color .45s ease;
}

/* A már „megtett út" szakaszai lilák — az aktív pont mögötti előzmény. */
.rsv-lepes--megtett:not(:last-child)::after {
    background: rgba(141, 69, 162, .55);
}

/* A KORONG — az ikon foglalata. */
.rsv-lepes__korong {
    display: grid;
    place-items: center;
    width: var(--rsv-korong);
    height: var(--rsv-korong);
    border-radius: 50%;
    background: var(--rsv-surface-card);
    color: var(--rsv-brand-secondary);
    box-shadow: var(--rsv-arnyek-sm), inset 0 0 0 1px rgba(141, 69, 162, .14);
    transition: box-shadow .45s ease, color .45s ease;
}

.rsv-lepes__ikon { --ikon-meret: calc(var(--rsv-korong) * .52); }

.rsv-lepes__torzs { padding-top: calc((var(--rsv-korong) - var(--rsv-pont)) / 2 - 6px); }

/*
 * AZ IDŐCÍMKE. Ez a szakasz legérzékenyebb eleme: a lead mondja ki, hogy az
 * időpontok tájékoztató jellegűek, ezért a címke hangsúlyos, de nem
 * „menetrend-szerű" — nem kap keretet, dobozt vagy badge-et.
 */
.rsv-lepes__ido {
    display: block;
    font-size: var(--rsv-meret-torzs);
    font-weight: 600;
    color: var(--rsv-brand-secondary);
    transition: color .45s ease;
}

.rsv-lepes__cim {
    margin: var(--rsv-ter-1) 0 var(--rsv-ter-2);
    font-size: var(--rsv-meret-h4);
    font-weight: 700;
    line-height: var(--rsv-sormagassag-cim);
    color: var(--rsv-brand-dark);
}

.rsv-lepes__leiras {
    margin: 0;
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
}

/* 11.4/c AZ AKTÍV ÁLLOMÁS
   --------------------------------------------------------------------------
   A kiemelés HÁROM jelet ad egyszerre — a szín soha nem az egyetlen
   jelentéshordozó (kézikönyv §19): tömör pont, erősebb korongkeret és
   sötétebb időcímke.
   -------------------------------------------------------------------------- */

.rsv-lepes--aktiv .rsv-lepes__pont {
    background: var(--rsv-brand-dark);
    box-shadow:
        0 0 0 3px var(--rsv-surface-card),
        0 0 0 5px var(--rsv-brand-secondary),
        0 0 14px 4px rgba(141, 69, 162, .45),
        0 0 26px 10px rgba(141, 69, 162, .22);
}

.rsv-lepes--aktiv .rsv-lepes__korong {
    color: var(--rsv-brand-primary);
    box-shadow: var(--rsv-arnyek-md), inset 0 0 0 2px rgba(141, 69, 162, .38);
}

.rsv-lepes--aktiv .rsv-lepes__ido { color: var(--rsv-brand-primary); }

/* 11.4/d Vízszintes elrendezés — 992 px-től
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {

    .rsv-idovonal {
        --rsv-korong: clamp(64px, 5vw, 78px);

        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: clamp(var(--rsv-ter-4), 1.6vw, var(--rsv-ter-5));
        align-items: start;
    }

    .rsv-lepes {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        gap: 0;
        text-align: center;
    }

    /* A pont a lépés tetejére kerül, a vonal rajta fut át. */
    .rsv-lepes__pont { margin-top: 0; }

    /* A szaggatott összekötő lefelé mutat: a ponttól a korongig. */
    .rsv-lepes__pont::after {
        top: 100%;
        left: 50%;
        width: 0;
        height: var(--rsv-ter-5);
        border-top: 0;
        border-left: 2px dashed rgba(141, 69, 162, .3);
    }

    /*
     * A vonal VÍZSZINTES: a saját pontjától a következő oszlop pontjáig. A
     * `left: 50%` a lépés közepétől indul, a jobb széle pedig átnyúlik a
     * rács hézagján — így pontosan a szomszéd pont közepéig ér.
     */
    .rsv-lepes:not(:last-child)::after {
        left: 50%;
        right: calc(-50% - clamp(var(--rsv-ter-4), 1.6vw, var(--rsv-ter-5)));
        top: calc(var(--rsv-pont) / 2 - 1px);
        bottom: auto;
        width: auto;
        height: 2px;
    }

    .rsv-lepes__korong { margin-top: var(--rsv-ter-5); }

    .rsv-lepes__torzs {
        padding-top: var(--rsv-ter-4);
        max-width: 250px;
    }
}

/* 11.4/e A CTA és a biztonsági sor
   -------------------------------------------------------------------------- */

.rsv-lefolyas__gombsor { margin-top: clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-8)); }

/*
 * Biztonsági sor (átadó §7). Tájékoztató, nem diagnosztikai — ezért NEM
 * `.rsv-alert--surgos` panel: az a sürgősségi vizuális nyelv, és a kézikönyv
 * §13 azt csak tényleges sürgősségi tartalomnál engedi.
 */
.rsv-lefolyas__helper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--rsv-ter-3);
    max-width: 760px;
    margin: clamp(var(--rsv-ter-5), 2.4vw, var(--rsv-ter-6)) auto 0;
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
    text-align: center;
}

.rsv-lefolyas__helperikon {
    --ikon-meret: 20px;
    flex: none;
    color: var(--rsv-urgent);
}

/* 11.4/f MOZGÁS — az idővonalon futó aktív pont (átadó §4)
   --------------------------------------------------------------------------
   A LÉPTETÉST a `publikus.js` végzi, mert állapotgép: melyik állomás aktív,
   melyik van már mögötte. Itt csak az AKTÍV ÁLLAPOT megjelenése és a pulzálás
   van — az átmeneteket a fenti `transition`-ök viszik, tehát a JS-nek elég
   osztályt cserélnie.

   REDUCED-MOTION: a `no-preference` kapun kívül SEMMI nem mozog, és a JS sem
   léptet. Ilyenkor a kiszolgált HTML-ben eleve aktív 3. állomás
   (`3–5. tüneti nap`) marad kiemelve — az átadó §4 kifejezetten ezt kéri,
   mert ennek klinikai jelentése van. Ugyanez a helyzet JavaScript nélkül.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {

    /*
     * Finom pulzálás CSAK az aktív ponton. A pont fizikailag NEM ugrik
     * állomásról állomásra (átadó §4): az aktív ÁLLAPOT vándorol, a pontok
     * a helyükön maradnak.
     */
    .rsv-lepes--aktiv .rsv-lepes__pont {
        animation: rsv-lefolyas-pulzus 2.4s ease-in-out infinite;
    }
}

@keyframes rsv-lefolyas-pulzus {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.12); }
    100% { transform: scale(1); }
}


/* 11.5 „Hogyan terjed az RSV?" — a főoldal 8. szakasza
   --------------------------------------------------------------------------
   Kanonikus forrás: `docs/RSVIRUS_TERJEDES_ATADO.md`; kötelező elsődleges
   vizuális referencia a csomag jóváhagyott képe.

   KIFEJEZETTEN SZÉLES KOMPOZÍCIÓ (átadó §2): a szakasz saját, a szokásosnál
   tágabb burkot kap (max. 1560 px), hogy 1920 px-en se szűküljön keskeny
   középső csíkká. Ez az EGYETLEN blokk, amely túllép a 1360 px-es széles
   burkon — a szélessége maga a vizuális üzenet, mert a jelenet balról jobbra
   meséli el a terjedés útját.

   NINCS CHEVRON az állomások között: az átadó §5 „finom vonal VAGY minimális
   chevron" közül enged választani, és a dekoratív jobbra mutató nyíl több
   szakaszon átívelő projektgazdai döntés alapján nincs a publikus kimenetben.

   ÚJ SZÍN NEM KERÜLT A RENDSZERBE: a csomag öt SVG-jének fix hexe
   (`#7B3EA1`) `currentColor`-ra lett cserélve (kézikönyv §21).
   -------------------------------------------------------------------------- */

.rsv-terjedes {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--rsv-surface-card);
}

/*
 * A szakasz saját burka. A `--rsv-burok-szeles` (1360 px) itt kevés lenne: a
 * jelenet vízszintes elbeszélés, és 1920 px-en beszűkülve elveszne a hatása.
 */
.rsv-burok--terjedes {
    max-width: calc(1560px + 2 * var(--rsv-oldalmargo));
}

.rsv-terjedes__fej > :last-child { margin-bottom: 0; }

/* 11.5/b A rétegelt kompozíció
   --------------------------------------------------------------------------
   Az arányt a JELENET rétege adja (ő van a normál dokumentumfolyamban), a
   többi réteg abszolút ül rajta. Így nincs szükség `aspect-ratio`-ra és a
   vele járó `min-width: auto` csapdára.
   -------------------------------------------------------------------------- */

.rsv-terjedes__vizual {
    position: relative;
    isolation: isolate;
    margin-block: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-7));
}

.rsv-terjedes__jelenet {
    position: relative;
    z-index: 1;
    line-height: 0;
}

.rsv-terjedes__jelenet img {
    display: block;
    width: 100%;
    height: auto;
}

.rsv-terjedes__reteg { pointer-events: none; }

.rsv-terjedes__reteg img {
    width: 100%;
    height: auto;
    max-width: none;
}

/*
 * Az áramlás a jelenet MÖGÖTT: ő a háttérsodródás, nem az előtér. Kissé
 * túllóg oldalt, hogy a parallax legnagyobb kitérésénél se látszódjon ki a
 * széle.
 */
.rsv-terjedes__reteg--aramlas {
    inset: 22% -4% auto -4%;
    z-index: 0;
    opacity: .72;
}

/*
 * A HALADÓ VÍRUS — a szakasz fő mozgása.
 *
 * A wrapper a vizuál 30%-ánál kezdődik, és pontosan annyi SZÉLES, amennyit a
 * vírusnak haladnia kell (26%), ezért a belső elem 100%-os eltolása pontosan
 * a célnál (56%) ér véget. Így az útvonal a kompozíció szélességéhez skálázódik
 * — minden nézetméreten ugyanoda érkezik.
 */
.rsv-terjedes__reteg--virus {
    top: 14%;
    left: 30%;
    width: 26%;
    z-index: 2;
}

.rsv-terjedes__utazo {
    display: block;
    width: 100%;
    line-height: 0;
}

/*
 * A TÜDŐ-OVERLAY a gyermek mellkasán. Alacsony átlátszatlanság, hogy ne
 * keletkezzen „dupla kép" érzet a jelenetben már meglévő tüdő fölött
 * (átadó §4.2).
 */
.rsv-terjedes__tudo {
    position: absolute;
    /*
     * A POZÍCIÓ A JELENETBŐL VAN VISSZAMÉRVE, nem szemre állítva. A gyermek
     * légzőrendszere a master 84,1–97,6%-a között van vízszintesen, és a
     * 39–84,6%-a között függőlegesen. Az overlay saját rajza a dobozának
     * 8,1–94,7%-át tölti ki, ezért a doboz ennél valamivel tágabb.
     *
     * A `screen` keverés azért kell, mert a szekció háttere FEHÉR: normál
     * keveréssel az overlay téglalapja kilátszana a jelenet peremén túl.
     */
    top: 37.5%;
    left: 80.5%;
    width: 19.5%;
    z-index: 3;
    line-height: 0;
    opacity: .55;
    mix-blend-mode: screen;
    pointer-events: none;
}

.rsv-terjedes__tudo img {
    display: block;
    width: 100%;
    height: auto;
    /*
     * Az overlay felső ötöde az ORR és a garat rajza — az a jelenetben a
     * gyermek ARCÁRA esne, és ott dupla kontúrt adna. Maszkkal kifuttatjuk:
     * így csak a légcső és a tüdő ragyog, pontosan a mellkas fölött.
     */
    -webkit-mask-image: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) 9%,
        rgba(0, 0, 0, 1) 23%
    );
    mask-image: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) 9%,
        rgba(0, 0, 0, 1) 23%
    );
}

/* 11.5/c Az öt piktogramos kártya
   -------------------------------------------------------------------------- */

.rsv-lanc {
    display: grid;
    gap: clamp(var(--rsv-ter-3), 1.4vw, var(--rsv-ter-4));
    list-style: none;
    margin: 0;
    padding: 0;
}

/*
 * KÉT LÉPCSŐ. 768 px-en az öt oszlop kártyánként csak kb. 130 px lenne, és a
 * kétszavas címek is tördelnének — az átadó §5 „kényelmes" elrendezést kér.
 * Ezért 768–991 között három oszlop, és csak 992 px-től áll be az öt.
 */
@media (min-width: 768px) {
    .rsv-lanc { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
    .rsv-lanc { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.rsv-allomas {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--rsv-ter-2);
    padding: clamp(var(--rsv-ter-4), 1.8vw, var(--rsv-ter-6)) clamp(var(--rsv-ter-3), 1.4vw, var(--rsv-ter-5));
    text-align: center;
    background: var(--rsv-surface-card);
    border-radius: var(--rsv-radius-lg);
    box-shadow: var(--rsv-arnyek-sm), inset 0 0 0 1px rgba(141, 69, 162, .1);
    transition: transform .28s cubic-bezier(.22, .61, .36, 1), box-shadow .28s ease;
}

/*
 * A KAPCSOLATOT FINOM VONAL JELZI, nem chevron. Csak ott, ahol a kártyák
 * egy sorban állnak: mobilon egymás alatt a sorrend magától adódik.
 */
@media (min-width: 992px) {
    .rsv-allomas:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 100%;
        width: clamp(var(--rsv-ter-3), 1.4vw, var(--rsv-ter-4));
        height: 2px;
        background: linear-gradient(
            90deg,
            rgba(141, 69, 162, .28) 0%,
            rgba(141, 69, 162, .12) 100%
        );
    }
}

/* A sorszám diszkrét marad (átadó §5): jelöl, de nem versenyez a piktogrammal. */
.rsv-allomas__szam {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--rsv-brand-soft);
    color: var(--rsv-brand-primary);
    font-size: var(--rsv-meret-meta);
    font-weight: 700;
}

.rsv-allomas__korong {
    display: grid;
    place-items: center;
    width: clamp(58px, 4.4vw, 72px);
    height: clamp(58px, 4.4vw, 72px);
    color: var(--rsv-brand-secondary);
    transition: transform .28s cubic-bezier(.22, .61, .36, 1);
}

.rsv-allomas__ikon { --ikon-meret: clamp(42px, 3.2vw, 54px); }

.rsv-allomas__cim {
    margin: 0;
    font-size: var(--rsv-meret-torzs);
    font-weight: 700;
    line-height: var(--rsv-sormagassag-cim);
    color: var(--rsv-brand-dark);
}

.rsv-allomas__leiras {
    margin: 0;
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
}

.rsv-terjedes__zaras {
    max-width: calc(var(--rsv-burok-olvasas));
    margin: clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-8)) auto 0;
    text-align: center;
}

/* 11.5/d MOZGÁS — átadó §4
   --------------------------------------------------------------------------
   Négy dolog mozog, MIND a `no-preference` kapun belül:

     1. a haladó vírus — anya felől a gyermek felé, ez a fő történés;
     2. az áramlásréteg finom driftje;
     3. a tüdő-overlay lélegzése;
     4. a kártyák hover-emelkedése.

   A JELENET NEM MOZOG: ő a stabil fókusz (átadó §4.3). Scroll-parallaxot csak
   a két dekoratív réteg kap, és azt is szűk aránnyal.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {

    /*
     * A haladó vírus. A wrapper viszi a scroll-parallaxot, EZ az elem pedig a
     * haladást — a kettő így nem írja felül egymást.
     *
     * Az út enyhén ívelt (a félidőben feljebb tart), a cél közelében a vírus
     * elhalványul, majd a ciklus elején újraindul.
     *
     * A CIKLUSHOSSZ PROJEKTGAZDAI DÖNTÉS. Az átadó §4.1 „javaslat"-ként
     * 5,5–7,5 s-ot ad; az első beállítás e sáv közepén, 6,5 s-on állt. A
     * projektgazda az élő szakaszt látva LASSABBAT kért, ezért a ciklus
     * 9,5 s — kb. 24 px/s haladás, a korábbi 35 px/s helyett. Az átadó
     * másik követelménye („2–3 másodpercen belül látható elmozdulás") így is
     * bőven teljesül: az első érzékelhető mozdulat 40 ms-nál van.
     */
    .rsv-terjedes__utazo {
        animation: rsv-terjedes-utazas 9.5s cubic-bezier(.45, .05, .55, .95) infinite;
    }

    .rsv-terjedes__reteg--aramlas img {
        animation: rsv-terjedes-aramlas 19s cubic-bezier(.4, .05, .6, .95) -6s infinite alternate;
    }

    .rsv-terjedes__tudo {
        animation: rsv-terjedes-legzes 5.2s ease-in-out infinite;
    }

    /*
     * KÁRTYA-HOVER — átadó §6. Csak valódi hover-képes eszközön: érintőn a
     * `:hover` „beragadna" az utoljára megérintett kártyán.
     *
     * A tilt a KURZOR OLDALÁHOZ igazodik: a bal félen megdöntött kártya jobbra
     * dől, a jobb félen balra. Ez pointer-esemény nélkül, tisztán CSS-ből jön
     * — a `::before`/`::after` nélküli megoldás az egyszerű `translateY` és a
     * `rotate`, amit a kártya sorrendje szerint tükrözünk.
     */
    @media (hover: hover) and (pointer: fine) {
        .rsv-allomas:hover {
            transform: translateY(-6px) rotate(-.6deg);
            box-shadow: var(--rsv-arnyek-lg), inset 0 0 0 1px rgba(141, 69, 162, .18);
        }

        .rsv-allomas:nth-child(even):hover { transform: translateY(-6px) rotate(.6deg); }

        .rsv-allomas:hover .rsv-allomas__korong { transform: scale(1.04); }
    }
}

/*
 * MOZGÁSCSÖKKENTÉS MELLETT is marad visszajelzés a hoverre — csak mozgás
 * nélkül: a kontúr és az árnyék erősödik, a kártya nem emelkedik és nem dől.
 */
@media (hover: hover) and (pointer: fine) {
    .rsv-allomas:hover {
        box-shadow: var(--rsv-arnyek-md), inset 0 0 0 1px rgba(141, 69, 162, .2);
    }
}

/*
 * A HALADÁS: 0 -> 100% a wrapper szélességén, ami pontosan a vizuál 30%-ától
 * 56%-áig tart. A `translateY` adja az enyhe ívet, a `scale` a közeledés
 * érzetét. A cél közelében fade-down, majd a ciklus elején újraindul.
 */
@keyframes rsv-terjedes-utazas {
    0%   { transform: translate3d(0, 6%, 0) scale(.9); opacity: 0; }
    10%  { transform: translate3d(9%, 3%, 0) scale(.93); opacity: 1; }
    50%  { transform: translate3d(50%, -7%, 0) scale(1); opacity: 1; }
    84%  { transform: translate3d(96%, 4%, 0) scale(1.05); opacity: .92; }
    95%  { transform: translate3d(104%, 8%, 0) scale(1.07); opacity: 0; }
    100% { transform: translate3d(0, 6%, 0) scale(.9); opacity: 0; }
}

/* Az áramlásréteg csak atmoszféra: 12–18 px drift (átadó §4.1). */
@keyframes rsv-terjedes-aramlas {
    from { transform: translate3d(-15px, -4px, 0) scale(1); }
    to   { transform: translate3d(14px, 5px, 0) scale(1.02); }
}

/* Lélegzés: scale 1,00 -> 1,04, glow-pulzussal (átadó §4.2). */
@keyframes rsv-terjedes-legzes {
    0%   { transform: scale(1); opacity: .48; }
    45%  { transform: scale(1.04); opacity: .72; }
    100% { transform: scale(1); opacity: .48; }
}


/* 11.6 „Megelőzés – a legjobb védelem" — a főoldal 9. szakasza
   --------------------------------------------------------------------------
   Kanonikus forrás: `docs/RSVIRUS_MEGELOZES_ATADO.md`; kötelező elsődleges
   vizuális referencia a csomag jóváhagyott képe.

   SZÉLES BELSŐ ZÓNA (átadó §3): a szakasz saját, 1440 px-es burkot kap, hogy a
   hero ne szűküljön keskeny középső csíkká. (A 8. szakasz 1560 px-e ennél is
   tágabb — ott a jelenet vízszintes elbeszélés, itt kétoszlopos kompozíció.)

   ÚJ SZÍN NEM KERÜLT A RENDSZERBE: a csomag három kártya-SVG-je tíz fix hexet
   hozott, ebből egyetlen volt projekttoken. Mind lecserélve: a halvány
   gradiensfokozatok a `bare`/`soft` tokenre, az erős kontúrok
   `currentColor`-ra, a köztes akcentusok pedig `currentColor` + átlátszóság
   párosra — mert a paletta nem ad köztes fokozatot, és újat nem vezetünk be
   (kézikönyv §21).
   -------------------------------------------------------------------------- */

.rsv-megelozes {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(72px, 8vw, 120px);
    /*
     * Mindkét szomszéd FEHÉR: fölötte a terjedés-szakasz, alatta a
     * koraszülöttek. A gradiens ezért fehérből indul és fehérbe fut ki, a
     * levendula pedig a szakasz közepén a legerősebb — így egyik határon
     * sincs kemény vonal, és a szomszédokhoz nem kellett hozzányúlni.
     */
    background: linear-gradient(
        180deg,
        var(--rsv-surface-card) 0%,
        var(--rsv-brand-bare) 18%,
        var(--rsv-brand-soft) 48%,
        var(--rsv-brand-bare) 82%,
        var(--rsv-surface-card) 100%
    );
}

.rsv-burok--megelozes {
    max-width: calc(1440px + 2 * var(--rsv-oldalmargo));
}

/* 11.6/b A hero
   --------------------------------------------------------------------------
   A HTML sorrendje maga az átadó §7 mobil sorrendje: eyebrow/H2/lead, vizuál,
   linkek. Desktopon a `grid-template-areas` teszi a vizuált a bal oszlopba —
   `order` nélkül, tehát a forrássorrend és a bejárási sorrend nem szakad el
   egymástól.
   -------------------------------------------------------------------------- */

.rsv-megelozes__hero {
    display: grid;
    gap: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-7));
    grid-template-areas:
        "fej"
        "vizual"
        "linkek";
}

.rsv-megelozes__fej    { grid-area: fej; }
.rsv-megelozes__vizual { grid-area: vizual; }
.rsv-megelozes__linkek { grid-area: linkek; }

.rsv-megelozes__fej > :last-child { margin-bottom: 0; }

@media (min-width: 992px) {
    .rsv-megelozes__hero {
        grid-template-areas:
            "vizual fej"
            "vizual linkek";
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
        grid-template-rows: auto auto;
        align-content: center;
        column-gap: clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-8));
        row-gap: clamp(var(--rsv-ter-5), 2.5vw, var(--rsv-ter-6));
    }

    /* A vizuál átfogja mindkét sort, és függőlegesen középen ül. */
    .rsv-megelozes__vizual { align-self: center; }
    .rsv-megelozes__fej    { align-self: end; }
    .rsv-megelozes__linkek { align-self: start; }
}

/* 11.6/c A rétegelt vizuál
   --------------------------------------------------------------------------
   Mindhárom réteg UGYANABBÓL az 1448x1086-os dobozból származik, ezért
   pontosan egymásra illeszkednek: az arányt a család rétege adja (ő van a
   normál dokumentumfolyamban), a másik kettő abszolút ül rajta.

   A CSALÁD RÉTEGE NEM MOZOG: ő az érzelmi fókusz. Mobilon is nagy marad
   (átadó §7).
   -------------------------------------------------------------------------- */

.rsv-megelozes__vizual {
    position: relative;
    isolation: isolate;
    min-width: 0;
}

.rsv-megelozes__csalad {
    position: relative;
    z-index: 2;
    line-height: 0;
}

.rsv-megelozes__csalad img {
    display: block;
    width: 100%;
    height: auto;
}

.rsv-megelozes__reteg {
    position: absolute;
    inset: 0;
    line-height: 0;
    pointer-events: none;
}

.rsv-megelozes__reteg img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
}

/* A fényudvar a család MÖGÖTT: csak atmoszféra (átadó §4.2). */
.rsv-megelozes__reteg--fenyudvar {
    z-index: 1;
    opacity: .8;
}

/* A vírusmező a család ELŐTT — ez a réteg mozog érzékelhetően (átadó §4.1). */
.rsv-megelozes__reteg--virusok {
    z-index: 3;
    opacity: .92;
}

/* 11.6/d A két továbbvezető link
   --------------------------------------------------------------------------
   Nyíl NÉLKÜL (lásd a szakasz sablonjának indoklását). A jelzést az aláhúzás
   és a hover-szín adja — a kontúr itt jelentést hordoz, ezért a
   `--rsv-border-interaktiv` fokozat kell hozzá, nem a dekoratív alapkontúr.
   -------------------------------------------------------------------------- */

.rsv-megelozes__linkek {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(var(--rsv-ter-4), 2vw, var(--rsv-ter-6));
}

.rsv-megelozes__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;                        /* kényelmes érintési cél */
    font-weight: 600;
    color: var(--rsv-brand-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--rsv-border-interaktiv);
    padding-bottom: 2px;
    transition: color .18s ease, border-color .18s ease;
}

.rsv-megelozes__link:hover,
.rsv-megelozes__link:focus {
    color: var(--rsv-brand-primary-hover);
    border-color: var(--rsv-brand-primary-hover);
}

/* 11.6/e A három út kártyája
   --------------------------------------------------------------------------
   A TELJES KÁRTYA kattintható (átadó §6): az `<a>` MAGA a kártya, nem egy
   benne lévő link. Így az egész felület célpont, és billentyűzetről egyetlen
   tabstop — nem kell átlépkedni a kártyán belüli elemeken.

   MEGJEGYZÉS: a `.rsv-utkartya` korábban a továbblépés-panel kártyája volt.
   Az a panel azóta saját komponenst kapott (`.rsv-tovabb`), tehát ez az
   osztály ma KIZÁRÓLAG itt él — ezért bővíthető szakaszspecifikusan.
   -------------------------------------------------------------------------- */

.rsv-utak {
    display: grid;
    gap: clamp(var(--rsv-ter-4), 2vw, var(--rsv-ter-5));
    list-style: none;
    margin: clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-8)) 0 0;
    padding: 0;
}

@media (min-width: 992px) {
    .rsv-utak { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.rsv-utak > li { display: flex; }

/*
 * A kártya belső rácsa. A szöveg és az illusztráció külön oszlopban áll, az
 * ábra függőlegesen középen — ahogy a referencia mutatja.
 */
.rsv-utkartya {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40%;
    grid-template-areas:
        "fej    abra"
        "cim    abra"
        "leiras abra";
    align-content: start;
    gap: var(--rsv-ter-2) var(--rsv-ter-3);
    width: 100%;
}

.rsv-utkartya__fej    { grid-area: fej; }
.rsv-utkartya__cim    { grid-area: cim; }
.rsv-utkartya__leiras { grid-area: leiras; }

.rsv-utkartya__abra {
    grid-area: abra;
    align-self: center;
    justify-self: end;
    /*
     * Alsó korlát: a három kártya szövege eltérő hosszú, és e nélkül a
     * rövidebb kártyákon az ábra észrevehetően kisebbre esne — a rács a
     * tartalomhoz igazodna. Így mindhárom ábra azonos súlyú marad.
     */
    width: 100%;
    min-width: 118px;
    line-height: 0;
}

.rsv-utkartya__abra svg {
    display: block;
    width: 100%;
    height: auto;
    color: var(--rsv-brand-secondary);
    transition: transform .22s cubic-bezier(.22, .61, .36, 1);
}

/*
 * Mobilon a kétoszlopos elrendezés mindkét oldalt agyonnyomná: a
 * „Csecsemőkori passzív immunizáció" cím kb. 180 px-en már négy sorba törne.
 * Ott az ábra a szöveg ALÁ kerül, jobbra igazítva és kisebb méretben.
 */
@media (max-width: 575.98px) {
    .rsv-utkartya {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "fej"
            "cim"
            "leiras"
            "abra";
    }

    .rsv-utkartya__abra {
        justify-self: end;
        width: 62%;
        max-width: 190px;
        margin-top: var(--rsv-ter-2);
    }
}

/* 11.6/f MOZGÁS — átadó §4
   --------------------------------------------------------------------------
   Három folyamatos mozgás, MIND a `no-preference` kapun belül:

     1. a vírusmező lassú driftje — ez a látható történés (§4.1);
     2. a fényudvar sodródása — csak atmoszféra (§4.2);
     3. a fényudvar „védőpulzusa" — a pajzs finom ragyogása (§4.3).

   A 2. és a 3. UGYANAZON az elemen fut, de KÜLÖN tulajdonságot animál: a
   sodródás a `transform`-ot, a pulzus az `opacity`-t. Egy elemen két
   `transform`-animáció felülírná egymást.

   A CSALÁD RÉTEGE NEM MOZOG.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {

    /*
     * A vírusmező: kb. 14 px vízszintes, 9 px függőleges kitérés, 12 s ciklus,
     * 0,8 fok elfordulással — az átadó §4.1 sávjainak közepe. A negatív
     * késleltetés azért kell, mert az `alternate` a ciklus két végén a
     * leglassabb: enélkül a látogató a holtponton érkezne, és a mozgás nem
     * lenne 2–4 másodpercen belül érzékelhető.
     */
    .rsv-megelozes__reteg--virusok img {
        animation: rsv-megelozes-virusok 12s cubic-bezier(.4, .05, .6, .95) -4s infinite alternate;
    }

    .rsv-megelozes__reteg--fenyudvar img {
        animation: rsv-megelozes-orbit 30s ease-in-out -9s infinite alternate;
    }

    .rsv-megelozes__reteg--fenyudvar {
        animation: rsv-megelozes-pajzs 6s ease-in-out infinite;
    }

    /*
     * KÁRTYA-HOVER — átadó §6. Csak valódi hover-képes eszközön: érintőn a
     * `:hover` az utoljára megérintett kártyán „beragadna".
     */
    @media (hover: hover) and (pointer: fine) {
        .rsv-utak > li:hover .rsv-utkartya {
            transform: translateY(-4px) scale(1.014);
        }

        .rsv-utak > li:hover .rsv-utkartya__abra svg { transform: scale(1.04); }
    }
}

/*
 * A hover VIZUÁLIS visszajelzése mozgáscsökkentés mellett is megmarad — csak
 * elmozdulás nélkül: a kontúr és az árnyék erősödik. Ez a `.rsv-utkartya`
 * alapszabályában (7. blokk) már benne van; itt csak az átmenet finomodik,
 * hogy az emelkedés az átadó §6 szerinti 180–260 ms alatt fusson le.
 */
.rsv-utkartya {
    transition:
        border-color .22s ease,
        box-shadow .22s ease,
        transform .22s cubic-bezier(.22, .61, .36, 1);
}

/* Vírusmező: kb. 14 px vízszintes, 9 px függőleges, max. 0,8 fok (átadó §4.1). */
@keyframes rsv-megelozes-virusok {
    from { transform: translate3d(-7px, -4.5px, 0) rotate(-.4deg); }
    to   { transform: translate3d(7px, 4.5px, 0) rotate(.4deg); }
}

/* Orbit: lassú sodródás, alig érzékelhető nagyítással (átadó §4.2). */
@keyframes rsv-megelozes-orbit {
    from { transform: translate3d(0, 0, 0) scale(1) rotate(-.6deg); }
    to   { transform: translate3d(-1.4%, .9%, 0) scale(1.03) rotate(.6deg); }
}

/* Védőpulzus: csak fényerő, semmi pumpálás (átadó §4.3). */
@keyframes rsv-megelozes-pajzs {
    0%   { opacity: .68; }
    45%  { opacity: .92; }
    100% { opacity: .68; }
}


/* 11.7 Helyzetválasztó — a főoldal 3. szakasza
   --------------------------------------------------------------------------
   Kanonikus forrás: `docs/RSVIRUS_HELYZETVALASZTO_ATADO.md`; kötelező
   elsődleges vizuális referencia a csomag jóváhagyott mockupja (átadó §2).

   A mockup kompozíciója VÍZSZINTES kártya: bal oldalon nagy illusztráció,
   jobb oldalon cím és leírás, lent jobbra a továbblépés jelzése. (Az átadó
   §4.2 szövege „felső zónát" említ; ütközés esetén a §2 szerint a MOCKUP a
   mérvadó, a §5 pedig kifejezetten megengedi a józan eltérést.)

   ÚJ SZÍN NEM KERÜLT A RENDSZERBE: minden érték a 2. szakasz tokenjeiből jön,
   az áttetsző rétegek pedig ugyanezek `rgba()` alakjai (kézikönyv §21).
   -------------------------------------------------------------------------- */

/*
 * A szekció FELSŐ és ALSÓ pereme szándékosan `--rsv-surface-page`: fölötte a
 * hero ívzárása pontosan ezzel a színnel fut ki, alatta pedig a fehér „Mi az
 * RSV?" blokk kezdődik. Így a rózsás-lilás ambient a szekció KÖZEPÉN erősödik
 * fel, és egyik szomszédjánál sincs látható varrat.
 */
.rsv-helyzetek {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(72px, 8vw, 120px);
    background: linear-gradient(
        180deg,
        var(--rsv-surface-page) 0%,
        var(--rsv-brand-bare) 22%,
        var(--rsv-brand-bare) 72%,
        var(--rsv-surface-page) 100%
    );
}

/*
 * Dekoratív ambient réteg. Mobilon a kompozíció alsó, hullámos sávja a
 * lényeg, ezért ott TÚLMÉRETEZVE, a szekció aljára ültetve jelenik meg:
 * `object-fit: cover` mellett ugyanis a kép szándékosan ÜRES közepét látnánk.
 * Tablettől fölfelé a réteg a teljes szekciót kitölti.
 */
.rsv-helyzetek__hatter {
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: -1;
    width: 190%;
    transform: translateX(-50%);
    line-height: 0;
    pointer-events: none;
}

/*
 * A réteg pereme MASZKKAL oldódik fel. Enélkül a kompozíció alsó, telt
 * levendula hulláma éles vízszintes vágással érne véget a szekció alján, a
 * következő (fehér) blokk határán — pontosan az a „ráragasztott doboz" hatás,
 * amit a szekció ambientjének kerülnie kell.
 */
.rsv-helyzetek__hatter img {
    width: 100%;
    opacity: .8;
    -webkit-mask-image: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 1) 9%,
        rgba(0, 0, 0, 1) 84%,
        rgba(0, 0, 0, 0) 100%
    );
    mask-image: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 1) 9%,
        rgba(0, 0, 0, 1) 84%,
        rgba(0, 0, 0, 0) 100%
    );
}

@media (min-width: 768px) {
    .rsv-helyzetek__hatter {
        inset: 0;
        width: auto;
        transform: none;
    }

    .rsv-helyzetek__hatter img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 100%;
        opacity: .9;
    }
}

.rsv-helyzetek__burok { position: relative; }

/*
 * 3×2 rács nagy közökkel (átadó §6). A harmadik oszlop csak 1200 px-től jön:
 * alatta a vízszintes kártyakompozíció szövegoszlopa már zsúfolt lenne.
 */
.rsv-helyzetracs {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(var(--rsv-ter-4), 2.2vw, var(--rsv-ter-6));
}

@media (min-width: 768px) {
    .rsv-helyzetracs { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1200px) {
    .rsv-helyzetracs { grid-template-columns: repeat(3, 1fr); }
}

/*
 * A KÁRTYA KÉT RÉTEGE — miért nem egyetlen elem?
 *
 * Három mozgás fut egyszerre: belépés, folyamatos lebegés, hover-emelés.
 * Egyetlen elemen az `animation` MINDIG felülírná a hover `transform`-ját,
 * ezért a szerepek szét vannak osztva:
 *
 *   .rsv-helyzetkartya       — a link: belépés (egyszeri) ÉS hover-emelés
 *   .rsv-helyzetkartya__lap  — a kártya felülete: folyamatos lebegés
 *
 * Így a kártya hoverre akkor is emelkedik, ha éppen lebeg.
 */
.rsv-helyzetkartya {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
    border-radius: var(--rsv-radius-lg);
    transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}

.rsv-helyzetkartya:hover { color: inherit; }

/* A globális focus-szabály `--rsv-radius-sm`-t ad; egy nagy kártyán ez szűk. */
.rsv-helyzetkartya:focus-visible { border-radius: var(--rsv-radius-lg); }

@media (hover: hover) {
    .rsv-helyzetkartya:hover { transform: translateY(-6px); }
}

.rsv-helyzetkartya__lap {
    position: relative;
    display: grid;
    grid-template-columns: minmax(112px, 38%) minmax(0, 1fr);
    align-items: center;
    gap: clamp(var(--rsv-ter-3), 1.4vw, var(--rsv-ter-5));
    height: 100%;
    padding: clamp(var(--rsv-ter-4), 1.8vw, var(--rsv-ter-5));
    border-radius: var(--rsv-radius-lg);
    /*
     * Nem üres fehér doboz (átadó §4.2, §8): a felület átlósan a legvilágosabb
     * brandfelület felé hajlik, és nagyon halvány lila belső peremet kap.
     */
    background: linear-gradient(
        136deg,
        var(--rsv-surface-card) 0%,
        var(--rsv-surface-card) 52%,
        var(--rsv-brand-bare) 100%
    );
    box-shadow:
        inset 0 0 0 1px rgba(141, 69, 162, .10),
        inset 0 1px 0 rgba(255, 255, 255, .85),
        var(--rsv-arnyek-md);
    transition: box-shadow .3s ease;
}

.rsv-helyzetkartya:hover .rsv-helyzetkartya__lap,
.rsv-helyzetkartya:focus-visible .rsv-helyzetkartya__lap {
    box-shadow:
        inset 0 0 0 1px rgba(141, 69, 162, .22),
        inset 0 1px 0 rgba(255, 255, 255, .9),
        var(--rsv-arnyek-lg);
}

/*
 * Az illusztráció a kártya meghatározó eleme, nem sarokikon (átadó §4.2).
 * Kissé TÚLLÓG a kártya paddingján, hogy kiemelkedjen a felület síkjából.
 */
.rsv-helyzetkartya__kep {
    display: block;
    line-height: 0;
    margin-block: calc(-1 * var(--rsv-ter-3));
    margin-inline-start: calc(-1 * var(--rsv-ter-2));
}

.rsv-helyzetkartya__kep img {
    display: block;
    width: 100%;
    transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}

@media (hover: hover) {
    .rsv-helyzetkartya:hover .rsv-helyzetkartya__kep img {
        transform: scale(1.07) rotate(-1.5deg);
    }
}

/*
 * A szövegoszlop függőlegesen KÖZÉPRE igazít. Amíg a kártya jobb alsó sarkában
 * ott volt a dekoratív nyíl, az `margin-top: auto`-val tartotta az egyensúlyt;
 * a nyíl kivétele után (projektgazdai döntés) a szöveg különben a kártya
 * tetejére tapadna a függőlegesen középre igazított illusztráció mellett.
 */
.rsv-helyzetkartya__szoveg {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--rsv-ter-2);
    min-width: 0;
    padding-block: var(--rsv-ter-2);
}

.rsv-helyzetkartya__cim {
    font-size: var(--rsv-meret-h4);
    font-weight: 700;
    line-height: 1.25;
    color: var(--rsv-brand-dark);
}

.rsv-helyzetkartya__leiras {
    font-size: var(--rsv-meret-kicsi);
    line-height: 1.55;
    color: var(--rsv-text-secondary);
}

/*
 * „Minden élethelyzet" — diszkrét pirula, nem harsány CTA (átadó §3).
 *
 * A LÁBJEGYZET-BURKOLÓ (`.rsv-helyzetek__labjegyzet`) 2026-09-10-én KIKERÜLT
 * a jelölésből: a `/mit-tegyek-most` pillér jegelve van. A `.rsv-helyzetlink`
 * viszont MEGMARAD, mert a 4. szakasz („Mi az RSV?") CTA-ja is ezt a
 * tercier, pirula alakú linket használja — lásd a 11.9 szakasz hivatkozását.
 */
.rsv-helyzetlink {
    display: inline-flex;
    align-items: center;
    gap: var(--rsv-ter-3);
    min-height: 56px;
    padding: var(--rsv-ter-2) var(--rsv-ter-6) var(--rsv-ter-2) var(--rsv-ter-2);
    border-radius: var(--rsv-radius-pill);
    background: var(--rsv-surface-card);
    color: var(--rsv-brand-dark);
    font-weight: 700;
    text-decoration: none;
    box-shadow:
        inset 0 0 0 1px rgba(141, 69, 162, .10),
        var(--rsv-arnyek-md);
    transition: transform .22s ease, box-shadow .22s ease;
}

.rsv-helyzetlink:hover {
    color: var(--rsv-brand-dark);
    transform: translateY(-2px);
    box-shadow:
        inset 0 0 0 1px rgba(141, 69, 162, .22),
        var(--rsv-arnyek-lg);
}

.rsv-helyzetlink__jel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--rsv-radius-pill);
    background: var(--rsv-brand-soft);
    line-height: 0;
}

.rsv-helyzetlink__jel img { width: 30px; }


/* 11.7/b MOZGÁS — átadó §7
   --------------------------------------------------------------------------
   Három független réteg, mind a `no-preference` blokkban: aki mozgáscsökkentést
   kért, annál egyik sem indul el, és a blokk minden információja változatlanul
   látszik (kézikönyv §17).
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {

    /* 1. Háttér — nagyon lassú sodródás. */
    .rsv-helyzetek__hatter img {
        animation: rsv-helyzet-sodras 34s ease-in-out infinite alternate;
    }

    /*
     * 2. Idle lebegés. A NEGATÍV `animation-delay` miatt minden kártya a
     * ciklus más pontján indul, a páros kártyák pedig ellentétes irányba és
     * lassabban mozognak — enélkül mind a hat egyszerre, egy ütemre mozogna.
     */
    .rsv-helyzetkartya__lap {
        animation: rsv-helyzet-lebeges 7.2s ease-in-out infinite;
        animation-delay: calc(var(--rsv-lebeges-sorszam, 0) * -1.15s);
    }

    .rsv-helyzetkartya:nth-child(2n) .rsv-helyzetkartya__lap {
        animation-name: rsv-helyzet-lebeges-alt;
        animation-duration: 8.6s;
    }

    /*
     * 3. Scroll-belépés. Ugyanaz az elv, mint a hero insight-dobozánál: az
     * elem ALAPBÓL LÁTHATÓ, és csak akkor játszik le EGYSZER egy belépést, ha
     * a JavaScript megjelöli. Nem futó JS, elakadt IntersectionObserver vagy
     * félbeszakadt animáció esetén sem tűnhet el a tartalom.
     *
     * A jelölést az `animationend` le is veszi, hogy utána a hover-emelés
     * szabadon használhassa a `transform`-ot.
     */
    html.rsv-mozgas .rsv-belep--aktiv {
        animation: rsv-belepes .7s cubic-bezier(.22, .61, .36, 1) both;
        animation-delay: var(--rsv-belep-kesleltetes, 0ms);
    }
}

/* Kb. 7 px fel — „éljen a felület, de ne ugráljon" (átadó §7.2). */
@keyframes rsv-helyzet-lebeges {
    0%   { transform: translate3d(0, 0, 0); }
    50%  { transform: translate3d(0, -7px, 0); }
    100% { transform: translate3d(0, 0, 0); }
}

/* Ellentétes irányú, kisebb amplitúdójú változat a páros kártyákhoz. */
@keyframes rsv-helyzet-lebeges-alt {
    0%   { transform: translate3d(0, 0, 0); }
    50%  { transform: translate3d(0, 5px, 0); }
    100% { transform: translate3d(0, 0, 0); }
}

/*
 * A háttér sodródása. NEM a hero `rsv-sodrodas` keyframe-je: ott a fényerő is
 * változik, ami egy teljes szekció alatt lüktetésnek látszana. Itt csak lassú
 * elmozdulás és alig érzékelhető nagyítás van.
 */
@keyframes rsv-helyzet-sodras {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-2.2%, 1.4%, 0) scale(1.05); }
}


/* 11.8 „Mi az RSV?" — a főoldal 4. szakasza
   --------------------------------------------------------------------------
   Kanonikus forrás: `docs/RSVIRUS_MIAZRSV_ATADO.md`; kötelező elsődleges
   vizuális referencia a csomag jóváhagyott képe (átadó §2).

   A szakasz szerkezete: világos ambient szekció -> nagy fehér panel -> bal
   oldalon tipográfia, jobb oldalon RÉTEGELT vizuális kompozíció.

   ÚJ SZÍN NEM KERÜLT A RENDSZERBE: minden érték a 2. szakasz tokenjeiből vagy
   azok `rgba()` alakjából jön (kézikönyv §21).
   -------------------------------------------------------------------------- */

/*
 * A szakasz FELSŐ pereme pontosan az előző blokk kifutó színe
 * (`--rsv-surface-page`), az ALSÓ pereme pedig pontosan a következő blokk
 * háttere (`--rsv-brand-soft`). Így egyik határon sincs kemény vízszintes
 * vonal — és a következő, 5. szakaszhoz nem kellett hozzányúlni (átadó §9).
 */
.rsv-miazrsv {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(72px, 8vw, 120px);
    background: linear-gradient(
        180deg,
        var(--rsv-surface-page) 0%,
        var(--rsv-brand-bare) 15%,
        var(--rsv-brand-bare) 55%,
        var(--rsv-brand-soft) 100%
    );
}

/*
 * Nagyon halvány ambient fények. SZÁNDÉKOSAN nem külön képasset: a hatás két
 * radiális átmenettel elérhető, tehát nem terheljük a szakaszt még egy
 * letöltéssel. A meleg akcentus itt kizárólag háttérként jelenik meg — a
 * tokenkommentár §2.3 pontosan erre engedi.
 */
.rsv-miazrsv::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(58% 46% at 10% 6%, rgba(141, 69, 162, .10), transparent 70%),
        radial-gradient(52% 44% at 93% 78%, rgba(233, 177, 138, .10), transparent 70%);
}

/* A belső fő panel — átadó §4. */
.rsv-miazrsv__panel {
    position: relative;
    display: grid;
    align-items: center;
    gap: clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-7));
    padding: clamp(var(--rsv-ter-5), 5vw, var(--rsv-ter-8));
    border-radius: var(--rsv-radius-lg);
    background: var(--rsv-surface-card);
    box-shadow:
        inset 0 0 0 1px rgba(141, 69, 162, .08),
        var(--rsv-arnyek-lg);
}

/*
 * Két oszlop csak 992 px-től: alatta a tipográfia és a nagy vizuál is a teljes
 * szélességet kéri. Az arány az átadó §4 szerinti 46–50% szöveg / 50–54%
 * vizuál sávban van.
 */
@media (min-width: 992px) {
    .rsv-miazrsv__panel { grid-template-columns: 47fr 53fr; }
}

.rsv-miazrsv__szoveg > :last-child { margin-bottom: 0; }

.rsv-miazrsv__gombsor { margin-top: clamp(var(--rsv-ter-5), 2.5vw, var(--rsv-ter-6)); }

/*
 * CTA — a kézikönyv §11 szerinti MÁSODLAGOS (outline) gomb pirula alakban,
 * a referencia szerint. Nincs benne dekoratív nyíl (átadó §7); a
 * könyv-jelzőkép nem új ikon, hanem a 3. szakaszban már használt
 * illusztráció.
 *
 * Miért nem a `.rsv-helyzetlink`? Mert az TERCIER szintű: háttér nélküli,
 * lágy „mutasd az összeset" pirula. Ez itt a szakasz fő továbblépése, tehát
 * a másodlagos gombszint jár neki (kézikönyv §11). Két különböző hangsúly,
 * nem ugyanannak a funkciónak a duplikálása.
 */
.rsv-miazrsv__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--rsv-ter-3);
    min-height: 60px;
    padding: var(--rsv-ter-2) var(--rsv-ter-6) var(--rsv-ter-2) var(--rsv-ter-3);
    border: 1px solid var(--rsv-brand-primary);
    border-radius: var(--rsv-radius-pill);
    background: var(--rsv-surface-card);
    color: var(--rsv-brand-primary);
    font-weight: 700;
    text-decoration: none;
    transition: transform .22s ease, background-color .22s ease,
        border-color .22s ease, box-shadow .22s ease;
}

/*
 * Mobilon teljes szélességű: a felirat („Tudj meg többet az RSV-ről") 390 px
 * alatt nem fér egy sorba, és inline pirulaként a törés véletlenszerű helyre
 * esne. Teljes szélességen a törés szóhatáron történik, és a gomb szándékosnak
 * hat, nem elrontottnak.
 */
@media (max-width: 767px) {
    .rsv-miazrsv__cta {
        width: 100%;
        padding-right: var(--rsv-ter-5);
        font-size: var(--rsv-meret-kicsi);
    }
}

/*
 * A felirat utolsó szava egyben marad. Enélkül keskeny nézeten a sortörés a
 * kötőjelnél esne — „…az RSV-" / „ről" —, ami elgépelésnek látszik. Így a
 * törés mindig szóhatáron történik.
 */
.rsv-egyben { white-space: nowrap; }

.rsv-miazrsv__cta:hover {
    transform: translateY(-2px);
    background: var(--rsv-brand-bare);
    border-color: var(--rsv-brand-primary-hover);
    color: var(--rsv-brand-primary-hover);
    box-shadow: var(--rsv-arnyek-md);
}

.rsv-miazrsv__cta-jel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--rsv-radius-pill);
    background: var(--rsv-brand-soft);
    line-height: 0;
}

.rsv-miazrsv__cta-jel img { width: 28px; }

/*
 * A RÉTEGELT VIZUÁL KÁRTYÁJA.
 *
 * `overflow: hidden` — ez a clamp párja: a rétegek túllóghatnak a peremén, a
 * kártya pedig levágja őket, tehát sem a parallax, sem az idle mozgás nem
 * tudja kilátszani a forrásképek téglalap alakú dobozát (átadó §6.2).
 *
 * Mobilon a kártya közel négyzetes és van alsó magasságkorlátja: az átadó §8
 * kifejezetten tiltja, hogy a vizuál bélyegképpé zsugorodjon (min. 300–360 px
 * 390 px széles nézeten).
 */
.rsv-miazrsv__vizual {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    aspect-ratio: 106 / 100;
    min-height: 320px;
    /*
     * MIÉRT KELL A `min-width: 0`?
     *
     * A vizuál rács-elemként ül a panelben, ahol a `min-width` alapértéke
     * `auto`. Ilyenkor az `aspect-ratio` a `min-height`-ból SZÉLESSÉGET is
     * kényszerít (320 × 1.06 = 339 px), és ez 430 px alatt szélesebb, mint a
     * panel belső doboza — a kártya jobbra kilógott, a bal oldalán pedig
     * nagyobb margó maradt. A `min-width: 0` feloldja ezt: a szélességet a
     * rács adja, a magasságot a `min-height`.
     *
     * A `width`/`max-width`/`margin-inline` együtt garantálja, hogy a kártya
     * pontosan a panel belső szélességét töltse ki, és mindkét oldalon a
     * panel paddingjével azonos levegő maradjon.
     */
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    border-radius: var(--rsv-radius-lg);
    background: linear-gradient(
        150deg,
        var(--rsv-brand-soft) 0%,
        var(--rsv-brand-bare) 58%,
        var(--rsv-brand-soft) 100%
    );
    box-shadow: inset 0 0 0 1px rgba(141, 69, 162, .08);
}

@media (min-width: 992px) {
    .rsv-miazrsv__vizual {
        aspect-ratio: 130 / 100;
        min-height: 0;
    }
}

/*
 * A három réteg. A `.rsv-reteg` alaposztály viszi a mozgás mechanikáját
 * (`--rsv-parallax-x/y`), itt csak az ELHELYEZÉS van — ugyanaz a rendszer,
 * mint a herónál, nem külön mozgásréteg.
 */
/*
 * Az ambient túllóg a kártyán, hogy a scroll-parallax legnagyobb kitérésénél
 * se látszódjon ki a széle. A túllógás mértéke a mozgás korlátjához igazodik
 * (függőlegesen a kártya 13%-a, vízszintesen 5.5%-a), nem több: minden extra
 * százalék fölöslegesen nagyobb képváltozatot kérne le.
 */
.rsv-miazrsv__reteg--ambient {
    inset: -15% -7%;
    z-index: 0;
}

.rsv-miazrsv__reteg--ambient img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .92;
}

/*
 * A tüdő a stabil vizuális fókusz: jobb oldalt, nagy méretben. Az elhelyezés
 * a jóváhagyott referenciából van visszamérve — a tüdő SEM jobbról, SEM
 * alulról nem lóghat a kártya peremébe (átadó §10: nincs levágott tüdőrész).
 */
.rsv-miazrsv__reteg--tudo {
    top: 11.7%;
    right: 1%;
    width: 60%;
    z-index: 1;
}

/*
 * A vírus az ELŐTÉR és az elsődleges mozgó elem: bal-középen domináns, de
 * szándékosan nem takarja el a tüdőt (átadó §5). A gömb jobb pereme a kártya
 * kb. 47%-ánál végződik, a tüdő pedig 45% körül kezdődik — a két elem így
 * éppen csak összeér, ahogy a referencián.
 */
.rsv-miazrsv__reteg--virus {
    top: 9%;
    left: 0;
    width: 61%;
    z-index: 2;
}

/*
 * Mobilon a kártya közel négyzetes, nem fekvő: ott a szélesség-alapú
 * arányok más függőleges lefedettséget adnak, ezért a két réteg saját
 * elhelyezést kap. Enélkül a tüdő alul-felül kilógna a kártyából.
 */
@media (max-width: 991px) {
    .rsv-miazrsv__reteg--tudo {
        top: 17%;
        right: 3%;
        width: 72%;
    }

    .rsv-miazrsv__reteg--virus {
        top: 20%;
        left: -2%;
        width: 62%;
    }
}


/* 11.8/b MOZGÁS — átadó §6
   --------------------------------------------------------------------------
   Négy réteg, mind a `no-preference` kapun belül:

     1. a vírus folyamatos idle lebegése (a leglátványosabb),
     2. az ambient réteg lassú sodródása,
     3. a scroll-parallax (a `publikus.js` adja, rétegenként eltérő aránnyal),
     4. a szakasz belépése.

   A scroll-parallax arányai a HTML-ben vannak, mert rétegenként eltérnek;
   hangolásukhoz nem kell CSS-t módosítani.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {

    /*
     * A projektgazda külön kérése, hogy a vírus mozgása SZEMMEL LÁTHATÓ
     * legyen, ne csak hosszú nézés után (átadó §6.1). Ezért a ciklus rövid
     * (9 s), az amplitúdó pedig a kért sáv felső felében van: kb. 15 px
     * függőlegesen, 8 px vízszintesen, 1.3 fok elfordulással.
     *
     * Az animáció a réteg KÉPÉN fut, nem a wrapperen — így nem ütközik a
     * wrapper parallax-transformjával.
     */
    .rsv-miazrsv__reteg--virus img {
        animation: rsv-miazrsv-virus 9s ease-in-out infinite;
    }

    /* Csak atmoszféra: lassú, nagy ciklus, alig érzékelhető nagyítással. */
    .rsv-miazrsv__reteg--ambient img {
        animation: rsv-miazrsv-ambient 30s ease-in-out infinite alternate;
    }

    /*
     * Belépés. A szöveg a közös `rsv-belepes` fade-uppal érkezik, a vizuál
     * viszont fade + finom nagyítással — és néhány tized másodperccel később
     * (a késleltetést a HTML adja). Nem „show animation" (átadó §6.4).
     */
    html.rsv-mozgas .rsv-miazrsv__vizual.rsv-belep--aktiv {
        animation-name: rsv-belepes-skala;
    }

    /* Mobilon kisebb amplitúdó: a kártya kisebb, ott a 15 px már ugrálna. */
    @media (max-width: 767px) {
        .rsv-miazrsv__reteg--virus img {
            animation-name: rsv-miazrsv-virus-mobil;
        }
    }
}

/* Kb. 15 px fel, 8 px oldalra, legfeljebb 1.3 fok — átadó §6.1. */
@keyframes rsv-miazrsv-virus {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
    25%  { transform: translate3d(4px, -8px, 0) rotate(.6deg); }
    50%  { transform: translate3d(8px, -15px, 0) rotate(1.3deg); }
    75%  { transform: translate3d(3px, -6px, 0) rotate(.5deg); }
    100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}

/* Ugyanaz a mozdulat, kisebb kitéréssel — kis kártyán ez a mértéktartó. */
@keyframes rsv-miazrsv-virus-mobil {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
    25%  { transform: translate3d(2px, -5px, 0) rotate(.4deg); }
    50%  { transform: translate3d(5px, -9px, 0) rotate(.8deg); }
    75%  { transform: translate3d(2px, -4px, 0) rotate(.3deg); }
    100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}

/* Ambient: lassú sodródás, nagyon finom nagyítással és fényerő-változással. */
@keyframes rsv-miazrsv-ambient {
    from { transform: translate3d(0, 0, 0) scale(1); opacity: .86; }
    to   { transform: translate3d(-2.4%, 1.6%, 0) scale(1.04); opacity: 1; }
}

/* Belépés vizuálhoz: fade + alig érzékelhető nagyítás (átadó §6.4). */
@keyframes rsv-belepes-skala {
    from { opacity: 0; transform: scale(.965); }
    to   { opacity: 1; transform: none; }
}


/* 11.9 „Miért kell komolyan venni?" — a főoldal 5. szakasza
   --------------------------------------------------------------------------
   Kanonikus forrás: `docs/RSVIRUS_KOCKAZAT_ATADO.md`; kötelező elsődleges
   vizuális referencia a csomag jóváhagyott képe (átadó §2).

   A korábbi `01 / 02 / 03` számozott megoldás elvetve: ikonos kártyák állnak
   a helyén, számok és nyilak nélkül.

   ÚJ SZÍN NEM KERÜLT A RENDSZERBE: minden érték a 2. szakasz tokenjeiből vagy
   azok `rgba()` alakjából jön. A csomag SVG-inek fix hexei `currentColor`-ra
   lettek cserélve, tehát az ikonok színe is tokenből származik (kézikönyv §21).
   -------------------------------------------------------------------------- */

/*
 * A szakasz FELSŐ pereme pontosan az előző blokk kifutó színe
 * (`--rsv-brand-soft`), az ALSÓ pereme pedig a következő blokk fehérje. Így
 * mindkét szekcióhatár lágy, és a szomszédokhoz nem kellett hozzányúlni
 * (átadó §10).
 */
.rsv-kockazat {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(72px, 8vw, 120px);
    background: linear-gradient(
        180deg,
        var(--rsv-brand-soft) 0%,
        var(--rsv-brand-bare) 26%,
        var(--rsv-brand-bare) 68%,
        var(--rsv-surface-card) 100%
    );
}

.rsv-kockazat__hatter {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.rsv-kockazat__burok { position: relative; }

/*
 * Fényhullám-réteg. Túllóg a szekció peremén, hogy a scroll-parallax
 * legnagyobb kitérésénél se látszódjon ki a széle.
 */
.rsv-kockazat__reteg--hullamok {
    inset: -12% -6%;
    z-index: 0;
}

.rsv-kockazat__reteg--hullamok img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .7;
}

/*
 * A KÉT VÍRUSMEZŐ — ugyanaz az asset, két maszkolt wrapperben (átadó §6).
 *
 * A wrapper a szekció bal, illetve jobb 40%-ára van vágva; a kép a wrapper
 * 250%-án ül, ami pontosan a szekció teljes szélessége. Így mindkét mező a
 * SAJÁT oldalának víruscsoportját mutatja, a kép szándékosan üres közepe pedig
 * sehol nem duplázódik — nem keletkezik látható ismétlődés a tartalom mögött.
 *
 * A belső perem maszkkal oldódik fel, hogy a 40%-os vágás ne legyen éles él.
 */
.rsv-kockazat__mezo {
    top: -8%;
    bottom: -8%;
    width: 40%;
    overflow: hidden;
    z-index: 1;
}

/*
 * Az `object-position` a KÜLSŐ peremhez rögzít. Enélkül a `cover` a kép két
 * széléből vágna egyenlően — épp azokat a víruscsoportokat, amelyekért a mező
 * egyáltalán létezik.
 */
.rsv-kockazat__mezo img {
    position: absolute;
    top: 0;
    /*
     * A `max-width: none` KELL: az alapréteg minden képre 100%-os felső
     * korlátot tesz, ami itt a wrapper szélességére vágná a képet — vagyis a
     * 250% sosem érvényesülne, és a `cover` a maradékot durván felnagyítaná.
     * A 250% pontosan a szekció teljes szélessége (a wrapper annak 40%-a).
     */
    max-width: none;
    width: 250%;
    height: 100%;
    object-fit: cover;
    /*
     * A háttér HÁTTÉR marad: a vírusok legyenek jól láthatók, de ne
     * versenyezzenek a szöveggel és a kártyákkal (átadó §11).
     */
    opacity: .6;
}

.rsv-kockazat__mezo--bal {
    left: 0;
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 0) 100%);
}

.rsv-kockazat__mezo--bal img {
    left: 0;
    object-position: 0% 50%;
}

.rsv-kockazat__mezo--jobb {
    right: 0;
    -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 0) 100%);
}

.rsv-kockazat__mezo--jobb img {
    right: 0;
    object-position: 100% 50%;
}

/* A címsor a referencia szerint BALRA rendezett, nem középre (átadó §4). */
.rsv-kockazat__fej {
    max-width: 720px;
    margin-bottom: clamp(var(--rsv-ter-7), 5vw, var(--rsv-ter-8));
}

.rsv-kockazat__fej > :last-child { margin-bottom: 0; }

/*
 * A rács: desktopon négy kártya egy sorban (három tartalmi + a statisztikai).
 * Amíg a statisztikai kártyához nincs jóváhagyott, forrásolt copy, a rács
 * HÁROM oszlopos — nem marad üres hely a sorban.
 */
.rsv-kockazat__racs {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(var(--rsv-ter-4), 2vw, var(--rsv-ter-6));
    align-items: stretch;
}

@media (min-width: 768px) {
    .rsv-kockazat__racs { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1200px) {
    .rsv-kockazat__racs { grid-template-columns: repeat(4, 1fr); }
    .rsv-kockazat__racs--harom { grid-template-columns: repeat(3, 1fr); }
}

/*
 * A KÁRTYÁK STABILAK: nem kapnak parallaxot és nincs folyamatos lebegésük —
 * a háttér mozog mögöttük, ettől lesz térérzet (átadó §7.3, §7.4).
 */
.rsv-kockazatkartya {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: clamp(var(--rsv-ter-5), 2.2vw, var(--rsv-ter-6));
    border-radius: var(--rsv-radius-lg);
    background: linear-gradient(
        158deg,
        var(--rsv-surface-card) 0%,
        var(--rsv-surface-card) 55%,
        var(--rsv-brand-bare) 100%
    );
    box-shadow:
        inset 0 0 0 1px rgba(141, 69, 162, .09),
        var(--rsv-arnyek-md);
    transition: transform .28s cubic-bezier(.22, .61, .36, 1), box-shadow .28s ease;
}

@media (hover: hover) {
    .rsv-kockazatkartya:hover {
        transform: translateY(-5px);
        box-shadow:
            inset 0 0 0 1px rgba(141, 69, 162, .18),
            var(--rsv-arnyek-lg);
    }
}

/*
 * Az ikonkorong a referencia szerint a kártya felső zónájában, KÖZÉPEN áll —
 * a szöveg alatta viszont balra rendezett.
 */
.rsv-kockazatkartya__korong {
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(84px, 6.6vw, 104px);
    aspect-ratio: 1;
    margin-bottom: clamp(var(--rsv-ter-5), 2vw, var(--rsv-ter-6));
    border-radius: var(--rsv-radius-pill);
    background: radial-gradient(
        circle at 34% 28%,
        var(--rsv-surface-card) 0%,
        var(--rsv-brand-soft) 72%,
        rgba(141, 69, 162, .12) 100%
    );
    box-shadow: inset 0 0 0 1px rgba(141, 69, 162, .12);
    color: var(--rsv-brand-primary);
    transition: transform .28s cubic-bezier(.22, .61, .36, 1);
}

.rsv-kockazatkartya__ikon { --ikon-meret: clamp(46px, 3.6vw, 58px); }

@media (hover: hover) {
    .rsv-kockazatkartya:hover .rsv-kockazatkartya__korong { transform: scale(1.04); }
}

/*
 * A figyelmeztető ikon a projekt SÜRGŐS tokenjét kapja. A csomag SVG-je egy
 * korall hexet vitt; azt nem vezettük be a rendszerbe (kézikönyv §21), a
 * funkcionális piros jelzés viszont — az átadó §5 szerint — megmarad.
 */
.rsv-kockazatkartya--figyelem .rsv-kockazatkartya__korong { color: var(--rsv-urgent); }

.rsv-kockazatkartya__cim {
    font-size: var(--rsv-meret-h4);
    font-weight: 700;
    line-height: 1.3;
    color: var(--rsv-brand-dark);
    margin: 0 0 var(--rsv-ter-3);
}

.rsv-kockazatkartya__leiras {
    font-size: var(--rsv-meret-kicsi);
    line-height: 1.6;
    color: var(--rsv-text-secondary);
    margin: 0;
}

/* A statisztikai kártya — finom levendula, a szám a domináns elem. */
.rsv-kockazatkartya--szam {
    background: linear-gradient(
        158deg,
        var(--rsv-brand-soft) 0%,
        var(--rsv-brand-bare) 62%,
        var(--rsv-brand-soft) 100%
    );
    box-shadow:
        inset 0 0 0 1px rgba(141, 69, 162, .16),
        var(--rsv-arnyek-md);
}

.rsv-kockazatkartya__cimke {
    font-weight: 700;
    color: var(--rsv-brand-primary);
    margin-bottom: var(--rsv-ter-3);
}

.rsv-kockazatkartya__ertek {
    font-size: clamp(3rem, 4.4vw, 4.25rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--rsv-brand-primary);
    margin: 0 0 var(--rsv-ter-4);
}

.rsv-kockazatkartya__forras {
    margin: auto 0 0;
    padding-top: var(--rsv-ter-4);
    font-size: var(--rsv-meret-meta);
    color: var(--rsv-text-secondary);
}

.rsv-kockazatkartya__forras a { color: var(--rsv-brand-primary); }

/* Záró útvonal — szöveges link, chevron NÉLKÜL (átadó §9). */
.rsv-kockazat__labjegyzet { margin-top: clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-7)); }

.rsv-kockazat__link {
    font-weight: 600;
    color: var(--rsv-brand-primary);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
}

.rsv-kockazat__link:hover { color: var(--rsv-brand-primary-hover); }


/* 11.9/b MOZGÁS — átadó §7
   --------------------------------------------------------------------------
   A HÁTTÉR mozog, a kártyák állnak. Négy réteg, mind a `no-preference` kapun
   belül:

     1. bal vírusmező  — vízszintes sodródás, 13 s;
     2. jobb vírusmező — ELTÉRŐ fázis és irány, 16 s;
     3. fényhullámok   — lassú, nagy ciklus;
     4. belépés        — a közös `data-rsv-belep` réteg, staggerelve.

   A NEGATÍV `animation-delay` azért kell, mert az `alternate` a ciklus két
   végén a leglassabb: enélkül a látogató épp a holtponton érkezne, és az első
   másodpercekben állni látszana a háttér.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {

    /*
     * A lágyabb görbe SZÁNDÉKOS: a sima `ease-in-out` a ciklus két végén
     * majdnem megállítja a réteget, és ha a látogató épp ott érkezik, az első
     * másodpercekben állni látszik a háttér. Ez a görbe végig tart egy
     * érzékelhető sebességet, ugyanazzal az amplitúdóval.
     */
    .rsv-kockazat__mezo--bal img {
        animation: rsv-kockazat-bal 12s cubic-bezier(.4, .05, .6, .95) -4s infinite alternate;
    }

    .rsv-kockazat__mezo--jobb img {
        animation: rsv-kockazat-jobb 15s cubic-bezier(.4, .05, .6, .95) -9s infinite alternate;
    }

    .rsv-kockazat__reteg--hullamok img {
        animation: rsv-kockazat-hullam 28s ease-in-out -7s infinite alternate;
    }

    /* Mobilon kisebb amplitúdó (átadó §8: kb. 60–75%). */
    @media (max-width: 767px) {
        .rsv-kockazat__mezo--bal img { animation-name: rsv-kockazat-bal-mobil; }
        .rsv-kockazat__mezo--jobb img { animation-name: rsv-kockazat-jobb-mobil; }
    }
}

/* Bal mező: −18 → +16 px vízszintes, −5 → +7 px függőleges (átadó §7.1). */
@keyframes rsv-kockazat-bal {
    from { transform: translate3d(-18px, -5px, 0) rotate(-.5deg); }
    to   { transform: translate3d(16px, 7px, 0) rotate(.5deg); }
}

/* Jobb mező: +22 → −14 px vízszintes, +6 → −6 px függőleges (átadó §7.2). */
@keyframes rsv-kockazat-jobb {
    from { transform: translate3d(22px, 6px, 0) rotate(.4deg); }
    to   { transform: translate3d(-14px, -6px, 0) rotate(-.4deg); }
}

/* Ugyanaz a mozdulat, kb. 65%-os kitéréssel — kis képernyőre (átadó §8). */
@keyframes rsv-kockazat-bal-mobil {
    from { transform: translate3d(-12px, -3px, 0) rotate(-.3deg); }
    to   { transform: translate3d(10px, 5px, 0) rotate(.3deg); }
}

@keyframes rsv-kockazat-jobb-mobil {
    from { transform: translate3d(14px, 4px, 0) rotate(.25deg); }
    to   { transform: translate3d(-9px, -4px, 0) rotate(-.25deg); }
}

/* Fényhullámok: csak atmoszféra — lassú sodródás, alig érzékelhető nagyítással. */
@keyframes rsv-kockazat-hullam {
    from { transform: translate3d(0, 0, 0) scale(1); opacity: .8; }
    to   { transform: translate3d(-1.8%, 1.2%, 0) scale(1.04); opacity: .95; }
}


/* 11.10 „Tünetek és figyelmeztető jelek" — a főoldal 6. szakasza
   --------------------------------------------------------------------------
   Kanonikus forrás: `RSVIRUS_CLAUDE_TUNETEK_v1.0/docs/RSVIRUS_TUNETEK_ATADO.md`;
   kötelező elsődleges vizuális referencia a csomag jóváhagyott preview-ja.

   KÉT NAGY KÁRTYA (átadó §3.2). A korábbi „bal szöveg + jobb kép + alatta egy
   teljes szélességű alert-panel" megoldás elvetve.

   ÚJ SZÍN NEM KERÜLT A RENDSZERBE: minden érték a 2. szakasz tokenjeiből, azok
   `color-mix()` keverékéből vagy `rgba()` alakjából jön (kézikönyv §21). A
   halvány rózsás kártyaháttér a `--rsv-urgent` néhány százalékos keveréke —
   ugyanaz az elv, mint az `.rsv-alert--surgos` panelnél.

   SZEKCIÓHATÁR: a szakasz teteje FEHÉR, mert az előző blokk (kockázat) épp
   fehérbe fut ki; az alja `--rsv-brand-bare`, mert a következő szakasz
   (lefolyás) azon a háttéren ül. Így egyik szomszédhoz sem kellett hozzányúlni.
   -------------------------------------------------------------------------- */

.rsv-tunetek {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(72px, 8vw, 120px);
    background: linear-gradient(
        180deg,
        var(--rsv-surface-card) 0%,
        var(--rsv-brand-bare) 30%,
        var(--rsv-brand-bare) 70%,
        var(--rsv-brand-bare) 100%
    );
}

.rsv-tunetek__hatter {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.rsv-tunetek__burok { position: relative; }

/*
 * A szekció víruspartikula-rétege. Túllóg a peremen, hogy a scroll-parallax
 * legnagyobb kitérésénél se látszódjon ki a széle. Halvány: ez atmoszféra,
 * nem tartalom — az átadó §6 kifejezetten kéri, hogy a háttérdekoráció ne
 * nyomja agyon a szöveget.
 */
.rsv-tunetek__reteg--partikula {
    inset: -12% -6%;
    z-index: 0;
}

.rsv-tunetek__reteg--partikula img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    opacity: .3;
}

.rsv-tunetek__fej > :last-child { margin-bottom: 0; }

/*
 * A KÉT KÁRTYA RÁCSA. 992 px-től egymás mellett, alatta egymás alatt (átadó
 * §3.4). A `stretch` azért kell, hogy a két kártya azonos magas legyen: a
 * jobb oldali listája hosszabb, enélkül lépcsőznének.
 */
.rsv-tunetek__racs {
    display: grid;
    gap: clamp(var(--rsv-ter-5), 2.2vw, var(--rsv-ter-6));
    align-items: stretch;
}

@media (min-width: 992px) {
    .rsv-tunetek__racs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 11.10/b A kártya
   -------------------------------------------------------------------------- */

.rsv-tunetkartya {
    display: flex;
    flex-direction: column;
    gap: clamp(var(--rsv-ter-4), 1.8vw, var(--rsv-ter-5));
    padding: clamp(var(--rsv-ter-5), 2.4vw, var(--rsv-ter-7));
    border-radius: var(--rsv-radius-lg);
    box-shadow: var(--rsv-arnyek-md);
}

.rsv-tunetkartya--gyakori {
    background: linear-gradient(
        158deg,
        var(--rsv-surface-card) 0%,
        var(--rsv-brand-bare) 52%,
        var(--rsv-brand-soft) 100%
    );
    box-shadow: var(--rsv-arnyek-md), inset 0 0 0 1px rgba(141, 69, 162, .10);
}

.rsv-tunetkartya--jelek {
    background: linear-gradient(
        158deg,
        var(--rsv-surface-card) 0%,
        color-mix(in srgb, var(--rsv-urgent) 4%, var(--rsv-surface-card)) 52%,
        color-mix(in srgb, var(--rsv-urgent) 9%, var(--rsv-surface-card)) 100%
    );
    box-shadow: var(--rsv-arnyek-md), inset 0 0 0 1px rgba(165, 48, 69, .12);
}

/* Kártyafej: korong + cím egy sorban. */
.rsv-tunetkartya__fej {
    display: flex;
    align-items: center;
    gap: clamp(var(--rsv-ter-3), 1.2vw, var(--rsv-ter-4));
}

.rsv-tunetkartya__korong {
    flex: none;
    display: grid;
    place-items: center;
    width: clamp(48px, 3.6vw, 58px);
    height: clamp(48px, 3.6vw, 58px);
    border-radius: 50%;
    background: var(--rsv-surface-card);
    box-shadow: var(--rsv-arnyek-sm);
}

.rsv-tunetkartya__ikon { --ikon-meret: clamp(22px, 1.7vw, 26px); }

.rsv-tunetkartya--gyakori .rsv-tunetkartya__korong {
    color: var(--rsv-brand-secondary);
    box-shadow: var(--rsv-arnyek-sm), inset 0 0 0 1px rgba(141, 69, 162, .16);
}

.rsv-tunetkartya--jelek .rsv-tunetkartya__korong {
    color: var(--rsv-urgent);
    box-shadow: var(--rsv-arnyek-sm), inset 0 0 0 1px rgba(165, 48, 69, .18);
}

.rsv-tunetkartya__cim {
    margin: 0;
    font-size: var(--rsv-meret-h3);
    font-weight: 700;
    line-height: var(--rsv-sormagassag-cim);
}

.rsv-tunetkartya--gyakori .rsv-tunetkartya__cim { color: var(--rsv-brand-secondary); }
.rsv-tunetkartya--jelek   .rsv-tunetkartya__cim { color: var(--rsv-urgent); }

/*
 * A TÖRZS — lista + illusztráció.
 *
 * A `flex: 1` azért kell, hogy a rövidebb listájú kártyában a törzs kitöltse a
 * maradék helyet, és a CTA a kártya aljára kerüljön: a két kártya alsó pereme
 * így egy vonalban marad.
 *
 * A kártyán belüli KÉTOSZLOPOS elrendezés csak ott kapcsol be, ahol a kártya
 * tényleg elég széles hozzá:
 *   - 768–991 px: a két kártya még egymás ALATT áll, tehát mindegyik a teljes
 *     szélességet kapja — bőven elfér a lista mellett az illusztráció;
 *   - 992–1199 px: a kártyák már egymás MELLETT vannak, ott a kártya belseje
 *     kb. 400 px. Ott a kétoszlopos elrendezés mindkét oldalt agyonnyomná,
 *     ezért ott a lista fölött ül az illusztráció;
 *   - 1200 px-től: újra elég széles a kártya a két oszlophoz.
 */
.rsv-tunetkartya__torzs {
    flex: 1;
    display: grid;
    gap: clamp(var(--rsv-ter-4), 2vw, var(--rsv-ter-6));
    align-items: center;
}

/*
 * A KÉT KÁRTYA BELSŐ ARÁNYA ELTÉR, és ez szándékos — a preview is így osztja:
 *
 *   - a BAL kártyán rövid a lista (6 tétel), ott az illusztrációé a nagyobb
 *     hely: a köhögő kislány a blokk érzelmi horgonya;
 *   - a JOBB kártyán nyolc figyelmeztető jel áll, és azok OLVASHATÓSÁGA
 *     előrébb való a tüdő méreténél (ORVOSI §10). Ott a lista kap többet.
 */
@media (min-width: 768px) and (max-width: 991.98px) {
    .rsv-tunetkartya--gyakori .rsv-tunetkartya__torzs {
        grid-template-columns: minmax(0, .92fr) minmax(0, 1.18fr);
    }

    .rsv-tunetkartya--jelek .rsv-tunetkartya__torzs {
        grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    }
}

@media (min-width: 1200px) {
    .rsv-tunetkartya--gyakori .rsv-tunetkartya__torzs {
        grid-template-columns: minmax(0, .92fr) minmax(0, 1.18fr);
    }

    .rsv-tunetkartya--jelek .rsv-tunetkartya__torzs {
        grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    }
}

/*
 * Kétoszlopos módban a kompozíció a kártya teljes MAGASSÁGÁT megkapja: az
 * `aspect-ratio` helyett a rács nyújtja. Enélkül a doboz négyzetes maradt, és
 * a rövidebb listájú bal kártyában nagy üres sáv keletkezett alatta-fölötte.
 */
@media (min-width: 768px) and (max-width: 991.98px), (min-width: 1200px) {
    .rsv-tunetkartya__vizual {
        align-self: stretch;
        aspect-ratio: auto;
        min-height: 260px;
        max-width: none;
    }
}

/* 11.10/c Az illusztráció kompozíciója
   --------------------------------------------------------------------------
   A doboz `overflow: hidden` — ez a rétegmozgás párja: a rétegek túllóghatnak
   a peremén, a doboz pedig levágja őket, tehát sem a parallax, sem az idle
   sodródás nem tudja kilátszani a forrásképek téglalap alakú dobozát.

   A `min-width: 0` KÖTELEZŐ: a doboz rácselemként ül, ahol a `min-width`
   alapértéke `auto`, és az `aspect-ratio` a magasságból SZÉLESSÉGET is
   kényszerítene — pontosan ettől csúszott ki korábban a „Mi az RSV?" vizuálja
   mobilon.
   -------------------------------------------------------------------------- */
.rsv-tunetkartya__vizual {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    max-width: 420px;
    margin-inline: auto;
    aspect-ratio: 1 / 1;
    border-radius: var(--rsv-radius-lg);
}

/* A gyermek, illetve a tüdő rétege. Nem mozog a helyéről: ő a stabil fókusz. */
.rsv-tunetkartya__alak {
    position: absolute;
    inset: 0;
    z-index: 1;
    line-height: 0;
}

.rsv-tunetkartya__alak img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* A tüdő valamivel kisebb a dobozban: körülötte marad levegő a fényudvarnak. */
.rsv-tunetkartya__alak--tudo { inset: 7%; }

/*
 * A KÉT VÍRUSMEZŐ — ugyanaz az asset, a gyermek MÖGÖTT és ELŐTT.
 *
 * Ez a kockázat-blokk bevált mintája: egyetlen raster assetből két, eltérő
 * fázisú és irányú mozgó réteg. Így a gyermek körül valóban van mélység, és
 * nem kellett új képet gyártani.
 *
 * A `max-width: none` NEM elhagyható: a globális `img { max-width: 100% }`
 * (§3) egyébként csendben a wrapper szélességére vágná a képet, és a `cover`
 * a maradékot durván felnagyítaná.
 */
.rsv-tunetkartya__mezo {
    overflow: hidden;
    line-height: 0;
    pointer-events: none;
}

.rsv-tunetkartya__mezo img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

/* A hátsó mező tölti ki a hátteret: nagyobb túllógás, magasabb átlátszatlanság. */
.rsv-tunetkartya__mezo--hatso {
    inset: -20% -14%;
    z-index: 0;
}

.rsv-tunetkartya__mezo--hatso img { opacity: .8; }

/*
 * Az ELÜLSŐ mező a gyermek ELŐTT úszik — ettől lesz a mozgás valódi térbeli, és
 * nem síkban csúszó háttér. A közepét radiális maszk vágja ki, hogy a gyermek
 * arca és teste tiszta maradjon: elöl csak a kompozíció peremén haladnak át
 * részecskék. A maszk nélkül a mező eltakarná az arcot.
 */
.rsv-tunetkartya__mezo--elso {
    inset: -16% -10%;
    z-index: 2;
    -webkit-mask-image: radial-gradient(
        ellipse 56% 60% at 50% 48%,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) 54%,
        rgba(0, 0, 0, 1) 100%
    );
    mask-image: radial-gradient(
        ellipse 56% 60% at 50% 48%,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) 54%,
        rgba(0, 0, 0, 1) 100%
    );
}

.rsv-tunetkartya__mezo--elso img { opacity: .62; }

/*
 * A tüdő mögötti fényudvar. Nem kép, hanem tokenből kevert gradiens, és a
 * tüdővel AZONOS ütemben pulzál — így a lélegzés organikusnak hat, nem pedig
 * két külön mozgásnak.
 */
.rsv-tunetkartya__fenyudvar {
    position: absolute;
    inset: 10%;
    z-index: 0;
    border-radius: 50%;
    background: radial-gradient(
        circle at 50% 50%,
        color-mix(in srgb, var(--rsv-urgent) 22%, transparent) 0%,
        color-mix(in srgb, var(--rsv-urgent) 10%, transparent) 46%,
        transparent 72%
    );
}

/* 11.10/d A kártya alsó elemei
   -------------------------------------------------------------------------- */

/*
 * Note strip a bal kártya alján. A jóváhagyott preview része, de MOST NEM
 * JELENIK MEG: forrásolt copy hiányában a tartalomfájl `jegyzet.keszen`
 * kapcsolója `false` (ORVOSI §15, CLAUDE.md §20). A stílus azért van kész,
 * hogy a bekapcsoláshoz csak a szöveget kelljen megadni.
 */
.rsv-tunetkartya__jegyzet {
    display: flex;
    gap: var(--rsv-ter-3);
    padding: var(--rsv-ter-4);
    border-radius: var(--rsv-radius-md);
    background: rgba(255, 255, 255, .62);
    box-shadow: inset 0 0 0 1px rgba(141, 69, 162, .12);
}

.rsv-tunetkartya__jegyzet p {
    margin: 0;
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
}

.rsv-tunetkartya__jegyzet strong { color: var(--rsv-brand-dark); }
.rsv-tunetkartya__jegyzetikon { --ikon-meret: 20px; flex: none; margin-top: 3px; color: var(--rsv-brand-secondary); }

/*
 * A CTA a kártya alján, elválasztó vonal fölött — a preview mintájára. A
 * vonal dekoratív, ezért maradhat a `--rsv-border-default`.
 */
.rsv-tunetkartya__lab {
    padding-top: clamp(var(--rsv-ter-4), 1.6vw, var(--rsv-ter-5));
    border-top: 1px solid rgba(165, 48, 69, .16);
}

/* 11.10/e Alsó megnyugtató sáv — átadó §3.3
   -------------------------------------------------------------------------- */

.rsv-tunetek__helper {
    display: flex;
    align-items: center;
    gap: clamp(var(--rsv-ter-3), 1.4vw, var(--rsv-ter-5));
    margin-top: clamp(var(--rsv-ter-5), 2.4vw, var(--rsv-ter-6));
    padding: clamp(var(--rsv-ter-4), 1.8vw, var(--rsv-ter-5)) clamp(var(--rsv-ter-4), 2.2vw, var(--rsv-ter-6));
    border-radius: var(--rsv-radius-lg);
    background: rgba(255, 255, 255, .72);
    box-shadow: var(--rsv-arnyek-sm), inset 0 0 0 1px rgba(141, 69, 162, .12);
}

.rsv-tunetek__helperikon {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--rsv-brand-soft);
    color: var(--rsv-brand-primary);
    --ikon-meret: 22px;
}

.rsv-tunetek__helperszoveg {
    margin: 0;
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
}

/* 11.10/f MOZGÁS — átadó §4
   --------------------------------------------------------------------------
   Öt réteg, MIND a `prefers-reduced-motion: no-preference` kapun belül. Ha a
   látogató mozgáscsökkentést kért, minden folyamatos mozgás elmarad, és a
   tartalom teljes értékű marad (átadó §4.4).

     1. hátsó vírusmező  — sodródás a gyermek MÖGÖTT, 16 s;
     2. elülső vírusmező — ELTÉRŐ fázis, irány és sebesség, 21 s;
     3. a tüdő lélegzése — finom scale, 5.5 s;
     4. a fényudvar      — a tüdővel AZONOS ütemben pulzál;
     5. belépés          — a közös `data-rsv-belep` réteg, staggerelve.

   A gyermek alakja SZÁNDÉKOSAN mozdulatlan: ő a stabil vizuális fókusz, a
   mozgás körülötte történik. Egy lebegő gyermekalak nyugtalan lenne, és a
   blokk komoly, megnyugtató hangját is elrontaná.

   A NEGATÍV `animation-delay` azért kell, mert az `alternate` a ciklus két
   végén a leglassabb: enélkül a látogató épp a holtponton érkezne, és az első
   másodpercekben állni látszana a mozgás. Az átadó §4.1 kifejezetten kéri,
   hogy 2–3 másodpercen belül észrevehető legyen a mozgás.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {

    /*
     * A CIKLUSHOSSZ ÉS A NEGATÍV KÉSLELTETÉS EGYÜTT MÉRT ÉRTÉK.
     *
     * Az átadó §4.1 azt kéri, hogy 2–3 másodpercen belül észrevehető legyen a
     * mozgás. Az első hangolásnál (16 s / 21 s, −5 s / −13 s) az elülső mező
     * 5,1 s-ig nem ért el 3 px kitérést: a −13 s épp a félciklus lassuló
     * végére esett. A késleltetés most mindkét mezőnél a görbe GYORS
     * szakaszára mutat (a félciklus 31, illetve 47 százalékára), és a ciklus
     * is rövidebb. Mért eredmény: 1,2 s és 1,4 s.
     */
    .rsv-tunetkartya__mezo--hatso img {
        animation: rsv-tunetek-hatso 13s cubic-bezier(.4, .05, .6, .95) -4s infinite alternate;
    }

    .rsv-tunetkartya__mezo--elso img {
        animation: rsv-tunetek-elso 17s cubic-bezier(.4, .05, .6, .95) -8s infinite alternate;
    }

    /*
     * A LÉLEGZÉS. Az átadó §4.2 sávja 1.00 → 1.04/1.05, 4.5–6 s, ease-in-out.
     * A belégzés valamivel gyorsabb, mint a kilégzés (a 45%-os kulcskocka),
     * mert így nem gépszerű a ritmus.
     */
    .rsv-tunetkartya__alak--tudo img {
        animation: rsv-tunetek-legzes 5.5s ease-in-out infinite;
    }

    .rsv-tunetkartya__fenyudvar {
        animation: rsv-tunetek-fenyudvar 5.5s ease-in-out infinite;
    }

    /* A vizuál fade + alig érzékelhető nagyítással érkezik, nem „show"-val. */
    html.rsv-mozgas .rsv-tunetkartya.rsv-belep--aktiv { animation-name: rsv-belepes; }

    /* Mobilon kisebb amplitúdó: a kompozíció feleakkora, ott ugyanaz ugrálna. */
    @media (max-width: 767px) {
        .rsv-tunetkartya__mezo--hatso img { animation-name: rsv-tunetek-hatso-mobil; }
        .rsv-tunetkartya__mezo--elso img  { animation-name: rsv-tunetek-elso-mobil; }
    }
}

/* Hátsó mező: −14 → +13 px vízszintes, −6 → +6 px függőleges. */
@keyframes rsv-tunetek-hatso {
    from { transform: translate3d(-14px, -6px, 0) scale(1) rotate(-.4deg); }
    to   { transform: translate3d(13px, 6px, 0) scale(1.03) rotate(.4deg); }
}

/* Elülső mező: ellentétes irány, nagyobb kitérés — ez úszik a néző felé. */
@keyframes rsv-tunetek-elso {
    from { transform: translate3d(17px, 8px, 0) scale(1.02) rotate(.7deg); }
    to   { transform: translate3d(-16px, -9px, 0) scale(1) rotate(-.7deg); }
}

/* Ugyanaz a mozdulat, kb. 65%-os kitéréssel — kis képernyőre. */
@keyframes rsv-tunetek-hatso-mobil {
    from { transform: translate3d(-9px, -4px, 0) scale(1) rotate(-.25deg); }
    to   { transform: translate3d(8px, 4px, 0) scale(1.02) rotate(.25deg); }
}

@keyframes rsv-tunetek-elso-mobil {
    from { transform: translate3d(11px, 5px, 0) scale(1.015) rotate(.45deg); }
    to   { transform: translate3d(-10px, -6px, 0) scale(1) rotate(-.45deg); }
}

/* Lélegzés: 1.00 → 1.045 → 1.00, a belégzés rövidebb (átadó §4.2). */
@keyframes rsv-tunetek-legzes {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.045); }
    100% { transform: scale(1); }
}

/* A fényudvar VELE együtt tágul és világosodik — egyetlen közös lélegzet. */
@keyframes rsv-tunetek-fenyudvar {
    0%   { transform: scale(1); opacity: .75; }
    45%  { transform: scale(1.07); opacity: 1; }
    100% { transform: scale(1); opacity: .75; }
}

/* 11.10/g Sürgős CTA-gomb
   --------------------------------------------------------------------------
   A „Mikor fordulj orvoshoz?" gomb a preview szerint tömör, figyelmeztető
   színű. A `--rsv-urgent` fehér szöveggel 6.76 : 1 — WCAG AA felett. Nyilat
   NEM kap: a dekoratív jobbra mutató nyíl több szakaszon átívelő projektgazdai
   döntés alapján nincs a publikus kimenetben.
   -------------------------------------------------------------------------- */
.rsv-gomb--surgos {
    background: var(--rsv-urgent);
    border-color: var(--rsv-urgent);
    color: var(--rsv-surface-card);
}

.rsv-gomb--surgos:hover,
.rsv-gomb--surgos:focus {
    background: color-mix(in srgb, var(--rsv-urgent) 82%, var(--rsv-brand-dark));
    border-color: color-mix(in srgb, var(--rsv-urgent) 82%, var(--rsv-brand-dark));
    color: var(--rsv-surface-card);
}


/* 11.11 „Koraszülöttek és RSV" — a főoldal 10. szakasza
   --------------------------------------------------------------------------
   Kanonikus forrás: `docs/RSVIRUS_KORASZULOTTEK_ATADO.md`; kötelező elsődleges
   vizuális referencia a csomag jóváhagyott mockupja.

   KIEMELT „VÍZVÁLASZTÓ" SZAKASZ (átadó §1): teljes szélességű, hangsúlyos
   panel — nem középre zárt kis doboz. Saját, 1560 px-es burkot kap, mint a
   terjedés-szakasz.

   A KÉT FÉL KÖZÖTT DIAGONÁLIS, LÁGY ÁTMENET van (átadó §2), nem kemény
   függőleges vonal. Az átmenetet MASZK adja, nem beégetett kép: így a ferde
   él a panel bármely méreténél lágy marad, a kép maga pedig vágatlan.

   ÚJ SZÍN NEM KERÜLT A RENDSZERBE: minden érték a 2. szakasz tokenjeiből vagy
   azok `rgba()` alakjából jön.
   -------------------------------------------------------------------------- */

.rsv-koraszulottek {
    background: var(--rsv-surface-card);
    padding-block: clamp(56px, 6vw, 96px);
}

.rsv-burok--koraszulottek {
    max-width: calc(1560px + 2 * var(--rsv-oldalmargo));
}

/*
 * A PANEL. `overflow: hidden` — ez a diagonális maszk párja: a vizuál
 * túllóghat a peremén, a panel pedig levágja, tehát sem a maszk, sem a
 * vírusmezők driftje nem tudja kilátszani a rétegek téglalap alakú dobozát.
 */
.rsv-koraszulottek__panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    border-radius: clamp(var(--rsv-radius-lg), 2vw, 32px);
    background: linear-gradient(
        120deg,
        var(--rsv-brand-soft) 0%,
        var(--rsv-brand-bare) 42%,
        var(--rsv-surface-card) 72%,
        var(--rsv-surface-card) 100%
    );
    box-shadow: var(--rsv-arnyek-lg), inset 0 0 0 1px rgba(141, 69, 162, .1);
}

@media (min-width: 992px) {
    .rsv-koraszulottek__panel {
        grid-template-columns: 56fr 44fr;
        align-items: center;
    }
}

/* 11.11/b A vizuál és a diagonális átmenet
   -------------------------------------------------------------------------- */

.rsv-koraszulottek__vizual {
    position: relative;
    isolation: isolate;
    min-width: 0;
    line-height: 0;

    /*
     * A DIAGONÁLIS ÁTMENET.
     *
     * Mobilon a kép ALSÓ éle fut ki lágyan a szöveg felé (a két rész egymás
     * alatt van), desktopon viszont a JOBB éle, ferdén — ott a két fél
     * egymás mellett áll. A `mask-composite` nélkül, egyetlen gradienssel
     * oldjuk meg: a szög maga adja a diagonálist.
     */
    -webkit-mask-image: linear-gradient(
        180deg,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 1) 76%,
        rgba(0, 0, 0, 0) 100%
    );
    mask-image: linear-gradient(
        180deg,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 1) 76%,
        rgba(0, 0, 0, 0) 100%
    );
}

@media (min-width: 992px) {
    .rsv-koraszulottek__vizual {
        /*
         * 104 fok: enyhén jobbra dőlő él, ahogy a mockupon. A kifutás a
         * kép 62%-ánál kezdődik és a 96%-ánál ér véget — elég hosszú
         * szakasz ahhoz, hogy sehol ne legyen látható él.
         */
        -webkit-mask-image: linear-gradient(
            104deg,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 1) 62%,
            rgba(0, 0, 0, 0) 96%
        );
        mask-image: linear-gradient(
            104deg,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 1) 62%,
            rgba(0, 0, 0, 0) 96%
        );

        /*
         * A vizuál BENYÚLIK a szövegoldal alá: enélkül a ferde kifutás már a
         * rácshatár előtt véget érne, és a két fél között mégis maradna egy
         * függőleges „üres sáv". A szöveg z-indexe magasabb, ezért olvasható
         * marad.
         */
        margin-right: -14%;
    }
}

.rsv-koraszulottek__baba {
    position: relative;
    z-index: 1;
    line-height: 0;
}

.rsv-koraszulottek__baba img {
    display: block;
    width: 100%;
    height: auto;
}

/*
 * A KÉT VÍRUSMEZŐ. Ugyanaz az asset kétszer: az overlay pontosan két nagy
 * vírust tartalmaz — bal felül és jobb alul —, ezért mindkét mező a saját
 * negyedére van vágva, és a kép a wrapperen belül akkorára nagyítva, hogy
 * pontosan az a vírus látszódjon benne.
 *
 * Így a két vírus KÜLÖN ritmusban lebeg; egyetlen rétegen az egész mező
 * együtt csúszna, ami képtáblának hatna.
 */
.rsv-koraszulottek__mezo {
    position: absolute;
    overflow: hidden;
    line-height: 0;
    pointer-events: none;
    z-index: 2;
}

.rsv-koraszulottek__mezo img {
    position: absolute;
    max-width: none;
    height: auto;
}

/* Bal felső vírus: a doboz bal 58%-a, felső 62%-a. */
.rsv-koraszulottek__mezo--bal {
    inset: 0 42% 38% 0;
}

.rsv-koraszulottek__mezo--bal img {
    top: 0;
    left: 0;
    width: 172.4%;                      /* 100 / 0.58 */
}

/* Jobb alsó vírus: a doboz jobb 55%-a, alsó 62%-a. */
.rsv-koraszulottek__mezo--jobb {
    inset: 38% 0 0 45%;
}

.rsv-koraszulottek__mezo--jobb img {
    bottom: 0;
    right: 0;
    width: 181.8%;                      /* 100 / 0.55 */
}

/* 11.11/c A szövegoldal
   -------------------------------------------------------------------------- */

.rsv-koraszulottek__torzs {
    position: relative;
    z-index: 3;                          /* a benyúló vizuál FÖLÖTT */
    min-width: 0;
    padding: clamp(var(--rsv-ter-5), 3.5vw, var(--rsv-ter-8));
}

@media (min-width: 992px) {
    .rsv-koraszulottek__torzs {
        padding-block: clamp(var(--rsv-ter-7), 5vw, 80px);
        padding-inline: clamp(var(--rsv-ter-6), 3vw, var(--rsv-ter-8)) clamp(var(--rsv-ter-6), 4vw, 72px);
    }
}

/*
 * A szemöldök alatt és a H2 alatt egy-egy rövid akcentusvonal áll — a mockup
 * eleme. Dekoratív, ezért pszeudóelem: a jelentést a szöveg hordozza.
 */
.rsv-koraszulottek__torzs .rsv-szemoldok { display: block; }

.rsv-koraszulottek__torzs .rsv-szemoldok::after,
.rsv-koraszulottek__torzs h2::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin-top: var(--rsv-ter-3);
    border-radius: var(--rsv-radius-pill);
    background: var(--rsv-brand-secondary);
    opacity: .55;
}

.rsv-koraszulottek__torzs h2 { margin-bottom: 0; }

.rsv-koraszulottek__torzs h2::after {
    margin-bottom: clamp(var(--rsv-ter-4), 2vw, var(--rsv-ter-5));
    opacity: .75;
}

.rsv-koraszulottek__bekezdes {
    max-width: 46ch;
    color: var(--rsv-text-secondary);
}

.rsv-koraszulottek__bekezdes:last-of-type { margin-bottom: 0; }

/* 11.11/d A két útvonal
   --------------------------------------------------------------------------
   Nyíl NÉLKÜL (lásd a szakasz sablonjának indoklását). A vezető ikon marad:
   az jelentést hordoz — pajzs = védelem, naptár = szezonra készülés.
   -------------------------------------------------------------------------- */

.rsv-koraszulottek__utak {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(var(--rsv-ter-4), 2vw, var(--rsv-ter-6));
    margin-top: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-7));
}

.rsv-koraszulottek__cta .ikon { --ikon-meret: 20px; }

.rsv-koraszulottek__link {
    display: inline-flex;
    align-items: center;
    gap: var(--rsv-ter-2);
    min-height: 44px;                    /* kényelmes érintési cél */
    font-weight: 600;
    color: var(--rsv-brand-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--rsv-border-interaktiv);
    padding-bottom: 2px;
    transition: color .18s ease, border-color .18s ease;
}

.rsv-koraszulottek__link .ikon { --ikon-meret: 18px; }

.rsv-koraszulottek__link:hover,
.rsv-koraszulottek__link:focus {
    color: var(--rsv-brand-primary-hover);
    border-color: var(--rsv-brand-primary-hover);
}

/* 11.11/e MOZGÁS — átadó §4
   --------------------------------------------------------------------------
   CSAK a két vírus mozog, eltérő ciklussal és iránnyal. A baba-kompozíció
   STABIL marad — a projektgazda ezt kifejezetten kérte.

   A negatív késleltetés azért kell, mert az `alternate` a ciklus két végén a
   leglassabb: enélkül a látogató a holtponton érkezne, és a mozgás nem lenne
   „jól észrevehető".
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {

    .rsv-koraszulottek__mezo--bal img {
        animation: rsv-koraszulottek-bal 13s cubic-bezier(.4, .05, .6, .95) -4s infinite alternate;
    }

    .rsv-koraszulottek__mezo--jobb img {
        animation: rsv-koraszulottek-jobb 17s cubic-bezier(.4, .05, .6, .95) -9s infinite alternate;
    }
}

/* Bal vírus: −11 → +10 px vízszintes, −6 → +7 px függőleges, max. 1 fok. */
@keyframes rsv-koraszulottek-bal {
    from { transform: translate3d(-11px, -6px, 0) rotate(-.5deg); }
    to   { transform: translate3d(10px, 7px, 0) rotate(.5deg); }
}

/* Jobb vírus: ELLENTÉTES irány, hosszabb ciklus — a kettő sosem jár együtt. */
@keyframes rsv-koraszulottek-jobb {
    from { transform: translate3d(12px, 7px, 0) rotate(.4deg); }
    to   { transform: translate3d(-10px, -8px, 0) rotate(-.4deg); }
}


/* 11.12 „Cikkek és útmutatók szülőknek" — a főoldal 11. szakasza
   --------------------------------------------------------------------------
   Kanonikus forrás: `docs/RSVIRUS_TUDASTAR_ATADO.md`; kötelező elsődleges
   vizuális referencia a csomag jóváhagyott mockupja.

   KÉT RÉSZ (átadó §3): felül a bevezető — nagy illusztráció + cím, lead, CTA —,
   alatta PONTOSAN HÁROM ajánlott kártya.

   A KÁRTYA GENERIKUS KOMPONENS (`.rsv-cikkkartya`): úgy készült, hogy a
   rendszerből jövő vezetőkép, cím, leírás és link behelyettesíthető legyen
   (átadó §4, §9). A meta sor csak akkor jelenik meg, ha van mögötte adat.

   ÚJ SZÍN NEM KERÜLT A RENDSZERBE: minden érték a 2. szakasz tokenjeiből vagy
   azok `rgba()` alakjából jön.
   -------------------------------------------------------------------------- */

.rsv-tudastar {
    position: relative;
    overflow: hidden;
    padding-block: clamp(64px, 7vw, 104px);
    background: linear-gradient(
        180deg,
        var(--rsv-brand-soft) 0%,
        var(--rsv-brand-bare) 34%,
        var(--rsv-surface-card) 62%,
        var(--rsv-surface-card) 100%
    );
}

.rsv-burok--tudastar {
    max-width: calc(1400px + 2 * var(--rsv-oldalmargo));
}

/* 11.12/b A felső bevezető
   --------------------------------------------------------------------------
   Ugyanaz a diagonálisan kifutó vizuál-minta, mint a koraszülött-szakaszban:
   az élt MASZK adja, nem beégetett kép — így a ferde átmenet minden
   nézetméretnél lágy marad, és a kép vágatlan.
   -------------------------------------------------------------------------- */

.rsv-tudastar__fejlec {
    display: grid;
    gap: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-7));
    align-items: center;
}

@media (min-width: 992px) {
    .rsv-tudastar__fejlec {
        grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
        column-gap: clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-8));
    }
}

.rsv-tudastar__vizual {
    min-width: 0;
    line-height: 0;
    /*
     * A master NEM átlátszó hátterű (RGB), ezért a maszk csak azt az élt
     * oldja fel, amerre kifut — a másik hármon látszana a kép téglalapja.
     * A lekerekítés zárja le őket, ugyanazzal a sugárral, mint a kártyáké.
     */
    overflow: hidden;
    border-radius: var(--rsv-radius-lg);

    /* Mobilon az ALSÓ él fut ki lágyan a szöveg felé. */
    -webkit-mask-image: linear-gradient(
        180deg,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 1) 80%,
        rgba(0, 0, 0, 0) 100%
    );
    mask-image: linear-gradient(
        180deg,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 1) 80%,
        rgba(0, 0, 0, 0) 100%
    );
}

.rsv-tudastar__vizual img {
    display: block;
    width: 100%;
    height: auto;
}

@media (min-width: 992px) {
    .rsv-tudastar__vizual {
        /* 102 fok: enyhén jobbra dőlő él, ahogy a mockupon. */
        -webkit-mask-image: linear-gradient(
            102deg,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 1) 66%,
            rgba(0, 0, 0, 0) 97%
        );
        mask-image: linear-gradient(
            102deg,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 1) 66%,
            rgba(0, 0, 0, 0) 97%
        );
        /*
         * A vizuál benyúlik a rácshézagba, hogy a ferde kifutás a szövegoldal
         * felé folytatódjon. A −10% viszont TÖBB volt, mint maga a hézag
         * (1440 px-en −66 px a 58 px-es gaphez), tehát a kép és a szöveg
         * ténylegesen átfedett, és a szövegblokk optikailag ráért a képre.
         *
         * A −4% ugyanezt a hatást adja, de marad kb. 31–37 px valódi rés a
         * kép jobb széle és a szöveg között (1024–1920 px között mérve) —
         * nagyjából 40 px-rel több levegő, mint korábban. A maszk kifutása
         * (66–97%) a képen belül van, ezért a diagonális átmenet változatlan.
         */
        margin-right: -4%;
    }

    .rsv-tudastar__bevezeto { position: relative; z-index: 1; }
}

.rsv-tudastar__bevezeto > :last-child { margin-bottom: 0; }

/* 11.12/c Az ajánló fejléce
   -------------------------------------------------------------------------- */

.rsv-tudastar__ajanlofej {
    max-width: 720px;
    margin: clamp(var(--rsv-ter-7), 5vw, var(--rsv-ter-9)) auto clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-6));
    text-align: center;
}

.rsv-tudastar__ajanlocim {
    margin: 0 0 var(--rsv-ter-2);
    font-size: var(--rsv-meret-h3);
    font-weight: 700;
    color: var(--rsv-brand-dark);
}

.rsv-tudastar__ajanlolead {
    margin: 0;
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
}

/* 11.12/d A cikkrács és a kártya
   --------------------------------------------------------------------------
   GENERIKUS KOMPONENS. A kártya nem tud arról, honnan jön az adata: a
   szerkezete pontosan az, amit egy cikk-rekord adni fog (vezetőkép, címke,
   cím, kivonat, opcionális meta). Így a helykitöltő tömb később egyetlen
   lekérdezésre cserélhető, a markuphoz nem kell hozzányúlni.
   -------------------------------------------------------------------------- */

.rsv-cikkracs {
    display: grid;
    gap: clamp(var(--rsv-ter-4), 2vw, var(--rsv-ter-5));
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Tableten 2 + 1 törés, desktopon három egy sorban (átadó §8). */
@media (min-width: 640px) {
    .rsv-cikkracs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
    .rsv-cikkracs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.rsv-cikkracs > li { display: flex; }

/*
 * A TELJES KÁRTYA egyetlen linkfelület: az egész terület célpont, és
 * billentyűzetről egyetlen tabstop.
 */
.rsv-cikkkartya {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    background: var(--rsv-surface-card);
    border-radius: var(--rsv-radius-lg);
    text-decoration: none;
    color: inherit;
    box-shadow: var(--rsv-arnyek-sm), inset 0 0 0 1px rgba(141, 69, 162, .1);
    transition:
        transform .22s cubic-bezier(.22, .61, .36, 1),
        box-shadow .22s ease;
}

/*
 * A VEZETŐKÉP fix arányú dobozban ül: a rendszerből érkező képek eltérő
 * méretűek lesznek, és e nélkül a három kártya lépcsőzne. A `cover` vág, nem
 * torzít.
 */
.rsv-cikkkartya__kep {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--rsv-brand-soft);
    line-height: 0;
}

.rsv-cikkkartya__kep img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}

.rsv-cikkkartya__torzs {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--rsv-ter-2);
    padding: clamp(var(--rsv-ter-4), 1.8vw, var(--rsv-ter-5));
}

.rsv-cikkkartya__cimke {
    font-size: var(--rsv-meret-meta);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rsv-brand-secondary);
}

.rsv-cikkkartya__cim {
    font-size: var(--rsv-meret-h4);
    font-weight: 700;
    line-height: var(--rsv-sormagassag-cim);
    color: var(--rsv-brand-dark);
}

.rsv-cikkkartya__leiras {
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
}

/*
 * A META SOR (olvasási idő, dátum) csak akkor kerül a kimenetbe, ha van
 * mögötte adat — a sablon dönti el. A `margin-top: auto` a kártya aljára
 * tolja, hogy a három kártya alsó pereme egy vonalban maradjon.
 */
.rsv-cikkkartya__meta {
    display: flex;
    align-items: center;
    gap: var(--rsv-ter-3);
    margin-top: auto;
    padding-top: var(--rsv-ter-3);
    border-top: 1px solid var(--rsv-border-default);
    font-size: var(--rsv-meret-meta);
    color: var(--rsv-text-secondary);
}

.rsv-cikkkartya__elvalaszto {
    width: 1px;
    height: 12px;
    background: var(--rsv-border-default);
}

/* 11.12/e Záró útvonal
   -------------------------------------------------------------------------- */

.rsv-tudastar__zaras {
    margin-top: clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-7));
    text-align: center;
}

.rsv-tudastar__zarolink {
    display: inline-flex;
    align-items: center;
    min-height: 44px;                    /* kényelmes érintési cél */
    font-weight: 600;
    color: var(--rsv-brand-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--rsv-border-interaktiv);
    padding-bottom: 2px;
    transition: color .18s ease, border-color .18s ease;
}

.rsv-tudastar__zarolink:hover,
.rsv-tudastar__zarolink:focus {
    color: var(--rsv-brand-primary-hover);
    border-color: var(--rsv-brand-primary-hover);
}

/* 11.12/f HOVER — átadó §7
   --------------------------------------------------------------------------
   „Finom legyen, ne agresszív": enyhe emelkedés, erősödő árnyék és a
   vezetőkép alig érzékelhető nagyítása. Csak valódi hover-képes eszközön —
   érintőn a `:hover` az utoljára megérintett kártyán beragadna.

   A hover VIZUÁLIS visszajelzése mozgáscsökkentés mellett is megmarad, csak
   elmozdulás nélkül: ott a kontúr és az árnyék erősödik.
   -------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
    .rsv-cikkkartya:hover {
        box-shadow: var(--rsv-arnyek-md), inset 0 0 0 1px rgba(141, 69, 162, .2);
    }
}

@media (prefers-reduced-motion: no-preference) {
    @media (hover: hover) and (pointer: fine) {
        .rsv-cikkracs > li:hover .rsv-cikkkartya {
            transform: translateY(-5px);
            box-shadow: var(--rsv-arnyek-lg), inset 0 0 0 1px rgba(141, 69, 162, .2);
        }

        .rsv-cikkracs > li:hover .rsv-cikkkartya__kep img { transform: scale(1.04); }
    }
}


/* 11.13 „Mennyit tudsz az RSV-ről?" — a főoldal 12. szakasza
   --------------------------------------------------------------------------
   Kanonikus forrás: `docs/RSVIRUS_KVIZ_ATADO.md`; kötelező elsődleges vizuális
   referencia a csomag jóváhagyott képe.

   Nagy, széles, lekerekített FEHÉR PANEL (átadó §1): balra a kvíz-illusztráció,
   jobbra a szöveg, a négy előny, a CTA és a disclaimer.

   ÚJ SZÍN NEM KERÜLT A RENDSZERBE: a csomag öt SVG-je öt fix hexet hozott,
   egyik sem projekttoken — mind lecserélve `--rsv-brand-soft`-ra, illetve
   `currentColor`-ra (kézikönyv §21).
   -------------------------------------------------------------------------- */

.rsv-kviz {
    padding-block: clamp(56px, 6vw, 96px);
    background: var(--rsv-surface-card);
}

.rsv-burok--kviz {
    max-width: calc(1440px + 2 * var(--rsv-oldalmargo));
}

.rsv-kviz__panel {
    display: grid;
    gap: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-7));
    align-items: center;
    padding: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-8));
    border-radius: clamp(var(--rsv-radius-lg), 2vw, 32px);
    background: linear-gradient(
        135deg,
        var(--rsv-brand-bare) 0%,
        var(--rsv-surface-card) 46%,
        var(--rsv-surface-card) 100%
    );
    box-shadow: var(--rsv-arnyek-lg), inset 0 0 0 1px rgba(141, 69, 162, .1);
}

@media (min-width: 992px) {
    .rsv-kviz__panel {
        /* A vizuál a panel kb. 46%-a (átadó §5: „ne legyen túl kicsi"). */
        grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
        column-gap: clamp(var(--rsv-ter-6), 3.5vw, var(--rsv-ter-8));
    }
}

/* 11.13/b A vizuál és a négy pipa
   --------------------------------------------------------------------------
   Az `aspect-ratio` a master arányát viszi, ezért a pipák százalékos
   pozíciója MINDEN méretnél ugyanoda esik — nem kell nézetenként hangolni.
   -------------------------------------------------------------------------- */

.rsv-kviz__vizual {
    position: relative;
    min-width: 0;
    aspect-ratio: 860 / 693;
    line-height: 0;
    /*
     * A master nem átlátszó hátterű, ezért a téglalap éle kilátszana a panel
     * gradiensén. A lekerekítés zárja le, ugyanazzal a sugárral, mint a
     * többi kártyáé.
     */
    border-radius: var(--rsv-radius-lg);
    overflow: hidden;
}

.rsv-kviz__vizual > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/*
 * A PIPA. A saját SVG pontosan az eredeti, raszterbe égetett pipa FÖLÉ kerül,
 * és el is fedi: a `rect` kitöltése tömör `--rsv-brand-soft`. Enélkül két
 * pipa látszana egymáson (átadó §4).
 *
 * A méret a kompozíció SZÉLESSÉGÉHEZ van kötve, nem px-ben — így a pipák a
 * képpel együtt skálázódnak.
 */
.rsv-kviz__pipa {
    position: absolute;
    left: var(--rsv-pipa-x);
    top: var(--rsv-pipa-y);
    width: 8.2%;
    transform: translate(-50%, -50%);
    color: var(--rsv-brand-primary);
    line-height: 0;
}

.rsv-kviz__pipa svg {
    display: block;
    width: 100%;
    height: auto;
}

/* 11.13/c A jobb oldali tartalom
   -------------------------------------------------------------------------- */

.rsv-kviz__torzs { min-width: 0; }

.rsv-kviz__alcim {
    margin: 0 0 var(--rsv-ter-4);
    font-size: var(--rsv-meret-lead);
    font-weight: 700;
    color: var(--rsv-brand-secondary);
}

/*
 * A NÉGY ELŐNY. Desktopon egy sorban, finom elválasztó vonallal — a mockup
 * szerint. A vonal dekoratív, ezért maradhat a `--rsv-border-default`.
 */
.rsv-kviz__elonyok {
    display: grid;
    gap: clamp(var(--rsv-ter-4), 2vw, var(--rsv-ter-5));
    list-style: none;
    margin: clamp(var(--rsv-ter-5), 2.5vw, var(--rsv-ter-6)) 0 0;
    padding: 0;
}

@media (min-width: 480px) {
    .rsv-kviz__elonyok { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
    .rsv-kviz__elonyok {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: clamp(var(--rsv-ter-3), 1.4vw, var(--rsv-ter-4));
    }
}

.rsv-kviz__elony {
    display: flex;
    flex-direction: column;
    gap: var(--rsv-ter-2);
    min-width: 0;
}

@media (min-width: 1200px) {
    .rsv-kviz__elony:not(:first-child) {
        padding-left: clamp(var(--rsv-ter-3), 1.4vw, var(--rsv-ter-4));
        border-left: 1px solid var(--rsv-border-default);
    }
}

.rsv-kviz__elonyabra {
    display: block;
    width: clamp(40px, 3vw, 48px);
    color: var(--rsv-brand-primary);
    line-height: 0;
}

.rsv-kviz__elonyabra svg { display: block; width: 100%; height: auto; }

.rsv-kviz__elonycim {
    font-size: var(--rsv-meret-torzs);
    font-weight: 700;
    line-height: var(--rsv-sormagassag-cim);
    color: var(--rsv-brand-dark);
}

.rsv-kviz__elonyleiras {
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
}

/* 11.13/d CTA és disclaimer
   -------------------------------------------------------------------------- */

.rsv-kviz__inditas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(var(--rsv-ter-4), 2vw, var(--rsv-ter-5));
    margin-top: clamp(var(--rsv-ter-5), 2.5vw, var(--rsv-ter-6));
}

.rsv-kviz__ido {
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
}

/*
 * DISCLAIMER. Az ORVOSI §19 és az átadó §2 kötelező eleme, ezért a
 * főszövegben, láthatóan áll — nem összecsukható elemben, és nem
 * `.rsv-alert--surgos` panelben: ez nem sürgősségi tartalom, hanem
 * tájékoztatás a kvíz jellegéről.
 */
.rsv-kviz__disclaimer {
    margin: clamp(var(--rsv-ter-5), 2.5vw, var(--rsv-ter-6)) 0 0;
    padding: var(--rsv-ter-4) clamp(var(--rsv-ter-4), 2vw, var(--rsv-ter-5));
    border-radius: var(--rsv-radius-md);
    background: var(--rsv-brand-bare);
    box-shadow: inset 0 0 0 1px rgba(141, 69, 162, .12);
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
}

/* 11.13/e MOZGÁS — átadó §4, §6, §7
   --------------------------------------------------------------------------
   A FŐ MOTION A NÉGY PIPA BELÉPÉSE. Ezen kívül csak a CTA hover-je mozdul —
   parallax és folyamatos idle mozgás SZÁNDÉKOSAN nincs (átadó §7).

   AZ ALAPÁLLAPOT A VÉGÁLLAPOT: a pipa alapból látható, teljes méretben. A
   belépő animáció csak rárétegződik, amikor a szakasz a nézetablakba kerül.
   Ezért JavaScript nélkül, hiányzó IntersectionObserver mellett és
   `prefers-reduced-motion: reduce` esetén mind a négy pipa AZONNAL, véglegesen
   látszik — ahogy az átadó §4 kéri.

   MIÉRT SAJÁT RÉTEG, ÉS NEM A KÖZÖS `data-rsv-belep`?
     A közös belépő-réteg az `animationend` eseménynél leveszi a jelölést — az
     esemény viszont a GYEREKEKBŐL is felbugyborékol. Az első pipa 400 ms-nál
     végezne, a jelölés lekerülne, és a maradék három pipa azonnal a
     végállapotba ugrana: a stagger elveszne. A pipák ezért saját, célzott
     jelölést kapnak (`rsv-kviz__pipa--belep`), amit a `publikus.js` tesz rájuk
     egyszer, és NEM vesz le — a keyframe végállapota úgyis azonos az
     alapállapottal, tehát nem ragadhat be semmi.

   A stagger a pipák saját `--rsv-pipa-kesleltetes` értékéből jön
   (0/200/400/600 ms), a keyframe pedig 400 ms alatt fut le, enyhe túllövéssel.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {

    .rsv-kviz__pipa--belep {
        animation: rsv-kviz-pipa .4s cubic-bezier(.34, 1.4, .64, 1) both;
        animation-delay: var(--rsv-pipa-kesleltetes, 0ms);
    }

    /*
     * CTA-HOVER (átadó §6): −2 px, legfeljebb 1.01-es nagyítás. „Ne legyen
     * túlmozgás" — ezért nincs se billegés, se idle animáció.
     */
    @media (hover: hover) and (pointer: fine) {
        .rsv-kviz__cta {
            transition:
                transform .2s cubic-bezier(.22, .61, .36, 1),
                box-shadow .2s ease,
                background-color .18s ease,
                border-color .18s ease;
        }

        .rsv-kviz__cta:hover {
            transform: translateY(-2px) scale(1.01);
            box-shadow: var(--rsv-arnyek-md);
        }
    }
}

/*
 * A pipa belépése: scale 0 -> 1 enyhe túllövéssel (max. 1.08), opacity 0 -> 1,
 * és egy rövid fénykoszorú, ami a végére elhal. Utána a pipa STATIKUSAN
 * kipipálva marad — nincs végtelen ciklus (átadó §4).
 */
@keyframes rsv-kviz-pipa {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
        filter: drop-shadow(0 0 0 rgba(141, 69, 162, 0));
    }
    60% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.08);
        filter: drop-shadow(0 0 10px rgba(141, 69, 162, .55));
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        filter: drop-shadow(0 0 0 rgba(141, 69, 162, 0));
    }
}


/* 12. GYIK / ACCORDION — kézikönyv §15, `docs/RSVIRUS_FAQ_ATADO.md`
   --------------------------------------------------------------------------
   A meglévő `components/faq.php` natív <details>/<summary> elemeket ad, hogy a
   válasz JavaScript nélkül is olvasható és kereshető legyen. Itt csak a
   megjelenítés van.

   A CHEVRON FUNKCIONÁLIS, ezért marad (átadó §8) — ez az egyetlen nyíl a
   blokkban, és a nyitott/zárt állapotot jelzi.
   -------------------------------------------------------------------------- */

.rsv-gyikszekcio {
    padding-block: clamp(56px, 6vw, 96px);
    background: var(--rsv-surface-page);
}

.rsv-burok--gyik {
    max-width: calc(1200px + 2 * var(--rsv-oldalmargo));
}

/* Az accordion olvasási oszlopa szűkebb: hosszú sor nehezen pásztázható. */
.gyik {
    max-width: 960px;
    margin-inline: auto;
}

.gyik__fej {
    max-width: 720px;
    margin-inline: auto;
    margin-bottom: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-7));
    text-align: center;
}

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

.gyik__cim {
    margin: var(--rsv-ter-2) 0 var(--rsv-ter-3);
    font-size: var(--rsv-meret-h2);
    font-weight: 700;
    line-height: var(--rsv-sormagassag-cim);
    color: var(--rsv-brand-dark);
}

.gyik__lead { margin: 0; }

.gyik__lista {
    display: grid;
    gap: var(--rsv-ter-3);
}

/* 12/b Az accordion eleme
   -------------------------------------------------------------------------- */

.gyik__elem {
    background: var(--rsv-surface-card);
    border-radius: var(--rsv-radius-lg);
    box-shadow: var(--rsv-arnyek-sm), inset 0 0 0 1px rgba(141, 69, 162, .1);
    transition: box-shadow .2s ease;
}

.gyik__elem[open] {
    box-shadow: var(--rsv-arnyek-md), inset 0 0 0 1px rgba(141, 69, 162, .2);
}

/*
 * A TELJES KÉRDÉSSOR KATTINTHATÓ (átadó §4): a `<summary>` maga a kapcsoló,
 * tehát az egész sor célpont, és billentyűzetről egyetlen tabstop.
 *
 * A `list-style: none` + `::-webkit-details-marker` a böngésző alapértelmezett
 * háromszögét tünteti el — helyette a saját chevron jelzi az állapotot.
 */
.gyik__kerdes {
    display: flex;
    align-items: center;
    gap: clamp(var(--rsv-ter-3), 1.4vw, var(--rsv-ter-4));
    padding: clamp(var(--rsv-ter-4), 1.8vw, var(--rsv-ter-5));
    list-style: none;
    cursor: pointer;
    font-weight: 700;
    color: var(--rsv-brand-dark);
}

.gyik__kerdes::-webkit-details-marker { display: none; }

.gyik__kerdes:focus-visible {
    outline: 3px solid var(--rsv-focus);
    outline-offset: 2px;
    border-radius: var(--rsv-radius-lg);
}

/* A kérdés-ikon dekoratív: a jelentést a kérdés szövege hordozza. */
.gyik__kerdesikon {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--rsv-radius-md);
    background: var(--rsv-brand-soft);
    color: var(--rsv-brand-primary);
    --ikon-meret: 24px;
}

.gyik__kerdes-szoveg { flex: 1; min-width: 0; }

.gyik__ikon {
    flex: none;
    --ikon-meret: 22px;
    color: var(--rsv-brand-secondary);
}

.gyik__valasz {
    padding: 0 clamp(var(--rsv-ter-4), 1.8vw, var(--rsv-ter-5)) clamp(var(--rsv-ter-4), 1.8vw, var(--rsv-ter-5));
    color: var(--rsv-text-secondary);
}

/*
 * A válasz szövege a KÉRDÉS SZÖVEGÉHEZ igazodik, nem az ikonhoz: így a
 * bekezdés bal széle egy vonalban van a kérdéssel.
 */
@media (min-width: 480px) {
    .gyik__valasz {
        padding-left: calc(44px + clamp(var(--rsv-ter-3), 1.4vw, var(--rsv-ter-4)) + clamp(var(--rsv-ter-4), 1.8vw, var(--rsv-ter-5)));
    }
}

/* 12/c A továbblépő panel
   --------------------------------------------------------------------------
   „Nem találod, amit keresel?" — vizuálisan erős, de nem túl nagy (átadó §5).
   -------------------------------------------------------------------------- */

.rsv-tovabb {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    gap: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-6));
    align-items: center;
    margin-top: clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-8));
    padding: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-7));
    border-radius: clamp(var(--rsv-radius-lg), 2vw, 28px);
    background: linear-gradient(
        118deg,
        var(--rsv-brand-soft) 0%,
        var(--rsv-brand-bare) 52%,
        var(--rsv-brand-soft) 100%
    );
    box-shadow: inset 0 0 0 1px rgba(141, 69, 162, .12);
}

@media (min-width: 768px) {
    .rsv-tovabb { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}

.rsv-tovabb__szoveg { min-width: 0; }

.rsv-tovabb__jel {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: var(--rsv-ter-4);
    border-radius: 50%;
    background: var(--rsv-surface-card);
    color: var(--rsv-brand-primary);
    --ikon-meret: 24px;
    box-shadow: var(--rsv-arnyek-sm);
}

.rsv-tovabb__cim {
    margin: 0 0 var(--rsv-ter-3);
    font-size: var(--rsv-meret-h3);
    font-weight: 700;
    line-height: var(--rsv-sormagassag-cim);
    color: var(--rsv-brand-dark);
}

.rsv-tovabb__lead {
    margin: 0;
    max-width: 46ch;
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
}

.rsv-tovabb__gombok {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rsv-ter-3);
    margin-top: clamp(var(--rsv-ter-4), 2vw, var(--rsv-ter-5));
}

.rsv-tovabb__cta .ikon { --ikon-meret: 20px; }

/*
 * A PANEL VIZUÁLJA. Az arányt az anya–baba réteg adja (ő van a normál
 * dokumentumfolyamban), a vírus-overlay abszolút ül rajta.
 */
.rsv-tovabb__vizual {
    position: relative;
    min-width: 0;
    line-height: 0;
}

.rsv-tovabb__alak {
    position: relative;
    z-index: 1;
    line-height: 0;
    border-radius: var(--rsv-radius-lg);
    overflow: hidden;
}

.rsv-tovabb__alak img {
    display: block;
    width: 100%;
    height: auto;
}

.rsv-tovabb__reteg {
    position: absolute;
    inset: -6%;
    z-index: 2;
    line-height: 0;
    pointer-events: none;
    /* Nagyon halvány: csak atmoszféra a kompozíció körül (átadó §5). */
    opacity: .3;
}

.rsv-tovabb__reteg img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

/* 12/d MOZGÁS — átadó §6
   --------------------------------------------------------------------------
   A FAQ-ban NINCS túlmozgás. Csak három dolog mozdul:

     1. a chevron elfordulása nyitáskor;
     2. a válasz finom beúszása;
     3. a panel vírus-overlayének lassú sodródása.

   Az anya–baba fő réteg STABIL marad.

   `prefers-reduced-motion: reduce`: a drift áll, az accordion átmenete pedig
   a minimumra egyszerűsödik — a nyitás/zárás továbbra is működik, csak
   azonnal. A natív `<details>` miatt a tartalom mindig hozzáférhető marad.
   -------------------------------------------------------------------------- */

/*
 * A chevron elfordulása a `transition`-ön megy, nem keyframe-en: így
 * mozgáscsökkentés mellett elég az átmenetet nullázni, és a végállapot
 * (felfelé mutató chevron) attól még helyes marad.
 */
.gyik__ikon { transition: transform .25s cubic-bezier(.22, .61, .36, 1); }

.gyik__elem[open] > .gyik__kerdes .gyik__ikon { transform: rotate(180deg); }

@media (prefers-reduced-motion: no-preference) {

    /*
     * A válasz beúszása. A natív <details> nem animálható magasságban, ezért
     * a TARTALOM úszik be — a doboz maga azonnal megnyílik. Így nincs
     * ugrálás, és a billentyűzetes használat sem lassul.
     */
    .gyik__elem[open] > .gyik__valasz {
        animation: rsv-gyik-valasz .28s cubic-bezier(.22, .61, .36, 1) both;
    }

    .rsv-tovabb__reteg img {
        animation: rsv-tovabb-virusok 15s cubic-bezier(.4, .05, .6, .95) -5s infinite alternate;
    }
}

@media (prefers-reduced-motion: reduce) {
    /* Az elfordulás megmarad, csak azonnal — a jelzés nem veszhet el. */
    .gyik__ikon { transition: none; }
}

@keyframes rsv-gyik-valasz {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

/* A panel vírus-overlaye: 8–12 px lassú drift (átadó §6). */
@keyframes rsv-tovabb-virusok {
    from { transform: translate3d(-5px, -4px, 0) rotate(-.4deg); }
    to   { transform: translate3d(5px, 4px, 0) rotate(.4deg); }
}


/* --------------------------------------------------------------------------
   12. MORZSAMENÜ — globális komponens
   --------------------------------------------------------------------------
   A `templates/components/morzsamenu.php` kimenetéhez. Az első tartalmi
   aloldallal (`/rsv`) vált láthatóvá, de NEM oldalspecifikus: minden későbbi
   aloldal ugyanezt kapja.

   AZ UTOLSÓ ELEM az aktuális oldal: nem hivatkozás, `aria-current="page"`.
   A VIRTUÁLIS SZÜLŐ (pl. „RSV") szintén nem hivatkozás — mögötte nincs oldal
   (IA D2), ezért nem is kaphat kattintható affordance-t.

   ÉRINTÉSI CÉL: a linkek apró, metaméretű szövegek, ezért függőleges
   belső térközt kapnak — így a tényleges célterület kényelmes marad.
   -------------------------------------------------------------------------- */

.morzsamenu {
    font-size: var(--rsv-meret-meta);
    line-height: 1.4;
}

.morzsamenu__lista {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--rsv-ter-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.morzsamenu__elem {
    display: flex;
    align-items: center;
    gap: var(--rsv-ter-2);
    min-width: 0;
}

/* Az elválasztó DEKORATÍV, ezért `::before` és nem külön elem. */
.morzsamenu__elem + .morzsamenu__elem::before {
    content: "/";
    color: var(--rsv-brand-secondary);
    opacity: .55;
}

.morzsamenu a,
.morzsamenu [aria-current="page"] {
    display: inline-block;
    padding-block: var(--rsv-ter-2);
}

.morzsamenu a {
    color: var(--rsv-text-secondary);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.morzsamenu a:hover,
.morzsamenu a:focus-visible {
    color: var(--rsv-brand-primary);
    border-bottom-color: currentColor;
}

.morzsamenu [aria-current="page"] {
    color: var(--rsv-brand-dark);
    font-weight: 600;
}

/*
 * HERO-VÁLTOZAT. Saját konténert nem kap: a hero burka adja a szélességet és
 * a bal szélt, így a morzsamenü pontosan a H1-gyel egy vonalban áll.
 */
.morzsamenu--hero {
    margin-bottom: clamp(var(--rsv-ter-4), 2vw, var(--rsv-ter-6));
}


/* --------------------------------------------------------------------------
   13. A `/rsv` ALOLDAL — „Mi az RSV?"
   --------------------------------------------------------------------------
   Kanonikus forrás: `docs/RSVIRUS_RSV_ALOLDAL_ATADO.md`.

   ÚJ SZÍNPALETTA NEM KELETKEZETT. Ez a szakasz KIZÁRÓLAG a 2. szakasz
   tokenjeiből és azok `rgba()` / `color-mix()` alakjából épül — pontosan úgy,
   ahogy a főoldali blokkok. Az átadó „Vizuális rendszer" fejezete ezt
   kifejezetten kiköti.

   AZ ALOLDALAK MINTADARABJA. Amit itt csak a szerkezet indokol, az `rsv-alap`
   névtérbe került; ami közös (gomb, szemöldök, lead, burok, szekcióháttér,
   tünetlista, GYIK), az a MEGLÉVŐ osztály. Nem épült párhuzamos komponens
   ugyanarra a funkcióra.

   A KÉPEK. A csomag négy PNG-je ÖSSZEÉGETETT kompozíció, halvány levendula
   háttérrel — nem átlátszó réteg, mint a főoldalon. Ezért nem rétegezzük és
   nem úsztatjuk őket; a téglalapélt lágy maszk oldja fel, hogy a kép a szekció
   hátterébe olvadjon. A képet magát NEM vágjuk és nem retusáljuk.
   -------------------------------------------------------------------------- */

/* 13.0 AZ OLDAL SAJÁT RITMUSA
   --------------------------------------------------------------------------
   MIÉRT NEM A GLOBÁLIS TOKENT ÁLLÍTJUK ÁT? Mert a `--rsv-szekcio-ter` a LEZÁRT
   főoldalé is. Ott a szakaszok nagy, képi kompozíciók köré épülnek, és a 96 px
   arányos. Ez az aloldal viszont sok rövid, szöveges szakaszból áll: ugyanaz a
   köz itt 150–250 px-es vizuális lyukakat nyitott a blokkok között.

   A megoldás: a token az oldal `<main>` elemén ÍRÓDIK FELÜL. A custom property
   öröklődik, tehát a `.rsv-szekcio` innentől a szűkebb értéket kapja — a
   főoldal viszont bitre változatlan marad.
   -------------------------------------------------------------------------- */

.rsv-alap-oldal {
    --rsv-szekcio-ter: clamp(40px, 4.4vw, 68px);
}

/* A szekciófej és a gombsor is feszesebb: enélkül a blokkon BELÜL maradnának lyukak. */
.rsv-alap-oldal .rsv-szekciofej {
    /*
     * Valamivel SZÉLESEBB, mint az alapértelmezett 760 px: a leghosszabb
     * szakaszcím („Mit tehetünk az RSV súlyos következményeinek
     * megelőzéséért?") így két sorban marad, nem törik háromba.
     */
    max-width: 820px;
    margin-bottom: clamp(var(--rsv-ter-5), 2.6vw, var(--rsv-ter-6));
}

.rsv-alap-oldal .rsv-gombsor {
    margin-top: clamp(var(--rsv-ter-5), 2.4vw, var(--rsv-ter-6));
}


/* 13.1 Page hero
   --------------------------------------------------------------------------
   SZÁNDÉKOSAN NEM a főoldali hero másolata (átadó §1): alacsonyabb,
   morzsamenüvel indul, és nincs benne négyrétegű, parallaxos kompozíció.
   A rokonság a gradiensben és a tipográfiai ritmusban marad meg.
   -------------------------------------------------------------------------- */

.rsv-alaphero {
    /*
     * MEKKORÁT EMELKEDIK A KOMPOZÍCIÓ A MORZSAMENÜ SÁVJÁBA — desktopon.
     * Egyetlen helyen hangolható; mobilon nincs érvényben (lásd lentebb).
     */
    --rsv-alaphero-emeles: clamp(48px, 5vw, 76px);

    position: relative;
    isolation: isolate;
    overflow: hidden;

    /*
     * A HERO A LEBEGŐ FEJLÉC ALÁ CSÚSZIK — ugyanaz az idióma, mint a lezárt
     * főoldalon (`.rsv-hero`).
     *
     * A fejléc `position: sticky`, tehát a HELYÉT is elfoglalja a folyamban.
     * Negatív felső margó nélkül a hero gradiense csak a fejlécsáv ALATT
     * kezdődött, és fölötte a lapháttér világos, leválasztó sávként húzódott
     * végig — a fejléc-kártya nem a hero felületén lebegett, hanem egy üres
     * sávban. A negatív margó ezt a sávot szünteti meg; a `padding-top` pedig
     * visszaadja a tartalom helyét, hogy semmi ne kerüljön a kártya alá.
     */
    margin-top: calc(-1 * var(--rsv-fejlec-magassag));
    padding-top: calc(var(--rsv-fejlec-magassag) + clamp(var(--rsv-ter-4), 1vw, var(--rsv-ter-5)));
    padding-bottom: clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-8));

    background: linear-gradient(
        168deg,
        var(--rsv-brand-soft) 0%,
        var(--rsv-brand-bare) 46%,
        var(--rsv-surface-page) 100%
    );
}

/*
 * EGYETLEN, NAGYON LASSÚ FÉNYUDVAR. Az átadó §1 megengedi a finom glow-t, de
 * tiltja a teljes kép folyamatos úsztatását — ezért a kép áll, és csak ez a
 * dekoratív réteg mozdul. A keyframe kezdő- és végállapota AZONOS, így
 * `prefers-reduced-motion` mellett (ahol a globális szabály .001 ms-ra rövidíti
 * az animációt) pontosan a nyugalmi állapot marad.
 */
.rsv-alaphero__fenyudvar {
    position: absolute;
    z-index: -1;
    top: -18%;
    right: -12%;
    width: min(760px, 82vw);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(141, 69, 162, .16) 0%,
        rgba(141, 69, 162, .07) 45%,
        rgba(141, 69, 162, 0) 72%
    );
    animation: rsv-alap-fenyudvar 26s ease-in-out infinite;
}

@keyframes rsv-alap-fenyudvar {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(-2.5%, 3%, 0) scale(1.06); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
}

.rsv-alaphero__racs {
    /*
     * SZOROSABB KÖZ a szöveg és a kép között: korábban a hero két fele két
     * külön elemnek látszott. A kompozíciónak egyben kell olvasnia.
     */
    display: grid;
    gap: clamp(var(--rsv-ter-5), 3.2vw, var(--rsv-ter-7));
    align-items: center;
}

.rsv-alaphero__racs > * { min-width: 0; }

@media (min-width: 992px) {
    /* A vizuál kapja a nagyobb hasábot: ez az oldal képi belépője. */
    .rsv-alaphero__racs { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }

    /*
     * A KOMPOZÍCIÓ A MORZSAMENÜ SÁVJÁBA EMELKEDIK.
     *
     * A morzsamenü rövid és BALRA zárt, a vizuál viszont a JOBB hasábban áll:
     * a kettő soha nem ér össze, a fölötte lévő sáv tehát kihasználatlan tér
     * volt. Az emeléssel a kép szinte a fejléc-kártya aljáig ér, miközben a
     * morzsamenü, a H1 és a copy a helyén, levegősen marad.
     *
     * `align-self: start` KELL hozzá: a rács alapértelmezett középre
     * igazításánál a negatív margó a sormagasságon keresztül hatna, és a
     * tényleges elmozdulás kiszámíthatatlan lenne.
     */
    .rsv-alaphero__vizual {
        align-self: start;
        margin-top: calc(-1 * var(--rsv-alaphero-emeles));
    }
}

.rsv-alaphero__szoveg > :last-child { margin-bottom: 0; }

.rsv-alaphero__cim {
    margin-bottom: var(--rsv-ter-5);
}

.rsv-alaphero__lead {
    max-width: 56ch;
    margin-bottom: 0;
}

.rsv-alaphero__gombsor {
    margin-top: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-6));
}

.rsv-alaphero__vizual { line-height: 0; }

/*
 * A KÉPEK MÉLYSÉGE ÉS LÁGY PEREME.
 *
 * A masterek saját, halvány levendula háttérrel érkeznek, és önmagukban
 * fakónak, ködösnek hatnak: kevesebb a vizuális súlyuk, mint a főoldal
 * átlátszó hátterű rétegeinek.
 *
 * HÁROM ESZKÖZ ÁLL EGYÜTT — ÉS EGYIK SEM AD ÚJ SZÍNT:
 *
 *  1. LAP (`::before`). A kép MÖGÉ egy halvány, brandtokenekből épített
 *     fényudvar kerül. Ehhez képest a kompozíció nem a puszta lapháttéren
 *     lebeg, hanem egy mélyebb felületen ül.
 *
 *  2. `mix-blend-mode: multiply`. A master háttere közel fehér, ezért a
 *     szorzás ott gyakorlatilag nem változtat semmit — a lila anatómia
 *     viszont elmélyül, és a téglalapél magától beleolvad a felületbe.
 *     Ez MÉLYSÉG, nem szaturációnövelés: új szín nem keletkezik, mert a
 *     szorzás csak a MEGLÉVŐ értékeket sötétíti.
 *
 *  3. LÁGY PEREM. Két, egymásra vetített lineáris maszk minden oldalon
 *     ugyanakkora peremet ad. A perem SZŰKEBB lett (7% -> 4%): a korábbi
 *     érték a kompozíció szélét is elmosta.
 *
 * A képet magát nem vágjuk és nem retusáljuk — csak a megjelenítését.
 *
 * A `mask-composite` metszetet képez a két rétegből. Ahol a böngésző nem
 * ismeri, a rétegek alapértelmezés szerint összeadódnak: ilyenkor a perem
 * keményebb marad, de a kép TELJES EGÉSZÉBEN látszik — tartalom nem veszhet el.
 */
.rsv-alaphero__vizual,
.rsv-alap-vizual,
.rsv-alap-kockazat__vizual {
    position: relative;
    line-height: 0;
}

/*
 * A LAP KÉT RÉTEGBŐL ÁLL:
 *   - egy halvány levendula MEZŐ, amely lágy, ovális éllel tűnik el. Ez adja
 *     azt a felületet, amelyre a kép szorzása ráülhet: nélküle a master saját,
 *     enyhén tónusos háttere látható TÉGLALAPKÉNT ütne el a fehér szekciótól;
 *   - egy fényudvar, amely a kompozíció közepét emeli ki.
 *
 * A `z-index` SZÁNDÉKOSAN NEM NEGATÍV. A szekciók nem hoznak létre saját
 * rétegkontextust, ezért a negatív érték a szekció HÁTTERE MÖGÉ vitte volna a
 * lapot — vagyis láthatatlanná tette volna. Így viszont a lap a háttér fölött,
 * a kép alatt ül, és a kép szorzása mindkettővel elkeveredik.
 */
.rsv-alaphero__vizual::before,
.rsv-alap-vizual::before {
    content: "";
    position: absolute;

    /*
     * A VÍZSZINTES KIFUTÁS NEM LÉPHET TÚL AZ OLDALMARGÓN.
     *
     * A lap a kép szélességének 5%-ával fut ki oldalra. 431 px fölött a
     * vizuál a TELJES tartalomszélességet kitölti, ott tehát ez az 5% nagyobb
     * lesz, mint a rendelkezésre álló oldalmargó — a lap kilógott a
     * nézetablakból, és a dokumentum vízszintesen szélesebb lett nála
     * (768 px-en pontosan 3 px-rel).
     * (A heróban ez nem látszott: azt a szakasz `overflow: hidden`-je vágja.)
     *
     * A `max()` a kifutást az oldalmargóhoz köti, 1 px tartalékkal a
     * kerekítés ellen. NEGATÍV értékekről van szó, ezért a KISEBB kifutás a
     * NAGYOBB szám — innen a `max()`. Minden más szélességen az 5% a kisebb
     * kifutás, ezért a lap kiterjedése VÁLTOZATLAN: csak abban a sávban
     * szűkül, ahol eddig túlcsordulást okozott.
     */
    inset: -7% max(-5%, calc(-1 * var(--rsv-oldalmargo) + 1px));
    background:
        radial-gradient(
            56% 52% at 50% 46%,
            rgba(141, 69, 162, .18) 0%,
            rgba(141, 69, 162, .07) 48%,
            rgba(141, 69, 162, 0) 76%
        ),
        radial-gradient(
            74% 70% at 50% 50%,
            var(--rsv-brand-bare) 0%,
            var(--rsv-brand-bare) 56%,
            rgba(250, 246, 251, 0) 100%
        );
}

.rsv-alaphero__vizual img,
.rsv-alap-vizual img,
.rsv-alap-kockazat__vizual img {
    --rsv-perem: 6%;

    position: relative;
    display: block;
    width: 100%;
    height: auto;

    mix-blend-mode: multiply;

    -webkit-mask-image:
        linear-gradient(to right, transparent 0, #000 var(--rsv-perem),
            #000 calc(100% - var(--rsv-perem)), transparent 100%),
        linear-gradient(to bottom, transparent 0, #000 var(--rsv-perem),
            #000 calc(100% - var(--rsv-perem)), transparent 100%);
    mask-image:
        linear-gradient(to right, transparent 0, #000 var(--rsv-perem),
            #000 calc(100% - var(--rsv-perem)), transparent 100%),
        linear-gradient(to bottom, transparent 0, #000 var(--rsv-perem),
            #000 calc(100% - var(--rsv-perem)), transparent 100%);

    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

/*
 * 13.2 Az oldalon belüli gyorsnavigáció („Ezen az oldalon") MEGSZŰNT.
 *
 * Projektgazdai döntés (2026-08-27): a sávra nincs szükség, ezért mindkét
 * tartalmi aloldalról — `/rsv` és `/hogyan-terjed` — teljesen kikerült. A
 * `.rsv-alapnav*` szabályok kizárólag ehhez a komponenshez tartoztak, és
 * semmilyen más oldal vagy szkript nem hivatkozott rájuk, ezért holt CSS-ként
 * nem maradtak a fájlban.
 *
 * A szakaszok cél-ID-jei MEGMARADTAK: mélylinkként továbbra is érvényesek, és
 * a `/hogyan-terjed` hero CTA-ja (`#megszakitas`), valamint az egyik routing
 * kártya (`#beteg-testver`) használja is őket.
 */

/* 13.3 Editorial explainer — szöveg + vizuál
   -------------------------------------------------------------------------- */

/*
 * SZOROSABB KÉP–COPY KAPCSOLAT. A `.rsv-ketto` alapértelmezett, nagyvonalú
 * köze itt szétszakította a két felet; a szűkebb érték egy kompozícióvá fogja
 * őket. A vizuál kapja a nagyobb hasábot, hogy legyen valódi vizuális súlya.
 */
.rsv-alap-explainer {
    align-items: center;
    gap: clamp(var(--rsv-ter-5), 3.2vw, var(--rsv-ter-7));
}

@media (min-width: 992px) {
    /* A vizuál a `--forditott` változatban az ELSŐ, egyébként a MÁSODIK hasáb. */
    .rsv-alap-explainer.rsv-ketto--forditott {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    }

    .rsv-alap-explainer:not(.rsv-ketto--forditott) {
        grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    }
}

/* A szintek listája — NEM három külön kártya (átadó §3). */
.rsv-alap-szintek {
    display: grid;
    gap: var(--rsv-ter-5);
    list-style: none;
    margin: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-6)) 0 0;
    padding: 0;
}

.rsv-alap-szint {
    display: flex;
    align-items: flex-start;
    gap: var(--rsv-ter-4);
    min-width: 0;
}

.rsv-alap-szint__jel {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--rsv-radius-md);
    background: var(--rsv-brand-soft);
    color: var(--rsv-brand-primary);
    --ikon-meret: 24px;
}

.rsv-alap-szint__torzs {
    display: block;
    min-width: 0;
}

.rsv-alap-szint__cim {
    display: block;
    font-size: var(--rsv-meret-h4);
    font-weight: 700;
    color: var(--rsv-brand-dark);
    margin-bottom: var(--rsv-ter-1);
}

.rsv-alap-szint__szoveg {
    display: block;
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
}

/*
 * SZÓSZEDET-HORGONY a szakkifejezés első előfordulásánál (átadó §16).
 * NEM tooltip: valódi link, tehát billentyűzettel és érintéssel is működik.
 * A belső térköz a látható ikonnál nagyobb célterületet ad.
 */
.rsv-alap-fogalomjel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    margin: -8px -4px;
    color: var(--rsv-brand-secondary);
    --ikon-meret: 16px;
    vertical-align: middle;
}

.rsv-alap-fogalomjel:hover,
.rsv-alap-fogalomjel:focus-visible { color: var(--rsv-brand-primary); }

/* 13.4 „Miért viselheti meg jobban a legkisebbeket?" — három állítás
   -------------------------------------------------------------------------- */

.rsv-alap-allitasok {
    display: grid;
    gap: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-6));
    list-style: none;
    margin: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-6)) 0 0;
    padding: 0;
}

.rsv-alap-allitas {
    min-width: 0;
    padding-left: var(--rsv-ter-5);
    border-left: 3px solid var(--rsv-brand-soft);
}

.rsv-alap-allitas__cim {
    margin: 0 0 var(--rsv-ter-2);
    font-size: var(--rsv-meret-h4);
    font-weight: 700;
    color: var(--rsv-brand-dark);
}

.rsv-alap-allitas__szoveg {
    margin: 0;
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
}

/* 13.5 „Ugyanaz a vírus – nem ugyanaz a betegség"
   --------------------------------------------------------------------------
   A SZÍN NEM AZ EGYETLEN JELENTÉSHORDOZÓ (kézikönyv §19): a skála két
   végpontja szöveges felirat, és mindkét lista saját, kimondott címet kap.

   A skála a MÁRKAGRADIENSSEL dolgozik, nem a sürgősségi vörössel: a
   sürgősségi vizuális nyelv csak tényleges triázs-tartalomé (kézikönyv §13).
   -------------------------------------------------------------------------- */

/*
 * A SPEKTRUM EGYETLEN, FOLYTONOS KOMPOZÍCIÓ.
 *
 * Korábban a skálasáv és a két lista három, egymástól független elem volt, és
 * a listák admin-kártyaként hatottak. Most a sáv alól rövid SZÁRAK vezetnek le
 * a két oldalhoz: látszik, hogy a bal és a jobb lista ugyanannak a
 * folyamatnak a két vége.
 */
.rsv-alap-spektrumtomb {
    position: relative;
}

.rsv-alap-skala {
    display: flex;
    align-items: center;
    gap: var(--rsv-ter-4);
    margin-bottom: 0;
}

.rsv-alap-skala__cimke {
    flex: none;
    padding: var(--rsv-ter-2) var(--rsv-ter-4);
    border-radius: var(--rsv-radius-pill);
    background: var(--rsv-surface-card);
    box-shadow: inset 0 0 0 1px var(--rsv-border-default);
    font-size: var(--rsv-meret-meta);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--rsv-text-secondary);
}

/*
 * A jobb végpont a SÚLYOSABB oldal címkéje. A sürgősségi tokent csak a
 * rendszer szabályai szerint, KONTÚRKÉNT használja (kézikönyv §13): a sáv
 * maga végig a márkagradienssel dolgozik, riasztó vörös felület nincs.
 */
.rsv-alap-skala__cimke--jobb {
    color: var(--rsv-urgent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rsv-urgent) 28%, #fff);
}

.rsv-alap-skala__sav {
    flex: 1 1 auto;
    height: 12px;
    border-radius: var(--rsv-radius-pill);
    background: linear-gradient(
        90deg,
        var(--rsv-brand-soft) 0%,
        var(--rsv-brand-secondary) 46%,
        var(--rsv-brand-primary) 76%,
        color-mix(in srgb, var(--rsv-urgent) 72%, var(--rsv-brand-primary)) 100%
    );
    box-shadow: inset 0 0 0 1px rgba(42, 14, 46, .06);
}

.rsv-alap-spektrum {
    display: grid;
    gap: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-6));
}

.rsv-alap-spektrum > * { min-width: 0; }

@media (min-width: 768px) {
    .rsv-alap-spektrum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/*
 * A KÉT OLDAL NEM KÁRTYA. Nincs körbefutó keret és nincs árnyék: lágy,
 * felülről induló brandfelület, amely a skálasáv alól „folyik le". A felső
 * élen futó vékony csík a sáv megfelelő pontjának színét viszi tovább.
 */
.rsv-alap-oszlop {
    position: relative;
    padding: clamp(var(--rsv-ter-6), 2.6vw, var(--rsv-ter-7))
             clamp(var(--rsv-ter-5), 2.4vw, var(--rsv-ter-6))
             clamp(var(--rsv-ter-5), 2.4vw, var(--rsv-ter-6));
    margin-top: var(--rsv-ter-7);
    border-radius: 0 0 var(--rsv-radius-lg) var(--rsv-radius-lg);
    border-top: 3px solid var(--rsv-brand-secondary);
    background: linear-gradient(
        180deg,
        var(--rsv-brand-soft) 0%,
        color-mix(in srgb, var(--rsv-brand-bare) 60%, #fff) 100%
    );
}

/* A szár: a skálasávtól az oszlop felső éléig. */
.rsv-alap-oszlop__szar {
    position: absolute;
    left: clamp(var(--rsv-ter-5), 2.4vw, var(--rsv-ter-6));
    top: calc(-1 * var(--rsv-ter-7));
    width: 2px;
    height: var(--rsv-ter-7);
    background: linear-gradient(
        180deg,
        rgba(141, 69, 162, 0) 0%,
        rgba(141, 69, 162, .45) 55%,
        var(--rsv-brand-secondary) 100%
    );
}

.rsv-alap-oszlop--jelek {
    border-top-color: color-mix(in srgb, var(--rsv-urgent) 78%, var(--rsv-brand-primary));
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--rsv-urgent) 8%, #fff) 0%,
        color-mix(in srgb, var(--rsv-urgent) 2%, #fff) 100%
    );
}

.rsv-alap-oszlop--jelek .rsv-alap-oszlop__szar {
    background: linear-gradient(
        180deg,
        rgba(165, 48, 69, 0) 0%,
        rgba(165, 48, 69, .4) 55%,
        color-mix(in srgb, var(--rsv-urgent) 78%, var(--rsv-brand-primary)) 100%
    );
}

.rsv-alap-oszlop__cim {
    margin: 0 0 var(--rsv-ter-4);
    font-size: var(--rsv-meret-h4);
    font-weight: 700;
    color: var(--rsv-brand-dark);
}

.rsv-alap-oszlop--jelek .rsv-alap-oszlop__cim { color: var(--rsv-urgent); }

/* A listatételek is levegősebbek: a blokk nem táblázat. */
.rsv-alap-oszlop .rsv-tunetlista { gap: var(--rsv-ter-4); }
.rsv-alap-oszlop .rsv-tunetlista li { font-size: var(--rsv-meret-torzs); }

/*
 * VISSZAFOGOTT SÜRGŐS LINK (átadó §5). Nem gomb: nem versenyez az elsődleges
 * CTA-val, de a sürgősségi színrendszert használja, és a
 * `/mikor-fordulj-orvoshoz` oldalra visz — soha nem e-mailre (ORVOSI §11).
 */
.rsv-alap-surgoslink {
    display: inline-flex;
    align-items: center;
    gap: var(--rsv-ter-2);
    min-height: 44px;
    color: var(--rsv-urgent);
    font-weight: 700;
    font-size: var(--rsv-meret-kicsi);
    text-decoration: underline;
    text-underline-offset: .2em;
}

.rsv-alap-surgoslink .ikon { --ikon-meret: 20px; flex: none; }

.rsv-alap-surgoslink:hover,
.rsv-alap-surgoslink:focus-visible {
    color: color-mix(in srgb, var(--rsv-urgent) 82%, var(--rsv-brand-dark));
}

/* 13.6 „Nem csak a klasszikus rizikócsoportokról van szó"
   --------------------------------------------------------------------------
   Széles, editorial sáv. ÚJ SZÁZALÉKOS STATISZTIKA IDE NEM KERÜLHET (átadó §6),
   ezért a blokk vizuálisan sem statisztikai kártya, hanem képes panel.
   -------------------------------------------------------------------------- */

.rsv-alap-kockazat { background: var(--rsv-surface-page); }

.rsv-alap-kockazat__panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    gap: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-7));
    align-items: center;
    /*
     * A BELSŐ TÉRKÖZ MOBILON SZŰKEBB. A H2 leghosszabb magyar összetett szava
     * („rizikócsoportokról") 320 px-en különben nem férne ki, és a globális
     * `overflow-wrap: break-word` szó KÖZBEN törné el. Az így nyert néhány
     * pixel elég ahhoz, hogy a szó egyben maradjon.
     */
    padding: clamp(var(--rsv-ter-4), 3vw, var(--rsv-ter-7));
    border-radius: clamp(var(--rsv-radius-lg), 2vw, 28px);
    background: linear-gradient(
        118deg,
        var(--rsv-brand-soft) 0%,
        var(--rsv-brand-bare) 54%,
        var(--rsv-surface-card) 100%
    );
    box-shadow: var(--rsv-arnyek-md), inset 0 0 0 1px rgba(141, 69, 162, .1);
}

.rsv-alap-kockazat__panel > * { min-width: 0; }

@media (min-width: 992px) {
    .rsv-alap-kockazat__panel { grid-template-columns: minmax(0, 54fr) minmax(0, 46fr); }
}

.rsv-alap-kockazat__szoveg > :last-child { margin-bottom: 0; }

.rsv-alap-kockazat__szoveg p { max-width: 52ch; }

/* 13.7 Terjedés-teaser és tüneti folyamatív
   --------------------------------------------------------------------------
   Két, egymáshoz hasonló, de SZÁNDÉKOSAN eltérő karakterű mini-diagram:
     - a terjedéslánc ikonos korongokkal dolgozik (átadó §7);
     - a tüneti folyamatív apró pontokkal, mert ott nincs három ikonszerű
       fogalom, és a merev nap-számozás tilos (átadó §8).

   Az állomásokat FINOM VONAL köti össze, nem chevron — ugyanaz az elv, mint a
   főoldal terjedés-blokkjában.
   -------------------------------------------------------------------------- */

/* 13.7/a A terjedéslánc
   --------------------------------------------------------------------------
   Átadó §7. A korábbi 64 px-es korongok 30 px-es ikonnal jelentéktelenek
   voltak a körülöttük lévő térhez képest. A folyamat most nagyobb, és a
   sorrendet HÁROM dolog együtt adja: a korongok mérete, a rajtuk ülő sorszám
   és a köztük futó vonal.

   NAGY `→` GLYPH NINCS — az átadó kifejezetten tiltja.
   -------------------------------------------------------------------------- */

.rsv-alap-lanc {
    --rsv-alap-koz: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-6));
    --rsv-korong: 96px;

    /*
     * AZ ÁLLOMÁSOK SZÁMA PARAMÉTER. A `/rsv` háromállomásos láncot használ, a
     * `/hogyan-terjed` ötöt — ugyanaz a komponens, nem két külön rendszer.
     * Az összekötő vonal végpontja ebből számolódik: N egyenlő oszlopnál az
     * első és az utolsó oszlop középvonala 50%/N távolságra van a két széltől.
     */
    --rsv-lanc-db: 3;

    position: relative;
    display: grid;
    gap: var(--rsv-alap-koz);
    list-style: none;
    margin: 0;
    padding: 0;
}

.rsv-alap-lanc > * { min-width: 0; }

@media (max-width: 767px) {
    /*
     * MOBIL: kompakt, LÉPCSŐS folyamat. A korongok egy függőleges vonalra
     * fűződnek fel — nincs vízszintes görgetés, és az érintési cél nagy marad.
     */
    .rsv-alap-lanc { --rsv-korong: 68px; }

    .rsv-alap-lanc::before {
        content: "";
        position: absolute;
        top: calc(var(--rsv-korong) / 2);
        bottom: calc(var(--rsv-korong) / 2);
        left: calc(var(--rsv-korong) / 2);
        width: 2px;
        transform: translateX(-1px);
        background: linear-gradient(
            180deg,
            rgba(141, 69, 162, .12) 0%,
            rgba(141, 69, 162, .38) 50%,
            rgba(141, 69, 162, .12) 100%
        );
    }
}

@media (min-width: 768px) {
    .rsv-alap-lanc {
        grid-template-columns: repeat(var(--rsv-lanc-db), minmax(0, 1fr));
    }

    /*
     * Az összekötő vonal az első és az utolsó korong középvonala között fut.
     * A korongok átlátszatlanok, tehát a vonal végét eltakarják.
     */
    .rsv-alap-lanc::before {
        content: "";
        position: absolute;
        top: calc(var(--rsv-korong) / 2);
        left: calc(50% / var(--rsv-lanc-db));
        right: calc(50% / var(--rsv-lanc-db));
        height: 2px;
        transform: translateY(-1px);
        background: linear-gradient(
            90deg,
            rgba(141, 69, 162, .12) 0%,
            rgba(141, 69, 162, .38) 22%,
            rgba(141, 69, 162, .38) 78%,
            rgba(141, 69, 162, .12) 100%
        );
    }
}

.rsv-alap-allomas {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--rsv-ter-4);
    min-width: 0;
}

@media (min-width: 768px) {
    .rsv-alap-allomas {
        flex-direction: column;
        gap: var(--rsv-ter-4);
        text-align: center;
    }
}

.rsv-alap-allomas__korong {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: var(--rsv-korong);
    height: var(--rsv-korong);
    border-radius: 50%;
    background: var(--rsv-surface-card);
    color: var(--rsv-brand-primary);
    box-shadow: var(--rsv-arnyek-md), inset 0 0 0 1px rgba(141, 69, 162, .18);
}

.rsv-alap-allomas__ikon { --ikon-meret: calc(var(--rsv-korong) * .46); }

/* A sorszám a korong peremén ül — kicsi, de egyértelmű sorrendjelölő. */
.rsv-alap-allomas__szam {
    position: absolute;
    right: -2px;
    bottom: -2px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--rsv-brand-primary);
    color: #fff;
    font-size: var(--rsv-meret-meta);
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 0 0 3px var(--rsv-brand-bare);
}

.rsv-alap-allomas__cim {
    font-size: var(--rsv-meret-h4);
    font-weight: 700;
    color: var(--rsv-brand-dark);
}

/* 13.7/b A tüneti folyamatív
   --------------------------------------------------------------------------
   Átadó §8. A három fázis külön-külön elveszett a körülötte lévő térben, ezért
   közös, finom brandpanelre került: a folyamatvonal így ténylegesen látszik,
   és a blokk aránya illeszkedik a szakasz méretéhez.

   MEREV NAP-SZÁMOZÁS TOVÁBBRA SINCS: a pontok sorszám nélküliek.
   -------------------------------------------------------------------------- */

.rsv-alap-ivpanel {
    padding: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-7));
    border-radius: clamp(var(--rsv-radius-lg), 2vw, 28px);
    background: linear-gradient(
        122deg,
        var(--rsv-brand-bare) 0%,
        var(--rsv-brand-soft) 100%
    );
    box-shadow: inset 0 0 0 1px rgba(141, 69, 162, .12);
}

.rsv-alap-iv {
    --rsv-alap-koz: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-6));
    --rsv-pont: 20px;

    position: relative;
    display: grid;
    gap: var(--rsv-alap-koz);
    list-style: none;
    margin: 0;
    padding: 0;
}

.rsv-alap-iv > * { min-width: 0; }

@media (max-width: 767px) {
    /* Mobilon a pontok egy függőleges vonalra fűződnek fel. */
    .rsv-alap-iv::before {
        content: "";
        position: absolute;
        top: calc(var(--rsv-pont) / 2);
        bottom: calc(var(--rsv-pont) / 2);
        left: calc(var(--rsv-pont) / 2);
        width: 2px;
        transform: translateX(-1px);
        background: linear-gradient(
            180deg,
            rgba(141, 69, 162, .5) 0%,
            rgba(141, 69, 162, .22) 100%
        );
    }
}

@media (min-width: 768px) {
    .rsv-alap-iv { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    /*
     * A pontok az oszlopok BAL SZÉLÉN ülnek, mert alattuk balra zárt szöveg
     * áll. A vonal ezért az első pont közepétől a harmadik pont közepéig fut.
     *
     * A jobb oldali eltolás levezetése (W = teljes szélesség, k = oszlopköz):
     *   a harmadik pont közepe  = 2 * ((W - 2k) / 3 + k) + pont/2
     *   a jobb szélétől mérve   = W/3 - 2k/3 - pont/2
     */
    .rsv-alap-iv::before {
        content: "";
        position: absolute;
        top: calc(var(--rsv-pont) / 2);
        left: calc(var(--rsv-pont) / 2);
        right: calc(33.3333% - (2 * var(--rsv-alap-koz) / 3) - (var(--rsv-pont) / 2));
        height: 2px;
        transform: translateY(-1px);
        background: linear-gradient(
            90deg,
            rgba(141, 69, 162, .5) 0%,
            rgba(141, 69, 162, .22) 100%
        );
    }
}

.rsv-alap-fazis {
    position: relative;
    min-width: 0;
    padding-left: calc(var(--rsv-pont) + var(--rsv-ter-4));
}

@media (min-width: 768px) {
    .rsv-alap-fazis {
        padding-left: 0;
        padding-top: calc(var(--rsv-pont) + var(--rsv-ter-4));
    }
}

.rsv-alap-fazis__pont {
    position: absolute;
    top: 4px;
    left: 0;
    width: var(--rsv-pont);
    height: var(--rsv-pont);
    border-radius: 50%;
    background: var(--rsv-surface-card);
    box-shadow: inset 0 0 0 4px var(--rsv-brand-secondary);
}

@media (min-width: 768px) {
    .rsv-alap-fazis__pont { top: 0; }
}

.rsv-alap-fazis__cim {
    margin: 0 0 var(--rsv-ter-2);
    font-size: var(--rsv-meret-h3);
    font-weight: 700;
    color: var(--rsv-brand-dark);
}

.rsv-alap-fazis__szoveg {
    margin: 0;
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
}

/* 13.8 Szezon + újrafertőződés
   --------------------------------------------------------------------------
   Átadó §9: EGY széles, Soft/Bare Lavender editorial blokk, két H3-mal.
   NINCS MEREV HÓNAPTARTOMÁNY — ezt a tartalomfájl őrzi (ORVOSI §7).
   -------------------------------------------------------------------------- */

.rsv-alap-szezon { background: var(--rsv-surface-page); }

.rsv-alap-szezon__panel {
    display: grid;
    gap: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-7));
    padding: clamp(var(--rsv-ter-6), 3.4vw, var(--rsv-ter-8));
    border-radius: clamp(var(--rsv-radius-lg), 2vw, 28px);
    background: linear-gradient(
        124deg,
        var(--rsv-brand-soft) 0%,
        var(--rsv-brand-bare) 62%,
        var(--rsv-brand-soft) 100%
    );
    box-shadow: inset 0 0 0 1px rgba(141, 69, 162, .12);
}

.rsv-alap-szezon__panel > * { min-width: 0; }

@media (min-width: 768px) {
    .rsv-alap-szezon__panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.rsv-alap-szezon__jel {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: var(--rsv-ter-4);
    border-radius: 50%;
    background: var(--rsv-surface-card);
    color: var(--rsv-brand-primary);
    --ikon-meret: 26px;
    box-shadow: var(--rsv-arnyek-sm);
}

.rsv-alap-szezon__cim {
    margin: 0 0 var(--rsv-ter-3);
    font-size: var(--rsv-meret-h3);
    font-weight: 700;
    color: var(--rsv-brand-dark);
}

.rsv-alap-szezon__szoveg {
    margin: 0;
    max-width: 46ch;
    color: var(--rsv-text-secondary);
}

/* 13.8/b „Mi történik, ha a gyermek megbetegszik?" — editorial panel
   --------------------------------------------------------------------------
   A szakasz korábban középre zárt, szűk olvasási hasábként lebegett a szekció
   közepén, és elveszett. Most balra zárt, önálló felületen ül.

   A jobb oldali dekoráció TISZTÁN CSS: koncentrikus, halvány brandívek. Nem
   kép, nem új asset, és nem hordoz jelentést.
   -------------------------------------------------------------------------- */

.rsv-alap-ellatas {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(var(--rsv-ter-6), 3.4vw, var(--rsv-ter-8));
    border-radius: clamp(var(--rsv-radius-lg), 2vw, 28px);
    background: linear-gradient(
        104deg,
        var(--rsv-brand-bare) 0%,
        var(--rsv-brand-soft) 62%,
        var(--rsv-brand-soft) 100%
    );
    box-shadow: inset 0 0 0 1px rgba(141, 69, 162, .12);
}

.rsv-alap-ellatas__torzs {
    position: relative;
    z-index: 1;
    max-width: 62ch;
}

.rsv-alap-ellatas__torzs > :last-child { margin-bottom: 0; }

/*
 * A KONCENTRIKUS ÍVEK. Ismétlődő radiális gradiens: egyetlen elem, nulla
 * extra kérés. Kis kijelzőn nem jelenik meg — ott a szöveg alá csúszna.
 */
.rsv-alap-ellatas__jel {
    display: none;
}

@media (min-width: 992px) {
    .rsv-alap-ellatas__jel {
        display: block;
        position: absolute;
        z-index: 0;
        right: -8%;
        top: 50%;
        width: 460px;
        height: 460px;
        transform: translateY(-50%);
        border-radius: 50%;
        background:
            radial-gradient(circle, rgba(141, 69, 162, .10) 0 1px, transparent 1px) 0 0 / 100% 100%,
            repeating-radial-gradient(
                circle at 50% 50%,
                rgba(141, 69, 162, 0) 0,
                rgba(141, 69, 162, 0) 46px,
                rgba(141, 69, 162, .14) 47px,
                rgba(141, 69, 162, 0) 48px
            );
        -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 40%, transparent 78%);
        mask-image: radial-gradient(circle at 50% 50%, #000 40%, transparent 78%);
    }
}

/* 13.9 Megelőzés — három út
   --------------------------------------------------------------------------
   ORVOSI GUARDRAIL: a maternális immunizáció az anya AKTÍV immunizációja, a
   monoklonális antitest PASSZÍV védelem, és nem klasszikus védőoltás
   (ORVOSI §6, §13). A terminológiát a tartalomfájl őrzi.

   A három út VIZUÁLISAN NEM RANGSOROLT — a blokk edukációs routing, nem
   profilaxis-ajánlás. Ami változott: a három panel korábban három egyforma
   Bootstrap-kártyának hatott. Most mindegyik a SAJÁT tartalmi ikonját viszi a
   közös sprite-ból, sorszámot és nagyobb címet kap, a felső élen pedig egy
   finom brandcsík fut.
   -------------------------------------------------------------------------- */

.rsv-alap-utak {
    display: grid;
    gap: clamp(var(--rsv-ter-4), 2.4vw, var(--rsv-ter-5));
    list-style: none;
    margin: 0;
    padding: 0;
}

.rsv-alap-utak > * { min-width: 0; }

@media (min-width: 992px) {
    .rsv-alap-utak { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.rsv-alap-ut {
    position: relative;
    padding: clamp(var(--rsv-ter-5), 2.4vw, var(--rsv-ter-6));
    border-radius: var(--rsv-radius-lg);
    background: var(--rsv-surface-card);
    box-shadow: var(--rsv-arnyek-sm), inset 0 0 0 1px rgba(141, 69, 162, .1);
}

/* Felső brandcsík: a paneleket összeköti, de nem teszi kártyássá. */
.rsv-alap-ut::before {
    content: "";
    position: absolute;
    left: clamp(var(--rsv-ter-5), 2.4vw, var(--rsv-ter-6));
    right: clamp(var(--rsv-ter-5), 2.4vw, var(--rsv-ter-6));
    top: 0;
    height: 3px;
    border-radius: 0 0 var(--rsv-radius-pill) var(--rsv-radius-pill);
    background: linear-gradient(
        90deg,
        var(--rsv-brand-secondary) 0%,
        rgba(141, 69, 162, .25) 100%
    );
}

.rsv-alap-ut__fej {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rsv-ter-4);
    margin-bottom: var(--rsv-ter-4);
}

.rsv-alap-ut__jel {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: var(--rsv-radius-md);
    background: var(--rsv-brand-soft);
    color: var(--rsv-brand-primary);
    --ikon-meret: 36px;
}

/* A sorszám dekoratív: a sorrendet a lista maga hordozza. */
.rsv-alap-ut__szam {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
    color: rgba(141, 69, 162, .26);
}

.rsv-alap-ut__cim {
    margin: 0 0 var(--rsv-ter-3);
    font-size: var(--rsv-meret-h3);
    font-weight: 700;
    color: var(--rsv-brand-dark);
}

.rsv-alap-ut__szoveg {
    margin: 0;
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
}

/* 13.10 Kiemelt cross-link panel (koraszülöttek)
   --------------------------------------------------------------------------
   Átadó §12: 2–3 mondat, FINANSZÍROZÁSI RÉSZLET NÉLKÜL. Az időérzékeny magyar
   állítások a `/koraszulottek` ág kanonikus tulajdonai (ORVOSI §7, §8).
   -------------------------------------------------------------------------- */

.rsv-alap-kiemelt {
    display: grid;
    gap: clamp(var(--rsv-ter-4), 2.4vw, var(--rsv-ter-6));
    align-items: start;
    padding: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-7));
    border-radius: clamp(var(--rsv-radius-lg), 2vw, 28px);
    background: linear-gradient(
        120deg,
        var(--rsv-brand-bare) 0%,
        var(--rsv-brand-soft) 100%
    );
    box-shadow: inset 0 0 0 1px rgba(141, 69, 162, .14);
}

.rsv-alap-kiemelt > * { min-width: 0; }

@media (min-width: 768px) {
    .rsv-alap-kiemelt { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
}

.rsv-alap-kiemelt__jel {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--rsv-surface-card);
    color: var(--rsv-brand-primary);
    --ikon-meret: 32px;
    box-shadow: var(--rsv-arnyek-sm);
}

.rsv-alap-kiemelt__cim {
    margin: 0 0 var(--rsv-ter-3);
    font-size: var(--rsv-meret-h3);
    font-weight: 700;
    color: var(--rsv-brand-dark);
}

.rsv-alap-kiemelt__szoveg {
    margin: 0;
    max-width: 62ch;
    color: var(--rsv-text-secondary);
}

/* 13.11 „Ha csak három dolgot jegyzel meg" — Deep Plum memóriablokk
   --------------------------------------------------------------------------
   Átadó §13: fehér szöveg, nagy számok, NINCS dekoratív kép. A `--rsv-brand-dark`
   a rendszerben eleve a sötét felület tokenje (kézikönyv §3.1) — új szín nem
   keletkezett. Ez az oldal egyetlen sötét felülete a lábléc előtt.
   -------------------------------------------------------------------------- */

.rsv-alap-harom {
    padding-block: var(--rsv-szekcio-ter);
    background: var(--rsv-brand-dark);
    color: #fff;
}

.rsv-alap-harom__cim {
    margin: 0 0 clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-7));
    color: #fff;
}

.rsv-alap-harom__lista {
    display: grid;
    gap: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-7));
    list-style: none;
    margin: 0;
    padding: 0;
}

.rsv-alap-harom__lista > * { min-width: 0; }

@media (min-width: 768px) {
    .rsv-alap-harom__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.rsv-alap-harom__elem {
    display: flex;
    flex-direction: column;
    gap: var(--rsv-ter-3);
    min-width: 0;
}

/*
 * A NAGY SORSZÁM DEKORATÍV: a sorrendet a lista maga hordozza, ezért a
 * képernyőolvasó számára el van rejtve. A kontrasztja szándékosan alacsonyabb
 * — nem ez a jelentéshordozó elem.
 */
.rsv-alap-harom__szam {
    font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
    color: rgba(241, 230, 244, .38);
}

.rsv-alap-harom__szoveg {
    font-size: var(--rsv-meret-lead);
    font-weight: 600;
    line-height: 1.45;
    color: #fff;
}

/* 13.12 „Merre tovább?" — négy valódi routing kártya
   --------------------------------------------------------------------------
   Átadó §14. Ez az oldal legfontosabb továbbvezető pontja, ezért LÁTHATÓAN
   erősebb, mint a GYIK: nagy, teljes felületükön kattintható kártyák,
   desktopon 2×2-ben, mobilon egy oszlopban.

   NINCS NYÍL-GLYPH. Az affordance-t a kártya mérete, a hover-emelés és az
   alsó, kifutó jelzővonal adja.

   SZÁNDÉKOSAN NEM a főoldali hat helyzetkártya másolata: ott illusztrációk
   vannak, itt tipográfia és egyetlen tartalmi ikon.
   -------------------------------------------------------------------------- */

.rsv-alap-tovabbszekcio {
    background: linear-gradient(
        180deg,
        var(--rsv-surface-card) 0%,
        var(--rsv-brand-bare) 100%
    );
}

.rsv-alap-tovabb__cim { margin-bottom: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-6)); }

.rsv-alap-tovabb {
    display: grid;
    gap: clamp(var(--rsv-ter-4), 2.2vw, var(--rsv-ter-5));
    list-style: none;
    margin: 0;
    padding: 0;
}

.rsv-alap-tovabb > * { min-width: 0; }

@media (min-width: 768px) {
    /* 2×2: a négy elem így nagy marad, és nem kap dashboard-jelleget. */
    .rsv-alap-tovabb { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/*
 * A TELJES KÁRTYA EGYETLEN LINKFELÜLET: egyetlen tabstop, nagy érintési cél.
 */
.rsv-alap-tovabb__kartya {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--rsv-ter-2);
    height: 100%;
    min-height: 168px;
    padding: clamp(var(--rsv-ter-5), 2.6vw, var(--rsv-ter-6));
    border-radius: clamp(var(--rsv-radius-lg), 1.6vw, 22px);
    background: var(--rsv-surface-card);
    box-shadow: var(--rsv-arnyek-sm), inset 0 0 0 1px var(--rsv-border-default);
    text-decoration: none;
    transition: box-shadow .2s ease, transform .2s ease, background-color .2s ease;
}

.rsv-alap-tovabb__jel {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: var(--rsv-ter-3);
    border-radius: var(--rsv-radius-md);
    background: var(--rsv-brand-soft);
    color: var(--rsv-brand-primary);
    --ikon-meret: 28px;
    transition: background-color .2s ease;
}

.rsv-alap-tovabb__helyzet {
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
}

.rsv-alap-tovabb__cel {
    font-size: var(--rsv-meret-h3);
    font-weight: 700;
    line-height: var(--rsv-sormagassag-cim);
    color: var(--rsv-brand-dark);
    transition: color .2s ease;
}

/* --------------------------------------------------------------------------
   ROUTING — „NAGY" VARIÁNS
   --------------------------------------------------------------------------
   A 2026-08-28-i vizuális review szerint a négy routing-kártya túl kicsi volt,
   és elveszett az oldal végén.

   A NAGYÍTÁS SZÁNDÉKOSAN MÓDOSÍTÓ, NEM A KÖZÖS OSZTÁLY ÁTÍRÁSA. A
   `.rsv-alap-tovabb` komponenst a `/rsv`, a `/hogyan-terjed`, a
   `/kockazati-csoportok` és a `/tunetek` is használja — azok LEZÁRT oldalak,
   ezért egyetlen pixelük sem mozdulhat. A `--nagy` jelölést csak a
   `/rsv-szezon` viseli.
   -------------------------------------------------------------------------- */

.rsv-alap-tovabb__cim--nagy {
    font-size: var(--rsv-meret-h2);
}

.rsv-alap-tovabb--nagy {
    gap: clamp(var(--rsv-ter-5), 2.4vw, var(--rsv-ter-6));
}

.rsv-alap-tovabb--nagy .rsv-alap-tovabb__kartya {
    min-height: 220px;
    padding: clamp(var(--rsv-ter-6), 3vw, var(--rsv-ter-7));
    gap: var(--rsv-ter-3);
}

.rsv-alap-tovabb--nagy .rsv-alap-tovabb__jel {
    width: 64px;
    height: 64px;
    margin-bottom: var(--rsv-ter-4);
    --ikon-meret: 34px;
}

.rsv-alap-tovabb--nagy .rsv-alap-tovabb__helyzet {
    font-size: var(--rsv-meret-torzs);
}

.rsv-alap-tovabb--nagy .rsv-alap-tovabb__cel {
    font-size: clamp(1.375rem, 1.15rem + .9vw, 1.75rem);
}

/* A kifutó jelzővonal a nyíl helyett. */
.rsv-alap-tovabb__vonal {
    margin-top: auto;
    width: 40px;
    height: 3px;
    border-radius: var(--rsv-radius-pill);
    background: var(--rsv-brand-secondary);
    opacity: .5;
    transition: width .2s ease, opacity .2s ease;
}

.rsv-alap-tovabb__kartya:hover,
.rsv-alap-tovabb__kartya:focus-visible {
    background: var(--rsv-brand-bare);
    box-shadow: var(--rsv-arnyek-md), inset 0 0 0 1px var(--rsv-border-interaktiv);
}

.rsv-alap-tovabb__kartya:hover .rsv-alap-tovabb__cel,
.rsv-alap-tovabb__kartya:focus-visible .rsv-alap-tovabb__cel {
    color: var(--rsv-brand-primary);
}

.rsv-alap-tovabb__kartya:hover .rsv-alap-tovabb__vonal,
.rsv-alap-tovabb__kartya:focus-visible .rsv-alap-tovabb__vonal {
    width: 64px;
    opacity: 1;
}

.rsv-alap-tovabb__kartya:hover .rsv-alap-tovabb__jel {
    background: color-mix(in srgb, var(--rsv-brand-soft) 70%, var(--rsv-brand-secondary));
}

/* Az emelés CSAK egérrel vezérelt eszközön — érintésen zavaró lenne. */
@media (hover: hover) and (pointer: fine) {
    .rsv-alap-tovabb__kartya:hover { transform: translateY(-3px); }
}

/* 13.13 Szószedet
   --------------------------------------------------------------------------
   Átadó §16: desktopon KÉT oszlop, mobilon egy — nem kártyák tucatjai.
   Valódi `<dl>`, tehát a képernyőolvasó fogalom–magyarázat párokként jelenti be.

   OLVASHATÓSÁG: a bejegyzések korábban túl tömörek és kicsik voltak. A
   fogalomcím nagyobb lett, a definíció törzsméretű, a sorköz lazább, és
   minden bejegyzés körül több a függőleges tér. Az elválasztást FINOM
   HAJSZÁLVONAL adja — nem lebegő kártyák.

   A `:target` kiemelés CSS-BŐL jön, JavaScript nélkül. Ezért az info-ikonos
   ugrás billentyűzettel és mobilon is működik (az átadó kifejezetten tiltja a
   „tooltip-only" megoldást).

   FONTOS: a `:target` állandó bal oldali jelölést IS ad, nemcsak animált
   villanást. Így `prefers-reduced-motion` mellett — ahol a globális szabály az
   animációt gyakorlatilag kikapcsolja — a látogató akkor is látja, melyik
   bejegyzéshez érkezett.
   -------------------------------------------------------------------------- */

.rsv-alap-szoszedet {
    display: grid;
    gap: 0 clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-8));
    margin: 0;
}

.rsv-alap-szoszedet > * { min-width: 0; }

@media (min-width: 992px) {
    .rsv-alap-szoszedet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.rsv-alap-fogalom {
    padding: clamp(var(--rsv-ter-5), 2.2vw, var(--rsv-ter-6)) var(--rsv-ter-5);
    border-top: 1px solid var(--rsv-border-default);
    border-left: 3px solid transparent;
    border-radius: 0 var(--rsv-radius-md) var(--rsv-radius-md) 0;
    /* A scroll-margó a lebegő fejléc alá ugrást előzi meg. */
    scroll-margin-top: calc(var(--rsv-fejlec-magassag) + var(--rsv-ter-5));
    transition: border-left-color .2s ease, background-color .2s ease;
}

/* A két oszlop első bejegyzése fölött nincs vonal. */
.rsv-alap-fogalom:first-child { border-top: 0; }

@media (min-width: 992px) {
    .rsv-alap-fogalom:nth-child(2) { border-top: 0; }
}

.rsv-alap-fogalom__cim {
    margin: 0 0 var(--rsv-ter-2);
    font-size: var(--rsv-meret-h3);
    font-weight: 700;
    line-height: 1.3;
    color: var(--rsv-brand-dark);
}

.rsv-alap-fogalom__szoveg {
    margin: 0;
    max-width: 46ch;
    font-size: var(--rsv-meret-torzs);
    line-height: var(--rsv-sormagassag-torzs);
    color: var(--rsv-text-secondary);
}

/*
 * A CÉLBEJEGYZÉS KIEMELÉSE ÁLLANDÓ, NEM VILLANÁS.
 *
 * Korábban egy 2,6 másodperces animáció adta a Soft Lavender hátteret, ami
 * utána eltűnt: aki lassabban görgetett vagy háttérfülön nyitotta meg a
 * hivatkozást, már semmit nem látott belőle. Most a kiemelés kitart, amíg a
 * horgony aktív — és mivel tisztán CSS `:target`, `prefers-reduced-motion`
 * mellett és JavaScript nélkül is pontosan ugyanígy működik.
 */
.rsv-alap-fogalom:target {
    background: var(--rsv-brand-soft);
    border-left-color: var(--rsv-brand-secondary);
}

/* 13.14 Források + disclaimer
   --------------------------------------------------------------------------
   ORVOSI §21: olvasható, rövid lista — a főszöveg nem akadémikus.
   BIZALMAS belső anyag nem szerepelhet forrásként (ORVOSI §5).
   -------------------------------------------------------------------------- */

.rsv-alap-forrasok__cim {
    font-size: var(--rsv-meret-h3);
    margin-bottom: var(--rsv-ter-4);
}

.rsv-alap-forrasok__lista {
    margin: var(--rsv-ter-3) 0 clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-6));
    padding-left: var(--rsv-ter-5);
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
}

.rsv-alap-forrasok__lista li + li { margin-top: var(--rsv-ter-2); }

.rsv-alap-forrasok__disclaimer {
    display: flex;
    align-items: flex-start;
    gap: var(--rsv-ter-3);
    margin: 0;
    padding: var(--rsv-ter-4) var(--rsv-ter-5);
    border-radius: var(--rsv-radius-md);
    background: var(--rsv-surface-card);
    box-shadow: inset 0 0 0 1px rgba(141, 69, 162, .14);
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
}

.rsv-alap-forrasok__disclaimer .ikon {
    --ikon-meret: 20px;
    flex: none;
    margin-top: 2px;
    color: var(--rsv-brand-secondary);
}


/* --------------------------------------------------------------------------
   14. A `/hogyan-terjed` ALOLDAL — „Hogyan terjed az RSV?"
   --------------------------------------------------------------------------
   Kanonikus forrás: `docs/RSVIRUS_HOGYAN_TERJED_ATADO.md`.

   A `/rsv` A LEZÁRT ALOLDAL-MINTA. Ez a szakasz SZÁNDÉKOSAN rövid: a hero, a
   gyorsnavigáció, a szekcióritmus, a képmélység, a folyamatlánc, az insight-
   panel, a routing kártyák, a szószedet és a forrásblokk MIND a 13. szakasz
   már meglévő komponensei. Itt csak az él, ami ezen az oldalon valóban új:

     - a lánc ötállomásos, leírásos változata;
     - a jelölő ikonsor a két editorial szövegblokkhoz;
     - a három nagy felületi időadat;
     - a bejutási kapuk;
     - a lappangás/fertőzőképesség időblokkjai;
     - a családi terjedés útvonala;
     - a „beteg testvér" checklist;
     - a lánc megszakításának hat lépése.

   ÚJ SZÍNPALETTA NEM KELETKEZETT: minden érték a 2. szakasz tokenjeiből vagy
   azok `rgba()` / `color-mix()` alakjából jön. A csomag nagy SVG-inek beégetett
   hexei is a projekt tokenjeire lettek cserélve (kézikönyv §21).
   -------------------------------------------------------------------------- */

/* 14.1 Hero-kiegészítés
   --------------------------------------------------------------------------
   A hero geometriája a `/rsv`-ből jön. Egyetlen eltérés: ezen az oldalon a
   lead KÉT bekezdésből áll, ezért a második halkabb, kisebb törzsszöveg.
   -------------------------------------------------------------------------- */

.rsv-alaphero__lead-masodik {
    max-width: 56ch;
    margin: var(--rsv-ter-4) 0 0;
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
}

/*
 * A HERO KÉPI EGYENSÚLYA — CSAK EZEN AZ OLDALON.
 *
 * A `/rsv` hero arányai LEZÁRTAK, ezért nem azokat állítjuk: a módosító
 * osztály csak ehhez a heróhoz tartozik.
 *
 * MIÉRT KELL? A `/rsv` mastere 1448×1086 (4:3), ez a master viszont
 * 1540×856 (kb. 16:9). Ugyanabban a hasábban tehát ez a kép jóval
 * alacsonyabb: 1440 px-en 701×389 px lett, miközben a bal oldali copy
 * tömege sokkal nagyobb volt. A hasáb bővítése és a szűkebb köz mindkét
 * irányban növeli a képet — az asszet arányához nem nyúlunk.
 *
 * Mért hatás 1440 px-en: 701 -> kb. 800 px szélesség (+14%), a látható
 * képfelület kb. +30%. A szövegoszlop 597 -> kb. 512 px, ami a H1-nek és a
 * 56ch-re korlátozott leadnek továbbra is bőven elég.
 */
@media (min-width: 992px) {
    .rsv-alaphero--terjed .rsv-alaphero__racs {
        grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
        gap: clamp(var(--rsv-ter-5), 2.2vw, var(--rsv-ter-6));
    }
}

/*
 * 1200 px-től kap a vizuál valóban nagy hasábot. A 992–1199 sávban ez a
 * szövegoszlopot 365 px-re szorítaná, ami a H1-nek már kevés.
 */
@media (min-width: 1200px) {
    .rsv-alaphero--terjed .rsv-alaphero__racs {
        grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
    }
}

/* 14.2 A fertőzés útja — ötállomásos lánc
   --------------------------------------------------------------------------
   A komponens a 13.7/a `.rsv-alap-lanc`; itt csak az állomásszámot állítjuk,
   és minden állomás LEÍRÁST is kap (a `/rsv` változata csak feliratot visz).

   A csomag SVG-je a lánc MÖGÖTT, dekoratív háttérként ül. Vizuális támasz,
   nem információforrás: minden lépés szövege HTML-ben is ott van (átadó §5).
   -------------------------------------------------------------------------- */

.rsv-terjed-lancpanel {
    --rsv-terjed-panelter: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-7));

    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: var(--rsv-terjed-panelter);
    border-radius: clamp(var(--rsv-radius-lg), 2vw, 28px);
    background: linear-gradient(
        124deg,
        var(--rsv-brand-bare) 0%,
        var(--rsv-surface-card) 62%,
        var(--rsv-brand-bare) 100%
    );
    box-shadow: inset 0 0 0 1px rgba(141, 69, 162, .1);
}

/*
 * A HÁTTÉR-SVG PONTOSAN A KORONGOK TENGELYÉRE IGAZÍTVA.
 *
 * A csomag ábráján öt állomás van, a körök a 1600-as viewBox 11,25 / 30,6 /
 * 50 / 69,4 / 88,75%-ánál — a HTML-lánc öt egyenlő oszlopának középvonala
 * pedig 10 / 30 / 50 / 70 / 90%-nál. A kettő gyakorlatilag fedi egymást,
 * ezért az ábra nem külön rajz a szöveg mögött, hanem a lánc SAJÁT vezetővonala.
 *
 * A függőleges igazítás azért működik minden szélességen, mert az ábra körei
 * pontosan a saját magasságának 50%-ánál ülnek: elég a korongsor középvonalára
 * középre húzni. A panel `overflow: hidden`-je vágja a kilógó részt.
 *
 * Kis kijelzőn nem jelenik meg: ott a lánc függőleges, és a vízszintes ábra
 * semmit nem támasztana alá — csak zajt adna.
 */
.rsv-terjed-lancpanel__abra { display: none; }

@media (min-width: 992px) {
    .rsv-terjed-lancpanel__abra {
        display: block;
        position: absolute;
        z-index: 0;
        left: var(--rsv-terjed-panelter);
        right: var(--rsv-terjed-panelter);
        top: calc(var(--rsv-terjed-panelter) + (var(--rsv-korong, 96px) / 2));
        transform: translateY(-50%);
        opacity: 1;
    }

    .rsv-terjed-lancpanel__abra svg {
        display: block;
        width: 100%;
        height: auto;
    }

    /*
     * A komponens saját, vékony összekötő vonala itt FÖLÖSLEGES: az ábra
     * ívelt vezetővonala veszi át a szerepét. Két vonal egymáson zajt adna.
     */
    .rsv-terjed-lanc::before { display: none; }
}

.rsv-terjed-lanc {
    position: relative;
    z-index: 1;
}

@media (min-width: 768px) {
    /* Öt állomás — a közös komponens ebből számolja az összekötő vonalat is. */
    .rsv-terjed-lanc { --rsv-lanc-db: 5; }
}

@media (min-width: 768px) and (max-width: 1199px) {
    /* Öt oszlop ebben a sávban szűk: kisebb korong, hogy a felirat kiférjen. */
    .rsv-terjed-lanc { --rsv-korong: 72px; }
}

.rsv-terjed-allomas__torzs {
    display: block;
    min-width: 0;
}

.rsv-terjed-allomas__szoveg {
    display: block;
    margin-top: var(--rsv-ter-2);
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
}

/* 14.3 Editorial szövegblokk jelölő ikonsorral
   --------------------------------------------------------------------------
   A „köhögés/tüsszentés" és a „kéz/tárgyak" szakasz. Az ikonok DEKORATÍVAK:
   a jelentést a bekezdések hordozzák, ezért a lista `aria-hidden` elemeket
   tartalmaz — a feliratuk viszont látható, hogy a vizuális olvasó is értse.
   -------------------------------------------------------------------------- */

.rsv-terjed-ketto {
    align-items: center;
    gap: clamp(var(--rsv-ter-5), 3.2vw, var(--rsv-ter-7));
}

@media (min-width: 992px) {
    .rsv-terjed-ketto { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
    .rsv-terjed-ketto.rsv-ketto--forditott { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }

    /*
     * A CSALÁDI SZAKASZ VALÓDI EDITORIAL SPLIT — kb. 47/53.
     *
     * A köhögés- és a kéz-szakaszban a jobb hasáb csak három jelölő ikont
     * visz, ott a szűkebb arány helyes. Itt viszont raszterkép áll benne, és
     * a 0,85fr-es hasábban bélyegkép-hatású lett (1440 px-en 490 px). Ezért
     * kap saját módosítót: a testvérszakaszok aránya változatlan.
     */
    .rsv-terjed-ketto--csalad.rsv-ketto--forditott {
        /*
         * A `--forditott` változatban a VIZUÁL az ELSŐ hasáb (order: -1),
         * ezért a nagyobb érték az első helyen áll.
         */
        grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
        gap: clamp(var(--rsv-ter-5), 2.6vw, var(--rsv-ter-7));
    }
}

.rsv-terjed-jelek {
    display: grid;
    gap: var(--rsv-ter-4);
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}

@media (min-width: 480px) and (max-width: 991px) {
    .rsv-terjed-jelek { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.rsv-terjed-jel {
    display: flex;
    align-items: center;
    gap: var(--rsv-ter-4);
    min-width: 0;
    padding: var(--rsv-ter-4) var(--rsv-ter-5);
    border-radius: var(--rsv-radius-lg);
    background: var(--rsv-surface-card);
    box-shadow: var(--rsv-arnyek-sm), inset 0 0 0 1px rgba(141, 69, 162, .1);
}

@media (min-width: 480px) and (max-width: 991px) {
    .rsv-terjed-jel {
        flex-direction: column;
        text-align: center;
        gap: var(--rsv-ter-3);
    }
}

.rsv-terjed-jel__korong {
    flex: none;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: var(--rsv-radius-md);
    background: var(--rsv-brand-soft);
    color: var(--rsv-brand-primary);
    --ikon-meret: 32px;
}

.rsv-terjed-jel__cim {
    min-width: 0;
    font-size: var(--rsv-meret-h4);
    font-weight: 700;
    color: var(--rsv-brand-dark);
}

/* 14.4 Felületi fennmaradás — az oldal legerősebb adatblokkja
   --------------------------------------------------------------------------
   Átadó §6: a három szám legyen az oldal egyik legerősebb információs eleme.
   Ezért a `--rsv-meret-h1`-nél is nagyobb, saját léptékű érték-tipográfia,
   fehér lapon, Soft Lavender szekcióháttéren.

   A számok HTML-ben vannak — a csomag SVG-je nem információforrás.
   -------------------------------------------------------------------------- */

.rsv-terjed-adatok {
    display: grid;
    gap: clamp(var(--rsv-ter-4), 2.4vw, var(--rsv-ter-5));
    list-style: none;
    margin: 0;
    padding: 0;
}

.rsv-terjed-adatok > * { min-width: 0; }

@media (min-width: 768px) {
    .rsv-terjed-adatok { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.rsv-terjed-adat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    padding: clamp(var(--rsv-ter-5), 2.6vw, var(--rsv-ter-7));
    border-radius: clamp(var(--rsv-radius-lg), 1.6vw, 24px);
    background: var(--rsv-surface-card);
    box-shadow: var(--rsv-arnyek-md), inset 0 0 0 1px rgba(141, 69, 162, .1);
}

.rsv-terjed-adat__jel {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: var(--rsv-ter-4);
    border-radius: var(--rsv-radius-md);
    background: var(--rsv-brand-soft);
    color: var(--rsv-brand-primary);
    --ikon-meret: 32px;
}

/* A NAGY SZÁM. Saját lépték: ez az oldal információs csúcspontja. */
.rsv-terjed-adat__ertek {
    font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--rsv-brand-primary);
}

.rsv-terjed-adat__cim {
    margin-top: var(--rsv-ter-2);
    font-size: var(--rsv-meret-h4);
    font-weight: 700;
    color: var(--rsv-brand-dark);
}

.rsv-terjed-adat__szoveg {
    margin-top: var(--rsv-ter-3);
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
}

/* A szakaszt záró, halkabb magyarázó mondat. */
.rsv-terjed-zaras {
    max-width: 72ch;
    margin: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-6)) 0 0;
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
}

/* 14.5 Bejutási kapuk
   --------------------------------------------------------------------------
   Átadó §7: három tartalmi elem, NINCS anatómiai atlasz-hatás. A csomag
   SVG-je dekoratív kísérő a lista mellett, nem a tartalom hordozója.
   -------------------------------------------------------------------------- */

.rsv-terjed-kapuk {
    display: grid;
    gap: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-7));
    align-items: center;
}

.rsv-terjed-kapuk > * { min-width: 0; }

@media (min-width: 992px) {
    .rsv-terjed-kapuk { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}

/*
 * Az ábra keretét a CSS adja: az SVG saját, lekerekített háttérlapja kikerült,
 * hogy a sarokkerekítés és a felület a design tokenekből jöjjön.
 */
.rsv-terjed-kapuk__abra { display: none; }

@media (min-width: 992px) {
    .rsv-terjed-kapuk__abra {
        display: block;
        line-height: 0;
        padding: clamp(var(--rsv-ter-5), 2.4vw, var(--rsv-ter-6));
        border-radius: clamp(var(--rsv-radius-lg), 2vw, 28px);
        background: var(--rsv-brand-bare);
        box-shadow: inset 0 0 0 1px var(--rsv-border-default);
    }

    .rsv-terjed-kapuk__abra svg {
        display: block;
        width: 100%;
        height: auto;
    }
}

.rsv-terjed-kapulista {
    display: grid;
    gap: var(--rsv-ter-4);
    list-style: none;
    margin: 0;
    padding: 0;
}

.rsv-terjed-kapulista > * { min-width: 0; }

.rsv-terjed-kapu {
    position: relative;
    min-width: 0;
    padding: clamp(var(--rsv-ter-4), 2vw, var(--rsv-ter-5))
             clamp(var(--rsv-ter-4), 2vw, var(--rsv-ter-5))
             clamp(var(--rsv-ter-4), 2vw, var(--rsv-ter-5))
             calc(56px + var(--rsv-ter-5));
    border-radius: var(--rsv-radius-lg);
    background: var(--rsv-brand-bare);
    box-shadow: inset 0 0 0 1px var(--rsv-border-default);
}

.rsv-terjed-kapu__jel {
    position: absolute;
    left: clamp(var(--rsv-ter-4), 2vw, var(--rsv-ter-5));
    top: clamp(var(--rsv-ter-4), 2vw, var(--rsv-ter-5));
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--rsv-radius-md);
    background: var(--rsv-surface-card);
    color: var(--rsv-brand-primary);
    --ikon-meret: 26px;
}

.rsv-terjed-kapu__cim {
    margin: 0 0 var(--rsv-ter-2);
    font-size: var(--rsv-meret-h4);
    font-weight: 700;
    color: var(--rsv-brand-dark);
}

.rsv-terjed-kapu__szoveg {
    margin: 0;
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
}

/* 14.6 Lappangási idő és fertőzőképesség
   --------------------------------------------------------------------------
   Átadó §8: három nagy időadat.

   ORVOSI GUARDRAIL: az „Akár 4 hét" fölött MINDIG ott áll a „bizonyos
   súlyosabb esetekben" kontextuscímke. Ez nem dísz: a szám nélküle
   félrevezető lenne, ezért a kiemelése is erősebb, mint egy szemöldöké.
   -------------------------------------------------------------------------- */

.rsv-terjed-idopanel {
    position: relative;
    isolation: isolate;
    padding: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-7));
    border-radius: clamp(var(--rsv-radius-lg), 2vw, 28px);
    background: linear-gradient(
        120deg,
        var(--rsv-surface-card) 0%,
        var(--rsv-brand-bare) 100%
    );
    box-shadow: inset 0 0 0 1px rgba(141, 69, 162, .12);
}

.rsv-terjed-idopanel__abra { display: none; }

@media (min-width: 992px) {
    .rsv-terjed-idopanel__abra {
        display: block;
        margin-bottom: clamp(var(--rsv-ter-5), 2.4vw, var(--rsv-ter-6));
        line-height: 0;
        opacity: .7;
    }

    .rsv-terjed-idopanel__abra svg {
        display: block;
        width: 100%;
        height: auto;
    }
}

/*
 * A KÉT KÉRDÉS A BLOKK KÖZÖS BEVEZETŐJE.
 *
 * Korábban a kérdések a panelek fölé ékelődtek, és ettől a három időadat
 * lépcsőzetesen állt: eltérő magasságú kérdéscímek miatt sem az ikonok, sem a
 * nagy számok alapvonala nem esett egybe. A kérdések így a szekciófejbe
 * kerültek, a rács pedig szabályos maradhat.
 */
.rsv-terjed-idokerdesek {
    display: grid;
    gap: var(--rsv-ter-2);
    list-style: none;
    margin: var(--rsv-ter-4) 0 0;
    padding: 0;
    font-size: var(--rsv-meret-lead);
    line-height: 1.5;
    color: var(--rsv-text-secondary);
}

.rsv-terjed-idok {
    display: grid;
    gap: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-6));
    list-style: none;
    margin: 0;
    padding: 0;
}

.rsv-terjed-idok > * { min-width: 0; }

@media (min-width: 768px) {
    /* HÁROM EGYENRANGÚ OSZLOP — nem „auto-fit", hogy a geometria kötött legyen. */
    .rsv-terjed-idok { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/*
 * MINDEN PANEL AZONOS SZERKEZETŰ. A belső elemek sorrendje és térköze kötött,
 * ezért az ikonok, a számok és a címkék alapvonala panelenként egybeesik.
 */
.rsv-terjed-ido {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.rsv-terjed-ido__jel {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--rsv-brand-soft);
    color: var(--rsv-brand-primary);
    --ikon-meret: 26px;
}

/*
 * A KONTEXTUSSOR AKKOR IS HELYET FOGLAL, HA ÜRES.
 *
 * Megszorítást csak a harmadik adat kap („bizonyos súlyosabb esetekben").
 * Ha a sor a másik két panelről hiányozna, azok nagy száma feljebb csúszna, és
 * a három érték alapvonala elválna. A fix magasság ezt zárja ki; az üres sor
 * `aria-hidden`, tehát a képernyőolvasó számára nem létezik.
 */
.rsv-terjed-ido__kontextussor {
    display: flex;
    align-items: center;
    min-height: 30px;
    margin-top: var(--rsv-ter-4);
}

/*
 * SZŰK HÁROMOSZLOPOS SÁV. A megszorítás-címke egy sorban 216 px széles; a
 * hasáb ennél keskenyebb 768 és kb. 815 px között, ott tehát KÉT sorba tör
 * (mérve: 43 px). A fenntartott sor magassága itt ehhez igazodik — enélkül
 * csak a harmadik panel száma csúszna lejjebb, és elválna a három alapvonal.
 * 820 px fölött a címke ismét egy sor, ezért ott a szűkebb érték marad.
 */
@media (min-width: 768px) and (max-width: 819px) {
    .rsv-terjed-ido__kontextussor { min-height: 47px; }
}

/*
 * A KÖTELEZŐ KONTEXTUSCÍMKE. Warning-tónusú, mert megszorítást közöl — de
 * nem sürgősségi (az a triázs-tartalom vizuális nyelve, kézikönyv §13).
 */
.rsv-terjed-ido__kontextus {
    display: inline-block;
    padding: var(--rsv-ter-1) var(--rsv-ter-3);
    border-radius: var(--rsv-radius-pill);
    background: color-mix(in srgb, var(--rsv-warning) 12%, #fff);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rsv-warning) 32%, #fff);
    font-size: var(--rsv-meret-meta);
    font-weight: 700;
    line-height: 1.35;
    color: var(--rsv-warning);
}

.rsv-terjed-ido__ertek {
    margin-top: var(--rsv-ter-3);
    font-size: clamp(2rem, 1.3rem + 2.6vw, 3rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.03em;
    color: var(--rsv-brand-primary);
}

.rsv-terjed-ido__cimke {
    margin-top: var(--rsv-ter-2);
    font-size: var(--rsv-meret-h4);
    font-weight: 700;
    color: var(--rsv-brand-dark);
}

/*
 * SZŰK HÁROMOSZLOPOS SÁV — ugyanaz az elv, mint a kontextussornál.
 * 1024 px alatt a hosszabb címkék („Tipikus fertőzőképesség", „Elhúzódó
 * fertőzőképesség") két sorba törnek, a rövid „Lappangási idő" viszont nem.
 * A címke ezért ebben a sávban két sornyi helyet foglal, hogy alatta a
 * magyarázó mondat mindhárom panelen ugyanott kezdődjön. 1024 px fölött
 * minden címke egy sor, ott a fenntartás fölösleges lenne.
 */
@media (min-width: 768px) and (max-width: 1023px) {
    .rsv-terjed-ido__cimke {
        min-height: calc(2 * var(--rsv-meret-h4) * var(--rsv-sormagassag-torzs));
    }
}

.rsv-terjed-ido__szoveg {
    margin-top: var(--rsv-ter-3);
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
}


/* 14.7 „Ki adhatja tovább?" — két insight panel egymás mellett
   --------------------------------------------------------------------------
   A panel maga a 13.10 `.rsv-alap-kiemelt`; itt csak a két panel elrendezése
   és a kiemelt „Igen." válasz stílusa új.
   -------------------------------------------------------------------------- */

.rsv-terjed-panelek {
    display: grid;
    gap: clamp(var(--rsv-ter-4), 2.4vw, var(--rsv-ter-5));
}

.rsv-terjed-panelek > * { min-width: 0; }

@media (min-width: 992px) {
    .rsv-terjed-panelek { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Két panel egymás mellett: az ikon a cím fölé kerül, nem mellé. */
    .rsv-terjed-panel { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

.rsv-terjed-panel__valasz {
    margin: 0 0 var(--rsv-ter-3);
    font-size: var(--rsv-meret-lead);
    font-weight: 700;
    color: var(--rsv-brand-primary);
}

.rsv-terjed-panel .rsv-alap-kiemelt__szoveg + .rsv-alap-kiemelt__szoveg {
    margin-top: var(--rsv-ter-4);
}

/* 14.8 Családi terjedés — az útvonal
   --------------------------------------------------------------------------
   A copy útvonala: „közösség -> nagyobb testvér -> otthon -> kéz vagy játék
   -> csecsemő". NAGY NYÍL-GLYPH NINCS (átadó §5): az állomások chipek, a
   kapcsolatot egy apró, dekoratív jel adja közöttük.

   Valódi `<ol>`, tehát a sorrendet a jelölés is hordozza — nem csak a vizuális
   elrendezés.
   -------------------------------------------------------------------------- */

.rsv-terjed-utvonal__cimke {
    margin: clamp(var(--rsv-ter-5), 2.4vw, var(--rsv-ter-6)) 0 var(--rsv-ter-3);
    font-size: var(--rsv-meret-meta);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--rsv-text-secondary);
}

.rsv-terjed-utvonal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rsv-ter-2);
    list-style: none;
    margin: 0 0 clamp(var(--rsv-ter-5), 2.4vw, var(--rsv-ter-6));
    padding: 0;
}

.rsv-terjed-utvonal__elem {
    display: inline-flex;
    align-items: center;
    padding: var(--rsv-ter-2) var(--rsv-ter-4);
    border-radius: var(--rsv-radius-pill);
    background: var(--rsv-surface-card);
    box-shadow: inset 0 0 0 1px rgba(141, 69, 162, .18);
    font-size: var(--rsv-meret-kicsi);
    font-weight: 600;
    color: var(--rsv-brand-dark);
}

/* A kapcsolatot apró pont jelzi, nem nyíl-glyph. */
.rsv-terjed-utvonal__elem + .rsv-terjed-utvonal__elem::before {
    content: "";
    flex: none;
    width: 5px;
    height: 5px;
    margin-inline: calc(-1 * var(--rsv-ter-1)) var(--rsv-ter-3);
    border-radius: 50%;
    background: var(--rsv-brand-secondary);
    opacity: .55;
}

/* 14.9 „Beteg a testvér" — checklist
   --------------------------------------------------------------------------
   Átadó §10: TISZTA CHECKLIST, nem külön kártyák. Egyetlen panel, a tételek
   ikonos listaelemek.
   -------------------------------------------------------------------------- */

.rsv-terjed-checklist {
    display: grid;
    gap: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-7));
    padding: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-7));
    border-radius: clamp(var(--rsv-radius-lg), 2vw, 28px);
    background: linear-gradient(
        118deg,
        var(--rsv-brand-soft) 0%,
        var(--rsv-brand-bare) 58%,
        var(--rsv-surface-card) 100%
    );
    box-shadow: inset 0 0 0 1px rgba(141, 69, 162, .12);
}

.rsv-terjed-checklist > * { min-width: 0; }

@media (min-width: 992px) {
    .rsv-terjed-checklist { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
}

.rsv-terjed-checklist__fej > :last-child { margin-bottom: 0; }

.rsv-terjed-checklist__lista {
    display: grid;
    gap: var(--rsv-ter-3);
    list-style: none;
    margin: 0;
    padding: 0;
}

.rsv-terjed-checklist__elem {
    display: flex;
    align-items: center;
    gap: var(--rsv-ter-4);
    min-width: 0;
    padding: var(--rsv-ter-3) var(--rsv-ter-4);
    border-radius: var(--rsv-radius-md);
    background: var(--rsv-surface-card);
    box-shadow: var(--rsv-arnyek-sm);
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-primary);
}

.rsv-terjed-checklist__jel {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--rsv-radius-sm);
    background: var(--rsv-brand-soft);
    color: var(--rsv-brand-primary);
    --ikon-meret: 24px;
}

/* 14.10 A fertőzési lánc megszakítása — hat gyakorlati lépés
   --------------------------------------------------------------------------
   Átadó §11: jól szellőző grid desktopon, mobilon 1–2 oszlop.
   -------------------------------------------------------------------------- */

.rsv-terjed-lepesek {
    display: grid;
    gap: clamp(var(--rsv-ter-4), 2.4vw, var(--rsv-ter-5));
    list-style: none;
    margin: 0;
    padding: 0;
}

.rsv-terjed-lepesek > * { min-width: 0; }

@media (min-width: 560px) {
    .rsv-terjed-lepesek { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
    .rsv-terjed-lepesek { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.rsv-terjed-lepes {
    min-width: 0;
    padding: clamp(var(--rsv-ter-5), 2.4vw, var(--rsv-ter-6));
    border-radius: var(--rsv-radius-lg);
    background: var(--rsv-surface-card);
    box-shadow: var(--rsv-arnyek-sm), inset 0 0 0 1px rgba(141, 69, 162, .1);
}

.rsv-terjed-lepes__jel {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: var(--rsv-ter-4);
    border-radius: var(--rsv-radius-md);
    background: var(--rsv-brand-soft);
    color: var(--rsv-brand-primary);
    --ikon-meret: 30px;
}

.rsv-terjed-lepes__cim {
    margin: 0 0 var(--rsv-ter-2);
    font-size: var(--rsv-meret-h4);
    font-weight: 700;
    color: var(--rsv-brand-dark);
}

.rsv-terjed-lepes__szoveg {
    margin: 0;
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
}


/* --------------------------------------------------------------------------
   15. A `/kockazati-csoportok` ALOLDAL — „Kik vannak nagyobb kockázatban?"
   --------------------------------------------------------------------------
   Kanonikus forrás: a projektgazdai átadócsomag
   `KOCKAZATI_CSOPORTOK_PAGE_SPEC.md` fájlja.

   ÚJ SZÍNPALETTA NEM KELETKEZETT. Ez a szakasz KIZÁRÓLAG a 2. szakasz
   tokenjeiből és azok `rgba()` / `color-mix()` alakjából épül — pontosan úgy,
   ahogy a 13. és a 14. szakasz. A csomag `README_START_HERE.md`-je ezt
   kifejezetten kiköti.

   A HARMADIK TARTALMI ALOLDAL — ÉS NEM ÉPÍT HARMADIK RENDSZERT. Amit a `/rsv`
   már megoldott (page-hero, kiemelt panel, utak, routing kártyák, szószedet,
   forrásblokk, GYIK), az VÁLTOZATLANUL a `.rsv-alap*` készletből jön. Itt
   csak az szerepel, ami ennek az oldalnak a saját szerkezete.

   ---------------------------------------------------------------------------
   A KÉPEK — EZ AZ EGYETLEN ÉRDEMI ELTÉRÉS A KÉT KORÁBBI ALOLDALTÓL
   ---------------------------------------------------------------------------
   A `/rsv` és a `/hogyan-terjed` masterei ÖSSZEÉGETETT, halvány levendula
   hátterű kompozíciók: náluk a 13. szakasz mélységi kezelése (lap + szorzásos
   keverés + lágy maszkperem) éppen azt oldja meg, hogy a téglalapél
   feloldódjon, és a fakó master kapjon kontrasztot.

   ENNEK AZ OLDALNAK A MASTEREI PONTOSAN FORDÍTVA VISELKEDNEK: átlátszó
   hátterűek, szabad, organikus peremmel, és eleve TELÍTETT, sötét
   lila/magenta rajzúak — ez a projektgazda által kért erősebb, kontrasztosabb
   képi irány (SPEC „Kiemelt vizuális döntés"), és a csomag kifejezetten
   tiltja a visszafakításukat.

   Rájuk alkalmazva ugyanaz a kezelés ÁRTANA:
     - a `mix-blend-mode: multiply` egy sötét képet majdnem feketévé mosna;
     - a maszkperem olyan élt oldana fel, ami nincs;
     - a kép mögötti világos lap elvenné a kontrasztot.

   Ezért itt a kezelés KI van kapcsolva. Ez nem új vizuális rendszer: két
   osztály, amely nem ad hozzá semmit, csak visszavesz.
   -------------------------------------------------------------------------- */

/* 15.1 Átlátszó hátterű masterek — a mélységi kezelés kikapcsolása
   -------------------------------------------------------------------------- */

/*
 * A LAP ELMARAD. A `content: none` a `::before`-t meg sem hozza létre, tehát
 * a 13. szakasz `inset`-je sem érvényesül — így vízszintes túlcsordulást sem
 * okozhat (a `/rsv`-n a kép mögötti lap kifutása pontosan ilyen hibát adott).
 */
.rsv-alaphero__vizual--atlatszo::before,
.rsv-riziko-vizual::before {
    content: none;
}

.rsv-alaphero__vizual--atlatszo img,
.rsv-riziko-vizual img {
    mix-blend-mode: normal;

    /*
     * A maszk teljesen elmarad: nincs feloldandó téglalapél, a lágy peremet
     * maga az alfacsatorna adja. A prefixes alakot is felül kell írni, mert a
     * 13. szakasz `-webkit-mask-composite: source-in` értéke csak ott hat.
     */
    -webkit-mask-image: none;
    mask-image: none;
}

.rsv-riziko-vizual {
    position: relative;
    line-height: 0;
}

.rsv-riziko-vizual img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
}

/* 15.2 Page hero
   --------------------------------------------------------------------------
   A geometria a `/rsv`-ről öröklődik (fejléc alá csúszó háttér, morzsamenü).
   Ami MÁS: a SPEC nagyobb vizuális súlyt kér a hero képének, ezért a kép
   hasábja szélesebb, mint a két korábbi aloldalon (ott .92fr / 1.08fr).

   ---------------------------------------------------------------------------
   VIZUÁLIS JAVÍTÓKÖR (2026-08-27) — A HERO-KÉP MÉRETE
   ---------------------------------------------------------------------------
   A projektgazda jelezte, hogy a hero-vizuál nem elég domináns, és sok
   körülötte az üres hely. A mérés ezt pontosította:

     - a kép PONTOSAN kitöltötte a hasábját (rés balra/jobbra 0 px), tehát az
       üresség nem a hasábon belül volt;
     - a hero 1440 px-en 872 px MAGAS volt, a kép viszont csak 433 px — a
       kompozíció alatt és fölött maradt a levegő;
     - 1920 px-en a kép a nézetablakhoz képest ZSUGORODOTT (52% -> 40%), mert
       a burok 1360 px-nél megáll, a lap viszont tovább szélesedik. Nagy
       képernyőn ettől lett thumbnail-hatású.

   HÁROM ESZKÖZ — az asset TORZÍTÁSA ÉS VÁGÁSA NÉLKÜL:

     1. FESZESEBB RÁCS. A kép hasábja nagyobb részt kap, a köz szűkebb lett,
        így a vizuál közelebb kerül a copyhoz. A szövegoszlop nem lesz
        fölöslegesen széles: a lead és a kiemelés saját sorhossz-korlátot kap.

     2. KIFUTÁS A BUROK JOBB PEREME ALÓL. A vizuál a lap jobb széle felé
        kilép a konténerből — pontosan annyival, amennyi hely ott ténylegesen
        van. Ez nagy képernyőn adja a legtöbbet (1920 px-en ~200 px), és éppen
        azt a zsugorodást szünteti meg, ami a thumbnail-hatást okozta.
        A hero `overflow: hidden`, ezért ez a kifutás a dokumentumon NEM okoz
        vízszintes túlcsordulást — a kép maga viszont teljes egészében a
        nézetablakon belül marad, tehát nem vágódik le.

     3. KOMPAKTABB ZÓNA. A kompozíció magasabbra emelkedik a morzsamenü
        sávjába, és a hero alsó levegője szűkebb lett. Így a kép nemcsak
        nagyobb, hanem arányaiban is jobban kitölti a nyitó szekciót.

   A kép SEMMILYEN szín- vagy keverési kezelést nem kap (15.1): a telített
   lila/magenta karakter érintetlen marad.

   MOBILON NEM VÁLTOZIK SEMMI: minden szabály 992 px fölött él, tehát a
   szöveg -> CTA -> vizuál sorrend és a méretek változatlanok.
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
    .rsv-alaphero--riziko {
        /* Kompaktabb nyitó szekció: kevesebb levegő a hero alján. */
        padding-bottom: clamp(var(--rsv-ter-5), 2.6vw, var(--rsv-ter-6));
    }

    .rsv-alaphero--riziko .rsv-alaphero__racs {
        grid-template-columns: minmax(0, .80fr) minmax(0, 1.20fr);
        /* Szűkebb köz: a kép közelebb kerül a copyhoz. */
        gap: clamp(var(--rsv-ter-5), 2.2vw, var(--rsv-ter-6));
    }

    /*
     * A KOMPOZÍCIÓ FÜGGŐLEGESEN KÖZÉPRE KERÜL — NEM A HASÁB TETEJÉRE.
     *
     * A `/rsv` és a `/hogyan-terjed` hero-vizuálja `align-self: start` +
     * negatív felső margó: felemelkedik a morzsamenü sávjába. Ott ez helyes,
     * mert azok a masterek ÁLLÓBB kompozíciók, és nagyjából kitöltik a
     * szövegoszlop magasságát.
     *
     * EZ A MASTER VISZONT FEKVŐ (1600x920). A szövegoszlop 1440 px-en 745 px
     * magas, a kép 511 px: a különbség a felső igazítás mellett EGYETLEN,
     * 326 px-es üres zsebbe került a kép ALATT — pontosan az a „sok üres
     * hely", amit a projektgazda kifogásolt. Középre igazítva ugyanez a
     * különbség két, feleakkora sávra oszlik, és a kompozíció a copy mellé
     * ül, nem fölé.
     */
    .rsv-alaphero--riziko .rsv-alaphero__vizual {
        align-self: center;
        margin-top: 0;
    }

    /*
     * KIFUTÁS A BUROK JOBB PEREME ALÓL.
     *
     * A burok tartalmi szélessége `min(--rsv-burok-szeles, 100vw - 2 *
     * --rsv-oldalmargo)`, tehát a jobb pereme és a nézetablak széle közötti
     * távolság: `max(--rsv-oldalmargo, (100vw - --rsv-burok-szeles) / 2)`.
     * Pontosan ennyivel lép ki a vizuál — se többel, se kevesebbel.
     *
     * A `min(240px, …)` a felső korlát: ultraszéles képernyőn a kép ne nőjön
     * aránytalanná a copyhoz képest.
     *
     * MIÉRT NEM FUT KI PONTOSAN A NÉZETABLAK SZÉLÉIG? Mert a `100vw` a legtöbb
     * böngészőben a GÖRGETŐSÁVOT IS tartalmazza, a tényleges layoutszélesség
     * viszont nem. Pontosra igazítva a kép néhány pixellel túlnyúlna, és mivel
     * a hero `overflow: hidden`, az a széle LEVÁGÓDNA. A korlát így egyben
     * biztonsági tartalék is: 1920 px-en ~40 px marad a szélig, tehát a kép
     * teljes egészében látszik.
     */
    .rsv-alaphero--riziko .rsv-alaphero__vizual {
        margin-right: calc(-1 * min(
            240px,
            max(var(--rsv-oldalmargo), (100vw - var(--rsv-burok-szeles)) / 2)
        ));
    }
}

@media (min-width: 1200px) {
    /* Nagyobb képernyőn a copy már elfér szűkebben is, a kép pedig nőhet. */
    .rsv-alaphero--riziko .rsv-alaphero__racs {
        grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
    }
}

@media (min-width: 1600px) {
    /*
     * ITT MÁR MINDKETTŐ ELFÉR.
     *
     * A H1 („Kik vannak nagyobb kockázatban?") 56 px-en 530 px-nél törik két
     * sorba — ezt megmértük. 1440 px-en a rendelkezésre álló ~1310 px-ből nem
     * jut ennyi a copynak úgy, hogy a kép is érdemben nagyobb legyen, ezért
     * ott a KÉP kapja a súlyt, és a H1 három sorban áll.
     *
     * 1600 px fölött viszont a burok kifutásából annyi hely nyílik, hogy a
     * szövegoszlop megkaphatja a két soros töréshez szükséges minimumot,
     * miközben a kép továbbra is nő. Így éppen azon a képernyőméreten lesz a
     * hero egyszerre kompakt és domináns, ahol korábban a legjobban
     * thumbnail-hatású volt.
     */
    .rsv-alaphero--riziko .rsv-alaphero__racs {
        grid-template-columns: minmax(540px, .72fr) minmax(0, 1.28fr);
    }
}

/*
 * AZ OLDAL VEZÉRGONDOLATA a heróban: a rizikócsoport nem szűrő. Nem alert és
 * nem figyelmeztetés — a bal oldali brandcsík emeli ki, nem a szín.
 */
.rsv-riziko-hero__kiemeles {
    margin: var(--rsv-ter-5) 0 0;
    padding-left: var(--rsv-ter-4);
    border-left: 3px solid var(--rsv-brand-secondary);
    max-width: 56ch;
    color: var(--rsv-text-primary);
}

.rsv-riziko-hero__kiemeles strong { color: var(--rsv-brand-dark); }

/* 15.3 A kockázat két oldala
   --------------------------------------------------------------------------
   SPEC: két nagy editorial insight, és a MÁSODIK legyen vizuálisan erősebb —
   DE NEM urgent-vörös. A kiemelés ezért a márka lila skáláját kapja: a
   `--rsv-urgent` ezen az oldalon egyáltalán nem jelenik meg (ORVOSI §3).
   -------------------------------------------------------------------------- */

.rsv-riziko-oldalak {
    position: relative;
    isolation: isolate;
}

/*
 * Dekoratív vírus-master. MOBILON NEM JELENIK MEG: ott a szöveg kap minden
 * helyet, és egy abszolút pozicionált kép csak túlcsordulást kockáztatna.
 */
.rsv-riziko-oldalak__disz { display: none; }

@media (min-width: 1200px) {
    .rsv-riziko-oldalak__disz {
        display: block;
        position: absolute;
        z-index: -1;
        top: calc(-1 * var(--rsv-ter-6));
        right: 0;
        width: clamp(180px, 15vw, 250px);
        line-height: 0;
        opacity: .5;
    }

    .rsv-riziko-oldalak__disz img {
        display: block;
        width: 100%;
        height: auto;
    }
}

.rsv-riziko-panelek {
    display: grid;
    gap: clamp(var(--rsv-ter-4), 2.4vw, var(--rsv-ter-5));
}

.rsv-riziko-panelek > * { min-width: 0; }

@media (min-width: 992px) {
    .rsv-riziko-panelek { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.rsv-riziko-panel { height: 100%; }

/*
 * A MÁSODIK PANEL ERŐSEBB: mélyebb levendula alap, határozottabb kontúr és
 * árnyék. Ugyanaz a paletta, csak nagyobb súllyal.
 */
.rsv-riziko-panel--erosebb {
    background: linear-gradient(
        152deg,
        color-mix(in srgb, var(--rsv-brand-soft) 78%, var(--rsv-brand-secondary)) 0%,
        var(--rsv-brand-soft) 100%
    );
    box-shadow: var(--rsv-arnyek-md), inset 0 0 0 1px rgba(141, 69, 162, .28);
}

.rsv-riziko-panel--erosebb .rsv-alap-kiemelt__jel {
    background: var(--rsv-surface-card);
}

/* A szakasz zárógondolata — önálló súlyú mondat, nem lábjegyzet. */
.rsv-riziko-zaras {
    margin: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-6)) 0 0;
    max-width: 70ch;
    font-size: var(--rsv-meret-lead);
    line-height: 1.55;
    font-weight: 600;
    color: var(--rsv-brand-dark);
}

/* 15.4 Életkor és a magyar hospitalizációs becslések
   --------------------------------------------------------------------------
   AZ OLDAL LEGERŐSEBB INFORMÁCIÓS ELEME.

   MINDEN SZÁM HTML-BEN VAN (SPEC „Életkor blokk"); a csomag görbe-ábrája csak
   a szakasz nyitóképe, `aria-hidden`. A sáv hossza tisztán megjelenítési adat:
   a látható szám mindig a forrásbeli érték.
   -------------------------------------------------------------------------- */

.rsv-riziko-eletkor {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-7));
    border-radius: clamp(var(--rsv-radius-lg), 2vw, 28px);
    background: var(--rsv-surface-card);
    box-shadow: var(--rsv-arnyek-sm), inset 0 0 0 1px rgba(141, 69, 162, .12);
}

/*
 * A GÖRBE-ÁBRA HÁTTÉRRÉTEG, NEM A SZAKASZ NYITÓKÉPE.
 *
 * MIÉRT? Az ábra íve BALRÓL EMELKEDIK, középen tetőzik, majd leszáll. A
 * legfiatalabb korcsoport — amelyik a LEGMAGASABB értéket hozza (75,3/1000) —
 * így az ív LEGALSÓ pontjára esik. Nagy méretben, közvetlenül az öt, szigorúan
 * csökkenő adatsor FÖLÖTT ez úgy olvasott, mintha egy diagram mondana ellent a
 * saját adatainak. Orvosi tartalomnál ez nem vállalható.
 *
 * Az ábra alakját NEM módosítjuk (a csomag assetje változatlan). Helyette a
 * szerepe kerül a helyére: halvány háttértextúra, ahogy a SPEC is fogalmaz —
 * „csak vizuális háttér/támasz". A tényleges diagram az öt HTML-adatsor és a
 * hozzájuk tartozó sáv; az mutatja pontosan és helyes irányban a trendet.
 *
 * A panel `overflow: hidden`, ezért ez a réteg nem okozhat vízszintes
 * túlcsordulást a dokumentumon.
 */
.rsv-riziko-eletkor__abra {
    position: absolute;
    z-index: -1;
    inset: -4% -8% auto -8%;
    line-height: 0;
    color: var(--rsv-brand-primary);
    opacity: .07;
    pointer-events: none;
}

.rsv-riziko-eletkor__abra svg {
    display: block;
    width: 100%;
    height: auto;
}

.rsv-riziko-eletkor__bevezeto {
    max-width: 68ch;
    margin: 0 0 clamp(var(--rsv-ter-5), 2.4vw, var(--rsv-ter-6));
}

.rsv-riziko-adatok {
    display: grid;
    gap: var(--rsv-ter-4);
    list-style: none;
    margin: 0;
    padding: 0;
}

.rsv-riziko-adatok > * { min-width: 0; }

/*
 * MOBILON KÉT SOR: fent a korcsoport és az érték egymás mellett, alattuk a
 * teljes szélességű sáv. Így a hosszú korcsoportnév sem töri szét a számot.
 */
.rsv-riziko-adat {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: var(--rsv-ter-2) var(--rsv-ter-4);
    padding-bottom: var(--rsv-ter-4);
    border-bottom: 1px solid var(--rsv-border-default);
}

.rsv-riziko-adat:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

@media (min-width: 768px) {
    /* Desktopon egyetlen sor: korcsoport | érték | sáv. */
    .rsv-riziko-adat {
        grid-template-columns: minmax(0, 200px) minmax(0, 190px) minmax(0, 1fr);
        align-items: center;
        gap: var(--rsv-ter-5);
    }
}

.rsv-riziko-adat__kor {
    font-size: var(--rsv-meret-torzs);
    font-weight: 600;
    color: var(--rsv-brand-dark);
}

.rsv-riziko-adat__ertek {
    justify-self: end;
    font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--rsv-brand-primary);
}

@media (min-width: 768px) {
    .rsv-riziko-adat__ertek { justify-self: start; }
}

.rsv-riziko-adat__egyseg {
    display: block;
    font-size: var(--rsv-meret-meta);
    font-weight: 600;
    letter-spacing: 0;
    color: var(--rsv-text-secondary);
}

/*
 * A SÁV KÉT RÉTEG: a pálya végig látszik, a kitöltés az arányt mutatja. A
 * `max()` gondoskodik róla, hogy a legkisebb érték kitöltése se tűnjön el.
 */
.rsv-riziko-adat__sav {
    grid-column: 1 / -1;
    position: relative;
    height: 10px;
    border-radius: var(--rsv-radius-pill);
    background: color-mix(in srgb, var(--rsv-brand-soft) 70%, var(--rsv-surface-card));
    overflow: hidden;
}

@media (min-width: 768px) {
    .rsv-riziko-adat__sav { grid-column: auto; }
}

.rsv-riziko-adat__sav::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: max(10px, calc(var(--rsv-arany, 0) * 1%));
    border-radius: var(--rsv-radius-pill);
    background: linear-gradient(
        90deg,
        var(--rsv-brand-primary) 0%,
        var(--rsv-brand-secondary) 100%
    );
}

/*
 * A KÖTELEZŐ MEGSZORÍTÁS (ORVOSI §15). Vizuálisan is elkülönül a számsortól:
 * enélkül a becslések aktuális magyar surveillance-adatnak látszanának.
 */
.rsv-riziko-megszoritas {
    display: flex;
    align-items: flex-start;
    gap: var(--rsv-ter-3);
    margin: clamp(var(--rsv-ter-5), 2.4vw, var(--rsv-ter-6)) 0 0;
    padding: var(--rsv-ter-4) var(--rsv-ter-5);
    border-radius: var(--rsv-radius-md);
    background: var(--rsv-brand-bare);
    box-shadow: inset 0 0 0 1px rgba(141, 69, 162, .16);
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
}

.rsv-riziko-megszoritas .ikon {
    --ikon-meret: 20px;
    flex: none;
    margin-top: 2px;
    color: var(--rsv-brand-secondary);
}

.rsv-riziko-eletkor__zaras {
    margin: clamp(var(--rsv-ter-4), 2vw, var(--rsv-ter-5)) 0 0;
    max-width: 70ch;
}

.rsv-riziko-eletkor__zaras strong { color: var(--rsv-brand-dark); }

/* A számsor forrása olvasható formában, a főszöveg terhelése nélkül (ORVOSI §21). */
.rsv-riziko-forrasjel {
    margin: var(--rsv-ter-4) 0 0;
    font-size: var(--rsv-meret-meta);
    color: var(--rsv-text-secondary);
}

/* 15.5 Miért sérülékenyebbek a legkisebbek?
   -------------------------------------------------------------------------- */

.rsv-riziko-okok {
    display: grid;
    gap: clamp(var(--rsv-ter-4), 2.4vw, var(--rsv-ter-5));
    list-style: none;
    margin: 0;
    padding: 0;
}

.rsv-riziko-okok > * { min-width: 0; }

@media (min-width: 768px) {
    .rsv-riziko-okok { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.rsv-riziko-ok {
    padding: clamp(var(--rsv-ter-5), 2.4vw, var(--rsv-ter-6));
    border-radius: var(--rsv-radius-lg);
    background: var(--rsv-brand-bare);
    box-shadow: inset 0 0 0 1px rgba(141, 69, 162, .1);
}

.rsv-riziko-ok__jel {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: var(--rsv-ter-4);
    border-radius: var(--rsv-radius-md);
    background: var(--rsv-surface-card);
    color: var(--rsv-brand-primary);
    --ikon-meret: 30px;
}

.rsv-riziko-ok__cim {
    margin: 0 0 var(--rsv-ter-3);
    font-size: var(--rsv-meret-h3);
    font-weight: 700;
    color: var(--rsv-brand-dark);
}

.rsv-riziko-ok__szoveg {
    margin: 0;
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
}

/* 15.6 Jegyzetpanel — koraszülöttség, neurológiai állapotok, egyéb tényezők
   --------------------------------------------------------------------------
   EGY komponens, három szakaszban. A `--halk` változat ugyanaz, kisebb
   súllyal: nem épült három külön panelstílus.
   -------------------------------------------------------------------------- */

.rsv-riziko-jegyzet {
    display: grid;
    gap: clamp(var(--rsv-ter-4), 2.4vw, var(--rsv-ter-6));
    align-items: start;
    padding: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-7));
    border-radius: clamp(var(--rsv-radius-lg), 2vw, 28px);
    background: var(--rsv-surface-card);
    box-shadow: var(--rsv-arnyek-sm), inset 0 0 0 1px rgba(141, 69, 162, .12);
}

.rsv-riziko-jegyzet > * { min-width: 0; }

@media (min-width: 768px) {
    .rsv-riziko-jegyzet { grid-template-columns: auto minmax(0, 1fr); }
}

.rsv-riziko-jegyzet--halk {
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--rsv-border-default);
}

.rsv-riziko-jegyzet__jel {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: var(--rsv-radius-md);
    background: var(--rsv-brand-soft);
    color: var(--rsv-brand-primary);
    --ikon-meret: 36px;
}

.rsv-riziko-jegyzet__torzs > :last-child { margin-bottom: 0; }

.rsv-riziko-jegyzet__cim {
    margin: 0 0 var(--rsv-ter-4);
    font-size: var(--rsv-meret-h2);
}

.rsv-riziko-jegyzet__torzs p { max-width: 68ch; }

/* Közös listastílus a szakaszokon belül — nem a Bootstrap alapértelmezése. */
.rsv-riziko-lista__cimke {
    margin: 0 0 var(--rsv-ter-3);
    font-weight: 600;
    color: var(--rsv-brand-dark);
}

.rsv-riziko-lista {
    display: grid;
    gap: var(--rsv-ter-3);
    list-style: none;
    margin: 0 0 var(--rsv-ter-5);
    padding: 0;
    max-width: 68ch;
}

.rsv-riziko-lista li {
    position: relative;
    padding-left: var(--rsv-ter-5);
    color: var(--rsv-text-secondary);
}

.rsv-riziko-lista li::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(var(--rsv-sormagassag-torzs) * .5em - 3px);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--rsv-brand-secondary);
}

/* 15.7 Alapbetegségek sáv — tüdő, szív, immunrendszer
   --------------------------------------------------------------------------
   A SPEC KIKÖTÉSE: „Ne legyen három azonos Bootstrap-card." Ezért a három
   állapot EGY sávban, egymás alatti, olvasható hasábokban áll, hajszálvonallal
   elválasztva — nem három lebegő kártyaként.

   ---------------------------------------------------------------------------
   EDUKÁCIÓS ÁBRÁK (2026-08-27-i asset-csere)
   ---------------------------------------------------------------------------
   Korábban a sáv EGYETLEN közös ábrát vitt (tüdő + szív + pajzs), a három
   blokk pedig ikon nélkül állt. A projektgazda szerint az a hármas túl
   általános volt, ezért mindhárom blokk a SAJÁT edukációs ábráját kapja, a
   közös sáv-ábra pedig kikerült — így minden jelentés pontosan egyszer
   jelenik meg, kettős jelölés nélkül.

   AZONOS VIZUÁLIS SÚLY: mindhárom asset viewBox-a 900x620, és mindhárom
   ugyanabban a hasábban, ugyanakkora dobozban áll. A méretük tehát nem
   „nagyjából", hanem pontosan megegyezik.
   -------------------------------------------------------------------------- */

.rsv-riziko-sav__fej {
    margin-bottom: clamp(var(--rsv-ter-5), 2.6vw, var(--rsv-ter-6));
}

.rsv-riziko-allapot {
    padding-top: clamp(var(--rsv-ter-5), 2.6vw, var(--rsv-ter-6));
    border-top: 1px solid var(--rsv-border-default);
}

.rsv-riziko-allapot + .rsv-riziko-allapot {
    margin-top: clamp(var(--rsv-ter-5), 2.6vw, var(--rsv-ter-6));
}

.rsv-riziko-allapot__cim {
    margin: 0 0 var(--rsv-ter-4);
    font-size: var(--rsv-meret-h2);
}

/*
 * AZ ÁBRA. Az assetek a projekt tokenjeivel dolgoznak (a beégetett hexek
 * `var(--rsv-…)`-ra lettek cserélve), ezért itt NEM kapnak sem `color`, sem
 * `opacity`, sem szűrő beállítást: a telített lila/magenta karakter pontosan
 * úgy jelenik meg, ahogy a csomag adta. Visszafakítás nincs.
 */
.rsv-riziko-allapot__abra {
    display: block;
    width: 100%;
    /*
     * MOBILON SEM LEHET APRÓ. A 900x620-as ábra a teljes hasábszélességet
     * megkapja; a felső korlát csak azt akadályozza meg, hogy egyoszlopos
     * elrendezésben aránytalanul nagyra nőjön.
     */
    max-width: 520px;
    margin: 0 0 clamp(var(--rsv-ter-4), 2.4vw, var(--rsv-ter-5));
}

.rsv-riziko-allapot__abra svg {
    display: block;
    width: 100%;
    height: auto;
}

@media (min-width: 992px) {
    /*
     * DESKTOPON EDITORIAL HASÁB: a cím és alatta az ábra a bal oldalon, a
     * törzs mellettük fut. Így a három blokk NEM egyforma kártyaként, hanem
     * folyó szövegként olvas — pontosan ezt kéri a SPEC —, az ábra viszont
     * megkapja a saját, teljes hasábnyi helyét.
     */
    .rsv-riziko-allapot {
        display: grid;
        grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
        grid-template-areas:
            "cim  torzs"
            "abra torzs";
        grid-template-rows: auto 1fr;
        align-items: start;
        gap: clamp(var(--rsv-ter-4), 2vw, var(--rsv-ter-5))
             clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-7));
    }

    .rsv-riziko-allapot > * { min-width: 0; }

    .rsv-riziko-allapot__cim   { grid-area: cim; margin-bottom: 0; }
    .rsv-riziko-allapot__abra  { grid-area: abra; max-width: 100%; margin-bottom: 0; }
    .rsv-riziko-allapot__torzs { grid-area: torzs; }
}

.rsv-riziko-allapot__torzs > :last-child { margin-bottom: 0; }
.rsv-riziko-allapot__torzs p { max-width: 62ch; }

/* 15.8 Környezeti tényezők
   --------------------------------------------------------------------------
   Hat tényező, mindegyik a saját tartalmi ikonjával.

   A csomag ábrája NAGY MÉRETŰ, NAGYON HALVÁNY háttérréteg a panel mögött —
   vízjel, nem második ikonkészlet. MIÉRT? Mert a rajza részben ugyanazt
   mondja, amit két kártya ikonja (ház, csoport); önálló elemként kettős
   jelölés lenne. A részletes indoklás az asset fájljának fejkommentjében.
   -------------------------------------------------------------------------- */

.rsv-riziko-kornyezet {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-7));
    border-radius: clamp(var(--rsv-radius-lg), 2vw, 28px);
    background: var(--rsv-surface-card);
    box-shadow: var(--rsv-arnyek-sm), inset 0 0 0 1px rgba(141, 69, 162, .12);
}

/*
 * A VÍZJEL A PANELEN BELÜL MARAD. A panel `overflow: hidden`, tehát ez a
 * réteg soha nem okozhat vízszintes túlcsordulást a dokumentumon.
 */
.rsv-riziko-kornyezet__abra {
    position: absolute;
    z-index: -1;
    inset: auto -6% -12% -6%;
    line-height: 0;
    color: var(--rsv-brand-primary);
    opacity: .06;
    pointer-events: none;
}

.rsv-riziko-kornyezet__abra svg {
    display: block;
    width: 100%;
    height: auto;
}

.rsv-riziko-tenyezok {
    display: grid;
    gap: clamp(var(--rsv-ter-5), 2.6vw, var(--rsv-ter-6));
    list-style: none;
    margin: 0;
    padding: 0;
}

.rsv-riziko-tenyezok > * { min-width: 0; }

@media (min-width: 640px) {
    .rsv-riziko-tenyezok { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
    .rsv-riziko-tenyezok { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/*
 * NEM KÁRTYA: nincs saját háttér és keret. Az ikon és a cím egy sorban áll, a
 * magyarázat alattuk fut — így hat elem sem lesz zsúfolt mobilon.
 */
.rsv-riziko-tenyezo {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--rsv-ter-2) var(--rsv-ter-4);
}

.rsv-riziko-tenyezo__jel {
    grid-row: span 2;
    align-self: start;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: var(--rsv-radius-md);
    background: var(--rsv-brand-soft);
    color: var(--rsv-brand-primary);
    --ikon-meret: 28px;
}

.rsv-riziko-tenyezo__cim {
    align-self: end;
    margin: 0;
    font-size: var(--rsv-meret-h4);
    font-weight: 700;
    color: var(--rsv-brand-dark);
}

.rsv-riziko-tenyezo__szoveg {
    align-self: start;
    margin: 0;
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
}

/* 15.9 Mit jelent valójában a rizikófaktor?
   --------------------------------------------------------------------------
   A blokk MINDKÉT IRÁNYT kimondja (ORVOSI §3): a kockázati tényező nem jelent
   biztos súlyos betegséget, de a hiánya sem garantálja az enyhe lefolyást.
   A második állítás ezért ugyanakkora vizuális súlyt kap, mint az első.
   -------------------------------------------------------------------------- */

.rsv-riziko-jelentes {
    max-width: 860px;
    margin-inline: auto;
}

.rsv-riziko-jelentes__fej {
    margin-bottom: clamp(var(--rsv-ter-5), 2.6vw, var(--rsv-ter-6));
}

.rsv-riziko-tagadasok {
    display: grid;
    gap: var(--rsv-ter-3);
    list-style: none;
    margin: 0 0 clamp(var(--rsv-ter-6), 3vw, var(--rsv-ter-7));
    padding: 0;
}

.rsv-riziko-tagadasok > * { min-width: 0; }

.rsv-riziko-tagadas {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--rsv-ter-4);
    padding: var(--rsv-ter-4) var(--rsv-ter-5);
    border-radius: var(--rsv-radius-md);
    background: var(--rsv-brand-bare);
    color: var(--rsv-text-secondary);
}

.rsv-riziko-tagadas__jel {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--rsv-surface-card);
    color: var(--rsv-brand-secondary);
    box-shadow: inset 0 0 0 1px rgba(141, 69, 162, .2);
    --ikon-meret: 16px;
}

/*
 * A MÁSIK IRÁNY. Deep Plum felület: az oldalon ez a legerősebb hangsúly, és
 * szándékosan NEM a riasztás színe.
 */
.rsv-riziko-ellenkezo {
    padding: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-7));
    border-radius: clamp(var(--rsv-radius-lg), 2vw, 28px);
    background: linear-gradient(
        152deg,
        var(--rsv-brand-dark) 0%,
        var(--rsv-brand-primary) 100%
    );
    color: var(--rsv-surface-card);
}

.rsv-riziko-ellenkezo__cimke {
    display: block;
    margin-bottom: var(--rsv-ter-3);
    font-size: var(--rsv-meret-meta);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--rsv-brand-soft) 82%, var(--rsv-brand-secondary));
}

.rsv-riziko-ellenkezo__szoveg {
    margin: 0;
    font-size: var(--rsv-meret-lead);
    line-height: 1.5;
    font-weight: 600;
    color: var(--rsv-surface-card);
}

/* 15.10 Az egészséges csecsemők sem „védettek"
   --------------------------------------------------------------------------
   A 80% KÖTELEZŐEN GFCNI-KONTEXTUSSAL jelenik meg: a szám és a forrásmondat
   ugyanabban a panelben áll, nem szakítható szét.

   A csomag ábrája öt alakot rajzol — NÉGY telített, EGY halvány —, vagyis
   pontosan a 4/5 = 80% arányt. Ezért valódi támasz, nem dísz.
   -------------------------------------------------------------------------- */

.rsv-riziko-nyolcvan {
    display: grid;
    gap: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-6));
    align-items: center;
    margin-bottom: clamp(var(--rsv-ter-6), 3vw, var(--rsv-ter-7));
    padding: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-7));
    border-radius: clamp(var(--rsv-radius-lg), 2vw, 28px);
    background: var(--rsv-surface-card);
    box-shadow: var(--rsv-arnyek-md), inset 0 0 0 1px rgba(141, 69, 162, .14);
}

.rsv-riziko-nyolcvan > * { min-width: 0; }

@media (min-width: 768px) {
    .rsv-riziko-nyolcvan { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.rsv-riziko-nyolcvan__abra {
    display: block;
    width: 100%;
    color: var(--rsv-brand-secondary);
}

.rsv-riziko-nyolcvan__abra svg {
    display: block;
    width: 100%;
    height: auto;
}

.rsv-riziko-nyolcvan__ertek {
    display: block;
    font-size: clamp(3rem, 2rem + 4.4vw, 4.5rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--rsv-brand-primary);
}

.rsv-riziko-nyolcvan__cimke {
    display: block;
    margin-top: var(--rsv-ter-2);
    font-size: var(--rsv-meret-torzs);
    font-weight: 600;
    color: var(--rsv-brand-dark);
}

.rsv-riziko-nyolcvan__szoveg {
    margin: var(--rsv-ter-4) 0 0;
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
}

.rsv-riziko-ketto {
    align-items: center;
    gap: clamp(var(--rsv-ter-5), 3.2vw, var(--rsv-ter-7));
}

@media (min-width: 992px) {
    .rsv-riziko-ketto { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
}

/* 15.11 Mit tehetsz? — a `/rsv` útkomponense, NÉGY elemmel
   --------------------------------------------------------------------------
   A `.rsv-alap-utak` desktopon három oszlopos, mert a `/rsv`-n három út van.
   Itt négy — ezért egyetlen modifier állítja át a rácsot. Nem épült második
   útrendszer: ugyanaz az elv, mint a `--rsv-lanc-db` paraméternél.
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
    .rsv-riziko-utak { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
    .rsv-riziko-utak { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* A gombsor a panel aljára kerül, hogy a négy panel alja egy vonalban legyen. */
.rsv-riziko-utak .rsv-alap-ut {
    display: flex;
    flex-direction: column;
}

.rsv-riziko-utak .rsv-alap-ut .rsv-gombsor {
    margin-top: auto;
    padding-top: var(--rsv-ter-4);
}


/* --------------------------------------------------------------------------
   16. A `/tunetek` ALOLDAL — „Az RSV tünetei"
   --------------------------------------------------------------------------
   Kanonikus forrás: a projektgazdai átadócsomag `TUNETEK_PAGE_SPEC.md` fájlja.

   ÚJ SZÍNPALETTA NEM KELETKEZETT. Ez a szakasz KIZÁRÓLAG a 2. szakasz
   tokenjeiből és azok `rgba()` / `color-mix()` alakjából épül — pontosan úgy,
   ahogy a 13–15. szakasz.

   A NEGYEDIK TARTALMI ALOLDAL — ÉS NEM ÉPÍT NEGYEDIK RENDSZERT. Amit a `/rsv`
   már megoldott (page-hero, kiemelt panel, routing kártyák, szószedet,
   forrásblokk, GYIK), az VÁLTOZATLANUL a `.rsv-alap*` készletből jön.

   AZ URGENT TOKEN HASZNÁLATA KORLÁTOZOTT (SPEC §9): kizárólag a NICE-apnoe
   jegyzet és a figyelmeztető jelek szakasza kapja meg. Az oldal egésze NEM
   riasztásszínű — a kézikönyv §13 szerint a sürgősségi vizuális nyelv nem
   használható figyelemfelkeltésre.
   -------------------------------------------------------------------------- */

/* 16.1 Page hero
   --------------------------------------------------------------------------
   A SPEC §4 kifejezetten a `/kockazati-csoportok` JAVÍTOTT hero-tapasztalatát
   kéri: a kép desktopon ne legyen thumbnail-hatású, töltse ki érdemben a jobb
   oldalt, és 1440/1920 px-en is maradjon nagy.

   Ezért a geometria ugyanaz, mint a 15.2 szakaszban — ugyanazokkal az
   indokokkal: feszesebb rács, a burok jobb pereme alóli kifutás, függőlegesen
   középre igazított kompozíció, és 1600 px fölött alsó korlát a
   szövegoszlopon, hogy a H1 két sorban maradjon.

   MIÉRT VAN ÚJRA LEÍRVA, ÉS NEM KÖZÖS OSZTÁLYBAN? Mert a közös osztályhoz a
   `/kockazati-csoportok` LEZÁRT sablonját kellene módosítani (új osztálynevet
   kapna a hero). Az a lap projektgazdai jóváhagyással él; a hozzányúlás
   kockázata nagyobb, mint ennek a néhány szabálynak az ára. Ha egyszer egy
   harmadik oldal is ugyanezt kéri, érdemes lesz egyetlen `--nagykep`
   modifierbe összevonni — akkor viszont mindkét sablon egyszerre.

   MOBILON NEM VÁLTOZIK SEMMI: minden szabály 992 px fölött él, tehát a
   szöveg -> CTA -> vizuál sorrend marad.
   -------------------------------------------------------------------------- */

.rsv-tunet-hero__masodik {
    margin: var(--rsv-ter-4) 0 0;
    max-width: 56ch;
    color: var(--rsv-text-secondary);
}

@media (min-width: 992px) {
    .rsv-alaphero--tunet {
        /* Kompaktabb nyitó szekció: kevesebb levegő a hero alján. */
        padding-bottom: clamp(var(--rsv-ter-5), 2.6vw, var(--rsv-ter-6));
    }

    .rsv-alaphero--tunet .rsv-alaphero__racs {
        grid-template-columns: minmax(0, .80fr) minmax(0, 1.20fr);
        gap: clamp(var(--rsv-ter-5), 2.2vw, var(--rsv-ter-6));
    }

    /*
     * A KOMPOZÍCIÓ FÜGGŐLEGESEN KÖZÉPRE KERÜL. A master FEKVŐ (1600x930), a
     * szövegoszlop pedig magasabb nála: felső igazítás mellett a kép ALATT
     * egyetlen nagy üres zseb maradna.
     */
    .rsv-alaphero--tunet .rsv-alaphero__vizual {
        align-self: center;
        margin-top: 0;

        /*
         * KIFUTÁS A BUROK JOBB PEREME ALÓL — a 15.2 szakasszal azonos
         * számítás. A `100vw` a görgetősávot is tartalmazza, ezért a felső
         * korlát egyben biztonsági tartalék is: a kép nem vágódhat le.
         */
        margin-right: calc(-1 * min(
            240px,
            max(var(--rsv-oldalmargo), (100vw - var(--rsv-burok-szeles)) / 2)
        ));
    }
}

@media (min-width: 1200px) {
    .rsv-alaphero--tunet .rsv-alaphero__racs {
        grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
    }
}

@media (min-width: 1600px) {
    /* Itt már a H1 két sora és a nagy kép is elfér egyszerre. */
    .rsv-alaphero--tunet .rsv-alaphero__racs {
        grid-template-columns: minmax(540px, .72fr) minmax(0, 1.28fr);
    }
}

/* 16.2 Edukációs ábra-sáv — EGYETLEN megmaradt inline ábra
   --------------------------------------------------------------------------
   A 2026-08-27-i csereasset-csomag NÉGY széles SVG-t váltott ki különálló
   raszter assetekre (lásd 16.14). Egyetlen inline ábra maradt: a „nagyon
   fiatal csecsemők" szakasz kompozíciója — azt az `ASSET_MAPPING.md` nem
   sorolja a cserélendők közé.

   AMIÉRT A SÁV MEGMARAD: ez az ábra is SZÉLES kompozíció (1,7 : 1), és négy
   jelet rajzol egymás mellé. Teljes szélességre zsugorítva 390 px-en a jelek
   piktogramméretűvé esnének össze, amit a SPEC §8 tilt. Ezért a sáv keskeny
   nézetablakon VÍZSZINTESEN GÖRGETHETŐ, az SVG pedig alsó szélességkorlátot
   kap. A görgetés a sávon BELÜL marad, a dokumentum nem csordul túl.

   AZ ÁBRA `aria-hidden`: minden tartalma HTML-ben is ott van, ezért a
   görgethető régió nem kap billentyűzet-fókuszt — dekoratív elemnél ez a
   helyes viselkedés.

   AZ ÁBRÁNAK SAJÁT KERETE VAN (a csomag SVG-jébe rajzolt lekerekített
   téglalap), ezért a sáv NEM ad hozzá második panelt: az kettős keret lenne.
   -------------------------------------------------------------------------- */

.rsv-tunet-abra {
    --rsv-abra-min: 680px;

    /*
     * FELSŐ SZÉLESSÉGKORLÁT (2026-08-27-i mikrojavítás).
     *
     * Alapból nincs: a légzési jelek ábrája SZÁNDÉKOSAN nagy marad, mert az a
     * szakasz kulcsfontosságú (SPEC §8). Két ábra viszont túl sok függőleges
     * helyet foglalt, ezért saját korlátot kap — a részletes indoklás a
     * variánsoknál.
     */
    --rsv-abra-max: none;

    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    margin-bottom: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-6));
    line-height: 0;
}

.rsv-tunet-abra svg {
    display: block;
    width: 100%;
    min-width: var(--rsv-abra-min);
    max-width: var(--rsv-abra-max);
    height: auto;
    /* Korlátozott szélességnél középre kerül, nem a bal szélre tapad. */
    margin-inline: auto;
}

/*
 * ÁLLÓBB ARÁNY (1,7 : 1) — „nagyon fiatal csecsemők".
 *
 * MIÉRT KAP FELSŐ KORLÁTOT? Mert az asset viewBox-a jóval nagyobb, mint a
 * benne lévő rajz: 1440 px-en a doboz 1344x784 px volt, a tényleges rajz
 * viszont csak ~605 px magas. A különbség — közel 180 px — az SVG saját, üres
 * pereme, ami tisztán holt függőleges térként jelent meg a négy magyarázó
 * elem fölött. A korláttal a doboz ~860x502 px, tehát a rajz nem lesz
 * kisebb-olvashatatlanabb, csak a körülötte lévő üres sáv tűnik el.
 *
 * A szűkebb alsó margó ugyanezt a célt szolgálja: az ábra és a hozzá tartozó
 * négy jel LÁTHATÓAN egy egységet alkosson.
 */
.rsv-tunet-abra--allo {
    --rsv-abra-min: 520px;
    --rsv-abra-max: 860px;

    margin-bottom: clamp(var(--rsv-ter-4), 1.8vw, var(--rsv-ter-5));
}

/*
 * A `--spektrum` és a `--vonal` MÓDOSÍTÓ MEGSZŰNT.
 *
 * Az őket használó két ábra — a tüneti spektrum és a négycsomópontos otthoni
 * idővonal — a 2026-08-27-i csereasset-csomaggal kikerült az oldalról, ezért
 * a szabályaik holt CSS-sé váltak. A projekt bevett jelölése szerint (vö.
 * 13.2) itt magyarázat marad a helyükön, nem használaton kívüli kód.
 */

/* 16.3 A leggyakoribb tünetek — editorial tünetrács
   --------------------------------------------------------------------------
   SPEC §5: NEM nyolc nagy dashboard-kártya. Tömör egységek, mindegyik csak
   ikon + megnevezés; 2 oszlop mobilon, 4 desktopon.
   -------------------------------------------------------------------------- */

.rsv-tunet-racs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(var(--rsv-ter-3), 1.6vw, var(--rsv-ter-4));
    list-style: none;
    margin: 0;
    padding: 0;
}

.rsv-tunet-racs > * { min-width: 0; }

@media (min-width: 768px) {
    .rsv-tunet-racs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.rsv-tunet-elem {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--rsv-ter-3);
    padding: clamp(var(--rsv-ter-4), 2vw, var(--rsv-ter-5));
    border-radius: var(--rsv-radius-md);
    background: var(--rsv-brand-bare);
    box-shadow: inset 0 0 0 1px rgba(141, 69, 162, .1);
}

.rsv-tunet-elem__jel {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--rsv-radius-sm);
    background: var(--rsv-surface-card);
    color: var(--rsv-brand-primary);
    --ikon-meret: 26px;
}

.rsv-tunet-elem__cim {
    font-size: var(--rsv-meret-kicsi);
    font-weight: 700;
    line-height: 1.35;
    color: var(--rsv-brand-dark);
}

/* Forrás- és kontextusjelölés a főszöveg terhelése nélkül (ORVOSI §21). */
.rsv-tunet-forrasjel {
    margin: clamp(var(--rsv-ter-5), 2.4vw, var(--rsv-ter-6)) 0 0;
    max-width: 78ch;
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
}

/* 16.4 „Lehet RSV láz nélkül is?" panel
   --------------------------------------------------------------------------
   A `/rsv` kiemelt paneljét használja. A nagy „Igen." a copy saját, önálló
   sora — ORVOSI GUARDRAIL: a láz hiánya NEM zárja ki az RSV-t.
   -------------------------------------------------------------------------- */

.rsv-tunet-panel__valasz {
    margin: 0 0 var(--rsv-ter-4);
    font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--rsv-brand-primary);
}

.rsv-tunet-panel__zaras {
    margin: var(--rsv-ter-4) 0 0;
    max-width: 68ch;
    font-weight: 600;
    color: var(--rsv-brand-dark);
}

/* 16.5 Közös listastílus
   -------------------------------------------------------------------------- */

.rsv-tunet-lista__cimke {
    margin: 0 0 var(--rsv-ter-3);
    font-weight: 600;
    color: var(--rsv-brand-dark);
}

.rsv-tunet-lista {
    display: grid;
    gap: var(--rsv-ter-3);
    list-style: none;
    margin: 0 0 var(--rsv-ter-5);
    padding: 0;
    max-width: 68ch;
}

.rsv-tunet-lista > * { min-width: 0; }

.rsv-tunet-lista li {
    position: relative;
    padding-left: var(--rsv-ter-5);
    color: var(--rsv-text-secondary);
}

.rsv-tunet-lista li::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(var(--rsv-sormagassag-torzs) * .5em - 3px);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--rsv-brand-secondary);
}

@media (min-width: 768px) {
    /* Hosszabb, rövid tételes listánál két hasáb — nem lesz belőle oszlopnyi lyuk. */
    .rsv-tunet-lista--ketto {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: none;
    }
}

/* 16.6 Nagyon fiatal csecsemők — négy jel
   -------------------------------------------------------------------------- */

.rsv-tunet-jelek {
    display: grid;
    gap: clamp(var(--rsv-ter-4), 2.2vw, var(--rsv-ter-5));
    list-style: none;
    margin: 0;
    padding: 0;
}

.rsv-tunet-jelek > * { min-width: 0; }

@media (min-width: 768px) {
    .rsv-tunet-jelek { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
    .rsv-tunet-jelek { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/*
 * NEM KÁRTYA: a bal oldali brandcsík köti össze őket, háttér nélkül. Így a
 * négy jel egy egységként olvas, és nem versenyez a fölötte álló ábrával.
 */
.rsv-tunet-jel {
    padding-left: var(--rsv-ter-4);
    border-left: 3px solid var(--rsv-brand-secondary);
}

.rsv-tunet-jel__cim {
    margin: 0 0 var(--rsv-ter-2);
    font-size: var(--rsv-meret-h4);
    font-weight: 700;
    color: var(--rsv-brand-dark);
}

.rsv-tunet-jel__szoveg {
    margin: 0;
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
}

/* 16.7 Jegyzetpanel — etetés, NICE-apnoe, sürgős zárás
   --------------------------------------------------------------------------
   EGY komponens, három szakaszban. A `--surgos` változat az urgent tokent
   használja — de CSAK finom kontúrként és jelölőszínként, nem teli vörös
   felületként: a kézikönyv §13 szerint a sürgősségi nyelv valódi, magas tétű
   információt hordoz, nem figyelemfelkeltés.
   -------------------------------------------------------------------------- */

.rsv-tunet-jegyzet {
    display: grid;
    gap: clamp(var(--rsv-ter-4), 2.4vw, var(--rsv-ter-6));
    align-items: start;
    padding: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-7));
    border-radius: clamp(var(--rsv-radius-lg), 2vw, 28px);
    background: var(--rsv-surface-card);
    box-shadow: var(--rsv-arnyek-sm), inset 0 0 0 1px rgba(141, 69, 162, .12);
}

.rsv-tunet-jegyzet > * { min-width: 0; }

@media (min-width: 768px) {
    .rsv-tunet-jegyzet { grid-template-columns: auto minmax(0, 1fr); }
}

.rsv-tunet-jegyzet__jel {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: var(--rsv-radius-md);
    background: var(--rsv-brand-soft);
    color: var(--rsv-brand-primary);
    --ikon-meret: 36px;
}

.rsv-tunet-jegyzet__torzs > :last-child { margin-bottom: 0; }

.rsv-tunet-jegyzet__cim {
    margin: 0 0 var(--rsv-ter-4);
    font-size: var(--rsv-meret-h2);
}

.rsv-tunet-jegyzet__szoveg {
    margin: 0 0 var(--rsv-ter-4);
    max-width: 72ch;
    color: var(--rsv-text-secondary);
}

.rsv-tunet-jegyzet__kiemeles {
    margin: 0 0 var(--rsv-ter-4);
    max-width: 72ch;
    font-size: var(--rsv-meret-lead);
    line-height: 1.5;
    font-weight: 700;
    color: var(--rsv-brand-dark);
}

/*
 * SÜRGŐS VÁLTOZAT. Az urgent token itt valódi jelentést hordoz: apnoe és
 * állapotrosszabbodás. A felület halvány marad, a jelzést a kontúr, az ikon
 * és a kiemelt mondat színe adja.
 */
.rsv-tunet-jegyzet--surgos {
    margin-top: clamp(var(--rsv-ter-5), 2.6vw, var(--rsv-ter-6));
    background: color-mix(in srgb, var(--rsv-urgent) 5%, var(--rsv-surface-card));
    box-shadow: var(--rsv-arnyek-sm),
                inset 0 0 0 1px color-mix(in srgb, var(--rsv-urgent) 34%, transparent);
}

.rsv-tunet-jegyzet--surgos .rsv-tunet-jegyzet__jel {
    background: color-mix(in srgb, var(--rsv-urgent) 12%, var(--rsv-surface-card));
    color: var(--rsv-urgent);
}

.rsv-tunet-jegyzet--surgos .rsv-tunet-jegyzet__kiemeles { color: var(--rsv-urgent); }

/* 16.8 Alsó légúti érintettség — két állapot egymás mellett
   -------------------------------------------------------------------------- */

.rsv-tunet-ketto {
    display: grid;
    gap: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-7));
}

.rsv-tunet-ketto > * { min-width: 0; }

@media (min-width: 992px) {
    .rsv-tunet-ketto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.rsv-tunet-allapot {
    padding: clamp(var(--rsv-ter-5), 2.6vw, var(--rsv-ter-6));
    border-radius: var(--rsv-radius-lg);
    background: var(--rsv-surface-card);
    box-shadow: var(--rsv-arnyek-sm), inset 0 0 0 1px rgba(141, 69, 162, .1);
}

/*
 * A PANEL SAJÁT KÉPE. Nem közös spektrumábra: a bronchiolitis a
 * hörgőcske-keresztmetszetet, a pneumonia az alveolusokat viszi.
 */
.rsv-tunet-allapot__kep {
    display: block;
    width: 160px;
    height: auto;
    margin: 0 0 var(--rsv-ter-4);
}

@media (min-width: 768px) {
    .rsv-tunet-allapot__kep { width: 200px; }
}

.rsv-tunet-allapot__cim {
    margin: 0 0 var(--rsv-ter-4);
    font-size: var(--rsv-meret-h3);
    font-weight: 700;
    color: var(--rsv-brand-dark);
}

.rsv-tunet-allapot__zaras {
    margin: 0;
    font-weight: 600;
    color: var(--rsv-brand-dark);
}

/* Szakaszzáró, önálló súlyú mondat (pl. „otthon nem lehet eldönteni"). */
.rsv-tunet-zaras {
    margin: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-6)) 0 0;
    max-width: 74ch;
    font-size: var(--rsv-meret-lead);
    line-height: 1.55;
    font-weight: 600;
    color: var(--rsv-brand-dark);
}

/* 16.9 Légzési jelek — magyarázatok
   --------------------------------------------------------------------------
   SPEC §8: a konkrét magyarázat HTML-ben van; az ábra fölötte, közös vizuális
   támaszként áll. A jelek NEM kapnak külön ikont — az ismétlés kettős jelölés
   lenne.
   -------------------------------------------------------------------------- */

.rsv-tunet-magyarazatok {
    display: grid;
    gap: clamp(var(--rsv-ter-4), 2vw, var(--rsv-ter-5));
}

.rsv-tunet-magyarazatok > * { min-width: 0; }

@media (min-width: 768px) {
    .rsv-tunet-magyarazatok {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        /*
         * FESZES 2x2 + TELJES SZÉLESSÉGŰ ZÁRÓELEM (2026-08-27-i mikrojavítás).
         *
         * A szakasznak ÖT magyarázó eleme van (a fölötte álló ábra négyet
         * rajzol meg), ezért két hasábban az ötödik egy háromsoros rács
         * ÁRVA cellájába került: mellette üres hely maradt, és a blokk
         * széteső benyomást keltett.
         *
         * A copy nem változhat, tehát az ötödik elem nem hagyható el. Helyette
         * a teljes sort átfogja: az első négy így tiszta 2x2-t alkot, az
         * ötödik pedig szándékos zárósorként olvas, nem hiányos rácsként.
         *
         * A `align-items: start` kell hozzá: enélkül a két hasáb elemei
         * egymás magasságára nyúlnának, és a felső él nem lenne egy vonalban.
         */
        align-items: start;
    }

    /*
     * `:nth-child(odd):last-child` — az UTOLSÓ elem csak akkor fogja át a
     * sort, ha PÁRATLAN helyen áll, vagyis egyébként árván maradna a két
     * hasábos rácsban. Páros elemszámnál a szabály magától nem érvényesül,
     * tehát a rács akkor is helyes marad, ha a copy egyszer változik.
     */
    .rsv-tunet-magyarazat:nth-child(odd):last-child { grid-column: 1 / -1; }
}

/*
 * KÉP + SZÖVEG EGY SORBAN. A csereasset közvetlenül a saját magyarázatához
 * tartozik, ezért MELLETTE áll, nem egy közös keretben fölötte.
 */
.rsv-tunet-magyarazat {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: clamp(var(--rsv-ter-4), 2vw, var(--rsv-ter-5));
    padding-top: var(--rsv-ter-4);
    border-top: 1px solid var(--rsv-border-default);
}

.rsv-tunet-magyarazat__kep {
    display: block;
    width: 108px;
    height: auto;
}

@media (min-width: 992px) {
    .rsv-tunet-magyarazat__kep { width: 132px; }
}

.rsv-tunet-magyarazat__cim {
    margin: 0 0 var(--rsv-ter-3);
    font-size: var(--rsv-meret-h3);
    font-weight: 700;
    color: var(--rsv-brand-dark);
}

.rsv-tunet-magyarazat p {
    margin: 0 0 var(--rsv-ter-3);
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
}

.rsv-tunet-magyarazat p:last-child { margin-bottom: 0; }

/* Kiemelt, önálló mondat a szakasz végén — nem alert, csak nyomaték. */
.rsv-tunet-kiemeles {
    margin: clamp(var(--rsv-ter-5), 2.6vw, var(--rsv-ter-6)) 0 0;
    padding-left: var(--rsv-ter-4);
    border-left: 3px solid var(--rsv-brand-secondary);
    max-width: 74ch;
    font-size: var(--rsv-meret-lead);
    line-height: 1.5;
    font-weight: 600;
    color: var(--rsv-brand-dark);
}

/* Címkézett továbblink („Részletes triázs: …"). */
.rsv-tunet-tovabblink {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rsv-ter-2) var(--rsv-ter-3);
    margin: var(--rsv-ter-4) 0 0;
}

.rsv-tunet-tovabblink__cimke {
    font-size: var(--rsv-meret-kicsi);
    font-weight: 700;
    color: var(--rsv-text-secondary);
}

/* 16.10 Figyelmeztető jelek — riasztólista
   --------------------------------------------------------------------------
   NYOLC jel, egységes sürgős jelöléssel. Ikon NINCS rajtuk: a szakasz ábrája
   ezek közül négyet rajzol meg, az ikonos ismétlés kettős jelölés lenne.

   A jelölő egy tömör pont az urgent színben — a felület halvány marad, tehát
   a szakasz erős, de nem vörös tábla.
   -------------------------------------------------------------------------- */

.rsv-tunet-riasztolista {
    display: grid;
    gap: var(--rsv-ter-3);
    list-style: none;
    margin: 0;
    padding: 0;
}

.rsv-tunet-riasztolista > * { min-width: 0; }

@media (min-width: 768px) {
    .rsv-tunet-riasztolista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.rsv-tunet-riaszto {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--rsv-ter-4);
    padding: var(--rsv-ter-4) var(--rsv-ter-5);
    border-radius: var(--rsv-radius-md);
    background: color-mix(in srgb, var(--rsv-urgent) 4%, var(--rsv-surface-card));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rsv-urgent) 20%, transparent);
    color: var(--rsv-text-primary);
}

.rsv-tunet-riaszto__jel {
    width: 10px;
    height: 10px;
    margin-top: calc(var(--rsv-sormagassag-torzs) * .5em - 5px);
    border-radius: 50%;
    background: var(--rsv-urgent);
}

/* 16.10/b A figyelmeztető jelek négy jelentéscsoport-képe
   --------------------------------------------------------------------------
   Az `ASSET_MAPPING.md` 2. pontja kiköti: a NYOLC látható jel copyja
   VÁLTOZATLAN, és ez a négy kép a nyolc mögötti négy fő jelentéscsoportot
   szemlélteti (légzési munka, kékes elszíneződés, ivás/kiszáradás,
   bágyadtság), a lista sorrendjét követve.

   NEM KÖZÖS KERETBEN állnak — a csomag kifejezetten tiltja a „négy ikon egy
   nagy üres keretben" megoldást, ami éppen a lecserélt ábra hibája volt.
   Önálló képek, közvetlenül a lista fölött, érdemi méretben.

   A sor `aria-hidden`: a nyolc jel szövege alatta hiánytalanul ott van, tehát
   a képek redundáns bejelentése csak zajt adna.
   -------------------------------------------------------------------------- */

.rsv-tunet-riasztokepek {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(var(--rsv-ter-4), 2.4vw, var(--rsv-ter-5));
    justify-items: center;
    list-style: none;
    margin: 0 0 clamp(var(--rsv-ter-5), 2.6vw, var(--rsv-ter-6));
    padding: 0;
}

.rsv-tunet-riasztokepek > * { min-width: 0; }

@media (min-width: 768px) {
    .rsv-tunet-riasztokepek { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.rsv-tunet-riasztokep {
    display: block;
    width: 100%;
    max-width: 240px;
    height: auto;
}

/* 16.11 Folyószöveg-blokk (diagnózis, fogalmi zárás)
   -------------------------------------------------------------------------- */

.rsv-tunet-folyoszoveg > :last-child { margin-bottom: 0; }
.rsv-tunet-folyoszoveg p { max-width: 74ch; }

/* 16.12 RSV vs. bronchiolitis — két fogalom szemben
   --------------------------------------------------------------------------
   FOGALMI GUARDRAIL: a vírus és az általa (is) okozott betegség két különböző
   dolog. A `<dl>` szemantikailag is fogalom–magyarázat párokat jelent be.
   -------------------------------------------------------------------------- */

.rsv-tunet-szembe {
    display: grid;
    gap: clamp(var(--rsv-ter-4), 2.4vw, var(--rsv-ter-5));
    margin: 0 0 clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-6));
}

.rsv-tunet-szembe > * { min-width: 0; }

@media (min-width: 768px) {
    .rsv-tunet-szembe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.rsv-tunet-szembe__elem {
    padding: clamp(var(--rsv-ter-5), 2.6vw, var(--rsv-ter-6));
    border-radius: var(--rsv-radius-lg);
    background: var(--rsv-brand-soft);
}

.rsv-tunet-szembe__cimke {
    margin: 0 0 var(--rsv-ter-2);
    font-size: var(--rsv-meret-h3);
    font-weight: 800;
    line-height: 1.25;
    color: var(--rsv-brand-dark);
}

.rsv-tunet-szembe__szoveg {
    margin: 0;
    color: var(--rsv-text-secondary);
}

/* 16.13 Négy megfigyelési pont
   --------------------------------------------------------------------------
   SPEC §10: ez NEM otthoni kezelési szakasz. A négy pont sorszámot kap, nem
   ikont — a szakasz ábrája rajzolja a négy csomópontot.
   -------------------------------------------------------------------------- */

.rsv-tunet-pontok {
    display: grid;
    gap: clamp(var(--rsv-ter-4), 2.2vw, var(--rsv-ter-5));
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: rsv-tunet-pont;
}

.rsv-tunet-pontok > * { min-width: 0; }

@media (min-width: 768px) {
    .rsv-tunet-pontok { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
    .rsv-tunet-pontok { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.rsv-tunet-pont {
    position: relative;
    padding: clamp(var(--rsv-ter-5), 2.4vw, var(--rsv-ter-6));
    border-radius: var(--rsv-radius-lg);
    background: var(--rsv-brand-bare);
    box-shadow: inset 0 0 0 1px rgba(141, 69, 162, .1);
}

/*
 * A PONT SAJÁT KÉPE. Nem közös idővonal: mind a négy megfigyelési pont a
 * hozzá tartozó illusztrációt viszi, közvetlenül a címe fölött.
 */
.rsv-tunet-pont__kep {
    display: block;
    width: 132px;
    height: auto;
    margin: 0 0 var(--rsv-ter-3);
}

@media (min-width: 768px) {
    .rsv-tunet-pont__kep { width: 168px; }
}

/*
 * A SORSZÁM a kép mellett HALKABB lett: a hangsúlyt a kép és a cím viszi, a
 * szám csak a sorrendet jelöli.
 */
.rsv-tunet-pont__szam {
    display: block;
    margin-bottom: var(--rsv-ter-2);
    font-size: var(--rsv-meret-meta);
    font-weight: 800;
    letter-spacing: .1em;
    line-height: 1;
    color: rgba(141, 69, 162, .5);
}

.rsv-tunet-pont__cim {
    margin: 0 0 var(--rsv-ter-2);
    font-size: var(--rsv-meret-h4);
    font-weight: 700;
    color: var(--rsv-brand-dark);
}

.rsv-tunet-pont__szoveg {
    margin: 0;
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
}


/* --------------------------------------------------------------------------
   17. A `/rsv-szezon` ALOLDAL — „Mikor van RSV-szezon?"
   --------------------------------------------------------------------------
   Kanonikus forrás: az `RSV_SZEZON_CLAUDE_PACKAGE_v1` csomag `PAGE_SPEC.md`
   és `ASSET_MAPPING.md` fájlja, valamint az IA §6.4.

   ÚJ SZÍNPALETTA NEM KELETKEZETT. Ez a szakasz KIZÁRÓLAG a 2. szakasz
   tokenjeiből és azok `rgba()` alakjából épül — pontosan úgy, ahogy a négy
   lezárt aloldal. A csomag „Arculat" pontja ezt kifejezetten kiköti.

   AZ ÖTÖDIK TARTALMI ALOLDAL. Ami közös (hero, szekcióháttér, szemöldök,
   lead, gomb, GYIK, szószedet, routing kártya, forrásblokk), az a MEGLÉVŐ
   `.rsv-alap*` komponens. Ide csak az kerül, amit ennek az oldalnak a saját
   szerkezete indokol.

   A KÉPEK HÁROM CSOPORTJA — HÁROM KEZELÉS:

     1. HERO (A01). Összeégetett, világos hátterű SÁV (kb. 2,85:1). Megkapja a
        `/rsv`-n bevezetett mélységi kezelést (lap + szorzás + lágy peremezés),
        de a hero RÁCSA saját arányt kap: egy ilyen széles kompozíció a lezárt
        oldalak keskenyebb jobb hasábjában vékony csíkká esne össze.

     2. ADATGRAFIKONOK (A02, A03). Vektorosak, saját felirattal. NEM kapnak
        szorzást és maszkot: az adatábra pereme és tengelyfeliratai TARTALOM,
        azokat elmosni információvesztés lenne.

     3. ILLUSZTRÁCIÓK (A05–A10). A surveillance-kártyák és a felkészülési
        pontok masterei ELTÉRŐ ARÁNYÚAK és eltérő hátterűek (kettő opak fehér,
        kettő átlátszó). Ezért egységes képmezőbe kerülnek `object-fit:
        contain` illesztéssel — így egyik sem torzul, és a négyes egy
        készletként olvasódik.
   -------------------------------------------------------------------------- */

/* 17.1 Page hero — TELJES MAGASSÁGÚ, KIFUTÓ VIZUÁLIS ZÓNA
   --------------------------------------------------------------------------
   AZ ELSŐ MEGOLDÁS ELVETVE (projektgazdai vizuális review, 2026-08-28).

   Mi volt a baj? A `/rsv` és a `/tunetek` hero-mastere közel álló kompozíció,
   ezért ott a vizuál a jobb hasáb TETEJÉN ül, `align-self: start`-tal és
   negatív felső margóval. Az A01 viszont 1624x570-es SÁV: ugyanebben a
   rendszerben vékony bannerként ragadt a jobb felső sarokban, alatta nagy üres
   folttal. A két hero-fél nem alkotott egységet, és a kép kártya/banner
   hatásúra vágódott ki.

   A JAVÍTÁS LÉNYEGE: a vizuál már nem egy kép a rácsban, hanem a hero JOBB
   VIZUÁLIS ZÓNÁJA.

     1. ABSZOLÚT POZÍCIÓ A SZEKCIÓHOZ KÉPEST. A vizuál kikerül a rácsfolyamból,
        és a `.rsv-alaphero` — vagyis a TELJES SZÉLESSÉGŰ szekció — jobb
        oldalához tapad. Így a jobb szélen KIFUT a nézetablakig: nincs többé
        körberajzolt képdoboz. A burok max. 1360 px-es tartalmi szélessége
        VÁLTOZATLAN — az a copyra és a rácsra vonatkozik.

     2. TELJES MAGASSÁG. A `top`/`bottom` a hero teljes belmagasságát kitölti,
        a kép pedig `object-fit: cover`-rel tölti ki a zónát. Ezzel megszűnik a
        kép alatti üres folt: a sáv-master már nem a saját arányát kényszeríti
        a heróra, hanem a hero adja a keretet.

     3. A RÁCS 45 / 55. A vizuál kiesik a folyamból, ezért a rács egyetlen
        megmaradt eleme — a copy — az ELSŐ, 45%-os hasábba kerül; a második
        hasáb szándékosan üres helytartó a vizuális zóna alatt.

     4. LÁGY BAL PEREM, KEMÉNY KIFUTÁS. A kép csak BALRA halványul el, hogy
        beleolvadjon a copy oldalába; jobbra, fel és le kifut. A korábbi
        négyoldalas maszk és a `::before` fényudvar-lap éppen a KÁRTYAHATÁST
        okozta, ezért ezen a heroón mindkettő ki van kapcsolva.

   A `mix-blend-mode: multiply` MARAD: a master háttere közel fehér, ott a
   szorzás alig változtat, a lila vírusmező viszont elmélyül és összeolvad a
   hero gradiensével. Új szín nem keletkezik.

   MOBILON: szöveg -> CTA-k -> NAGY, teljes szélességű vizuál. Ott a kép
   visszakerül a normál folyamba, és a burok oldalmargóján is túlfut, hogy
   éltől élig érjen.
   -------------------------------------------------------------------------- */

/* Feszesebb függőleges ritmus: a review kifejezetten kérte az üres tér
   radikális csökkentését. */
.rsv-alaphero--szezon {
    padding-bottom: clamp(var(--rsv-ter-5), 2.4vw, var(--rsv-ter-7));
}

/*
 * MOBIL — a vizuál éltől élig ér.
 *
 * A burok oldalmargóján túlfuttatjuk, hogy a kép ne egy behúzott kártya
 * legyen. A szekció `overflow: hidden`-je vágja a kilógást, tehát vízszintes
 * görgetés nem keletkezik. (Ez SZÁNDÉKOS kifutás, nem elrejtett hiba: a
 * negatív margó pontosan az oldalmargóval egyenlő.)
 */
.rsv-alaphero--szezon .rsv-alaphero__vizual {
    margin-inline: calc(-1 * var(--rsv-oldalmargo));
}

.rsv-alaphero--szezon .rsv-alaphero__vizual img {
    width: 100%;
    height: clamp(200px, 46vw, 300px);
    object-fit: cover;
    object-position: 55% 50%;
}

/*
 * A KÁRTYAHATÁST OKOZÓ KÉT RÉTEG KIKAPCSOLVA.
 *
 * A `::before` egy halvány levendula lapot tett a kép MÖGÉ, a négyoldalas
 * maszk pedig körberajzolta a peremét — együtt pontosan azt a lebegő
 * képkártyát adták, amit a review elvetett. Helyettük egyetlen, iránytartó
 * fade marad (lentebb).
 */
.rsv-alaphero--szezon .rsv-alaphero__vizual::before {
    content: none;
}

@media (min-width: 992px) {

    .rsv-alaphero--szezon .rsv-alaphero__racs {
        /*
         * A vizuál abszolút pozícióba kerül, tehát KIESIK a rácsfolyamból: a
         * copy marad az egyetlen rácselem, és az első, 45%-os hasábot kapja.
         * A második hasáb üres helytartó a vizuális zóna alatt.
         */
        grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
        align-items: center;

        /*
         * ALSÓ KORLÁT a vizuális zónának. Ha a copy valaha rövidebb lenne, a
         * kép enélkül összelapulna — a hero magasságát nem bízzuk a szöveg
         * hosszára.
         */
        min-height: 420px;
    }

    /*
     * A JOBB VIZUÁLIS ZÓNA.
     *
     * A pozicionálás alapja a `.rsv-alaphero` (annak van `position:
     * relative`-je), ami TELJES SZÉLESSÉGŰ — ezért az 55% a nézetablak 55%-a,
     * és a kép a jobb szélig kifut.
     *
     * A `top` a lebegő fejléc alatt kezdődik: enélkül a kompozíció a
     * fejléc-kártya mögé csúszna, és a kártya körül kilátszana.
     */
    .rsv-alaphero--szezon .rsv-alaphero__vizual {
        position: absolute;
        top: var(--rsv-fejlec-magassag);
        right: 0;
        bottom: 0;
        width: 55%;

        margin: 0;
        align-self: auto;
    }

    .rsv-alaphero--szezon .rsv-alaphero__vizual img {
        width: 100%;
        height: 100%;
        object-fit: cover;

        /*
         * A KOMPOZÍCIÓ JOBB HARMADA A LÉNYEG: ott sűrűsödnek a vírusok és ott
         * fut fel a fényív. Magas, keskeny zónába vágva a bal széli üres
         * levendula esne be, ezért a fókuszt jobbra toljuk.
         */
        object-position: 62% 50%;
    }
}

/*
 * LÁGY BAL PEREM — CSAK DESKTOPON.
 *
 * A fade FELADATA az, hogy a kép a MELLETTE álló copy felé olvadjon el. Ez
 * kizárólag a kétoszlopos elrendezésben értelmes: mobilon a vizuál önálló,
 * teljes szélességű sáv, ott ugyanez a maszk indokolatlanul kifakítaná a bal
 * harmadát — a vírusmező szinte eltűnt belőle.
 *
 * EGYETLEN, IRÁNYTARTÓ MASZK, nem négyoldalas keret. Ahol a böngésző nem
 * ismeri a `mask-image`-et, a kép TELJES EGÉSZÉBEN látszik: a perem keményebb
 * marad, de tartalom nem veszik el.
 */
@media (min-width: 992px) {
    .rsv-alaphero--szezon .rsv-alaphero__vizual img {
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18%);
        mask-image: linear-gradient(to right, transparent 0, #000 18%);
    }
}

/* A copy „Kiemelt mondat" mezője — az oldal vezérgondolata a hero alján. */
.rsv-szezon-hero__kiemeles {
    max-width: 56ch;
    margin: var(--rsv-ter-5) 0 0;
    padding-left: var(--rsv-ter-4);
    border-left: 3px solid var(--rsv-brand-secondary);

    color: var(--rsv-brand-dark);
    font-size: var(--rsv-meret-torzs);
    font-weight: 600;
    line-height: var(--rsv-sormagassag-torzs);
}


/* 17.2 Közös szövegelemek
   -------------------------------------------------------------------------- */

/* Olvasási oszlop — a kézikönyv §7.1 szerinti sorhosszúság. */
.rsv-szezon-folyoszoveg { max-width: 76ch; }

.rsv-szezon-folyoszoveg > :last-child { margin-bottom: 0; }

/*
 * KIEMELT MONDAT. Az oldal több szakaszában áll egy-egy önálló, hangsúlyos
 * állítás (a „tipikus mintázat, nem menetrend", a 12. heti nevező, az első
 * szezon logikája). Ugyanaz a vizuális jel mindegyiknél.
 */
.rsv-szezon-kiemeles {
    max-width: 70ch;
    margin: var(--rsv-ter-6) 0 0;
    padding: var(--rsv-ter-4) var(--rsv-ter-5);

    background: var(--rsv-brand-bare);
    border-left: 3px solid var(--rsv-brand-secondary);
    border-radius: 0 var(--rsv-radius-sm) var(--rsv-radius-sm) 0;

    color: var(--rsv-brand-dark);
    font-size: var(--rsv-meret-torzs);
    font-weight: 600;
}

/*
 * TARTALMI HATÁR. Ahol a copy kimondja, hogy egy téma NEM ezen az oldalon él
 * (profilaxis, finanszírozás, gyakorlati megelőzés), a mondat halkabb — ez
 * navigációs jelzés, nem orvosi állítás.
 */
.rsv-szezon-hatar {
    max-width: 72ch;
    margin: var(--rsv-ter-5) 0 0;
    color: var(--rsv-text-secondary);
    font-size: var(--rsv-meret-kicsi);
}

.rsv-szezon-lista__cimke {
    margin: var(--rsv-ter-6) 0 var(--rsv-ter-4);
    color: var(--rsv-text-secondary);
    font-size: var(--rsv-meret-kicsi);
    font-weight: 600;
    letter-spacing: .01em;
}

.rsv-szezon-zaras {
    max-width: 72ch;
    margin: var(--rsv-ter-6) auto 0;
    text-align: center;
    color: var(--rsv-text-secondary);
}

/* A kiemelő panelek — a meglévő insight-panelre ülnek rá. */
.rsv-szezon-panel { margin-top: var(--rsv-ter-6); }

.rsv-szezon-panel--uzenet { margin-top: var(--rsv-ter-7); }

.rsv-szezon-panel__uzenet {
    margin: var(--rsv-ter-2) 0 var(--rsv-ter-3);
    color: var(--rsv-brand-dark);
    font-size: var(--rsv-meret-h4);
    font-weight: 700;
    line-height: 1.4;
}


/* 17.2/b „Mikor kell leginkább számítani az RSV-re?" — KÉT SZÖVEGHASÁB
   --------------------------------------------------------------------------
   AZ ELSŐ ELRENDEZÉS ELVETVE (vizuális review, 2026-08-28).

   Mi volt a baj? A szakasz a SZÉLES (1360 px) burokban állt, a szövege viszont
   `max-width: 76ch`-re volt fogva. A kettő együtt egy keskeny bal hasábot és
   egy nagy, üres jobb mezőt adott — úgy nézett ki, mintha hiányozna onnan egy
   vizuál.

   A JAVÍTÁS NEM KÉPPEL TÖLTI KI a helyet (az csak dekoráció lenne), hanem:

     1. a NORMÁL, ~1200 px-es konténerre vált (`.rsv-burok`), tehát a szakasz
        eleve nem nyúlik túl a tartalmi szélességen;
     2. a törzsszöveget KÉT HASÁBBA rendezi — a bal a leíró bekezdéseket, a
        jobb az insightot és a záró gondolatot viszi;
     3. a szekciófejnek több helyet ad, hogy a H2 valódi editorial címsorként
        viselkedjen, ne törjön korán három sorba.

   OLVASÁSI SORHOSSZ: 1200 px tartalmi szélességnél, 64 px-es hasábközzel egy
   hasáb ~568 px — 18 px-es törzsszövegnél nagyjából 60–65 karakter. Ez a
   kézikönyv §7.1 szerinti sávban van, tehát a két hasáb NEM lett túl hosszú.

   ALATTA VÁLTOZATLAN a szezonív ábra és az öt évszak-kártya.
   -------------------------------------------------------------------------- */

/*
 * SZÉLESEBB SZEKCIÓFEJ — VALÓDI EDITORIAL CÍMSOR.
 *
 * Az `.rsv-alap-oldal` globálisan 820 px-re fogja a szekciófejeket. Ez a cím
 * ott korán tördelt, holott a review kifejezetten SZÉLESEBB címsort kért:
 * a teljes tartalmi szélességet megkapja, így desktopon egy sorban áll.
 * A felülírás CSAK erre a szakaszra vonatkozik.
 */
.rsv-szezon-mikor .rsv-szezon-mikor__fej {
    max-width: none;
}

.rsv-szezon-mikor__oszlopok {
    display: grid;
    gap: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-6));
}

/*
 * KÉT HASÁB CSAK VALÓDI DESKTOPON. Mobilon és kisebb tableten egy oszlop
 * marad — ott a hasábolás olvashatatlanul keskeny sávokat adna.
 */
@media (min-width: 992px) {
    .rsv-szezon-mikor__oszlopok {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(48px, 4vw, 64px);
    }
}

.rsv-szezon-mikor__oszlop > * { max-width: 62ch; }

.rsv-szezon-mikor__oszlop > :last-child { margin-bottom: 0; }

/*
 * Az insight a JOBB hasáb ELSŐ eleme, ezért nem kell fölé a szokásos nagy
 * elválasztó köz — a hasáb teteje már maga az elválasztás.
 */
.rsv-szezon-mikor__oszlop > .rsv-szezon-kiemeles:first-child {
    margin-top: 0;
}


/* 17.2/c EDITORIAL KÉT HASÁB — „2025/26-os szezon" és „mikor született a baba?"
   --------------------------------------------------------------------------
   AZ EDDIGI ELRENDEZÉS ELVETVE (vizuális review, 2026-08-28).

   Mi volt a baj? Mindkét szakasz SZÉLES (1360 px) burokban áll, mert a
   vizuáljuk — az A08 kompozíció és az A03 adatgrafikon — teljes szélességű.
   A fölöttük lévő copy viszont egyetlen, 76ch-re fogott oszlopban maradt,
   így mellette indokolatlan üres jobb mező keletkezett.

   A JAVÍTÁS NEM HÚZZA 1200 PX SZÉLESRE A BEKEZDÉSEKET — az olvashatatlanul
   hosszú sorokat adna. Helyette két hasábra bontja a törzsszöveget:

     - a hasábtömb saját, 1180 px-es korlátot kap, hogy egy hasáb 540–570 px
       között maradjon (18 px-es törzsszövegnél ~60 karakter / sor);
     - a szekciófej viszont felszabadul a 820 px-es globális korlát alól, így
       a H2 valódi, széles editorial címsor;
     - a lead mérsékeltebb, kb. 1000 px-es korlátot kap: az még kényelmesen
       olvasható, de már nem keskeny sáv.

   A VIZUÁLOK VÁLTOZATLANOK: az A08 és az A03 továbbra is a teljes, 1360 px-es
   burkot kapja — azokhoz ez a kör nem nyúlt.
   -------------------------------------------------------------------------- */

/*
 * A `.rsv-alap-oldal` leszármazott-szelektorral fogja 820 px-re a
 * szekciófejeket, ezért a felülírásnak is két osztálynyi fajsúly kell.
 */
.rsv-alap-oldal .rsv-szezon-fej--szeles {
    max-width: none;
}

.rsv-alap-oldal .rsv-szezon-fej--szeles .rsv-lead {
    max-width: 1000px;
}

.rsv-szezon-hasabok {
    display: grid;
    gap: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-6));

    /*
     * A KORLÁT ADJA A HASÁBSZÉLESSÉGET. 1180 px és 60 px köz mellett egy hasáb
     * 560 px — pontosan a kért 540–570 px-es sávban. A burok ettől függetlenül
     * marad 1360 px széles, mert a vizuálok azt használják.
     */
    max-width: 1180px;
}

@media (min-width: 992px) {
    .rsv-szezon-hasabok {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(56px, 4vw, 64px);
    }
}

.rsv-szezon-hasab > * { max-width: 62ch; }

.rsv-szezon-hasab > :last-child { margin-bottom: 0; }

/*
 * A HASÁBOK ALATTI, TELJES SZÉLESSÉGŰ ELEMEK.
 *
 * A heti számsor és a nevezőt megadó insight szándékosan a hasábok ALATT fut
 * végig: így kiemeltek maradnak, de nem szorulnak keskeny bal oszlopba.
 * A `--szeles` az insight alapértelmezett 70ch-es korlátját oldja fel.
 */
.rsv-szezon-szamsor {
    max-width: 1180px;
    margin-top: clamp(var(--rsv-ter-5), 2.4vw, var(--rsv-ter-6));
}

.rsv-szezon-kiemeles--szeles {
    max-width: 1180px;
}


/* 17.3 Adatgrafikonok (A02, A03)
   --------------------------------------------------------------------------
   EZEK NEM DÍSZEK. Az A03 valódi NNGYK SARI-adatot rajzol, az A02 pedig
   szemléltető szezonívet. Ezért:

     - NINCS szorzásos keverés és NINCS maszkos peremezés: a tengelyfeliratok
       és a görbe vége is tartalom;
     - a felirat (`<figcaption>`) a kép RÉSZE, nem opcionális dísz — az A03-nál
       kötelezően kimondja, hogy a hiányzó hetek nincsenek interpolálva;
     - a kép saját, világos lapon ül, hogy a szekcióháttérből kiváljon.
   -------------------------------------------------------------------------- */

.rsv-szezon-abra {
    margin: var(--rsv-ter-7) 0 0;
    padding: clamp(var(--rsv-ter-3), 2vw, var(--rsv-ter-5));

    background: var(--rsv-surface-card);
    border: 1px solid var(--rsv-border-default);
    border-radius: var(--rsv-radius-lg);
    box-shadow: var(--rsv-arnyek-sm);
}

.rsv-szezon-abra img {
    display: block;
    width: 100%;
    height: auto;
}

.rsv-szezon-abra__felirat {
    margin-top: var(--rsv-ter-4);
    padding-top: var(--rsv-ter-3);
    border-top: 1px solid var(--rsv-border-default);

    color: var(--rsv-text-secondary);
    font-size: var(--rsv-meret-meta);
    line-height: 1.55;
}

/*
 * AZ ADATGRAFIKON KESKENY NÉZETABLAKON.
 *
 * Az A03 huszonkét heti címkét visel a vízszintes tengelyen. 360 px-en a
 * teljes szélességre zsugorítva ezek olvashatatlan pöttyökké esnének össze —
 * a QA-lista viszont kifejezetten kéri, hogy „mobilon is olvasható" legyen.
 *
 * Ezért a grafikon 768 px alatt VÍZSZINTESEN GÖRGETHETŐ, alsó szélességkorlát
 * mellett. A felirat NEM görgethető vele: az a kereten kívül marad, tehát a
 * forrásmegjelölés és az interpolációs megszorítás mindig látszik.
 */
@media (max-width: 767.98px) {
    .rsv-szezon-abra--adat .rsv-szezon-abra__gorgo {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .rsv-szezon-abra--adat .rsv-szezon-abra__gorgo img { min-width: 560px; }
}


/* 17.4 A szezonív szöveges logikája — öt évszak
   --------------------------------------------------------------------------
   Az ábra önmagában nem lehet az egyetlen információforrás. Az öt szakasz
   valódi `<dl>`: a fogalom és a magyarázata szerkezetileg is összetartozik.
   -------------------------------------------------------------------------- */

.rsv-szezon-szakaszok {
    display: grid;
    gap: var(--rsv-ter-3);
    margin: 0;
}

@media (min-width: 768px) {
    .rsv-szezon-szakaszok { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
    .rsv-szezon-szakaszok { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.rsv-szezon-szakasz {
    padding: var(--rsv-ter-4);
    background: var(--rsv-brand-bare);
    border-radius: var(--rsv-radius-md);
}

.rsv-szezon-szakasz__cimke {
    margin-bottom: var(--rsv-ter-2);
    color: var(--rsv-brand-primary);
    font-size: var(--rsv-meret-kicsi);
    font-weight: 700;
    letter-spacing: .02em;
}

.rsv-szezon-szakasz__szoveg {
    margin: 0;
    color: var(--rsv-text-primary);
    font-size: var(--rsv-meret-kicsi);
    line-height: 1.6;
}


/* 17.5 A 2025/26-os szezon — SZÁMSOR ÉS HÁROM EDITORIAL KIEMELÉS
   --------------------------------------------------------------------------
   AZ ÖT MINI-STAT KÁRTYA ELVETVE (vizuális review, 2026-08-28): admin-dashboard
   hatást keltett, és elvonta a figyelmet a grafikonról, amelynek vizuális
   főszereplőnek kell lennie.

   HELYETTE:
     - a heti számsor a copy SAJÁT mondatában, folyó szövegként áll (a számok
       változatlanok, csak nem widgetekben);
     - a grafikon ALATT három editorial kiemelés összegzi a szezon ívét.

   A HÁRMAS NEM KÁRTYA: nincs háttere, nincs kerete, nincs árnyéka. Csak egy
   felső hajszálvonal és a márkalila címke különbözteti meg — így összegzés
   marad, nem KPI-widget.
   -------------------------------------------------------------------------- */

/* A számsor kiemelten, de FOLYÓ SZÖVEGKÉNT — nem táblázat, nem chipsor. */
.rsv-szezon-szamsor {
    font-size: var(--rsv-meret-lead);
    font-weight: 600;
    color: var(--rsv-brand-primary);
    letter-spacing: .01em;
}

.rsv-szezon-kulcsok {
    display: grid;
    gap: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-7));

    margin: clamp(var(--rsv-ter-5), 2.6vw, var(--rsv-ter-6)) 0 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .rsv-szezon-kulcsok { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.rsv-szezon-kulcs {
    display: flex;
    flex-direction: column;
    gap: var(--rsv-ter-2);

    padding-top: var(--rsv-ter-4);
    border-top: 2px solid var(--rsv-brand-secondary);
}

.rsv-szezon-kulcs__cimke {
    color: var(--rsv-brand-primary);
    font-size: var(--rsv-meret-kicsi);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.rsv-szezon-kulcs__szoveg {
    color: var(--rsv-text-primary);
    font-size: var(--rsv-meret-torzs);
    line-height: 1.55;
}


/* 17.6 Surveillance-kártyák — HÁROM EGYENRANGÚ INFORMÁCIÓS PANEL
   --------------------------------------------------------------------------
   A SPEC §4 kimondja: „mindhárom kártya teljes felülete kattinthatatlan
   információs blokk; nem CTA". Ezért NINCS bennük link, nincs hover-emelés és
   nincs nyíl-glyph — semmi, ami kattinthatóságot ígérne.

   A HÁROM MASTER ARÁNYA ELTÉR (636x618, 723x618, 855x618). Közös, fix arányú
   képmezőbe kerülnek `object-fit: contain` illesztéssel, hogy a három kártya
   képe azonos magasságban kezdődjön és végződjön.
   -------------------------------------------------------------------------- */

.rsv-szezon-forrasok {
    display: grid;
    gap: var(--rsv-ter-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .rsv-szezon-forrasok { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.rsv-szezon-forras {
    display: flex;
    flex-direction: column;

    /* NAGYOBB BELSŐ TÉR (review, 2026-08-28): a hármas korábban tömör volt. */
    padding: clamp(var(--rsv-ter-5), 2.4vw, var(--rsv-ter-7));

    background: var(--rsv-surface-card);
    border: 1px solid var(--rsv-border-default);
    border-radius: var(--rsv-radius-lg);
    box-shadow: var(--rsv-arnyek-sm);
}

.rsv-szezon-forras__kep {
    margin-bottom: clamp(var(--rsv-ter-4), 1.6vw, var(--rsv-ter-5));
    border-radius: var(--rsv-radius-md);
    overflow: hidden;
    background: var(--rsv-brand-bare);
}

/*
 * NAGYOBB VIZUÁL. A 4:3 helyett 5:4 arány + `cover`: a három master így
 * érdemi képfelületet kap, nem bélyeg marad. A `cover` a SZÉLEKET vágja, ahol
 * mindhárom kompozíciónál háttér van — a fókusz megmarad.
 */
.rsv-szezon-forras__kep img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 4;
    object-fit: cover;
}

.rsv-szezon-forras__cim {
    margin-bottom: var(--rsv-ter-3);
    color: var(--rsv-brand-dark);
    font-size: var(--rsv-meret-h3);
}

/* A vezetőmondat nagyobb és sötétebb: ez teszi szkennelhetővé a hármast. */
.rsv-szezon-forras__lead {
    margin: 0 0 var(--rsv-ter-3);
    color: var(--rsv-text-primary);
    font-size: var(--rsv-meret-torzs);
    font-weight: 600;
    line-height: 1.5;
}

.rsv-szezon-forras__szoveg {
    margin: 0;
    color: var(--rsv-text-secondary);
    font-size: var(--rsv-meret-kicsi);
    line-height: 1.65;
}


/* 17.7 „Ezt jelenti / Ezt nem jelenti" — a SARI helyes olvasata
   --------------------------------------------------------------------------
   AZ OLDAL LEGFONTOSABB ADATÉRTELMEZÉSI BLOKKJA (ORVOSI §15). A két oszlop
   SZÁNDÉKOSAN szemben áll egymással; HTML/CSS-ből épül, asset nélkül, és a
   jelölés a meglévő sprite pipa- és x-ikonja.

   A SZÍNJELÖLÉS NEM AZ EGYETLEN MEGKÜLÖNBÖZTETÉS: mindkét oszlop saját, kiírt
   címkét visel („Ezt jelenti" / „Ezt nem jelenti"), tehát színlátás nélkül is
   egyértelmű (WCAG 1.4.1).
   -------------------------------------------------------------------------- */

.rsv-szezon-szembe {
    display: grid;
    gap: var(--rsv-ter-5);
}

@media (min-width: 768px) {
    .rsv-szezon-szembe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.rsv-szezon-szembe__oszlop {
    padding: var(--rsv-ter-5);
    background: var(--rsv-surface-card);
    border: 1px solid var(--rsv-border-default);
    border-radius: var(--rsv-radius-lg);
}

.rsv-szezon-szembe__oszlop--igen { border-top: 3px solid var(--rsv-success); }
.rsv-szezon-szembe__oszlop--nem { border-top: 3px solid var(--rsv-urgent); }

.rsv-szezon-szembe__cimke {
    display: flex;
    gap: var(--rsv-ter-3);
    align-items: center;

    margin-bottom: var(--rsv-ter-4);
    font-size: var(--rsv-meret-h4);
    font-weight: 700;
}

.rsv-szezon-szembe__jel {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: none;
    width: 32px;
    height: 32px;
    border-radius: var(--rsv-radius-pill);
}

.rsv-szezon-szembe__jel .ikon { --ikon-meret: 18px; }

.rsv-szezon-szembe__oszlop--igen .rsv-szezon-szembe__jel {
    color: var(--rsv-success);
    background: rgba(63, 114, 95, .12);
}

.rsv-szezon-szembe__oszlop--nem .rsv-szezon-szembe__jel {
    color: var(--rsv-urgent);
    background: rgba(165, 48, 69, .10);
}

.rsv-szezon-szembe__lista {
    margin: 0;
    padding-left: var(--rsv-ter-5);
}

.rsv-szezon-szembe__lista li + li { margin-top: var(--rsv-ter-3); }


/* 17.8 „Miért számít, mikor született a baba?" — A08 + két értelmező címke
   --------------------------------------------------------------------------
   AZ ASSET SZÖVEG NÉLKÜLI, ezért a két címke HTML-ből jön (SPEC §6).

   A KÉP NEM KAP SZORZÁST ÉS MASZKOT. Az A08 pontosan komponált jelenet,
   amelynek a SZÉLE is tartalom: a szezonív ki- és befutása. A
   `.rsv-alap-vizual` lágy peremezése éppen ezt mosná el.

   A CÍMKÉK RÁCSA a képkompozíció bal és jobb felét követi, ezért 768 px-től
   két oszlop. Alatta egymás alá kerülnek — a kép ott is fölöttük áll, tehát a
   megfeleltetés a sorrendből olvasható.
   -------------------------------------------------------------------------- */

.rsv-szezon-elsoszezon { margin-top: var(--rsv-ter-6); }

.rsv-szezon-elsoszezon__kep {
    border-radius: var(--rsv-radius-lg);
    overflow: hidden;
    background: var(--rsv-brand-bare);
}

.rsv-szezon-elsoszezon__kep img {
    display: block;
    width: 100%;
    height: auto;
}

.rsv-szezon-cimkek {
    display: grid;
    gap: var(--rsv-ter-4);

    margin: var(--rsv-ter-4) 0 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .rsv-szezon-cimkek { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.rsv-szezon-cimke {
    padding: var(--rsv-ter-4) var(--rsv-ter-5);
    background: var(--rsv-surface-card);
    border: 1px solid var(--rsv-border-default);
    border-radius: var(--rsv-radius-md);
}

.rsv-szezon-cimke__cim {
    margin-bottom: var(--rsv-ter-2);
    color: var(--rsv-brand-dark);
    font-size: var(--rsv-meret-h4);
}

.rsv-szezon-cimke__szoveg {
    margin: 0;
    color: var(--rsv-text-secondary);
    font-size: var(--rsv-meret-kicsi);
}


/* 17.9 Felkészülési pontok — NÉGY EGYFORMA ELEM
   --------------------------------------------------------------------------
   A SPEC §7 „4 kisebb, egyforma vizuális elemet" kér. A négy master viszont
   NEM egyforma: az arányuk 0,78 / 0,83 / 1,00 / 1,00, és a hátterük sem azonos
   (az A09a és az A09b opak fehér, az A09c és az A09d átlátszó).

   EZÉRT A KÁRTYA TEREMTI MEG AZ EGYSÉGET: mindegyik kép AZONOS, négyzetes
   mezőbe kerül, `object-fit: contain` illesztéssel és azonos halvány alapon.
   Így egyik sem torzul, egyik sem vágódik le, és a négy elem egy készletként
   olvasódik. (A masterek rajzi stílusának eltérése ezzel nem tűnik el — az a
   képek sajátja, nem a layouté.)
   -------------------------------------------------------------------------- */

.rsv-szezon-pontok {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--rsv-ter-4);

    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 992px) {
    .rsv-szezon-pontok { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.rsv-szezon-pont {
    display: flex;
    flex-direction: column;

    padding: var(--rsv-ter-4);
    text-align: center;

    background: var(--rsv-surface-card);
    border: 1px solid var(--rsv-border-default);
    border-radius: var(--rsv-radius-lg);
}

.rsv-szezon-pont__kep {
    margin-bottom: var(--rsv-ter-4);
    border-radius: var(--rsv-radius-md);
    overflow: hidden;
    background: var(--rsv-brand-bare);
}

.rsv-szezon-pont__kep img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
}

.rsv-szezon-pont__cim {
    margin-bottom: var(--rsv-ter-2);
    color: var(--rsv-brand-dark);
    font-size: var(--rsv-meret-h4);
}

.rsv-szezon-pont__szoveg {
    margin: 0;
    color: var(--rsv-text-secondary);
    font-size: var(--rsv-meret-kicsi);
    line-height: 1.6;
}


/* 17.10 Koraszülött bridge — TELJES SZÉLESSÉGŰ SPLIT KOMPOZÍCIÓ
   --------------------------------------------------------------------------
   AZ ELSŐ MEGOLDÁS ELVETVE (projektgazdai vizuális review, 2026-08-28).

   Mi volt a baj? A copy és a kép egy nagy, fehér, árnyékolt kártyába volt
   zárva; a kártya saját belső paddingje és a rács középre igazítása együtt
   nagy üres foltokat nyitott, az A10 pedig apró, különálló képként lebegett
   benne. A két fél nem alkotott vizuális egységet.

   A JAVÍTÁS LÉNYEGE: nincs többé belső kártya — a SZEKCIÓ MAGA a kompozíció.

     1. NINCS FEHÉR PANEL. A `background`, a `border-radius`, az `árnyék` és a
        belső padding kikerült; a copy közvetlenül a szekció felületén ül.

     2. A VIZUÁL A SZEKCIÓ GYERMEKE, nem a buroké — a sablon így adja át.
        Desktopon abszolút pozícióval a jobb képernyőszélig fut ki, és a
        szekció TELJES magasságát kitölti. Nincs körülötte fehér margó, és
        nincs képkártya.

     3. 53 / 47 OSZTÁS. A burok rácsa adja a copy 53%-os hasábját; a második
        hasáb üres helytartó a vizuális zóna alatt.

     4. FINOM DIAGONÁLIS SPLIT. A kép bal pereme enyhén megdöntött maszkkal
        olvad a levendula felületbe — nem egyenes vágás, de nem is harsány
        ferde él.

     5. PLUM HANGSÚLY. A szekció Soft -> Bare Lavender átmenetet kap, a
        határvonal mögé pedig egy halvány Royal Plum fényudvar kerül. Minden
        érték a 2. szakasz tokenjeiből vagy azok `rgba()` alakjából jön —
        ÚJ SZÍN NEM KELETKEZIK.

   AZ A10 SÖTÉT MASTER, ezért NEM kapja meg a `.rsv-alap-vizual` kezelését: a
   `mix-blend-mode: multiply` feketévé mosná. A kontrasztot maga a kompozíció
   adja — sötét, telített kép a világos levendula felületen.

   „ÉRZELMI, DE NEM DRÁMAI" (SPEC §8): nincs riasztásszín, nincs nagybetűs
   figyelmeztetés; a hangsúly a márkalilán marad.
   -------------------------------------------------------------------------- */

.rsv-szezon-bridge {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    /*
     * A `--soft` osztály lekerült a szekcióról: a lapos Soft Lavender helyett
     * saját, irányított átmenet visz a copy felől a vizuál felé.
     */
    background: linear-gradient(
        104deg,
        var(--rsv-brand-soft) 0%,
        var(--rsv-brand-bare) 62%,
        var(--rsv-brand-bare) 100%
    );
}

/*
 * PLUM FÉNYUDVAR A SPLIT VONALÁNÁL.
 *
 * A `z-index: -1` a szekció saját háttere FÖLÉ, de a tartalom ALÁ teszi —
 * ugyanaz az idióma, mint a page-hero fényudvaránál. Statikus: ez a szakasz
 * szándékosan nem kap folyamatos mozgást.
 */
.rsv-szezon-bridge::before {
    content: "";
    position: absolute;
    z-index: -1;

    top: -28%;
    right: 30%;
    width: min(640px, 66vw);
    aspect-ratio: 1;
    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(141, 69, 162, .20) 0%,
        rgba(141, 69, 162, .08) 46%,
        rgba(141, 69, 162, 0) 72%
    );
}

.rsv-szezon-bridge__burok {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.rsv-szezon-bridge__cim {
    margin-bottom: var(--rsv-ter-4);
    font-size: var(--rsv-meret-h2);
}

.rsv-szezon-bridge__szoveg p { max-width: 56ch; }

.rsv-szezon-bridge__szoveg > :last-child { margin-bottom: 0; }

/*
 * MOBIL — NAGY, TELJES SZÉLESSÉGŰ KÉP a copy és a CTA alatt.
 *
 * A vizuál a szekció közvetlen gyermeke, tehát már eleve éltől élig ér; a
 * negatív felső margó a szekció alsó paddingjét „eszi meg", hogy a kép a
 * szakasz aljához simuljon, ne lebegjen fölötte.
 */
.rsv-szezon-bridge__vizual {
    margin-top: clamp(var(--rsv-ter-5), 4vw, var(--rsv-ter-7));
    margin-bottom: calc(-1 * var(--rsv-szekcio-ter));
    line-height: 0;
}

.rsv-szezon-bridge__vizual img {
    display: block;
    width: 100%;
    height: clamp(260px, 64vw, 420px);
    object-fit: cover;

    /* A baba arca a kompozíció bal-közepén van — oda igazítjuk a vágást. */
    object-position: 42% 50%;
}

@media (min-width: 992px) {

    .rsv-szezon-bridge__burok {
        /*
         * A copy az ELSŐ, 53%-os hasábba kerül. A második hasáb üres
         * helytartó: a valódi vizuál abszolút pozícióban, a szekcióhoz
         * igazítva ül alatta.
         */
        grid-template-columns: minmax(0, 53fr) minmax(0, 47fr);
        align-items: center;

        /*
         * ALSÓ KORLÁT a vizuális zónának: a szakasz magasságát nem bízzuk a
         * copy hosszára. Ha a szöveg valaha rövidülne, a kép akkor sem lapul
         * össze.
         */
        min-height: 440px;
    }

    /*
     * A JOBB VIZUÁLIS ZÓNA.
     *
     * A pozicionálás alapja a `.rsv-szezon-bridge` — az TELJES SZÉLESSÉGŰ,
     * ezért a 47% a nézetablak 47%-a, és a kép a jobb szélig kifut.
     * A `top`/`bottom` a szekció teljes magasságát kitölti, a szekció
     * paddingjét is beleértve: így a kép fent és lent is éltől élig ér.
     */
    .rsv-szezon-bridge__vizual {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 47%;

        margin: 0;
    }

    .rsv-szezon-bridge__vizual img {
        width: 100%;
        height: 100%;
        object-position: 46% 50%;
    }
}

/*
 * FINOM DIAGONÁLIS SPLIT — a kép bal pereme a levendula felületbe olvad.
 *
 * MIÉRT 94 FOK ÉS NEM 104? Mert a szög nemcsak dönti, hanem RÖVIDÍTI is a
 * felfutást a bal él alján. 104 foknál a bal él teteje még teljesen átlátszó,
 * az ALJA viszont már ~70%-ban fedett volt — ott a kép gyakorlatilag kemény
 * függőleges éllel vágódott le. 94 foknál ugyanez az érték ~23%, tehát a
 * perem VÉGIG lágy marad, és a döntés is érzékelhető: a kompozíció bal felső
 * sarka olvad be a legjobban.
 *
 * A MÁSODIK RÉTEG a master saját, beégetett világos keretvonalát tünteti el a
 * kép tetején és alján. Az A10 aránya (2,18:1) magasabb, mint a vizuális zóna,
 * ezért a `cover` FÜGGŐLEGESEN nem vág — a keretvonal enélkül vékony világos
 * csíkként végigfutna a szakasz tetején és alján.
 *
 * A `mask-composite` metszetet képez a két rétegből. Ahol a böngésző nem
 * ismeri, a rétegek összeadódnak: a perem keményebb marad, de a kép TELJES
 * EGÉSZÉBEN látszik — tartalom nem veszik el.
 */
@media (min-width: 992px) {
    .rsv-szezon-bridge__vizual img {
        -webkit-mask-image:
            linear-gradient(94deg, transparent 0%, #000 30%),
            linear-gradient(to bottom, transparent 0, #000 3%, #000 97%, transparent 100%);
        mask-image:
            linear-gradient(94deg, transparent 0%, #000 30%),
            linear-gradient(to bottom, transparent 0, #000 3%, #000 97%, transparent 100%);

        -webkit-mask-composite: source-in;
        mask-composite: intersect;
    }
}


/* 17.11 Aktuális helyzet — DÁTUMOZOTT STÁTUSZPANEL
   --------------------------------------------------------------------------
   „Figyelemfelkeltő, de nem alarmista" (SPEC §9).

   IDŐÉRZÉKENY BLOKK. A dátum vizuálisan is kiemelt: a látogatónak azonnal
   látnia kell, MIKORI adatot olvas — enélkül egy elavult állítás friss tényként
   hatna (ORVOSI §7, §23).

   A KÖTELEZŐ MEGJEGYZÉS („az alacsony aktivitás nem jelent nulla kockázatot")
   halkabb, de nem elrejtett: nem összecsukható, és nem `display: none`.
   -------------------------------------------------------------------------- */

.rsv-szezon-statusz {
    padding: clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-9));

    background:
        linear-gradient(180deg, var(--rsv-brand-bare) 0%, var(--rsv-surface-card) 100%);
    border: 1px solid var(--rsv-border-default);
    border-radius: var(--rsv-radius-lg);
    box-shadow: var(--rsv-arnyek-sm);
}

.rsv-szezon-statusz__fej {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rsv-ter-3) var(--rsv-ter-5);
    align-items: baseline;
    justify-content: space-between;

    margin-bottom: var(--rsv-ter-4);
}

.rsv-szezon-statusz__datum {
    display: inline-flex;
    gap: var(--rsv-ter-2);
    align-items: center;

    margin: 0;
    padding: var(--rsv-ter-3) var(--rsv-ter-5);

    background: var(--rsv-surface-card);
    border: 1px solid var(--rsv-border-default);
    border-radius: var(--rsv-radius-pill);

    color: var(--rsv-text-secondary);
    font-size: var(--rsv-meret-meta);
    font-weight: 600;
}

.rsv-szezon-statusz__datum .ikon { --ikon-meret: 16px; flex: none; }

.rsv-szezon-statusz__cim {
    margin-bottom: var(--rsv-ter-4);
    font-size: var(--rsv-meret-h2);
}

/*
 * HÁROM RÖVID ADATPONT.
 *
 * A review „2–3 rövid adatpontot" kért a főállítás mellé. Ezek NEM
 * KPI-widgetek: nincs kártyahátterük, csak egy bal oldali márkajel választja
 * el őket egymástól. Az érték kiemelt, a magyarázat halkabb.
 */
.rsv-szezon-adatpontok {
    display: grid;
    gap: var(--rsv-ter-4);
    margin: 0 0 var(--rsv-ter-5);
}

@media (min-width: 768px) {
    .rsv-szezon-adatpontok { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.rsv-szezon-adatpont {
    padding-left: var(--rsv-ter-4);
    border-left: 3px solid var(--rsv-brand-secondary);
}

.rsv-szezon-adatpont__ertek {
    color: var(--rsv-brand-primary);
    font-size: var(--rsv-meret-h4);
    font-weight: 800;
    line-height: 1.2;
}

.rsv-szezon-adatpont__cimke {
    margin: var(--rsv-ter-1) 0 0;
    color: var(--rsv-text-secondary);
    font-size: var(--rsv-meret-kicsi);
    line-height: 1.5;
}

/* A kiemelt állítás — az oldal egyetlen valóban „aktuális" mondata. */
/*
 * A FŐÁLLÍTÁS. A review szerint ennek kell a panel vizuális főszereplőjének
 * lennie, ezért H2-méretű — de NEM riasztásszínű: a hangsúlyt a márkalila és a
 * betűsúly adja, nem a vörös (ORVOSI §3: nem riogatunk).
 */
.rsv-szezon-statusz__allitas {
    max-width: 30ch;
    margin: 0 0 var(--rsv-ter-5);

    color: var(--rsv-brand-primary);
    font-size: clamp(1.375rem, 1.1rem + 1.3vw, 2rem);
    font-weight: 800;
    line-height: 1.25;
}

.rsv-szezon-statusz__szoveg {
    max-width: 72ch;
    margin: 0 0 var(--rsv-ter-4);
}

.rsv-szezon-statusz__megjegyzes {
    max-width: 72ch;
    margin: 0 0 var(--rsv-ter-5);
    color: var(--rsv-text-secondary);
    font-size: var(--rsv-meret-kicsi);
}

.rsv-szezon-statusz__link { margin: 0; }


/* 17.12 „Mit nem szabad kiolvasni az adatokból?"
   --------------------------------------------------------------------------
   A SPEC §10 „enyhén warning tónusú hátteret" enged, de kifejezetten tiltja a
   piros vészblokkot. Ezért a `--rsv-warning` token CSAK a jelölőn és a bal
   peremen jelenik meg; a felület a semleges kártyaháttér marad.
   -------------------------------------------------------------------------- */

.rsv-szezon-tevhitek {
    display: grid;
    gap: var(--rsv-ter-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.rsv-szezon-tevhit {
    display: flex;
    gap: var(--rsv-ter-4);
    align-items: flex-start;

    padding: var(--rsv-ter-4) var(--rsv-ter-5);

    background: var(--rsv-surface-card);
    border: 1px solid var(--rsv-border-default);
    border-left: 3px solid var(--rsv-warning);
    border-radius: var(--rsv-radius-md);
}

.rsv-szezon-tevhit__jel {
    flex: none;
    margin-top: 2px;
    color: var(--rsv-warning);
}

.rsv-szezon-tevhit__jel .ikon { --ikon-meret: 20px; }


/* 17.13 MOZGÁS
   --------------------------------------------------------------------------
   Ez az oldal SZÁNDÉKOSAN nem kap folyamatos ambient mozgást: adatokat közöl,
   és egy mozgó háttér itt zavarna. A `data-rsv-belep` belépő animáció a KÖZÖS
   réteg, amelyet a 35. szakasz `prefers-reduced-motion` fallbackje kapcsol ki
   — külön kezelés tehát nem kell.

   AMI MOZOG: a felkészülési pontok finom emelése hoverre. Ez CSAK valódi
   egérrel rendelkező eszközön aktív, hogy érintésen ne ragadjon be a
   hover-állapot. A surveillance-kártyák NEM kapnak emelést: azok szándékosan
   nem kattinthatók, és a mozgás kattinthatóságot ígérne.
   -------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
    .rsv-szezon-pont {
        transition: transform .25s ease, box-shadow .25s ease;
    }

    .rsv-szezon-pont:hover {
        transform: translateY(-3px);
        box-shadow: var(--rsv-arnyek-md);
    }
}


/* --------------------------------------------------------------------------
   18. A `/rsv-lefolyasa` ALOLDAL — „Hogyan zajlik le az RSV-fertőzés?"
   --------------------------------------------------------------------------
   Kanonikus forrás: az `RSV_LEFOLYASA_CLAUDE_PACKAGE_v1` csomag `PAGE_SPEC.md`,
   `PAGE_COPY.md`, `ASSET_MAPPING.md` és `QA_CHECKLIST.md` fájlja.

   A HATODIK TARTALMI ALOLDAL. Az öt lezárt oldal a minta, ezért ez a szakasz
   SZÁNDÉKOSAN rövid: a page-hero, a szekcióritmus, a képmélység, a
   folyamatlánc, az insight-panel, a routing kártyák, a szószedet és a
   forrásblokk MIND a 13. szakasz már meglévő komponensei. Itt csak az él, ami
   ezen az oldalon valóban új:

     - a betegségspektrum három ága egyetlen folytonos sávon;
     - a kétirányú betegségút ábrája és a két ág editorial magyarázata;
     - a bronchiolitis-görbe HTML-ből adott tengelyeivel és sávcímkéjével;
     - a fordulópont négy megfigyelési pontja;
     - a „mi történhet RSV után?" hármas rácsa;
     - a hét állomásos idővonal, amelynek a gerincét SVG, a tartalmát HTML adja;
     - a kórházi bridge teljes szélességű split kompozíciója.

   MIÉRT `.rsv-menet*` ÉS NEM `.rsv-lefolyas*`? Mert a `.rsv-lefolyas*`
   névteret a LEZÁRT FŐOLDAL 7. szakasza („Az RSV lefolyása") már használja
   (11.4). Két azonos előtagú készlet előbb-utóbb összeérne, és egy
   szabálymódosítás némán átszivárogna a főoldalra.

   ÚJ SZÍNPALETTA NEM KELETKEZETT: minden érték a 2. szakasz tokenjeiből vagy
   azok `rgba()` / `color-mix()` alakjából jön. A csomag négy nagy SVG-jének
   beégetett hexei is a projekt tokenjeire lettek cserélve (kézikönyv §21).

   A CSOMAG KÜLÖN LAYOUT-KIKÖTÉSE — VÉGIG ÉRVÉNYES:
   „Ha egy szekcióban nincs vizuál, desktopon ne maradjon automatikusan
   keskeny 76ch copy nagy üres jobb oldallal." Ezért a vizuál nélküli
   szakaszok (9. javulás, 12. RSV után) editorial hasábokat kapnak, a széles
   szekciófejek pedig feloldják a 820 px-es korlátot.
   -------------------------------------------------------------------------- */

/* 18.1 Page hero
   --------------------------------------------------------------------------
   A SPEC „Hero" pontja 43–45% copyt és 55–57% vizuált kér; a közös
   `.rsv-alaphero__racs` 46/54-et ad. Az L01 master 1704x1196 (kb. 1,42:1),
   tehát álló-négyzetes kompozíció — a `/rsv-szezon` sávos heróját NEM követi,
   így a hero geometriájából csak a hasábarány változik.
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
    .rsv-alaphero--menet .rsv-alaphero__racs {
        grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
    }
}

.rsv-menet-hero__szoveg {
    max-width: 56ch;
    color: var(--rsv-text-secondary);
}

/*
 * AZ OLDAL VEZÉRGONDOLATA. Nem doboz és nem alert: bal oldali plumsávos
 * kiemelés, amely tipográfiával nyom, nem felülettel.
 */
.rsv-menet-hero__kiemeles {
    max-width: 54ch;
    margin-bottom: 0;
    padding-left: var(--rsv-ter-5);
    border-left: 3px solid var(--rsv-brand-secondary);
    font-size: var(--rsv-meret-lead);
    font-weight: 600;
    line-height: 1.5;
    color: var(--rsv-brand-dark);
}


/* 18.2 Közös szövegelemek
   -------------------------------------------------------------------------- */

/*
 * SZÉLES SZEKCIÓFEJ. Az `.rsv-alap-oldal` globálisan 820 px-re fogja a
 * szekciófejeket. Ott, ahol a szakasz teljes szélességű vizuált vagy két
 * hasábot visz, ez a H2-t szükségtelenül keskeny oszlopba szorítaná — a
 * csomag layout-kikötése éppen ezt tiltja.
 */
.rsv-menet-fej--szeles { max-width: 1040px; }

.rsv-menet-fej--szeles .rsv-lead { max-width: 74ch; }

.rsv-menet-folyoszoveg { max-width: 72ch; }

.rsv-menet-folyoszoveg > :last-child { margin-bottom: 0; }

.rsv-menet-lista {
    display: grid;
    gap: var(--rsv-ter-3);
    list-style: none;
    margin: var(--rsv-ter-4) 0 var(--rsv-ter-5);
    padding: 0;
}

.rsv-menet-lista li {
    position: relative;
    padding-left: var(--rsv-ter-5);
    color: var(--rsv-text-secondary);
}

/* Jelölő: kicsi, tömör plumkorong — nem ikon, nem nyíl. */
.rsv-menet-lista li::before {
    content: "";
    position: absolute;
    top: .62em;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rsv-brand-secondary);
}

/*
 * KÉT OSZLOP a hosszabb, rövid tételes listáknál. Enélkül egy hattételes
 * felsorolás desktopon feleslegesen magas, keskeny szalaggá nyúlna a mellette
 * lévő vizuál mellett.
 */
@media (min-width: 576px) {
    .rsv-menet-lista--ket-oszlop {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--rsv-ter-5);
    }
}

.rsv-menet-lista__cimke {
    margin-bottom: 0;
    font-weight: 600;
    color: var(--rsv-brand-dark);
}

/*
 * KIEMELT MONDAT. Ugyanaz a nyelv, mint a heróé — így az oldalon végig
 * ugyanaz jelöli a vezérgondolatokat.
 */
.rsv-menet-kiemeles {
    max-width: 62ch;
    margin-block: clamp(var(--rsv-ter-5), 2.4vw, var(--rsv-ter-6));
    padding-left: var(--rsv-ter-5);
    border-left: 3px solid var(--rsv-brand-secondary);
    font-size: var(--rsv-meret-lead);
    font-weight: 600;
    line-height: 1.5;
    color: var(--rsv-brand-dark);
}

.rsv-menet-kiemeles--szeles { max-width: 80ch; }

/* Tartalmi határ és forrásmegjelölés — halkabb, mint a törzsszöveg. */
.rsv-menet-hatar,
.rsv-menet-forrasmondat {
    max-width: 70ch;
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
}

/*
 * A NYITÓ HATÁRVONAL: „Az RSV-fertőzés nem egyenlő a bronchiolitisszel."
 * Ez az oldal legfontosabb szakmai állítása, ezért a leadnél is hangsúlyosabb.
 */
.rsv-menet-hatarvonal {
    font-weight: 600;
    color: var(--rsv-brand-dark);
}

/* Az idézett tévhit — vizuálisan elkülönül, hogy ne olvasódjon állításnak. */
.rsv-menet-tagadas {
    max-width: 62ch;
    padding: var(--rsv-ter-4) var(--rsv-ter-5);
    border-radius: var(--rsv-radius-md);
    background: var(--rsv-brand-bare);
    box-shadow: inset 0 0 0 1px var(--rsv-border-default);
    color: var(--rsv-text-secondary);
    font-style: italic;
}

/* A copy második, azonos szintű címsora válaszmondatként. */
.rsv-menet-valasz {
    /*
     * 46ch: 30ch-nél a mondat három sorra tört, és az utolsó sorban egyetlen
     * szó („így") maradt magára. Ennél szélesebbre viszont nem érdemes vinni —
     * ez válaszmondat, nem bekezdés.
     */
    max-width: 46ch;
    margin-bottom: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-6));
    font-size: var(--rsv-meret-h3);
    font-weight: 700;
    line-height: var(--rsv-sormagassag-cim);
    color: var(--rsv-brand-primary);
}

/* Insight-panel — a közös `.rsv-alap-kiemelt` kiegészítése. */
.rsv-menet-panel { margin-top: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-6)); }

.rsv-menet-panel__uzenet {
    margin: var(--rsv-ter-2) 0 0;
    max-width: 62ch;
    font-size: var(--rsv-meret-lead);
    font-weight: 600;
    line-height: 1.5;
    color: var(--rsv-brand-dark);
}

.rsv-menet-panel--uzenet .rsv-alap-kiemelt__jel { color: var(--rsv-brand-secondary); }

/*
 * EDITORIAL KÉT HASÁB — vizuál nélküli szakaszokhoz.
 * A hasábok ELTÉRŐ SÚLYÚAK: a bal az általános lefutás (hosszabb), a jobb a
 * bronchiolitisre szűkített kiegészítés.
 */
.rsv-menet-hasabok {
    display: grid;
    gap: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-7));
}

.rsv-menet-hasabok > * { min-width: 0; }

@media (min-width: 992px) {
    .rsv-menet-hasabok { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}

.rsv-menet-hasab > :last-child { margin-bottom: 0; }

.rsv-menet-hasab p { color: var(--rsv-text-secondary); }

.rsv-menet-hasab__cim {
    margin: 0 0 var(--rsv-ter-4);
    padding-bottom: var(--rsv-ter-3);
    border-bottom: 1px solid var(--rsv-border-default);
    font-size: var(--rsv-meret-h3);
    font-weight: 700;
    color: var(--rsv-brand-dark);
}


/* 18.3 Betegségspektrum — HÁROM EGYENRANGÚ ÁG EGY FOLYTONOS SÁVON
   --------------------------------------------------------------------------
   SPEC §1: „Ne három admin-KPI-kártya legyen; editorial folyamatként hasson."

   EZÉRT NINCS KÁRTYAHÁTTÉR, KERET ÉS ÁRNYÉK. A három ág a szekció felületén
   ül, és egyetlen folytonos sáv köti össze őket. A sáv Royal Plumból indul és
   Deep Plumba mélyül — a spektrum iránya vizuálisan is olvasható, de MORÁLIS
   tengely nélkül: nincs benne sürgősségi vagy figyelmeztető token.

   SORSZÁM SZÁNDÉKOSAN NINCS. Az 1–2–3 kötelező menetrendet sugallna, a
   szakasz címe viszont éppen azt mondja, hogy ilyen nincs.
   -------------------------------------------------------------------------- */

.rsv-menet-spektrum__sav {
    display: block;
    height: 6px;
    margin-bottom: clamp(var(--rsv-ter-6), 3vw, var(--rsv-ter-7));
    border-radius: var(--rsv-radius-pill);
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--rsv-brand-secondary) 35%, #fff) 0%,
        var(--rsv-brand-secondary) 50%,
        var(--rsv-brand-primary) 100%
    );
}

.rsv-menet-spektrum {
    display: grid;
    gap: clamp(var(--rsv-ter-6), 3.4vw, var(--rsv-ter-8));
}

.rsv-menet-spektrum > * { min-width: 0; }

/*
 * A HÁROM OSZLOP CSAK 992 PX-TŐL.
 *
 * 768-nál a hasábok kb. 230 px-esek lettek: a bevezetők négy sorra törtek, és
 * mivel a subgrid sorai a LEGMAGASABB elemhez igazodnak, a rövidebb ágak alatt
 * nagy üres közök nyíltak. Egy oszlopban ugyanez a tartalom végig feszes marad.
 */
@media (min-width: 992px) {
    .rsv-menet-spektrum { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/*
 * A HÁROM ÁG ZÁRÓ HAJSZÁLVONALA AZONOS MAGASSÁGBAN ÁLL.
 *
 * A három lista eltérő hosszú (5 / 6 / 3 tétel), ezért a záró mondat fölötti
 * vonal ágakként más-más magasságba került, és a hármas szétesett. A
 * rácselemek alapból azonos magasságúak, tehát elég a záró mondatot az aljára
 * tolni — így a vonalak egy vízszintesbe kerülnek (ugyanaz az elv, mint a
 * fenntartott soroknál a `/hogyan-terjed` paneljein).
 */
.rsv-menet-ag {
    display: flex;
    flex-direction: column;
}

.rsv-menet-ag > :last-child { margin-bottom: 0; }

.rsv-menet-ag .rsv-menet-lista { margin-bottom: var(--rsv-ter-5); }

/*
 * A HÁROM MASTER MAGASSÁGA AZONOS (836 px), a SZÉLESSÉGÜK viszont 884–952 px
 * között szór. Közös arányú mezőbe kerülnek, `object-fit: cover`-rel: a
 * legnagyobb eltérés így is 4% alatti vágás, tehát egyik kompozícióból sem
 * vész el érdemi tartalom, és a három ág EGY KÉSZLETKÉNT olvasódik.
 */
.rsv-menet-ag__kep {
    margin-bottom: var(--rsv-ter-5);
    border-radius: var(--rsv-radius-lg);
}

.rsv-menet-ag__kep img {
    aspect-ratio: 11 / 10;
    object-fit: cover;
}

.rsv-menet-ag__cim {
    margin: 0 0 var(--rsv-ter-3);
    font-size: var(--rsv-meret-h3);
    font-weight: 700;
    color: var(--rsv-brand-dark);
}

.rsv-menet-ag__bevezeto {
    margin-bottom: 0;
    color: var(--rsv-text-secondary);
}

.rsv-menet-ag__zaras {
    margin-top: auto;
    margin-bottom: 0;
    padding-top: var(--rsv-ter-4);
    border-top: 1px solid var(--rsv-border-default);
    color: var(--rsv-text-secondary);
}

/*
 * AZONOS ALAPVONAL A HÁROM ÁG KÖZÖTT.
 *
 * A három lista eltérő hosszú (5 / 6 / 3 tétel), és a bevezetőjük is más
 * sorszámú, ezért a záró mondat fölötti hajszálvonal ágakként más-más
 * magasságba került — a hármas ettől szétesett.
 *
 * A `subgrid` a KÖZÖS rácsra fűzi fel mind az öt sort (kép, cím, bevezető,
 * lista, zárás), tehát a képek alja, a címek, a bevezetők és a záró vonal EGY
 * vízszintesbe kerül.
 *
 * A BLOKK A FALLBACK UTÁN ÁLL — ez nem stílus, hanem sorrendi kényszer: a
 * fenti `.rsv-menet-ag { display: flex }` azonos fajsúlyú, tehát ha a
 * `@supports` előbb állna, a flex írná felül a rácsot. Ahol nincs `subgrid`,
 * ott a flex-fallback marad: a záró mondat akkor is az ág aljára kerül.
 */
@media (min-width: 992px) {
    @supports (grid-template-rows: subgrid) {
        .rsv-menet-spektrum { grid-template-rows: auto auto auto 1fr auto; }

        .rsv-menet-ag {
            display: grid;
            grid-row: span 5;
            grid-template-rows: subgrid;
        }

        /*
         * A FLEX-FALLBACK `margin-top: auto`-ja ITT ELLENTÉTES HATÁSÚ.
         * Rácsban a saját sorának ALJÁRA tolná a záró mondatot, és mivel a
         * három zárás eltérő sorszámú (3 / 1 / 1), a hajszálvonaluk így megint
         * szétcsúszna — pontosan az, amit a subgrid megszüntetni hivatott.
         * A közös sor tetejére igazítva mindhárom vonal egy vízszintesbe kerül.
         */
        .rsv-menet-ag__zaras {
            margin-top: 0;
            align-self: start;
        }
    }
}


/* 18.4 A kétirányú betegségút — L05
   --------------------------------------------------------------------------
   SPEC §4: nagy, széles vizuál, alatta a két ág editorial magyarázata.

   A QA_CHECKLIST kiköti, hogy az ábra ne moralizáló színkódolásként
   működjön. Ezt HÁROM dolog együtt biztosítja: az ábra alsó ága a márka
   Royal Plumját viszi (nem sürgősségi tokent — lásd az SVG fejlécét), a két
   szövegkártya AZONOS súlyú és felületű, és az ábrafelirat kimondja, hogy
   nem lehet előre megmondani, melyik gyermek melyik úton halad tovább.
   -------------------------------------------------------------------------- */

.rsv-menet-agabra {
    margin: 0 0 clamp(var(--rsv-ter-6), 3.4vw, var(--rsv-ter-8));
    padding: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-7));
    border-radius: clamp(var(--rsv-radius-lg), 2vw, 28px);
    background: var(--rsv-surface-card);
    box-shadow: inset 0 0 0 1px rgba(141, 69, 162, .14);
}

.rsv-menet-agabra__rajz {
    display: block;
    width: 100%;
    height: auto;
}

.rsv-menet-agabra__felirat {
    margin-top: var(--rsv-ter-5);
    max-width: 70ch;
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
}

.rsv-menet-agak {
    display: grid;
    gap: clamp(var(--rsv-ter-5), 2.6vw, var(--rsv-ter-6));
}

.rsv-menet-agak > * { min-width: 0; }

@media (min-width: 768px) {
    .rsv-menet-agak { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.rsv-menet-agkartya {
    padding: clamp(var(--rsv-ter-5), 2.6vw, var(--rsv-ter-6));
    border-radius: clamp(var(--rsv-radius-lg), 1.6vw, 22px);
    background: var(--rsv-surface-card);
    box-shadow: var(--rsv-arnyek-sm), inset 0 0 0 1px var(--rsv-border-default);
}

.rsv-menet-agkartya > :last-child { margin-bottom: 0; }

.rsv-menet-agkartya p { color: var(--rsv-text-secondary); }

.rsv-menet-agkartya__cim {
    margin: 0 0 var(--rsv-ter-4);
    font-size: var(--rsv-meret-h3);
    font-weight: 700;
    color: var(--rsv-brand-dark);
}

.rsv-menet-agkartya .rsv-menet-lista { margin-bottom: 0; }


/* 18.5 A bronchiolitis-görbe — L06
   --------------------------------------------------------------------------
   SPEC §5: az L06 a központi magyarázó grafika, KÖTELEZŐ captionnel.

   AZ ÁBRÁN NINCS SZÖVEG. A csomag SVG-je szándékosan napszám nélküli („Ne
   legyen dekoratív, napokra ráégetett általános RSV-grafikon"), ezért a
   tengelyek jelentését és a kiemelt sáv címkéjét a HTML adja. Így a jelentés
   a szövegrétegben él: képernyőolvasóval és képek nélkül is olvasható, és
   lektoráláskor a tartalomfájlban látszik.

   A SÁVCÍMKE POZÍCIÓJA AZ ÁBRA SAJÁT GEOMETRIÁJÁBÓL JÖN. A kiemelt sáv az
   SVG `viewBox`-ában x=355 és x=665 között áll, a `viewBox` pedig 110-től
   1500-ig tart — a sáv középvonala tehát (510-110)/1390 = 28,8%. Egyetlen
   custom property hangolja; HTML-t nem kell hozzá módosítani.
   -------------------------------------------------------------------------- */

.rsv-menet-gorbe {
    --rsv-gorbe-sav: 28.8%;

    margin: 0 0 clamp(var(--rsv-ter-6), 3vw, var(--rsv-ter-7));
    padding: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-6));
    border-radius: clamp(var(--rsv-radius-lg), 2vw, 28px);
    background: var(--rsv-surface-card);
    box-shadow: inset 0 0 0 1px rgba(141, 69, 162, .14);
}

.rsv-menet-gorbe__mezo {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--rsv-ter-3) var(--rsv-ter-4);
    align-items: center;
}

.rsv-menet-gorbe__rajz {
    position: relative;
    grid-column: 2;
}

.rsv-menet-gorbe__rajz svg {
    display: block;
    width: 100%;
    height: auto;
}

/* A tengelyfeliratok halk, kisbetűs jelölések — nem versenyeznek a görbével. */
.rsv-menet-gorbe__tengely {
    font-size: var(--rsv-meret-meta);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--rsv-text-secondary);
}

.rsv-menet-gorbe__tengely--y {
    grid-column: 1;
    grid-row: 1;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    justify-self: center;
}

.rsv-menet-gorbe__tengely--x {
    grid-column: 2;
    grid-row: 2;
    justify-self: center;
}

/*
 * A SÁVCÍMKE. A kiemelt szakasz FÖLÖTT ül, középre igazítva; a `translate`
 * teszi a saját középpontját a sáv középvonalára. A `max-width` akadályozza
 * meg, hogy keskeny nézetablakon kilógjon az ábrából.
 */
/*
 * KESKENY NÉZETABLAKON A CÍMKE NEM LEBEG, HANEM A GRAFIKON ALÁ KERÜL.
 *
 * A kiemelt sáv a görbe TETŐZÉSÉNÉL van; egy ráúsztatott, négysoros címke
 * mobilon pontosan a csúcsot takarta ki — vagyis azt, amiről szól. Statikus
 * jelmagyarázatként ugyanazt mondja, és semmit nem fed el. Desktopon marad a
 * lebegő elhelyezés: ott bőven van hely a görbe fölött.
 */
.rsv-menet-gorbe__savcimke {
    display: block;
    width: fit-content;
    margin: var(--rsv-ter-3) auto 0;
    padding: var(--rsv-ter-2) var(--rsv-ter-4);
    border-radius: var(--rsv-radius-pill);
    background: var(--rsv-brand-primary);
    color: #fff;
    font-size: var(--rsv-meret-meta);
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    box-shadow: var(--rsv-arnyek-sm);
}

@media (min-width: 768px) {
    .rsv-menet-gorbe__savcimke {
        position: absolute;
        top: 0;
        left: var(--rsv-gorbe-sav);
        transform: translate(-50%, -30%);
        width: auto;
        max-width: min(268px, 52%);
        margin: 0;
        padding: var(--rsv-ter-2) var(--rsv-ter-3);
    }
}

.rsv-menet-gorbe__felirat {
    margin-top: clamp(var(--rsv-ter-5), 2.4vw, var(--rsv-ter-6));
    max-width: 78ch;
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
}


/* 18.6 A fordulópont — NÉGY MEGFIGYELÉSI PONT
   --------------------------------------------------------------------------
   SPEC §6: „Desktopon 4 jól olvasható elem; mobilon 1 vagy 2 oszlop.
   A »javul vagy romlik?« legyen a legerősebb."

   A NEGYEDIK ELEM ERŐSEBB, DE NEM MÁS KOMPONENS: ugyanaz a doboz, csak
   plumfelülettel, világos szöveggel és nagyobb ikonkoronggal. Desktopon a
   TELJES SORT elfoglalja a másik három alatt — így a hierarchia a rácsból is
   olvasható, nem csak a színből.
   -------------------------------------------------------------------------- */

.rsv-menet-pontok {
    display: grid;
    gap: clamp(var(--rsv-ter-4), 2.2vw, var(--rsv-ter-5));
    list-style: none;
    margin: 0;
    padding: 0;
}

.rsv-menet-pontok > * { min-width: 0; }

@media (min-width: 576px) {
    .rsv-menet-pontok { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
    .rsv-menet-pontok { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .rsv-menet-pont--fo { grid-column: 1 / -1; }
}

.rsv-menet-pont {
    display: flex;
    flex-direction: column;
    gap: var(--rsv-ter-2);
    padding: clamp(var(--rsv-ter-5), 2.4vw, var(--rsv-ter-6));
    border-radius: clamp(var(--rsv-radius-lg), 1.6vw, 22px);
    background: var(--rsv-surface-card);
    box-shadow: var(--rsv-arnyek-sm), inset 0 0 0 1px var(--rsv-border-default);
}

.rsv-menet-pont__jel {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: var(--rsv-ter-3);
    border-radius: var(--rsv-radius-md);
    background: var(--rsv-brand-soft);
    color: var(--rsv-brand-primary);
    --ikon-meret: 30px;
}

.rsv-menet-pont__cim {
    margin: 0;
    font-size: var(--rsv-meret-h4);
    font-weight: 700;
    color: var(--rsv-brand-dark);
}

.rsv-menet-pont__szoveg {
    margin: 0;
    color: var(--rsv-text-secondary);
}

/* A LEGFONTOSABB KÉRDÉS — az oldal vezérgondolatának megfelelője. */
.rsv-menet-pont--fo {
    background: linear-gradient(
        118deg,
        var(--rsv-brand-primary) 0%,
        var(--rsv-brand-dark) 100%
    );
    box-shadow: var(--rsv-arnyek-md);
}

.rsv-menet-pont--fo .rsv-menet-pont__jel {
    width: 68px;
    height: 68px;
    --ikon-meret: 36px;
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

.rsv-menet-pont--fo .rsv-menet-pont__cim {
    font-size: var(--rsv-meret-h3);
    color: #fff;
}

.rsv-menet-pont--fo .rsv-menet-pont__szoveg { color: rgba(255, 255, 255, .82); }


/* 18.7 Mi történhet az RSV után? — L11 + két szövegblokk
   --------------------------------------------------------------------------
   SPEC §11: „L11 kis edukációs SVG, nem nagy hero. Copy lehet 2 editorial
   hasábban."

   EZÉRT HÁRMAS RÁCS: balra a kis ábra szerény, rögzített szélességgel, mellette
   a két szövegblokk. Így az ábra nem nő hero-méretűvé, és nem marad üres jobb
   mező sem.
   -------------------------------------------------------------------------- */

.rsv-menet-utan {
    display: grid;
    gap: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-7));
    align-items: start;
}

.rsv-menet-utan > * { min-width: 0; }

@media (min-width: 768px) {
    .rsv-menet-utan {
        grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
    }

    /* A pontosítás a szövegblokk alatt, az ábra hasábját is kihasználva. */
    .rsv-menet-utan__pontositas { grid-column: 1 / -1; }
}

@media (min-width: 1200px) {
    .rsv-menet-utan {
        grid-template-columns: minmax(0, 260px) minmax(0, 1fr) minmax(0, 1fr);
    }

    .rsv-menet-utan__pontositas { grid-column: 3; grid-row: 1; }
}

/*
 * „KIS EDUKÁCIÓS SVG, NEM NAGY HERO" (SPEC §11). Desktopon a rács oszlopa
 * fogja meg a méretét; keskeny nézetablakon viszont teljes szélességre nőne,
 * ezért ott saját, középre zárt korlátot kap.
 */
.rsv-menet-utan__abra {
    max-width: 240px;
    margin-inline: auto;
}

@media (min-width: 768px) {
    .rsv-menet-utan__abra { margin-inline: 0; max-width: none; }
}

.rsv-menet-utan__abra svg {
    display: block;
    width: 100%;
    height: auto;
}

.rsv-menet-utan__szoveg > :last-child { margin-bottom: 0; }

.rsv-menet-utan__szoveg p { color: var(--rsv-text-secondary); }

.rsv-menet-utan__pontositas {
    padding: clamp(var(--rsv-ter-5), 2.4vw, var(--rsv-ter-6));
    border-radius: clamp(var(--rsv-radius-lg), 1.6vw, 22px);
    background: var(--rsv-surface-card);
    box-shadow: var(--rsv-arnyek-sm), inset 0 0 0 1px var(--rsv-border-default);
}

.rsv-menet-utan__pontositas > :last-child { margin-bottom: 0; }

.rsv-menet-utan__pontositas p { color: var(--rsv-text-secondary); }

.rsv-menet-utan__pontositas .rsv-menet-kiemeles { margin-top: 0; }

.rsv-menet-utan__cim {
    margin: 0 0 var(--rsv-ter-4);
    font-size: var(--rsv-meret-h3);
    font-weight: 700;
    color: var(--rsv-brand-dark);
}


/* 18.8 A hét állomásos idővonal — L12 gerinc + HTML tartalom
   --------------------------------------------------------------------------
   SPEC §12: „Desktopon széles, folytonos organikus timeline; mobilon
   vertikális vagy komponensenként újrarendezett változat."

   MUNKAMEGOSZTÁS:
     - a HÉT ÁLLOMÁS CÍME ÉS SZÖVEGE HTML-ben van (olvasható képek nélkül,
       képernyőolvasóval és mobilon is);
     - az SVG a FOLYTONOS, ORGANIKUS GERINC a sorszámozott medálokkal és az
       ikonokkal — ezt HTML-ből nem lehet megrajzolni;
     - NINCS KETTŐS SORSZÁMOZÁS: a lista saját számbélyege csak akkor jelenik
       meg, amikor a gerinc rejtve van. Ugyanaz a tanulság, mint a
       `/hogyan-terjed` fertőzési láncánál.

   AZ IGAZÍTÁS NEM BECSLÉS. Az SVG `viewBox`-ának bal és jobb margója pontosan
   fél állomásköz (a `viewBox` szélessége 7 x 245 egység), ezért a hét medál
   középpontja a hét egyenlő oszlop középvonalára esik. A gerinc és a rács
   ugyanabban a burokban, azonos szélességen ül, tehát az egyezés a nézetablak
   méretétől független — nem kell hozzá JavaScript és nem kell mérni.

   A VÍZSZINTES ELRENDEZÉS 1200 PX-TŐL indul. 992-nél a hét oszlop kb. 130 px
   lenne, ott az állomásszövegek szétesnének — ugyanaz a megfontolás, mint a
   főoldali ötállomásos idővonalnál (11.4/d).
   -------------------------------------------------------------------------- */

.rsv-menet-idovonal { position: relative; }

/* A gerinc alapból REJTVE: alatta a lista viszi a sorszámot is. */
.rsv-menet-idovonal__gerinc { display: none; }

.rsv-menet-idovonal__lista {
    display: grid;
    gap: var(--rsv-ter-5);
    list-style: none;
    margin: 0;
    padding: 0;
}

.rsv-menet-idovonal__lista > * { min-width: 0; }

/* --- FÜGGŐLEGES ELRENDEZÉS (1199 px-ig) --- */
@media (max-width: 1199px) {
    /*
     * Egyetlen függőleges vezetővonal, amelyre a számbélyegek felfűződnek —
     * ugyanaz az idióma, mint a `.rsv-alap-lanc` mobil változatában.
     */
    .rsv-menet-idovonal__lista {
        position: relative;
        gap: var(--rsv-ter-6);
        padding-left: 56px;
    }

    .rsv-menet-idovonal__lista::before {
        content: "";
        position: absolute;
        top: 20px;
        bottom: 20px;
        left: 19px;
        width: 2px;
        background: linear-gradient(
            180deg,
            rgba(141, 69, 162, .12) 0%,
            rgba(141, 69, 162, .38) 50%,
            rgba(141, 69, 162, .12) 100%
        );
    }

    .rsv-menet-allomas { position: relative; }

    .rsv-menet-allomas__szam {
        position: absolute;
        top: 0;
        left: -56px;
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--rsv-brand-primary);
        color: #fff;
        font-size: var(--rsv-meret-kicsi);
        font-weight: 700;
        line-height: 1;
        box-shadow: 0 0 0 4px var(--rsv-surface-card);
    }
}

/* --- VÍZSZINTES ELRENDEZÉS (1200 px-től) --- */
@media (min-width: 1200px) {
    .rsv-menet-idovonal__gerinc {
        display: block;
        margin-bottom: var(--rsv-ter-4);
    }

    .rsv-menet-idovonal__gerinc svg {
        display: block;
        width: 100%;
        height: auto;
    }

    /*
     * A SORSZÁM A GERINC MEDÁLJÁBÓL JÖN — a listáé itt felesleges lenne, és
     * kettős számozást adna.
     */
    .rsv-menet-allomas__szam { display: none; }

    /*
     * A RÁCSKÖZ ITT SZÁNDÉKOSAN 0 — mérésből.
     *
     * Egy 16 px-es `gap` mellett a hét oszlop középvonala NEM ott van, ahol az
     * egyenletesen osztott SVG-medáloké: a különbség lineárisan nő, és a
     * szélső állomásoknál 6,9 px eltérést mértünk. A `gap` ugyanis a
     * rendelkezésre álló szélességből vonódik le, az SVG viszont a TELJES
     * szélességre skálázódik.
     *
     * A tényleges köz ezért az elemek saját oldalpaddingjéből jön: az a
     * doboz szélességén BELÜL van, tehát nem tolja el a középvonalat.
     */
    .rsv-menet-idovonal__lista {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 0;
        text-align: center;
    }

    .rsv-menet-allomas { padding-inline: var(--rsv-ter-3); }
}

/* A gerincben álló sorszámok a projekt betűtípusát öröklik (inline SVG). */
.rsv-menet-idovonal__gerinc text {
    font-family: var(--rsv-font);
}

.rsv-menet-allomas__cim {
    margin: 0 0 var(--rsv-ter-2);
    font-size: var(--rsv-meret-h4);
    font-weight: 700;
    line-height: 1.3;
    color: var(--rsv-brand-dark);
}

.rsv-menet-allomas__szoveg {
    margin: 0;
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
}

/*
 * A BRONCHIOLITIS-MEGJEGYZÉS. KÜLÖN ELEM, nem állomás — a 3–5. nap nem lehet
 * globális timeline-állomás fix dátummal (SPEC §12). Vizuálisan jegyzet:
 * halvány felület, bal oldali plumsáv, kis ikon.
 */
.rsv-menet-idovonal__jegyzet {
    display: flex;
    align-items: flex-start;
    gap: var(--rsv-ter-3);
    margin: clamp(var(--rsv-ter-6), 3vw, var(--rsv-ter-7)) 0 0;
    padding: var(--rsv-ter-4) var(--rsv-ter-5);
    border-left: 3px solid var(--rsv-brand-secondary);
    border-radius: 0 var(--rsv-radius-md) var(--rsv-radius-md) 0;
    background: var(--rsv-brand-bare);
    color: var(--rsv-text-secondary);
}

.rsv-menet-idovonal__jegyzet strong { color: var(--rsv-brand-dark); }

.rsv-menet-idovonal__jegyzetjel {
    --ikon-meret: 20px;
    flex: none;
    margin-top: 3px;
    color: var(--rsv-brand-secondary);
}


/* 18.9 Kórházi bridge — TELJES SZÉLESSÉGŰ SPLIT KOMPOZÍCIÓ
   --------------------------------------------------------------------------
   SPEC §10: „Széles, erős bridge-kompozíció. Ne legyen PICU-dráma; szupportív
   ellátás + szülői jelenlét."

   A `/rsv-szezon` koraszülött bridge-ének bevált szerkezete: nincs belső
   kártya, a SZEKCIÓ MAGA a kompozíció, a vizuál pedig a szekció közvetlen
   gyermeke, és desktopon a jobb képernyőszélig fut ki.

   AZ L10 VILÁGOS, ÖSSZEÉGETETT MASTER, ezért NEM kapja meg a
   `.rsv-alap-vizual` szorzását: a lágy diagonális maszk elég ahhoz, hogy a
   téglalapél feloldódjon a levendula felületben.

   A BELÉPŐ ANIMÁCIÓ A SZÖVEGRE KERÜLT. Egy transzformált ős CONTAINING BLOCK
   lenne az abszolút pozicionált vizuálnak — a kép a belépés alatt beugrana a
   szövegdoboz keretébe.
   -------------------------------------------------------------------------- */

.rsv-menet-bridge {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    background: linear-gradient(
        104deg,
        var(--rsv-brand-soft) 0%,
        var(--rsv-brand-bare) 62%,
        var(--rsv-brand-bare) 100%
    );
}

/* Plum fényudvar a split vonalánál — statikus, ez a szakasz nem mozog. */
.rsv-menet-bridge::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -28%;
    right: 30%;
    width: min(640px, 66vw);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(141, 69, 162, .20) 0%,
        rgba(141, 69, 162, .08) 46%,
        rgba(141, 69, 162, 0) 72%
    );
}

.rsv-menet-bridge__burok {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.rsv-menet-bridge__cim {
    margin-bottom: var(--rsv-ter-4);
    font-size: var(--rsv-meret-h2);
}

.rsv-menet-bridge__szoveg p { max-width: 56ch; }

.rsv-menet-bridge__szoveg > :last-child { margin-bottom: 0; }

/* MOBIL — nagy, teljes szélességű kép a copy és a CTA alatt. */
.rsv-menet-bridge__vizual {
    margin-top: clamp(var(--rsv-ter-5), 4vw, var(--rsv-ter-7));
    margin-bottom: calc(-1 * var(--rsv-szekcio-ter));
    line-height: 0;
}

.rsv-menet-bridge__vizual img {
    display: block;
    width: 100%;
    height: clamp(260px, 64vw, 420px);
    object-fit: cover;

    /* A gyermek és a szülő a kompozíció közepén-jobbján van. */
    object-position: 54% 50%;
}

@media (min-width: 992px) {
    .rsv-menet-bridge__burok {
        grid-template-columns: minmax(0, 53fr) minmax(0, 47fr);
        align-items: center;
        min-height: 440px;
    }

    .rsv-menet-bridge__vizual {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 47%;
        margin: 0;
    }

    .rsv-menet-bridge__vizual img {
        width: 100%;
        height: 100%;
        object-position: 50% 50%;

        -webkit-mask-image:
            linear-gradient(94deg, transparent 0%, #000 30%),
            linear-gradient(to bottom, transparent 0, #000 3%, #000 97%, transparent 100%);
        mask-image:
            linear-gradient(94deg, transparent 0%, #000 30%),
            linear-gradient(to bottom, transparent 0, #000 3%, #000 97%, transparent 100%);

        -webkit-mask-composite: source-in;
        mask-composite: intersect;
    }
}


/* 18.10 Routing — ÖT ELEM
   --------------------------------------------------------------------------
   A SPEC öt routing elemet kér, a közös `.rsv-alap-tovabb` viszont 2x2-re van
   hangolva. AZ ÖTÖS ELRENDEZÉS MÓDOSÍTÓ, NEM A KÖZÖS OSZTÁLY ÁTÍRÁSA: a
   `/rsv`, `/hogyan-terjed`, `/kockazati-csoportok`, `/tunetek` és
   `/rsv-szezon` lezárt oldalak, azok kártyái nem mozdulhatnak.

   HATOSZLOPOS SEGÉDRÁCS: az első három elem 2-2 oszlopot fog át (3 egyenlő
   kártya), az utolsó kettő 3-3-at (2 egyenlő kártya). Így nem marad lyuk a
   második sorban, és mind az öt kártya teljes szélességben ül.
   -------------------------------------------------------------------------- */

.rsv-alap-tovabb--ot { gap: clamp(var(--rsv-ter-4), 2.2vw, var(--rsv-ter-5)); }

@media (min-width: 992px) {
    .rsv-alap-tovabb--ot { grid-template-columns: repeat(6, minmax(0, 1fr)); }

    .rsv-alap-tovabb--ot > li { grid-column: span 2; }

    .rsv-alap-tovabb--ot > li:nth-child(4),
    .rsv-alap-tovabb--ot > li:nth-child(5) { grid-column: span 3; }
}


/* 18.11 MOZGÁS
   --------------------------------------------------------------------------
   Ez az oldal SZÁNDÉKOSAN nem kap folyamatos ambient mozgást: a betegség
   lefolyásáról szól, és egy mozgó háttér itt zavarna. A `data-rsv-belep`
   belépő animáció a KÖZÖS réteg, amelyet a 35. szakasz
   `prefers-reduced-motion` fallbackje kapcsol ki.

   AMI MOZOG: a megfigyelési pontok és a két ág-kártya finom emelése hoverre.
   Ez CSAK valódi egérrel rendelkező eszközön aktív, hogy érintésen ne ragadjon
   be a hover-állapot.

   AZ IDŐVONAL NEM LÉPTET. A főoldal 7. szakasza egy futó aktív állomást
   animál; ez az oldal az összefoglaló idővonalat viszi, ahol a hét állomás
   EGYSZERRE olvasandó — egy futó kiemelés itt azt sugallná, hogy a lefolyás
   fix menetrend szerint halad.
   -------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
    .rsv-menet-pont:not(.rsv-menet-pont--fo),
    .rsv-menet-agkartya {
        transition: transform .25s ease, box-shadow .25s ease;
    }

    .rsv-menet-pont:not(.rsv-menet-pont--fo):hover,
    .rsv-menet-agkartya:hover {
        transform: translateY(-3px);
        box-shadow: var(--rsv-arnyek-md), inset 0 0 0 1px var(--rsv-border-default);
    }
}


/* --------------------------------------------------------------------------
   19. A `/mikor-fordulj-orvoshoz` ALOLDAL — „Mikor fordulj orvoshoz?"
   --------------------------------------------------------------------------
   Kanonikus forrás: az `RSV_MIKOR_ORVOSHOZ_CLAUDE_PACKAGE_v1` csomag
   `PAGE_SPEC.md`, `PAGE_COPY.md`, `ASSET_MAPPING.md` és `QA_CHECKLIST.md`
   fájlja.

   ÚJ SZÍNPALETTA NEM KELETKEZETT. Ez a szakasz KIZÁRÓLAG a 2. szakasz
   tokenjeiből és azok `color-mix()` / `rgba()` alakjából épül.

   A LEZÁRT MINTÁT ÖRÖKLI. A page-hero, az insight-panel, a routing kártyák, a
   szószedet és a forrásblokk a `.rsv-alap*` készlet (13. szakasz); itt csak az
   van, ami ennek az oldalnak a SAJÁTJA.

   ===========================================================================
    A HÁROM SZINTSZÍN — EZ AZ OLDAL LEGFONTOSABB VIZUÁLIS SZABÁLYA
   ===========================================================================
   A `QA_CHECKLIST.md` „Vizuál" pontja kimondja: az urgent szín CSAK valódi
   sürgős tartalomnál jelenhet meg. Ezért a szintjelölés egyetlen, öröklődő
   custom property-n megy (`--rsv-szint`), és pontosan három értéket vehet fel:

     - `--rsv-urgent`  -> 112 / életveszély;
     - `--rsv-warning` -> „még ma orvos" / 1830;
     - `--rsv-success` -> otthon figyelhető.

   Így egyetlen helyen látszik, melyik blokk melyik triázsszinthez tartozik, és
   nem fordulhat elő, hogy egy nem sürgős szakasz sürgős színt kapjon.

   ===========================================================================
    A TIZENEGY ÁBRA — CROP TILOS
   ===========================================================================
   Az `ASSET_MAPPING.md` „Crop-szabály" pontja és a `README_START_HERE.md`
   egyaránt kiköti, hogy az M03a–d és az M08–M09 TELJES kompozícióval
   jelenjen meg. Ezért MINDEN kép `object-fit: contain`, és sehol nincs
   `cover`, `clip-path` vagy negatív inset a képmezőn.

   A csomag SVG-i saját, lekerekített levendula lapon ülnek — ez maga a
   kártyafelület. Nem teszünk alájuk második lapot, és nem kapnak
   `mix-blend-mode: multiply`-t sem: az a `.rsv-alap-vizual` kezelése az
   ÖSSZEÉGETETT RASZTER masterekhez való. Itt egyetlen, az alfacsatornát
   követő ejtett árnyék adja a mélységet.
   -------------------------------------------------------------------------- */

/* 19.1 Page hero
   --------------------------------------------------------------------------
   SPEC „Hero": desktopon kb. 44% copy / 56% vizuál, és az M01 NAGY legyen, ne
   thumbnail. A közös `.rsv-alaphero__racs` 46/54-et ad, ezért az oldal saját
   variánst kap — a lezárt oldalak heróihoz nem nyúlunk.
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
    .rsv-alaphero--triazs .rsv-alaphero__racs {
        grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
    }
}

/*
 * AZ OLDAL VEZÉRGONDOLATA. Nem alert-doboz: halk, bal oldali plum vonallal
 * jelölt kiemelés, hogy a hero ne figyelmeztetéssel kezdődjön — a sürgős
 * tartalom a `#azonnal` szakaszé.
 */
.rsv-triazs-hero__kiemeles {
    margin: clamp(var(--rsv-ter-4), 2vw, var(--rsv-ter-5)) 0 0;
    padding-left: var(--rsv-ter-5);
    border-left: 3px solid var(--rsv-brand-secondary);
    max-width: 56ch;
    font-weight: 600;
    color: var(--rsv-brand-dark);
}

/*
 * BIZTONSÁGI MEGJEGYZÉS. ORVOSI §11 és §20: az oldal nem diagnosztizál, és ezt
 * a hajtás felett, LÁTHATÓAN kell kimondani. Ezért nem összecsukható és nem
 * kerül a lap aljára.
 */
.rsv-triazs-hero__biztonsag {
    display: flex;
    align-items: flex-start;
    gap: var(--rsv-ter-3);
    margin: clamp(var(--rsv-ter-5), 2.6vw, var(--rsv-ter-6)) 0 0;
    max-width: 60ch;
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
}

.rsv-triazs-hero__biztonsag .ikon {
    --ikon-meret: 20px;
    flex: none;
    margin-top: 2px;
    color: var(--rsv-brand-secondary);
}

/* 19.2 A csomag ábrái
   --------------------------------------------------------------------------
   `<figure>` + `<img>`, mert az `ASSET_MAPPING.md` mindegyikhez saját alt
   szöveget ír elő (tehát tartalmi képek). A `drop-shadow` az ALFACSATORNÁT
   követi, ezért pontosan a master saját lekerekített lapjára ül — nem kell
   külön `border-radius`, amely a mastertől eltérő görbületet adna.
   -------------------------------------------------------------------------- */

.rsv-triazs-vizual {
    margin: 0;
    line-height: 0;
    filter: drop-shadow(0 10px 26px rgba(42, 14, 46, .09));
}

.rsv-triazs-vizual img {
    display: block;
    width: 100%;
    height: auto;

    /* CROP TILOS — a kompozíció akkor is teljes marad, ha a mező aránya más. */
    object-fit: contain;
}

.rsv-alaphero--triazs .rsv-alaphero__vizual {
    line-height: 0;
}

/*
 * SÁV-VIZUÁL. Az M10 (1400x620) széles kompozíció; a szakasz fejléce alatt,
 * középre zárva áll. (Az M12 2026-08-29 óta NEM sáv: négy kártyaképre bomlott,
 * lásd 19.6.)
 *
 * A KORLÁTOZÁS A FIGURE-ÖN VAN, NEM A KÉPEN. Ha az `<img>` kapná
 * (`width: auto; max-height: …`), akkor a betöltés ELŐTT nulla szélességű
 * lenne — egy 0x0-s elem pedig soha nem metszi a nézetablakot, tehát a
 * `loading="lazy"` sosem sülne el, és a kép SOHA nem töltődne be. A wrapper
 * korlátozásával az `<img>` végig `width: 100%`, a `width`/`height`
 * attribútumokból pedig a böngésző már a betöltés előtt ismeri az arányt (CLS).
 */
.rsv-triazs-vizual--sav {
    max-width: 820px;
    margin-inline: auto;
    margin-bottom: clamp(var(--rsv-ter-6), 3.4vw, var(--rsv-ter-7));
}

/*
 * NÉGYZETES MEZŐ a nehezített légzés négy ábrájához. A masterek négyzetesek
 * (1254x1254), tehát a `contain` pontosan kitölti — a szabály attól véd, hogy
 * egy későbbi, más arányú master megvágódjon.
 */
.rsv-triazs-vizual--negyzet img {
    aspect-ratio: 1;
}

/*
 * RASZTER VÁLTOZAT — a 2026-08-28-i vizuális javítókör assetjei (M03a–d) és a
 * 2026-08-29-i layout-javítás négy kártyaképe (az M12 ablakai). Ezek
 * ÖSSZEÉGETETT, közel fehér peremű kompozíciók, ezért a lezárt aloldalakon
 * bevált `.rsv-alap-vizual` mélységi kezelést kapják (lap + szorzásos keverés
 * + lágy peremezés, CSS 13.1) — új szabály nem kellett hozzájuk.
 *
 * AZ EJTETT ÁRNYÉK VISZONT KIKERÜL. A `drop-shadow` az ALFACSATORNÁT követi;
 * a vektoros ábráknál ez pont a saját lekerekített lapjukra ül rá, egy OPAK
 * raszternél viszont a teljes téglalapot rajzolná körbe — vagyis pontosan azt
 * a téglalapélt hangsúlyozná ki, amit a lágy perem eltüntet.
 */
.rsv-triazs-vizual--raszter {
    filter: none;
}

/*
 * AZ OTTHONI MEGFIGYELÉS NÉGY KÁRTYAKÉPE — SZÉLESEBB LÁGY PEREM.
 *
 * A négy kép a jóváhagyott M12 kompozíció négy ablaka. A masteren a négy
 * ovális ÁTFEDI EGYMÁST — nincs olyan függőleges vonal, amely bármelyik két
 * jelenet között üres háttéren futna —, ezért az ablakok szélén óhatatlanul
 * ott van a szomszéd gyűrűjének hajszála. Mivel a két gyűrű UGYANABBAN a
 * gyűrűzónában fut, semmilyen maszkforma nem tudja szétválasztani őket; a
 * megoldás a SZÉLESEBB lágy perem.
 *
 * A szokásos 6% még nem elég; 16%-nál a hajszál háttérívvé halványul, és
 * minden kártyán a SAJÁT jelenete olvasódik. (12%-kal is összehasonlítva:
 * a 16% érezhetően tisztább.)
 *
 * A JELENETEKET NEM VÁGJUK: az ablakok a teljes oválisokat tartalmazzák, a
 * perem csak halványít.
 */
.rsv-triazs-vizual--kartya img {
    --rsv-perem: 16%;
}

/* 19.3 Három döntési szint
   --------------------------------------------------------------------------
   SPEC: három NAGY editorial panel, és kifejezetten NEM dashboard-KPI. Ezért
   teljes sorszélességű, egymás alá kerülő panelek — nem három egyenlő kis
   kártya egy sorban.

   A SORREND (sürgős -> még ma -> otthon) a copyé; az indoklás a
   tartalomfájlban áll.
   -------------------------------------------------------------------------- */

.rsv-triazs-szintek {
    display: grid;
    gap: clamp(var(--rsv-ter-4), 2.2vw, var(--rsv-ter-5));
}

.rsv-triazs-szintek > * { min-width: 0; }

.rsv-triazs-szint {
    display: grid;
    gap: var(--rsv-ter-4) clamp(var(--rsv-ter-4), 2.4vw, var(--rsv-ter-6));
    align-items: start;
    padding: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-7));
    border-left: 4px solid var(--rsv-szint);
    border-radius: var(--rsv-radius-lg);
    background: color-mix(in srgb, var(--rsv-szint) 4%, var(--rsv-surface-card));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rsv-szint) 18%, transparent);
}

.rsv-triazs-szint > * { min-width: 0; }

@media (min-width: 768px) {
    .rsv-triazs-szint { grid-template-columns: auto minmax(0, 1fr); }
}

/* A HÁROM TRIÁZSSZINT — az urgent KIZÁRÓLAG a 112-es panelé. */
.rsv-triazs-szint--surgos { --rsv-szint: var(--rsv-urgent); }
.rsv-triazs-szint--ma     { --rsv-szint: var(--rsv-warning); }
.rsv-triazs-szint--otthon { --rsv-szint: var(--rsv-success); }

.rsv-triazs-szint__jel {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--rsv-surface-card);
    color: var(--rsv-szint);
    --ikon-meret: 28px;
    box-shadow: var(--rsv-arnyek-sm);
}

.rsv-triazs-szint__torzs > :last-child { margin-bottom: 0; }

.rsv-triazs-szint__cim {
    margin: 0 0 var(--rsv-ter-2);
    font-size: var(--rsv-meret-h3);
    font-weight: 700;
    color: var(--rsv-szint);
}

/*
 * AZ ELLÁTÁSI CÍMKE. A copy félkövér sora — melyik ellátási forma tartozik a
 * szinthez. Nem cím, ezért kisebb, de nem is mellékes: félkövér és teljes
 * kontrasztú marad.
 */
.rsv-triazs-szint__cimke {
    margin: 0 0 var(--rsv-ter-4);
    font-weight: 700;
    color: var(--rsv-text-primary);
}

.rsv-triazs-szint__lead {
    margin: 0 0 var(--rsv-ter-3);
    color: var(--rsv-text-secondary);
}

.rsv-triazs-szint__szoveg {
    margin: 0;
    max-width: 70ch;
}

/* 19.4 Jel-kártyák (112-es és „még ma" szakasz)
   --------------------------------------------------------------------------
   Ugyanaz a rács mindkét szakaszban, csak a jelölőszín különbözik. Így a két
   szint vizuálisan összetartozik, de sosem keveredik össze.
   -------------------------------------------------------------------------- */

.rsv-triazs-jelek {
    display: grid;
    gap: clamp(var(--rsv-ter-4), 2.2vw, var(--rsv-ter-5));
}

.rsv-triazs-jelek > * { min-width: 0; }

@media (min-width: 768px) {
    .rsv-triazs-jelek { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.rsv-triazs-jel {
    padding: clamp(var(--rsv-ter-5), 2.6vw, var(--rsv-ter-6));
    border-radius: var(--rsv-radius-lg);
    background: var(--rsv-surface-card);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rsv-szint) 20%, transparent),
                var(--rsv-arnyek-sm);
}

.rsv-triazs-jel--surgos { --rsv-szint: var(--rsv-urgent); }
.rsv-triazs-jel--ma     { --rsv-szint: var(--rsv-warning); }

.rsv-triazs-jel > :last-child { margin-bottom: 0; }

.rsv-triazs-jel__jel {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: var(--rsv-ter-4);
    border-radius: 50%;
    background: color-mix(in srgb, var(--rsv-szint) 10%, var(--rsv-surface-card));
    color: var(--rsv-szint);
    --ikon-meret: 24px;
}

.rsv-triazs-jel__cim {
    margin: 0 0 var(--rsv-ter-3);
    font-size: var(--rsv-meret-h4);
    font-weight: 700;
    color: var(--rsv-brand-dark);
}

.rsv-triazs-jel__szoveg {
    margin: 0 0 var(--rsv-ter-3);
    color: var(--rsv-text-secondary);
}

/* 19.5 A 112 hívópanelje
   --------------------------------------------------------------------------
   A copy kimondja: sürgős tünetnél NE e-mailt írj. Ezért a panel mellett a
   hívógomb áll, és nem kapcsolatűrlap-CTA (ORVOSI §11, CLAUDE.md §22).

   A SZÁM HTML-SZÖVEG, nem képre égetve (SPEC „KANONIKUS UX"), és `tel:`
   hivatkozás, tehát mobilon egy koppintással hívható.
   -------------------------------------------------------------------------- */

.rsv-triazs-hivaspanel {
    display: grid;
    gap: clamp(var(--rsv-ter-4), 2.4vw, var(--rsv-ter-6));
    align-items: center;
    margin-top: clamp(var(--rsv-ter-6), 3.2vw, var(--rsv-ter-7));
    padding: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-7));
    border-radius: clamp(var(--rsv-radius-lg), 2vw, 28px);
    background: color-mix(in srgb, var(--rsv-urgent) 6%, var(--rsv-surface-card));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rsv-urgent) 26%, transparent);
}

.rsv-triazs-hivaspanel > * { min-width: 0; }

@media (min-width: 768px) {
    .rsv-triazs-hivaspanel { grid-template-columns: minmax(0, 1fr) auto; }
}

.rsv-triazs-hivaspanel__uzenet {
    display: flex;
    align-items: flex-start;
    gap: var(--rsv-ter-3);
    margin: 0;
    font-weight: 600;
    color: var(--rsv-text-primary);
}

.rsv-triazs-hivaspanel__jel {
    display: block;
    flex: none;
    margin-top: 2px;
    line-height: 0;
    --ikon-meret: 26px;
    color: var(--rsv-urgent);
}

/*
 * A HÍVÓGOMB. Fehér szöveg `--rsv-urgent` alapon 6,76 : 1 — WCAG AA felett
 * (ugyanaz a kombináció, mint a `/tunetek` sürgős gombjánál).
 */
.rsv-triazs-hivas {
    display: grid;
    justify-items: center;
    gap: 2px;
    min-height: 64px;
    padding: var(--rsv-ter-3) clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-7));
    border-radius: var(--rsv-radius-gomb);
    background: var(--rsv-urgent);
    color: #fff;
    text-decoration: none;
    --ikon-meret: 20px;
    transition: background-color .18s ease;
}

.rsv-triazs-hivas:hover,
.rsv-triazs-hivas:focus {
    background: color-mix(in srgb, var(--rsv-urgent) 82%, var(--rsv-brand-dark));
    color: #fff;
}

.rsv-triazs-hivas__szam {
    font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: .02em;
}

.rsv-triazs-hivas__cimke {
    font-size: var(--rsv-meret-meta);
    font-weight: 600;
    text-align: center;
}

/* 19.6 „Mit nézz meg otthon?" — négy megfigyelési pont
   --------------------------------------------------------------------------
   SPEC: M12 + NÉGY KÜLÖN HTML blokk. A kép csak szemléltet; minden állítás
   HTML-ben áll, tehát a kép kiesése esetén sem vész el tartalom.
   -------------------------------------------------------------------------- */

.rsv-triazs-pontok {
    display: grid;
    gap: clamp(var(--rsv-ter-4), 2.2vw, var(--rsv-ter-5));
    list-style: none;
    margin: 0;
    padding: 0;
}

.rsv-triazs-pontok > * { min-width: 0; }

@media (min-width: 576px) {
    .rsv-triazs-pontok { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
    .rsv-triazs-pontok { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/*
 * A KÁRTYA SZERKEZETE (2026-08-29): kép -> fejlécsor (ikon + sorszám) ->
 * cím -> szöveg. A közös felső képsáv megszűnt, mert a sáv és a kártyák
 * ugyanazt a négy dolgot mondták el.
 *
 * A SORSZÁM EZÉRT KIKERÜLT A JOBB FELSŐ SAROKBÓL: a kép most éppen ott
 * kezdődik, és egy fölé úsztatott szám a jeleneten ülne. A fejlécsorban
 * ugyanaz az 1–4 számozás marad, csak olvasható helyen.
 */
.rsv-triazs-pont {
    display: flex;
    flex-direction: column;
    padding: clamp(var(--rsv-ter-4), 2.2vw, var(--rsv-ter-5));
    border-radius: var(--rsv-radius-lg);
    background: var(--rsv-surface-card);
    box-shadow: inset 0 0 0 1px var(--rsv-border-default);
}

.rsv-triazs-pont > :last-child { margin-bottom: 0; }

/* A kártyakép a kártya tetején, a szövegtől elkülönítve. */
.rsv-triazs-pont .rsv-triazs-vizual--kartya {
    margin-bottom: var(--rsv-ter-3);
}

.rsv-triazs-pont__fej {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rsv-ter-3);
    margin-bottom: var(--rsv-ter-3);
}

.rsv-triazs-pont__szam {
    font-size: var(--rsv-meret-h3);
    font-weight: 800;
    line-height: 1;
    color: color-mix(in srgb, var(--rsv-brand-secondary) 34%, transparent);
}

.rsv-triazs-pont__jel {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--rsv-brand-soft);
    color: var(--rsv-brand-primary);
    --ikon-meret: 22px;
}

.rsv-triazs-pont__cim {
    margin: 0 0 var(--rsv-ter-2);
    font-size: var(--rsv-meret-h4);
    font-weight: 700;
    color: var(--rsv-brand-dark);
}

.rsv-triazs-pont__szoveg {
    margin: 0;
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
}

/* 19.7 Nehezített légzés — négy EGYENRANGÚ jel
   --------------------------------------------------------------------------
   SPEC „Nehezített légzés": négy külön asset, egyenrangú vizuális rendszerben,
   `object-fit: contain`, CROP TILOS.

   A NÉGY KÁRTYA AZONOS FELÉPÍTÉSŰ: négyzetes képmező, cím, szöveg. Az elsőnél
   a copy felsorolása áll a szöveg helyén — a rács alapértelmezett
   `stretch`-e miatt a kártyák magassága így is egy vonalban zárul.
   -------------------------------------------------------------------------- */

.rsv-triazs-legzes {
    display: grid;
    gap: clamp(var(--rsv-ter-4), 2.2vw, var(--rsv-ter-5));
}

.rsv-triazs-legzes > * { min-width: 0; }

@media (min-width: 576px) {
    .rsv-triazs-legzes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
    .rsv-triazs-legzes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.rsv-triazs-legzeskartya {
    display: flex;
    flex-direction: column;
    gap: var(--rsv-ter-3);
    padding: clamp(var(--rsv-ter-4), 2.2vw, var(--rsv-ter-5));
    border-radius: var(--rsv-radius-lg);
    background: var(--rsv-surface-card);
    box-shadow: inset 0 0 0 1px var(--rsv-border-default);
}

.rsv-triazs-legzeskartya > :last-child { margin-bottom: 0; }

.rsv-triazs-legzeskartya__cim {
    margin: var(--rsv-ter-2) 0 0;
    font-size: var(--rsv-meret-h4);
    font-weight: 700;
    color: var(--rsv-brand-dark);
}

.rsv-triazs-legzeskartya__szoveg {
    margin: 0;
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
}

.rsv-triazs-legzeskartya .rsv-triazs-lista {
    margin: 0;
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
}

/* 19.8 Editorial kettéosztás (etetés, sérülékeny baba, láz, tévhitek)
   --------------------------------------------------------------------------
   A `.rsv-ketto` alapértelmezett, nagyvonalú köze itt szétszakítaná a két
   felet; a szűkebb érték egy kompozícióvá fogja őket. A SZÖVEG kapja a
   nagyobb hasábot: ezen az oldalon a szöveg a tartalom, a kép szemléltet.

   FIGYELEM — `.rsv-ketto--forditott` esetén a vizuál `order: -1`-et kap, tehát
   a rács ELSŐ hasábjába kerül. Ilyenkor a `grid-template-columns` első értéke
   a KÉPÉ (munkamenet-átadó §7.4).
   -------------------------------------------------------------------------- */

.rsv-triazs-editorial {
    align-items: center;
    gap: clamp(var(--rsv-ter-5), 3.2vw, var(--rsv-ter-7));
}

@media (min-width: 992px) {
    /* szöveg | kép */
    .rsv-triazs-editorial:not(.rsv-ketto--forditott) {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    }

    /* kép | szöveg */
    .rsv-triazs-editorial.rsv-ketto--forditott {
        grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    }
}

/* 19.9 Listák
   --------------------------------------------------------------------------
   Egyetlen listastílus, három jelölőszínnel. A `--szint` változat a szülő
   panel `--rsv-szint` értékét örökli, tehát nem kell külön szabály minden
   triázsszinthez.
   -------------------------------------------------------------------------- */

.rsv-triazs-lista {
    list-style: none;
    margin: 0 0 var(--rsv-ter-4);
    padding: 0;
}

.rsv-triazs-lista li {
    position: relative;
    padding-left: var(--rsv-ter-5);
    margin-bottom: var(--rsv-ter-2);
}

.rsv-triazs-lista li:last-child { margin-bottom: 0; }

.rsv-triazs-lista li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .62em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rsv-brand-secondary);
}

.rsv-triazs-lista--szint li::before { background: var(--rsv-szint); }

/* A „Kérj orvosi segítséget, ha…" felsorolás — figyelmeztető, de nem sürgős. */
.rsv-triazs-lista--jelek li::before { background: var(--rsv-warning); }

.rsv-triazs-listacimke {
    margin: 0 0 var(--rsv-ter-3);
    font-weight: 700;
    color: var(--rsv-text-primary);
}

/* 19.10 Jegyzetek és a 12 órás vörös zászló
   --------------------------------------------------------------------------
   A „Fontos: a légzésszám önmagában nem diagnózis" jegyzet a 60/perc melletti
   KÖTELEZŐ megszorítás, a vörös zászló pedig a NICE 12 órás publikus
   red flagje. Egyik sem rejthető el és egyik sem rövidíthető.
   -------------------------------------------------------------------------- */

.rsv-triazs-jegyzet {
    margin: 0;
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
}

.rsv-triazs-jegyzet__cimke {
    font-weight: 700;
    color: var(--rsv-text-primary);
}

.rsv-triazs-vorosjelzo {
    display: flex;
    align-items: flex-start;
    gap: var(--rsv-ter-3);
    margin: var(--rsv-ter-4) 0 0;
    padding: var(--rsv-ter-3) var(--rsv-ter-4);
    border-radius: var(--rsv-radius-sm);
    background: color-mix(in srgb, var(--rsv-urgent) 7%, var(--rsv-surface-card));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rsv-urgent) 24%, transparent);
    font-size: var(--rsv-meret-kicsi);
    font-weight: 600;
    color: var(--rsv-text-primary);
}

.rsv-triazs-vorosjelzo .ikon {
    --ikon-meret: 20px;
    flex: none;
    margin-top: 2px;
    color: var(--rsv-urgent);
}

/*
 * FORRÁSJEGYZET. A 6–8 óra és a 12 óra viszonyát magyarázó bekezdés: halkabb,
 * mint a törzsszöveg, de teljes szélességű — nem lábjegyzet-apróbetű.
 */
.rsv-triazs-forrasjegyzet {
    display: flex;
    align-items: flex-start;
    gap: var(--rsv-ter-3);
    margin: clamp(var(--rsv-ter-6), 3vw, var(--rsv-ter-7)) 0 0;
    padding: var(--rsv-ter-4) var(--rsv-ter-5);
    border-radius: var(--rsv-radius-md);
    background: var(--rsv-surface-card);
    box-shadow: inset 0 0 0 1px rgba(141, 69, 162, .14);
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
}

.rsv-triazs-forrasjegyzet .ikon {
    --ikon-meret: 20px;
    flex: none;
    margin-top: 2px;
    color: var(--rsv-brand-secondary);
}

/* 19.11 Láz — két JÓL ELKÜLÖNÍTETT állítás
   --------------------------------------------------------------------------
   SPEC „Láz": két jól elkülönített HTML állítás. Ezért két külön panel, saját
   korcímkével és saját triázsszínnel — nem egyetlen felsorolás, amelyben a
   szemnek kellene szétválasztania a két életkori sávot.

   ORVOSI GUARDRAIL: az 1 hónap alatti sáv AZONNALI SÜRGŐSSÉGI ellátást
   jelent, az 1–3 hónapos sáv kórházi kivizsgálást. A két szint felcserélése
   tilos, és ezt a színjelölés is rögzíti.
   -------------------------------------------------------------------------- */

.rsv-triazs-lazsor {
    display: grid;
    gap: var(--rsv-ter-4);
    list-style: none;
    margin: 0 0 clamp(var(--rsv-ter-5), 2.6vw, var(--rsv-ter-6));
    padding: 0;
}

.rsv-triazs-lazsor > * { min-width: 0; }

.rsv-triazs-lazallitas {
    padding: var(--rsv-ter-4) var(--rsv-ter-5);
    border-left: 4px solid var(--rsv-szint);
    border-radius: var(--rsv-radius-md);
    background: color-mix(in srgb, var(--rsv-szint) 5%, var(--rsv-surface-card));
}

.rsv-triazs-lazallitas--surgos { --rsv-szint: var(--rsv-urgent); }
.rsv-triazs-lazallitas--ma     { --rsv-szint: var(--rsv-warning); }

.rsv-triazs-lazallitas__kor {
    display: block;
    margin-bottom: 2px;
    font-weight: 800;
    color: var(--rsv-szint);
}

.rsv-triazs-lazallitas__szoveg {
    display: block;
    font-weight: 600;
    color: var(--rsv-text-primary);
}

/* 19.12 Ellátási útvonal — háziorvos / 1830 / 112
   --------------------------------------------------------------------------
   SPEC „Magyar ellátási útvonal": M10 + HTML, és a számok MOBILON
   KATTINTHATÓK LEHETNEK. A `tel:` hivatkozás minden eszközön ott van.

   A HÁZI GYERMEKORVOSNAK NINCS ORSZÁGOS HÍVÓSZÁMA, ezért az első kártyán
   nincs szám — kitalált elérhetőség nem kerülhet az oldalra.
   -------------------------------------------------------------------------- */

.rsv-triazs-utak {
    display: grid;
    gap: clamp(var(--rsv-ter-4), 2.2vw, var(--rsv-ter-5));
}

.rsv-triazs-utak > * { min-width: 0; }

@media (min-width: 768px) {
    .rsv-triazs-utak { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.rsv-triazs-ut {
    display: flex;
    flex-direction: column;
    gap: var(--rsv-ter-3);
    padding: clamp(var(--rsv-ter-5), 2.6vw, var(--rsv-ter-6));
    border-top: 4px solid var(--rsv-szint);
    border-radius: var(--rsv-radius-lg);
    background: var(--rsv-surface-card);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rsv-szint) 18%, transparent),
                var(--rsv-arnyek-sm);
}

.rsv-triazs-ut--orvos   { --rsv-szint: var(--rsv-brand-primary); }
.rsv-triazs-ut--ugyelet { --rsv-szint: var(--rsv-warning); }
.rsv-triazs-ut--mento   { --rsv-szint: var(--rsv-urgent); }

.rsv-triazs-ut__jel {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--rsv-szint) 10%, var(--rsv-surface-card));
    color: var(--rsv-szint);
    --ikon-meret: 24px;
}

.rsv-triazs-ut__cimke {
    margin: 0;
    font-size: var(--rsv-meret-meta);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rsv-text-secondary);
}

.rsv-triazs-ut__cim {
    margin: 0;
    font-size: var(--rsv-meret-h3);
    font-weight: 700;
    color: var(--rsv-brand-dark);
}

/*
 * A HÍVÓSZÁM. Nagy, jól érinthető felület (min. 48 px), és a szám maga
 * HTML-szöveg — a `PAGE_SPEC.md` ezt kifejezetten kéri.
 */
.rsv-triazs-ut__szam {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: var(--rsv-ter-2);
    min-height: 48px;
    padding: var(--rsv-ter-2) var(--rsv-ter-4);
    border-radius: var(--rsv-radius-gomb);
    background: color-mix(in srgb, var(--rsv-szint) 10%, var(--rsv-surface-card));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rsv-szint) 40%, transparent);
    font-size: var(--rsv-meret-h3);
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--rsv-szint);
    text-decoration: none;
    --ikon-meret: 20px;
    transition: background-color .18s ease;
}

.rsv-triazs-ut__szam:hover,
.rsv-triazs-ut__szam:focus {
    background: color-mix(in srgb, var(--rsv-szint) 18%, var(--rsv-surface-card));
    color: var(--rsv-szint);
}

.rsv-triazs-ut__szoveg {
    margin: 0;
    color: var(--rsv-text-secondary);
}

.rsv-triazs-ut__zaras {
    margin: 0;
    font-size: var(--rsv-meret-kicsi);
    font-weight: 600;
    color: var(--rsv-text-primary);
}

/* 19.13 „Mire ne alapozd" — tévhitek
   --------------------------------------------------------------------------
   Az első három tétel SZÜLŐI TÉVHIT, idézőjelben; a negyedik NEM az, hanem
   eszközhasználati korlát (pulzoximéter). A megjelenítés ezért egységes, és
   nem tesz külön „téves / helyes" jelölést egyik tételre sem.
   -------------------------------------------------------------------------- */

.rsv-triazs-tevhitek {
    display: grid;
    gap: clamp(var(--rsv-ter-4), 2.2vw, var(--rsv-ter-5));
    list-style: none;
    margin: 0;
    padding: 0;
}

.rsv-triazs-tevhitek > * { min-width: 0; }

.rsv-triazs-tevhit {
    padding-left: var(--rsv-ter-5);
    border-left: 3px solid color-mix(in srgb, var(--rsv-brand-secondary) 42%, transparent);
}

.rsv-triazs-tevhit__cim {
    margin: 0 0 var(--rsv-ter-2);
    font-size: var(--rsv-meret-h4);
    font-weight: 700;
    color: var(--rsv-brand-dark);
}

.rsv-triazs-tevhit__szoveg {
    margin: 0;
    color: var(--rsv-text-secondary);
}

/* 19.14 Vizuál nélküli szakasz — két editorial hasáb
   --------------------------------------------------------------------------
   QA_CHECKLIST „Vizuál": ne maradjon nagy üres jobb mező keskeny copy miatt.
   A „Ha valami nem stimmel" szakasznak nincs assetje, ezért a két bekezdése
   desktopon két hasábba kerül.
   -------------------------------------------------------------------------- */

.rsv-triazs-hasabok {
    display: grid;
    gap: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-7));
}

.rsv-triazs-hasabok > * { min-width: 0; }

@media (min-width: 992px) {
    .rsv-triazs-hasabok { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.rsv-triazs-hasab {
    margin: 0;
    max-width: 62ch;
}

/*
 * SZÉLESEBB SZEKCIÓFEJ. A `.rsv-alap-oldal` 820 px-es fejszélessége a rövid
 * címekhez jó; ezen az oldalon több hosszú H2 van, és a bevezetők is
 * hosszabbak.
 */
.rsv-alap-oldal .rsv-triazs-fej--szeles { max-width: 940px; }

/* 19.15 Záró mondatok, kiemelt panelek, CTA-sor
   -------------------------------------------------------------------------- */

.rsv-triazs-zaras {
    margin: clamp(var(--rsv-ter-5), 2.6vw, var(--rsv-ter-6)) 0 0;
    max-width: 74ch;
    font-weight: 600;
    color: var(--rsv-text-primary);
}

.rsv-triazs-zaras--eros {
    font-size: var(--rsv-meret-lead);
    color: var(--rsv-brand-dark);
}

.rsv-triazs-panel {
    margin-top: clamp(var(--rsv-ter-6), 3.2vw, var(--rsv-ter-7));
}

.rsv-triazs-panel__uzenet {
    margin: 0;
    max-width: 74ch;
    font-size: var(--rsv-meret-lead);
    font-weight: 600;
    color: var(--rsv-brand-dark);
}

/*
 * SÜRGŐS VÁLTOZAT. Csak ott, ahol a tartalom valóban sürgős — itt a 3 hónap
 * alatti lázas csecsemő melletti figyelmeztetésnél.
 */
.rsv-triazs-panel--surgos {
    background: color-mix(in srgb, var(--rsv-urgent) 6%, var(--rsv-surface-card));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rsv-urgent) 26%, transparent);
}

.rsv-triazs-panel--surgos .rsv-alap-kiemelt__jel { color: var(--rsv-urgent); }

/*
 * A NEHEZÍTETT LÉGZÉS SZAKASZ CTA-SORA. A copy „-> 112" alakja; a szám az
 * oldal SAJÁT sürgős szakaszára ugrik, nem írásos csatornára.
 */
.rsv-triazs-ctasor {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rsv-ter-3) var(--rsv-ter-4);
    margin: clamp(var(--rsv-ter-5), 2.6vw, var(--rsv-ter-6)) 0 0;
    font-weight: 600;
    color: var(--rsv-text-primary);
}

.rsv-triazs-ctaszam {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: var(--rsv-ter-2) var(--rsv-ter-5);
    border-radius: var(--rsv-radius-gomb);
    background: var(--rsv-urgent);
    color: #fff;
    font-size: var(--rsv-meret-h3);
    font-weight: 800;
    letter-spacing: .04em;
    text-decoration: none;
    transition: background-color .18s ease;
}

.rsv-triazs-ctaszam:hover,
.rsv-triazs-ctaszam:focus {
    background: color-mix(in srgb, var(--rsv-urgent) 82%, var(--rsv-brand-dark));
    color: #fff;
}

/* 19.16 Mozgás
   --------------------------------------------------------------------------
   Ez az oldal SZÁNDÉKOSAN nem kap folyamatos ambient animációt: triázs-oldal,
   ahol a mozgás elvonná a figyelmet a döntésről. A `data-rsv-belep` belépő
   animáció a KÖZÖS réteg, amelyet a 35. szakasz `prefers-reduced-motion`
   fallbackje kapcsol ki.

   AMI MOZOG: a kártyák finom emelése hoverre — CSAK valódi egérrel rendelkező
   eszközön, hogy érintésen ne ragadjon be a hover-állapot.
   -------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
    .rsv-triazs-jel,
    .rsv-triazs-pont,
    .rsv-triazs-legzeskartya {
        transition: transform .25s ease, box-shadow .25s ease;
    }

    .rsv-triazs-jel:hover,
    .rsv-triazs-pont:hover,
    .rsv-triazs-legzeskartya:hover {
        transform: translateY(-3px);
        box-shadow: var(--rsv-arnyek-md), inset 0 0 0 1px var(--rsv-border-default);
    }
}


/* --------------------------------------------------------------------------
   20. A `/otthoni-apolas` ALOLDAL — „Mit tehetsz otthon RSV esetén?"

   KANONIKUS FORRÁS: a copy és a szerkezet az
   `RSV_OTTHONI_APOLAS_CLAUDE_PACKAGE_v1` csomagé; a VIZUÁLIS irány az
   `OTTHONI_APOLAS_VISUAL_REBUILD_PACKAGE_v1` csomag `PAGE_SPEC_VISUAL.md`
   fájlja és `references/FULL_PAGE_TARGET.png` referenciája.

   ===========================================================================
    MI ÖRÖKÖLT ÉS MI ÚJ
   ===========================================================================
   A page-hero, az aloldali szekcióritmus, a szószedet, a routing kártyák és
   a forrásblokk a 13. szakasz `.rsv-alap*` készletéből jön — ez a szakasz
   KIZÁRÓLAG azt tartalmazza, ami ennek az oldalnak a SAJÁTJA. Új színpaletta
   nem keletkezett: minden érték a 2. szakasz tokenjeiből vagy azok
   `color-mix()`-éből származik.

   ===========================================================================
    A LAYOUT RITMUSA — `PAGE_SPEC_VISUAL.md`
   ===========================================================================
     1. hero 45/55, nagy illusztrációval;
     2. nyitó panel: egy széles blokk két oldalra bontva (bal: mikor jöhet
        szóba az otthoni ápolás; jobb: figyelmeztetőjel-bridge);
     3. központi tudásblokk: nyolc sorszámozott kártya, a KÉP A KÁRTYA
        TETEJÉN, desktopon HÁROM oszlopban;
     4. két alsó blokk: nagy vizuál + checklist;
     5. routing / GYIK / szószedet / források a lezárt logika szerint.

   HÁROM OSZLOP, NEM NÉGY. A spec a négyoszlopos ritmust „elfogadható"-ként
   engedi, de csak akkor, ha a kártyák nagyok és levegősek. A jóváhagyott copy
   lényegesen bővebb, mint a targeten látható rövid kártyaszöveg, ezért négy
   oszlopban kb. 264 px-es szövegtörzs maradna — pontosan az a „keskeny
   szövegcsík", amit a spec tilt. Három oszlopban a kártya kb. 424 px.

   ===========================================================================
    SZÍNHASZNÁLAT — EZ NEM TRIÁZS-OLDAL
   ===========================================================================
   A `/mikor-fordulj-orvoshoz` háromszintű rendszere IDE NEM kerül át: ez az
   oldal gyakorlati otthoni útmutató. A sürgősségi vizuális nyelv nem
   használható általános hangsúlyozásra (kézikönyv §13), ezért:

     - az `--rsv-warning` a „Forró gőz" alblokknál (valódi forrázásveszély)
       és a láz-kártya „Amit ne csinálj" paneljénél jelenik meg;
     - az `--rsv-urgent` egyetlen helyen, a figyelmeztetőjel-bridge
       jelölésében — felületként ott sem;
     - minden más jelölés a márka saját plumja.
   -------------------------------------------------------------------------- */

/* 20.1 Page hero
   --------------------------------------------------------------------------
   `PAGE_SPEC_VISUAL.md` §1: kb. 45/55 split, és „ne legyen thumbnail-hatás".
   A közös `.rsv-alaphero__racs` 46/54-et ad, ezért az oldal saját variánst
   kap — a lezárt oldalak heróihoz nem nyúlunk.
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
    /*
     * MÉRVE, NEM BECSÜLVE. A `.9fr/1.1fr` osztásnál a vizuál 1440 px-en
     * 714 px széles volt — a nézetablak 50%-a —, és a képe 459 px magas.
     * A projektgazdai review szerint ez kevés: a hero jobb felét ki kell
     * töltenie. A `.82fr/1.18fr` osztás 752 px-t ad (a nézetablak 52%-a),
     * és mivel a master 1400x900, a kép magassága 483 px lesz.
     */
    .rsv-alaphero--otthon .rsv-alaphero__racs {
        grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    }

    /*
     * A KÉP FÜGGŐLEGESEN KÖZÉPRE KERÜL.
     *
     * A közös `.rsv-alaphero__vizual` `align-self: start` + negatív felső
     * margóval a morzsamenü sávjába emelkedik; ez a lezárt oldalak
     * idiómája, ahol a hero szövege rövidebb. Itt a copy két bekezdésből,
     * egy idézetből és két gombból áll, ezért a kép ALATT 204 px üres hely
     * maradt (mérve) — pontosan az a „kis kép egy hatalmas üres területen"
     * hatás, amit a review kifogásolt. Középre igazítva a maradék tér
     * megoszlik, és a kompozíció kiegyensúlyozott lesz.
     */
    .rsv-alaphero--otthon .rsv-alaphero__vizual {
        align-self: center;
        margin-top: 0;
    }
}

/*
 * KÉT HERO-BEKEZDÉS — ITT KELL KÖZ.
 *
 * A közös `.rsv-alaphero__lead` `margin-bottom: 0`-t kap, mert a lezárt
 * oldalak heróiban EGYETLEN lead áll. Ezen az oldalon kettő van, és köz
 * nélkül egyetlen, összeolvadó szövegtömbnek látszottak.
 */
.rsv-alaphero--otthon .rsv-alaphero__lead:not(:last-of-type) {
    margin-bottom: var(--rsv-ter-4);
}

/*
 * AZ OLDAL VEZÉRGONDOLATA: „folyadék + komfort + megfigyelés". Nem
 * alert-doboz és nem összecsukható elem: halk, bal oldali plum vonallal
 * jelölt kiemelés.
 */
.rsv-otthon-hero__kiemeles {
    margin: clamp(var(--rsv-ter-4), 2vw, var(--rsv-ter-5)) 0 0;
    padding-left: var(--rsv-ter-5);
    border-left: 3px solid var(--rsv-brand-secondary);
    font-size: var(--rsv-meret-h4);
    font-weight: 700;
    line-height: 1.45;
    color: var(--rsv-brand-dark);
}

/* 20.2 A csomag képei
   --------------------------------------------------------------------------
   CROP TILOS (`ASSET_MAPPING.md` „Tilos"): minden kép `object-fit: contain`,
   és sehol nincs `cover`, `clip-path` vagy negatív inset a képmezőn.

   A MEZŐ ARÁNYA A MASTERÉ. A kártyaképek 900x700-asak (kb. 1.29:1), a hero
   1400x900 (kb. 1.56:1); a `width`/`height` attribútum ezt hordozza, tehát a
   mező magassága magától helyes, és a `contain` mellett sem marad üres sáv.

   A MÉLYSÉGI KEZELÉS A LEZÁRT `.rsv-alap-vizual` (CSS 13.1): a masterek
   saját, `--rsv-brand-bare` hátterű, összeégetett kompozíciók — pontosan az
   a fajta, amire a lap + szorzásos keverés + lágy peremezés készült.
   -------------------------------------------------------------------------- */

.rsv-otthon-vizual {
    margin: 0;
    border-radius: var(--rsv-radius-lg);
}

.rsv-otthon-vizual img {
    object-fit: contain;
}

/*
 * A KÁRTYAKÉP A KÁRTYA TETEJÉN, TELJES SZÉLESSÉGBEN ÜL.
 *
 * A `.rsv-alap-vizual` lágy pereme itt SZŰKEBB (6% -> 3%): a kártya belső
 * felülete amúgy is levendula, tehát nem kell erős elmosás ahhoz, hogy a
 * master háttere beleolvadjon — a szélesebb perem viszont a kompozíció
 * szélét is halványítaná.
 */
.rsv-otthon-vizual--kartya {
    margin-bottom: clamp(var(--rsv-ter-4), 2vw, var(--rsv-ter-5));
}

.rsv-otthon-vizual--kartya img { --rsv-perem: 3%; }

/*
 * A FÜSTMENTES KÁRTYA KÉPÉHEZ NEM TARTOZIK POZICIONÁLÓ KORREKCIÓ.
 *
 * Az újraépítő csomag assetjén a tiltó jel a VÁSZNON BELÜL volt eltolva
 * (-80 / +20 px), ezért a kép egy `transform: translate()` korrekciót kapott.
 * Az `OTTHONI_APOLAS_GRID_SMOKE_FIX_v1` javított assetjén a rajz középen áll
 * (-9 / -4 px, azaz kb. 1%), így a korrekció ELTÁVOLÍTVA: a kártya képe
 * ugyanazt a kezelést kapja, mint az összes többi.
 */

/*
 * IKONOS KÁRTYAFEJ. A „Köhögés és váladék" egységhez a csomag nem ad
 * illusztrációt; kitalált vagy kölcsönzött kép helyett a KÖZÖS sprite
 * tartalmi ikonja áll a kártya fején, ugyanabban az arányú mezőben — így a
 * rács ritmusa nem törik meg.
 */
.rsv-otthon-vizual--ikon {
    display: grid;
    place-items: center;
    aspect-ratio: 900 / 700;
    background: linear-gradient(150deg, var(--rsv-brand-soft) 0%, var(--rsv-brand-bare) 100%);
}

/*
 * AZ IKON MÖGÉ KORONG KERÜL. Enélkül a vonalas sprite-ikon egy nagy, üres
 * levendula mezőben lebegett, és a fényképes kártyák mellett hibának
 * látszott — nem szándékos megoldásnak. A korong ugyanabból a két
 * márkatokenből épül, mint a mező háttere.
 */
.rsv-otthon-vizual--ikon::before {
    content: "";
    grid-area: 1 / 1;
    width: clamp(120px, 26%, 190px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--rsv-surface-card);
    box-shadow: var(--rsv-arnyek-sm);
}

.rsv-otthon-vizual--ikon .ikon {
    grid-area: 1 / 1;
    --ikon-meret: clamp(56px, 13%, 88px);
    color: var(--rsv-brand-secondary);
}

/* 20.3 Nyitó panel — mikor jöhet szóba, és mikor nem
   --------------------------------------------------------------------------
   `PAGE_SPEC_VISUAL.md` §2: EGY széles blokk két oldalra bontva. A bal oldal
   a főszöveg, a jobb a figyelmeztetőjel-bridge.
   -------------------------------------------------------------------------- */

.rsv-otthon-nyito__panel {
    display: grid;
    gap: clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-8));
    align-items: start;
    padding: clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-8));
    border-radius: var(--rsv-radius-lg);
    background: var(--rsv-surface-card);
    box-shadow: var(--rsv-arnyek-md), inset 0 0 0 1px var(--rsv-border-default);
}

.rsv-otthon-nyito__panel > * { min-width: 0; }

@media (min-width: 992px) {
    .rsv-otthon-nyito__panel { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
}

.rsv-otthon-nyito__fo {
    display: flex;
    align-items: flex-start;
    gap: clamp(var(--rsv-ter-4), 2.5vw, var(--rsv-ter-6));
}

.rsv-otthon-nyito__fo > * { min-width: 0; }

/* A pajzs-jelölő: a targeten is ez nyitja a blokkot. */
.rsv-otthon-nyito__jel {
    --ikon-meret: 40px;
    flex: none;
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--rsv-brand-soft);
    color: var(--rsv-brand-primary);
}

@media (max-width: 575.98px) {
    /* Mobilon a kör elvenné a szöveg helyét. */
    .rsv-otthon-nyito__jel { --ikon-meret: 30px; width: 60px; height: 60px; }
}

.rsv-otthon-nyito__szoveg > :last-child { margin-bottom: 0; }

/* 20.4 Ikonos jellista
   --------------------------------------------------------------------------
   Két helyen: a nyitó panel megnyugtató jeleinél és az éjszakai megfigyelés
   szempontjainál. Mindkettő MEGFIGYELÉSI listát sorol, tehát nem indokolt
   két külön listastílus.
   -------------------------------------------------------------------------- */

.rsv-otthon-jelek {
    list-style: none;
    margin: 0 0 var(--rsv-ter-5);
    padding: 0;
    display: grid;
    gap: var(--rsv-ter-3);
}

/* A nyitó panelben az öt jel két hasábba rendeződik — így nem nyúlik el. */
@media (min-width: 768px) {
    .rsv-otthon-nyito .rsv-otthon-jelek { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.rsv-otthon-jelek li {
    display: flex;
    align-items: flex-start;
    gap: var(--rsv-ter-3);
}

.rsv-otthon-jelek li > * { min-width: 0; }

.rsv-otthon-jelek__jel {
    --ikon-meret: 22px;
    flex: none;
    display: inline-flex;
    margin-top: 2px;
    color: var(--rsv-brand-secondary);
}

.rsv-otthon-jelek--halk .rsv-otthon-jelek__jel { color: var(--rsv-brand-primary); }

/* 20.5 Figyelmeztetőjel-bridge
   --------------------------------------------------------------------------
   RÖVID BRIDGE, NEM TRIÁZS-SZAKASZ. A teljes figyelmeztetőjel-lista, a
   légzésszámok és a hívószámok a `/mikor-fordulj-orvoshoz` tulajdonai.

   A doboz halvány urgent tónust kap, de a felülete nem sürgősségi szín: a
   sürgősségi vizuális nyelv nem használható figyelemfelkeltésre
   (kézikönyv §13).
   -------------------------------------------------------------------------- */

.rsv-otthon-bridge {
    padding: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-6));
    border-radius: var(--rsv-radius-md);
    background: color-mix(in srgb, var(--rsv-urgent) 5%, var(--rsv-surface-card));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rsv-urgent) 22%, transparent);
}

.rsv-otthon-bridge > :last-child { margin-bottom: 0; }

.rsv-otthon-bridge__cim {
    display: flex;
    align-items: flex-start;
    gap: var(--rsv-ter-3);
    font-size: var(--rsv-meret-h4);
    margin: 0 0 var(--rsv-ter-4);
    color: var(--rsv-urgent);
}

.rsv-otthon-bridge__jel {
    --ikon-meret: 22px;
    flex: none;
    display: inline-flex;
    margin-top: 2px;
    color: var(--rsv-urgent);
}

.rsv-otthon-bridge__surgos {
    margin: var(--rsv-ter-4) 0;
    font-weight: 700;
    color: var(--rsv-text-primary);
}

/* 20.6 Központi tudásblokk — a kártyarács
   --------------------------------------------------------------------------
   `PAGE_SPEC_VISUAL.md` §3. A kártyák EGYENLŐ MAGASSÁGÚAK egy soron belül
   (a rács alapból nyújt), a képük pedig a kártya tetején, teljes
   szélességben ül.
   -------------------------------------------------------------------------- */

/*
 * A RITMUS KÖTÖTT (`LAYOUT_FIX.md`): 3 - 1 - 3 - 1 - 2.
 *
 *   1 | 2 | 3
 *   4 ................ teljes szélesség
 *   5 | 6 | 7
 *   8 ................ teljes szélesség
 *   9 | 10 ........... fele-fele (a két alsó blokk, saját szekcióban)
 *
 * A rács ezért TIZENKÉT OSZLOPOS, ahogy a `LAYOUT_FIX.md` „Kötelező desktop
 * CSS-logika" pontja előírja: a normál kártyák 4-4-4 oszlopot kapnak, a
 * kiemeltek 12-t. Tabletnél (768–1199 px) természetes kétoszlopos törés —
 * ott a normál kártya 6 oszlop, a kiemelt továbbra is 12.
 */
.rsv-otthon-racs {
    display: grid;
    gap: clamp(var(--rsv-ter-5), 2.5vw, var(--rsv-ter-6));
}

.rsv-otthon-racs > * { min-width: 0; }

@media (min-width: 768px) {
    .rsv-otthon-racs { grid-template-columns: repeat(12, minmax(0, 1fr)); }

    /* Tablet: kétoszlopos törés. */
    .rsv-otthon-racs > .rsv-otthon-kartya { grid-column: span 6; }

    /* A kiemelt blokkok a TELJES rácsszélességet kapják. */
    .rsv-otthon-racs > .rsv-otthon-kartya--szeles { grid-column: 1 / -1; }
}

@media (min-width: 1200px) {
    /* Desktop: háromoszlopos ritmus. */
    .rsv-otthon-racs > .rsv-otthon-kartya { grid-column: span 4; }

    .rsv-otthon-racs > .rsv-otthon-kartya--szeles { grid-column: 1 / -1; }
}

.rsv-otthon-kartya {
    display: flex;
    flex-direction: column;
    padding: clamp(var(--rsv-ter-5), 2.4vw, var(--rsv-ter-6));
    border-radius: var(--rsv-radius-lg);
    background: var(--rsv-surface-card);
    box-shadow: var(--rsv-arnyek-sm), inset 0 0 0 1px var(--rsv-border-default);
}

.rsv-otthon-kartya > * { min-width: 0; }

.rsv-otthon-kartya__torzs > :last-child { margin-bottom: 0; }

/* A sorszám + szemöldök fejsor. */
.rsv-otthon-kartya__fej {
    display: flex;
    align-items: center;
    gap: var(--rsv-ter-3);
    margin: 0 0 var(--rsv-ter-3);
}

.rsv-otthon-kartya__szam {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--rsv-brand-primary);
    color: #fff;
    font-size: var(--rsv-meret-meta);
    font-weight: 700;
}

.rsv-otthon-kartya__cim {
    font-size: var(--rsv-meret-h3);
    margin: 0 0 var(--rsv-ter-4);
}

/*
 * A KÁRTYÁN BELÜLI IDÉZET. A copy pull-quote-jai (orrdugulás, alvás, füst)
 * a kártya záró elemei — halk, bal oldali plum vonallal jelölve, hogy ne
 * versenyezzenek a kártyacímmel.
 */
.rsv-otthon-kartya__kiemeles {
    margin: var(--rsv-ter-5) 0 0;
    padding-left: var(--rsv-ter-4);
    border-left: 3px solid var(--rsv-brand-secondary);
    font-weight: 700;
    color: var(--rsv-brand-dark);
}

/* 20.6/b A KIEMELT, TELJES SZÉLESSÉGŰ BLOKKOK BELSŐ ELRENDEZÉSE
   --------------------------------------------------------------------------
   A `LAYOUT_FIX.md` 2. és 4. sora kiemelt, nagy editorial blokkot ír elő,
   amelyben „a kép és copy lehet split". Ezért a `--szeles` kártya 992 px
   felett kétfelé bomlik: balra a vizuál (kb. 32%), jobbra a tartalom
   (kb. 68%) — így nem lesz belőle 1344 px széles, egyetlen szövegoszlop.

   Ugyanez a szabálykészlet szolgálja ki MINDKÉT kiemelt blokkot; nem
   keletkezett új komponens, csak a modosító neve lett általános.
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
    .rsv-otthon-kartya--szeles {
        display: grid;
        grid-template-columns: minmax(0, .32fr) minmax(0, .68fr);
        grid-template-areas:
            "kep torzs"
            "sav sav";
        column-gap: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-7));
        align-items: start;
    }

    .rsv-otthon-kartya--szeles > .rsv-otthon-vizual { grid-area: kep; margin-bottom: 0; }
    .rsv-otthon-kartya--szeles > .rsv-otthon-kartya__torzs { grid-area: torzs; }
    .rsv-otthon-kartya--szeles > .rsv-otthon-kivetel { grid-area: sav; }
}

/*
 * A NICE-LISTA HÉT TÉTELE KÉT HASÁBBAN — de csak ott, ahol a kártya tényleg
 * széles. A rácsritmus szerint a „Mit NE adj rutinszerűen" 1200 px felett a
 * három oszlop EGYIKE, tehát keskeny; ott egy hasáb a helyes. Tabletnél
 * (768–1199 px) a kártya fél rácsszélességű, ott elfér két hasáb.
 *
 * `columns`, nem rács: a többhasábos elrendezés FOLYATJA a listát (1–4 balra,
 * 5–7 jobbra), tehát a hasábot végigolvasva a sorrend helyes.
 */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .rsv-otthon-lista--nice {
        columns: 2;
        column-gap: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-7));
    }

    .rsv-otthon-lista--nice li { break-inside: avoid; }
}

/*
 * A KIVÉTEL-SÁV. Világos, széles panel — nem figyelmeztető szín: a mondandó
 * éppen az, hogy ezek a gyógyszerek NEM „rosszak". A márka halk levendulája
 * emeli ki, plum bal peremmel.
 */
.rsv-otthon-kivetel {
    margin-top: clamp(var(--rsv-ter-5), 2.5vw, var(--rsv-ter-6));
    padding: clamp(var(--rsv-ter-4), 2vw, var(--rsv-ter-5)) clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-6));
    border-left: 3px solid var(--rsv-brand-secondary);
    border-radius: 0 var(--rsv-radius-md) var(--rsv-radius-md) 0;
    background: var(--rsv-brand-bare);
}

.rsv-otthon-kivetel p { margin-bottom: var(--rsv-ter-3); }

.rsv-otthon-kivetel p:last-child { margin-bottom: 0; }

/*
 * A SÁV CSAK KIEMELT, TELJES SZÉLESSÉGŰ BLOKKBAN KÉTHASÁBOS.
 *
 * A rácsritmus (`LAYOUT_FIX.md`) szerint a „Mit NE adj rutinszerűen" kártya
 * a három oszlop egyike, tehát kb. 427 px széles — ott a két hasáb szavanként
 * tördelné a mondatokat. A `--szeles` blokkban viszont van hozzá hely.
 */
@media (min-width: 992px) {
    .rsv-otthon-kartya--szeles .rsv-otthon-kivetel {
        columns: 2;
        column-gap: clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-8));
    }

    .rsv-otthon-kartya--szeles .rsv-otthon-kivetel p { break-inside: avoid; }
}

/* 20.7 Alblokkok a kártyákon belül
   --------------------------------------------------------------------------
   ORVOSI GUARDRAIL: az orrdugulás (sóoldat / SZELEKTÍV orrszívás), az alvás
   (Ébren / Alváshoz) és az inhalálás (négy fogalom) alblokkjait a copy KÜLÖN
   egységként adja, és ez orvosilag lényeges — a megszorítások az adott
   alblokkhoz tartoznak. Ezért látható elválasztást kapnak.
   -------------------------------------------------------------------------- */

.rsv-otthon-alblokk {
    --rsv-jelzes: var(--rsv-brand-secondary);

    margin-bottom: var(--rsv-ter-5);
    padding: var(--rsv-ter-4) 0 0 var(--rsv-ter-4);
    border-left: 2px solid color-mix(in srgb, var(--rsv-jelzes) 35%, transparent);
}

.rsv-otthon-alblokk:last-child { margin-bottom: 0; }

.rsv-otthon-alblokk > :last-child { margin-bottom: 0; }

/*
 * A FIGYELMEZTETŐ JELÖLÉST KIZÁRÓLAG a „Forró gőz" alblokk kapja: ott valódi,
 * azonnali forrázásveszélyről van szó (NHS).
 */
.rsv-otthon-alblokk--warning { --rsv-jelzes: var(--rsv-warning); }

.rsv-otthon-alblokk__cim {
    font-size: var(--rsv-meret-h4);
    margin: 0 0 var(--rsv-ter-2);
    color: var(--rsv-jelzes);
}

.rsv-otthon-alblokk__cimke {
    margin: 0 0 var(--rsv-ter-3);
    font-size: var(--rsv-meret-meta);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--rsv-text-secondary);
}

/*
 * A ZÁRÓ BEKEZDÉSEK HORDOZZÁK AZ ORVOSI GUARDRAILT (nincs bizonyított
 * „ideális napi gyakoriság"; a túl gyakori vagy erős szívás irritálhat).
 * Halkabbak a törzsszövegnél, de teljes méretben állnak.
 */
.rsv-otthon-alblokk__zaras {
    margin-bottom: var(--rsv-ter-3);
    color: var(--rsv-text-secondary);
}

/* 20.8 Közös szövegelemek
   -------------------------------------------------------------------------- */

.rsv-otthon-listacim {
    margin: 0 0 var(--rsv-ter-3);
    font-weight: 700;
    color: var(--rsv-text-primary);
}

.rsv-otthon-zaras {
    margin: 0 0 var(--rsv-ter-4);
    color: var(--rsv-text-secondary);
}

.rsv-otthon-zaras--eros {
    font-weight: 600;
    color: var(--rsv-text-primary);
}

/* Egyetlen listastílus, négy jelölőváltozattal. */
.rsv-otthon-lista {
    list-style: none;
    margin: 0 0 var(--rsv-ter-4);
    padding: 0;
}

.rsv-otthon-lista li {
    position: relative;
    padding-left: var(--rsv-ter-5);
    margin-bottom: var(--rsv-ter-2);
}

.rsv-otthon-lista li:last-child { margin-bottom: 0; }

.rsv-otthon-lista li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .62em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rsv-brand-secondary);
}

/*
 * TILTÓ VÁLTOZAT — vízszintes vonás a korong helyén. A matracemelés, a párna
 * és a hideg vizes szivacs NEM ugyanolyan felsorolás, mint a teendők:
 * ránézésre látszania kell, hogy ezek elkerülendők.
 */
.rsv-otthon-lista--tilto li::before {
    top: .78em;
    width: 12px;
    height: 3px;
    border-radius: 2px;
    background: var(--rsv-warning);
}

/* A NICE-lista jelölése semleges: nem tiltás, hanem szakmai ajánlás. */
.rsv-otthon-lista--nice li::before { background: var(--rsv-brand-primary); }

/* A bridge felsorolása figyelmeztető — de nem sürgős. */
.rsv-otthon-lista--bridge li::before { background: var(--rsv-urgent); }

/* 20.9 A láz-kártya „Amit ne csinálj" panelje és a jegyzet
   --------------------------------------------------------------------------
   NINCS GYÓGYSZERADAG-KALKULÁCIÓ: a kártya nem tartalmaz sem táblázatot, sem
   számmezőt. A panel figyelmeztető jelölést kap, mert konkrét, kerülendő
   otthoni beavatkozásokat sorol.
   -------------------------------------------------------------------------- */

.rsv-otthon-tilto {
    margin: var(--rsv-ter-5) 0;
    padding: var(--rsv-ter-4) var(--rsv-ter-5);
    border-radius: var(--rsv-radius-md);
    background: color-mix(in srgb, var(--rsv-warning) 6%, var(--rsv-surface-card));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rsv-warning) 26%, transparent);
}

.rsv-otthon-tilto > :last-child { margin-bottom: 0; }

.rsv-otthon-tilto__cim {
    display: flex;
    align-items: center;
    gap: var(--rsv-ter-3);
    font-size: var(--rsv-meret-h4);
    margin: 0 0 var(--rsv-ter-3);
}

.rsv-otthon-tilto__jel {
    --ikon-meret: 20px;
    flex: none;
    display: inline-flex;
    color: var(--rsv-warning);
}

/*
 * A 3 HÓNAP ALATTI LÁZAS CSECSEMŐ BRIDGE-E. A konkrét életkori lázsávok a
 * `/mikor-fordulj-orvoshoz` kanonikus tulajdonai — itt csak az útvonal áll.
 */
.rsv-otthon-jegyzet {
    display: flex;
    align-items: flex-start;
    gap: var(--rsv-ter-3);
    margin: 0 0 var(--rsv-ter-4);
    padding: var(--rsv-ter-3) var(--rsv-ter-4);
    border-radius: var(--rsv-radius-sm);
    background: var(--rsv-brand-bare);
    font-weight: 600;
    color: var(--rsv-text-primary);
}

.rsv-otthon-jegyzet > * { min-width: 0; }

.rsv-otthon-jegyzet__jel {
    --ikon-meret: 20px;
    flex: none;
    display: inline-flex;
    margin-top: 2px;
    color: var(--rsv-brand-secondary);
}

/* 20.10 A két alsó, checklistes blokk
   --------------------------------------------------------------------------
   `PAGE_SPEC_VISUAL.md` §4: mindkettő saját NAGY vizuállal és checklisttel.
   A vizuál a blokk bal hasábjában áll, a lista mellette — 768 px alatt
   egymás alatt.
   -------------------------------------------------------------------------- */

.rsv-otthon-zaroracs {
    display: grid;
    gap: clamp(var(--rsv-ter-5), 2.5vw, var(--rsv-ter-6));
}

.rsv-otthon-zaroracs > * { min-width: 0; }

/*
 * A 9. ÉS 10. BLOKK FELE-FELE (`LAYOUT_FIX.md` 5. sor), tabletnél is — ott a
 * spec kétoszlopos természetes törést ír elő.
 */
@media (min-width: 768px) {
    .rsv-otthon-zaroracs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.rsv-otthon-zaro {
    display: grid;
    gap: clamp(var(--rsv-ter-4), 2vw, var(--rsv-ter-5));
    align-items: start;
    padding: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-7));
    border-radius: var(--rsv-radius-lg);
    background: var(--rsv-surface-card);
    box-shadow: var(--rsv-arnyek-sm), inset 0 0 0 1px var(--rsv-border-default);
}

.rsv-otthon-zaro > * { min-width: 0; }

/*
 * A BLOKKON BELÜLI KÉT HASÁB CSAK 1200 px FÖLÖTT NYÍLIK KI.
 *
 * MÉRVE: 768–1199 px között a két blokk már egymás mellett áll, tehát
 * mindegyik a fél rácsszélességet kapja; ha ott a vizuál is külön hasábba
 * kerülne, 110–150 px-es bélyegkép lenne belőle. Ebben a sávban ezért a kép
 * a szöveg FÖLÖTT, teljes blokkszélességben ül.
 */
@media (min-width: 1200px) {
    .rsv-otthon-zaro { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
}

.rsv-otthon-zaro__torzs > :last-child { margin-bottom: 0; }

.rsv-otthon-zaro__cim {
    font-size: var(--rsv-meret-h3);
    margin: 0 0 var(--rsv-ter-4);
}

/* 20.11 Készenléti lista
   --------------------------------------------------------------------------
   A LISTA HTML-BEN IS SZEREPEL: a checklist a valódi tartalom, a kép csak
   támogatja.
   -------------------------------------------------------------------------- */

.rsv-otthon-keszlet {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--rsv-ter-3);
}

.rsv-otthon-keszlet li {
    display: flex;
    align-items: flex-start;
    gap: var(--rsv-ter-3);
}

.rsv-otthon-keszlet li > * { min-width: 0; }

.rsv-otthon-keszlet__jel {
    --ikon-meret: 20px;
    flex: none;
    display: inline-flex;
    margin-top: 3px;
    color: var(--rsv-success);
}

/* 20.12 Mozgás
   --------------------------------------------------------------------------
   Ez az oldal SZÁNDÉKOSAN nem kap folyamatos ambient animációt: gyakorlati
   útmutató, ahol a mozgás elvonná a figyelmet a teendőkről. A
   `data-rsv-belep` belépő animáció a KÖZÖS réteg, amelyet a 35. szakasz
   `prefers-reduced-motion` fallbackje kapcsol ki.

   AMI MOZOG: a kártyák finom emelése hoverre — CSAK valódi egérrel
   rendelkező eszközön, hogy érintésen ne ragadjon be a hover-állapot.
   -------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
    .rsv-otthon-kartya,
    .rsv-otthon-zaro {
        transition: transform .25s ease, box-shadow .25s ease;
    }

    .rsv-otthon-kartya:hover,
    .rsv-otthon-zaro:hover {
        transform: translateY(-3px);
        box-shadow: var(--rsv-arnyek-md), inset 0 0 0 1px var(--rsv-border-default);
    }
}


/* --------------------------------------------------------------------------
   21. A `/rsv-korhazi-ellatas` ALOLDAL — „Ha kórházba kerül a baba RSV miatt"

   KANONIKUS FORRÁS: az `RSV_KORHAZI_ELLATAS_PAGE_v1` csomag `FELADAT.md` és
   `COPY.md` fájlja.

   ===========================================================================
    MI ÖRÖKÖLT ÉS MI ÚJ
   ===========================================================================
   A page-hero, az aloldali szekcióritmus, a képmélység, az insight-panel, a
   routing kártyák, a szószedet és a forrásblokk a 13. szakasz `.rsv-alap*`
   készletéből jön — ez a szakasz KIZÁRÓLAG azt tartalmazza, ami ennek az
   oldalnak a SAJÁTJA. Új színpaletta nem keletkezett: minden érték a 2.
   szakasz tokenjeiből vagy azok `color-mix()`-éből származik, és a szakaszban
   egyetlen nyers hexérték sincs.

   ===========================================================================
    EZ NEM TRIÁZS-OLDAL — A SÜRGŐSSÉGI SZÍNRENDSZER IDE NEM KERÜL ÁT
   ===========================================================================
   A `/mikor-fordulj-orvoshoz` háromszintű `--rsv-szint` rendszere (urgent /
   warning / success) SZÁNDÉKOSAN hiányzik innen. A `FELADAT.md` §2/20
   kimondja: a kórházi ellátást tárgyilagosan és nyugodtan kell bemutatni,
   félelemkeltő vizuális nyelv nélkül. A jelölések ezért végig a márkaskálán
   maradnak.

   ===========================================================================
    A LAYOUT RITMUSA — DESKTOPON NINCS ÜRES FÉLOLDAL
   ===========================================================================
   A csomag hét képet ad, az oldal viszont tizennégy szakaszból áll. A kép
   nélküli szakaszok ezért nem maradhatnak keskeny szövegcsíkban:

     1. `.rsv-korhaz-editorial` — kétharmad/egyharmad editorial split: balra a
        folyó szöveg, jobbra a felsorolás saját panelben (1., 3., 8. és 14.
        szakasz);
     2. `.rsv-korhaz-lista--ketoszlop` — a hosszabb felsorolások 768 px-től két
        hasábban futnak (4. szakasz);
     3. `.rsv-korhaz-lepcso` — a légzéstámogatás négy lépcsője és a táplálás két
        formája kártyasorban (5. és 6. szakasz);
     4. `.rsv-korhaz-jegyzet` — a 7. szakasz négy rövid bekezdése 992 px-től két
        szövegoszlopban;
     5. `.rsv-korhaz-egyseg` — a 10. és a 11. szakasz KÖZÖS vizuális egysége.

   ===========================================================================
    A PANELFELÜLET EGYETLEN CUSTOM PROPERTY
   ===========================================================================
   A panelek és a kártyák hol levendula (`--rsv-szekcio--bare`), hol fehér
   szekción ülnek. Két külön komponens helyett egyetlen property fordítja meg
   a felületet: fehér szekción levendula panel, levendula szekción fehér.
   -------------------------------------------------------------------------- */

/* 21.1 Page hero
   --------------------------------------------------------------------------
   A hero mastere SZÉLES, fekvő kompozíció (1400x900), a szövegoszlop pedig a
   H1 mellett leadet ÉS egy bekezdést is visz. Ezért a vizuál itt NEM emelkedik
   a morzsamenü sávjába (az emelés álló kompozíciókhoz készült): középre
   igazodik, így nem marad alatta üres sáv.
   -------------------------------------------------------------------------- */

/* A lead után még egy bekezdés jön, tehát nem ő az utolsó elem. */
.rsv-alaphero--korhaz .rsv-alaphero__lead {
    margin-bottom: var(--rsv-ter-5);
}

@media (min-width: 992px) {
    .rsv-alaphero--korhaz .rsv-alaphero__racs {
        grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
    }

    .rsv-alaphero--korhaz .rsv-alaphero__vizual {
        align-self: center;
        margin-top: 0;
    }
}

/* 21.2 A csomag képei — NINCS DUPLA KERET ÉS NINCS DUPLA ÁRNYÉK
   --------------------------------------------------------------------------
   A csomag mind a hét assetje SAJÁT, fehér, lekerekített vizuális felületet
   tartalmaz, saját lágy árnyékkal. A `FELADAT.md` §7 ezért kifejezetten
   kiköti, hogy ne épüljön rájuk kártyakeret vagy második árnyék — a
   `<figure>` így sem `border`-t, sem `box-shadow`-t, sem saját hátteret nem
   kap. A mélységet a lezárt `.rsv-alap-vizual` adja (lap + szorzás + lágy
   perem), a heróban pedig a `.rsv-alaphero__vizual` ugyanaz a kezelése.

   CROP TILOS (`FELADAT.md` §7 „Asset szabály"): minden kép `object-fit:
   contain`, és sehol nincs `cover`, `clip-path` vagy negatív inset.
   -------------------------------------------------------------------------- */

.rsv-korhaz-vizual {
    margin: 0;
    line-height: 0;
}

.rsv-korhaz-vizual img {
    object-fit: contain;
}

/* 21.3 Editorial split — szöveg + panel
   -------------------------------------------------------------------------- */

.rsv-korhaz-editorial {
    display: grid;
    gap: clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-8));
    align-items: start;
}

.rsv-korhaz-editorial > * { min-width: 0; }

.rsv-korhaz-editorial__szoveg > :last-child { margin-bottom: 0; }

@media (min-width: 992px) {
    /*
     * A SZÖVEG KAPJA A NAGYOBB HASÁBOT. A felsorolás rövid tételekből áll,
     * a bal oldali folyó szöveg viszont bekezdéseket és CTA-t is visz.
     */
    .rsv-korhaz-editorial {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    }
}

/*
 * A ZÁRÓ SZAKASZ (14.) jobb hasábjában nem lista, hanem a kiemelt panel áll.
 * A `margin-top: 0` azért kell, hogy a panel a szöveggel egy vonalban
 * kezdődjön, ne az alapértelmezett térközzel lejjebb.
 */
.rsv-korhaz-editorial__kiemeles > .rsv-korhaz-kiemelt {
    margin-top: 0;
}

/* 21.4 Panel és kártyafelület
   --------------------------------------------------------------------------
   EGYETLEN PROPERTY FORDÍTJA MEG A FELÜLETET: alapértelmezés szerint fehér
   (levendula szekción), fehér szekción pedig levendula. Így nem kellett két
   párhuzamos panelkomponens.
   -------------------------------------------------------------------------- */

.rsv-korhaz-panel,
.rsv-korhaz-elem,
.rsv-korhaz-jegyzet {
    --rsv-korhaz-felulet: var(--rsv-surface-card);

    background: var(--rsv-korhaz-felulet);
    border-radius: var(--rsv-radius-lg);
    box-shadow: inset 0 0 0 1px var(--rsv-border-default);
}

.rsv-szekcio--feher .rsv-korhaz-panel,
.rsv-szekcio--feher .rsv-korhaz-elem,
.rsv-szekcio--feher .rsv-korhaz-jegyzet {
    --rsv-korhaz-felulet: var(--rsv-brand-bare);
}

.rsv-korhaz-panel {
    padding: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-7));
}

.rsv-korhaz-panel > :last-child { margin-bottom: 0; }

/* A teljes szélességű panel (4. és 12. szakasz) a szekciófej alatt áll. */
.rsv-korhaz-panel--szeles {
    margin-top: clamp(var(--rsv-ter-4), 2vw, var(--rsv-ter-5));
}

/*
 * A GYÓGYSZER-PANEL BAL OLDALI JELÖLŐSÁVOT KAP.
 *
 * Nem sürgősségi jelzés: a `FELADAT.md` §2/5 szerint a lista KONTEXTUSA a
 * lényeg — a bevezető, a felsorolás és a záró tagmondat egyetlen, láthatóan
 * összetartozó egység. A sáv ezt az egységet jelöli, a márka másodlagos
 * színével.
 */
.rsv-korhaz-panel--nemrutin {
    border-left: 4px solid var(--rsv-brand-secondary);
    border-top-left-radius: var(--rsv-radius-sm);
    border-bottom-left-radius: var(--rsv-radius-sm);
}

/* 21.5 Felsorolások
   --------------------------------------------------------------------------
   KÉT VÁLTOZAT, ÉS A KÜLÖNBSÉG JELENTÉSBELI: a semleges pont megfigyelési
   szempontot vagy lehetőséget jelöl, a pipa pedig valóban teljesülő
   feltételt (a javulás jelei és a hazabocsátás szempontjai).
   -------------------------------------------------------------------------- */

.rsv-korhaz-lista {
    list-style: none;

    /*
     * ALSÓ TÉRKÖZ KELL. Több szakaszban bekezdés KÖVETI a felsorolást (10.,
     * 11., 12.), és `margin: 0` mellett a záró bekezdés közvetlenül az utolsó
     * tételhez tapadt — mérve nulla köz, tehát a lista és a folyó szöveg
     * egybeolvadt. Ahol a lista az utolsó elem, ott a szülő
     * `> :last-child { margin-bottom: 0 }` szabálya viszi el a térközt.
     */
    margin: 0 0 clamp(var(--rsv-ter-5), 2.4vw, var(--rsv-ter-6));
    padding: 0;
    display: grid;
    gap: var(--rsv-ter-3);
}

.rsv-korhaz-lista li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--rsv-ter-3);
    align-items: start;
    line-height: var(--rsv-sormagassag-torzs);
}

.rsv-korhaz-lista__jel {
    display: grid;
    place-items: center;
    flex: none;
    width: 24px;
    height: 24px;
    /* Az első sor közepére igazítva — nem a szöveg tetejére. */
    margin-top: calc((1em * var(--rsv-sormagassag-torzs) - 24px) / 2);
    border-radius: 50%;
    background: color-mix(in srgb, var(--rsv-brand-secondary) 12%, transparent);
    color: var(--rsv-brand-primary);
}

.rsv-korhaz-lista:not(.rsv-korhaz-lista--pipa) .rsv-korhaz-lista__jel::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.rsv-korhaz-lista--pipa .rsv-korhaz-lista__jel { --ikon-meret: 14px; }

@media (min-width: 768px) {
    .rsv-korhaz-lista--ketoszlop {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-7));
    }
}

/* A felsorolás fölötti, felvezető sor. */
.rsv-korhaz-listacim {
    margin-bottom: var(--rsv-ter-4);
    font-weight: 700;
    color: var(--rsv-brand-dark);
}

/* Záró, összefoglaló mondat — hangsúlyos, de nem figyelmeztetés. */
.rsv-korhaz-zaras {
    font-weight: 600;
    color: var(--rsv-brand-dark);
}

.rsv-korhaz-zaras--lista {
    margin-top: var(--rsv-ter-4);
    margin-bottom: 0;
}

.rsv-szekciofej + .rsv-korhaz-panel + .rsv-korhaz-zaras,
.rsv-korhaz-lepcso + .rsv-korhaz-kiemelt + .rsv-korhaz-zaras {
    margin-top: clamp(var(--rsv-ter-5), 2.4vw, var(--rsv-ter-6));
    margin-bottom: 0;
}

/* 21.6 Lépcsős kártyák — 5. és 6. szakasz
   --------------------------------------------------------------------------
   A NÉGY LÉPCSŐ NEM RANGSOR, HANEM SORREND: a copy szerint az ellátást
   „szükség szerint, lépcsőzetesen emelik". A sorszám ezért dekoratív
   (`aria-hidden`), a jelentést a kártya címe és szövege hordozza.
   -------------------------------------------------------------------------- */

.rsv-korhaz-lepcso {
    list-style: none;
    margin: clamp(var(--rsv-ter-6), 3.4vw, var(--rsv-ter-7)) 0 0;
    padding: 0;
    display: grid;
    gap: clamp(var(--rsv-ter-4), 2vw, var(--rsv-ter-5));
}

.rsv-korhaz-lepcso > * { min-width: 0; }

.rsv-korhaz-elem {
    padding: clamp(var(--rsv-ter-5), 2.4vw, var(--rsv-ter-6));
}

.rsv-korhaz-elem > :last-child { margin-bottom: 0; }

.rsv-korhaz-elem__fej {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rsv-ter-3);
    margin-bottom: var(--rsv-ter-4);
}

.rsv-korhaz-elem__jel {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: var(--rsv-radius-md);
    background: color-mix(in srgb, var(--rsv-brand-secondary) 12%, transparent);
    color: var(--rsv-brand-primary);
    --ikon-meret: 24px;
}

.rsv-korhaz-elem__szam {
    font-size: var(--rsv-meret-h3);
    font-weight: 800;
    line-height: 1;
    color: color-mix(in srgb, var(--rsv-brand-secondary) 42%, transparent);
}

.rsv-korhaz-elem__cim {
    margin-bottom: var(--rsv-ter-3);
    font-size: var(--rsv-meret-h4);
    color: var(--rsv-brand-dark);
}

.rsv-korhaz-elem__szoveg {
    margin-bottom: 0;
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
}

@media (min-width: 768px) {
    .rsv-korhaz-lepcso { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
    /*
     * NÉGY OSZLOP CSAK 1200 px FELETT. 992 px-en a négy kártya szövegtörzse
     * kb. 190 px-re szűkülne — az már keskeny szövegcsík, nem kártya.
     */
    .rsv-korhaz-lepcso { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    /* A táplálás szakasz KÉT eleme viszont nem nyúlik szét négyfelé. */
    .rsv-korhaz-lepcso--ketto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 21.7 Jegyzetpanel — 7. szakasz
   --------------------------------------------------------------------------
   Kép nélküli szakasz, négy rövid bekezdéssel. Egy hasábban desktopon
   kilométeres sorhossz lenne, ezért 992 px-től két szövegoszlopban fut.
   A `break-inside: avoid` tartja együtt a bekezdéseket — az orrszívás
   megszorító mondatai így nem szakadnak ketté oszlophatáron.
   -------------------------------------------------------------------------- */

.rsv-korhaz-jegyzet {
    padding: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-7));
}

.rsv-korhaz-jegyzet__fej {
    max-width: 60ch;
    margin-bottom: clamp(var(--rsv-ter-4), 2vw, var(--rsv-ter-5));
}

.rsv-korhaz-jegyzet__fej > :last-child { margin-bottom: 0; }

.rsv-korhaz-jegyzet__torzs > :last-child { margin-bottom: 0; }

@media (min-width: 992px) {
    .rsv-korhaz-jegyzet__torzs {
        columns: 2;
        column-gap: clamp(var(--rsv-ter-6), 3vw, var(--rsv-ter-8));
    }

    .rsv-korhaz-jegyzet__torzs p {
        break-inside: avoid;
    }
}

/* 21.8 A 10. és a 11. szakasz KÖZÖS vizuális egysége
   --------------------------------------------------------------------------
   A `FELADAT.md` §7 asset mappingje szó szerint így nevezi meg a képet:
   „10–11. szakasz vizuális egysége". A `COPY.md` mindkét szakaszhoz ugyanazt
   az EGY fájlt rendeli, ugyanazzal az alt szöveggel — a kép ezért egyszer
   jelenik meg, a két szakasz pedig mellette fut egymás alatt.

   A két szakasz saját `<section>`-t, H2-t és horgonyt kap, tehát a copy
   szerkezete és a hivatkozhatóság változatlan.
   -------------------------------------------------------------------------- */

.rsv-korhaz-egyseg {
    display: grid;
    gap: clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-8));
    align-items: start;
}

.rsv-korhaz-egyseg > * { min-width: 0; }

.rsv-korhaz-egyseg__torzs > section > :last-child { margin-bottom: 0; }

/* A második szakasz látható, de finom elválasztót kap. */
.rsv-korhaz-egyseg__masodik {
    margin-top: clamp(var(--rsv-ter-6), 3.4vw, var(--rsv-ter-7));
    padding-top: clamp(var(--rsv-ter-6), 3.4vw, var(--rsv-ter-7));
    border-top: 1px solid var(--rsv-border-default);
}

@media (min-width: 992px) {
    .rsv-korhaz-egyseg { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); }

    /*
     * A KÉP FÜGGŐLEGESEN KÖZÉPRE. A jobb hasáb két szakaszt visz, tehát
     * lényegesen magasabb; `start` igazítással a kép a lap tetején ragadt
     * volna, és alatta nagy üres mező maradt volna.
     */
    .rsv-korhaz-egyseg__vizual { align-self: center; }
}

/* 21.9 Kiemelt panelek
   --------------------------------------------------------------------------
   A HÁROM KÖTELEZŐ, SZÓ SZERINTI MONDAT (`FELADAT.md` §2/9–§2/11) ugyanazt a
   lezárt `.rsv-alap-kiemelt` panelt kapja, tehát mindig LÁTHATÓ, és nem kerül
   összecsukható elembe.
   -------------------------------------------------------------------------- */

.rsv-korhaz-kiemelt {
    margin-top: clamp(var(--rsv-ter-5), 2.6vw, var(--rsv-ter-6));
}

/* A hero utáni kiemelés a hajtás közelében áll, ezért feszesebb szekció. */
.rsv-korhaz-nyito {
    padding-block: clamp(var(--rsv-ter-6), 3vw, var(--rsv-ter-7));
}

.rsv-korhaz-nyito .rsv-korhaz-kiemelt {
    margin-top: 0;
}

/* 21.10 Mozgás
   --------------------------------------------------------------------------
   Nincs saját, folyamatos ambient animáció: a belépő mozgás a közös
   `data-rsv-belep` réteg. A hover-emelés csak valódi egérrel rendelkező
   eszközön aktív.
   -------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
    .rsv-korhaz-elem {
        transition: transform .25s ease, box-shadow .25s ease;
    }

    .rsv-korhaz-elem:hover {
        transform: translateY(-3px);
        box-shadow: var(--rsv-arnyek-md), inset 0 0 0 1px var(--rsv-border-default);
    }
}


/* --------------------------------------------------------------------------
   22. A `/rsv-utan` ALOLDAL — „RSV után – mire számíts a gyógyulás során?"

   KANONIKUS FORRÁS: az `RSV_UTAN_PAGE_v1` csomag `FELADAT.md` és `COPY.md`
   fájlja; a raszterek a javított `RSV_UTAN_RASZTER_JAVITAS_v2` készletből
   valók (az első kör mérése: `docs/RSVIRUS_RSV_UTAN_ASSET_HIBAJELENTES.md`).

   ===========================================================================
    MI ÖRÖKÖLT ÉS MI ÚJ
   ===========================================================================
   A page-hero, az aloldali szekcióritmus, a képmélység, az insight-panel, a
   routing kártyák, a szószedet és a forrásblokk a 13. szakasz `.rsv-alap*`
   készletéből jön — ez a szakasz KIZÁRÓLAG az oldal SAJÁTJÁT tartalmazza.
   Új színpaletta nem keletkezett: minden érték a 2. szakasz tokenjeiből vagy
   azok `color-mix()`-éből származik, és a szakaszban egyetlen nyers hexérték
   sincs.

   ===========================================================================
    KÉT KÖZÖS VIZUÁLIS EGYSÉG — EZ AZ OLDAL SZERKEZETI SAJÁTOSSÁGA
   ===========================================================================
   A `FELADAT.md` §7 asset mappingje KÉT képet nevez meg több szakasz közös
   vizuáljaként: az `01` az 1–3., az `05` a 9–10. szakaszé. A kép ezért
   egyszer kerül ki, és a hozzá tartozó szakaszok mellette futnak egymás
   alatt — mindegyik megtartja a saját H2-jét és horgonyát.

   A HÁROMSZAKASZOS EGYSÉGNÉL A KÉP TAPAD (`position: sticky`). A jobb hasáb
   három szakaszt visz, tehát sokszorosa a kép magasságának; rögzített képpel
   a kompozíció a görgetés első harmada után elmaradna a szövegtől. A
   kétszakaszos egységnél erre nincs szükség, ott a kép középre igazodik.

   ===========================================================================
    EZ NEM TRIÁZS-OLDAL
   ===========================================================================
   A `/mikor-fordulj-orvoshoz` háromszintű `--rsv-szint` rendszere ide nem
   kerül át, és sürgősségi szín sem: a 14. szakasz („Ha újra romlik az
   állapota") is szolid, márkaszínű jelölést kap, mert a részletes
   figyelmeztető jelek a triázsoldal tulajdonai.
   -------------------------------------------------------------------------- */

/* 22.1 Page hero
   --------------------------------------------------------------------------
   A hero mastere SZÉLES, fekvő kompozíció (1400x900), a szövegoszlop pedig a
   H1 mellett leadet ÉS egy bekezdést is visz — ezért a vizuál középre
   igazodik, és nem emelkedik a morzsamenü sávjába (az az emelés álló
   kompozíciókhoz készült).
   -------------------------------------------------------------------------- */

.rsv-alaphero--utan .rsv-alaphero__lead {
    margin-bottom: var(--rsv-ter-5);
}

@media (min-width: 992px) {
    .rsv-alaphero--utan .rsv-alaphero__racs {
        grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
    }

    .rsv-alaphero--utan .rsv-alaphero__vizual {
        align-self: center;
        margin-top: 0;
    }
}

/* 22.2 A csomag képei — nincs dupla keret és nincs dupla árnyék
   --------------------------------------------------------------------------
   A `FELADAT.md` §7 kifejezetten kiköti, hogy ne keletkezzen dupla keret vagy
   árnyék. A `<figure>` ezért sem `border`-t, sem `box-shadow`-t, sem saját
   hátteret nem kap: a mélységet a lezárt `.rsv-alap-vizual` adja (lap +
   szorzás + lágy perem), a heróban pedig a `.rsv-alaphero__vizual`.

   CROP NINCS: minden kép `object-fit: contain`, és sehol nincs `cover`,
   `clip-path` vagy negatív inset.

   MIND A KILENC KÉP UGYANAZT A KEZELÉST KAPJA. 2026-08-29-ig az 5. és a 8.
   szakasz kísérőábrája szöveg nélküli SVG volt, saját szabállyal; az
   `RSV_UTAN_ASSET_CSERE_v3` csomag óta ez a kettő is raszter, tehát a külön
   vektoros ág megszűnt.
   -------------------------------------------------------------------------- */

.rsv-utan-vizual {
    margin: 0;
    line-height: 0;
}

.rsv-utan-vizual img {
    object-fit: contain;
}

/* 22.3 Közös vizuális egység — az 1–3. és a 9–10. szakasz
   -------------------------------------------------------------------------- */

.rsv-utan-egyseg {
    display: grid;
    gap: clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-8));
    align-items: start;
}

.rsv-utan-egyseg > * { min-width: 0; }

.rsv-utan-egyseg__torzs > section > :last-child { margin-bottom: 0; }

/* A második és a harmadik szakasz látható, de finom elválasztót kap. */
.rsv-utan-egyseg__kovetkezo {
    margin-top: clamp(var(--rsv-ter-6), 3.4vw, var(--rsv-ter-7));
    padding-top: clamp(var(--rsv-ter-6), 3.4vw, var(--rsv-ter-7));
    border-top: 1px solid var(--rsv-border-default);
}

@media (min-width: 992px) {
    .rsv-utan-egyseg { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); }

    /*
     * A HÁROMSZAKASZOS EGYSÉGNÉL A KÉP TAPAD. A `top` a lebegő fejléc alá
     * pozicionál, hogy a kép ne csússzon a fejléc-kártya mögé.
     */
    .rsv-utan-egyseg__vizual {
        position: sticky;
        top: calc(var(--rsv-fejlec-magassag) + var(--rsv-ter-5));
    }

    /* A kétszakaszos egységnél nincs mit követni: a kép középre igazodik. */
    .rsv-utan-egyseg--ketto .rsv-utan-egyseg__vizual {
        position: static;
        align-self: center;
    }
}

/* 22.4 Editorial split — szöveg + panel
   -------------------------------------------------------------------------- */

.rsv-utan-editorial {
    display: grid;
    gap: clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-8));
    align-items: start;
}

.rsv-utan-editorial > * { min-width: 0; }

.rsv-utan-editorial__szoveg > :last-child { margin-bottom: 0; }

@media (min-width: 992px) {
    .rsv-utan-editorial {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    }
}

/* 22.5 Panel és felület
   --------------------------------------------------------------------------
   EGYETLEN PROPERTY FORDÍTJA MEG A FELÜLETET: alapértelmezés szerint fehér
   (levendula szekción), fehér szekción pedig levendula — így nem kellett két
   párhuzamos panelkomponens.
   -------------------------------------------------------------------------- */

.rsv-utan-panel {
    --rsv-utan-felulet: var(--rsv-surface-card);

    padding: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-7));
    background: var(--rsv-utan-felulet);
    border-radius: var(--rsv-radius-lg);
    box-shadow: inset 0 0 0 1px var(--rsv-border-default);
}

.rsv-szekcio--feher .rsv-utan-panel {
    --rsv-utan-felulet: var(--rsv-brand-bare);
}

.rsv-utan-panel > :last-child { margin-bottom: 0; }

.rsv-utan-panel--szeles {
    margin-top: clamp(var(--rsv-ter-4), 2vw, var(--rsv-ter-5));
}

/*
 * A 14. SZAKASZ PANELJE BAL OLDALI JELÖLŐSÁVOT KAP.
 *
 * NEM sürgősségi jelzés: a `--rsv-urgent` és a `--rsv-warning` ezen az
 * oldalon nem használható (kézikönyv §13), mert a részletes figyelmeztető
 * jelek a `/mikor-fordulj-orvoshoz` oldal tulajdonai. A sáv csak azt jelöli,
 * hogy a felsorolás összetartozó, kiemelt egység.
 */
.rsv-utan-panel--figyelem {
    border-left: 4px solid var(--rsv-brand-secondary);
    border-top-left-radius: var(--rsv-radius-sm);
    border-bottom-left-radius: var(--rsv-radius-sm);
}

/* 22.6 Felsorolások
   --------------------------------------------------------------------------
   KÉT VÁLTOZAT, ÉS A KÜLÖNBSÉG JELENTÉSBELI: a semleges pont felsorol
   (lehetőségek, szempontok, összefüggések), a pipa pedig valóban teljesülő
   jelet vagy feltételt jelöl.
   -------------------------------------------------------------------------- */

.rsv-utan-lista {
    list-style: none;

    /*
     * ALSÓ TÉRKÖZ KELL: több szakaszban bekezdés KÖVETI a felsorolást. Ahol a
     * lista az utolsó elem, ott a szülő `> :last-child` szabálya viszi el.
     */
    margin: 0 0 clamp(var(--rsv-ter-5), 2.4vw, var(--rsv-ter-6));
    padding: 0;
    display: grid;
    gap: var(--rsv-ter-3);
}

.rsv-utan-lista li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--rsv-ter-3);
    align-items: start;
    line-height: var(--rsv-sormagassag-torzs);
}

.rsv-utan-lista__jel {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    /* Az első sor közepére igazítva — nem a szöveg tetejére. */
    margin-top: calc((1em * var(--rsv-sormagassag-torzs) - 24px) / 2);
    border-radius: 50%;
    background: color-mix(in srgb, var(--rsv-brand-secondary) 12%, transparent);
    color: var(--rsv-brand-primary);
}

.rsv-utan-lista:not(.rsv-utan-lista--pipa) .rsv-utan-lista__jel::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.rsv-utan-lista--pipa .rsv-utan-lista__jel { --ikon-meret: 14px; }

@media (min-width: 768px) {
    .rsv-utan-lista--ketoszlop {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-7));
    }
}

/* A felsorolás fölötti, felvezető sor. */
.rsv-utan-listacim {
    margin-bottom: var(--rsv-ter-4);
    font-weight: 700;
    color: var(--rsv-brand-dark);
}

/* Záró, összefoglaló mondat — hangsúlyos, de nem figyelmeztetés. */
.rsv-utan-zaras {
    font-weight: 600;
    color: var(--rsv-brand-dark);
}

/* 22.7 Kiemelt panelek
   --------------------------------------------------------------------------
   A KÖTELEZŐ, SZÓ SZERINTI MONDATOK (`FELADAT.md` §2/9 és §2/11) ugyanazt a
   lezárt `.rsv-alap-kiemelt` panelt kapják, tehát mindig LÁTHATÓK, és nem
   kerülnek összecsukható elembe.
   -------------------------------------------------------------------------- */

.rsv-utan-kiemelt {
    margin-top: clamp(var(--rsv-ter-5), 2.6vw, var(--rsv-ter-6));
}

/* A hero utáni kiemelés a hajtás közelében áll, ezért feszesebb szekció. */
.rsv-utan-nyito {
    padding-block: clamp(var(--rsv-ter-6), 3vw, var(--rsv-ter-7));
}

.rsv-utan-nyito .rsv-utan-kiemelt {
    margin-top: 0;
}

/* 22.8 Mozgás
   --------------------------------------------------------------------------
   Nincs saját, folyamatos ambient animáció: a belépő mozgás a közös
   `data-rsv-belep` réteg. A `sticky` vizuál nem animáció, tehát
   `prefers-reduced-motion` mellett is a helyén marad.
   -------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
    .rsv-utan-panel {
        transition: box-shadow .25s ease;
    }
}


/* --------------------------------------------------------------------------
   23. A `/megelozes` ALOLDAL — „Hogyan előzhető meg az RSV?"

   KANONIKUS FORRÁS: a `MEGELOZES_PAGE_v1` csomag `FELADAT.md` és `COPY.md`
   fájlja. A kilenc raszter a csomag `assets/` mappájából való; a beépítés
   előtti §28-mérés MEGFELELT (hero 1400x900, szekciókép 900x700, kitöltés
   89,0–99,7%, középpont 49,9%/48,7–51,7%, beégetett szöveg nincs).

   ===========================================================================
    MIÉRT `.rsv-vedelem*` A NÉVTÉR?
   ===========================================================================
   A `.rsv-megelozes*` névtér a LEZÁRT FŐOLDAL 9. szakaszáé (11.9), és ott a
   három lebegő réteg és a routing-kártyák stílusát viszi. Az aloldal ezért
   saját, ütközésmentes névteret kapott. Ugyanezért van külön képmappa is:
   `web/assets/images/megelozes-oldal/`, `megeloz-` előtaggal — a
   `web/assets/images/megelozes/` a főoldali blokké.

   ===========================================================================
    MI ÖRÖKÖLT ÉS MI ÚJ
   ===========================================================================
   A page-hero, az aloldali szekcióritmus, a képmélység, az insight-panel, a
   routing kártyák, a szószedet és a forrásblokk a 13. szakasz `.rsv-alap*`
   készletéből jön — ez a szakasz KIZÁRÓLAG az oldal SAJÁTJÁT tartalmazza.
   Új színpaletta nem keletkezett: minden érték a 2. szakasz tokenjeiből vagy
   azok `color-mix()`-éből származik, és a szakaszban egyetlen nyers hexérték
   sincs.

   ===========================================================================
    A KÉT KÖTELEZŐ MONDAT SAJÁT ALAKOT KAP
   ===========================================================================
   A `FELADAT.md` §1/3 és §1/4 két mondatot ír elő szó szerint. Mindkettő
   egyszerű bekezdés a `COPY.md`-ben; itt hangsúlyos, ikonos állításként
   jelenik meg (`.rsv-vedelem-allitas`), hogy a szakaszon belül is azonnal
   látható legyen. Összecsukható elembe egyik sem kerül.

   ===========================================================================
    EZ NEM TRIÁZS-OLDAL ÉS NEM AJÁNLÁS
   ===========================================================================
   Sürgősségi szín (`--rsv-urgent`, `--rsv-warning`) itt nem használható
   (kézikönyv §13): a lap edukációs routing, nem profilaxis-ajánlás. A 6.
   szakasz szembeállított párja is EGYENRANGÚ — egyik fele sem kap „helyes /
   helytelen" jelölést, és nincs közöttük irányjelölés.
   -------------------------------------------------------------------------- */

/* 23.1 Page hero
   --------------------------------------------------------------------------
   A hero mastere SZÉLES, fekvő kompozíció (1400x900), a szövegoszlop pedig a
   H1 mellett leadet, két bekezdést ÉS egy CTA-t is visz — ezért a vizuál
   középre igazodik, és nem emelkedik a morzsamenü sávjába (az az emelés álló
   kompozíciókhoz készült).
   -------------------------------------------------------------------------- */

.rsv-alaphero--vedelem .rsv-alaphero__lead {
    margin-bottom: var(--rsv-ter-5);
}

.rsv-alaphero--vedelem .rsv-gombsor {
    margin-top: clamp(var(--rsv-ter-5), 2.6vw, var(--rsv-ter-6));
}

@media (min-width: 992px) {
    .rsv-alaphero--vedelem .rsv-alaphero__racs {
        grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    }

    .rsv-alaphero--vedelem .rsv-alaphero__vizual {
        align-self: center;
        margin-top: 0;
    }
}

/* 23.2 A csomag képei — nincs dupla keret és nincs dupla árnyék
   --------------------------------------------------------------------------
   A `<figure>` sem keretet, sem hátteret, sem árnyékot nem kap: a mélységet a
   lezárt `.rsv-alap-vizual` adja (lap + szorzás + lágy perem), a heróban
   pedig a `.rsv-alaphero__vizual` ugyanaz — a kettőt halmozni nem szabad,
   mert két egymásra vetített fényudvar keletkezne.

   A MASTEREK FESTETT LEVENDULA HÁTTERŰEK (nem lapos `--rsv-brand-bare`),
   ezért a szorzásos keverés nem tünteti el a képszélt — azt a komponens lágy
   pereme oldja fel. Ugyanez a helyzet az `/rsv-utan` v3 készleténél (22.2).

   CROP NINCS: minden kép `object-fit: contain`, és sehol nincs `cover`,
   `clip-path` vagy negatív inset.
   -------------------------------------------------------------------------- */

.rsv-vedelem-vizual {
    margin: 0;
    line-height: 0;
}

.rsv-vedelem-vizual img {
    object-fit: contain;
}

/* 23.3 Kétoszlopos szakaszok
   --------------------------------------------------------------------------
   A lap nyolc képes szakasza a globális `.rsv-ketto`-t használja, váltakozó
   oldalon. Itt csak annyi kell, hogy a szövegoszlop tetején induljon (a
   felsorolásos szakaszok jóval magasabbak a képnél), és hogy a hasáb utolsó
   eleme ne vigyen felesleges alsó térközt.
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
    .rsv-vedelem-ketto { align-items: start; }

    .rsv-vedelem-ketto .rsv-ketto__vizual { align-self: center; }
}

.rsv-vedelem-ketto .rsv-ketto__szoveg > :last-child { margin-bottom: 0; }

/* 23.4 Felsorolások
   --------------------------------------------------------------------------
   KÉT VÁLTOZAT, ÉS A KÜLÖNBSÉG JELENTÉSBELI: a pipa KONKRÉT, megtehető
   lépést jelöl (a mindennapi védelem öt eleme), a semleges pont pedig
   megbeszélendő kérdést vagy szempontot (a családi szakasz három tétele).
   -------------------------------------------------------------------------- */

.rsv-vedelem-lista {
    list-style: none;

    /*
     * ALSÓ TÉRKÖZ KELL: több szakaszban bekezdés vagy gombsor KÖVETI a
     * felsorolást. Ahol a lista az utolsó elem, ott a szülő `> :last-child`
     * szabálya viszi el.
     */
    margin: 0 0 clamp(var(--rsv-ter-5), 2.4vw, var(--rsv-ter-6));
    padding: 0;
    display: grid;
    gap: var(--rsv-ter-3);
}

.rsv-vedelem-lista li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--rsv-ter-3);
    align-items: start;
    line-height: var(--rsv-sormagassag-torzs);
}

.rsv-vedelem-lista__jel {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    /* Az első sor közepére igazítva — nem a szöveg tetejére. */
    margin-top: calc((1em * var(--rsv-sormagassag-torzs) - 24px) / 2);
    border-radius: 50%;
    background: color-mix(in srgb, var(--rsv-brand-secondary) 12%, transparent);
    color: var(--rsv-brand-primary);
}

.rsv-vedelem-lista:not(.rsv-vedelem-lista--pipa) .rsv-vedelem-lista__jel::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.rsv-vedelem-lista--pipa .rsv-vedelem-lista__jel { --ikon-meret: 14px; }

/* A felsorolás fölötti, felvezető sor. */
.rsv-vedelem-listacim {
    margin-bottom: var(--rsv-ter-4);
    font-weight: 700;
    color: var(--rsv-brand-dark);
}

/* Záró, összefoglaló mondat — hangsúlyos, de nem figyelmeztetés. */
.rsv-vedelem-zaras {
    font-weight: 600;
    color: var(--rsv-brand-dark);
}

/* 23.5 A két kötelező, szó szerinti állítás
   --------------------------------------------------------------------------
   `FELADAT.md` §1/3 („A vakcina és a monoklonális antitest nem ugyanaz.") és
   §1/4 („A jogosultság és az elérhetőség feltételekhez kötött lehet.").

   NEM ALERT ÉS NEM SÜRGŐSSÉGI JELÖLÉS: márkaszínű, bal oldali jelölősávot
   kap, hogy a bekezdéssorból kiemelkedjen, de ne olvasódjon figyelmeztetésnek
   (kézikönyv §13).
   -------------------------------------------------------------------------- */

.rsv-vedelem-allitas {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--rsv-ter-3);
    align-items: start;
    margin-bottom: clamp(var(--rsv-ter-5), 2.4vw, var(--rsv-ter-6));
    padding: var(--rsv-ter-4) var(--rsv-ter-5);
    font-weight: 700;
    color: var(--rsv-brand-dark);
    background: color-mix(in srgb, var(--rsv-brand-secondary) 8%, transparent);
    border-left: 4px solid var(--rsv-brand-secondary);
    border-radius: var(--rsv-radius-sm);
}

.rsv-vedelem-allitas__jel {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin-top: calc((1em * var(--rsv-sormagassag-torzs) - 24px) / 2);
    color: var(--rsv-brand-primary);
    --ikon-meret: 20px;
}

/* 23.6 Kiemelt panelek
   --------------------------------------------------------------------------
   A lezárt `.rsv-alap-kiemelt` komponenst használják, tehát mindig LÁTHATÓK,
   és nem kerülnek összecsukható elembe. Az 1. és az 5. szakasz zárja őket, a
   kétoszlopos rács ALATT, teljes szélességben.
   -------------------------------------------------------------------------- */

.rsv-vedelem-kiemelt {
    margin-top: clamp(var(--rsv-ter-6), 3vw, var(--rsv-ter-7));
}

/* 23.7 A 6. szakasz — szembeállított fogalmi pár
   --------------------------------------------------------------------------
   A LAP FOGALMI CSÚCSPONTJA. A szöveg és a kétoldalas master fölül fut, a két
   fogalom pedig alatta, EGYENRANGÚ párként.

   MIÉRT NINCS KÖZÖTTÜK NYÍL VAGY „VS"? Mert az irányt vagy rangsort
   sugallna. A két kártya azonos felületet, azonos jelölőt és azonos
   tipográfiát kap — a különbséget a SZÖVEGÜK mondja ki.
   -------------------------------------------------------------------------- */

.rsv-vedelem-kulcs {
    display: grid;
    gap: clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-8));
    align-items: center;
}

.rsv-vedelem-kulcs > * { min-width: 0; }

.rsv-vedelem-kulcs__szoveg > :last-child { margin-bottom: 0; }

@media (min-width: 992px) {
    .rsv-vedelem-kulcs {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    }
}

.rsv-vedelem-parcim {
    margin-top: clamp(var(--rsv-ter-6), 3vw, var(--rsv-ter-7));
    margin-bottom: var(--rsv-ter-4);
}

.rsv-vedelem-par {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: clamp(var(--rsv-ter-4), 2.4vw, var(--rsv-ter-6));
}

@media (min-width: 768px) {
    .rsv-vedelem-par { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.rsv-vedelem-par__elem {
    display: grid;
    gap: var(--rsv-ter-3);
    align-content: start;
    padding: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-6));
    background: var(--rsv-surface-card);
    border-radius: var(--rsv-radius-lg);
    box-shadow: inset 0 0 0 1px var(--rsv-border-default);
}

.rsv-vedelem-par__jel {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--rsv-brand-secondary) 12%, transparent);
    color: var(--rsv-brand-primary);
    --ikon-meret: 28px;
}

.rsv-vedelem-par__cimke {
    font-size: var(--rsv-meret-kicsi);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rsv-brand-primary);
}

.rsv-vedelem-par__szoveg {
    font-weight: 600;
    line-height: var(--rsv-sormagassag-torzs);
    color: var(--rsv-brand-dark);
}

.rsv-vedelem-parsor {
    margin-top: clamp(var(--rsv-ter-5), 2.6vw, var(--rsv-ter-6));
}

/* 23.8 A 9. szakasz — az egyetlen kép nélküli blokk
   --------------------------------------------------------------------------
   A `COPY.md` 9. szakaszához a csomag NEM ad képet, és új vizuált tervezni
   tilos (`FELADAT.md` §2/1). Kétoszlopos rács helyett ezért olvasási
   szélességű, középre zárt editorial panelt kap: így nem marad üres féloldal,
   és a szakasz vizuálisan is lezárja a tartalmi ívet.
   -------------------------------------------------------------------------- */

.rsv-vedelem-zaropanel {
    padding: clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-8));
    text-align: center;
    background: var(--rsv-brand-bare);
    border-radius: var(--rsv-radius-lg);
    box-shadow: inset 0 0 0 1px var(--rsv-border-default);
}

.rsv-szekcio--bare .rsv-vedelem-zaropanel {
    background: var(--rsv-surface-card);
}

.rsv-vedelem-zaropanel > :last-child { margin-bottom: 0; }

.rsv-vedelem-zaropanel .rsv-gombsor {
    justify-content: center;
    margin-top: clamp(var(--rsv-ter-5), 2.6vw, var(--rsv-ter-6));
}

/* 23.9 Routing kártyák — a lezárt komponens két extra sorral
   --------------------------------------------------------------------------
   A `FELADAT.md` §4 négy kártyát ír elő kérdéssel és céllal; a `COPY.md` 10.
   szakasza ugyanezekhez címkét és egy leíró mondatot is ad. Mindkét forrás
   jóváhagyott, ezért MINDKETTŐ megjelenik — a lezárt `.rsv-alap-tovabb`
   szerkezete változatlan, csak két oldalspecifikus sor egészíti ki.
   -------------------------------------------------------------------------- */

.rsv-vedelem-tovabblead {
    max-width: 62ch;
    margin-bottom: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-6));
}

.rsv-vedelem-tovabb__cimke {
    font-size: var(--rsv-meret-kicsi);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rsv-brand-primary);
}

.rsv-vedelem-tovabb__leiras {
    margin-top: var(--rsv-ter-2);
    font-size: var(--rsv-meret-kicsi);
    line-height: var(--rsv-sormagassag-torzs);
    color: var(--rsv-text-secondary);
}

/* 23.10 Mozgás
   --------------------------------------------------------------------------
   Nincs saját, folyamatos ambient animáció: a belépő mozgás a közös
   `data-rsv-belep` réteg, amelyet a 35. szakasz `prefers-reduced-motion`
   fallbackje kapcsol ki.
   -------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
    .rsv-vedelem-par__elem {
        transition: box-shadow .25s ease;
    }
}


/* --------------------------------------------------------------------------
   24. A `/mindennapi-vedelem` ALOLDAL — „Mindennapi védelem az RSV ellen"

   KANONIKUS FORRÁS: a `MINDENNAPI_VEDELEM_PAGE_v1` csomag `FELADAT.md` és
   `COPY.md` fájlja. A tíz raszter a csomag `assets/` mappájából való; a
   beépítés előtti §28-mérés MEGFELELT (hero 1400x900, szekciókép 900x700,
   kitöltés 92,4–99,7%, középpont 49,9–50,2% / 49,9–50,4%, beégetett szöveg,
   UI-elem és watermark nincs).

   ===========================================================================
    MI ÖRÖKÖLT ÉS MI ÚJ
   ===========================================================================
   A page-hero, az aloldali szekcióritmus, a képmélység, az insight-panel, a
   routing kártyák, a szószedet és a forrásblokk a 13. szakasz `.rsv-alap*`
   készletéből jön — ez a szakasz KIZÁRÓLAG az oldal SAJÁTJÁT tartalmazza.
   Új színpaletta nem keletkezett: minden érték a 2. szakasz tokenjeiből vagy
   azok `color-mix()`-éből származik, és a szakaszban egyetlen nyers hexérték
   sincs.

   ===========================================================================
    A NÉGY KÉP NÉLKÜLI SZAKASZ
   ===========================================================================
   A `COPY.md` tizenhárom tartalmi szakaszából négyhez NEM tartozik kép, és a
   `FELADAT.md` §2/5 kifejezetten HTML/CSS editorial megoldást ír elő rájuk.
   Ezért van ebben a szakaszban három szerkezeti elem — és csak három:

     - `.rsv-napi-lepespanel` .. a légúti etikett számozott lépéssora;
     - `.rsv-napi-editorial` ... szöveg + panel MELLÉRENDELVE (11. és 12.);
     - `.rsv-napi-kartya` ...... a továbbküldhető üzenetkártya (13.).

   ===========================================================================
    EZ NEM TRIÁZS-OLDAL
   ===========================================================================
   Sürgősségi szín (`--rsv-urgent`, `--rsv-warning`) itt nem használható
   (kézikönyv §13): a lap gyakorlati megelőzésről szól, a triázs a
   `/mikor-fordulj-orvoshoz` oldalé (`FELADAT.md` §1/12). A dohányfüst-szakasz
   sem kap figyelmeztető színt: környezeti kockázati tényező, nem vészjelzés.
   -------------------------------------------------------------------------- */

/* 24.1 Page hero
   --------------------------------------------------------------------------
   A hero mastere SZÉLES, fekvő kompozíció (1400x900), a szövegoszlop pedig a
   H1 mellett leadet, egy bekezdést ÉS egy CTA-t is visz — ezért a vizuál
   középre igazodik, és nem emelkedik a morzsamenü sávjába (az az emelés álló
   kompozíciókhoz készült).

   A H1 HOSSZABB, mint a lezárt aloldalakon (kettőspontos, kétrészes cím),
   ezért a szövegoszlop valamivel több helyet kap.
   -------------------------------------------------------------------------- */

.rsv-alaphero--napi .rsv-alaphero__lead {
    margin-bottom: var(--rsv-ter-5);
}

.rsv-alaphero--napi .rsv-gombsor {
    margin-top: clamp(var(--rsv-ter-5), 2.6vw, var(--rsv-ter-6));
}

@media (min-width: 992px) {
    .rsv-alaphero--napi .rsv-alaphero__racs {
        grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr);
    }

    .rsv-alaphero--napi .rsv-alaphero__vizual {
        align-self: center;
        margin-top: 0;
    }
}

/* 24.2 A csomag képei — nincs dupla keret és nincs dupla árnyék
   --------------------------------------------------------------------------
   A `<figure>` sem keretet, sem hátteret, sem árnyékot nem kap: a mélységet a
   lezárt `.rsv-alap-vizual` adja (lap + szorzás + lágy perem), a heróban
   pedig a `.rsv-alaphero__vizual` ugyanaz — a kettőt halmozni nem szabad.

   A MASTEREK FESTETT LEVENDULA HÁTTERŰEK (nem lapos `--rsv-brand-bare`),
   ezért a szorzásos keverés nem tünteti el a képszélt — azt a komponens lágy
   pereme oldja fel. Ugyanez a helyzet az `/rsv-utan` (22.2) és a
   `/megelozes` (23.2) készleténél.

   CROP TILOS (`FELADAT.md` §2/10): minden kép `object-fit: contain`, és sehol
   nincs `cover`, `clip-path` vagy negatív inset.
   -------------------------------------------------------------------------- */

.rsv-napi-vizual {
    margin: 0;
    line-height: 0;
}

.rsv-napi-vizual img {
    object-fit: contain;
}

/* 24.3 Kétoszlopos szakaszok
   --------------------------------------------------------------------------
   A lap kilenc képes szakasza a globális `.rsv-ketto`-t használja, váltakozó
   oldalon. A szövegoszlopok itt jóval magasabbak a képnél (mindenhol van
   felsorolás), ezért a szöveg felülre igazodik, a kép pedig középre.
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
    .rsv-napi-ketto { align-items: start; }

    .rsv-napi-ketto .rsv-ketto__vizual { align-self: center; }
}

.rsv-napi-ketto .rsv-ketto__szoveg > :last-child { margin-bottom: 0; }

/* 24.4 Felsorolások — egy komponens, három változat
   --------------------------------------------------------------------------
   A KÜLÖNBSÉG JELENTÉSBELI, nem díszítés:

     - `--pipa` .. konkrét, megtehető lépés (kézhigiéné, látogatói szabályok);
     - `--szam` .. valódi SORREND (a légúti etikett négy lépése), ezért a
                   markupban `<ol>`, és a jel a sorszám;
     - alap ...... felsorolt helyzetek és szempontok, sorrend nélkül.

   Sürgősségi színt egyik sem használ.
   -------------------------------------------------------------------------- */

.rsv-napi-lista {
    list-style: none;

    /*
     * ALSÓ TÉRKÖZ KELL: több szakaszban bekezdés, záró mondat vagy gombsor
     * KÖVETI a felsorolást. Ahol a lista az utolsó elem, ott a szülő
     * `> :last-child` szabálya viszi el.
     */
    margin: 0 0 clamp(var(--rsv-ter-5), 2.4vw, var(--rsv-ter-6));
    padding: 0;
    display: grid;
    gap: var(--rsv-ter-3);
}

.rsv-napi-lista li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--rsv-ter-3);
    align-items: start;
    line-height: var(--rsv-sormagassag-torzs);
}

.rsv-napi-lista__jel {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    /* Az első sor közepére igazítva — nem a szöveg tetejére. */
    margin-top: calc((1em * var(--rsv-sormagassag-torzs) - 24px) / 2);
    border-radius: 50%;
    background: color-mix(in srgb, var(--rsv-brand-secondary) 12%, transparent);
    color: var(--rsv-brand-primary);
}

.rsv-napi-lista:not(.rsv-napi-lista--pipa):not(.rsv-napi-lista--szam) .rsv-napi-lista__jel::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.rsv-napi-lista--pipa .rsv-napi-lista__jel { --ikon-meret: 14px; }

/*
 * A SORSZÁM MAGA A JEL. A számot a sablon írja ki (a `<ol>` saját markere
 * rejtve marad), így a bélyeg mérete és igazítása azonos a másik két
 * változatéval — nem keletkezett második listarendszer.
 */
.rsv-napi-lista--szam .rsv-napi-lista__jel {
    font-size: var(--rsv-meret-kicsi);
    font-weight: 700;
    line-height: 1;
    background: var(--rsv-brand-primary);
    color: #fff;
}

/* A felsorolás fölötti, felvezető sor. */
.rsv-napi-listacim {
    margin-bottom: var(--rsv-ter-4);
    font-weight: 700;
    color: var(--rsv-brand-dark);
}

/* Záró, összefoglaló mondat — hangsúlyos, de nem figyelmeztetés. */
.rsv-napi-zaras {
    font-weight: 600;
    color: var(--rsv-brand-dark);
}

/*
 * A SZOPTATÁS-SZAKASZ ZÁRÓ MONDATA A LAP EGYIK LEGFONTOSABB MONDATA
 * (`FELADAT.md` §1/5, §1/7): kimondja, hogy a nem szoptatásból nem következik
 * rosszabb védelem. Ezért kap saját, láthatóan kiemelt alakot — de MÁRKASZÍNŰ
 * jelölősávval, nem figyelmeztetéssel: ez megnyugtatás, nem riasztás.
 */
.rsv-napi-zaras--hangsulyos {
    margin-top: clamp(var(--rsv-ter-4), 2vw, var(--rsv-ter-5));
    padding: var(--rsv-ter-4) var(--rsv-ter-5);
    background: color-mix(in srgb, var(--rsv-brand-secondary) 8%, transparent);
    border-left: 4px solid var(--rsv-brand-secondary);
    border-radius: var(--rsv-radius-sm);
}

/* 24.5 Kiemelt panelek
   --------------------------------------------------------------------------
   A lezárt `.rsv-alap-kiemelt` komponenst használják, tehát mindig LÁTHATÓK,
   és nem kerülnek összecsukható elembe.

   KÉTFÉLE HELYEN ÁLLNAK: az 1., 6., 7. és 11. szakaszban a kétoszlopos rács
   ALATT, teljes szélességben; a 9. (dohányfüst) szakaszban viszont a
   szövegoszlopON BELÜL, a felsorolás előtt — ott az elv kimondása és a három
   tiltó tétel nem szakadhat el egymástól.
   -------------------------------------------------------------------------- */

.rsv-napi-kiemelt {
    margin-top: clamp(var(--rsv-ter-6), 3vw, var(--rsv-ter-7));
}

.rsv-ketto__szoveg .rsv-napi-kiemelt {
    margin-top: clamp(var(--rsv-ter-4), 2vw, var(--rsv-ter-5));
    margin-bottom: clamp(var(--rsv-ter-5), 2.4vw, var(--rsv-ter-6));
}

/* 24.6 A 4. szakasz — számozott lépéssor kép nélkül
   --------------------------------------------------------------------------
   Olvasási szélességű panel: a négy lépés rövid, és a szakasz szándékosan
   „levegőt vesz" a képes blokkok között.
   -------------------------------------------------------------------------- */

.rsv-napi-lepespanel {
    padding: clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-8));
    background: var(--rsv-surface-card);
    border-radius: var(--rsv-radius-lg);
    box-shadow: inset 0 0 0 1px var(--rsv-border-default);
}

.rsv-napi-lepespanel > :last-child { margin-bottom: 0; }

/* 24.7 A 11. és a 12. szakasz — szöveg és panel MELLÉRENDELVE
   --------------------------------------------------------------------------
   A 11. szakasznál a mellérendelés maga a mondanivaló (`FELADAT.md` §1/8): az
   immunizáció és a mindennapi védelem EGYMÁST KIEGÉSZÍTŐ rétegek. Ezért a két
   hasáb egyenrangú, és NINCS közöttük nyíl, chevron vagy „vs" jelölés, amely
   választást vagy rangsort sugallna.

   A 12. szakasz ugyanezt a rácsot használja, fordított súllyal: ott a
   felsorolás a hangsúlyos rész.
   -------------------------------------------------------------------------- */

.rsv-napi-editorial {
    display: grid;
    gap: clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-8));
    align-items: start;
}

.rsv-napi-editorial > * { min-width: 0; }

.rsv-napi-editorial__szoveg > :last-child { margin-bottom: 0; }

@media (min-width: 992px) {
    .rsv-napi-editorial {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    }

    .rsv-napi-editorial--sulyos {
        grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    }
}

.rsv-napi-panel {
    padding: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-7));
    background: var(--rsv-brand-bare);
    border-radius: var(--rsv-radius-lg);
    box-shadow: inset 0 0 0 1px var(--rsv-border-default);
}

/*
 * EGYETLEN PROPERTY FORDÍTJA MEG A FELÜLETET: levendula szekción fehér panel,
 * fehér szekción levendula — így nem kellett két párhuzamos panelkomponens.
 */
.rsv-szekcio--bare .rsv-napi-panel {
    background: var(--rsv-surface-card);
}

.rsv-napi-panel > :last-child { margin-bottom: 0; }

.rsv-napi-gombsor {
    margin-top: clamp(var(--rsv-ter-5), 2.6vw, var(--rsv-ter-6));
}

/* 24.8 A 13. szakasz — továbbküldhető üzenetkártya
   --------------------------------------------------------------------------
   A `COPY.md` szemöldöke maga mondja ki a funkciót: „Ezt akár el is küldheted
   a családnak". A blokk copyja MÁSODIK SZEMÉLYBEN a LÁTOGATÓHOZ szól, nem a
   szülőhöz — ez a lap egyetlen ilyen szakasza, ezért kap saját, levél
   karakterű megjelenést.

   AZ ILLUSZTRÁCIÓ NEM KÉP, HANEM A KÖZÖS SPRITE BORÍTÉK-IKONJA: a csomag ehhez
   a szakaszhoz nem ad assetet, és újat tervezni tilos (`FELADAT.md` §2/1).
   -------------------------------------------------------------------------- */

.rsv-napi-kartya {
    position: relative;
    padding: clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-8));
    background: var(--rsv-brand-bare);
    border-radius: var(--rsv-radius-lg);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rsv-brand-secondary) 34%, transparent);
}

.rsv-napi-kartya > :last-child { margin-bottom: 0; }

.rsv-napi-kartya__jel {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: var(--rsv-ter-5);
    border-radius: 50%;
    background: var(--rsv-surface-card);
    color: var(--rsv-brand-primary);
    --ikon-meret: 26px;
}

.rsv-napi-kartya__cim {
    margin-top: var(--rsv-ter-2);
}

/* 24.9 Routing kártyák — a lezárt komponens egy extra sorral
   --------------------------------------------------------------------------
   A `FELADAT.md` §4 négy kártyát ír elő kérdéssel és céllal; a `COPY.md` 16.
   szakasza ugyanezekhez címkét is ad. Az ELSŐ és a NEGYEDIK kártyán a kettő
   ugyanaz a mondat (a címke csak a nagybetűs alakja), ezért ott a sablon
   egyszer írja ki — a `__cimke` sor csak a másik két kártyán jelenik meg.
   -------------------------------------------------------------------------- */

.rsv-napi-tovabb__cimke {
    font-size: var(--rsv-meret-kicsi);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rsv-brand-primary);
}

/* 24.10 Mozgás
   --------------------------------------------------------------------------
   Nincs saját, folyamatos ambient animáció: a belépő mozgás a közös
   `data-rsv-belep` réteg, amelyet a 35. szakasz `prefers-reduced-motion`
   fallbackje kapcsol ki.
   -------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
    .rsv-napi-kartya {
        transition: box-shadow .25s ease;
    }
}


/* --------------------------------------------------------------------------
   25. A `/vakcina-vagy-antitest` ALOLDAL — „Vakcina vagy antitest?"

   KANONIKUS FORRÁS: a `VAKCINA_VAGY_ANTITEST_PAGE_v1` csomag `FELADAT.md` és
   `COPY.md` fájlja. A kilenc raszter a csomag `assets/` mappájából való; a
   beépítés előtti §28-mérés MEGFELELT (hero 1400x900, szekciókép 900x700,
   beégetett szöveg és UI-elem nincs).

   HÁROM ASSET SEMATIKUS EDUKÁCIÓS ÁBRA (`02`, `05`, `06`), lágy,
   színátmenetes levendula háttérrel. A §28-mérés ezeknél 12-es toleranciával
   65–74%-os kitöltést mutatott — MŰTERMÉK: a lágy vignetta a toleranciasávba
   esik. Szűkebb, 4-es toleranciával mindhárom 99,7% / 49,9%.

   ===========================================================================
    MI ÖRÖKÖLT ÉS MI ÚJ
   ===========================================================================
   A page-hero, az aloldali szekcióritmus, a képmélység, az insight-panel, a
   routing kártyák, a szószedet és a forrásblokk a 13. szakasz `.rsv-alap*`
   készletéből jön — ez a szakasz KIZÁRÓLAG az oldal SAJÁTJÁT tartalmazza.
   Új színpaletta nem keletkezett: minden érték a 2. szakasz tokenjeiből vagy
   azok `color-mix()`-éből származik, és a szakaszban egyetlen nyers hexérték
   sincs.

   ===========================================================================
    A LAP KÖZPONTI KOMPONENSE: A VALÓDI ÖSSZEHASONLÍTÓ TÁBLÁZAT
   ===========================================================================
   A `FELADAT.md` §2/4 kifejezetten kiköti, hogy az összehasonlítás HTML/CSS
   komponens legyen, ne rasterizált kép. Szemantikus `<table>` valósítja meg:

     - 768 px FELETT valódi táblázat, sávozott sorokkal — nyolc soron át
       végigolvasva is a sorban marad a szem;
     - 768 px ALATT a rács KÁRTYÁKRA bomlik. A `<table>` szemantika megmarad
       (a képernyőolvasó továbbra is táblázatot lát), a látható feliratot a
       cellák `data-cimke` attribútuma adja a `::before`-on keresztül.

   A KÉT OSZLOP AZONOS VIZUÁLIS SÚLYT KAP (`FELADAT.md` §1/6, §1/10): azonos
   szélesség, azonos háttér, azonos tipográfia. Nincs „nyertes" oszlop, nincs
   köztük nyíl vagy elválasztó hierarchia — a lap éppen azt mondja ki, hogy
   nem versenyről van szó.

   ===========================================================================
    EZ NEM TRIÁZS-OLDAL
   ===========================================================================
   Sürgősségi szín (`--rsv-urgent`, `--rsv-warning`) itt nem használható
   (kézikönyv §13): a lap fogalmi tisztázás, nem sürgősségi tartalom.
   -------------------------------------------------------------------------- */

/* 25.1 Page hero
   --------------------------------------------------------------------------
   A hero mastere SZÉLES, fekvő kompozíció (1400x900), a szövegoszlop pedig
   hosszú H1-et, leadet, két bekezdést ÉS egy CTA-t visz — ezért a vizuál
   középre igazodik, és nem emelkedik a morzsamenü sávjába.
   -------------------------------------------------------------------------- */

.rsv-alaphero--kulonbseg .rsv-alaphero__lead {
    margin-bottom: var(--rsv-ter-5);
}

.rsv-alaphero--kulonbseg .rsv-gombsor {
    margin-top: clamp(var(--rsv-ter-5), 2.6vw, var(--rsv-ter-6));
}

@media (min-width: 992px) {
    .rsv-alaphero--kulonbseg .rsv-alaphero__racs {
        grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr);
    }

    .rsv-alaphero--kulonbseg .rsv-alaphero__vizual {
        align-self: center;
        margin-top: 0;
    }
}

/* 25.2 A csomag képei — nincs dupla keret és nincs dupla árnyék
   --------------------------------------------------------------------------
   A `<figure>` sem keretet, sem hátteret, sem árnyékot nem kap: a mélységet a
   lezárt `.rsv-alap-vizual` adja, a heróban pedig a `.rsv-alaphero__vizual`
   ugyanaz — a kettőt halmozni nem szabad.

   CROP NINCS: minden kép `object-fit: contain`, és sehol nincs `cover`,
   `clip-path` vagy negatív inset. A három sematikus ábra ugyanezt a kezelést
   kapja, mint a jelenetképek: a `FELADAT.md` §2/6 szerint ezek szöveg nélküli
   edukációs assetek, tehát nem kell külön vektoros ág.
   -------------------------------------------------------------------------- */

.rsv-kulonbseg-vizual {
    margin: 0;
    line-height: 0;
}

.rsv-kulonbseg-vizual img {
    object-fit: contain;
}

/* 25.3 Kétoszlopos szakaszok
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
    .rsv-kulonbseg-ketto { align-items: start; }

    .rsv-kulonbseg-ketto .rsv-ketto__vizual { align-self: center; }
}

.rsv-kulonbseg-ketto .rsv-ketto__szoveg > :last-child { margin-bottom: 0; }

/* 25.4 Szembeállított fogalmi pár — az 1. és a 6. szakasz
   --------------------------------------------------------------------------
   Két helyen fordul elő, és mindkétszer UGYANAZ a szerepe: két egyenrangú
   fogalmat állít egymás mellé.

     - az 1. szakaszban a vakcina és a monoklonális antitest;
     - a 6. szakaszban a palivizumab és a nirsevimab.

   A KÉT FÉL EGYENRANGÚ (`FELADAT.md` §1/6, §1/9, §1/10): azonos felület,
   azonos jelölő, azonos tipográfia, és NINCS köztük nyíl, „vs" vagy
   rangsoroló jelölés. A különbséget a szövegük mondja ki.
   -------------------------------------------------------------------------- */

.rsv-kulonbseg-par {
    list-style: none;
    margin: clamp(var(--rsv-ter-6), 3vw, var(--rsv-ter-7)) 0 0;
    padding: 0;
    display: grid;
    gap: clamp(var(--rsv-ter-4), 2.4vw, var(--rsv-ter-6));
}

@media (min-width: 768px) {
    .rsv-kulonbseg-par { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.rsv-kulonbseg-par__elem {
    display: grid;
    gap: var(--rsv-ter-3);
    align-content: start;
    padding: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-6));
    background: var(--rsv-surface-card);
    border-radius: var(--rsv-radius-lg);
    box-shadow: inset 0 0 0 1px var(--rsv-border-default);
}

.rsv-szekcio--feher .rsv-kulonbseg-par__elem {
    background: var(--rsv-brand-bare);
}

.rsv-kulonbseg-par__elem > :last-child { margin-bottom: 0; }

.rsv-kulonbseg-par__jel {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--rsv-brand-secondary) 12%, transparent);
    color: var(--rsv-brand-primary);
    --ikon-meret: 28px;
}

.rsv-kulonbseg-par__cimke {
    font-size: var(--rsv-meret-kicsi);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rsv-brand-primary);
}

/* A 6. szakasz kártyáin a készítménynév valódi H3, nem címke. */
.rsv-kulonbseg-par__cim {
    margin: 0;
    font-size: var(--rsv-meret-h4);
    color: var(--rsv-brand-dark);
}

.rsv-kulonbseg-par__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--rsv-ter-3);
    line-height: var(--rsv-sormagassag-torzs);
}

.rsv-kulonbseg-par__lista li {
    padding-left: var(--rsv-ter-5);
    position: relative;
}

.rsv-kulonbseg-par__lista li::before {
    content: "";
    position: absolute;
    top: calc(1em * var(--rsv-sormagassag-torzs) / 2 - 4px);
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rsv-brand-secondary);
}

/* 25.5 A nagy összehasonlító táblázat
   --------------------------------------------------------------------------
   `FELADAT.md` §2/4: VALÓDI HTML/CSS komponens, nem rasterizált táblázat.

   768 px FELETT klasszikus táblázat.

   A FEJLÉC SZÁNDÉKOSAN NEM RAGADÓS. Először az volt, de a burok
   `overflow-x: auto`-ja miatt a `overflow-y` is `auto`-ra számítódik, tehát a
   burok maga lett a görgetési ős — a `position: sticky` fejléc ezért már
   nyugalmi állapotban RÁÜLT az első adatsorra (mérve: 83 px átfedés). Nyolc
   sornál a ragadós fejléc nem is szükséges, a fejléc mindig a képernyőn van a
   táblázat elejével együtt.

   768 px ALATT a rács KÁRTYÁKRA bomlik. A `<table>` szemantika megmarad; a
   cellák a `data-cimke` attribútumukból kapnak látható feliratot, tehát nem
   kell a tartalmat megkettőzni a markupban.
   -------------------------------------------------------------------------- */

.rsv-kulonbseg-tablaburok {
    /*
     * A táblázat SOHA nem lóghat ki a burokból: ha egy hosszú cella mégis
     * szélesebbre feszítené, a burok görget — nem a lap.
     */
    overflow-x: auto;
    border-radius: var(--rsv-radius-lg);
}

.rsv-kulonbseg-tabla {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.rsv-kulonbseg-tabla__cimke {
    margin-bottom: var(--rsv-ter-4);
    font-size: var(--rsv-meret-lead);
    font-weight: 600;
    color: var(--rsv-brand-dark);
    text-align: left;
    caption-side: top;
}

/* A fejléc bal felső sarkában álló szó csak képernyőolvasónak szól. */
.rsv-kulonbseg-rejtett {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.rsv-kulonbseg-tabla__fej {
    /*
     * A KÉT OSZLOP AZONOS SÚLYT KAP. Ez nem esztétikai döntés: a lap
     * kimondja, hogy nem versenyről van szó (`FELADAT.md` §1/10).
     */
    width: 34%;
    vertical-align: bottom;
    font-size: var(--rsv-meret-kicsi);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--rsv-brand-primary);
}

.rsv-kulonbseg-tabla__jel {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-bottom: var(--rsv-ter-2);
    border-radius: 50%;
    background: color-mix(in srgb, var(--rsv-brand-secondary) 12%, transparent);
    color: var(--rsv-brand-primary);
    --ikon-meret: 20px;
}

.rsv-kulonbseg-tabla__szempont {
    width: 32%;
    font-weight: 700;
    color: var(--rsv-brand-dark);
}

@media (min-width: 768px) {
    .rsv-kulonbseg-tabla thead th {
        padding: var(--rsv-ter-4) var(--rsv-ter-4) var(--rsv-ter-4) 0;
        border-bottom: 2px solid color-mix(in srgb, var(--rsv-brand-secondary) 34%, transparent);
        vertical-align: bottom;
    }

    .rsv-kulonbseg-tabla tbody th,
    .rsv-kulonbseg-tabla tbody td {
        padding: var(--rsv-ter-4) var(--rsv-ter-4) var(--rsv-ter-4) 0;
        border-bottom: 1px solid var(--rsv-border-default);
        vertical-align: top;
        line-height: var(--rsv-sormagassag-torzs);
    }

    .rsv-kulonbseg-tabla tbody tr:last-child th,
    .rsv-kulonbseg-tabla tbody tr:last-child td {
        border-bottom: 0;
    }

    /* Finom sávozás: nyolc soron át segít a szemnek a sorban maradni. */
    .rsv-kulonbseg-tabla tbody tr:nth-child(even) th,
    .rsv-kulonbseg-tabla tbody tr:nth-child(even) td {
        background: color-mix(in srgb, var(--rsv-brand-secondary) 5%, transparent);
    }
}

@media (max-width: 767px) {
    /*
     * MOBIL: KÁRTYÁKRA BOMLÓ TÁBLÁZAT.
     *
     * A `display` átírása megszünteti a natív táblázat-megjelenítést, de a
     * `<table>`/`<th>`/`<td>` SZEMANTIKA a markupban marad — a képernyőolvasó
     * a `scope` attribútumok alapján továbbra is táblázatként olvassa.
     */
    .rsv-kulonbseg-tabla,
    .rsv-kulonbseg-tabla tbody,
    .rsv-kulonbseg-tabla tr,
    .rsv-kulonbseg-tabla th,
    .rsv-kulonbseg-tabla td {
        display: block;
    }

    /* A fejlécsor mobilon felesleges: minden cella maga viszi a címkéjét. */
    .rsv-kulonbseg-tabla thead {
        display: none;
    }

    .rsv-kulonbseg-tabla tr {
        margin-bottom: var(--rsv-ter-4);
        padding: var(--rsv-ter-5);
        background: var(--rsv-surface-card);
        border-radius: var(--rsv-radius-lg);
        box-shadow: inset 0 0 0 1px var(--rsv-border-default);
    }

    .rsv-kulonbseg-tabla tr:last-child { margin-bottom: 0; }

    .rsv-kulonbseg-tabla tbody th {
        width: auto;
        margin-bottom: var(--rsv-ter-3);
        padding-bottom: var(--rsv-ter-3);
        border-bottom: 1px solid var(--rsv-border-default);
    }

    .rsv-kulonbseg-tabla tbody td {
        line-height: var(--rsv-sormagassag-torzs);
    }

    .rsv-kulonbseg-tabla tbody td + td {
        margin-top: var(--rsv-ter-4);
    }

    /*
     * A LÁTHATÓ OSZLOPCÍMKE a cella `data-cimke` attribútumából jön. Így a
     * markupban nem kell megkettőzni a szöveget, és a két megjelenés nem
     * csúszhat el egymástól.
     */
    .rsv-kulonbseg-tabla tbody td::before {
        content: attr(data-cimke);
        display: block;
        margin-bottom: var(--rsv-ter-1);
        font-size: var(--rsv-meret-kicsi);
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--rsv-brand-primary);
    }
}

/* 25.6 Felsorolás
   --------------------------------------------------------------------------
   A lapon EGYETLEN felsorolás van (8. szakasz), és az SZEMPONTOKAT sorol, nem
   teljesítendő lépéseket — ezért semleges pont, nem pipa. A pipa itt azt
   sugallná, hogy a szülőnek kell végigmennie a listán, holott a copy éppen
   azt mondja, hogy ez orvosi mérlegelés (`FELADAT.md` §1/8).
   -------------------------------------------------------------------------- */

.rsv-kulonbseg-lista {
    list-style: none;
    margin: 0 0 clamp(var(--rsv-ter-5), 2.4vw, var(--rsv-ter-6));
    padding: 0;
    display: grid;
    gap: var(--rsv-ter-3);
}

.rsv-kulonbseg-lista li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--rsv-ter-3);
    align-items: start;
    line-height: var(--rsv-sormagassag-torzs);
}

.rsv-kulonbseg-lista__jel {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    /* Az első sor közepére igazítva — nem a szöveg tetejére. */
    margin-top: calc((1em * var(--rsv-sormagassag-torzs) - 24px) / 2);
    border-radius: 50%;
    background: color-mix(in srgb, var(--rsv-brand-secondary) 12%, transparent);
    color: var(--rsv-brand-primary);
}

.rsv-kulonbseg-lista__jel::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.rsv-kulonbseg-listacim {
    margin-bottom: var(--rsv-ter-4);
    font-weight: 700;
    color: var(--rsv-brand-dark);
}

/* 25.7 Záró mondatok
   --------------------------------------------------------------------------
   A 9. szakasz záró mondata MAGA A GUARDRAIL (`FELADAT.md` §1/8): kimondja,
   hogy az oldal szándékosan nem ad gesztációs hetet vagy döntési algoritmust.
   Ezért kap kiemelt alakot — de MÁRKASZÍNŰ jelölősávval, nem
   figyelmeztetéssel: ez határkijelölés, nem riasztás.
   -------------------------------------------------------------------------- */

.rsv-kulonbseg-zaras {
    font-weight: 600;
    color: var(--rsv-brand-dark);
}

.rsv-kulonbseg-zaras--hangsulyos {
    margin-top: clamp(var(--rsv-ter-4), 2vw, var(--rsv-ter-5));
    padding: var(--rsv-ter-4) var(--rsv-ter-5);
    background: color-mix(in srgb, var(--rsv-brand-secondary) 8%, transparent);
    border-left: 4px solid var(--rsv-brand-secondary);
    border-radius: var(--rsv-radius-sm);
}

/* 25.8 Az 5. szakasz útvonalsorai
   --------------------------------------------------------------------------
   A `COPY.md` első két bekezdése nyilakkal írt ÚTVONALAT ír le. Ez FOLYAMAT,
   nem rangsor — a nyilak a copy saját jelölései, ezért változatlanok. A saját
   alak csak annyit tesz, hogy vizuálisan elválik a magyarázó bekezdésektől.
   -------------------------------------------------------------------------- */

.rsv-kulonbseg-utvonal {
    padding: var(--rsv-ter-4) var(--rsv-ter-5);
    background: color-mix(in srgb, var(--rsv-brand-secondary) 6%, transparent);
    border-radius: var(--rsv-radius-sm);
    line-height: var(--rsv-sormagassag-torzs);
}

.rsv-kulonbseg-utvonal + .rsv-kulonbseg-utvonal {
    margin-top: calc(var(--rsv-ter-3) * -1 + var(--rsv-ter-4));
}

/* 25.9 Kiemelt panelek
   --------------------------------------------------------------------------
   A lezárt `.rsv-alap-kiemelt` komponenst használják, tehát mindig LÁTHATÓK.
   A KÉT KÖTELEZŐ, SZÓ SZERINTI MONDAT (`FELADAT.md` §1/1 és §1/2) is ezt
   kapja, és nem kerül összecsukható elembe.
   -------------------------------------------------------------------------- */

.rsv-kulonbseg-kiemelt {
    margin-top: clamp(var(--rsv-ter-6), 3vw, var(--rsv-ter-7));
}

/* A 7. szakasz panelén belül feszesebb a köz: ott nincs rács fölötte. */
.rsv-kulonbseg-zaropanel .rsv-kulonbseg-kiemelt {
    margin-top: clamp(var(--rsv-ter-5), 2.6vw, var(--rsv-ter-6));
}

/* 25.10 A 7. szakasz — az egyetlen kép nélküli blokk
   --------------------------------------------------------------------------
   A csomag ehhez a szakaszhoz nem ad assetet, és új vizuált tervezni tilos
   (`FELADAT.md` §2/1). Kétoszlopos rács helyett olvasási szélességű,
   középre zárt editorial panel: így nem marad üres féloldal.

   A panel NEM kap „nyertes / vesztes" vizuális jelölést — a szakasz éppen a
   rangsorolás ellen szól (§1/10).
   -------------------------------------------------------------------------- */

.rsv-kulonbseg-zaropanel {
    padding: clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-8));
    background: var(--rsv-brand-bare);
    border-radius: var(--rsv-radius-lg);
    box-shadow: inset 0 0 0 1px var(--rsv-border-default);
}

.rsv-szekcio--bare .rsv-kulonbseg-zaropanel {
    background: var(--rsv-surface-card);
}

.rsv-kulonbseg-zaropanel > :last-child { margin-bottom: 0; }

/* 25.11 Routing kártyák — a lezárt komponens egy extra sorral
   --------------------------------------------------------------------------
   A `FELADAT.md` §4 négy kártyát ír elő kérdéssel és céllal; a `COPY.md` 11.
   szakasza ugyanezekhez címkét is ad. MIND A NÉGY kártyán a kettő ugyanaz a
   mondat (a címke a kérdés nagybetűs alakja), ezért a sablon egyszer írja ki,
   a címke sorában.
   -------------------------------------------------------------------------- */

.rsv-kulonbseg-tovabb__cimke {
    font-size: var(--rsv-meret-kicsi);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rsv-brand-primary);
}

/* 25.12 Mozgás
   --------------------------------------------------------------------------
   Nincs saját, folyamatos ambient animáció: a belépő mozgás a közös
   `data-rsv-belep` réteg, amelyet a 35. szakasz `prefers-reduced-motion`
   fallbackje kapcsol ki.
   -------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
    .rsv-kulonbseg-par__elem {
        transition: box-shadow .25s ease;
    }
}


/* --------------------------------------------------------------------------
   26. A `/maternalis-immunizacio` ALOLDAL — „Maternális RSV-immunizáció"

   KANONIKUS FORRÁS: a `MATERNALIS_IMMUNIZACIO_PAGE_v1` csomag `FELADAT.md` és
   `COPY.md` fájlja. A kilenc raszter a csomag `assets/` mappájából való; a
   beépítés előtti §28-mérés MEGFELELT (hero 1400x900, szekciókép 900x700,
   kitöltés 88,5–99,8%, beégetett szöveg és UI-elem nincs).

   NÉGY ASSET ÁT LETT NEVEZVE a forrásmappában (projektgazdai jóváhagyással,
   2026-08-30): a fájlnevek négyes körben el voltak csúszva a képek TARTALMÁHOZ
   képest. Csak átnevezés történt — kép nem lett vágva vagy újragenerálva.

   ===========================================================================
    MI ÖRÖKÖLT ÉS MI ÚJ
   ===========================================================================
   A page-hero, az aloldali szekcióritmus, a képmélység, az insight-panel, a
   routing kártyák, a szószedet és a forrásblokk a 13. szakasz `.rsv-alap*`
   készletéből jön — ez a szakasz KIZÁRÓLAG az oldal SAJÁTJÁT tartalmazza.
   Új színpaletta nem keletkezett: minden érték a 2. szakasz tokenjeiből vagy
   azok `color-mix()`-éből származik, és a szakaszban egyetlen nyers hexérték
   sincs.

   ===========================================================================
    A HÉT KÉP NÉLKÜLI SZAKASZ
   ===========================================================================
   A `COPY.md` tizenöt tartalmi szakaszából héthez NEM tartozik kép, és
   kettőnél ezt a `FELADAT.md` KI IS KÖTI:

     - `.rsv-anyai-hetek` ...... a 24–36 / 28-tól / 32–36 összehasonlítás.
       §2/7: HTML/CSS editorial blokk, NEM raster infografika. Három
       EGYENRANGÚ hasáb;
     - `.rsv-anyai-jelzes` ..... a koraszülési biztonsági jelzés. §2/9: TILOS
       drámai baba- vagy PIC-vizuál — tárgyilagos info-panel, sürgősségi szín
       nélkül;
     - `.rsv-anyai-adatpanel` .. az RSVpreF-adatlap és a valóélet-blokk;
     - `.rsv-anyai-editorial` .. szöveg + panel mellérendelve (6. és 13.);
     - `.rsv-anyai-kerdespanel` a szülő kérdéslistája az orvoshoz (15.).

   ===========================================================================
    A MATISSE-SZÁMOK SOHA NEM KÉPEN
   ===========================================================================
   A `FELADAT.md` §2/8 kiköti, hogy a 81,8% és a 69,4% HTML-SZÖVEGKÉNT
   jelenjen meg. A `.rsv-anyai-eredmeny` ezért kiemelt SZÖVEGBLOKK — nem
   grafika, nem `background-image`, és nem tartalmaz beégetett értéket.

   ===========================================================================
    EZ NEM TRIÁZS-OLDAL
   ===========================================================================
   Sürgősségi szín (`--rsv-urgent`, `--rsv-warning`) itt nem használható
   (kézikönyv §13). A biztonságossági és a koraszülési szakasz is MÁRKASZÍNŰ
   jelölést kap: a `FELADAT.md` §1/7 tárgyilagosságot ír elő, indokolatlan
   félelemkeltés nélkül.
   -------------------------------------------------------------------------- */

/* 26.1 Page hero
   --------------------------------------------------------------------------
   A hero mastere SZÉLES, fekvő kompozíció (1400x900), a szövegoszlop pedig
   HOSSZÚ, kettőspontos H1-et, leadet, egy bekezdést ÉS egy CTA-t visz —
   ezért a vizuál középre igazodik, és nem emelkedik a morzsamenü sávjába.
   -------------------------------------------------------------------------- */

.rsv-alaphero--anyai .rsv-alaphero__lead {
    margin-bottom: var(--rsv-ter-5);
}

.rsv-alaphero--anyai .rsv-gombsor {
    margin-top: clamp(var(--rsv-ter-5), 2.6vw, var(--rsv-ter-6));
}

@media (min-width: 992px) {
    .rsv-alaphero--anyai .rsv-alaphero__racs {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .rsv-alaphero--anyai .rsv-alaphero__vizual {
        align-self: center;
        margin-top: 0;
    }
}

/* A hero utáni kötelező kiemelés a hajtás közelében áll, ezért feszes szekció. */
.rsv-anyai-nyito {
    padding-block: clamp(var(--rsv-ter-6), 3vw, var(--rsv-ter-7));
}

.rsv-anyai-nyito .rsv-anyai-kiemelt {
    margin-top: 0;
}

/* 26.2 A csomag képei — nincs dupla keret és nincs dupla árnyék
   --------------------------------------------------------------------------
   A `<figure>` sem keretet, sem hátteret, sem árnyékot nem kap: a mélységet a
   lezárt `.rsv-alap-vizual` adja, a heróban pedig a `.rsv-alaphero__vizual`
   ugyanaz — a kettőt halmozni nem szabad.

   CROP TILOS (`FELADAT.md` §2/2): minden kép `object-fit: contain`, és sehol
   nincs `cover`, `clip-path` vagy negatív inset.
   -------------------------------------------------------------------------- */

.rsv-anyai-vizual {
    margin: 0;
    line-height: 0;
}

.rsv-anyai-vizual img {
    object-fit: contain;
}

/* 26.3 Kétoszlopos szakaszok
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
    .rsv-anyai-ketto { align-items: start; }

    .rsv-anyai-ketto .rsv-ketto__vizual { align-self: center; }
}

.rsv-anyai-ketto .rsv-ketto__szoveg > :last-child { margin-bottom: 0; }

/*
 * AZ 1. SZAKASZ H2-JE MAGA EGY ÚTVONAL, nyilakkal. Hosszabb a szokásosnál, és
 * a nyilak körül törhet — ezért kap valamivel feszesebb sormagasságot és
 * `balance` tördelést, hogy ne essen szét egyszavas sorokra.
 */
.rsv-anyai-utcim {
    line-height: 1.25;
    text-wrap: balance;
}

/* 26.4 Felsorolások — egy komponens, három változat
   --------------------------------------------------------------------------
   A KÜLÖNBSÉG JELENTÉSBELI:

     - `--szam` ... valódi SORREND (az 1. szakasz öt lépése), a markupban
                    `<ol>`, és a jel a sorszám;
     - `--kerdes`  a szülő által FELTEHETŐ kérdések (15. szakasz) — kérdésikon,
                   nem pipa: ezeket nem kipipálni kell, hanem feltenni;
     - alap ....... jellemzők, szempontok, teendők sorrend nélkül.
   -------------------------------------------------------------------------- */

.rsv-anyai-lista {
    list-style: none;

    /*
     * ALSÓ TÉRKÖZ KELL: több szakaszban bekezdés, záró mondat vagy gombsor
     * KÖVETI a felsorolást. Ahol a lista az utolsó elem, ott a szülő
     * `> :last-child` szabálya viszi el.
     */
    margin: 0 0 clamp(var(--rsv-ter-5), 2.4vw, var(--rsv-ter-6));
    padding: 0;
    display: grid;
    gap: var(--rsv-ter-3);
}

.rsv-anyai-lista li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--rsv-ter-3);
    align-items: start;
    line-height: var(--rsv-sormagassag-torzs);
}

.rsv-anyai-lista__jel {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    /* Az első sor közepére igazítva — nem a szöveg tetejére. */
    margin-top: calc((1em * var(--rsv-sormagassag-torzs) - 24px) / 2);
    border-radius: 50%;
    background: color-mix(in srgb, var(--rsv-brand-secondary) 12%, transparent);
    color: var(--rsv-brand-primary);
}

.rsv-anyai-lista:not(.rsv-anyai-lista--szam):not(.rsv-anyai-lista--kerdes) .rsv-anyai-lista__jel::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

/*
 * A SORSZÁM MAGA A JEL. A számot a sablon írja ki (a `<ol>` saját markere
 * rejtve marad), így a bélyeg mérete és igazítása azonos a másik két
 * változatéval — nem keletkezett második listarendszer.
 */
.rsv-anyai-lista--szam .rsv-anyai-lista__jel {
    font-size: var(--rsv-meret-kicsi);
    font-weight: 700;
    line-height: 1;
    background: var(--rsv-brand-primary);
    color: #fff;
}

.rsv-anyai-lista--kerdes .rsv-anyai-lista__jel { --ikon-meret: 15px; }

/* A felsorolás fölötti, felvezető sor. */
.rsv-anyai-listacim {
    margin-bottom: var(--rsv-ter-4);
    font-weight: 700;
    color: var(--rsv-brand-dark);
}

/* Záró, összefoglaló mondat — hangsúlyos, de nem figyelmeztetés. */
.rsv-anyai-zaras {
    font-weight: 600;
    color: var(--rsv-brand-dark);
}

/*
 * HÁROM ZÁRÓ MONDAT KAP KIEMELT ALAKOT, és mindhárom GUARDRAIL:
 *   - a 4. szakaszé az aktuális magyar ajánlás ellenőrzésére szólít fel;
 *   - a 7. szakaszé rögzíti a MATISSE végpontját és időtávját;
 *   - a 13. szakaszé kimondja, hogy az oldal nem ad döntési algoritmust.
 *
 * MÁRKASZÍNŰ jelölősáv, nem figyelmeztetés: ezek határkijelölések.
 */
.rsv-anyai-zaras--hangsulyos {
    margin-top: clamp(var(--rsv-ter-4), 2vw, var(--rsv-ter-5));
    padding: var(--rsv-ter-4) var(--rsv-ter-5);
    background: color-mix(in srgb, var(--rsv-brand-secondary) 8%, transparent);
    border-left: 4px solid var(--rsv-brand-secondary);
    border-radius: var(--rsv-radius-sm);
}

/* 26.5 Kiemelt panelek
   --------------------------------------------------------------------------
   A lezárt `.rsv-alap-kiemelt` komponenst használják, tehát mindig LÁTHATÓK.
   A hero KÖTELEZŐ, szó szerinti mondata is ezt kapja (`FELADAT.md` §1/2).

   KÉTFÉLE HELYEN ÁLLNAK: a szakasz végén, teljes szélességben; vagy a
   szövegoszlopON BELÜL (4. szakasz), ahol az állítás nem szakadhat el a
   bekezdésektől.
   -------------------------------------------------------------------------- */

.rsv-anyai-kiemelt {
    margin-top: clamp(var(--rsv-ter-6), 3vw, var(--rsv-ter-7));
}

.rsv-ketto__szoveg .rsv-anyai-kiemelt,
.rsv-anyai-jelzes .rsv-anyai-kiemelt,
.rsv-anyai-kerdespanel .rsv-anyai-kiemelt {
    margin-top: clamp(var(--rsv-ter-4), 2vw, var(--rsv-ter-5));
    margin-bottom: clamp(var(--rsv-ter-5), 2.4vw, var(--rsv-ter-6));
}

.rsv-anyai-jelzes .rsv-anyai-kiemelt,
.rsv-anyai-kerdespanel .rsv-anyai-kiemelt {
    margin-bottom: 0;
}

/* 26.6 A MATISSE-eredmény — kiemelt SZÖVEG, nem grafika
   --------------------------------------------------------------------------
   `FELADAT.md` §2/8: a százalékok HTML-szövegként jelenjenek meg. Ez a blokk
   ezért tipográfiai kiemelés — nincs benne `background-image`, ikon-számláló
   vagy bármilyen grafikus értékábrázolás.

   A MONDAT EGYBEN MARAD (§1/5): a 81,8% és a 69,4% a végponttal és az
   időablakkal EGYÜTT áll, ezért nem bontjuk fel „statisztikai kártyákra" —
   az szétszakítaná a számot a kontextusától.
   -------------------------------------------------------------------------- */

.rsv-anyai-eredmeny {
    max-width: 78ch;
    margin: clamp(var(--rsv-ter-6), 3vw, var(--rsv-ter-7)) 0 0;
    padding: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-6));
    font-size: var(--rsv-meret-lead);
    font-weight: 600;
    line-height: var(--rsv-sormagassag-torzs);
    color: var(--rsv-brand-dark);
    background: var(--rsv-surface-card);
    border-radius: var(--rsv-radius-lg);
    box-shadow: inset 0 0 0 1px var(--rsv-border-default);
}

.rsv-szekcio--feher .rsv-anyai-eredmeny {
    background: var(--rsv-brand-bare);
}

/* 26.7 A 3. és a 8. szakasz — adatlapszerű panel
   --------------------------------------------------------------------------
   Olvasási szélességű panel: az RSVpreF jellemzői és a valóélet-adatok
   szövegblokkok, nem igényelnek kétoszlopos rácsot.
   -------------------------------------------------------------------------- */

.rsv-anyai-adatpanel {
    padding: clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-8));
    background: var(--rsv-surface-card);
    border-radius: var(--rsv-radius-lg);
    box-shadow: inset 0 0 0 1px var(--rsv-border-default);
}

.rsv-szekcio--feher .rsv-anyai-adatpanel {
    background: var(--rsv-brand-bare);
}

.rsv-anyai-adatpanel > :last-child { margin-bottom: 0; }

/* 26.8 Az 5. szakasz — a három terhességi hét-ajánlás
   --------------------------------------------------------------------------
   `FELADAT.md` §2/7: HTML/CSS editorial blokk, NEM raster infografika.

   A HÁROM HASÁB EGYENRANGÚ (§1/4): azonos felület, azonos jelölő, azonos
   tipográfia. Nincs köztük nyíl, „vs" vagy rangsorolás, és egyik sem kap
   „helyes" kiemelést — a szakasz éppen azt mondja ki, hogy nem
   forrásellentmondásról van szó, hanem háromféle dokumentumtípusról.
   -------------------------------------------------------------------------- */

.rsv-anyai-hetek {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: clamp(var(--rsv-ter-4), 2.4vw, var(--rsv-ter-6));
}

@media (min-width: 768px) {
    .rsv-anyai-hetek { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.rsv-anyai-hetek__elem {
    display: grid;
    gap: var(--rsv-ter-3);
    align-content: start;
    padding: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-6));
    background: var(--rsv-surface-card);
    border-radius: var(--rsv-radius-lg);
    box-shadow: inset 0 0 0 1px var(--rsv-border-default);
}

.rsv-anyai-hetek__elem > :last-child { margin-bottom: 0; }

.rsv-anyai-hetek__jel {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--rsv-brand-secondary) 12%, transparent);
    color: var(--rsv-brand-primary);
    --ikon-meret: 26px;
}

.rsv-anyai-hetek__cim {
    margin: 0;
    font-size: var(--rsv-meret-h4);
    color: var(--rsv-brand-dark);
}

.rsv-anyai-hetek__zaras {
    margin-top: clamp(var(--rsv-ter-5), 2.6vw, var(--rsv-ter-6));
    max-width: 78ch;
}

.rsv-anyai-hetek__zaras > :last-child { margin-bottom: 0; }

/* 26.9 A 10. szakasz — a koraszülési biztonsági jelzés
   --------------------------------------------------------------------------
   `FELADAT.md` §2/9: TILOS drámai baba- vagy PIC-vizuál. Ezért nincs képe, és
   a panel tárgyilagos: olvasási szélesség, márkaszínű bal jelölősáv,
   SÜRGŐSSÉGI SZÍN NÉLKÜL.

   A `--rsv-urgent` és a `--rsv-warning` itt szándékosan nem szerepel: ez egy
   vizsgált biztonsági JEL bemutatása, nem figyelmeztetés (§1/6, §1/7).
   -------------------------------------------------------------------------- */

.rsv-anyai-jelzes {
    padding: clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-8));
    background: var(--rsv-brand-bare);
    border-left: 4px solid var(--rsv-brand-secondary);
    border-radius: var(--rsv-radius-lg);
}

.rsv-szekcio--bare .rsv-anyai-jelzes {
    background: var(--rsv-surface-card);
}

.rsv-anyai-jelzes > :last-child { margin-bottom: 0; }

/* 26.10 A 6. és a 13. szakasz — szöveg és panel mellérendelve
   -------------------------------------------------------------------------- */

.rsv-anyai-editorial {
    display: grid;
    gap: clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-8));
    align-items: start;
}

.rsv-anyai-editorial > * { min-width: 0; }

.rsv-anyai-editorial__szoveg > :last-child { margin-bottom: 0; }

@media (min-width: 992px) {
    .rsv-anyai-editorial {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    }

    .rsv-anyai-editorial--sulyos {
        grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    }
}

.rsv-anyai-panel {
    padding: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-7));
    background: var(--rsv-brand-bare);
    border-radius: var(--rsv-radius-lg);
    box-shadow: inset 0 0 0 1px var(--rsv-border-default);
}

/*
 * EGYETLEN PROPERTY FORDÍTJA MEG A FELÜLETET: levendula szekción fehér panel,
 * fehér szekción levendula — így nem kellett két párhuzamos panelkomponens.
 */
.rsv-szekcio--bare .rsv-anyai-panel {
    background: var(--rsv-surface-card);
}

.rsv-anyai-panel > :last-child { margin-bottom: 0; }

.rsv-anyai-gombsor {
    margin-top: clamp(var(--rsv-ter-5), 2.6vw, var(--rsv-ter-6));
}

/* 26.11 A 15. szakasz — kérdéslista az orvosi beszélgetéshez
   --------------------------------------------------------------------------
   A szülő kezébe adott eszköz, nem döntési algoritmus (`FELADAT.md` §1/9).
   Olvasási szélességű panel; a nyolc kérdés hosszú, ezért 992 px felett két
   oszlopban fut, hogy ne legyen belőle egyetlen hosszú oszlop.
   -------------------------------------------------------------------------- */

.rsv-anyai-kerdespanel {
    padding: clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-8));
    background: var(--rsv-brand-bare);
    border-radius: var(--rsv-radius-lg);
    box-shadow: inset 0 0 0 1px var(--rsv-border-default);
}

.rsv-szekcio--bare .rsv-anyai-kerdespanel {
    background: var(--rsv-surface-card);
}

.rsv-anyai-kerdespanel > :last-child { margin-bottom: 0; }

@media (min-width: 992px) {
    .rsv-anyai-kerdespanel .rsv-anyai-lista--kerdes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-7));
    }
}

/* 26.12 Routing kártyák — a lezárt komponens két extra sorral
   --------------------------------------------------------------------------
   A `FELADAT.md` §4 négy kártyát ír elő kérdéssel és céllal; a `COPY.md` 16.
   szakasza ugyanezekhez címkét és egy leíró mondatot is ad. Mindkét forrás
   jóváhagyott, ezért MINDKETTŐ megjelenik — a lezárt `.rsv-alap-tovabb`
   szerkezete változatlan.
   -------------------------------------------------------------------------- */

.rsv-anyai-tovabb__cimke {
    font-size: var(--rsv-meret-kicsi);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rsv-brand-primary);
}

.rsv-anyai-tovabb__leiras {
    margin-top: var(--rsv-ter-2);
    font-size: var(--rsv-meret-kicsi);
    line-height: var(--rsv-sormagassag-torzs);
    color: var(--rsv-text-secondary);
}

/* 26.13 Mozgás
   --------------------------------------------------------------------------
   Nincs saját, folyamatos ambient animáció: a belépő mozgás a közös
   `data-rsv-belep` réteg, amelyet a 35. szakasz `prefers-reduced-motion`
   fallbackje kapcsol ki.
   -------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
    .rsv-anyai-hetek__elem {
        transition: box-shadow .25s ease;
    }
}


/* --------------------------------------------------------------------------
   27. A `/csecsemokori-passziv-immunizacio` ALOLDAL

   KANONIKUS FORRÁS: a `CSECSEMOKORI_PASSZIV_IMMUNIZACIO_PAGE_v1` csomag
   `FELADAT.md` és `COPY.md` fájlja. A tíz raszter a csomag `assets/`
   mappájából való; a beépítés előtti §28-mérés MEGFELELT (hero 1400x900,
   szekciókép 900x700, kitöltés 88,1–99,8%, beégetett szöveg, UI-elem és
   watermark sehol).

   ===========================================================================
    MI ÖRÖKÖLT ÉS MI ÚJ
   ===========================================================================
   A page-hero, az aloldali szekcióritmus, a képmélység, az insight-panel, a
   routing kártyák, a szószedet és a forrásblokk a 13. szakasz `.rsv-alap*`
   készletéből jön — ez a szakasz KIZÁRÓLAG az oldal SAJÁTJÁT tartalmazza.
   Új színpaletta nem keletkezett: minden érték a 2. szakasz tokenjeiből vagy
   azok `color-mix()`-éből származik, és a szakaszban egyetlen nyers hexérték
   sincs.

   ===========================================================================
    A SZÁMOK HTML-BEN, NEM KÉPEN
   ===========================================================================
   A `FELADAT.md` §3/6 kiköti, hogy a statisztikák és százalékok HTML/CSS-ben
   jelenjenek meg. A lap három helyen közöl arányokat, és mindhárom ugyanazt a
   `.rsv-passziv-arany` sort használja:

     - 10. szakasz — a két klinikai vizsgálat, `.rsv-passziv-vizsgalat`
       blokkokban, VILÁGOSAN ELKÜLÖNÍTVE (§5/6);
     - 11. szakasz — a hospitalizációs arányok;
     - 13. szakasz — a jelentett reakciók gyakorisága.

   EDITORIAL INFO-BLOKK, NEM MARKETING-KÁRTYA (§5/5). Ezért az érték nem
   kap „hero-számot": nagyobb a törzsszövegnél, de nem uralja a blokkot, és
   MINDIG mellette áll a címkéje. A végpont mondata a blokkok ELŐTT fut.

   ===========================================================================
    EZ NEM TRIÁZS-OLDAL
   ===========================================================================
   Sürgősségi szín (`--rsv-urgent`, `--rsv-warning`) itt nem használható
   (kézikönyv §13). A biztonságossági blokk is márkaszínű: tárgyilagos
   tájékoztatás, nem figyelmeztetés.
   -------------------------------------------------------------------------- */

/* 27.1 Page hero
   --------------------------------------------------------------------------
   A hero mastere SZÉLES, fekvő kompozíció (1400x900), a szövegoszlop pedig
   hosszú, kettőspontos H1-et, leadet, két bekezdést ÉS egy CTA-t visz —
   ezért a vizuál középre igazodik, és nem emelkedik a morzsamenü sávjába.
   -------------------------------------------------------------------------- */

.rsv-alaphero--passziv .rsv-alaphero__lead {
    margin-bottom: var(--rsv-ter-5);
}

.rsv-alaphero--passziv .rsv-gombsor {
    margin-top: clamp(var(--rsv-ter-5), 2.6vw, var(--rsv-ter-6));
}

@media (min-width: 992px) {
    .rsv-alaphero--passziv .rsv-alaphero__racs {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .rsv-alaphero--passziv .rsv-alaphero__vizual {
        align-self: center;
        margin-top: 0;
    }
}

/* A hero utáni kötelező kiemelés a hajtás közelében áll, ezért feszes szekció. */
.rsv-passziv-nyito {
    padding-block: clamp(var(--rsv-ter-6), 3vw, var(--rsv-ter-7));
}

.rsv-passziv-nyito .rsv-passziv-kiemelt {
    margin-top: 0;
}

/* 27.2 A csomag képei — nincs dupla keret és nincs dupla árnyék
   --------------------------------------------------------------------------
   A `<figure>` sem keretet, sem hátteret, sem árnyékot nem kap: a mélységet a
   lezárt `.rsv-alap-vizual` adja, a heróban pedig a `.rsv-alaphero__vizual`
   ugyanaz — a kettőt halmozni nem szabad.

   CROP NINCS: minden kép `object-fit: contain`, és sehol nincs `cover`,
   `clip-path` vagy negatív inset.

   A `passziv-beadas` KÉTSZER jelenik meg (8. és 14. szakasz, `FELADAT.md`
   §4), ugyanabból a méretkészletből — külön szabály nem kell hozzá.
   -------------------------------------------------------------------------- */

.rsv-passziv-vizual {
    margin: 0;
    line-height: 0;
}

.rsv-passziv-vizual img {
    object-fit: contain;
}

/* 27.3 Kétoszlopos szakaszok
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
    .rsv-passziv-ketto { align-items: start; }

    .rsv-passziv-ketto .rsv-ketto__vizual { align-self: center; }
}

.rsv-passziv-ketto .rsv-ketto__szoveg > :last-child { margin-bottom: 0; }

/* 27.4 Felsorolások
   --------------------------------------------------------------------------
   Ezen a lapon MINDEN felsorolás jellemzőt, lehetőséget vagy szempontot sorol
   — nem teljesítendő teendőlistát —, ezért egységesen semleges pontot kap.
   Pipa itt félrevezető lenne: nem a szülő „teljesíti" ezeket.
   -------------------------------------------------------------------------- */

.rsv-passziv-lista {
    list-style: none;

    /*
     * ALSÓ TÉRKÖZ KELL: több szakaszban bekezdés, második felsorolás vagy
     * gombsor KÖVETI. Ahol a lista az utolsó elem, ott a szülő `> :last-child`
     * szabálya viszi el.
     */
    margin: 0 0 clamp(var(--rsv-ter-5), 2.4vw, var(--rsv-ter-6));
    padding: 0;
    display: grid;
    gap: var(--rsv-ter-3);
}

.rsv-passziv-lista li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--rsv-ter-3);
    align-items: start;
    line-height: var(--rsv-sormagassag-torzs);
}

.rsv-passziv-lista__jel {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    /* Az első sor közepére igazítva — nem a szöveg tetejére. */
    margin-top: calc((1em * var(--rsv-sormagassag-torzs) - 24px) / 2);
    border-radius: 50%;
    background: color-mix(in srgb, var(--rsv-brand-secondary) 12%, transparent);
    color: var(--rsv-brand-primary);
}

.rsv-passziv-lista__jel::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

/* A felsorolás fölötti, felvezető sor. */
.rsv-passziv-listacim {
    margin-bottom: var(--rsv-ter-4);
    font-weight: 700;
    color: var(--rsv-brand-dark);
}

/* Záró, összefoglaló mondat — hangsúlyos, de nem figyelmeztetés. */
.rsv-passziv-zaras {
    font-weight: 600;
    color: var(--rsv-brand-dark);
}

/*
 * NÉGY ZÁRÓ MONDAT KAP KIEMELT ALAKOT, és mindegyik GUARDRAIL:
 *   - a 2. szakaszé kizárja az „általános immunerősítés" olvasatot;
 *   - a 7. szakaszé a védelem valódi célját mondja ki;
 *   - a 10. szakaszé rögzíti a vizsgálati végpontot és a követési időt;
 *   - a 18. szakaszé kimondja, hogy a magyar helyzetet nem rögzítjük itt.
 *
 * MÁRKASZÍNŰ jelölősáv, nem figyelmeztetés: ezek határkijelölések.
 */
.rsv-passziv-zaras--hangsulyos {
    margin-top: clamp(var(--rsv-ter-4), 2vw, var(--rsv-ter-5));
    padding: var(--rsv-ter-4) var(--rsv-ter-5);
    background: color-mix(in srgb, var(--rsv-brand-secondary) 8%, transparent);
    border-left: 4px solid var(--rsv-brand-secondary);
    border-radius: var(--rsv-radius-sm);
}

/* 27.5 Kiemelt panelek
   --------------------------------------------------------------------------
   A lezárt `.rsv-alap-kiemelt` komponenst használják, tehát mindig LÁTHATÓK.
   A hero kötelező mondata („A monoklonális antitest nem vakcina…") és a 9.
   szakasz kiemelése („Egyik sem vakcina.") is ezt kapja.
   -------------------------------------------------------------------------- */

.rsv-passziv-kiemelt {
    margin-top: clamp(var(--rsv-ter-6), 3vw, var(--rsv-ter-7));
}

.rsv-passziv-panel .rsv-passziv-kiemelt {
    margin-top: clamp(var(--rsv-ter-4), 2vw, var(--rsv-ter-5));
}

/* 27.6 Arányok — a lap három statisztikai blokkjának közös eleme
   --------------------------------------------------------------------------
   `FELADAT.md` §3/6: HTML/CSS, nem raszterkép. §5/5: EDITORIAL info-blokk,
   nem marketing-kártya.

   EZÉRT NINCS „HERO-SZÁM": az érték nagyobb a törzsszövegnél, de nem uralja a
   blokkot, és MINDIG mellette áll a címkéje. A két elem egy sorban, közös
   alapvonalon fut — így az érték nem olvasható a címkéjétől elszakítva.
   -------------------------------------------------------------------------- */

.rsv-passziv-aranyok {
    list-style: none;
    margin: 0 0 clamp(var(--rsv-ter-5), 2.4vw, var(--rsv-ter-6));
    padding: 0;
    display: grid;
    gap: var(--rsv-ter-3);
}

.rsv-passziv-arany {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--rsv-ter-4);
    align-items: baseline;
    padding: var(--rsv-ter-4) var(--rsv-ter-5);
    background: var(--rsv-brand-bare);
    border-radius: var(--rsv-radius-sm);
}

.rsv-szekcio--bare .rsv-passziv-arany {
    background: var(--rsv-surface-card);
}

/* A panelen belül a panel felülete a háttér, ezért a sor visszavált. */
.rsv-passziv-panel .rsv-passziv-arany {
    background: color-mix(in srgb, var(--rsv-brand-secondary) 7%, transparent);
}

.rsv-passziv-arany__ertek {
    min-width: 4ch;
    font-size: var(--rsv-meret-h4);
    font-weight: 700;
    line-height: 1.1;
    color: var(--rsv-brand-primary);
    font-variant-numeric: tabular-nums;
}

.rsv-passziv-arany__cimke {
    line-height: var(--rsv-sormagassag-torzs);
    color: var(--rsv-brand-dark);
}

/*
 * A VÉGPONT MONDATA a blokkok ELŐTT áll, és hangsúlyos: enélkül a számok
 * általános „védelmi százalékként" olvasódnának (`FELADAT.md` §2/6).
 */
.rsv-passziv-vegpont {
    font-weight: 600;
    color: var(--rsv-brand-dark);
}

/* 27.7 A 10. szakasz — a két klinikai vizsgálat
   --------------------------------------------------------------------------
   `FELADAT.md` §5/6: a két vizsgálati blokk maradjon VILÁGOSAN ELKÜLÖNÍTVE.
   Ezért két külön, saját felületű blokk, saját H3-mal — nem egyetlen közös
   listába olvasztva.

   A KÉT BLOKK EGYENRANGÚ: azonos felület, azonos tipográfia, nincs köztük
   irányjelölés. Más populációt vizsgáltak, nem „jobb és rosszabb" eredményt.
   -------------------------------------------------------------------------- */

.rsv-passziv-vizsgalatok {
    list-style: none;
    margin: clamp(var(--rsv-ter-5), 2.6vw, var(--rsv-ter-6)) 0 0;
    padding: 0;
    display: grid;
    gap: clamp(var(--rsv-ter-4), 2.4vw, var(--rsv-ter-6));
}

@media (min-width: 992px) {
    .rsv-passziv-vizsgalatok { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.rsv-passziv-vizsgalat {
    padding: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-6));
    background: var(--rsv-surface-card);
    border-radius: var(--rsv-radius-lg);
    box-shadow: inset 0 0 0 1px var(--rsv-border-default);
}

.rsv-szekcio--bare .rsv-passziv-vizsgalat {
    background: var(--rsv-brand-bare);
}

.rsv-passziv-vizsgalat > :last-child { margin-bottom: 0; }

.rsv-passziv-vizsgalat__cim {
    margin: 0 0 var(--rsv-ter-4);
    font-size: var(--rsv-meret-h4);
    color: var(--rsv-brand-dark);
}

.rsv-passziv-vizsgalat__elotag {
    margin-bottom: var(--rsv-ter-4);
    font-weight: 600;
    color: var(--rsv-brand-dark);
}

/* 27.8 A 2. szakasz — az F-fehérje lánc
   --------------------------------------------------------------------------
   A `COPY.md` nyilakkal írt lánca FOLYAMATOT ír le, nem rangsort. Számozott
   lépéssorként jelenik meg: a sorrendet a szerkezet adja, a négy szövegelem
   VÁLTOZATLAN.

   NAGY NYÍL-GLYPH NINCS — ugyanaz az elv, mint a lezárt `.rsv-alap-lanc`
   komponensnél: a sorrendet a sorszám és a köztük futó vonal jelzi.
   -------------------------------------------------------------------------- */

.rsv-passziv-lanccim {
    margin-top: clamp(var(--rsv-ter-6), 3vw, var(--rsv-ter-7));
}

.rsv-passziv-lanc {
    list-style: none;
    margin: 0 0 clamp(var(--rsv-ter-5), 2.4vw, var(--rsv-ter-6));
    padding: 0;
    display: grid;
    gap: var(--rsv-ter-3);
}

@media (min-width: 768px) {
    .rsv-passziv-lanc { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.rsv-passziv-lanc__elem {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--rsv-ter-3);
    align-items: center;
    padding: var(--rsv-ter-4) var(--rsv-ter-5);
    background: var(--rsv-surface-card);
    border-radius: var(--rsv-radius-sm);
    box-shadow: inset 0 0 0 1px var(--rsv-border-default);
}

.rsv-szekcio--feher .rsv-passziv-lanc__elem {
    background: var(--rsv-brand-bare);
}

@media (min-width: 768px) {
    .rsv-passziv-lanc__elem {
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
        gap: var(--rsv-ter-3);
    }
}

.rsv-passziv-lanc__szam {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: var(--rsv-meret-kicsi);
    font-weight: 700;
    line-height: 1;
    background: var(--rsv-brand-primary);
    color: #fff;
}

.rsv-passziv-lanc__szoveg {
    font-weight: 600;
    line-height: var(--rsv-sormagassag-torzs);
    color: var(--rsv-brand-dark);
}

/* 27.9 A nyolc kép nélküli szakasz — editorial panel
   --------------------------------------------------------------------------
   A `COPY.md` nyolc szakasznál `kep: nincs` értéket ad, és a `FELADAT.md` §4
   tiltja, hogy plusz illusztrációt találjunk ki. Ezek olvasási szélességű
   panelt kapnak — így nem marad üres féloldal, és a lap ritmusa is levegőhöz
   jut a képes blokkok között.
   -------------------------------------------------------------------------- */

.rsv-passziv-panel {
    padding: clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-8));
    background: var(--rsv-surface-card);
    border-radius: var(--rsv-radius-lg);
    box-shadow: inset 0 0 0 1px var(--rsv-border-default);
}

.rsv-szekcio--feher .rsv-passziv-panel {
    background: var(--rsv-brand-bare);
}

.rsv-passziv-panel > :last-child { margin-bottom: 0; }

/*
 * AZ 5. SZAKASZ IDÉZETE EGY LEEGYSZERŰSÍTÉST MUTAT, AMELYET A SZAKASZ CÁFOL.
 * Ezért vizuálisan is idézetként jelenik meg — dőlt, behúzott, jelölősávval —,
 * hogy ne legyen összetéveszthető az oldal saját állításával.
 */
.rsv-passziv-idezet {
    margin: 0 0 clamp(var(--rsv-ter-5), 2.4vw, var(--rsv-ter-6));
    padding: var(--rsv-ter-4) var(--rsv-ter-5);
    font-style: italic;
    line-height: var(--rsv-sormagassag-torzs);
    color: var(--rsv-text-secondary);
    border-left: 3px solid var(--rsv-border-default);
}

.rsv-passziv-gombsor {
    margin-top: clamp(var(--rsv-ter-5), 2.6vw, var(--rsv-ter-6));
}

/* 27.10 A 9. szakasz — a két készítmény egyenrangú párja
   --------------------------------------------------------------------------
   `FELADAT.md` §2/3: a palivizumab és a nirsevimab EGYARÁNT monoklonális
   antitest. A két kártya ezért azonos felületet, azonos jelölőt és azonos
   tipográfiát kap; nincs köztük nyíl, „vs" vagy rangsorolás. A különbség a
   HATÁSTARTAM, és azt a szövegük mondja ki.
   -------------------------------------------------------------------------- */

.rsv-passziv-par {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: clamp(var(--rsv-ter-4), 2.4vw, var(--rsv-ter-6));
}

@media (min-width: 768px) {
    .rsv-passziv-par { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.rsv-passziv-par__elem {
    display: grid;
    gap: var(--rsv-ter-3);
    align-content: start;
    padding: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-6));
    background: var(--rsv-surface-card);
    border-radius: var(--rsv-radius-lg);
    box-shadow: inset 0 0 0 1px var(--rsv-border-default);
}

.rsv-szekcio--feher .rsv-passziv-par__elem {
    background: var(--rsv-brand-bare);
}

.rsv-passziv-par__elem > :last-child { margin-bottom: 0; }

.rsv-passziv-par__jel {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--rsv-brand-secondary) 12%, transparent);
    color: var(--rsv-brand-primary);
    --ikon-meret: 28px;
}

.rsv-passziv-par__cim {
    margin: 0;
    font-size: var(--rsv-meret-h4);
    color: var(--rsv-brand-dark);
}

/* 27.11 Mozgás
   --------------------------------------------------------------------------
   Nincs saját, folyamatos ambient animáció: a belépő mozgás a közös
   `data-rsv-belep` réteg, amelyet a 35. szakasz `prefers-reduced-motion`
   fallbackje kapcsol ki.
   -------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
    .rsv-passziv-par__elem,
    .rsv-passziv-vizsgalat {
        transition: box-shadow .25s ease;
    }
}


/* --------------------------------------------------------------------------
   28. A `/rsv-megelozes-magyarorszagon` ALOLDAL — az aktuális magyar helyzet

   KANONIKUS FORRÁS: az `RSV_MEGELOZES_MAGYARORSZAGON_PAGE_v1` csomag
   `FELADAT.md` és `COPY.md` fájlja. A hét raszter a csomag `assets/`
   mappájából való; a beépítés előtti §28-mérés MEGFELELT (hero 1400x900,
   szekciókép 900x700, kitöltés 75,8–99,8%, középpont 49,9–50,0%, és a §3/8
   szerint tiltott beégetett elem — dátum, gesztációs hét, státusz, terméknév,
   UI — egyiken sincs).

   ===========================================================================
    EZ A PROJEKT LEGIDŐÉRZÉKENYEBB OLDALA
   ===========================================================================
   A lap magyar ENGEDÉLYEZÉSI, SZAKMAI AJÁNLÁSI és TB-FINANSZÍROZÁSI
   státuszokat közöl. A `FELADAT.md` §1/13 kiköti, hogy az aktuális státusz és
   az ellenőrzési dátum ÉLŐ HTML legyen — tilos raszterképre égetni. Ezért
   ebben a szakaszban HÁROM kötelező komponens él:

     - `.rsv-hazai-fogalmak` ...... „Engedélyezett / Ajánlott /
       TB-finanszírozott" háromlépcsős fogalmi komponens (§3/5);
     - `.rsv-hazai-hetek` ......... a 35. hét vs. 32. hét összehasonlítás
       (§3/6);
     - `.rsv-hazai-statuszok` és `.rsv-hazai-osszefoglalo` ... a
       státuszkártyák, plusz a `.rsv-hazai-datum` sor (§3/7).

   ===========================================================================
    MI ÖRÖKÖLT ÉS MI ÚJ
   ===========================================================================
   A page-hero, az aloldali szekcióritmus, a képmélység, az insight-panel, a
   routing kártyák, a szószedet és a forrásblokk a 13. szakasz `.rsv-alap*`
   készletéből jön — ez a szakasz KIZÁRÓLAG az oldal SAJÁTJÁT tartalmazza.
   Új színpaletta nem keletkezett: minden érték a 2. szakasz tokenjeiből vagy
   azok `color-mix()`-éből származik, és a szakaszban egyetlen nyers hexérték
   sincs.

   ===========================================================================
    A NEGATÍV ÁLLÍTÁSOK LÁTHATÓ JELÖLÉST KAPNAK — DE NEM SÜRGŐSSÉGIT
   ===========================================================================
   A lap két legfontosabb guardrailje NEGATÍV állítás (§1/4, §1/9): a
   maternális vakcinánál általános országos TB-finanszírozást nem állítunk, a
   nirsevimabnál pedig országos finanszírozott programot nem igazolunk.

   Ezek MÁRKASZÍNŰ jelölést kapnak, NEM `--rsv-urgent`-et: a „nem igazoljuk"
   nem veszélyjelzés, hanem a bizonyíték hiányának pontos közlése. Sürgősségi
   szín ezen a lapon egyáltalán nem használható (kézikönyv §13).
   -------------------------------------------------------------------------- */

/* 28.1 Page hero
   -------------------------------------------------------------------------- */

.rsv-alaphero--hazai .rsv-alaphero__lead {
    margin-bottom: var(--rsv-ter-5);
}

.rsv-alaphero--hazai .rsv-gombsor {
    margin-top: clamp(var(--rsv-ter-5), 2.6vw, var(--rsv-ter-6));
}

@media (min-width: 992px) {
    .rsv-alaphero--hazai .rsv-alaphero__racs {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .rsv-alaphero--hazai .rsv-alaphero__vizual {
        align-self: center;
        margin-top: 0;
    }
}

/* 28.2 Az ellenőrzési dátum sora
   --------------------------------------------------------------------------
   `FELADAT.md` §1/2 és §1/13: minden magyar állítás ehhez a dátumhoz kötött,
   és a dátum ÉLŐ HTML. A hajtás közelében, saját szakaszban áll, hogy az
   olvasó azonnal lássa, mikori állapotot olvas.

   A dátum HÁROM helyen jelenik meg (itt, a 2. szakasz szemöldökében és a 11.
   szakasz leadjében), de EGYETLEN forrásból — a tartalomfájl
   `statusz.ellenorizve` kulcsából.
   -------------------------------------------------------------------------- */

.rsv-hazai-nyito {
    padding-block: clamp(var(--rsv-ter-5), 2.6vw, var(--rsv-ter-6));
}

.rsv-hazai-datum {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--rsv-ter-3);
    align-items: center;
    margin: 0;
    padding: var(--rsv-ter-4) var(--rsv-ter-5);
    background: color-mix(in srgb, var(--rsv-brand-secondary) 8%, transparent);
    border-left: 4px solid var(--rsv-brand-secondary);
    border-radius: var(--rsv-radius-sm);
    color: var(--rsv-brand-dark);
}

.rsv-hazai-datum__jel {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    color: var(--rsv-brand-primary);
    --ikon-meret: 22px;
}

/* A `<time>` nem kap külön stílust: a `<strong>` adja a hangsúlyt. */
.rsv-hazai-datum time {
    white-space: nowrap;
}

/* 28.3 A csomag képei — nincs dupla keret és nincs dupla árnyék
   --------------------------------------------------------------------------
   A `<figure>` sem keretet, sem hátteret, sem árnyékot nem kap: a mélységet a
   lezárt `.rsv-alap-vizual` adja, a heróban pedig a `.rsv-alaphero__vizual`.

   CROP NINCS: minden kép `object-fit: contain`.

   MEGJEGYZÉS A `hazai-folyamat` ASSETHEZ: ez az egyetlen kép, amelynek
   stílusa eltér a másik hattól — lapos, telített lila korong négy fehér
   ikonkoronggal, nem festett pasztell jelenet. A MÉRHETŐ §28-szabványt
   teljesíti (900x700, 75,8% kitöltés, 50,0%/50,0% középpont, felirat nélkül),
   ezért nem kapott külön kezelést; a `contain` illesztés miatt a
   `.rsv-alap-vizual` lágy pereme rajta is helyesen működik.
   -------------------------------------------------------------------------- */

.rsv-hazai-vizual {
    margin: 0;
    line-height: 0;
}

.rsv-hazai-vizual img {
    object-fit: contain;
}

/* 28.4 Kétoszlopos szakaszok
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
    .rsv-hazai-ketto { align-items: start; }

    .rsv-hazai-ketto .rsv-ketto__vizual { align-self: center; }
}

.rsv-hazai-ketto .rsv-ketto__szoveg > :last-child { margin-bottom: 0; }

/* 28.5 Felsorolások
   --------------------------------------------------------------------------
   Ezen a lapon minden felsorolás FELTÉTELT, FORRÁSTÍPUST vagy TEENDŐT sorol —
   egységesen semleges pontot kap. Sürgősségi szín nincs.
   -------------------------------------------------------------------------- */

.rsv-hazai-lista {
    list-style: none;
    margin: 0 0 clamp(var(--rsv-ter-5), 2.4vw, var(--rsv-ter-6));
    padding: 0;
    display: grid;
    gap: var(--rsv-ter-3);
}

.rsv-hazai-lista li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--rsv-ter-3);
    align-items: start;
    line-height: var(--rsv-sormagassag-torzs);
}

.rsv-hazai-lista__jel {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    /* Az első sor közepére igazítva — nem a szöveg tetejére. */
    margin-top: calc((1em * var(--rsv-sormagassag-torzs) - 24px) / 2);
    border-radius: 50%;
    background: color-mix(in srgb, var(--rsv-brand-secondary) 12%, transparent);
    color: var(--rsv-brand-primary);
}

.rsv-hazai-lista__jel::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.rsv-hazai-listacim {
    margin-bottom: var(--rsv-ter-4);
    font-weight: 700;
    color: var(--rsv-brand-dark);
}

.rsv-hazai-zaras {
    font-weight: 600;
    color: var(--rsv-brand-dark);
}

/*
 * KÉT ZÁRÓ MONDAT KAP KIEMELT ALAKOT, és mindkettő GUARDRAIL:
 *   - a palivizumab-szakaszé kimondja, hogy a jogosultságot mindig az
 *     aktuális feltételek és a klinikai helyzet alapján kell megítélni;
 *   - a nirsevimab-szakaszé, hogy státuszváltozásnál frissíteni kell.
 */
.rsv-hazai-zaras--hangsulyos {
    margin-top: clamp(var(--rsv-ter-5), 2.6vw, var(--rsv-ter-6));
    padding: var(--rsv-ter-4) var(--rsv-ter-5);
    background: color-mix(in srgb, var(--rsv-brand-secondary) 8%, transparent);
    border-left: 4px solid var(--rsv-brand-secondary);
    border-radius: var(--rsv-radius-sm);
}

/* 28.6 Kiemelt panelek
   -------------------------------------------------------------------------- */

.rsv-hazai-kiemelt {
    margin-top: clamp(var(--rsv-ter-6), 3vw, var(--rsv-ter-7));
}

/* 28.7 Az 1. szakasz — a három fogalom
   --------------------------------------------------------------------------
   `FELADAT.md` §3/5: valódi HTML/CSS komponens, NEM kép.

   A HÁROM LÉPCSŐ EGYENRANGÚ (§1/1): azonos felület, azonos jelölő, azonos
   tipográfia. NINCS köztük nyíl, chevron vagy sorszám — ez nem egy folyamat
   három állomása, hanem három KÜLÖN fogalom, és a kiemelés éppen azt mondja
   ki, hogy az első kettő megléte nem vonja maga után a harmadikat.
   -------------------------------------------------------------------------- */

.rsv-hazai-fogalmak {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: clamp(var(--rsv-ter-4), 2.4vw, var(--rsv-ter-6));
}

@media (min-width: 768px) {
    .rsv-hazai-fogalmak { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.rsv-hazai-fogalmak__elem {
    display: grid;
    gap: var(--rsv-ter-3);
    align-content: start;
    padding: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-6));
    background: var(--rsv-surface-card);
    border-radius: var(--rsv-radius-lg);
    box-shadow: inset 0 0 0 1px var(--rsv-border-default);
}

.rsv-szekcio--feher .rsv-hazai-fogalmak__elem {
    background: var(--rsv-brand-bare);
}

.rsv-hazai-fogalmak__elem > :last-child { margin-bottom: 0; }

.rsv-hazai-fogalmak__jel {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--rsv-brand-secondary) 12%, transparent);
    color: var(--rsv-brand-primary);
    --ikon-meret: 26px;
}

.rsv-hazai-fogalmak__cim {
    margin: 0;
    font-size: var(--rsv-meret-h4);
    color: var(--rsv-brand-dark);
}

/* 28.8 A 2. szakasz — a három státuszkártya
   --------------------------------------------------------------------------
   `FELADAT.md` §3/7 és §1/13: VALÓDI HTML, nem raszterkép.

   A HÁROM KÁRTYA NEM RANGSOR: a címke státuszt jelöl, nem minőséget, és a
   kártyák között nincs irányjelölés. A kártyák egyenlő szélességűek, és a
   CTA-juk a hasáb aljára kerül, hogy a különböző hosszúságú szövegek mellett
   is egy vonalban álljanak.
   -------------------------------------------------------------------------- */

.rsv-hazai-statuszok {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: clamp(var(--rsv-ter-4), 2.4vw, var(--rsv-ter-6));
}

@media (min-width: 992px) {
    .rsv-hazai-statuszok { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.rsv-hazai-statusz {
    display: grid;
    gap: var(--rsv-ter-3);
    /* A CTA a kártya aljára kerül — a `1fr` a záró gombsor előtti térköz. */
    grid-template-rows: auto auto auto 1fr auto;
    padding: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-6));
    background: var(--rsv-brand-bare);
    border-radius: var(--rsv-radius-lg);
    box-shadow: inset 0 0 0 1px var(--rsv-border-default);
}

.rsv-szekcio--bare .rsv-hazai-statusz {
    background: var(--rsv-surface-card);
}

.rsv-hazai-statusz__jel {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--rsv-brand-secondary) 12%, transparent);
    color: var(--rsv-brand-primary);
    --ikon-meret: 26px;
}

.rsv-hazai-statusz__cimke {
    font-size: var(--rsv-meret-kicsi);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--rsv-brand-primary);
}

.rsv-hazai-statusz__cim {
    margin: 0;
    font-size: var(--rsv-meret-h4);
    color: var(--rsv-brand-dark);
}

/*
 * A NEGATÍV STÁTUSZÁLLÍTÁS SORA (`FELADAT.md` §1/4, §1/9).
 *
 * MÁRKASZÍNŰ, NEM SÜRGŐSSÉGI: a „nem állítunk" / „nem igazolunk" a
 * bizonyíték hiányának pontos közlése, nem veszélyjelzés. A saját felület és
 * a bal jelölősáv csak annyit tesz, hogy a mondat ne olvadjon bele a
 * bekezdésekbe.
 */
.rsv-hazai-statusz__zaras {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--rsv-ter-3);
    align-items: start;
    margin: 0;
    padding: var(--rsv-ter-4);
    font-weight: 600;
    line-height: var(--rsv-sormagassag-torzs);
    color: var(--rsv-brand-dark);
    background: color-mix(in srgb, var(--rsv-brand-secondary) 10%, transparent);
    border-left: 3px solid var(--rsv-brand-secondary);
    border-radius: var(--rsv-radius-sm);
}

.rsv-hazai-statusz__zarojel {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-top: calc((1em * var(--rsv-sormagassag-torzs) - 22px) / 2);
    color: var(--rsv-brand-primary);
    --ikon-meret: 18px;
}

.rsv-hazai-statusz__gombsor {
    display: flex;
    align-self: end;
    margin-top: var(--rsv-ter-2);
}

/* 28.9 A 4. szakasz — a finanszírozott célcsoportok
   --------------------------------------------------------------------------
   Három egyenrangú kártya. A koraszülött-feltétel KÉT RÉSZE (32. gesztációs
   hét ÉS 6 hónaposnál fiatalabb) egyetlen mondat marad — a szétválasztása
   hamis jogosultsági olvasatot adna (`FELADAT.md` §1/5).
   -------------------------------------------------------------------------- */

.rsv-hazai-celcsoportok {
    list-style: none;
    margin: clamp(var(--rsv-ter-6), 3vw, var(--rsv-ter-7)) 0 0;
    padding: 0;
    display: grid;
    gap: clamp(var(--rsv-ter-4), 2.4vw, var(--rsv-ter-6));
}

@media (min-width: 992px) {
    .rsv-hazai-celcsoportok { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.rsv-hazai-celcsoport {
    display: grid;
    gap: var(--rsv-ter-3);
    align-content: start;
    padding: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-6));
    background: var(--rsv-brand-bare);
    border-radius: var(--rsv-radius-lg);
    box-shadow: inset 0 0 0 1px var(--rsv-border-default);
}

.rsv-szekcio--bare .rsv-hazai-celcsoport {
    background: var(--rsv-surface-card);
}

.rsv-hazai-celcsoport > :last-child { margin-bottom: 0; }

.rsv-hazai-celcsoport__jel {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--rsv-brand-secondary) 12%, transparent);
    color: var(--rsv-brand-primary);
    --ikon-meret: 24px;
}

.rsv-hazai-celcsoport__cim {
    margin: 0;
    font-size: var(--rsv-meret-h4);
    line-height: 1.3;
    color: var(--rsv-brand-dark);
}

/* 28.10 Az 5. szakasz — 35. hét vs. 32. hét
   --------------------------------------------------------------------------
   `FELADAT.md` §3/6: valódi HTML/CSS összehasonlítás, NEM kép.

   A KÉT HASÁB EGYENRANGÚ (§1/8): a két szám nem mond ellent egymásnak, hanem
   KÉT KÜLÖNBÖZŐ KÉRDÉSRE válaszol — alkalmazási előírás vs. finanszírozási
   feltétel. Nincs köztük „helyes / helytelen" jelölés, és nincs irányjelölés;
   a viszonyt a szakasz szemöldöke mondja ki.
   -------------------------------------------------------------------------- */

.rsv-hazai-hetek {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: clamp(var(--rsv-ter-4), 2.4vw, var(--rsv-ter-6));
}

@media (min-width: 768px) {
    .rsv-hazai-hetek { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.rsv-hazai-hetek__elem {
    display: grid;
    gap: var(--rsv-ter-4);
    align-content: start;
    padding: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-6));
    background: var(--rsv-surface-card);
    border-radius: var(--rsv-radius-lg);
    box-shadow: inset 0 0 0 1px var(--rsv-border-default);
}

.rsv-szekcio--feher .rsv-hazai-hetek__elem {
    background: var(--rsv-brand-bare);
}

.rsv-hazai-hetek__elem > p {
    margin: 0;
    line-height: var(--rsv-sormagassag-torzs);
}

.rsv-hazai-hetek__jel {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--rsv-brand-secondary) 12%, transparent);
    color: var(--rsv-brand-primary);
    --ikon-meret: 24px;
}

/* 28.11 A 9. szakasz — kihez fordulj
   -------------------------------------------------------------------------- */

.rsv-hazai-kihez {
    list-style: none;
    margin: clamp(var(--rsv-ter-6), 3vw, var(--rsv-ter-7)) 0 0;
    padding: 0;
    display: grid;
    gap: clamp(var(--rsv-ter-4), 2.4vw, var(--rsv-ter-6));
}

@media (min-width: 768px) {
    .rsv-hazai-kihez { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.rsv-hazai-kihez__elem {
    display: grid;
    gap: var(--rsv-ter-3);
    align-content: start;
    padding: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-6));
    background: var(--rsv-surface-card);
    border-radius: var(--rsv-radius-lg);
    box-shadow: inset 0 0 0 1px var(--rsv-border-default);
}

.rsv-szekcio--feher .rsv-hazai-kihez__elem {
    background: var(--rsv-brand-bare);
}

.rsv-hazai-kihez__elem > :last-child { margin-bottom: 0; }

.rsv-hazai-kihez__jel {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--rsv-brand-secondary) 12%, transparent);
    color: var(--rsv-brand-primary);
    --ikon-meret: 24px;
}

.rsv-hazai-kihez__cim {
    margin: 0;
    font-size: var(--rsv-meret-h4);
    line-height: 1.3;
    color: var(--rsv-brand-dark);
}

/* 28.12 A 11. szakasz — az összefoglaló státuszkártyák
   --------------------------------------------------------------------------
   `FELADAT.md` §3/7: VALÓDI HTML, nem kép. Az ellenőrzési dátum a leadben áll.

   AZ „IGEN / NEM" SOROK KÉT JELÖLÉST HASZNÁLNAK. A `--nem` változat NEM
   figyelmeztetés: a két negatív sor (§1/4, §1/9) éppen a bizonyíték hiányát
   közli pontosan, ezért halványabb, semleges jelölést kap — de a pipától
   egyértelműen megkülönböztethetőt, hogy gyors átfutásnál se olvasódjon
   igenlőnek.
   -------------------------------------------------------------------------- */

.rsv-hazai-osszefoglalo {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: clamp(var(--rsv-ter-4), 2.4vw, var(--rsv-ter-6));
}

@media (min-width: 992px) {
    .rsv-hazai-osszefoglalo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.rsv-hazai-osszefoglalo__elem {
    display: grid;
    gap: var(--rsv-ter-3);
    align-content: start;
    padding: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-6));
    background: var(--rsv-surface-card);
    border-radius: var(--rsv-radius-lg);
    box-shadow: inset 0 0 0 1px var(--rsv-border-default);
}

.rsv-szekcio--feher .rsv-hazai-osszefoglalo__elem {
    background: var(--rsv-brand-bare);
}

.rsv-hazai-osszefoglalo__jel {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--rsv-brand-secondary) 12%, transparent);
    color: var(--rsv-brand-primary);
    --ikon-meret: 24px;
}

.rsv-hazai-osszefoglalo__cim {
    margin: 0;
    font-size: var(--rsv-meret-h4);
    color: var(--rsv-brand-dark);
}

.rsv-hazai-tenyek {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--rsv-ter-3);
}

.rsv-hazai-teny {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--rsv-ter-3);
    align-items: start;
    line-height: var(--rsv-sormagassag-torzs);
}

.rsv-hazai-teny__jel {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-top: calc((1em * var(--rsv-sormagassag-torzs) - 22px) / 2);
    border-radius: 50%;
    background: color-mix(in srgb, var(--rsv-brand-secondary) 14%, transparent);
    color: var(--rsv-brand-primary);
    --ikon-meret: 13px;
}

/*
 * A NEGATÍV SOR halványabb jelölőt és másodlagos szövegszínt kap — így
 * megkülönböztethető, de nem lesz belőle figyelmeztetés.
 */
.rsv-hazai-teny--nem .rsv-hazai-teny__jel {
    background: color-mix(in srgb, var(--rsv-brand-dark) 8%, transparent);
    color: var(--rsv-text-secondary);
}

.rsv-hazai-teny--nem {
    color: var(--rsv-text-secondary);
}

/* 28.13 A 7. szakasz — editorial panel kép nélkül
   --------------------------------------------------------------------------
   A csomag ehhez a szakaszhoz nem ad képet, és új vizuált tervezni tilos
   (`FELADAT.md` §3/2) — olvasási szélességű panel.
   -------------------------------------------------------------------------- */

.rsv-hazai-panel {
    padding: clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-8));
    background: var(--rsv-surface-card);
    border-radius: var(--rsv-radius-lg);
    box-shadow: inset 0 0 0 1px var(--rsv-border-default);
}

.rsv-szekcio--feher .rsv-hazai-panel {
    background: var(--rsv-brand-bare);
}

.rsv-hazai-panel > :last-child { margin-bottom: 0; }

/* 28.14 Mozgás
   --------------------------------------------------------------------------
   Nincs saját, folyamatos ambient animáció: a belépő mozgás a közös
   `data-rsv-belep` réteg, amelyet a 35. szakasz `prefers-reduced-motion`
   fallbackje kapcsol ki.
   -------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
    .rsv-hazai-statusz,
    .rsv-hazai-osszefoglalo__elem {
        transition: box-shadow .25s ease;
    }
}




/* --------------------------------------------------------------------------
   29. A `/koraszulottek` ALOLDAL — „Koraszülöttek és RSV"

   KANONIKUS FORRÁS: a `KORASZULOTTEK_PAGE_v1` csomag `FELADAT.md` és
   `COPY.md` fájlja. A hat raszter a csomag `assets/` mappájából való; a
   beépítés előtti §28-mérés MEGFELELT (hero 1400x900, öt szekciókép 900x700,
   kitöltés 85,7–100%, középpont 49,9%/49,9%, beégetett szöveg, UI-elem és
   többpaneles kompozíció nincs).

   ===========================================================================
    MIÉRT `.rsv-korai*` A NÉVTÉR?
   ===========================================================================
   A `.rsv-koraszulott*` névtér a LEZÁRT FŐOLDAL 10. szakaszáé (11.10), és ott
   a diagonális vízválasztó panel, a stabil baba-kompozíció és a két maszkolt
   vírusmező stílusát viszi. Az aloldal ezért saját, ütközésmentes névteret
   kapott. Ugyanezért van külön képmappa is:
   `web/assets/images/koraszulottek-oldal/`, `kora-` előtaggal — a
   `web/assets/images/koraszulottek/` a főoldali blokké.

   ===========================================================================
    MI ÖRÖKÖLT ÉS MI ÚJ
   ===========================================================================
   A page-hero, az aloldali szekcióritmus, a képmélység, az insight-panel, a
   routing kártyák, a szószedet és a forrásblokk a 13. szakasz `.rsv-alap*`
   készletéből jön — ez a szakasz KIZÁRÓLAG az oldal SAJÁTJÁT tartalmazza.
   Új színpaletta nem keletkezett: minden érték a 2. szakasz tokenjeiből vagy
   azok `color-mix()`-éből származik, és a szakaszban egyetlen nyers hexérték
   sincs. Új ikon sem készült: a lap a KÖZÖS sprite jelölőiből dolgozik.

   ===========================================================================
    NÉGY SZAKASZ KÉP NÉLKÜL — NÉGY KÜLÖNBÖZŐ SZERKEZET
   ===========================================================================
   A csomag hat képet ad, az oldal viszont tizenhárom szakaszból áll. A kép
   nélküli négy szakasz ezért NEM kétoszlopos — így desktopon nem marad üres
   féloldal, és a lap ritmusa sem válik monotonná:

     - 4. szakasz  — teljes szélességű bevezető + 2x2-es tényezőrács;
     - 5. szakasz  — editorial split (bal: fej, jobb: törzs);
     - 6. szakasz  — olvasási szélességű bridge-panel;
     - 10. szakasz — olvasási szélességű, középre zárt záró panel.

   ===========================================================================
    EZ NEM TRIÁZS-OLDAL ÉS NEM JOGOSULTSÁGI ALGORITMUS
   ===========================================================================
   Sürgősségi szín (`--rsv-urgent`, `--rsv-warning`) itt nem használható
   (kézikönyv §13): a 6. szakasz BRIDGE a `/tunetek` és a
   `/mikor-fordulj-orvoshoz` felé, nem triázs (`FELADAT.md` §1/6).

   A 4. szakasz négy kockázati tényezője EGYENRANGÚ (§1/3): nem kap sorszámot,
   súlyozást, pontszámot vagy irányjelölést — ez felsorolás, nem döntési
   algoritmus (§1/5).
   -------------------------------------------------------------------------- */

/* 29.1 Page hero
   --------------------------------------------------------------------------
   A hero mastere SZÉLES, fekvő kompozíció (1400x900), a szövegoszlop pedig a
   H1 mellett leadet, egy bekezdést ÉS KÉT CTA-t is visz — ezért a vizuál
   középre igazodik, és nem emelkedik a morzsamenü sávjába (az az emelés álló
   kompozíciókhoz készült). Ugyanaz a megoldás, mint a `/megelozes` heróján.
   -------------------------------------------------------------------------- */

.rsv-alaphero--korai .rsv-alaphero__lead {
    margin-bottom: var(--rsv-ter-5);
}

.rsv-alaphero--korai .rsv-gombsor {
    margin-top: clamp(var(--rsv-ter-5), 2.6vw, var(--rsv-ter-6));
}

@media (min-width: 992px) {
    .rsv-alaphero--korai .rsv-alaphero__racs {
        grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    }

    .rsv-alaphero--korai .rsv-alaphero__vizual {
        align-self: center;
        margin-top: 0;
    }
}

/* 29.2 A csomag képei — nincs dupla keret és nincs dupla árnyék
   --------------------------------------------------------------------------
   A `<figure>` sem keretet, sem hátteret, sem árnyékot nem kap: a mélységet a
   lezárt `.rsv-alap-vizual` adja (lap + szorzás + lágy perem), a heróban
   pedig a `.rsv-alaphero__vizual` ugyanaz — a kettőt halmozni nem szabad,
   mert két egymásra vetített fényudvar keletkezne.

   A MASTEREK FESTETT LEVENDULA HÁTTERŰEK (nem lapos `--rsv-brand-bare`),
   ezért a szorzásos keverés nem tünteti el a képszélt — azt a komponens lágy
   pereme oldja fel. Ugyanez a helyzet a `/megelozes` (23.2) és az `/rsv-utan`
   (22.2) készleténél.

   CROP NINCS: minden kép `object-fit: contain`, és sehol nincs `cover`,
   `clip-path` vagy negatív inset.
   -------------------------------------------------------------------------- */

.rsv-korai-vizual {
    margin: 0;
    line-height: 0;
}

.rsv-korai-vizual img {
    object-fit: contain;
}

/* 29.3 Kétoszlopos szakaszok
   --------------------------------------------------------------------------
   A lap öt képes tartalmi szakasza a globális `.rsv-ketto`-t használja,
   váltakozó oldalon. Itt csak annyi kell, hogy a szövegoszlop tetején
   induljon, a vizuál pedig függőlegesen középre — a szövegoszlopok jóval
   magasabbak a 900x700-as képnél.
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
    .rsv-korai-ketto { align-items: start; }

    .rsv-korai-ketto .rsv-ketto__vizual { align-self: center; }
}

.rsv-korai-ketto .rsv-ketto__szoveg > :last-child { margin-bottom: 0; }

/* 29.4 Záró állítás
   --------------------------------------------------------------------------
   A `COPY.md` `zaras` mezője több szakaszban GUARDRAILT hordoz (2. szakasz:
   „nem jóslat"; 8. szakasz: nem cél az elszigetelés; 9. szakasz: a
   feltételeket orvossal kell tisztázni), ezért saját, jelölt alakot kap.

   MIÉRT NEM SÜRGŐSSÉGI SZÍN? Mert ezek nem sürgős állítások, hanem
   megszorítások — a sürgősségi vizuális nyelv valódi sürgős tartalomé
   (kézikönyv §13). A jelölés ezért bal oldali márkavonal.
   -------------------------------------------------------------------------- */

.rsv-korai-zaras {
    margin-top: clamp(var(--rsv-ter-5), 2.4vw, var(--rsv-ter-6));
    margin-bottom: 0;
    padding-left: clamp(var(--rsv-ter-4), 2vw, var(--rsv-ter-5));
    border-left: 3px solid color-mix(in srgb, var(--rsv-brand-secondary) 55%, transparent);
    font-weight: 600;
    color: var(--rsv-brand-dark);
}

/* 29.5 Kiemelt panelek
   --------------------------------------------------------------------------
   A lezárt `.rsv-alap-kiemelt` komponenst használják, tehát mindig LÁTHATÓK,
   és nem kerülnek összecsukható elembe. A 7., a 9. és a 10. szakasz zárja
   őket.
   -------------------------------------------------------------------------- */

.rsv-korai-kiemelt {
    margin-top: clamp(var(--rsv-ter-6), 3vw, var(--rsv-ter-7));
}

/* A 9. és a 10. szakaszban a kiemelés a szövegfolyamban áll, nem a rács
   alatt — ott szűkebb felső térköz kell, és a zárás követi. */
.rsv-ketto__szoveg > .rsv-korai-kiemelt,
.rsv-korai-zaropanel > .rsv-korai-kiemelt {
    margin-top: clamp(var(--rsv-ter-5), 2.6vw, var(--rsv-ter-6));
}

/* 29.6 A 4. szakasz — a négy kockázati tényező
   --------------------------------------------------------------------------
   A LAP LEGFONTOSABB GUARDRAIL-BLOKKJA (`FELADAT.md` §1/3). Valódi `<ul>`
   marad — a copy felsorolás, a záró írásjeleivel együtt —, csak a
   megjelenése csempés.

   A NÉGY CSEMPE TELJESEN AZONOS: azonos felület, azonos jelölőméret, azonos
   tipográfia. Nincs sorszám, nincs súlyozás, nincs nyíl és nincs kiemelt
   tétel — a kockázat nem rangsor, és ez nem döntési algoritmus (§1/5).
   -------------------------------------------------------------------------- */

.rsv-korai-bevezeto {
    max-width: 68ch;
}

.rsv-korai-bevezeto > :last-child { margin-bottom: 0; }

.rsv-korai-bevezeto--zaro {
    margin-top: clamp(var(--rsv-ter-6), 3vw, var(--rsv-ter-7));
}

.rsv-korai-bevezeto--zaro .rsv-gombsor {
    margin-top: clamp(var(--rsv-ter-5), 2.6vw, var(--rsv-ter-6));
}

.rsv-korai-tenyezok {
    list-style: none;
    margin: clamp(var(--rsv-ter-6), 3vw, var(--rsv-ter-7)) 0 0;
    padding: 0;
    display: grid;
    gap: clamp(var(--rsv-ter-4), 2.4vw, var(--rsv-ter-5));
}

@media (min-width: 768px) {
    .rsv-korai-tenyezok { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.rsv-korai-tenyezo {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(var(--rsv-ter-4), 2vw, var(--rsv-ter-5));

    /*
     * A NÉGY TÉTEL HOSSZA ERŐSEN ELTÉR (a negyedik három-négyszer olyan
     * hosszú, mint az első). A rács sorai emiatt egymáshoz nyúlnak, és a
     * rövid csempe tartalma a magas dobozban lebegne — mérve 768 px-en a
     * legrövidebb csempénél ez kb. 100 px üres sáv volt fölötte-alatta.
     *
     * `align-content: start` a CSOPORTOT a csempe tetejére húzza, az
     * `align-items: center` pedig az ikont a szöveghez képest továbbra is
     * középre igazítja — így a négy csempe felső éle egy vonalban indul.
     */
    align-items: center;
    align-content: start;
    padding: clamp(var(--rsv-ter-5), 2.6vw, var(--rsv-ter-6));
    background: var(--rsv-brand-bare);
    border-radius: var(--rsv-radius-lg);
    box-shadow: inset 0 0 0 1px var(--rsv-border-default);
}

.rsv-szekcio--bare .rsv-korai-tenyezo {
    background: var(--rsv-surface-card);
}

.rsv-korai-tenyezo__jel {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--rsv-brand-secondary) 12%, transparent);
    color: var(--rsv-brand-primary);
    --ikon-meret: 28px;
}

.rsv-korai-tenyezo__szoveg {
    font-weight: 600;
    line-height: var(--rsv-sormagassag-torzs);
    color: var(--rsv-brand-dark);
}

/* 29.7 Az 5. szakasz — editorial split kép nélkül
   --------------------------------------------------------------------------
   A csomag ehhez a szakaszhoz nem ad képet, és új vizuált tervezni tilos.
   992 px felett ezért kétoszlopos EDITORIAL szerkezetet kap: balra a
   szemöldök, a H2 és a lead, jobbra a kifejtés és a zárás. A jobb hasáb
   finom bal oldali elválasztót kap, hogy a két rész összetartozzon.
   -------------------------------------------------------------------------- */

.rsv-korai-editorial {
    display: grid;
    gap: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-7));
}

.rsv-korai-editorial > * { min-width: 0; }

.rsv-korai-editorial__fej > :last-child,
.rsv-korai-editorial__torzs > :last-child { margin-bottom: 0; }

@media (min-width: 992px) {
    .rsv-korai-editorial {
        grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
        align-items: start;
    }

    .rsv-korai-editorial__torzs {
        padding-left: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-7));
        border-left: 1px solid var(--rsv-border-default);
    }
}

/* 29.8 A 6. szakasz — bridge-panel (NEM triázs)
   --------------------------------------------------------------------------
   A szakasz EGYETLEN figyelmeztető jelet nevez meg (apnoe), és átad a
   `/tunetek`, illetve a `/mikor-fordulj-orvoshoz` oldalnak (`FELADAT.md`
   §1/6).

   SÜRGŐSSÉGI SZÍNT NEM KAP (kézikönyv §13). A panel a márka semleges
   felületét és jelölőjét használja; a hangsúlyt a méret és a középre zárt
   szerkezet adja, nem a szín.
   -------------------------------------------------------------------------- */

.rsv-korai-bridge {
    padding: clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-8));
    text-align: center;
    background: var(--rsv-brand-bare);
    border-radius: var(--rsv-radius-lg);
    box-shadow: inset 0 0 0 1px var(--rsv-border-default);
}

.rsv-szekcio--bare .rsv-korai-bridge {
    background: var(--rsv-surface-card);
}

.rsv-korai-bridge > :last-child { margin-bottom: 0; }

.rsv-korai-bridge__jel {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: 0 auto clamp(var(--rsv-ter-4), 2vw, var(--rsv-ter-5));
    border-radius: 50%;
    background: color-mix(in srgb, var(--rsv-brand-secondary) 14%, transparent);
    color: var(--rsv-brand-primary);
    --ikon-meret: 32px;
}

/* A középre zárt panelben a bal vonalas zárás furcsán állna: itt a zárás
   csak tipográfiailag emelkedik ki. */
.rsv-korai-bridge .rsv-korai-zaras {
    padding-left: 0;
    border-left: 0;
}

.rsv-korai-bridge .rsv-gombsor {
    justify-content: center;
    margin-top: clamp(var(--rsv-ter-5), 2.6vw, var(--rsv-ter-6));
}

/* 29.9 A 10. szakasz — záró panel
   --------------------------------------------------------------------------
   A lap záró gondolata, szintén kép nélkül: olvasási szélességű, középre zárt
   panel, amely lezárja a tartalmi ívet a routing előtt.
   -------------------------------------------------------------------------- */

.rsv-korai-zaropanel {
    padding: clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-8));
    text-align: center;
    background: var(--rsv-brand-bare);
    border-radius: var(--rsv-radius-lg);
    box-shadow: inset 0 0 0 1px var(--rsv-border-default);
}

.rsv-szekcio--bare .rsv-korai-zaropanel {
    background: var(--rsv-surface-card);
}

.rsv-korai-zaropanel > :last-child { margin-bottom: 0; }

.rsv-korai-zaropanel .rsv-korai-zaras {
    padding-left: 0;
    border-left: 0;
}

/* 29.10 Routing kártyák — a lezárt komponens egy extra sorral
   --------------------------------------------------------------------------
   A `COPY.md` 13. szakasza minden kártyához ad egy leíró mondatot is. A
   lezárt `.rsv-alap-tovabb` szerkezete változatlan; csak ez az egy
   oldalspecifikus sor egészíti ki.
   -------------------------------------------------------------------------- */

.rsv-korai-tovabb__leiras {
    margin-top: var(--rsv-ter-2);
    font-size: var(--rsv-meret-kicsi);
    line-height: var(--rsv-sormagassag-torzs);
    color: var(--rsv-text-secondary);
}

/* 29.11 Mozgás
   --------------------------------------------------------------------------
   Nincs saját, folyamatos ambient animáció: a belépő mozgás a közös
   `data-rsv-belep` réteg, amelyet a 35. szakasz `prefers-reduced-motion`
   fallbackje kapcsol ki.
   -------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
    .rsv-korai-tenyezo {
        transition: box-shadow .25s ease;
    }
}




/* --------------------------------------------------------------------------
   30. A `/koraszulott-rsv-szezon` ALOLDAL — „Koraszülött baba az RSV-szezonban"

   KANONIKUS FORRÁS: a `KORASZULOTT_RSV_SZEZON_PAGE_v1` csomag `FELADAT.md`
   és `COPY.md` fájlja. A hat raszter a csomag `assets/` mappájából való; a
   beépítés előtti §28-mérés MEGFELELT (hero 1400x900, öt szekciókép 900x700,
   kitöltés 100%, középpont 49,9–50,0%, beégetett szöveg, UI-elem és
   többpaneles kompozíció nincs).

   ===========================================================================
    MIÉRT `.rsv-felkesz*` A NÉVTÉR?
   ===========================================================================
   Három foglalt névtérrel kellett ütközést kerülni: a `.rsv-szezon*` a
   LEZÁRT `/rsv-szezon` oldalé (17), a `.rsv-koraszulott*` a főoldal 10.
   szakaszáé (11.10), a `.rsv-korai*` pedig a `/koraszulottek` aloldalé (29).
   A `.rsv-felkesz*` egyikkel sem áll előtag-viszonyban — ez a
   munkamenet-átadó §5.11 tanulsága: ott négy hamis tesztbukást okozott, hogy
   egy osztálynév előtagja volt egy másiknak.

   Ugyanezért van saját képmappa is:
   `web/assets/images/koraszulott-rsv-szezon/`, `kszezon-` előtaggal.

   ===========================================================================
    MI ÖRÖKÖLT ÉS MI ÚJ
   ===========================================================================
   A page-hero, az aloldali szekcióritmus, a képmélység, az insight-panel, a
   routing kártyák, a szószedet és a forrásblokk a 13. szakasz `.rsv-alap*`
   készletéből jön — ez a szakasz KIZÁRÓLAG az oldal SAJÁTJÁT tartalmazza.
   Új színpaletta nem keletkezett: minden érték a 2. szakasz tokenjeiből vagy
   azok `color-mix()`-éből származik, és a szakaszban egyetlen nyers hexérték
   sincs. Új ikon sem készült: a lap a KÖZÖS sprite jelölőiből dolgozik.

   ===========================================================================
    ÖT SZAKASZ KÉP NÉLKÜL — NÉGY KÜLÖNBÖZŐ SZERKEZET
   ===========================================================================
   A csomag hat képet ad, az oldal viszont tizennégy szakaszból áll. A kép
   nélküli szakaszok ezért NEM kétoszloposak — így desktopon nem marad üres
   féloldal, és a lap ritmusa sem válik monotonná:

     - 4. szakasz  — teljes szélességű bevezető + kiemelés + 2x2-es csemperács;
     - 7. és 8.    — editorial split (bal: fej, jobb: törzs);
     - 10. szakasz — a checklist saját, kiemelt panelje;
     - 11. szakasz — olvasási szélességű, középre zárt záró panel.

   ===========================================================================
    A CHECKLIST VALÓDI HTML — ÉS NEM APP-DASHBOARD
   ===========================================================================
   A `FELADAT.md` „Checklist implementáció" pontja kimondja: valódi HTML
   checklist, nem kép, nem screenshot, nem infografika, és NE legyen
   app-dashboard hatás. Ezért:

     - szemantikus `<ul>`, tételenként pipa-jelölővel;
     - NINCS állapot, haladásjelző, számláló, százalék és `<input>`;
     - desktopon két oszlop (`column-count`), mobilon egy.

   MIÉRT `column-count` ÉS NEM GRID? A tíz tétel eltérő hosszúságú; a
   `column-count` a SZÖVEG mennyisége szerint tölti ki a két hasábot, tehát
   nem keletkezik féloldalas üres blokk a rövidebb oszlop alatt. A
   `break-inside: avoid` gondoskodik arról, hogy egy tétel ne törjön ketté a
   hasábhatáron.

   ===========================================================================
    EZ NEM TRIÁZS-OLDAL ÉS NEM JOGOSULTSÁGI ALGORITMUS
   ===========================================================================
   Sürgősségi szín (`--rsv-urgent`, `--rsv-warning`) itt nem használható
   (kézikönyv §13): a lap gyakorlati felkészülési útmutató, a triázs a
   `/mikor-fordulj-orvoshoz` oldalé.

   A lap három legfontosabb NEGATÍV állítása (nincs látogatási időhatár,
   nincs testvér-kivétel a közösségből, nincs családi izoláció) a lezárt
   `.rsv-alap-kiemelt` panelben, illetve jelölt záró és jegyzet sorban áll —
   mindegyik LÁTHATÓAN, összecsukható elem nélkül.
   -------------------------------------------------------------------------- */

/* 30.1 Page hero
   --------------------------------------------------------------------------
   A hero mastere SZÉLES, fekvő kompozíció (1400x900), a szövegoszlop pedig a
   H1 mellett leadet, két bekezdést ÉS két CTA-t is visz — ezért a vizuál
   középre igazodik, és nem emelkedik a morzsamenü sávjába.

   A HERO KIEMELÉSE A RÁCS ALATT, TELJES SZÉLESSÉGBEN áll: ez a lap
   alaphangja („Nem az a cél, hogy steril buborékban éljetek."), ezért nem
   szorulhat a szövegoszlop aljára.
   -------------------------------------------------------------------------- */

.rsv-alaphero--felkesz .rsv-alaphero__lead {
    margin-bottom: var(--rsv-ter-5);
}

.rsv-alaphero--felkesz .rsv-gombsor {
    margin-top: clamp(var(--rsv-ter-5), 2.6vw, var(--rsv-ter-6));
}

.rsv-alaphero--felkesz .rsv-felkesz-kiemelt {
    margin-top: clamp(var(--rsv-ter-6), 3vw, var(--rsv-ter-7));
}

@media (min-width: 992px) {
    .rsv-alaphero--felkesz .rsv-alaphero__racs {
        grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    }

    .rsv-alaphero--felkesz .rsv-alaphero__vizual {
        align-self: center;
        margin-top: 0;
    }
}

/* 30.2 A csomag képei — nincs dupla keret és nincs dupla árnyék
   --------------------------------------------------------------------------
   A `<figure>` sem keretet, sem hátteret, sem árnyékot nem kap: a mélységet a
   lezárt `.rsv-alap-vizual` adja (lap + szorzás + lágy perem), a heróban
   pedig a `.rsv-alaphero__vizual` ugyanaz — a kettőt halmozni nem szabad,
   mert két egymásra vetített fényudvar keletkezne.

   A MASTEREK FESTETT, TELJESEN KITÖLTÖTT JELENETEK (a rajz a vászon 100%-a),
   ezért a szorzásos keverés nem tünteti el a képszélt — azt a komponens lágy
   pereme oldja fel. Ugyanez a helyzet a `/koraszulottek` (29.2) és az
   `/rsv-utan` (22.2) készleténél.

   CROP NINCS: minden kép `object-fit: contain`, és sehol nincs `cover`,
   `clip-path` vagy negatív inset.
   -------------------------------------------------------------------------- */

.rsv-felkesz-vizual {
    margin: 0;
    line-height: 0;
}

.rsv-felkesz-vizual img {
    object-fit: contain;
}

/* 30.3 Kétoszlopos szakaszok
   --------------------------------------------------------------------------
   A lap öt képes tartalmi szakasza a globális `.rsv-ketto`-t használja,
   váltakozó oldalon. A szövegoszlopok jóval magasabbak a 900x700-as képnél,
   ezért a szöveg tetején indul, a vizuál pedig függőlegesen középre kerül.
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
    .rsv-felkesz-ketto { align-items: start; }

    .rsv-felkesz-ketto .rsv-ketto__vizual { align-self: center; }
}

.rsv-felkesz-ketto .rsv-ketto__szoveg > :last-child { margin-bottom: 0; }

/* 30.4 Felsorolások
   --------------------------------------------------------------------------
   KÉT VÁLTOZAT, ÉS A KÜLÖNBSÉG JELENTÉSBELI — ugyanaz az elv, mint a
   `/megelozes` oldalon (23.4): a PIPA konkrét, megtehető lépést jelöl (3.,
   5., 6., 7., 8. és 11. szakasz), a semleges pont pedig megbeszélendő
   kérdést vagy szempontot (2. szakasz).
   -------------------------------------------------------------------------- */

.rsv-felkesz-listacim {
    margin-bottom: var(--rsv-ter-4);
    font-weight: 600;
    color: var(--rsv-brand-dark);
}

.rsv-felkesz-listacim--kozepre {
    max-width: 68ch;
    margin-top: clamp(var(--rsv-ter-6), 3vw, var(--rsv-ter-7));
}

.rsv-felkesz-lista {
    list-style: none;

    /*
     * ALSÓ TÉRKÖZ KELL: több szakaszban bekezdés, zárás vagy gombsor KÖVETI
     * a felsorolást. Ahol a lista az utolsó elem, ott a szülő `> :last-child`
     * szabálya viszi el.
     */
    margin: 0 0 clamp(var(--rsv-ter-5), 2.4vw, var(--rsv-ter-6));
    padding: 0;
    display: grid;
    gap: var(--rsv-ter-3);
}

.rsv-felkesz-lista li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--rsv-ter-3);
    align-items: start;
    line-height: var(--rsv-sormagassag-torzs);
}

/*
 * A SEMLEGES JELÖLŐ egy kis korong; a PIPÁS változat ikont kap. Mindkettő
 * azonos szélességet foglal, hogy a szövegoszlop kezdete a két változatban
 * egy vonalba essen.
 */
.rsv-felkesz-lista__jel {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-top: .2em;
    border-radius: 50%;
    background: color-mix(in srgb, var(--rsv-brand-secondary) 16%, transparent);
    color: var(--rsv-brand-primary);
    --ikon-meret: 14px;
}

.rsv-felkesz-lista:not(.rsv-felkesz-lista--pipa) .rsv-felkesz-lista__jel::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--rsv-brand-primary);
}

/* 30.5 Kiemelt panelek
   --------------------------------------------------------------------------
   A lezárt `.rsv-alap-kiemelt` komponenst használják, tehát mindig LÁTHATÓK,
   és nem kerülnek összecsukható elembe. A hero, a 4., a 6. és a 11. szakasz
   használja; a 4. és a 6. hordozza a lap két legfontosabb negatív állítását.
   -------------------------------------------------------------------------- */

.rsv-felkesz-kiemelt {
    margin-top: clamp(var(--rsv-ter-5), 2.6vw, var(--rsv-ter-6));
    margin-bottom: clamp(var(--rsv-ter-5), 2.6vw, var(--rsv-ter-6));
}

/* 30.6 Záró állítás és jegyzet
   --------------------------------------------------------------------------
   A `zaras` több szakaszban GUARDRAILT hordoz (4. szakasz: nincs mesterséges
   időhatár; 7. szakasz: nem bezárkózás; 9. szakasz: a jogosultsági
   feltételeket szándékosan nem részletezzük), ezért saját, jelölt alakot kap.

   MIÉRT NEM SÜRGŐSSÉGI SZÍN? Mert ezek nem sürgős állítások, hanem
   megszorítások — a sürgősségi vizuális nyelv valódi sürgős tartalomé
   (kézikönyv §13). A jelölés ezért bal oldali márkavonal.

   A `jegyzet` az 5. szakasz külön `COPY.md`-mezője (nincs mesterséges „X
   napos családi izoláció"); ikonos, halványabb felületű sor, hogy ne olvadjon
   be a zárásba.
   -------------------------------------------------------------------------- */

.rsv-felkesz-zaras {
    margin-top: clamp(var(--rsv-ter-5), 2.4vw, var(--rsv-ter-6));
    margin-bottom: 0;
    padding-left: clamp(var(--rsv-ter-4), 2vw, var(--rsv-ter-5));
    border-left: 3px solid color-mix(in srgb, var(--rsv-brand-secondary) 55%, transparent);
    font-weight: 600;
    color: var(--rsv-brand-dark);
}

.rsv-felkesz-jegyzet {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--rsv-ter-3);
    align-items: start;
    margin-top: clamp(var(--rsv-ter-5), 2.4vw, var(--rsv-ter-6));
    margin-bottom: 0;
    padding: var(--rsv-ter-4) clamp(var(--rsv-ter-4), 2vw, var(--rsv-ter-5));
    background: var(--rsv-brand-bare);
    border-radius: var(--rsv-radius-md);
    font-size: var(--rsv-meret-kicsi);
    line-height: var(--rsv-sormagassag-torzs);
    color: var(--rsv-text-secondary);
}

.rsv-szekcio--bare .rsv-felkesz-jegyzet {
    background: var(--rsv-surface-card);
}

.rsv-felkesz-jegyzet__jel {
    display: grid;
    place-items: center;
    color: var(--rsv-brand-primary);
    --ikon-meret: 18px;
}

/* 30.7 A 4. szakasz — a négy látogatói kérés
   --------------------------------------------------------------------------
   A csomag ehhez a szakaszhoz nem ad képet, és új vizuált tervezni tilos.
   Ezért teljes szélességű: bevezető olvasási oszlopban, a kiemelés alatta,
   majd a négy kérés 2x2-es rácsban, ikonos csempéken.

   A NÉGY CSEMPE TELJESEN AZONOS: azonos felület, azonos jelölőméret, azonos
   tipográfia. Nincs sorszám és nincs irányjelölés — ez felsorolás, nem
   sorrend.
   -------------------------------------------------------------------------- */

.rsv-felkesz-bevezeto {
    max-width: 68ch;
}

.rsv-felkesz-bevezeto > :last-child { margin-bottom: 0; }

.rsv-felkesz-bevezeto--zaro {
    margin-top: clamp(var(--rsv-ter-6), 3vw, var(--rsv-ter-7));
}

.rsv-felkesz-csempek {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: clamp(var(--rsv-ter-4), 2.4vw, var(--rsv-ter-5));
}

@media (min-width: 768px) {
    .rsv-felkesz-csempek { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.rsv-felkesz-csempe {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(var(--rsv-ter-4), 2vw, var(--rsv-ter-5));

    /*
     * A NÉGY TÉTEL HOSSZA ELTÉR (a negyedik kétszer olyan hosszú, mint az
     * első). `align-content: start` a csoportot a csempe tetejére húzza, az
     * `align-items: center` pedig az ikont a szöveghez képest középre — így a
     * négy csempe felső éle egy vonalban indul. Ugyanaz a megoldás, mint a
     * `/koraszulottek` tényezőcsempéinél (29.6).
     */
    align-items: center;
    align-content: start;
    padding: clamp(var(--rsv-ter-5), 2.6vw, var(--rsv-ter-6));
    background: var(--rsv-brand-bare);
    border-radius: var(--rsv-radius-lg);
    box-shadow: inset 0 0 0 1px var(--rsv-border-default);
}

.rsv-szekcio--bare .rsv-felkesz-csempe {
    background: var(--rsv-surface-card);
}

.rsv-felkesz-csempe__jel {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--rsv-brand-secondary) 12%, transparent);
    color: var(--rsv-brand-primary);
    --ikon-meret: 28px;
}

.rsv-felkesz-csempe__szoveg {
    font-weight: 600;
    line-height: var(--rsv-sormagassag-torzs);
    color: var(--rsv-brand-dark);
}

/* 30.8 A 7. és a 8. szakasz — editorial split kép nélkül
   --------------------------------------------------------------------------
   992 px felett kétoszlopos EDITORIAL szerkezet: balra a szemöldök, a H2 és
   a lead, jobbra a kifejtés, a felsorolás és a zárás. A jobb hasáb finom bal
   oldali elválasztót kap, hogy a két rész összetartozzon.
   -------------------------------------------------------------------------- */

.rsv-felkesz-editorial {
    display: grid;
    gap: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-7));
}

.rsv-felkesz-editorial > * { min-width: 0; }

.rsv-felkesz-editorial__fej > :last-child,
.rsv-felkesz-editorial__torzs > :last-child { margin-bottom: 0; }

@media (min-width: 992px) {
    .rsv-felkesz-editorial {
        grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
        align-items: start;
    }

    .rsv-felkesz-editorial__torzs {
        padding-left: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-7));
        border-left: 1px solid var(--rsv-border-default);
    }
}

/* 30.9 A 10. szakasz — az „RSV-szezonra kész?" checklist
   --------------------------------------------------------------------------
   VALÓDI HTML, NEM KÉP (`FELADAT.md` „Checklist implementáció"). Saját,
   kiemelt panelt kap, mert ez a lap gyakorlati csúcspontja, és a hero
   elsődleges CTA-ja ide ugrik.

   NINCS APP-DASHBOARD HATÁS: nincs állapot, haladásjelző, számláló,
   százalék és `<input>`. A pipa STATIKUS jelölő — nem azt mondja, hogy a
   tétel „kész", hanem azt, hogy ez egy checklist-tétel.

   Desktopon két hasáb `column-count`-tal: a tíz tétel eltérő hosszúságú,
   ezért a szöveg mennyisége szerinti kitöltés kiegyensúlyozottabb, mint egy
   rács. A `break-inside: avoid` gondoskodik arról, hogy egy tétel ne törjön
   ketté a hasábhatáron.
   -------------------------------------------------------------------------- */

.rsv-felkesz-check {
    padding: clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-8));
    background: var(--rsv-brand-bare);
    border-radius: var(--rsv-radius-lg);
    box-shadow: inset 0 0 0 1px var(--rsv-border-default);
}

.rsv-szekcio--bare .rsv-felkesz-check {
    background: var(--rsv-surface-card);
}

.rsv-felkesz-check__fej {
    max-width: 68ch;
    margin-bottom: clamp(var(--rsv-ter-6), 3vw, var(--rsv-ter-7));
}

.rsv-felkesz-check__fej > :last-child { margin-bottom: 0; }

.rsv-felkesz-checklista {
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 992px) {
    .rsv-felkesz-checklista {
        column-count: 2;
        column-gap: clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-8));
    }
}

.rsv-felkesz-checktetel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--rsv-ter-4);
    align-items: start;

    /* Hasábtörés nem vághat ketté egy tételt. */
    break-inside: avoid;

    padding: var(--rsv-ter-4) 0;
    border-bottom: 1px solid var(--rsv-border-default);
    line-height: var(--rsv-sormagassag-torzs);
    color: var(--rsv-brand-dark);
}

.rsv-felkesz-checktetel__jel {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: var(--rsv-radius-sm);
    background: color-mix(in srgb, var(--rsv-brand-secondary) 16%, transparent);
    color: var(--rsv-brand-primary);
    --ikon-meret: 18px;
}

.rsv-felkesz-check__gombsor {
    margin-top: clamp(var(--rsv-ter-6), 3vw, var(--rsv-ter-7));
}

/* 30.10 A 11. szakasz — záró panel
   --------------------------------------------------------------------------
   A lap záró gondolata, kép nélkül: olvasási szélességű panel, amely lezárja
   a tartalmi ívet a routing előtt.

   A PANEL BALRA ZÁRT, nem középre: felsorolást is tartalmaz, és a középre
   igazított listaelemek olvashatatlanná tennék a sorkezdeteket.
   -------------------------------------------------------------------------- */

.rsv-felkesz-zaropanel {
    padding: clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-8));
    background: var(--rsv-brand-bare);
    border-radius: var(--rsv-radius-lg);
    box-shadow: inset 0 0 0 1px var(--rsv-border-default);
}

.rsv-szekcio--bare .rsv-felkesz-zaropanel {
    background: var(--rsv-surface-card);
}

.rsv-felkesz-zaropanel > :last-child { margin-bottom: 0; }

/* 30.11 Routing kártyák — a lezárt komponens egy extra sorral
   --------------------------------------------------------------------------
   A `COPY.md` 14. szakasza minden kártyához ad egy leíró mondatot is. A
   lezárt `.rsv-alap-tovabb` szerkezete változatlan; csak ez az egy
   oldalspecifikus sor egészíti ki.
   -------------------------------------------------------------------------- */

.rsv-felkesz-tovabb__leiras {
    margin-top: var(--rsv-ter-2);
    font-size: var(--rsv-meret-kicsi);
    line-height: var(--rsv-sormagassag-torzs);
    color: var(--rsv-text-secondary);
}

/* 30.12 Mozgás
   --------------------------------------------------------------------------
   Nincs saját, folyamatos ambient animáció: a belépő mozgás a közös
   `data-rsv-belep` réteg, amelyet a 35. szakasz `prefers-reduced-motion`
   fallbackje kapcsol ki.
   -------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
    .rsv-felkesz-csempe {
        transition: box-shadow .25s ease;
    }
}




/* --------------------------------------------------------------------------
   31. Az `/rsv-profilaxis` ALOLDAL — „RSV-profilaxis koraszülött és magas
       kockázatú gyermekeknél"

   KANONIKUS FORRÁS: az `RSV_PROFILAXIS_PAGE_v1` csomag `FELADAT.md` és
   `COPY.md` fájlja. Az öt raszter a csomag `assets/` mappájából való; a
   beépítés előtti KÖTELEZŐ asset gate MEGFELELT (hero 1400x900, négy
   szekciókép 900x700, kitöltés 100%, középpont 49,9–50,0%, beégetett szöveg,
   szám és UI-elem nincs).

   ===========================================================================
    MIÉRT `.rsv-jogosultsag*` A NÉVTÉR?
   ===========================================================================
   A kézenfekvő `.rsv-profil*` RÉSZLEGES EGYEZÉST adna magával az URL-lel
   (`/rsv-profilaxis`), amely a lapon és a rá hivatkozó oldalakon is
   előfordul — egy „nem szivárog át" típusú teszt így hamisan bukna rajta.
   Ez a munkamenet-átadó §5.11 tanulsága: ott négy hamis bukást okozott, hogy
   egy osztálynév előtagja volt egy másiknak.

   A képmappa viszont az URL-slugot követi: `web/assets/images/rsv-profilaxis/`,
   `prof-` fájlelőtaggal.

   ===========================================================================
    MI ÖRÖKÖLT ÉS MI ÚJ
   ===========================================================================
   A page-hero, az aloldali szekcióritmus, a képmélység, az insight-panel, a
   routing kártyák, a szószedet és a forrásblokk a 13. szakasz `.rsv-alap*`
   készletéből jön — ez a szakasz KIZÁRÓLAG az oldal SAJÁTJÁT tartalmazza.
   Új színpaletta nem keletkezett: minden érték a 2. szakasz tokenjeiből vagy
   azok `color-mix()`-éből származik, és a szakaszban egyetlen nyers hexérték
   sincs. Új ikon sem készült.

   ===========================================================================
    A LEGMAGASABB TÉTŰ SZABÁLY: 35. HÉT ≠ 32. HÉT
   ===========================================================================
   A `FELADAT.md` §4–§6 kimondja:

     - a 35. gesztációs hét KIZÁRÓLAG EMA / SmPC koraszülött indikáció;
     - a 32. gesztációs hét KIZÁRÓLAG magyar TB-finanszírozási feltétel;
     - a kettőt SEM SZÖVEGBEN, SEM UI-BAN nem szabad összemosni.

   A megoldás az 5. szakasz `.rsv-jogosultsag-het` panelje. Minden panel egy
   `data-rsv-rendszer` attribútumot visel (`ema` vagy `magyar`), és ebből
   származik a `--rsv-rendszer` szín is. A hétszám (`__ertek`) SOHA nem áll
   önmagában: mindig a rendszer CÍMKÉJE alatt, azonos kártyán belül.

   A KÉT PANEL EGYENRANGÚ. Nincs köztük nyíl, sorszám, „vs." felirat vagy
   méretkülönbség — a szűkítést maga a szöveg mondja ki, a következtetést
   pedig a panelek alatti kiemelés. Sürgősségi színt (`--rsv-urgent`,
   `--rsv-warning`) a szakasz nem használ: ez fogalmi elhatárolás, nem triázs
   (kézikönyv §13).

   MIÉRT KÉT KÜLÖNBÖZŐ MÁRKASZÍN A KÉT PANELEN? Mert a `FELADAT.md` §6
   kifejezetten UI-szintű szétválasztást is kér. A két érték a MEGLÉVŐ
   tokenkészletből jön (`--rsv-brand-secondary` és `--rsv-brand-primary`),
   tehát nem új paletta — csak a két szabályrendszer következetes, egymástól
   megkülönböztethető jelölése.

   ===========================================================================
    MINDEN SZÁM HTML/CSS — SEMMI RASZTERRE
   ===========================================================================
   A `FELADAT.md` §15 szerint a finanszírozási, 35/32 hetes, dózis- és
   palivizumab–nirsevimab összehasonlító információ kizárólag HTML/CSS-ben
   jelenhet meg. Ezért van saját komponense a párnak (`.rsv-jogosultsag-par`),
   a hétpanelnek (`.rsv-jogosultsag-het`), a státuszkártyáknak
   (`.rsv-jogosultsag-statusz`) és a kérdéslistának
   (`.rsv-jogosultsag-kerdespanel`). Az öt raszter kizárólag illusztráció.
   -------------------------------------------------------------------------- */

/* 31.1 Page hero
   --------------------------------------------------------------------------
   A hero mastere SZÉLES, fekvő kompozíció (1400x900), a szövegoszlop pedig a
   H1 mellett leadet, egy hangsúlyos állítást ÉS egy bekezdést is visz —
   ezért a vizuál középre igazodik, és nem emelkedik a morzsamenü sávjába.

   A HERO KIEMELÉSE A RÁCS ALATT, TELJES SZÉLESSÉGBEN áll: ez a lap gondolati
   gerince (alkalmazható ≠ finanszírozott), ezért nem szorulhat a szövegoszlop
   aljára.
   -------------------------------------------------------------------------- */

.rsv-alaphero--jogosultsag .rsv-alaphero__lead {
    margin-bottom: var(--rsv-ter-5);
}

.rsv-alaphero--jogosultsag .rsv-jogosultsag-kiemelt {
    margin-top: clamp(var(--rsv-ter-6), 3vw, var(--rsv-ter-7));
}

@media (min-width: 992px) {
    .rsv-alaphero--jogosultsag .rsv-alaphero__racs {
        grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    }

    .rsv-alaphero--jogosultsag .rsv-alaphero__vizual {
        align-self: center;
        margin-top: 0;
    }
}

/* 31.2 „Ez nem védőoltás." — a lap legfontosabb terminológiai állítása
   --------------------------------------------------------------------------
   A `COPY.md`-ben ez a hero első bekezdése, egyetlen rövid mondat. Egyszerű
   bekezdésként elveszne a lead és a hosszabb magyarázó bekezdés között,
   ezért ikonos, hangsúlyos alakot kap — a SZÖVEGE változatlan, és nem kerül
   összecsukható elembe (`FELADAT.md` §1).
   -------------------------------------------------------------------------- */

.rsv-jogosultsag-allitas {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--rsv-ter-3);
    align-items: center;
    margin-bottom: var(--rsv-ter-5);
    padding: var(--rsv-ter-4) clamp(var(--rsv-ter-4), 2vw, var(--rsv-ter-5));
    background: color-mix(in srgb, var(--rsv-brand-secondary) 10%, transparent);
    border-radius: var(--rsv-radius-md);
    font-weight: 700;
    color: var(--rsv-brand-dark);
}

.rsv-jogosultsag-allitas__jel {
    display: grid;
    place-items: center;
    color: var(--rsv-brand-primary);
    --ikon-meret: 20px;
}

/* 31.3 A csomag képei — nincs dupla keret és nincs dupla árnyék
   --------------------------------------------------------------------------
   A `<figure>` sem keretet, sem hátteret, sem árnyékot nem kap: a mélységet a
   lezárt `.rsv-alap-vizual` adja, a heróban pedig a `.rsv-alaphero__vizual`
   ugyanaz — a kettőt halmozni nem szabad.

   CROP NINCS: minden kép `object-fit: contain`, és sehol nincs `cover`,
   `clip-path` vagy negatív inset.
   -------------------------------------------------------------------------- */

.rsv-jogosultsag-vizual {
    margin: 0;
    line-height: 0;
}

.rsv-jogosultsag-vizual img {
    object-fit: contain;
}

/* 31.4 Kétoszlopos szakaszok
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
    .rsv-jogosultsag-ketto { align-items: start; }

    .rsv-jogosultsag-ketto .rsv-ketto__vizual { align-self: center; }
}

.rsv-jogosultsag-ketto .rsv-ketto__szoveg > :last-child { margin-bottom: 0; }

/* 31.5 Bevezető, felsorolás, zárás
   --------------------------------------------------------------------------
   EZEN A LAPON MINDEN FELSOROLÁS SZEMPONT VAGY KÉRDÉS, nem elvégzendő
   lépés — ezért nincs pipás változat. A 12. szakasz kérdéslistája
   kérdőjel-glyphet kap, a többi semleges korongot.
   -------------------------------------------------------------------------- */

.rsv-jogosultsag-bevezeto {
    max-width: 68ch;
}

.rsv-jogosultsag-bevezeto > :last-child { margin-bottom: 0; }

.rsv-jogosultsag-bevezeto--zaro {
    margin-top: clamp(var(--rsv-ter-6), 3vw, var(--rsv-ter-7));
}

.rsv-jogosultsag-listacim {
    margin-bottom: var(--rsv-ter-4);
    font-weight: 600;
    color: var(--rsv-brand-dark);
}

.rsv-jogosultsag-lista {
    list-style: none;
    margin: 0 0 clamp(var(--rsv-ter-5), 2.4vw, var(--rsv-ter-6));
    padding: 0;
    display: grid;
    gap: var(--rsv-ter-3);
}

.rsv-jogosultsag-lista li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--rsv-ter-3);
    align-items: start;
    line-height: var(--rsv-sormagassag-torzs);
}

.rsv-jogosultsag-lista__jel {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-top: .2em;
    border-radius: 50%;
    background: color-mix(in srgb, var(--rsv-brand-secondary) 16%, transparent);
    color: var(--rsv-brand-primary);
    --ikon-meret: 13px;
}

.rsv-jogosultsag-lista:not(.rsv-jogosultsag-lista--kerdes) .rsv-jogosultsag-lista__jel::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--rsv-brand-primary);
}

.rsv-jogosultsag-zaras {
    margin-top: clamp(var(--rsv-ter-5), 2.4vw, var(--rsv-ter-6));
    margin-bottom: 0;
    padding-left: clamp(var(--rsv-ter-4), 2vw, var(--rsv-ter-5));
    border-left: 3px solid color-mix(in srgb, var(--rsv-brand-secondary) 55%, transparent);
    font-weight: 600;
    color: var(--rsv-brand-dark);
}

/* 31.6 Kiemelt panelek
   -------------------------------------------------------------------------- */

.rsv-jogosultsag-kiemelt {
    margin-top: clamp(var(--rsv-ter-5), 2.6vw, var(--rsv-ter-6));
    margin-bottom: clamp(var(--rsv-ter-5), 2.6vw, var(--rsv-ter-6));
}

/* 31.7 A 3. és a 4. szakasz — szembeállított fogalmi pár
   --------------------------------------------------------------------------
   KIZÁRÓLAG HTML/CSS (`FELADAT.md` §15). Két helyen fut ugyanez a
   szerkezet: a palivizumab–nirsevimab összehasonlításnál (3.) és az
   „alkalmazható ≠ TB-finanszírozott" elhatárolásnál (4.). Így a lap két
   szembeállítása vizuálisan is egy nyelvet beszél.

   A PÁR KÉT FELE EGYENRANGÚ: azonos felület, azonos jelölőméret, azonos
   tipográfia. Nincs köztük nyíl, sorszám vagy „jobb/rosszabb" jelölés — ez
   fogalmi elhatárolás, nem ajánlás.
   -------------------------------------------------------------------------- */

.rsv-jogosultsag-par {
    list-style: none;
    margin: clamp(var(--rsv-ter-6), 3vw, var(--rsv-ter-7)) 0 0;
    padding: 0;
    display: grid;
    gap: clamp(var(--rsv-ter-5), 2.6vw, var(--rsv-ter-6));
}

@media (min-width: 768px) {
    .rsv-jogosultsag-par { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.rsv-jogosultsag-par__elem {
    display: grid;
    gap: var(--rsv-ter-3);
    align-content: start;
    padding: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-6));
    background: var(--rsv-brand-bare);
    border-radius: var(--rsv-radius-lg);
    box-shadow: inset 0 0 0 1px var(--rsv-border-default);
}

.rsv-szekcio--bare .rsv-jogosultsag-par__elem {
    background: var(--rsv-surface-card);
}

.rsv-jogosultsag-par__elem > :last-child { margin-bottom: 0; }

.rsv-jogosultsag-par__jel {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--rsv-brand-secondary) 12%, transparent);
    color: var(--rsv-brand-primary);
    --ikon-meret: 28px;
}

.rsv-jogosultsag-par__cim {
    margin: 0;
    font-size: var(--rsv-meret-h4);
    line-height: var(--rsv-sormagassag-cim);
    color: var(--rsv-brand-dark);
}

/* 31.8 Az 5. szakasz — 35. hét vs. 32. hét
   --------------------------------------------------------------------------
   ===========================================================================
    A LAP LEGMAGASABB TÉTŰ KOMPONENSE (`FELADAT.md` §4, §5, §6)
   ===========================================================================
   A két hétszám két KÜLÖN szabályrendszeré, és a §6 kifejezetten UI-szintű
   szétválasztást is kér.

   HÁROM DOLOG BIZTOSÍTJA, HOGY NE MOSÓDJANAK ÖSSZE:

     1. minden panel `data-rsv-rendszer` attribútumot visel (`ema` vagy
        `magyar`), és ebből származik a `--rsv-rendszer` szín;
     2. a hétszám (`__ertek`) SOHA nem áll önmagában: mindig a rendszer
        CÍMKÉJE (`__cimke`) alatt, azonos kártyán belül;
     3. a kártya bal oldali sávja a rendszer színét viszi, tehát a két
        szabályrendszer végig megkülönböztethető marad.

   A KÉT PANEL EGYENRANGÚ: azonos méret, azonos tipográfia, nincs közöttük
   nyíl, sorszám vagy „vs." felirat.

   A `--rsv-rendszer` KÉT ÉRTÉKE A MEGLÉVŐ TOKENEKBŐL jön — nem új paletta.
   -------------------------------------------------------------------------- */

.rsv-jogosultsag-hetek {
    list-style: none;
    margin: clamp(var(--rsv-ter-6), 3vw, var(--rsv-ter-7)) 0 0;
    padding: 0;
    display: grid;
    gap: clamp(var(--rsv-ter-5), 2.6vw, var(--rsv-ter-6));
}

@media (min-width: 768px) {
    .rsv-jogosultsag-hetek { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.rsv-jogosultsag-het {
    /* Alapérték: ha valaha ismeretlen rendszerrel érkezne panel, akkor is
       márkaszínt kap, nem öröklődő véletlen értéket. */
    --rsv-rendszer: var(--rsv-brand-primary);

    display: grid;
    gap: var(--rsv-ter-4);
    align-content: start;
    padding: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-6));
    background: var(--rsv-surface-card);
    border-radius: var(--rsv-radius-lg);
    box-shadow: inset 0 0 0 1px var(--rsv-border-default);
    border-left: 4px solid var(--rsv-rendszer);
}

.rsv-jogosultsag-het[data-rsv-rendszer="ema"] {
    --rsv-rendszer: var(--rsv-brand-secondary);
}

.rsv-jogosultsag-het[data-rsv-rendszer="magyar"] {
    --rsv-rendszer: var(--rsv-brand-primary);
}

.rsv-jogosultsag-het > :last-child { margin-bottom: 0; }

.rsv-jogosultsag-het__cimke {
    display: flex;
    align-items: center;
    gap: var(--rsv-ter-3);
    font-size: var(--rsv-meret-kicsi);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--rsv-rendszer);
}

.rsv-jogosultsag-het__jel {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 50%;
    background: color-mix(in srgb, var(--rsv-rendszer) 14%, transparent);
    --ikon-meret: 20px;
}

/*
 * A HÉTSZÁM. Nagy, de NEM a lap legnagyobb tipográfiája — a hangsúly a
 * címkével együtt értelmezett egészen van, nem a puszta számon.
 */
.rsv-jogosultsag-het__ertek {
    margin: 0;
    font-size: clamp(1.35rem, 2.4vw, 1.75rem);
    font-weight: 800;
    line-height: var(--rsv-sormagassag-cim);
    color: var(--rsv-brand-dark);
}

/* 31.9 A 6. és a 7. szakasz — editorial split kép nélkül
   --------------------------------------------------------------------------
   A csomag ezekhez a szakaszokhoz nem ad képet, és új vizuált tervezni tilos.
   992 px felett ezért kétoszlopos editorial szerkezetet kapnak: balra a
   szemöldök, a H2 és a lead, jobbra a kifejtés, a kiemelés és a zárás.
   -------------------------------------------------------------------------- */

.rsv-jogosultsag-editorial {
    display: grid;
    gap: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-7));
}

.rsv-jogosultsag-editorial > * { min-width: 0; }

.rsv-jogosultsag-editorial__fej > :last-child,
.rsv-jogosultsag-editorial__torzs > :last-child { margin-bottom: 0; }

@media (min-width: 992px) {
    .rsv-jogosultsag-editorial {
        grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
        align-items: start;
    }

    .rsv-jogosultsag-editorial__torzs {
        padding-left: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-7));
        border-left: 1px solid var(--rsv-border-default);
    }
}

/* 31.10 A 10. szakasz — az időérzékeny státuszblokk
   --------------------------------------------------------------------------
   FRISSÍTHETŐ HTML STÁTUSZBLOKK, JÓL LÁTHATÓ ELLENŐRZÉSI DÁTUMMAL
   (`FELADAT.md` implementációs scope). A dátum a H2-ben, `<time datetime>`
   gépi alakkal áll.

   A KÉT KÉSZÍTMÉNY KÉT KÜLÖN KÁRTYÁT KAP. A `__allitas` sor hordozza a
   státuszmondatot: a palivizumabnál a rendelkezésre állást, a nirsevimabnál
   a §11 szerinti, SZÓ SZERINT megtartandó ellenőrzési állítást. Mindkettő
   LÁTHATÓAN, összecsukható elem nélkül.

   A státuszkártya NEM kap sürgősségi színt: ez tájékoztatás, nem triázs.
   -------------------------------------------------------------------------- */

.rsv-jogosultsag-statuszok {
    list-style: none;
    margin: clamp(var(--rsv-ter-6), 3vw, var(--rsv-ter-7)) 0 0;
    padding: 0;
    display: grid;
    gap: clamp(var(--rsv-ter-5), 2.6vw, var(--rsv-ter-6));
}

@media (min-width: 992px) {
    .rsv-jogosultsag-statuszok { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.rsv-jogosultsag-statusz {
    display: grid;
    gap: var(--rsv-ter-4);
    align-content: start;
    padding: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-6));
    background: var(--rsv-brand-bare);
    border-radius: var(--rsv-radius-lg);
    box-shadow: inset 0 0 0 1px var(--rsv-border-default);
}

.rsv-szekcio--bare .rsv-jogosultsag-statusz {
    background: var(--rsv-surface-card);
}

.rsv-jogosultsag-statusz > :last-child { margin-bottom: 0; }

.rsv-jogosultsag-statusz__cimke {
    display: flex;
    align-items: center;
    gap: var(--rsv-ter-3);
    font-size: var(--rsv-meret-kicsi);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--rsv-brand-primary);
}

.rsv-jogosultsag-statusz__jel {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 50%;
    background: color-mix(in srgb, var(--rsv-brand-secondary) 14%, transparent);
    --ikon-meret: 20px;
}

.rsv-jogosultsag-statusz__allitas {
    margin: 0;
    padding: var(--rsv-ter-4) clamp(var(--rsv-ter-4), 2vw, var(--rsv-ter-5));
    background: color-mix(in srgb, var(--rsv-brand-secondary) 10%, transparent);
    border-radius: var(--rsv-radius-md);
    font-weight: 600;
    line-height: var(--rsv-sormagassag-torzs);
    color: var(--rsv-brand-dark);
}

/* 31.11 A 12. szakasz — kérdéslista
   --------------------------------------------------------------------------
   HTML/CSS komponens (`FELADAT.md` §15), kép nélküli szakasz, ezért saját,
   kiemelt panelt kap. Desktopon két hasáb `column-count`-tal: a hét kérdés
   eltérő hosszúságú, ezért a szöveg mennyisége szerinti kitöltés
   kiegyensúlyozottabb, mint egy rács. A `break-inside: avoid` gondoskodik
   arról, hogy egy kérdés ne törjön ketté a hasábhatáron.
   -------------------------------------------------------------------------- */

.rsv-jogosultsag-kerdespanel {
    padding: clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-8));
    background: var(--rsv-brand-bare);
    border-radius: var(--rsv-radius-lg);
    box-shadow: inset 0 0 0 1px var(--rsv-border-default);
}

.rsv-szekcio--bare .rsv-jogosultsag-kerdespanel {
    background: var(--rsv-surface-card);
}

.rsv-jogosultsag-kerdespanel > :last-child { margin-bottom: 0; }

.rsv-jogosultsag-kerdespanel__fej {
    max-width: 68ch;
    margin-bottom: clamp(var(--rsv-ter-5), 2.6vw, var(--rsv-ter-6));
}

.rsv-jogosultsag-kerdespanel__fej > :last-child { margin-bottom: 0; }

@media (min-width: 992px) {
    .rsv-jogosultsag-kerdespanel .rsv-jogosultsag-lista--kerdes {
        column-count: 2;
        column-gap: clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-8));
        display: block;
    }

    .rsv-jogosultsag-kerdespanel .rsv-jogosultsag-lista--kerdes li {
        break-inside: avoid;
        margin-bottom: var(--rsv-ter-4);
    }
}

/* 31.12 A 13. szakasz — záró panel
   -------------------------------------------------------------------------- */

.rsv-jogosultsag-zaropanel {
    padding: clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-8));
    background: var(--rsv-brand-bare);
    border-radius: var(--rsv-radius-lg);
    box-shadow: inset 0 0 0 1px var(--rsv-border-default);
}

.rsv-szekcio--bare .rsv-jogosultsag-zaropanel {
    background: var(--rsv-surface-card);
}

.rsv-jogosultsag-zaropanel > :last-child { margin-bottom: 0; }

/* 31.13 Routing kártyák — a lezárt komponens egy extra sorral
   -------------------------------------------------------------------------- */

.rsv-jogosultsag-tovabb__leiras {
    margin-top: var(--rsv-ter-2);
    font-size: var(--rsv-meret-kicsi);
    line-height: var(--rsv-sormagassag-torzs);
    color: var(--rsv-text-secondary);
}

/* 31.14 Forrásblokk hivatkozásokkal
   --------------------------------------------------------------------------
   EZ AZ ELSŐ FORRÁSLISTA A PROJEKTBEN, AMELY HIVATKOZÁSOKAT IS AD. A hat
   hivatalos forrás mindegyike kattintható; a link a törzsszöveg színét
   viszi, aláhúzással — nem gomb, mert ez forrásjegyzék, nem CTA.

   A HOSSZÚ HIVATKOZÁSCÍMEK MIATT `overflow-wrap` kell: a NEAK és az OGYÉI
   tételek címe hosszú, egybefüggő szakkifejezéseket tartalmaz, amelyek
   keskeny nézetben kilógnának.
   -------------------------------------------------------------------------- */

.rsv-jogosultsag-forrasok li {
    margin-bottom: var(--rsv-ter-3);
}

.rsv-jogosultsag-forras__link {
    color: var(--rsv-brand-dark);
    text-decoration: underline;
    text-underline-offset: .18em;
    overflow-wrap: anywhere;
}

.rsv-jogosultsag-forras__link:hover,
.rsv-jogosultsag-forras__link:focus-visible {
    color: var(--rsv-brand-primary);
}

/* 31.15 Mozgás
   --------------------------------------------------------------------------
   Nincs saját, folyamatos ambient animáció: a belépő mozgás a közös
   `data-rsv-belep` réteg, amelyet a 35. szakasz `prefers-reduced-motion`
   fallbackje kapcsol ki.
   -------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
    .rsv-jogosultsag-par__elem,
    .rsv-jogosultsag-het,
    .rsv-jogosultsag-statusz {
        transition: box-shadow .25s ease;
    }
}


/* --------------------------------------------------------------------------
   32. A TUDÁSTÁR — listaoldal és cikkoldal
   --------------------------------------------------------------------------
   Az első DB-alapú publikus felület a projektben. Nem épült hozzá külön
   „blog-design system": a kártya a főoldal 11. szakaszának `.rsv-cikkkartya`
   komponense, a képmélység a lezárt `.rsv-alap-vizual`, a forrásblokk az
   `.rsv-alap-forrasok`.

   ÚJ SZÍN NEM KELETKEZETT: minden érték a 2. szakasz tokenjeiből vagy azok
   `color-mix()` / `rgba()` alakjából jön.

   OLVASÁSI OSZLOP: az arculati kézikönyv §7.1 szerint a Tudástár-cikké kb.
   760–850 px. A kép, a videó és a kiemelt doboz szándékosan túlnyúlhat rajta
   — ettől lesz szerkesztőségi ritmusa a lapnak, és nem lesz monoton hasáb.

   „A lila a karakter, nem a tapéta" (kézikönyv §3): a hosszú olvasófelület
   világos, a lila a címkéken, a kiemeléseken és a fejlécen dolgozik.
   -------------------------------------------------------------------------- */

/* 32.0 A FEJLÉC MÖGÖTTI SÁV
   --------------------------------------------------------------------------
   A `.rsv-fejlec` ÁTLÁTSZÓ, és `sticky` módon a lap tetején ül: a menü fehér
   kártyája körül látszó sáv színét a `body` háttere adja (`--rsv-surface-page`,
   közel fehér). A Tudástár lapjain emiatt a lavender hero fölött maradt egy
   fehér csík, és a menü fehér mezőben lebegett.

   MEGOLDÁS: a `body` háttere ezeken a lapokon lavender — pontosan az a szín,
   amellyel a hero átmenete INDUL (`--rsv-brand-soft`), így a kettő
   észrevétlenül összeér.

   MIÉRT NEM A FEJLÉCET SZÍNEZZÜK? Mert a fejléc a webhely MINDEN oldalán
   átlátszó marad görgetés közben is — a tartalom szándékosan csúszik el
   mögötte. Ha itt hátteret kapna, a Tudástáron más lenne a viselkedése, mint
   máshol. A `body` viszont KIZÁRÓLAG a fejléc mögött látszik: alatta minden
   szakasznak saját háttere van.
   -------------------------------------------------------------------------- */

body:has(.rsv-tudastar-oldal),
body:has(.rsv-cikk-oldal) {
    background-color: var(--rsv-brand-soft);
}

/* 32.1 A listaoldal fejléce
   -------------------------------------------------------------------------- */

/*
   A FELSŐ PADDING SZÁNDÉKOSAN KICSI.

   Eredetileg `clamp(48px, 6vw, 96px)` volt, ami 1440 px-en 86 px-et adott —
   és erre rakódott a morzsamenü alsó margója (29 px) meg a szövegblokk
   saját margója (24 px). A fejléc alja és a H1 között így 214 px üresedett
   ki: a lavender sáv teteje látványosan kongott.

   A fejléc `sticky`, tehát a hero KÖZVETLENÜL alatta kezdődik; nem kell
   helyet hagyni neki. A levegőt a morzsamenü és a szövegblokk saját
   ritmusa adja, nem a szekció padding-ja.
*/
.rsv-tudastarfej {
    position: relative;
    overflow: hidden;
    padding-block: clamp(var(--rsv-ter-5), 2.5vw, var(--rsv-ter-6)) var(--rsv-ter-6);
    background: linear-gradient(180deg, var(--rsv-brand-soft) 0%, var(--rsv-brand-bare) 100%);
}

.rsv-tudastarfej__fenyudvar {
    position: absolute;
    inset-block-start: -40%;
    inset-inline-end: -10%;
    inline-size: min(560px, 70vw);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--rsv-brand-secondary) 16%, transparent) 0%,
        transparent 70%
    );
    pointer-events: none;
}

/*
   A morzsamenü ALSÓ margója (`morzsamenu--hero`) már ad kb. 29 px-et, ezért
   itt elég a feleakkora köz — enélkül a kettő összeadódik.
*/
.rsv-tudastarfej__szoveg {
    position: relative;
    z-index: 1;
    max-width: 780px;
    margin-block-start: var(--rsv-ter-3);
}

.rsv-tudastarfej__cim {
    margin-block: var(--rsv-ter-3) var(--rsv-ter-4);
}

.rsv-tudastarfej__lead {
    margin-block-end: 0;
}

/* 32.2 Címkeszűrő
   --------------------------------------------------------------------------
   Valódi hivatkozások (query paraméteres szűrés, IA D4), tehát JavaScript
   nélkül is működnek. Az aktív állapotot `aria-current` IS jelöli, nem csak
   a szín — a jelentés soha nem múlhat kizárólag színen (kézikönyv §18).
   -------------------------------------------------------------------------- */

.rsv-tudastarszuro {
    position: relative;
    z-index: 2;
    padding-block: var(--rsv-ter-5);
    background: var(--rsv-brand-bare);
    border-block-end: 1px solid var(--rsv-border-default);
}

.rsv-tudastarszuro__lista {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rsv-ter-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.rsv-tudastarszuro__elem {
    display: inline-flex;
    align-items: center;
    gap: var(--rsv-ter-2);
    padding: 10px var(--rsv-ter-4);
    border: 1px solid var(--rsv-border-default);
    border-radius: var(--rsv-radius-pill);
    background: var(--rsv-surface-card);
    color: var(--rsv-text-secondary);
    font-size: .94rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

.rsv-tudastarszuro__elem:hover,
.rsv-tudastarszuro__elem:focus-visible {
    border-color: color-mix(in srgb, var(--rsv-brand-primary) 45%, transparent);
    color: var(--rsv-brand-primary);
    background: var(--rsv-brand-soft);
}

.rsv-tudastarszuro__elem--aktiv {
    border-color: var(--rsv-brand-primary);
    background: var(--rsv-brand-primary);
    color: #fff;
}

.rsv-tudastarszuro__elem--aktiv:hover,
.rsv-tudastarszuro__elem--aktiv:focus-visible {
    background: var(--rsv-brand-dark);
    border-color: var(--rsv-brand-dark);
    color: #fff;
}

.rsv-tudastarszuro__db {
    display: inline-block;
    min-inline-size: 20px;
    padding-inline: 6px;
    border-radius: var(--rsv-radius-pill);
    background: color-mix(in srgb, var(--rsv-brand-primary) 12%, transparent);
    color: inherit;
    font-size: .8rem;
    text-align: center;
}

.rsv-tudastarszuro__elem--aktiv .rsv-tudastarszuro__db {
    background: rgba(255, 255, 255, .22);
}

/* 32.3 A lista
   -------------------------------------------------------------------------- */

.rsv-tudastarlista {
    background: var(--rsv-surface-page);
}

/*
   A főoldali `.rsv-cikkracs` három kártyát tesz egy sorba. A Tudástárban
   ennél több cikk van, ezért `auto-fill`: a rács a rendelkezésre álló
   helytől függően tölt, és nem marad félbehagyott sor.
*/
.rsv-cikkracs--tudastar {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-6));
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 640px) {
    .rsv-cikkracs--tudastar {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

/* 32.4 Kiemelt cikk
   --------------------------------------------------------------------------
   Csak az első oldalon, és csak aktív időablak esetén. Vízszintes elrendezés
   választja el a normál kártyáktól — a kiemelés így akkor is látszik, ha a
   „Kiemelt" felirat nem olvasható (például nagyítva).
   -------------------------------------------------------------------------- */

.rsv-kiemeltcikk {
    margin-block-end: clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-8));
}

.rsv-kiemeltcikk__link {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--rsv-ter-5);
    padding: var(--rsv-ter-5);
    border: 1px solid var(--rsv-border-default);
    border-radius: var(--rsv-radius-lg);
    background: var(--rsv-surface-card);
    box-shadow: var(--rsv-arnyek-sm);
    color: inherit;
    text-decoration: none;
    transition: box-shadow .25s ease, border-color .25s ease;
}

@media (min-width: 768px) {
    .rsv-kiemeltcikk__link {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        align-items: center;
        gap: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-7));
        padding: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-7));
    }
}

.rsv-kiemeltcikk__link:hover,
.rsv-kiemeltcikk__link:focus-visible {
    border-color: color-mix(in srgb, var(--rsv-brand-primary) 40%, transparent);
    box-shadow: var(--rsv-arnyek-md);
}

.rsv-kiemeltcikk__kep {
    display: block;
    overflow: hidden;
    border-radius: var(--rsv-radius-md);
    background: var(--rsv-brand-bare);
}

.rsv-kiemeltcikk__kep img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 16 / 9;
    object-fit: contain;
}

.rsv-kiemeltcikk__torzs {
    display: block;
}

.rsv-kiemeltcikk__jelolo {
    display: inline-block;
    margin-block-end: var(--rsv-ter-3);
    padding: 4px var(--rsv-ter-3);
    border-radius: var(--rsv-radius-pill);
    background: var(--rsv-brand-primary);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.rsv-kiemeltcikk__cim {
    display: block;
    margin-block-end: var(--rsv-ter-3);
    color: var(--rsv-text-primary);
    font-size: clamp(1.45rem, 2.6vw, 2rem);
    font-weight: 700;
    line-height: 1.25;
}

.rsv-kiemeltcikk__leiras {
    display: block;
    color: var(--rsv-text-secondary);
    line-height: 1.65;
}

/* 32.5 Üres állapot és lapozó
   -------------------------------------------------------------------------- */

.rsv-tudastarures {
    max-width: 620px;
    margin-inline: auto;
    padding-block: clamp(var(--rsv-ter-7), 6vw, var(--rsv-ter-9));
    text-align: center;
}

.rsv-tudastarures__lead {
    margin-block: var(--rsv-ter-3) var(--rsv-ter-5);
    color: var(--rsv-text-secondary);
}

.rsv-lapozo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--rsv-ter-4);
    margin-block-start: clamp(var(--rsv-ter-7), 5vw, var(--rsv-ter-8));
}

.rsv-lapozo__elem {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    padding: 10px var(--rsv-ter-5);
    border: 1px solid var(--rsv-border-default);
    border-radius: var(--rsv-radius-gomb);
    background: var(--rsv-surface-card);
    color: var(--rsv-brand-primary);
    font-weight: 600;
    text-decoration: none;
}

.rsv-lapozo__elem:hover,
.rsv-lapozo__elem:focus-visible {
    border-color: var(--rsv-brand-primary);
    background: var(--rsv-brand-soft);
}

.rsv-lapozo__allas {
    color: var(--rsv-text-secondary);
    font-size: .94rem;
}

/* 32.6 A cikkoldal fejléce
   -------------------------------------------------------------------------- */

.rsv-cikkfej {
    position: relative;
    overflow: hidden;
    padding-block: clamp(var(--rsv-ter-7), 6vw, var(--rsv-ter-9)) clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-8));
    background: linear-gradient(180deg, var(--rsv-brand-soft) 0%, var(--rsv-brand-bare) 100%);
}

.rsv-cikkfej__fenyudvar {
    position: absolute;
    inset-block-start: -45%;
    inset-inline-end: -8%;
    inline-size: min(620px, 76vw);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--rsv-brand-secondary) 15%, transparent) 0%,
        transparent 70%
    );
    pointer-events: none;
}

.rsv-cikkfej__racs {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-7));
    align-items: center;
    margin-block-start: var(--rsv-ter-5);
}

@media (min-width: 992px) {
    .rsv-cikkfej__racs {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    }
}

.rsv-cikkfej__cimke {
    display: inline-block;
    margin-block-end: var(--rsv-ter-4);
    padding: 5px var(--rsv-ter-4);
    border-radius: var(--rsv-radius-pill);
    background: var(--rsv-brand-primary);
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
}

.rsv-cikkfej__cimke:hover,
.rsv-cikkfej__cimke:focus-visible {
    background: var(--rsv-brand-dark);
    color: #fff;
}

.rsv-cikkfej__cim {
    margin-block-end: var(--rsv-ter-4);
    font-size: clamp(2rem, 4.6vw, 3.1rem);
    line-height: 1.15;
}

.rsv-cikkfej__lead {
    margin-block-end: var(--rsv-ter-5);
}

/* A meta sor: definíciós lista, mert valódi címke-érték párok. */
.rsv-cikkfej__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rsv-ter-3) clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-7));
    margin: 0;
}

/*
   A META-ADATOK VISSZAFOGOTTAK.
   Kísérőinformáció, nem a lap üzenete: a dátum, a szerző, a lektor és az
   olvasási idő a H1 és a lead alatt áll, és nem versenghet velük. Ezért a
   címke és az érték is a törzsszöveg alatti méretben marad.
*/
.rsv-cikkfej__metaelem dt {
    color: var(--rsv-text-secondary);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.rsv-cikkfej__metaelem dd {
    margin-block: 2px 0;
    margin-inline: 0;
    color: var(--rsv-text-primary);
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.35;
}

/* A dt vizuálisan rejtett, de a képernyőolvasónak megmarad. */
.rsv-cikkfej__metarejtett {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.rsv-cikkfej__vizual {
    line-height: 0;
    overflow: hidden;
    border-radius: var(--rsv-radius-lg);
    background: var(--rsv-brand-bare);
    box-shadow: var(--rsv-arnyek-sm);
}

.rsv-cikkfej__vizual img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 16 / 10;
    object-fit: contain;
}

/* 32.7 Az olvasási oszlop
   --------------------------------------------------------------------------
   Kb. 800 px — a kézikönyv §7.1 760–850 px-es sávjának közepe. A `--burok`
   adja az oldalmargót, a `--torzs` a sorhosszt.
   -------------------------------------------------------------------------- */

.rsv-cikk__burok {
    max-width: calc(1200px + 2 * var(--rsv-oldalmargo));
    margin-inline: auto;
    padding-inline: var(--rsv-oldalmargo);
}

.rsv-cikk__torzs {
    max-width: 800px;
    margin-inline: auto;
    padding-block: clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-8));
    font-size: clamp(1.05rem, 1.25vw, 1.125rem);
    line-height: 1.7;
}

.rsv-cikk__bekezdes {
    margin-block-end: var(--rsv-ter-5);
}

.rsv-cikk__lead {
    margin-block-end: var(--rsv-ter-5);
    color: var(--rsv-text-primary);
    font-size: clamp(1.18rem, 1.7vw, 1.35rem);
    font-weight: 500;
    line-height: 1.55;
}

.rsv-cikk__cim {
    margin-block: clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-8)) var(--rsv-ter-4);
    scroll-margin-block-start: var(--rsv-ter-8);
}

.rsv-cikk__torzs h2.rsv-cikk__cim {
    font-size: clamp(1.5rem, 3vw, 2rem);
}

.rsv-cikk__torzs h3.rsv-cikk__cim {
    font-size: clamp(1.25rem, 2.2vw, 1.5rem);
}

.rsv-cikk__lista {
    margin-block-end: var(--rsv-ter-5);
    padding-inline-start: var(--rsv-ter-5);
}

.rsv-cikk__lista li {
    margin-block-end: var(--rsv-ter-3);
}

.rsv-cikk__lista li::marker {
    color: var(--rsv-brand-secondary);
}

.rsv-cikk__valaszto {
    margin-block: clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-7));
    border: 0;
    border-block-start: 1px solid var(--rsv-border-default);
    opacity: 1;
}

.rsv-cikk__torzs a {
    color: var(--rsv-brand-primary);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.rsv-cikk__torzs a:hover,
.rsv-cikk__torzs a:focus-visible {
    color: var(--rsv-brand-dark);
}

/* 32.8 Kép, videó és kiemelés a törzsben
   --------------------------------------------------------------------------
   A kép és a videó SZÁNDÉKOSAN szélesebb az olvasási oszlopnál — ettől kap
   ritmust a hosszú szöveg. Crop nincs: `object-fit: contain`.
   -------------------------------------------------------------------------- */

.rsv-cikk__abra {
    margin-block: clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-7));
    margin-inline: 0;
}

@media (min-width: 992px) {
    .rsv-cikk__abra,
    .rsv-cikk__video {
        margin-inline: -60px;
    }
}

.rsv-cikk__abra img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    object-fit: contain;
}

/*
   FINOMABB PEREM A CIKKKÉPEKEN.

   A közös `.rsv-alap-vizual` 6%-os lágy peremmel oldja fel a kép élét — az
   ILLUSZTRÁCIÓKON ez helyes, mert azok pasztell háttere amúgy is elmosódik
   a szekció felé. A Tudástár cikkképei viszont VALÓDI FOTÓK: ott ugyanez a
   6% egy 900 px széles képen több mint 50 px-nyi elmosódást jelent, ami
   arcokat és részleteket nyel el.

   Itt ezért 2% — épp annyi, hogy a téglalapél ne vágjon élesen, de a fotó
   tartalma végig olvasható maradjon. A közös komponens érintetlen: a többi
   aloldal illusztrációi változatlanul a 6%-os peremet kapják.
*/
.rsv-cikk__abra .rsv-alap-vizual img {
    --rsv-perem: 2%;
}

/*
   A DEKORATÍV LAP NEM LÓGHAT RÁ A SZÖVEGRE.

   A közös komponens lapja (`.rsv-alap-vizual::before`) függőlegesen a kép
   MAGASSÁGÁNAK 7%-ával lóg túl. A többi aloldalon ez rendben van: ott a
   képek rácscellában ülnek, alattuk nincs közvetlenül folyó szöveg.

   A cikktörzsben viszont a kép után AZONNAL bekezdés következik, és a
   túllógás a kép magasságával együtt nő: egy álló, 1227 px magasan
   megjelenő fotónál 86 px — miközben a figura alsó margója csak 32–48 px.
   A lap `position: absolute`, tehát a mögötte lévő bekezdés FÖLÉ festődött,
   és kifakította az első sort.

   Itt ezért FIX, kis túllógás áll a magasságarányos helyett: így a
   fényudvar mind a négy oldalon megmarad, de a képmagasságtól függetlenül
   soha nem éri el a szöveget. A vízszintes kifutás változatlan.
*/
.rsv-cikk__abra .rsv-alap-vizual::before {
    inset-block: -20px;
}

.rsv-cikk__felirat {
    margin-block-start: var(--rsv-ter-3);
    color: var(--rsv-text-secondary);
    font-size: .92rem;
    text-align: center;
}

/*
   VIDEÓ: 16:9 arányú, reszponzív beágyazás. A `youtube-nocookie.com`
   végpontot a `web/.htaccess` CSP-je engedi; a `loading="lazy"` miatt kérés
   csak akkor indul, ha a látogató ténylegesen odagörget.
*/
.rsv-cikk__video {
    margin-block: clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-7));
    margin-inline: 0;
}

.rsv-cikk__video iframe {
    display: block;
    inline-size: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: var(--rsv-radius-md);
    background: var(--rsv-brand-soft);
}

/*
   KIEMELT DOBOZ. Három szint, egyetlen öröklődő custom propertyn — ugyanaz a
   megoldás, mint a `/mikor-fordulj-orvoshoz` triázsszintjeinél.

   SÜRGŐS (urgent) SZÍN ITT NINCS: a projekt szabálya szerint az kizárólag
   valódi sürgősségi tartalomnál áll, és a sürgős útvonalat a minden oldalon
   megjelenő sürgősségi sáv viszi a `/mikor-fordulj-orvoshoz` oldalra.
*/
.rsv-cikk__kiemeles {
    --rsv-kiemeles-szin: var(--rsv-brand-secondary);

    margin-block: clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-7));
    padding: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-6));
    border-inline-start: 4px solid var(--rsv-kiemeles-szin);
    border-radius: var(--rsv-radius-md);
    background: color-mix(in srgb, var(--rsv-kiemeles-szin) 7%, var(--rsv-surface-card));
}

.rsv-cikk__kiemeles--info {
    --rsv-kiemeles-szin: var(--rsv-brand-primary);
}

.rsv-cikk__kiemeles--figyelem {
    --rsv-kiemeles-szin: var(--rsv-warning);
}

.rsv-cikk__kiemeles--semleges {
    --rsv-kiemeles-szin: var(--rsv-brand-secondary);
}

.rsv-cikk__kiemeles > :last-child {
    margin-block-end: 0;
}

.rsv-cikk__kiemeles .rsv-cikk__cim {
    margin-block-start: 0;
}

.rsv-cikk__kiemeles .rsv-cikk__lista {
    margin-block-end: var(--rsv-ter-4);
}

/* 32.9 Eredetmegjelölés
   --------------------------------------------------------------------------
   KÖTELEZŐ ELEM: minden átvett cikkben láthatóan megjelenik, kattintható
   linkkel az eredeti publikációra. Nem rejthető el összecsukható elembe.
   -------------------------------------------------------------------------- */

.rsv-cikkeredet {
    display: flex;
    gap: var(--rsv-ter-4);
    max-width: 800px;
    margin-inline: auto;
    margin-block-start: clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-7));
    padding: clamp(var(--rsv-ter-4), 2.5vw, var(--rsv-ter-5));
    border: 1px solid color-mix(in srgb, var(--rsv-brand-primary) 22%, transparent);
    border-radius: var(--rsv-radius-md);
    background: var(--rsv-brand-bare);
}

.rsv-cikkeredet__jel {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 34px;
    block-size: 34px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--rsv-brand-primary) 12%, transparent);
    color: var(--rsv-brand-primary);
}

.rsv-cikkeredet__jel svg {
    inline-size: 18px;
    block-size: 18px;
}

.rsv-cikkeredet__mondat {
    margin-block: var(--rsv-ter-2) var(--rsv-ter-3);
    font-weight: 600;
}

.rsv-cikkeredet__mondat a {
    color: var(--rsv-brand-primary);
}

.rsv-cikkeredet__frissesseg {
    margin: 0;
    color: var(--rsv-text-secondary);
    font-size: .94rem;
    line-height: 1.6;
}

.rsv-cikkeredet__frissesseg a {
    color: var(--rsv-brand-primary);
    font-weight: 600;
}

/* 32.10 Cikkvégi blokkok
   -------------------------------------------------------------------------- */

/*
   A FORRÁSBLOKK ALSÓ TÉRKÖZE.

   A `.rsv-cikk__burok` csak oldalmargót ad, függőleges térközt nem: a
   disclaimer fehér doboza így közvetlenül a cikk záró éléhez ért, és
   ráfutott a következő szakasz határvonalára. A többi aloldalon ez nem
   fordult elő, mert ott a forrásblokk `.rsv-szekcio`-ban ül, amelynek van
   saját függőleges paddingja.
*/
.rsv-cikk__forrasok {
    max-width: 800px;
    margin-inline: auto;
    padding-block-end: clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-7));
}

/*
   „Tovább a témához" — VIZUÁLISAN ELTÉR a kapcsolódó cikkektől, mert más a
   szerepe: a cikk témájának KANONIKUS core oldalára visz (IA §10.1).
*/
.rsv-cikktovabb {
    background: var(--rsv-brand-bare);
}

.rsv-cikktovabb__cim {
    margin-block: var(--rsv-ter-3) var(--rsv-ter-5);
}

.rsv-cikktovabb__kartya {
    display: block;
    max-width: 800px;
    padding: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-6));
    border-radius: var(--rsv-radius-lg);
    background: var(--rsv-brand-primary);
    color: #fff;
    text-decoration: none;
    transition: background-color .25s ease;
}

.rsv-cikktovabb__kartya:hover,
.rsv-cikktovabb__kartya:focus-visible {
    background: var(--rsv-brand-dark);
    color: #fff;
}

.rsv-cikktovabb__kartyacim {
    display: block;
    margin-block-end: var(--rsv-ter-2);
    font-size: clamp(1.3rem, 2.4vw, 1.7rem);
    font-weight: 700;
    line-height: 1.25;
}

.rsv-cikktovabb__leiras {
    display: block;
    color: rgba(255, 255, 255, .88);
    line-height: 1.6;
}

.rsv-cikkkapcsolodo {
    background: var(--rsv-surface-page);
}

.rsv-cikkkapcsolodo__cim {
    margin-block: var(--rsv-ter-3) clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-6));
}

.rsv-cikkkapcsolodo__zaras {
    margin-block-start: clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-7));
    text-align: center;
}


/* --------------------------------------------------------------------------
   33. A `/kviz` OLDAL — „Teszteld a tudásod az RSV-ről"
   --------------------------------------------------------------------------
   NÉVTÉR: `.rsv-teszt*`.

   MIÉRT NEM `.rsv-kviz*`? Mert az FOGLALT: a FŐOLDAL 12. szakaszáé
   (11.13, fentebb). Ugyanez a csapda a képmappánál is: a
   `web/assets/images/kviz/` a főoldalé, ezért az aloldal a
   `kviz-oldal/` mappát kapta — pontosan úgy, ahogy korábban a
   `megelozes` -> `megelozes-oldal` esetében.

   ÚJ SZÍN NEM KELETKEZIK. Minden érték a meglévő tokenekből jön; ezt
   teszt is őrzi: a szakaszban a fehéren és a feketén kívül nincs
   beégetett színérték.

   A LEZÁRT ALOLDAL-MINTÁT ÖRÖKLI: page-hero (`.rsv-alaphero`),
   szekcióritmus (`.rsv-alap-oldal`), képmélység (`.rsv-alap-vizual`),
   insight-panel (`.rsv-alap-kiemelt`), routing kártyák
   (`.rsv-alap-tovabb`) és forrásblokk (`.rsv-alap-forrasok`).
   -------------------------------------------------------------------------- */

.rsv-teszt-oldal {
    --rsv-szekcio-ter: clamp(var(--rsv-ter-6), 5vw, var(--rsv-ter-7));
}

/* A kérdésoldal SZÁNDÉKOSAN feszesebb: egyetlen kérdés van rajta, és a
   „Tovább" gombnak a hajtás közelében kell maradnia mobilon is. */
.rsv-teszt-oldal--kerdes {
    --rsv-szekcio-ter: clamp(var(--rsv-ter-5), 3.5vw, var(--rsv-ter-6));
}

.rsv-teszt-vizual {
    margin: 0;
}

.rsv-teszt-vizual img {
    display: block;
    width: 100%;
    height: auto;
    /* CROP NINCS: a jóváhagyott kompozíciót nem vágjuk. */
    object-fit: contain;
}


/* 33.1 Hero — a működés és az anonimitás a hajtás felett
   --------------------------------------------------------------------------
   A két jelzés (motion-mentes, statikus) a H1 alatt áll, nem lábjegyzetben:
   a „menet közben nincs visszajelzés" a kvíz legfontosabb működési szabálya,
   az anonimitási mondat pedig a `FELADAT.md` §11 új kanonikus alakja. */

/*
 * A HERO KOMPAKTABB (QA-javítás 1. pont, KVIZ_QA_FIX_01).
 *
 * Ez az oldal SAJÁT hero-variánsa — a lezárt `.rsv-alaphero` alapkomponens
 * érintetlen marad; ugyanaz az idióma, mint a `--korhaz` vagy az `--utan`
 * variánsnál.
 *
 * Laptopon a hero addig gyakorlatilag az egész nézetablakot elvitte: a közös
 * rács a KÉPNEK adja a nagyobb hasábot (.92fr / 1.08fr), így 1366 px-en a
 * kompozíció 660 px széles és 424 px magas lett. Itt fordítva osztunk, és a
 * kép szélességét 520 px-re fogjuk. A `sizes` a sablonban EHHEZ van mérve —
 * ha ez az érték változik, azt is újra kell mérni.
 */
.rsv-alaphero--teszt {
    padding-bottom: clamp(var(--rsv-ter-5), 2.4vw, var(--rsv-ter-7));
}

.rsv-alaphero--teszt .rsv-alaphero__cim {
    margin-bottom: var(--rsv-ter-4);
}

@media (min-width: 992px) {
    .rsv-alaphero--teszt .rsv-alaphero__racs {
        grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
        gap: clamp(var(--rsv-ter-5), 2.4vw, var(--rsv-ter-6));
    }

    .rsv-alaphero--teszt .rsv-alaphero__vizual {
        max-inline-size: 520px;
        margin-inline-start: auto;
    }
}

/*
 * MÁSODIK LÉPÉS — A BEVEZETŐ NEM ISMÉTLŐDIK MEG.
 *
 * Projektgazdai flow-döntés (2026-08-31): amikor a látogató már eldöntötte,
 * hogy kitölti a kvízt, a bevezető tartalom nem állhat a tényleges
 * választás fölött. A sablon ezért ebben a nézetben ki sem írja a herót és
 * a sürgős sávot — hero-variánsra tehát nincs is szükség.
 *
 * A kérdéssor-választó így a fejléc utáni ELSŐ szekció. Kap egy nyugodt,
 * márkajellegű felső sávot: enélkül a lebegő, fehér fejléckártya egy vele
 * azonos fehér felületen ülne, és elveszne az éle.
 */
.rsv-teszt-valaszto--lepes2 {
    background:
        linear-gradient(
            180deg,
            var(--rsv-brand-bare) 0%,
            var(--rsv-surface-card) 220px
        );
}

.rsv-teszt-mukodes,
.rsv-teszt-anonim {
    display: flex;
    gap: var(--rsv-ter-2);
    align-items: flex-start;
    margin-block-start: var(--rsv-ter-4);
    font-size: var(--rsv-meret-kicsi);
    line-height: 1.6;
}

.rsv-teszt-mukodes {
    padding: var(--rsv-ter-3) var(--rsv-ter-4);
    border-radius: var(--rsv-radius-md);
    background: var(--rsv-brand-bare);
    color: var(--rsv-text-primary);
}

.rsv-teszt-anonim {
    color: var(--rsv-text-secondary);
}

.rsv-teszt-mukodes__jel,
.rsv-teszt-anonim__jel {
    flex: 0 0 auto;
    display: inline-flex;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    margin-block-start: 0.1em;
    color: var(--rsv-brand-primary);
}

.rsv-teszt-mukodes__jel svg,
.rsv-teszt-anonim__jel svg {
    inline-size: 100%;
    block-size: 100%;
}


/* 33.2 Sürgős útvonal — ORVOSI §11
   --------------------------------------------------------------------------
   Sürgős tünetnél nem a kvíz az út. A jelzés LÁTHATÓ és nem összecsukható,
   de NEM sürgősségi színnel: ez bridge, nem triázs-panel — a sürgősségi
   vizuális nyelv valódi, magas tétű tartalomnak van fenntartva
   (kézikönyv §13). */

/*
 * A JELZÉS ALATT LEVEGŐ (QA-javítás 2. pont). Korábban a szekció alul is
 * nullás térközt kapott, ezért a doboz RÁTAPADT a következő blokkra.
 * Fölötte továbbra sincs térköz: azt a hero saját alsó paddingja adja.
 */
.rsv-teszt-surgosszekcio {
    padding-block: 0 clamp(var(--rsv-ter-5), 2.4vw, var(--rsv-ter-6));
}

.rsv-teszt-surgos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rsv-ter-2);
    align-items: center;
    margin: 0;
    padding: var(--rsv-ter-3) var(--rsv-ter-4);
    border-radius: var(--rsv-radius-md);
    border: 1px solid var(--rsv-border-default);
    background: var(--rsv-surface-page);
    font-size: var(--rsv-meret-kicsi);
}

.rsv-teszt-surgos__jel {
    display: inline-flex;
    inline-size: 1.15rem;
    block-size: 1.15rem;
    color: var(--rsv-warning);
}

.rsv-teszt-surgos__jel svg {
    inline-size: 100%;
    block-size: 100%;
}

.rsv-teszt-surgos__link {
    font-weight: 600;
}

.rsv-teszt-figyelmeztetes {
    margin-block: 0;
}

/*
 * MEGKEZDETT KITÖLTÉS — FOLYTATÁS-KÁRTYA.
 *
 * KOMPAKT: nem hirdetőtábla, hanem egy állapotjelzés két lehetőséggel. Négy
 * sor a teljes magassága — ág, haladás, mondat, gombok —, és a szélessége az
 * olvasási oszlopé.
 *
 * A haladássávot a kérdésoldallal KÖZÖS `.rsv-teszt-haladas__sav` adja: két
 * párhuzamos sávkomponens ugyanarra a feladatra felesleges volna.
 */
.rsv-teszt-folytatasszekcio {
    padding-block: 0;
}

.rsv-teszt-folytatas {
    padding: var(--rsv-ter-4) var(--rsv-ter-5);
    border: 1px solid var(--rsv-brand-soft);
    border-radius: var(--rsv-radius-md);
    background: var(--rsv-brand-bare);
}

.rsv-teszt-folytatas__fej {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rsv-ter-2) var(--rsv-ter-3);
    align-items: baseline;
    justify-content: space-between;
    margin: 0 0 var(--rsv-ter-2);
}

.rsv-teszt-folytatas__ag {
    font-size: var(--rsv-meret-meta);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--rsv-text-secondary);
}

.rsv-teszt-folytatas__szam {
    font-size: var(--rsv-meret-kicsi);
    font-weight: 700;
    color: var(--rsv-brand-dark);
}

.rsv-teszt-folytatas .rsv-teszt-haladas__sav {
    display: block;
    background: var(--rsv-surface-card);
}

.rsv-teszt-folytatas .rsv-teszt-haladas__sav::-webkit-progress-bar {
    background: var(--rsv-surface-card);
}

.rsv-teszt-folytatas__szoveg {
    margin: var(--rsv-ter-3) 0 0;
    font-size: var(--rsv-meret-kicsi);
    line-height: 1.6;
}

.rsv-teszt-folytatas__akciok {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rsv-ter-3);
    align-items: center;
    margin-block-start: var(--rsv-ter-4);
}

.rsv-teszt-folytatas__elvetes {
    margin: 0;
}


/* 33.3 Útválasztás — kétlépcsős, hierarchikus
   --------------------------------------------------------------------------
   NEM lapos öt-hat kártyás sor (`FELADAT.md` §2). Az első lépés két nagy
   célcsoportkártya, a második a célcsoport ágai. */

.rsv-teszt-celcsoportok,
.rsv-teszt-agak {
    display: grid;
    gap: var(--rsv-ter-4);
    margin: var(--rsv-ter-6) 0 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .rsv-teszt-celcsoportok {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .rsv-teszt-agak {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Három ág (szakmai) esetén 1200 px felett három hasáb. */
@media (min-width: 1200px) {
    .rsv-teszt-agak:has(> li:nth-child(3)) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.rsv-teszt-celkartya,
.rsv-teszt-agkartya {
    display: flex;
    flex-direction: column;
    block-size: 100%;
    inline-size: 100%;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--rsv-border-default);
    border-radius: var(--rsv-radius-lg);
    background: var(--rsv-surface-card);
    box-shadow: var(--rsv-arnyek-sm);
    color: inherit;
    text-align: start;
    text-decoration: none;
    font: inherit;
    cursor: pointer;
    transition: transform .25s ease,
                box-shadow .25s ease,
                border-color .25s ease;
}

/*
 * A KÉP ÉS A SZÖVEG SZIGORÚAN ELVÁLIK (QA-javítás 4. és 6. pont).
 *
 * A közös `.rsv-alap-vizual` lapja (`::before`) a képen felfelé ÉS lefelé is
 * 7%-kal túlnyúlik. A kártyán ez a szövegtörzsre ült rá: a cím és a leírás
 * mögött levendula fátyol jelent meg — pozicionált elem lévén a szöveg
 * FÖLÖTT. Két, egymást erősítő megoldás:
 *
 *   1. a figura `overflow: hidden`-je a fényudvart a KÉP TERÜLETÉRE zárja;
 *   2. a törzs saját, egyszínű kártyahátteret és `position: relative`-et kap,
 *      tehát dekoratív réteg semmiképp nem kerülhet a szöveg fölé.
 */
.rsv-teszt-celkartya .rsv-teszt-vizual,
.rsv-teszt-agkartya .rsv-teszt-vizual {
    aspect-ratio: 9 / 7;
    overflow: hidden;
    background: var(--rsv-brand-bare);
}

/*
 * VÍZSZINTES KÁRTYA 576 px FÖLÖTT (QA-javítás 4. és 6. pont).
 *
 * A függőleges kártya laptopon 400 px fölé nőtt, és a két döntési
 * lehetőség nem fért egy nézetablakba. A kép a kártya bal oldalára kerül,
 * körülbelül a negyven százalékára — a KOMPOZÍCIÓT NEM VÁGJUK (`object-fit: contain`
 * marad), csak kisebben mutatjuk.
 *
 * A `:has()` szándékos: a szakmai ág három kártyája KÉP NÉLKÜLI, azoknak a
 * teljes szélesség kell. Ahol a böngésző nem ismeri a `:has()`-t, marad a
 * függőleges alapállapot — az is teljes értékű elrendezés.
 */
@media (min-width: 576px) {
    .rsv-teszt-celkartya:has(> .rsv-teszt-vizual),
    .rsv-teszt-agkartya:has(> .rsv-teszt-vizual) {
        display: grid;
        grid-template-columns: minmax(0, .78fr) minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) auto;
    }

    .rsv-teszt-celkartya > .rsv-teszt-vizual,
    .rsv-teszt-agkartya > .rsv-teszt-vizual {
        display: flex;
        align-items: center;
        grid-row: 1 / -1;
        block-size: 100%;
        /* A magasságot a szöveghasáb adja, nem a kép aránya. */
        aspect-ratio: auto;
    }
}

/*
 * TABLETMÉRETBEN VISSZAVÁLT FÜGGŐLEGESRE.
 *
 * 768 px-től a KÉT célcsoportkártya egymás mellé kerül, tehát egy kártya
 * csak kb. 336 px széles. Vízszintesen ott a cím, a leírás és a szakmai
 * címke is tördelődne — a függőleges kártya ebben a sávban olvashatóbb.
 * 992 px-től a kártya ismét elég széles, és visszatér a vízszintes alak.
 *
 * Az ágválasztó lista NEM kap kivételt: az 992 px-ig egyhasábos, tehát ott a
 * kártya végig elég széles.
 */
@media (min-width: 768px) and (max-width: 991.98px) {
    .rsv-teszt-celcsoportok .rsv-teszt-celkartya:has(> .rsv-teszt-vizual) {
        display: flex;
    }

    .rsv-teszt-celcsoportok .rsv-teszt-celkartya > .rsv-teszt-vizual {
        display: block;
        block-size: auto;
        aspect-ratio: 9 / 7;
    }
}

.rsv-teszt-celkartya__torzs,
.rsv-teszt-agkartya__torzs {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--rsv-ter-2);
    flex: 1 1 auto;
    padding: var(--rsv-ter-4) var(--rsv-ter-5);
    background: var(--rsv-surface-card);
}

.rsv-teszt-celkartya__cim,
.rsv-teszt-agkartya__cim {
    font-family: var(--rsv-font);
    font-size: var(--rsv-meret-h4);
    font-weight: 700;
    line-height: 1.3;
    color: var(--rsv-brand-dark);
}

.rsv-teszt-celkartya__leiras,
.rsv-teszt-agkartya__leiras {
    font-size: var(--rsv-meret-kicsi);
    line-height: 1.6;
    color: var(--rsv-text-secondary);
}

.rsv-teszt-celkartya__meta,
.rsv-teszt-agkartya__meta {
    font-size: var(--rsv-meret-meta);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--rsv-brand-primary);
}

.rsv-teszt-celkartya__akcio,
.rsv-teszt-agkartya__akcio {
    display: inline-flex;
    gap: var(--rsv-ter-2);
    align-items: center;
    margin-block-start: auto;
    padding: var(--rsv-ter-3) var(--rsv-ter-4);
    border-block-start: 1px solid var(--rsv-border-default);
    font-weight: 600;
    color: var(--rsv-brand-primary);
}

.rsv-teszt-nyil {
    inline-size: 0.8rem;
    block-size: 0.8rem;
    transform: rotate(-90deg);
}

/* A SZAKMAI JELÖLÉS LÁTHATÓ, DE NEM KAPU (`FELADAT.md` §2/B): regisztráció
   nincs — az sértené az anonimitást. */
.rsv-teszt-cimke {
    align-self: flex-start;
    padding: 0.2em 0.7em;
    border-radius: var(--rsv-radius-pill);
    background: var(--rsv-brand-soft);
    font-size: var(--rsv-meret-meta);
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--rsv-brand-dark);
}

.rsv-teszt-cimke--onallo {
    display: inline-block;
    margin-block-start: var(--rsv-ter-3);
}

/*
 * A MÁSODIK LÉPÉS FEJE TÖMÖR: a látogató itt már tudja, hol jár, ezért a
 * cím H2-méretű marad (H1-ként is), a fej alatti térköz pedig szűk — így a
 * két valódi választás rögtön a fejléc alatt látszik.
 */
.rsv-teszt-valaszto--lepes2 {
    padding-block-start: clamp(var(--rsv-ter-5), 2.4vw, var(--rsv-ter-6));
}

.rsv-teszt-valaszto--lepes2 .rsv-szekciofej {
    margin-bottom: var(--rsv-ter-4);
}

.rsv-teszt-lepescim {
    margin: 0;
    font-size: var(--rsv-meret-h2);
}

.rsv-teszt-valaszto--lepes2 .rsv-teszt-agak {
    margin-block-start: var(--rsv-ter-4);
}

/*
 * INDULÁS ELŐTTI TUDNIVALÓK — A VÁLASZTÁS ALATT.
 *
 * Nem apró betű, csak nem a döntés ELŐTT áll: a menet közbeni visszajelzés
 * hiánya (PROJECT_RULES §12.3), az anonimitási mondat (`FELADAT.md` §11) és
 * a sürgős útvonal (ORVOSI §11) ugyanúgy láthatóan, összecsukás nélkül
 * jelenik meg.
 */
.rsv-teszt-tudnivalok {
    max-inline-size: 860px;
    margin: var(--rsv-ter-6) auto 0;
}

.rsv-teszt-tudnivalok .rsv-teszt-surgos {
    margin-block-start: var(--rsv-ter-4);
}

.rsv-teszt-agurlap {
    margin: 0;
}

.rsv-teszt-vissza {
    margin-block-start: var(--rsv-ter-5);
    text-align: center;
}


/* 33.4 Haladásjelző
   --------------------------------------------------------------------------
   KÉT CSATORNA: látható szöveg és natív `<progress>`. A `<progress>`
   `aria-hidden`, mert a szöveges alak mondatszerűbb — enélkül a
   képernyőolvasó kétszer mondaná el ugyanazt. */

/*
 * HANGSÚLYOSABB HALADÁS (QA-javítás 8. pont).
 *
 * A SZEMANTIKA VÁLTOZATLAN: látható szöveg + natív `<progress>`. Csak a
 * vizuális súly tolódott el — a sáv vastagabb, a kitöltött szakasz a
 * márkaszínt viszi, a háttérsáv pedig a finomabb Soft Lavender, tehát a
 * kettő jól elkülönül.
 *
 * A KÉT FELIRAT NEM VERSENYEZ EGYMÁSSAL: az ág megnevezése halkabb
 * (másodlagos szöveg), a „hányadik kérdés" viszont hangsúlyos pirulába
 * került — ez az az információ, amit a kitöltő keres.
 */
.rsv-teszt-haladas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rsv-ter-2) var(--rsv-ter-3);
    align-items: center;
    margin-block-end: var(--rsv-ter-5);
}

.rsv-teszt-haladas__ag {
    font-size: var(--rsv-meret-meta);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--rsv-text-secondary);
}

.rsv-teszt-haladas__szoveg {
    margin: 0;
    margin-inline-start: auto;
    padding: 0.25em 0.8em;
    border-radius: var(--rsv-radius-pill);
    background: var(--rsv-brand-soft);
    font-size: var(--rsv-meret-kicsi);
    font-weight: 700;
    color: var(--rsv-brand-dark);
}

.rsv-teszt-haladas__sav {
    flex: 1 0 100%;
    inline-size: 100%;
    block-size: 0.625rem;
    border: 0;
    border-radius: var(--rsv-radius-pill);
    background: var(--rsv-brand-soft);
    appearance: none;
}

.rsv-teszt-haladas__sav::-webkit-progress-bar {
    border-radius: var(--rsv-radius-pill);
    background: var(--rsv-brand-soft);
}

.rsv-teszt-haladas__sav::-webkit-progress-value {
    border-radius: var(--rsv-radius-pill);
    background: var(--rsv-brand-primary);
    transition: inline-size .25s ease;
}

.rsv-teszt-haladas__sav::-moz-progress-bar {
    border-radius: var(--rsv-radius-pill);
    background: var(--rsv-brand-primary);
}


/* 33.5 A kérdés
   --------------------------------------------------------------------------
   NATÍV `<fieldset>` + `<legend>` + `<input type="radio">`. A billentyűzetes
   léptetést, a Space-választást és a bemondást a böngésző adja — semmit nem
   utánzunk JavaScripttel. */

.rsv-teszt-kerdes {
    margin: 0;
}

.rsv-teszt-mezocsoport {
    margin: 0;
    padding: 0;
    border: 0;
}

/*
 * A KÉRDÉS SAJÁT, LEVEGŐS DOBOZBAN ÁLL (QA-javítás 7. pont).
 *
 * Korábban a `<legend>` paddingja 0 volt, ezért a szöveg közvetlenül a
 * fókuszkeretnek feszült — és mivel a kérdés oldalbetöltéskor fókuszt kap,
 * ez a keret gyakorlatilag mindig látszott. Most a doboz önmagában is
 * látható felület, a fókuszkeret pedig KÖRÜLÖTTE fut: az akadálymentes
 * fókuszjelzés változatlanul megvan.
 */
.rsv-teszt-kerdes__cim {
    display: block;
    inline-size: 100%;
    margin-block-end: var(--rsv-ter-6);
    padding: var(--rsv-ter-4);
    border: 1px solid var(--rsv-brand-soft);
    border-radius: var(--rsv-radius-md);
    background: var(--rsv-brand-bare);
    font-family: var(--rsv-font);
    font-size: var(--rsv-meret-h3);
    font-weight: 700;
    line-height: 1.35;
    color: var(--rsv-brand-dark);
}

@media (min-width: 768px) {
    .rsv-teszt-kerdes__cim {
        padding: var(--rsv-ter-5) var(--rsv-ter-6);
    }
}

.rsv-teszt-kerdes__cim:focus-visible {
    outline: 3px solid var(--rsv-focus);
    outline-offset: 2px;
    border-radius: var(--rsv-radius-md);
}

.rsv-teszt-opciok {
    display: grid;
    gap: var(--rsv-ter-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.rsv-teszt-opcio {
    position: relative;
}

/* A mező vizuálisan rejtett, de FÓKUSZALHATÓ marad — a `display:none`
   kivenné a billentyűzetes sorrendből. */
.rsv-teszt-opcio__mezo {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
}

.rsv-teszt-opcio__cimke {
    display: flex;
    gap: var(--rsv-ter-3);
    align-items: center;
    /* Minimum 44 px érintési célterület. */
    min-block-size: 2.75rem;
    padding: var(--rsv-ter-3) var(--rsv-ter-4);
    border: 1px solid var(--rsv-border-default);
    border-radius: var(--rsv-radius-md);
    background: var(--rsv-surface-card);
    cursor: pointer;
    transition: border-color .18s ease,
                background .18s ease;
}

.rsv-teszt-opcio__jel {
    flex: 0 0 auto;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    border: 2px solid var(--rsv-border-interaktiv);
    border-radius: 50%;
    background: var(--rsv-surface-card);
    transition: border-color .18s ease,
                box-shadow .18s ease;
}

.rsv-teszt-opcio__szoveg {
    line-height: 1.5;
}

.rsv-teszt-opcio__mezo:checked + .rsv-teszt-opcio__cimke {
    border-color: var(--rsv-brand-primary);
    background: var(--rsv-brand-bare);
}

.rsv-teszt-opcio__mezo:checked + .rsv-teszt-opcio__cimke .rsv-teszt-opcio__jel {
    border-color: var(--rsv-brand-primary);
    box-shadow: inset 0 0 0 0.25rem var(--rsv-brand-primary);
}

/* LÁTHATÓ FÓKUSZ a rejtett mezőn keresztül is (kézikönyv §19). */
.rsv-teszt-opcio__mezo:focus-visible + .rsv-teszt-opcio__cimke {
    outline: 3px solid var(--rsv-focus);
    outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
    .rsv-teszt-opcio__cimke:hover {
        border-color: var(--rsv-brand-primary);
    }

    .rsv-teszt-celkartya:hover,
    .rsv-teszt-agkartya:hover {
        transform: translateY(-2px);
        border-color: var(--rsv-brand-primary);
        box-shadow: var(--rsv-arnyek-md);
    }
}

.rsv-teszt-lepesek {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rsv-ter-3);
    align-items: center;
    justify-content: space-between;
    margin-block-start: var(--rsv-ter-6);
}

.rsv-teszt-lepes--elore {
    margin-inline-start: auto;
}

.rsv-teszt-jegyzet {
    margin-block-start: var(--rsv-ter-4);
    font-size: var(--rsv-meret-meta);
    color: var(--rsv-text-secondary);
}


/* 33.6 Összegzés
   --------------------------------------------------------------------------
   SEMMILYEN helyes/hibás információt nem mutat (`FELADAT.md` §15) — a
   `--ures` állapot csak azt jelöli, hogy nincs válasz. */

.rsv-teszt-osszegzes__allapot {
    display: flex;
    gap: var(--rsv-ter-2);
    align-items: flex-start;
    margin-block: var(--rsv-ter-5);
    padding: var(--rsv-ter-3) var(--rsv-ter-4);
    border-radius: var(--rsv-radius-md);
    background: var(--rsv-brand-bare);
    font-size: var(--rsv-meret-kicsi);
}

.rsv-teszt-osszegzes__jel {
    display: inline-flex;
    inline-size: 1.15rem;
    block-size: 1.15rem;
    margin-block-start: 0.1em;
    color: var(--rsv-brand-primary);
}

.rsv-teszt-osszegzes__jel svg {
    inline-size: 100%;
    block-size: 100%;
}

.rsv-teszt-osszegzes__allapot--hianyos .rsv-teszt-osszegzes__jel {
    color: var(--rsv-warning);
}

.rsv-teszt-osszegzes__lista {
    display: grid;
    gap: var(--rsv-ter-3);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.rsv-teszt-osszegzes__sor {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--rsv-ter-2) var(--rsv-ter-3);
    align-items: start;
    padding: var(--rsv-ter-3) var(--rsv-ter-4);
    border: 1px solid var(--rsv-border-default);
    border-radius: var(--rsv-radius-md);
    background: var(--rsv-surface-card);
}

@media (min-width: 768px) {
    .rsv-teszt-osszegzes__sor {
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
    }
}

.rsv-teszt-osszegzes__sor--ures {
    border-style: dashed;
    background: var(--rsv-surface-page);
}

.rsv-teszt-osszegzes__szam {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    border-radius: 50%;
    background: var(--rsv-brand-bare);
    font-size: var(--rsv-meret-meta);
    font-weight: 700;
    color: var(--rsv-brand-dark);
}

.rsv-teszt-osszegzes__torzs {
    display: grid;
    gap: 0.15rem;
    min-inline-size: 0;
}

.rsv-teszt-osszegzes__kerdes {
    font-weight: 600;
    line-height: 1.45;
}

.rsv-teszt-osszegzes__valasz {
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
}

.rsv-teszt-osszegzes__valaszcimke {
    font-weight: 600;
}

.rsv-teszt-osszegzes__valasz--ures {
    font-style: italic;
}

.rsv-teszt-osszegzes__link {
    grid-column: 2;
    justify-self: start;
    font-size: var(--rsv-meret-kicsi);
    font-weight: 600;
}

@media (min-width: 768px) {
    .rsv-teszt-osszegzes__link {
        grid-column: auto;
        justify-self: end;
    }
}

.rsv-teszt-bekuldes {
    margin-block-start: var(--rsv-ter-6);
    text-align: center;
}


/* 33.7 Eredmény
   -------------------------------------------------------------------------- */

.rsv-teszt-eredmeny__racs {
    display: grid;
    gap: var(--rsv-ter-5);
    align-items: center;
}

@media (min-width: 992px) {
    .rsv-teszt-eredmeny__racs {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
        gap: clamp(var(--rsv-ter-5), 4vw, var(--rsv-ter-7));
    }
}

.rsv-teszt-eredmeny__ag {
    margin: var(--rsv-ter-3) 0 0;
    font-size: var(--rsv-meret-kicsi);
    font-weight: 600;
    color: var(--rsv-text-secondary);
}

.rsv-teszt-pont {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rsv-ter-2) var(--rsv-ter-4);
    align-items: baseline;
    margin: var(--rsv-ter-3) 0 var(--rsv-ter-2);
}

.rsv-teszt-pont__ertek {
    font-family: var(--rsv-font);
    font-size: clamp(2.75rem, 7vw, 4rem);
    font-weight: 800;
    line-height: 1;
    color: var(--rsv-brand-primary);
}

.rsv-teszt-pont__per {
    margin-inline: 0.1em;
    font-weight: 400;
    color: var(--rsv-text-secondary);
}

.rsv-teszt-pont__szazalek {
    font-family: var(--rsv-font);
    font-size: var(--rsv-meret-h3);
    font-weight: 700;
    color: var(--rsv-brand-dark);
}

.rsv-teszt-eredmeny__cim {
    margin: 0 0 var(--rsv-ter-3);
}

.rsv-teszt-guardrail {
    margin-block-start: var(--rsv-ter-5);
}

.rsv-teszt-szakmai-jegyzet,
.rsv-teszt-orvosi {
    display: flex;
    gap: var(--rsv-ter-2);
    align-items: flex-start;
    margin-block-start: var(--rsv-ter-4);
    font-size: var(--rsv-meret-kicsi);
    line-height: 1.6;
    color: var(--rsv-text-secondary);
}

.rsv-teszt-szakmai-jegyzet__jel,
.rsv-teszt-orvosi__jel {
    flex: 0 0 auto;
    display: inline-flex;
    inline-size: 1.15rem;
    block-size: 1.15rem;
    margin-block-start: 0.1em;
    color: var(--rsv-brand-primary);
}

.rsv-teszt-szakmai-jegyzet__jel svg,
.rsv-teszt-orvosi__jel svg {
    inline-size: 100%;
    block-size: 100%;
}


/* 33.8 Tudásterületek — részpontszám
   --------------------------------------------------------------------------
   A SÁV DEKORATÍV (`aria-hidden`): az információt a `helyes / összes`
   szöveges alak hordozza, tehát az állapot nem csak vizuálisan érhető el. */

.rsv-teszt-csoportok {
    display: grid;
    gap: var(--rsv-ter-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.rsv-teszt-csoport {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.35rem var(--rsv-ter-3);
    align-items: baseline;
}

.rsv-teszt-csoport__nev {
    font-weight: 600;
}

.rsv-teszt-csoport__ertek {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--rsv-brand-primary);
}

.rsv-teszt-csoport__sav {
    grid-column: 1 / -1;
    display: block;
    block-size: 0.4rem;
    overflow: hidden;
    border-radius: var(--rsv-radius-pill);
    background: var(--rsv-brand-bare);
}

.rsv-teszt-csoport__kitoltes {
    display: block;
    inline-size: var(--rsv-teszt-arany, 0%);
    block-size: 100%;
    border-radius: var(--rsv-radius-pill);
    background: var(--rsv-brand-primary);
}


/* 33.9 Mérleg — amit jól tudsz / amit érdemes átnézni
   -------------------------------------------------------------------------- */

.rsv-teszt-merleg {
    display: grid;
    gap: var(--rsv-ter-4);
}

@media (min-width: 992px) {
    .rsv-teszt-merleg {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.rsv-teszt-merleg__panel {
    padding: var(--rsv-ter-5);
    border-radius: var(--rsv-radius-lg);
    background: var(--rsv-surface-card);
    box-shadow: var(--rsv-arnyek-sm);
}

.rsv-teszt-merleg__panel--jol {
    border-inline-start: 3px solid var(--rsv-success);
}

.rsv-teszt-merleg__panel--atnez {
    border-inline-start: 3px solid var(--rsv-brand-primary);
}

.rsv-teszt-merleg__cim {
    display: flex;
    gap: var(--rsv-ter-2);
    align-items: center;
    margin: 0 0 var(--rsv-ter-3);
    font-size: var(--rsv-meret-h4);
}

.rsv-teszt-merleg__jel {
    display: inline-flex;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    color: var(--rsv-brand-primary);
}

.rsv-teszt-merleg__panel--jol .rsv-teszt-merleg__jel {
    color: var(--rsv-success);
}

.rsv-teszt-merleg__jel svg {
    inline-size: 100%;
    block-size: 100%;
}

.rsv-teszt-merleg__lead {
    margin: 0 0 var(--rsv-ter-3);
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
}

.rsv-teszt-merleg__lista {
    display: grid;
    gap: var(--rsv-ter-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.rsv-teszt-merleg__lista li {
    padding-inline-start: var(--rsv-ter-4);
    position: relative;
}

.rsv-teszt-merleg__lista li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.55em;
    inline-size: 0.4rem;
    block-size: 0.4rem;
    border-radius: 50%;
    background: var(--rsv-success);
}

.rsv-teszt-ajanlasok {
    display: grid;
    gap: var(--rsv-ter-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.rsv-teszt-ajanlas {
    display: inline-flex;
    flex-direction: column;
    gap: 0.35rem;
    font-weight: 600;
    text-decoration: none;
}

.rsv-teszt-ajanlas__vonal {
    display: block;
    inline-size: 2.5rem;
    block-size: 2px;
    border-radius: var(--rsv-radius-pill);
    background: var(--rsv-brand-primary);
    transition: inline-size .25s ease;
}

@media (hover: hover) and (pointer: fine) {
    .rsv-teszt-ajanlas:hover .rsv-teszt-ajanlas__vonal {
        inline-size: 4rem;
    }
}


/* 33.10 Részletes javítás
   --------------------------------------------------------------------------
   AZ ÁLLAPOT NEM CSAK SZÍNBŐL DERÜL KI: ikon ÉS szöveges címke együtt
   (`FELADAT.md` §9/3). A színt a `--rsv-success` / `--rsv-warning` token
   adja, de önmagában egyik sem hordoz jelentést. */

.rsv-teszt-javitas {
    display: grid;
    gap: var(--rsv-ter-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.rsv-teszt-javitas__elem {
    padding: var(--rsv-ter-5);
    border: 1px solid var(--rsv-border-default);
    border-radius: var(--rsv-radius-lg);
    background: var(--rsv-surface-card);
}

.rsv-teszt-javitas__fej {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rsv-ter-3);
    align-items: center;
    margin-block-end: var(--rsv-ter-3);
}

.rsv-teszt-javitas__szam {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    border-radius: 50%;
    background: var(--rsv-brand-bare);
    font-size: var(--rsv-meret-meta);
    font-weight: 700;
    color: var(--rsv-brand-dark);
}

.rsv-teszt-allapot {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
    padding: 0.25em 0.8em;
    border-radius: var(--rsv-radius-pill);
    font-size: var(--rsv-meret-meta);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.rsv-teszt-allapot__jel {
    display: inline-flex;
    inline-size: 0.9rem;
    block-size: 0.9rem;
}

.rsv-teszt-allapot__jel svg {
    inline-size: 100%;
    block-size: 100%;
}

.rsv-teszt-allapot--helyes {
    background: color-mix(in srgb, var(--rsv-success) 10%, #fff);
    color: var(--rsv-success);
}

.rsv-teszt-allapot--helytelen {
    background: color-mix(in srgb, var(--rsv-warning) 10%, #fff);
    color: var(--rsv-warning);
}

.rsv-teszt-javitas__kerdes {
    margin: 0 0 var(--rsv-ter-3);
    font-weight: 600;
    line-height: 1.5;
}

.rsv-teszt-javitas__valaszok {
    display: grid;
    gap: 0.2rem var(--rsv-ter-3);
    margin: 0 0 var(--rsv-ter-4);
}

@media (min-width: 576px) {
    .rsv-teszt-javitas__valaszok {
        grid-template-columns: auto minmax(0, 1fr);
    }
}

.rsv-teszt-javitas__valaszok dt {
    font-size: var(--rsv-meret-meta);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--rsv-text-secondary);
}

.rsv-teszt-javitas__valaszok dd {
    margin: 0 0 var(--rsv-ter-2);
}

@media (min-width: 576px) {
    .rsv-teszt-javitas__valaszok dd {
        margin-block-end: 0;
    }
}

.rsv-teszt-javitas__valasz--rossz {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    color: var(--rsv-text-secondary);
}

.rsv-teszt-javitas__valasz--jo {
    font-weight: 600;
    color: var(--rsv-success);
}

.rsv-teszt-javitas__miert {
    padding: var(--rsv-ter-3) var(--rsv-ter-4);
    border-radius: var(--rsv-radius-md);
    background: var(--rsv-brand-bare);
}

.rsv-teszt-javitas__miertcim {
    display: block;
    margin-block-end: 0.25rem;
    font-size: var(--rsv-meret-meta);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--rsv-brand-primary);
}

.rsv-teszt-javitas__miert p {
    margin: 0;
    line-height: 1.65;
}

.rsv-teszt-javitas__teves {
    margin: var(--rsv-ter-3) 0 0;
    padding-inline-start: var(--rsv-ter-4);
    border-inline-start: 2px solid var(--rsv-border-interaktiv);
    font-size: var(--rsv-meret-kicsi);
    line-height: 1.6;
    color: var(--rsv-text-secondary);
}

.rsv-teszt-javitas__lab {
    margin-block-start: var(--rsv-ter-4);
}

.rsv-teszt-javitas__link {
    font-weight: 600;
}

.rsv-teszt-javitas__forras {
    margin: var(--rsv-ter-2) 0 0;
    font-size: var(--rsv-meret-meta);
    line-height: 1.55;
    color: var(--rsv-text-secondary);
}

.rsv-teszt-javitas__forrascim {
    font-weight: 700;
}

.rsv-teszt-ujra {
    margin-block-start: var(--rsv-ter-5);
}

.rsv-teszt-tovabb__leiras {
    display: block;
    margin-block-start: 0.35rem;
    font-size: var(--rsv-meret-kicsi);
    font-weight: 400;
    line-height: 1.55;
    color: var(--rsv-text-secondary);
}


/* --------------------------------------------------------------------------
   34. A `/tudastar/fogalmak` OLDAL — RSV FOGALOMTÁR
   --------------------------------------------------------------------------
   EDITORIAL LISTA, NEM KÁRTYAERDŐ. Kilencvenegy kártya olvashatatlan volna;
   a fogalomtár betűcsoportokra bontott definíciós lista, ugyanazzal a vizuális
   nyelvvel, mint a lezárt oldali szószedetek (`.rsv-alap-szoszedet`).

   ÚJ SZÍN NEM KELETKEZIK: minden érték a meglévő tokenekből jön.

   A betűsáv és a „vissza a betűsorhoz" link valódi horgony, tehát JavaScript
   nélkül is működik. A szűrőmező `hidden` attribútummal indul, és csak a
   `publikus.js` veszi le róla — enélkül működésképtelen mező látszana.
   -------------------------------------------------------------------------- */

.rsv-fogalomtar { padding-block-start: clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-8)); }

/* 34.1 Vezérlősáv — szűrő + betűnavigáció
   -------------------------------------------------------------------------- */

.rsv-fogalomtar__vezerlo {
    display: grid;
    gap: var(--rsv-ter-5);
    margin-bottom: clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-8));
    scroll-margin-top: calc(var(--rsv-fejlec-magassag) + var(--rsv-ter-5));
}

.rsv-fogalomtar__szurocimke {
    display: block;
    margin-bottom: var(--rsv-ter-2);
    font-size: var(--rsv-meret-kicsi);
    font-weight: 700;
    color: var(--rsv-brand-dark);
}

.rsv-fogalomtar__szuromezo {
    width: 100%;
    max-width: 420px;
    min-height: 52px;
    padding: 0 var(--rsv-ter-4);
    border: 1px solid var(--rsv-border-default);
    border-radius: var(--rsv-radius-md);
    background: var(--rsv-surface-card);
    color: var(--rsv-text-primary);
    font: inherit;
}

.rsv-fogalomtar__szuromezo::placeholder { color: var(--rsv-text-secondary); }
.rsv-fogalomtar__szuromezo:hover { border-color: var(--rsv-border-interaktiv); }

.rsv-fogalomtar__szuromezo:focus-visible {
    outline: 3px solid var(--rsv-focus);
    outline-offset: 2px;
}

.rsv-fogalomtar__szuromezo::-webkit-search-decoration,
.rsv-fogalomtar__szuromezo::-webkit-search-cancel-button { -webkit-appearance: none; }

.rsv-fogalomtar__allapot,
.rsv-fogalomtar__nincs {
    margin: var(--rsv-ter-2) 0 0;
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
}

.rsv-fogalomtar__betulista {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rsv-ter-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.rsv-fogalomtar__betu {
    display: grid;
    place-items: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 var(--rsv-ter-2);
    border-radius: var(--rsv-radius-md);
    background: var(--rsv-brand-soft);
    color: var(--rsv-brand-primary);
    font-weight: 700;
    text-decoration: none;
}

.rsv-fogalomtar__betu:hover {
    background: var(--rsv-brand-secondary);
    color: #fff;
}

.rsv-fogalomtar__betu:focus-visible {
    outline: 3px solid var(--rsv-focus);
    outline-offset: 2px;
}

/* 34.2 Betűcsoport
   -------------------------------------------------------------------------- */

.rsv-fogalomtar__csoport {
    margin-bottom: clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-8));
    scroll-margin-top: calc(var(--rsv-fejlec-magassag) + var(--rsv-ter-5));
}

.rsv-fogalomtar__csoportfej {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--rsv-ter-4);
    padding-bottom: var(--rsv-ter-3);
    border-bottom: 2px solid var(--rsv-brand-soft);
}

.rsv-fogalomtar__betucim {
    margin: 0;
    font-size: var(--rsv-meret-h2);
    color: var(--rsv-brand-primary);
}

.rsv-fogalomtar__vissza {
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
    white-space: nowrap;
}

/* 34.3 A fogalmak — valódi definíciós lista
   -------------------------------------------------------------------------- */

.rsv-fogalomtar__lista {
    display: grid;
    gap: 0 clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-8));
    margin: 0;
}

.rsv-fogalomtar__lista > * { min-width: 0; }

@media (min-width: 992px) {
    .rsv-fogalomtar__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.rsv-fogalomtar__tetel {
    position: relative;
    padding: clamp(var(--rsv-ter-4), 2vw, var(--rsv-ter-5)) var(--rsv-ter-5);
    border-top: 1px solid var(--rsv-border-default);
    border-left: 3px solid transparent;
    border-radius: 0 var(--rsv-radius-md) var(--rsv-radius-md) 0;
    scroll-margin-top: calc(var(--rsv-fejlec-magassag) + var(--rsv-ter-5));
    transition: border-left-color .2s ease, background-color .2s ease;
}

.rsv-fogalomtar__tetel:first-child { border-top: 0; }

@media (min-width: 992px) {
    .rsv-fogalomtar__tetel:nth-child(2) { border-top: 0; }
}

/*
 * A CÉLBEJEGYZÉS KIEMELÉSE ÁLLANDÓ, NEM VILLANÁS — ugyanaz az elv, mint az
 * oldali szószedeteknél: `prefers-reduced-motion` mellett és JavaScript
 * nélkül is látszik, melyik fogalomhoz érkezett a látogató.
 */
.rsv-fogalomtar__tetel:target {
    background: var(--rsv-brand-soft);
    border-left-color: var(--rsv-brand-secondary);
}

/*
 * ALIAS-HORGONY. Üres, láthatatlan jelölő a korábbi azonosítókhoz. Azért
 * abszolút pozicionált, hogy ne tegyen bele függőleges térközt a bejegyzésbe.
 */
.rsv-fogalomtar__aliashorgony {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    scroll-margin-top: calc(var(--rsv-fejlec-magassag) + var(--rsv-ter-5));
}

.rsv-fogalomtar__cim {
    margin: 0 0 var(--rsv-ter-2);
    font-size: var(--rsv-meret-h3);
    font-weight: 700;
    line-height: 1.3;
    color: var(--rsv-brand-dark);
}

.rsv-fogalomtar__definicio {
    margin: 0;
    max-width: 52ch;
    font-size: var(--rsv-meret-torzs);
    line-height: var(--rsv-sormagassag-torzs);
    color: var(--rsv-text-secondary);
}

/* --------------------------------------------------------------------------
   35. A `/kereses` OLDAL — TELJES WEBHELYES KERESŐ
   --------------------------------------------------------------------------
   VALÓDI KERESŐOLDAL. A találat SZÖVEGES sor: típus, cím, kiemelt kivonat és
   tartalmi kontextus. Kép szándékosan nincs — a hat találattípus közül csak a
   Tudástár-cikknek van vezetőképe, és az is ideiglenes; egy félig képes lista
   vizuálisan szétesne.

   MINDEN VEZÉRLŐ ŰRLAP: a szűrő és a lapozó is `form method="post"`, mert a
   keresőkifejezés SOHA nem kerülhet URL-be (PROJECT_RULES §11.3). A gombok
   ezért `button` elemek, nem linkek — a stílusuk viszont linkszerű.

   ÚJ SZÍN NEM KELETKEZIK: minden érték a meglévő tokenekből jön.
   -------------------------------------------------------------------------- */

/* 35.1 Fejléc és keresőűrlap
   -------------------------------------------------------------------------- */

.rsv-keresofej {
    padding-block: clamp(var(--rsv-ter-6), 5vw, var(--rsv-ter-8)) clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-6));
    background: var(--rsv-brand-bare);
}

.rsv-keresofej__cim {
    margin: var(--rsv-ter-4) 0 var(--rsv-ter-5);
    font-size: var(--rsv-meret-h1);
    color: var(--rsv-brand-dark);
}

.rsv-keresourlap { max-width: 720px; }

.rsv-keresourlap__sor {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rsv-ter-3);
}

.rsv-keresourlap__mezo {
    flex: 1 1 260px;
    min-width: 0;
    min-height: 56px;
    padding: 0 var(--rsv-ter-4);
    border: 1px solid var(--rsv-border-default);
    border-radius: var(--rsv-radius-md);
    background: var(--rsv-surface-card);
    color: var(--rsv-text-primary);
    font: inherit;
    font-size: 1rem;
}

.rsv-keresourlap__mezo::placeholder { color: var(--rsv-text-secondary); }
.rsv-keresourlap__mezo:hover { border-color: var(--rsv-border-interaktiv); }

.rsv-keresourlap__mezo:focus-visible {
    outline: 3px solid var(--rsv-focus);
    outline-offset: 2px;
}

.rsv-keresourlap__mezo::-webkit-search-decoration,
.rsv-keresourlap__mezo::-webkit-search-cancel-button { -webkit-appearance: none; }

.rsv-keresourlap__gomb { flex: 0 0 auto; }

.rsv-keresourlap__sugo {
    margin: var(--rsv-ter-2) 0 0;
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
}

/* 35.2 Biztonsági kiemelés — NAVIGÁCIÓ, nem triázs
   --------------------------------------------------------------------------
   A sürgősségi vizuális nyelv nem használható figyelemfelkeltésre (kézikönyv
   §13), ezért ez a panel a MÁRKA színeit viseli, nem a vörös urgent tokent:
   nem riaszt, hanem utat mutat.
   -------------------------------------------------------------------------- */

.rsv-keresesbiztonsag {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--rsv-ter-4);
    margin-bottom: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-6));
    padding: clamp(var(--rsv-ter-4), 2.2vw, var(--rsv-ter-5));
    border-left: 4px solid var(--rsv-brand-secondary);
    border-radius: 0 var(--rsv-radius-lg) var(--rsv-radius-lg) 0;
    background: var(--rsv-brand-soft);
}

.rsv-keresesbiztonsag__szoveg {
    margin: 0;
    max-width: 60ch;
    font-weight: 700;
    color: var(--rsv-brand-dark);
}

/* 35.3 Típusszűrők
   -------------------------------------------------------------------------- */

.rsv-keresesszuro__lista {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rsv-ter-2);
    margin: 0 0 var(--rsv-ter-5);
    padding: 0;
    list-style: none;
}

.rsv-keresesszuro__elem {
    display: inline-flex;
    align-items: center;
    gap: var(--rsv-ter-2);
    min-height: 44px;
    padding: 0 var(--rsv-ter-4);
    border: 1px solid var(--rsv-border-default);
    border-radius: 999px;
    background: var(--rsv-surface-card);
    color: var(--rsv-text-primary);
    font: inherit;
    font-size: var(--rsv-meret-kicsi);
    font-weight: 700;
    cursor: pointer;
}

.rsv-keresesszuro__elem:hover { border-color: var(--rsv-border-interaktiv); }

.rsv-keresesszuro__elem:focus-visible {
    outline: 3px solid var(--rsv-focus);
    outline-offset: 2px;
}

.rsv-keresesszuro__elem--aktiv {
    background: var(--rsv-brand-primary);
    border-color: var(--rsv-brand-primary);
    color: #fff;
}

.rsv-keresesszuro__db {
    font-weight: 400;
    opacity: .75;
}

/* 35.4 Találati lista
   -------------------------------------------------------------------------- */

.rsv-keresestalalat__osszegzes {
    margin: 0 0 var(--rsv-ter-3);
    font-weight: 700;
    color: var(--rsv-brand-dark);
}

.rsv-keresestalalat__jegyzet {
    margin: 0 0 var(--rsv-ter-4);
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
}

.rsv-keresestalalat__lista {
    display: grid;
    gap: var(--rsv-ter-3);
    margin: 0;
    padding: 0;
    list-style: none;
    max-width: 850px;
}

.rsv-keresestalalat__link {
    display: grid;
    gap: var(--rsv-ter-2);
    padding: clamp(var(--rsv-ter-4), 2vw, var(--rsv-ter-5));
    border-radius: var(--rsv-radius-lg);
    background: var(--rsv-surface-card);
    box-shadow: var(--rsv-arnyek-sm), inset 0 0 0 1px rgba(141, 69, 162, .1);
    color: inherit;
    text-decoration: none;
    transition: box-shadow .2s ease;
}

.rsv-keresestalalat__link:hover {
    box-shadow: var(--rsv-arnyek-md), inset 0 0 0 1px rgba(141, 69, 162, .2);
}

.rsv-keresestalalat__link:focus-visible {
    outline: 3px solid var(--rsv-focus);
    outline-offset: 2px;
}

.rsv-keresestalalat__fej {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rsv-ter-2);
}

.rsv-keresestalalat__tipus {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--rsv-ter-3);
    border-radius: 999px;
    background: var(--rsv-brand-soft);
    color: var(--rsv-brand-primary);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.rsv-keresestalalat__cimke {
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
}

.rsv-keresestalalat__cim {
    font-size: var(--rsv-meret-h3);
    font-weight: 700;
    line-height: 1.35;
    color: var(--rsv-brand-dark);
}

.rsv-keresestalalat__kivonat {
    font-size: var(--rsv-meret-torzs);
    line-height: var(--rsv-sormagassag-torzs);
    color: var(--rsv-text-secondary);
}

.rsv-keresestalalat__kontextus {
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
    opacity: .85;
}

/*
 * A TALÁLATI KIEMELÉS. A böngésző alapértelmezett sárga jelölése idegen a
 * palettától; itt a márka lágy levendulája jelöli az egyezést.
 */
.rsv-keresestalalat__cim mark,
.rsv-keresestalalat__kivonat mark {
    padding: 0 .15em;
    border-radius: 3px;
    background: var(--rsv-brand-soft);
    color: inherit;
    font-weight: inherit;
}

/* 35.5 Lapozó
   -------------------------------------------------------------------------- */

.rsv-kereseslapozo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--rsv-ter-4);
    margin-top: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-6));
}

.rsv-kereseslapozo__gomb {
    min-height: 44px;
    padding: 0 var(--rsv-ter-5);
    border: 1px solid var(--rsv-border-default);
    border-radius: var(--rsv-radius-md);
    background: var(--rsv-surface-card);
    color: var(--rsv-brand-primary);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.rsv-kereseslapozo__gomb:hover { border-color: var(--rsv-border-interaktiv); }

.rsv-kereseslapozo__gomb:focus-visible {
    outline: 3px solid var(--rsv-focus);
    outline-offset: 2px;
}

.rsv-kereseslapozo__allapot {
    margin: 0;
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
}

/* 35.6 Ajánló — a nulla találat nem zsákutca
   -------------------------------------------------------------------------- */

.rsv-keresesajanlo {
    margin-top: clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-8));
    padding-top: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-6));
    border-top: 1px solid var(--rsv-border-default);
}

.rsv-keresesajanlo__cim {
    margin: 0 0 var(--rsv-ter-4);
    font-size: var(--rsv-meret-h3);
    color: var(--rsv-brand-dark);
}

.rsv-keresesajanlo__lista {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rsv-ter-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.rsv-keresesajanlo__elem {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--rsv-ter-4);
    border-radius: 999px;
    background: var(--rsv-brand-soft);
    color: var(--rsv-brand-primary);
    font-weight: 700;
    text-decoration: none;
}

.rsv-keresesajanlo__elem:hover {
    background: var(--rsv-brand-secondary);
    color: #fff;
}

.rsv-keresesajanlo__elem:focus-visible {
    outline: 3px solid var(--rsv-focus);
    outline-offset: 2px;
}

/* 35.7 Autocomplete — RÁÉPÜLŐ réteg
   --------------------------------------------------------------------------
   A lista `hidden` attribútummal indul, és csak a `publikus.js` nyitja ki.
   JavaScript nélkül a keresés teljes értékű marad; enélkül csak egy üres,
   értelmezhetetlen doboz látszana.
   -------------------------------------------------------------------------- */

.rsv-kereso,
.rsv-keresourlap { position: relative; }

.rsv-javaslat {
    position: absolute;
    z-index: 60;
    inset-inline: 0;
    top: calc(100% + 6px);
    margin: 0;
    padding: var(--rsv-ter-2);
    border-radius: var(--rsv-radius-md);
    background: var(--rsv-surface-card);
    box-shadow: var(--rsv-arnyek-md), inset 0 0 0 1px rgba(141, 69, 162, .16);
    list-style: none;
}

.rsv-javaslat__elem {
    display: flex;
    align-items: center;
    gap: var(--rsv-ter-3);
    width: 100%;
    min-height: 44px;
    padding: var(--rsv-ter-2) var(--rsv-ter-3);
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--rsv-text-primary);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.rsv-javaslat__elem:hover,
.rsv-javaslat__elem[aria-selected="true"] {
    background: var(--rsv-brand-soft);
    color: var(--rsv-brand-dark);
}

.rsv-javaslat__elem:focus-visible {
    outline: 3px solid var(--rsv-focus);
    outline-offset: -2px;
}

.rsv-javaslat__tipus {
    flex: none;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--rsv-brand-secondary);
}

.rsv-javaslat__cim {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   36. JOGI OLDALAK ÉS A HOZZÁJÁRULÁS-KEZELŐ
   --------------------------------------------------------------------------
   Két, egy munkacsomagban készült felület:

     - a három jogi oldal (`/impresszum`, `/adatkezelesi-tajekoztato`,
       `/suti-tajekoztato`) közös olvasási szerkezete — `.rsv-jogi*`;
     - a hozzájárulás-kezelő modal — `.rsv-suti*`.

   ÚJ SZÍNPALETTA NEM KELETKEZETT. Ez a szakasz kizárólag a 2. szakasz
   tokenjeiből és azok `color-mix()` alakjából épül, pontosan úgy, ahogy a
   lezárt aloldalak. A lila a karakter, nem a tapéta: a felület világos, a
   plum a címekben, a hivatkozásokban és az elsődleges gombon jelenik meg.

   A HERO A LEZÁRT `.rsv-alaphero` KOMPONENS, egyoszlopos változatban. Nem
   épült második hero-rendszer; a jogi oldal csak annyiban tér el, hogy
   SZÁNDÉKOSAN nincs benne illusztráció — a jogi szöveg mellé dekoratív kép
   nem kerül.
   -------------------------------------------------------------------------- */

/* 36.1 A kép nélküli page-hero
   -------------------------------------------------------------------------- */

/* A `--szoveges` UGYANEZ a változat, semleges néven: a `/kapcsolat` is
   kép nélküli page-herót kap, de nem jogi oldal. Egyetlen szabálykészlet
   szolgálja ki mindkettőt — második hero-rendszer nem épült. */
.rsv-alaphero--jogi .rsv-alaphero__burok,
.rsv-alaphero--szoveges .rsv-alaphero__burok {
    /* Nincs kétoszlopos rács: a szöveg a teljes szélességet kapja, de az
       olvasási oszlop korlátja miatt nem fut szét. */
    display: block;
}

.rsv-jogihero__szoveg {
    max-width: 62ch;
}

.rsv-jogihero__datum {
    display: flex;
    align-items: flex-start;
    gap: var(--rsv-ter-2);
    margin-top: var(--rsv-ter-5);
    margin-bottom: 0;
    padding: var(--rsv-ter-3) var(--rsv-ter-4);
    border: 1px solid color-mix(in srgb, var(--rsv-brand-secondary) 28%, #fff);
    border-radius: var(--rsv-radius-sm);
    background: color-mix(in srgb, var(--rsv-brand-bare) 70%, #fff);
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
}

.rsv-jogihero__datum strong { color: var(--rsv-brand-dark); }

.rsv-jogihero__datumikon {
    --ikon-meret: 18px;
    color: var(--rsv-brand-secondary);
    flex: none;
    margin-top: .15em;
}


/* 36.2 Az oldal rácsa — tartalomjegyzék + olvasási oszlop
   --------------------------------------------------------------------------
   MOBILON EGY OSZLOP, a tartalomjegyzék a szöveg FÖLÖTT. 992 px-től a jegyzék
   önálló, TAPADÓ hasábba kerül: a jogi oldalak hosszúak, és görgetés közben is
   látni kell, hol tartunk.

   Az olvasási oszlop a projekt kanonikus 760–850 px-es irányát követi
   (PROJECT_RULES §16/A), nem a burok teljes szélességét.
   -------------------------------------------------------------------------- */

.rsv-jogi {
    padding-block: var(--rsv-szekcio-ter);
}

.rsv-jogi__racs {
    display: grid;
    gap: clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-8));
}

@media (min-width: 992px) {
    .rsv-jogi__racs {
        grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
        align-items: start;
    }
}

.rsv-jogi__torzs {
    max-width: 820px;
    min-width: 0;
}


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

.rsv-jogi__jegyzek {
    padding: var(--rsv-ter-5);
    border: 1px solid var(--rsv-border-default);
    border-radius: var(--rsv-radius-md);
    background: var(--rsv-surface-card);
    box-shadow: var(--rsv-arnyek-sm);
}

@media (min-width: 992px) {
    .rsv-jogi__jegyzek {
        position: sticky;
        /* A lebegő fejléc alá ne csússzon be. */
        top: calc(var(--rsv-fejlec-magassag) + var(--rsv-ter-4));
        max-height: calc(100vh - var(--rsv-fejlec-magassag) - var(--rsv-ter-8));
        overflow-y: auto;
    }
}

.rsv-jogi__jegyzekcim {
    font-size: var(--rsv-meret-meta);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rsv-text-secondary);
    margin: 0 0 var(--rsv-ter-3);
}

.rsv-jogi__jegyzek ol {
    list-style: none;
    counter-reset: jogi-jegyzek;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--rsv-ter-1);
}

.rsv-jogi__jegyzek li { counter-increment: jogi-jegyzek; }

.rsv-jogi__jegyzek a {
    display: flex;
    gap: var(--rsv-ter-2);
    padding: var(--rsv-ter-2) var(--rsv-ter-2) var(--rsv-ter-2) 0;
    font-size: var(--rsv-meret-kicsi);
    line-height: 1.4;
    color: var(--rsv-text-primary);
    text-decoration: none;
    border-radius: var(--rsv-radius-sm);
}

.rsv-jogi__jegyzek a::before {
    content: counter(jogi-jegyzek) ".";
    flex: none;
    min-width: 1.6em;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--rsv-brand-secondary);
    font-weight: 700;
}

.rsv-jogi__jegyzek a:hover,
.rsv-jogi__jegyzek a:focus-visible {
    color: var(--rsv-brand-primary);
    text-decoration: underline;
    text-underline-offset: .2em;
}


/* 36.4 Szakaszok és szövegtörzs
   -------------------------------------------------------------------------- */

.rsv-jogi__szakasz + .rsv-jogi__szakasz {
    margin-top: clamp(var(--rsv-ter-7), 4vw, var(--rsv-ter-8));
}

/*
 * A HORGONYRA UGRÁS ne a lebegő fejléc alá vigye a címet. A `scroll-margin-top`
 * ugyanazt a tokent használja, amelyet a hero is — így a fejléc magasságának
 * változásakor nem kell két helyen átírni.
 */
.rsv-jogi__szakasz {
    scroll-margin-top: calc(var(--rsv-fejlec-magassag) + var(--rsv-ter-4));
}

.rsv-jogi__cim {
    font-size: var(--rsv-meret-h3);
    line-height: var(--rsv-sormagassag-cim);
    color: var(--rsv-brand-dark);
    margin: 0 0 var(--rsv-ter-4);
    padding-bottom: var(--rsv-ter-3);
    border-bottom: 2px solid color-mix(in srgb, var(--rsv-brand-secondary) 35%, #fff);
}

.rsv-jogi__alcim {
    font-size: var(--rsv-meret-h4);
    color: var(--rsv-brand-primary);
    margin: var(--rsv-ter-6) 0 var(--rsv-ter-3);
}

.rsv-jogi__bekezdes {
    margin: 0 0 var(--rsv-ter-4);
    line-height: var(--rsv-sormagassag-torzs);
}

.rsv-jogi__lista {
    list-style: none;
    margin: 0 0 var(--rsv-ter-5);
    padding: 0;
    display: grid;
    gap: var(--rsv-ter-3);
}

.rsv-jogi__lista li {
    display: flex;
    gap: var(--rsv-ter-3);
    line-height: var(--rsv-sormagassag-torzs);
}

/* A semleges felsorolás jelölője diszkrét pont, nem ikon. */
.rsv-jogi__lista:not(.rsv-jogi__lista--pipa) li::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    margin-top: .65em;
    border-radius: 50%;
    background: var(--rsv-brand-secondary);
}

/*
 * A PIPÁS VÁLTOZAT JELENTÉST HORDOZ: a látogató javára szóló garanciát jelöl
 * („ezt nem tesszük meg", „ez nem kerül ki"). A siker-zöld itt tehát nem
 * dekoráció.
 */
.rsv-jogi__pipa {
    --ikon-meret: 20px;
    flex: none;
    color: var(--rsv-success);
    margin-top: .1em;
}


/* 36.5 Adatsorok (definíciós lista)
   -------------------------------------------------------------------------- */

.rsv-jogi__adatok {
    margin: 0 0 var(--rsv-ter-5);
    padding: var(--rsv-ter-5);
    border: 1px solid var(--rsv-border-default);
    border-radius: var(--rsv-radius-md);
    background: var(--rsv-surface-card);
    display: grid;
    gap: var(--rsv-ter-3);
}

.rsv-jogi__adatsor {
    display: grid;
    gap: var(--rsv-ter-1);
}

@media (min-width: 640px) {
    .rsv-jogi__adatsor {
        grid-template-columns: minmax(150px, 34%) minmax(0, 1fr);
        gap: var(--rsv-ter-4);
        align-items: baseline;
    }
}

.rsv-jogi__adatsor + .rsv-jogi__adatsor {
    padding-top: var(--rsv-ter-3);
    border-top: 1px solid var(--rsv-border-default);
}

.rsv-jogi__adatok dt {
    font-size: var(--rsv-meret-kicsi);
    font-weight: 700;
    color: var(--rsv-text-secondary);
}

.rsv-jogi__adatok dd {
    margin: 0;
    color: var(--rsv-text-primary);
    /* Hosszú e-mail-cím és URL mobilon se feszítse szét a dobozt. */
    overflow-wrap: anywhere;
}


/* 36.6 Táblázat
   --------------------------------------------------------------------------
   A SZÉLES TÁBLÁZAT SAJÁT GÖRGETŐ SÁVOT KAP. A lap törzse SOHA nem görög
   vízszintesen — a kötelező vizuális QA 320 px-en pontosan ezen bukna el.
   A burok `tabindex="0"`, tehát billentyűzettel is görgethető.
   -------------------------------------------------------------------------- */

.rsv-jogi__tablazat-burok {
    margin: 0 0 var(--rsv-ter-5);
    overflow-x: auto;
    border: 1px solid var(--rsv-border-default);
    border-radius: var(--rsv-radius-md);
    background: var(--rsv-surface-card);
}

.rsv-jogi__tablazat-burok:focus-visible {
    outline: 3px solid var(--rsv-focus);
    outline-offset: 2px;
}

.rsv-jogi__tablazat {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: var(--rsv-meret-kicsi);
}

.rsv-jogi__tablazat th,
.rsv-jogi__tablazat td {
    padding: var(--rsv-ter-3) var(--rsv-ter-4);
    text-align: left;
    vertical-align: top;
    line-height: 1.55;
}

.rsv-jogi__tablazat thead th {
    background: var(--rsv-brand-bare);
    color: var(--rsv-brand-dark);
    font-weight: 700;
    white-space: nowrap;
    border-bottom: 2px solid color-mix(in srgb, var(--rsv-brand-secondary) 30%, #fff);
}

.rsv-jogi__tablazat tbody tr + tr th,
.rsv-jogi__tablazat tbody tr + tr td {
    border-top: 1px solid var(--rsv-border-default);
}

.rsv-jogi__tablazat tbody th {
    font-weight: 600;
    color: var(--rsv-text-primary);
}

.rsv-jogi__tablazat code {
    font-size: .92em;
    color: var(--rsv-brand-primary);
    overflow-wrap: anywhere;
}


/* 36.7 Jegyzet (info / figyelem)
   --------------------------------------------------------------------------
   A FIGYELEM VÁLTOZAT NEM SÜRGŐSSÉGI SZÍN. A sürgősségi vizuális nyelv
   (`--rsv-urgent`) kizárólag valódi egészségügyi sürgősséghez tartozik
   (kézikönyv §13); egy jogi jegyzet nem az. Ezért a figyelmeztető változat a
   `--rsv-warning` tokent használja.
   -------------------------------------------------------------------------- */

.rsv-jogi__jegyzet {
    --rsv-jegyzet-szin: var(--rsv-brand-secondary);

    display: flex;
    gap: var(--rsv-ter-3);
    margin: 0 0 var(--rsv-ter-5);
    padding: var(--rsv-ter-4) var(--rsv-ter-5);
    border-radius: var(--rsv-radius-md);
    border: 1px solid color-mix(in srgb, var(--rsv-jegyzet-szin) 32%, #fff);
    border-left-width: 4px;
    background: color-mix(in srgb, var(--rsv-jegyzet-szin) 6%, #fff);
}

.rsv-jogi__jegyzet--figyelem { --rsv-jegyzet-szin: var(--rsv-warning); }

.rsv-jogi__jegyzet p {
    margin: 0;
    font-size: var(--rsv-meret-kicsi);
    line-height: var(--rsv-sormagassag-torzs);
}

.rsv-jogi__jegyzetikon {
    --ikon-meret: 22px;
    flex: none;
    color: var(--rsv-jegyzet-szin);
    margin-top: .1em;
}


/* 36.8 Hivatkozáslista és gombsor
   -------------------------------------------------------------------------- */

.rsv-jogi__linkek {
    list-style: none;
    margin: 0 0 var(--rsv-ter-5);
    padding: 0;
    display: grid;
    gap: var(--rsv-ter-3);
}

.rsv-jogi__linkek li {
    padding: var(--rsv-ter-4);
    border: 1px solid var(--rsv-border-default);
    border-radius: var(--rsv-radius-md);
    background: var(--rsv-surface-card);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.rsv-jogi__linkek li:hover {
    border-color: var(--rsv-border-interaktiv);
    box-shadow: var(--rsv-arnyek-sm);
}

.rsv-jogi__linkek a {
    font-weight: 700;
    color: var(--rsv-brand-primary);
}

.rsv-jogi__linkleiras {
    display: block;
    margin-top: var(--rsv-ter-1);
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
}

.rsv-jogi__gombsor { margin: 0 0 var(--rsv-ter-5); }


/* 36.9 A hozzájárulás-kezelő modal
   --------------------------------------------------------------------------
   VALÓDI MODÁLIS ABLAK, nem sávcsík. A viselkedést a consent.js adja; ez a
   blokk csak a megjelenés.

   NINCS DARK PATTERN. A „Csak szükséges" és az „Összes elfogadása" UGYANAZON
   a soron, UGYANAKKORA felülettel áll. Az elfogadás kap ugyan márkaszínt —
   mert az az elsődleges gombstílus —, de az elutasítás nem halványabb, nem
   kisebb, és nem kerül eggyel mélyebb menübe. Mindkettő a lezárt
   `.rsv-gomb` komponens.
   -------------------------------------------------------------------------- */

.rsv-suti {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    /* A `safe-area` a bevágásos telefonokon tartja a gombokat elérhető helyen. */
    padding: max(var(--rsv-ter-4), env(safe-area-inset-top))
             max(var(--rsv-ter-4), env(safe-area-inset-right))
             max(var(--rsv-ter-4), env(safe-area-inset-bottom))
             max(var(--rsv-ter-4), env(safe-area-inset-left));
}

.rsv-suti[hidden] { display: none; }

/* A háttéroldal görgetésének letiltása, amíg a modal nyitva van. */
body.suti-fal-nyitva { overflow: hidden; }

.rsv-suti__hatter {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--rsv-brand-dark) 62%, transparent);
    backdrop-filter: blur(3px);
}

.rsv-suti__ablak {
    position: relative;
    width: min(100%, 640px);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--rsv-surface-card);
    border-radius: var(--rsv-radius-lg);
    box-shadow: var(--rsv-arnyek-lg);
    overflow: hidden;
}

.rsv-suti__ablak:focus { outline: none; }
.rsv-suti__ablak:focus-visible { outline: 3px solid var(--rsv-focus); outline-offset: 3px; }

.rsv-suti__nezet {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
}

.rsv-suti__nezet[hidden] { display: none; }

.rsv-suti__fejlec {
    display: flex;
    align-items: center;
    gap: var(--rsv-ter-3);
    padding: var(--rsv-ter-5) var(--rsv-ter-5) var(--rsv-ter-3);
    border-bottom: 1px solid var(--rsv-border-default);
}

.rsv-suti__ikon {
    --ikon-meret: 26px;
    color: var(--rsv-brand-primary);
    flex: none;
}

.rsv-suti__cim {
    margin: 0;
    font-size: var(--rsv-meret-h4);
    color: var(--rsv-brand-dark);
}

/* A TÖRZS GÖRGETHETŐ, a gombok fixen elérhetők maradnak — mobilon ez a
   különbség dönti el, hogy a látogató egyáltalán el tud-e jutni a döntésig. */
.rsv-suti__torzs {
    padding: var(--rsv-ter-5);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
}

.rsv-suti__szoveg {
    margin: 0 0 var(--rsv-ter-4);
    font-size: var(--rsv-meret-kicsi);
    line-height: var(--rsv-sormagassag-torzs);
}

.rsv-suti__megjegyzes {
    margin: 0 0 var(--rsv-ter-4);
    padding: var(--rsv-ter-3) var(--rsv-ter-4);
    border-radius: var(--rsv-radius-sm);
    background: var(--rsv-brand-bare);
    font-size: var(--rsv-meret-meta);
    line-height: 1.6;
    color: var(--rsv-text-secondary);
}

.rsv-suti__jogi {
    margin: 0;
    font-size: var(--rsv-meret-meta);
}

.rsv-suti__jogi a {
    color: var(--rsv-brand-primary);
    text-decoration: underline;
    text-underline-offset: .2em;
}

.rsv-suti__lablec {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rsv-ter-3);
    padding: var(--rsv-ter-4) var(--rsv-ter-5) var(--rsv-ter-5);
    border-top: 1px solid var(--rsv-border-default);
    background: var(--rsv-surface-card);
}

/*
 * A HÁROM GOMB EGYENRANGÚ FELÜLETET KAP. A `flex: 1 1 0` miatt ugyanolyan
 * szélesek; mobilon egymás alá kerülnek, de akkor is teljes szélességben.
 * Így az elutasítás soha nem lesz kisebb célpont, mint az elfogadás.
 */
.rsv-suti__gomb {
    flex: 1 1 0;
    min-width: 140px;
    justify-content: center;
    text-align: center;
}

@media (max-width: 480px) {
    .rsv-suti__gomb { flex-basis: 100%; }
}


/* 36.10 Kategóriák és kapcsolók
   -------------------------------------------------------------------------- */

.rsv-suti__kategoriak {
    display: grid;
    gap: var(--rsv-ter-4);
    margin-bottom: var(--rsv-ter-5);
}

.rsv-suti-kategoria {
    padding: var(--rsv-ter-4);
    border: 1px solid var(--rsv-border-default);
    border-radius: var(--rsv-radius-md);
    background: var(--rsv-surface-page);
}

.rsv-suti-kategoria__fej {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rsv-ter-3);
}

.rsv-suti-kategoria__nev {
    margin: 0;
    font-size: var(--rsv-meret-torzs);
    color: var(--rsv-brand-dark);
}

.rsv-suti-kategoria__allando {
    display: inline-flex;
    align-items: center;
    gap: var(--rsv-ter-1);
    flex: none;
    font-size: var(--rsv-meret-meta);
    font-weight: 700;
    color: var(--rsv-success);
}

.rsv-suti-kategoria__pipa { --ikon-meret: 18px; }

.rsv-suti-kategoria__leiras {
    margin: var(--rsv-ter-2) 0 0;
    font-size: var(--rsv-meret-meta);
    line-height: 1.6;
    color: var(--rsv-text-secondary);
}

/*
 * A KAPCSOLÓ VALÓDI CHECKBOX, csak vizuálisan kapcsoló alakú. A natív mező
 * marad a fókusz- és billentyűzetkezelés gazdája: Tabbal elérhető, Szóközzel
 * váltható, és a képernyőolvasó jelölőnégyzetként jelenti be.
 */
.rsv-suti-kapcsolo { position: relative; flex: none; }

.rsv-suti-kapcsolo__mezo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.rsv-suti-kapcsolo__cimke {
    display: block;
    width: 52px;
    height: 30px;
    border-radius: var(--rsv-radius-pill);
    background: color-mix(in srgb, var(--rsv-text-secondary) 32%, #fff);
    border: 1px solid color-mix(in srgb, var(--rsv-text-secondary) 45%, #fff);
    position: relative;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease;
}

.rsv-suti-kapcsolo__cimke::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--rsv-arnyek-sm);
    transition: transform .18s ease;
}

.rsv-suti-kapcsolo__mezo:checked + .rsv-suti-kapcsolo__cimke {
    background: var(--rsv-brand-primary);
    border-color: var(--rsv-brand-primary);
}

.rsv-suti-kapcsolo__mezo:checked + .rsv-suti-kapcsolo__cimke::after {
    transform: translateX(22px);
}

.rsv-suti-kapcsolo__mezo:focus-visible + .rsv-suti-kapcsolo__cimke {
    outline: 3px solid var(--rsv-focus);
    outline-offset: 3px;
}


/* 36.11 Sütilista a modalban
   -------------------------------------------------------------------------- */

.rsv-suti-lista { margin-top: var(--rsv-ter-3); }

.rsv-suti-lista__nyito {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rsv-ter-2);
    padding: var(--rsv-ter-2) 0;
    font-size: var(--rsv-meret-meta);
    font-weight: 700;
    color: var(--rsv-brand-primary);
    cursor: pointer;
    list-style: none;
}

.rsv-suti-lista__nyito::-webkit-details-marker { display: none; }

.rsv-suti-lista__nyito:focus-visible {
    outline: 3px solid var(--rsv-focus);
    outline-offset: 2px;
    border-radius: var(--rsv-radius-sm);
}

.rsv-suti-lista__jel {
    --ikon-meret: 16px;
    transition: transform .18s ease;
}

.rsv-suti-lista[open] .rsv-suti-lista__jel { transform: rotate(180deg); }

.rsv-suti-szolgaltatas {
    margin-top: var(--rsv-ter-3);
    padding-top: var(--rsv-ter-3);
    border-top: 1px solid var(--rsv-border-default);
}

.rsv-suti-szolgaltatas__nev {
    margin: 0;
    font-size: var(--rsv-meret-meta);
    font-weight: 700;
    color: var(--rsv-text-primary);
}

.rsv-suti-szolgaltatas__szolgaltato {
    margin: 0 0 var(--rsv-ter-2);
    font-size: var(--rsv-meret-meta);
    color: var(--rsv-text-secondary);
}

.rsv-suti-tetel {
    display: grid;
    grid-template-columns: minmax(70px, auto) minmax(0, 1fr);
    gap: var(--rsv-ter-1) var(--rsv-ter-3);
    margin: 0 0 var(--rsv-ter-3);
    font-size: var(--rsv-meret-meta);
    line-height: 1.55;
}

.rsv-suti-tetel dt { font-weight: 700; color: var(--rsv-text-secondary); }
.rsv-suti-tetel dd { margin: 0; overflow-wrap: anywhere; }
.rsv-suti-tetel code { color: var(--rsv-brand-primary); }


/* 36.12 A lábléc sütibeállítás-gombja
   --------------------------------------------------------------------------
   A jogi hivatkozások SORÁBAN áll, ezért PONTOSAN úgy néz ki, mint a
   szomszédai — de szemantikailag `<button>` marad, mert műveletet indít (a
   hozzájárulás-kezelő újranyitását), nem navigál. Kamu `href="#"` linkké
   alakítani tilos: a képernyőolvasónak is gombként kell bejelentenie.

   MIÉRT NEM VOLT ELÉG A `font: inherit`? Mert a lábléc hivatkozásai SAJÁT,
   kisebb betűméretet kapnak (`.rsv-lablec a` -> `--rsv-meret-kicsi`), a `<li>`
   viszont a törzsméretet örökli. A gomb így NAGYOBB betűvel és más
   alapvonalon ült, mint a mellette álló linkek — ettől látszott utólag
   odatettnek. Az értékeket ezért kifejezetten a linkekéhez igazítjuk.

   ÁLLANDÓ ALÁHÚZÁS NINCS. A lábléc linkjei is csak hoveren kapnak vonalat;
   a korábbi, folyamatosan aláhúzott alak nyers böngészőlinknek látszott.

   A NAGYOBB ÉRINTÉSI CÉL NEM MOZDÍTJA A LAYOUTOT: a függőleges padding
   ugyanakkora negatív margóval jár, tehát a gomb elfoglalt helye változatlan,
   csak a kattintható felület nő.
   -------------------------------------------------------------------------- */

.rsv-lablec__sutigomb {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;

    /* Nagyobb érintési cél, elmozdulás nélkül. */
    padding: var(--rsv-ter-1) 0;
    margin: calc(-1 * var(--rsv-ter-1)) 0;

    /* A szomszédos hivatkozásokkal AZONOS tipográfia és alapvonal. */
    font-family: inherit;
    font-size: var(--rsv-meret-kicsi);
    font-weight: inherit;
    line-height: inherit;
    color: var(--rsv-brand-soft);

    text-decoration: none;
    cursor: pointer;
    transition: color .18s ease;
}

.rsv-lablec__sutigomb:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: .2em;
}

/*
 * A FÓKUSZ NEM CSAK SZÍNNEL JELEZ: látható keret is jár hozzá, hogy
 * billentyűzettel is egyértelmű legyen, hol tartunk.
 */
.rsv-lablec__sutigomb:focus-visible {
    outline: 2px solid var(--rsv-brand-soft);
    outline-offset: 3px;
    border-radius: var(--rsv-radius-sm);
    color: #fff;
}


/* ==========================================================================
   37. A `/kapcsolat` OLDAL — kapcsolatfelvételi űrlap
   ==========================================================================
   ÚJ SZÍNPALETTA NEM KELETKEZETT. Ez a szakasz kizárólag a 2. szakasz
   tokenjeiből és azok `color-mix()` alakjából épül — ugyanúgy, ahogy a
   lezárt aloldalak és a jogi oldalak.

   A HERO A LEZÁRT `.rsv-alaphero` komponens, kép nélküli változatban
   (`--szoveges`, lásd a 36.1 szakaszt): a kapcsolat oldalra nem kerül
   dekoratív illusztráció vagy stockfotó.

   AZ ŰRLAPKOMPONENS (`.rsv-urlap*`) SZÁNDÉKOSAN ÁLTALÁNOS NEVŰ, nem
   `.rsv-kapcsolat__mezo`: ez a projekt első publikus, személyes adatot
   felvevő űrlapja, és a következő (a kvíz „Maradt kérdésed?" űrlapja)
   ugyanezt a jelölést fogja használni. Így nem keletkezik második
   űrlap-design.

   A JELENTÉSHORDOZÓ KONTÚR a 2.4 szakasz `--rsv-border-interaktiv` tokenje
   (5,99 : 1 fehéren), nem a dekoratív `--rsv-border-default`: az űrlapmező
   határa jelentést hordoz, tehát a WCAG 1.4.11 3 : 1-et kér.

   A HIBAÁLLAPOTOT NEM CSAK SZÍN JELZI: a mező mellett ikon és szöveg is áll,
   a mező pedig `aria-invalid` jelölést kap.
   ========================================================================== */

/* 37.1 Az oldal rácsa
   --------------------------------------------------------------------------
   Desktopon az űrlap a domináns hasáb, mellette a figyelmeztetés. MOBILON a
   figyelmeztetés ELŐRE kerül (`order`), mert a látogatónak a beküldés ELŐTT
   kell látnia, hogy ez nem sürgősségi csatorna.
   -------------------------------------------------------------------------- */

.rsv-kapcsolat__racs {
    display: grid;
    gap: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-7));
}

.rsv-kapcsolat__urlapdoboz { order: 2; }
.rsv-kapcsolat__figyelmeztetes { order: 1; }

@media (min-width: 992px) {
    .rsv-kapcsolat__racs {
        grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
        align-items: start;
    }

    /* Desktopon visszaáll a természetes sorrend: űrlap balra, jegyzet jobbra. */
    .rsv-kapcsolat__urlapdoboz { order: 1; }
    .rsv-kapcsolat__figyelmeztetes { order: 2; }
}

.rsv-kapcsolat__urlapdoboz {
    padding: clamp(var(--rsv-ter-5), 3vw, var(--rsv-ter-7));
    border: 1px solid var(--rsv-border-default);
    border-radius: var(--rsv-radius-lg);
    background: var(--rsv-surface-card);
    box-shadow: var(--rsv-arnyek-md);
}

.rsv-kapcsolat__cim {
    margin: 0 0 var(--rsv-ter-2);
    font-size: var(--rsv-meret-h3);
    color: var(--rsv-brand-dark);
}

.rsv-kapcsolat__lead {
    margin: 0 0 var(--rsv-ter-5);
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
}

/* 37.2 Az űrlap mezői
   -------------------------------------------------------------------------- */

.rsv-urlap {
    display: grid;
    gap: var(--rsv-ter-5);
}

.rsv-urlap__mezo {
    display: grid;
    gap: var(--rsv-ter-2);
}

.rsv-urlap__cimke {
    font-weight: 600;
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-brand-dark);
}

.rsv-urlap__kotelezo {
    color: var(--rsv-brand-secondary);
    margin-left: 2px;
}

.rsv-urlap__bevitel {
    width: 100%;
    /* 48 px érintési cél — a kézikönyv minimuma (§18). */
    min-height: 48px;
    padding: var(--rsv-ter-3) var(--rsv-ter-4);
    border: 1px solid color-mix(in srgb, var(--rsv-border-interaktiv) 45%, #fff);
    border-radius: var(--rsv-radius-input);
    background: var(--rsv-surface-card);
    font-family: inherit;
    font-size: var(--rsv-meret-torzs);
    line-height: var(--rsv-sormagassag-torzs);
    color: var(--rsv-text-primary);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.rsv-urlap__bevitel::placeholder { color: color-mix(in srgb, var(--rsv-text-secondary) 70%, #fff); }

.rsv-urlap__bevitel:hover {
    border-color: color-mix(in srgb, var(--rsv-border-interaktiv) 70%, #fff);
}

.rsv-urlap__bevitel:focus-visible {
    outline: 3px solid var(--rsv-focus);
    outline-offset: 2px;
    border-color: var(--rsv-border-interaktiv);
}

.rsv-urlap__terulet {
    min-height: 168px;
    resize: vertical;
}

.rsv-urlap__sugo {
    margin: 0;
    font-size: var(--rsv-meret-meta);
    color: var(--rsv-text-secondary);
}

/* 37.3 Hibaállapot — SOHA nem csak színnel
   -------------------------------------------------------------------------- */

.rsv-urlap__mezo--hibas .rsv-urlap__bevitel {
    border-color: var(--rsv-urgent);
    /* A vastagabb kontúr a színlátás-zavarral élőknek is jelzés. */
    box-shadow: inset 0 0 0 1px var(--rsv-urgent);
}

.rsv-urlap__hiba {
    display: flex;
    align-items: flex-start;
    gap: var(--rsv-ter-2);
    margin: 0;
    font-size: var(--rsv-meret-kicsi);
    font-weight: 600;
    color: var(--rsv-urgent);
}

.rsv-urlap__hibaikon {
    --ikon-meret: 17px;
    flex: none;
    margin-top: .2em;
}

.rsv-urlap-hibasav {
    display: flex;
    align-items: flex-start;
    gap: var(--rsv-ter-3);
    margin-bottom: var(--rsv-ter-5);
    padding: var(--rsv-ter-4);
    border: 1px solid color-mix(in srgb, var(--rsv-urgent) 35%, #fff);
    border-radius: var(--rsv-radius-sm);
    background: color-mix(in srgb, var(--rsv-urgent) 7%, #fff);
}

.rsv-urlap-hibasav:focus-visible {
    outline: 3px solid var(--rsv-focus);
    outline-offset: 2px;
}

.rsv-urlap-hibasav__ikon {
    --ikon-meret: 20px;
    flex: none;
    margin-top: .1em;
    color: var(--rsv-urgent);
}

.rsv-urlap-hibasav__szoveg {
    margin: 0;
    font-size: var(--rsv-meret-kicsi);
    font-weight: 600;
    color: var(--rsv-urgent);
}

/* 37.4 Jelölőnégyzet
   --------------------------------------------------------------------------
   Natív `<input type="checkbox">`, felnagyítva. Nem rejtett input + rajzolt
   négyzet: a natív elem billentyűzettel és képernyőolvasóval is helyesen
   viselkedik, és a böngésző saját fókuszjelzése is működik rajta.
   -------------------------------------------------------------------------- */

.rsv-urlap__jelolosor {
    display: flex;
    align-items: flex-start;
    gap: var(--rsv-ter-3);
}

.rsv-urlap__jelolo {
    flex: none;
    width: 22px;
    height: 22px;
    margin-top: .15em;
    accent-color: var(--rsv-brand-primary);
    cursor: pointer;
}

.rsv-urlap__jelolo:focus-visible {
    outline: 3px solid var(--rsv-focus);
    outline-offset: 2px;
}

.rsv-urlap__jelolocimke {
    font-size: var(--rsv-meret-kicsi);
    line-height: 1.55;
    color: var(--rsv-text-primary);
    cursor: pointer;
}

.rsv-urlap__jelolocimke a {
    color: var(--rsv-brand-primary);
    font-weight: 600;
}

.rsv-urlap__mezo--jelolo.rsv-urlap__mezo--hibas .rsv-urlap__jelolocimke {
    color: var(--rsv-urgent);
}

/* 37.5 A BOTCSAPDA
   --------------------------------------------------------------------------
   NEM `display: none` és nem `hidden`: sok bot felismeri őket, és kihagyja a
   mezőt. Ehelyett a látható területen kívülre kerül — a képernyőolvasó a
   jelölés `aria-hidden` és `tabindex="-1"` attribútumai miatt hagyja ki.
   -------------------------------------------------------------------------- */

.rsv-urlap__csapda {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.rsv-urlap__gombsor {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rsv-ter-3);
}

/* 37.6 A figyelmeztető panel
   --------------------------------------------------------------------------
   Nem sürgősségi (urgent) színt visz: az az `/mikor-fordulj-orvoshoz` valódi
   112-es tartalmáé. Itt tájékoztató jellegű, ezért a márka lavender
   felületén áll (kézikönyv §13: az urgent nem használható
   figyelemfelkeltésre).
   -------------------------------------------------------------------------- */

.rsv-kapcsolat__figyelmeztetes {
    padding: clamp(var(--rsv-ter-4), 2.4vw, var(--rsv-ter-5));
    border: 1px solid color-mix(in srgb, var(--rsv-brand-secondary) 26%, #fff);
    border-radius: var(--rsv-radius-md);
    background: color-mix(in srgb, var(--rsv-brand-bare) 72%, #fff);
}

.rsv-kapcsolat__figyelmeztetes-cim {
    display: flex;
    align-items: center;
    gap: var(--rsv-ter-2);
    margin: 0 0 var(--rsv-ter-3);
    font-size: var(--rsv-meret-h4);
    color: var(--rsv-brand-dark);
}

.rsv-kapcsolat__figyelmeztetes-ikon {
    --ikon-meret: 20px;
    flex: none;
    color: var(--rsv-brand-secondary);
}

.rsv-kapcsolat__figyelmeztetes-lista {
    margin: 0 0 var(--rsv-ter-4);
    padding-left: 1.15em;
    display: grid;
    gap: var(--rsv-ter-2);
    font-size: var(--rsv-meret-kicsi);
    line-height: 1.6;
    color: var(--rsv-text-secondary);
}

.rsv-kapcsolat__figyelmeztetes-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 700;
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-brand-primary);
}

/* 37.7 A köszönőoldal
   -------------------------------------------------------------------------- */

.rsv-kapcsolat__siker {
    max-width: var(--rsv-burok-olvasas);
}

.rsv-kapcsolat__sikerjegyzet {
    display: flex;
    align-items: flex-start;
    gap: var(--rsv-ter-3);
    margin: 0;
    padding: var(--rsv-ter-4);
    border: 1px solid color-mix(in srgb, var(--rsv-brand-secondary) 26%, #fff);
    border-radius: var(--rsv-radius-md);
    background: color-mix(in srgb, var(--rsv-brand-bare) 72%, #fff);
    font-size: var(--rsv-meret-kicsi);
    color: var(--rsv-text-secondary);
}


/* --------------------------------------------------------------------------
   38. SÜRGŐS SÁV
   --------------------------------------------------------------------------
   A sürgősségi vizuális nyelv nem használható figyelemfelkeltésre
   (kézikönyv §13). Itt valódi, magas tétű egészségügyi információt hordoz.
   Sürgős tünetnél NEM e-mailes CTA-ra irányítunk (CLAUDE.md §22).
   -------------------------------------------------------------------------- */

.rsv-surgos {
    background: color-mix(in srgb, var(--rsv-urgent) 7%, #fff);
    border-top: 1px solid color-mix(in srgb, var(--rsv-urgent) 30%, #fff);
    padding-block: var(--rsv-ter-6);
}

.rsv-surgos__sor {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rsv-ter-4);
}

.rsv-surgos__ikon { --ikon-meret: 28px; color: var(--rsv-urgent); flex: none; }

.rsv-surgos__szoveg {
    flex: 1 1 320px;
    font-size: var(--rsv-meret-kicsi);
    font-weight: 600;
    color: var(--rsv-text-primary);
    margin: 0;
}

.rsv-surgos__link {
    color: var(--rsv-urgent);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: .2em;
}


/* --------------------------------------------------------------------------
   39. LÁBLÉC — mély szilvalila, nagyvonalú lezárás
   -------------------------------------------------------------------------- */

.rsv-lablec {
    position: relative;
    background: var(--rsv-brand-dark);
    color: var(--rsv-brand-soft);
    padding-block: clamp(var(--rsv-ter-8), 7vw, 120px);
    overflow: hidden;
}

/*
 * Finom márkafény a lábléc tetején. Új szín NEM kerül a rendszerbe: a fény a
 * meglévő `brand-secondary` tokenből épül, nagyon alacsony áttetszőséggel.
 * Ez adja a prémium mélységet erős árnyék és dekorációs elem nélkül.
 */
.rsv-lablec::before {
    content: "";
    position: absolute;
    inset: -40% 25% auto;
    height: 520px;
    background: radial-gradient(ellipse at 50% 50%,
        rgba(141, 69, 162, .45) 0%,
        rgba(141, 69, 162, 0) 68%);
    pointer-events: none;
}

.rsv-lablec > * { position: relative; }


.rsv-lablec__fo {
    display: grid;
    gap: clamp(var(--rsv-ter-6), 4vw, var(--rsv-ter-8));
}

@media (min-width: 992px) {
    .rsv-lablec__fo {
        grid-template-columns: minmax(240px, 1fr) minmax(0, 2.4fr);
    }
}

.rsv-lablec__oszlopok {
    display: grid;
    gap: var(--rsv-ter-7) var(--rsv-ter-5);
    grid-template-columns: 1fr;
}

@media (min-width: 576px) {
    .rsv-lablec__oszlopok { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
    .rsv-lablec__oszlopok { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.rsv-lablec__marka,
.rsv-lablec__oszlop { min-width: 0; }

.rsv-lablec__logo img {
    width: 220px;
    height: auto;
}

.rsv-lablec__bemutatas {
    margin-top: var(--rsv-ter-5);
    max-width: 38ch;
    font-size: var(--rsv-meret-kicsi);
    color: rgba(241, 230, 244, .78);
}

.rsv-lablec__oszlopcim {
    font-size: var(--rsv-meret-meta);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(241, 230, 244, .62);
    margin: 0 0 var(--rsv-ter-4);
}

.rsv-lablec__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--rsv-ter-3);
}

.rsv-lablec a {
    color: var(--rsv-brand-soft);
    text-decoration: none;
    font-size: var(--rsv-meret-kicsi);
}

.rsv-lablec a:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: .2em;
}

.rsv-lablec :where(a):focus-visible {
    outline-color: var(--rsv-brand-soft);
}

.rsv-lablec__zaras {
    margin-top: clamp(var(--rsv-ter-7), 5vw, var(--rsv-ter-8));
    padding-top: var(--rsv-ter-5);
    border-top: 1px solid rgba(241, 230, 244, .18);
    display: flex;
    flex-wrap: wrap;
    gap: var(--rsv-ter-4) var(--rsv-ter-6);
    align-items: center;
    justify-content: space-between;
}

.rsv-lablec__jogi {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rsv-ter-4);
    list-style: none;
    margin: 0;
    padding: 0;
}

.rsv-lablec__copyright {
    font-size: var(--rsv-meret-meta);
    color: rgba(241, 230, 244, .62);
    margin: 0;
}

.rsv-lablec__nyilatkozat {
    margin-top: var(--rsv-ter-5);
    font-size: var(--rsv-meret-meta);
    color: rgba(241, 230, 244, .62);
    max-width: 76ch;
}


/* --------------------------------------------------------------------------
   40. TECHNIKAI OLDALAK A PUBLIKUS KERETBEN (404)
   -------------------------------------------------------------------------- */

.rsv-egyszeru {
    padding-block: clamp(var(--rsv-ter-8), 9vw, 140px);
    text-align: center;
}

.rsv-egyszeru__ikon {
    --ikon-meret: 56px;
    color: var(--rsv-brand-secondary);
    margin-bottom: var(--rsv-ter-5);
}


/* --------------------------------------------------------------------------
   40/b. VISSZA AZ OLDAL TETEJÉRE — globális lebegő gomb
   --------------------------------------------------------------------------
   Kisméretű, halk gomb a jobb alsó sarokban. Csak érdemi görgetés után
   jelenik meg (`publikus.js` 15.). Rejtett állapotban `visibility: hidden`,
   tehát billentyűzettel sem érhető el. A z-index a mobilmenü (1020) és a
   hozzájárulási fal (1200) ALATT van: azok mindig eltakarják.
   A `safe-area` tartja távol a bevágástól és a kezdősávtól.
   -------------------------------------------------------------------------- */

.rsv-fel {
    position: fixed;
    right: max(var(--rsv-ter-4), calc(env(safe-area-inset-right) + var(--rsv-ter-3)));
    bottom: max(var(--rsv-ter-4), calc(env(safe-area-inset-bottom) + var(--rsv-ter-3)));
    z-index: 1010;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--rsv-brand-primary);
    background: var(--rsv-surface-card);
    border: 1px solid var(--rsv-border-default);
    border-radius: var(--rsv-radius-pill);
    box-shadow: var(--rsv-arnyek-md);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s,
                background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.rsv-fel[hidden] { display: none; }

.rsv-fel.is-lathato {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}

.rsv-fel__ikon { --ikon-meret: 18px; }

.rsv-fel:hover {
    color: var(--rsv-brand-primary-hover);
    background: var(--rsv-brand-soft);
    box-shadow: var(--rsv-arnyek-lg);
}

.rsv-fel:focus-visible {
    outline: 3px solid var(--rsv-focus);
    outline-offset: 3px;
}

@media (min-width: 992px) {
    .rsv-fel {
        right: var(--rsv-ter-6);
        bottom: var(--rsv-ter-6);
        width: 48px;
        height: 48px;
    }
}


/* --------------------------------------------------------------------------
   41. MOZGÁS — kötelező reduced-motion fallback (kézikönyv §17)
   -------------------------------------------------------------------------- */

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

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}