/**
 * Riselify – veřejné stránky mimo homepage (2026-08-07)
 *
 * Homepage má vlastní home.css. Tenhle soubor dotahuje na stejnou úroveň
 * ostatní veřejné stránky: O nás, Ceník, FAQ, Kontakt, Blog, přihlášení,
 * obnovu hesla, Ukázky, chybové stránky a právní dokumenty.
 *
 * Pravidlo: každý blok je scopovaný pod .rl-page--<stranka>, aby se stránky
 * navzájem neovlivňovaly. Tokeny se berou z riselify-unified.css.
 *
 * Načítá se jen na veřejných stránkách ($__lightRoutes v rozlozeni.phtml),
 * přihlášený uživatel ho nedostane.
 */

.rl-page {
    --rlp-max: 1080px;
    --rlp-narrow: 760px;
    --rlp-pad: clamp(48px, 7vw, 88px);
    --rlp-ease: cubic-bezier(.2, 0, .2, 1);
    --rlp-dark: #0F172A;
    --rlp-on-dark: #E2E8F0;
    --rlp-green: #15803D;
}

/* Vnější rám všech veřejných stránek — dřív každá řešila šířku po svém. */
.rl-page__wrap {
    max-width: var(--rlp-max);
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 32px);
}

.rl-page__wrap--narrow {
    max-width: var(--rlp-narrow);
}

/* Hlavička stránky (kicker + nadpis + perex) */
.rl-page__head {
    text-align: center;
    padding: var(--rlp-pad) 0 clamp(28px, 4vw, 44px);
}

.rl-page__kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 7px 16px;
    border-radius: 999px;
    background: var(--rl-primary-soft);
    color: var(--rl-primary);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.rl-page__title {
    margin: 0;
    font-family: var(--rl-font-head);
    font-size: clamp(2rem, 3.6vw, 2.875rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--rl-text);
    text-wrap: balance;
    max-width: 20ch;
    margin-inline: auto;
}

.rl-page__lead {
    max-width: 62ch;
    margin: 18px auto 0;
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    line-height: 1.65;
    color: var(--rl-text-secondary);
    text-wrap: pretty;
}

/* Karta jako základní stavební prvek */
.rl-card {
    background: var(--rl-bg-elevated);
    border: 1px solid var(--rl-border);
    border-radius: 20px;
    box-shadow: var(--rl-shadow-sm);
}

/* Tlačítka — stejná geometrie jako .hp-btn na homepage */
.rl-page .rl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 14px 28px;
    border: 0;
    border-radius: 14px;
    font-family: var(--rl-font-body);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none;
    cursor: pointer;
    /* Viz .hp-btn: `justify-content` řeší blok jako celek, řádky uvnitř potřebují
       `text-align`. Bez toho by se delší popisek na užší kartě lomil doleva. */
    text-align: center;
    text-wrap: balance;
    transition: background-color .15s var(--rlp-ease), border-color .15s var(--rlp-ease),
                color .15s var(--rlp-ease), box-shadow .15s var(--rlp-ease), transform .15s var(--rlp-ease);
}

.rl-page .rl-btn--primary {
    background: var(--rl-primary);
    color: #fff;
    box-shadow: 0 12px 32px -14px rgba(29, 78, 216, 0.7);
}

.rl-page .rl-btn--primary:hover {
    background: var(--rl-primary-hover);
    color: #fff;
}

.rl-page .rl-btn--ghost {
    border: 2px solid var(--rl-border);
    background: #fff;
    color: var(--rl-text);
}

.rl-page .rl-btn--ghost:hover {
    border-color: var(--rl-primary);
    color: var(--rl-primary);
}

/* Viditelný fokus všude — :focus-visible musí být AŽ ZA :focus, mají stejnou
   specificitu a rozhoduje pořadí. */
.rl-page a:focus,
.rl-page button:focus,
.rl-page input:focus,
.rl-page textarea:focus,
.rl-page select:focus,
.rl-page summary:focus {
    outline: 3px solid var(--rl-focus);
    outline-offset: 2px;
}

.rl-page a:focus:not(:focus-visible),
.rl-page button:focus:not(:focus-visible),
.rl-page input:focus:not(:focus-visible),
.rl-page textarea:focus:not(:focus-visible),
.rl-page select:focus:not(:focus-visible),
.rl-page summary:focus:not(:focus-visible) {
    outline: none;
}

/* ═══════════════════════════════════════════════════════════
   Bloky jednotlivých stránek se doplňují níž, každý pod svým
   .rl-page--<stranka>.
   ═══════════════════════════════════════════════════════════ */

/* ##### BLOKY STRÁNEK ##### */


/* ═══════════════════════════════════════════════════════════
   STRÁNKA O NÁS  (.rl-page--about)

   Předtím: fialový gradientový banner (cizí barevná rodina), odstavce
   přes celou šířku, „infografika" ze tří koleček bez vazby na text,
   tým s hranatými fotkami a čtyři plné modré kartičky s emoji.
   Teď: hero ve stejném světle jako homepage, mise v prózovém sloupci,
   příběh jako skutečná časová osa (kroky nesou původní odstavce),
   tým v kartách s kruhovým portrétem a hodnoty jako světlé karty
   s ikonou ze spritu. Závěr uzavírá modrý CTA pruh jako na homepage.
   ═══════════════════════════════════════════════════════════ */

.rl-page--about {
    --ab-sec: clamp(56px, 8vw, 96px);
    /* Radiální záře v hero přesahuje okraj sekce. `clip` (na rozdíl od
       `hidden`) nedělá z prvku scroll kontejner, takže nehrozí vnitřní
       svislý posuv; `hidden` je fallback pro starší Safari. */
    overflow-x: hidden;
    overflow-x: clip;
}

/* ── Hero ──────────────────────────────────────────────────────────────── */

.rl-page--about .ab-hero {
    position: relative;
    overflow: hidden;
    /* Světelná rodina homepage hero — modrá záře vpravo nahoře, zelený
       nádech vlevo dole. Končí bílou, aby navázala sekce s misí. */
    background:
        radial-gradient(60rem 40rem at 78% 0%, rgba(59, 130, 246, 0.16) 0%, transparent 60%),
        radial-gradient(40rem 30rem at 5% 95%, rgba(74, 222, 128, 0.12) 0%, transparent 55%),
        linear-gradient(180deg, #FFFFFF 0%, #F5F8FF 45%, var(--rl-bg-elevated) 100%);
}

/* Mřížka jen v horní části — dole se rozplyne, ať nekonkuruje textu. */
.rl-page--about .ab-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(29, 78, 216, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(29, 78, 216, 0.05) 1px, transparent 1px);
    background-size: 56px 56px, 56px 56px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
    mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
    pointer-events: none;
}

/* Mřížka je pozicovaná, takže by jinak kreslila přes text. */
.rl-page--about .ab-hero > .rl-page__wrap {
    position: relative;
    z-index: 1;
}

.rl-page--about .ab-hero__head {
    padding-bottom: clamp(32px, 5vw, 52px);
}

/* Titulek je celá věta, ne dvě slova. Výchozích 20ch z .rl-page__title by ji
   rozlámalo do šesti řádků. */
.rl-page--about .ab-hero__title {
    max-width: 26ch;
}

/* ── Mise: prózový sloupec ─────────────────────────────────────────────── */

.rl-page--about .ab-mission {
    padding: clamp(36px, 5vw, 64px) 0 var(--ab-sec);
    background: var(--rl-bg-elevated);
}

/* ~62 znaků na řádek. Delší řádek se hůř sleduje — oko při návratu na
   začátek řádku ztrácí místo. */
.rl-page--about .ab-prose {
    max-width: 62ch;
    margin: 0 auto;
}

.rl-page--about .ab-prose p {
    margin: 0 0 18px;
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--rl-text-secondary);
    text-wrap: pretty;
}

.rl-page--about .ab-prose p:last-child {
    margin-bottom: 0;
}

/* První odstavec nese hlavní myšlenku — dostane větší stupeň a tmavší text. */
.rl-page--about .ab-prose__lead {
    font-size: clamp(1.125rem, 1.8vw, 1.25rem);
    line-height: 1.6;
    color: var(--rl-text);
}

.rl-page--about .ab-prose strong {
    color: var(--rl-text);
}

/* ── Společná hlavička sekce ───────────────────────────────────────────── */

.rl-page--about .ab-head {
    text-align: center;
    margin-bottom: clamp(32px, 5vw, 48px);
}

.rl-page--about .ab-head__title {
    margin: 14px 0 0;
    margin-inline: auto;
    max-width: 24ch;
    font-family: var(--rl-font-head);
    font-size: clamp(1.5rem, 3vw, 2.125rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--rl-text);
    text-wrap: balance;
}

/* ── Příběh: časová osa ────────────────────────────────────────────────── */

.rl-page--about .ab-story {
    padding: var(--ab-sec) 0;
    background: linear-gradient(180deg, var(--rl-bg-elevated) 0%, var(--rl-bg) 100%);
}

.rl-page--about .ab-timeline {
    max-width: 720px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.rl-page--about .ab-timeline__item {
    position: relative;
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: 0 20px;
    padding-bottom: 32px;
}

.rl-page--about .ab-timeline__item:last-child {
    padding-bottom: 0;
}

/* Spojnice začíná pod značkou a končí u další — proto ji nese každá položka
   kromě poslední. Jedna průběžná čára přes celou osu by přečnívala pod
   poslední krok „do prázdna". */
.rl-page--about .ab-timeline__item::before {
    content: '';
    position: absolute;
    top: 3rem;
    bottom: 0;
    left: 1.5rem;
    width: 2px;
    margin-left: -1px;
    background: var(--rl-border-strong);
}

.rl-page--about .ab-timeline__item:last-child::before {
    display: none;
}

.rl-page--about .ab-timeline__marker {
    width: 3rem;
    height: 3rem;
    display: grid;
    place-content: center;
    border-radius: 50%;
    font-size: 1.125rem;
    background: var(--rl-primary-soft);
    color: var(--rl-primary);
}

/* Barva kroku vypráví děj: problém → otázka → řešení. */
.rl-page--about .ab-timeline__marker--warn  { background: #FEE2E2; color: #B91C1C; }
.rl-page--about .ab-timeline__marker--ask   { background: #FEF3C7; color: #B45309; }
.rl-page--about .ab-timeline__marker--solve { background: #DCFCE7; color: #15803D; }

.rl-page--about .ab-timeline__body {
    padding-top: 2px;
}

.rl-page--about .ab-timeline__title {
    margin: 0 0 8px;
    font-family: var(--rl-font-head);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--rl-text);
}

.rl-page--about .ab-timeline__body p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--rl-text-secondary);
    text-wrap: pretty;
}

.rl-page--about .ab-timeline__body strong {
    color: var(--rl-text);
}

/* ── Tým ───────────────────────────────────────────────────────────────── */

.rl-page--about .ab-team {
    padding: var(--ab-sec) 0;
    background: var(--rl-bg);
}

.rl-page--about .ab-team__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}

.rl-page--about .ab-person {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 24px 28px;
    text-align: center;
}

/* Kruhový ořez. Portréty jsou dnes čtvercové (400×400), takže se nic
   neořezává; object-fit + object-position drží obličej v záběru i kdyby
   někdo vyměnil asset za nečtvercový. */
.rl-page--about .ab-person__photo {
    width: 112px;
    height: 112px;
    max-width: 100%;
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 25%;
    background: var(--rl-primary-soft);
    box-shadow:
        0 0 0 4px var(--rl-bg-elevated),
        0 0 0 6px var(--rl-primary-soft),
        0 14px 28px -16px rgba(15, 23, 42, 0.5);
}

.rl-page--about .ab-person__name {
    margin: 20px 0 3px;
    font-family: var(--rl-font-head);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--rl-text);
}

.rl-page--about .ab-person__role {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rl-primary);
}

/* Citace v podbarveném bloku — bez uvozovkového ornamentu v ::before,
   ten některé odečítače čtou nahlas. `flex: 1` srovná spodní hranu bloků
   napříč kartami, i když jsou citace různě dlouhé. */
.rl-page--about .ab-person__quote {
    flex: 1 1 auto;
    width: 100%;
    margin: 20px 0 0;
    padding: 16px 18px;
    border-radius: 14px;
    background: var(--rl-primary-soft);
    text-align: left;
}

.rl-page--about .ab-person__quote p {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--rl-text-secondary);
    text-wrap: pretty;
}

/* ── Hodnoty ───────────────────────────────────────────────────────────── */

.rl-page--about .ab-values {
    padding: var(--ab-sec) 0;
    background: var(--rl-bg-elevated);
}

.rl-page--about .ab-values__grid {
    display: grid;
    /* Hodnoty jsou čtyři. auto-fit je na širokém displeji rozdělil 3 + 1,
       takže poslední karta zůstala osamocená na druhém řádku. Pevné dva
       sloupce drží mřížku 2 × 2. */
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

@media (max-width: 720px) {
    .rl-page--about .ab-values__grid {
        grid-template-columns: 1fr;
    }
}

.rl-page--about .ab-value {
    padding: 26px 24px 24px;
}

.rl-page--about .ab-value__icon {
    display: grid;
    place-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    border-radius: var(--rl-radius-md);
    font-size: 1.25rem;
}

/* Čtyři odstíny místo čtyř plných modrých ploch — barva odlišuje kartu,
   text zůstane tmavý na světlém, takže se nemusí řešit inverzní kontrast. */
.rl-page--about .ab-value__icon--blue   { background: #EEF2FF; color: #1D4ED8; }
.rl-page--about .ab-value__icon--amber  { background: #FEF3C7; color: #B45309; }
.rl-page--about .ab-value__icon--green  { background: #DCFCE7; color: #15803D; }
.rl-page--about .ab-value__icon--violet { background: #EDE9FE; color: #6D28D9; }

.rl-page--about .ab-value__title {
    margin: 0 0 8px;
    font-family: var(--rl-font-head);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--rl-text);
    text-wrap: balance;
}

.rl-page--about .ab-value p {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--rl-text-secondary);
}

/* Nadzvednutí při najetí. Animuje se jen transform a stín, nikdy opacity. */
.rl-page--about .ab-value,
.rl-page--about .ab-person {
    transition: transform .2s var(--rlp-ease), box-shadow .2s var(--rlp-ease);
}

.rl-page--about .ab-value:hover,
.rl-page--about .ab-person:hover {
    transform: translateY(-3px);
    box-shadow: var(--rl-shadow-md);
}

/* ── Závěrečné CTA ─────────────────────────────────────────────────────── */

.rl-page--about .ab-cta {
    padding: 0 0 var(--ab-sec);
    background: var(--rl-bg-elevated);
}

.rl-page--about .ab-cta__panel {
    position: relative;
    overflow: hidden;
    padding: clamp(36px, 6vw, 64px) clamp(24px, 5vw, 56px);
    border-radius: 28px;
    /* background-color drží barvu i tam, kde by gradient nedojel. */
    background-color: var(--rl-primary);
    background-image: var(--rl-cta-gradient);
    color: #fff;
    text-align: center;
    box-shadow: 0 30px 60px -30px rgba(29, 78, 216, 0.6);
}

/* Světelný akcent — stejný prvek jako finální CTA na homepage. */
.rl-page--about .ab-cta__panel::after {
    content: '';
    position: absolute;
    inset: -40% -10% auto auto;
    width: 32rem;
    height: 32rem;
    background: radial-gradient(circle, rgba(96, 165, 250, 0.28) 0%, transparent 62%);
    pointer-events: none;
}

.rl-page--about .ab-cta__panel > * {
    position: relative;
    z-index: 1;
}

.rl-page--about .ab-cta__title {
    margin: 0 auto 14px;
    max-width: 20ch;
    font-family: var(--rl-font-head);
    font-size: clamp(1.625rem, 3.4vw, 2.375rem);
    font-weight: 800;
    line-height: 1.15;
    color: #fff;
    text-wrap: balance;
}

.rl-page--about .ab-cta__text {
    margin: 0 auto 26px;
    max-width: 46ch;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--rlp-on-dark);
}

/* Bílé tlačítko — .rl-btn--primary je modré a na modrém pruhu by zaniklo. */
.rl-page--about .ab-cta__btn {
    background: #fff;
    color: var(--rlp-dark);
    box-shadow: 0 12px 28px -14px rgba(15, 23, 42, 0.7);
}

.rl-page--about .ab-cta__btn:hover {
    background: #F1F5F9;
    color: var(--rlp-dark);
}

/* Globální fokus je modrý — na modrém pruhu by nebyl vidět. Musí být až tady,
   za pravidly v hlavičce souboru, jinak by ho přebila. */
.rl-page--about .ab-cta__panel a:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

.rl-page--about .ab-cta__trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 24px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.rl-page--about .ab-cta__trust li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--rlp-on-dark);
}

.rl-page--about .ab-cta__trust .rl-ic {
    color: #86EFAC;
}

/* ── Responzivita ──────────────────────────────────────────────────────── */

@media (max-width: 720px) {
    .rl-page--about .ab-hero__title,
    .rl-page--about .ab-head__title {
        max-width: 100%;
    }

    /* Užší značka i mezera, ať na 390 px zbyde na text rozumná šířka. */
    .rl-page--about .ab-timeline__item {
        grid-template-columns: 2.5rem 1fr;
        gap: 0 16px;
        padding-bottom: 28px;
    }

    .rl-page--about .ab-timeline__item::before {
        top: 2.5rem;
        left: 1.25rem;
    }

    .rl-page--about .ab-timeline__marker {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1rem;
    }

    .rl-page--about .ab-cta__btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rl-page--about .ab-value,
    .rl-page--about .ab-person {
        transition: none;
    }

    .rl-page--about .ab-value:hover,
    .rl-page--about .ab-person:hover {
        transform: none;
    }
}


/* ═══════════════════════════════════════════════════════════
   CENÍK  (/pricelist)  —  .rl-page--pricelist
   Vizuální jazyk převzat z ceníku na homepage (.hp-price-card*):
   bílé karty, modrý akcent, odznak nad horní hranou doporučeného tarifu.
   Původní podoba (plnobarevné karty, žlutá bublina u přepínače) je celá
   v public.css; ten se pořád načítá, takže několik pravidel níž ho musí
   přebít vyšší specifitou — u každého je poznámka proč.
   ═══════════════════════════════════════════════════════════ */

/* Obsah čtený jen odečítačem obrazovky (skrytý nadpis sekce, popisky stavu). */
.rl-page--pricelist .rl-pl-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
}

/* ── Přepínač Měsíčně / Ročně ─────────────────────────────────────────── */

/* Segmentovaný přepínač: dvě pilulky nad jedním checkboxem #billing-toggle.
   Checkbox je nositelem stavu (čte ho toggleBilling()), takže nesmí zmizet
   z pořadí tabulátoru — proto clip-path místo display:none. */
.rl-page--pricelist .rl-pl-billing {
    position: relative;
    /* Blok o šířce obsahu s automatickými okraji — přepínač stojí uprostřed stránky,
       i když je text záhlaví nad ním zarovnaný doleva (dřív inline-flex = vlevo). */
    display: flex;
    width: fit-content;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    max-width: 100%;
    margin-top: clamp(20px, 3vw, 28px);
    margin-inline: auto;
    padding: 5px;
    border: 1px solid var(--rl-border);
    border-radius: 999px;
    background: var(--rl-bg-elevated);
    box-shadow: var(--rl-shadow-sm);
}

.rl-page--pricelist .rl-pl-billing__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
}

/* Fokus je na inputu, ale ten není vidět — rámeček proto kreslíme kolem
   celého přepínače. :has() drží ring jen pro klávesnici, na klik myší ne. */
.rl-page--pricelist .rl-pl-billing:has(.rl-pl-billing__input:focus-visible) {
    outline: 3px solid var(--rl-focus);
    outline-offset: 3px;
}

.rl-page--pricelist .rl-pl-billing__opt {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 999px;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--rl-text-secondary);
    cursor: pointer;
    user-select: none;
    transition: background-color .15s var(--rlp-ease), color .15s var(--rlp-ease);
}

.rl-page--pricelist .rl-pl-billing__opt:hover {
    background: var(--rl-primary-soft);
    color: var(--rl-primary);
}

/* Obě pilulky jsou <label> jednoho checkboxu, takže klik na už aktivní
   pilulku by stav překlopil na opačný. Aktivní proto klik nepřijímá. */
.rl-page--pricelist .rl-pl-billing__opt.price-card-active {
    background: var(--rl-primary);
    color: #fff;
    pointer-events: none;
}

.rl-page--pricelist .rl-pl-billing__save {
    padding: 3px 9px;
    border-radius: 999px;
    background: #DCFCE7;
    color: var(--rlp-green);
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.rl-page--pricelist .rl-pl-billing__opt.price-card-active .rl-pl-billing__save {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

/* ── Mřížka tarifů ────────────────────────────────────────────────────── */

.rl-page--pricelist .rl-pl-plans {
    padding-bottom: clamp(40px, 6vw, 72px);
}

.rl-page--pricelist .rl-pl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
    gap: 24px;
    align-items: stretch;
    /* místo pro odznak, který přesahuje nad horní hranu zvýrazněné karty */
    padding-top: 22px;
}

/* Ve stretch režimu by rozbalený seznam funkcí natáhl i sousední karty
   a nechal v nich prázdné místo pod tlačítkem — jakmile je něco rozbaleno,
   karty se zarovnají nahoru a každá si drží vlastní výšku. */
.rl-page--pricelist .rl-pl-grid:has(.is-expanded) .rl-pl-card {
    align-self: start;
}

.rl-page--pricelist .rl-pl-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 28px 24px;
    border: 1px solid var(--rl-border);
    border-radius: 20px;
    background: var(--rl-bg-elevated);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 28px -18px rgba(15, 23, 42, 0.25);
    transition: transform .2s var(--rlp-ease), box-shadow .2s var(--rlp-ease);
}

.rl-page--pricelist .rl-pl-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.05), 0 22px 44px -22px rgba(15, 23, 42, 0.35);
}

.rl-page--pricelist .rl-pl-card--highlight {
    border-color: var(--rl-primary);
    box-shadow: 0 12px 40px -16px rgba(29, 78, 216, 0.35);
    transform: translateY(-6px);
}

.rl-page--pricelist .rl-pl-card--highlight:hover {
    transform: translateY(-10px);
}

.rl-page--pricelist .rl-pl-card__badge {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 14px;
    border-radius: 999px;
    background: var(--rl-primary);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 8px 18px -8px rgba(29, 78, 216, 0.8);
}

/* FREE má odznak o zkušební době, ne o oblíbenosti — jiná barva, ať se
   nepletou dvě různá sdělení do stejného vizuálu. */
.rl-page--pricelist .rl-pl-card__badge--free {
    background: var(--rlp-green);
    box-shadow: 0 8px 18px -8px rgba(21, 128, 61, 0.7);
}

.rl-page--pricelist .rl-pl-card__name {
    margin: 0 0 12px;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rl-primary);
}

.rl-page--pricelist .rl-pl-card__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 4px;
    width: 100%;
}

.rl-page--pricelist .rl-pl-card__price strong {
    font-family: var(--rl-font-head);
    font-size: clamp(1.75rem, 2.4vw, 2rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--rl-text);
}

.rl-page--pricelist .rl-pl-card__price span {
    font-size: 0.875rem;
    color: var(--rl-text-secondary);
}

/* public.css přepíná roční/měsíční variantu přes display:block !important.
   Vyšší specifita vrací flex, jinak by se částka a perioda nezarovnaly
   na účaří. Skrývání (display:none !important) záměrně nepřebíjíme. */
.rl-page--pricelist .price-card-is-yearly .price-card-price-yearly {
    display: flex !important;
}

.rl-page--pricelist .rl-pl-card__fee {
    margin: 0 0 20px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--rlp-green);
}

.rl-page--pricelist .rl-pl-card__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto;
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
}

.rl-page--pricelist .rl-pl-card__list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--rl-text-secondary);
}

.rl-page--pricelist .rl-pl-card__list .rl-ic {
    color: var(--rlp-green);
    margin-top: 0.2em;
}

/* ── Tlačítka tarifu ──────────────────────────────────────────────────── */

.rl-page--pricelist .rl-pl-card__cta {
    margin-top: auto;
}

.rl-page--pricelist .rl-pl-card__cta .rl-btn {
    display: flex;
    width: 100%;
}

/* Stejný důvod jako u ceny: public.css vnucuje display:block !important. */
.rl-page--pricelist .price-card-is-yearly .price-card-btn-yearly {
    display: flex !important;
}

/* Stav „tarif už běží" — není to tlačítko, tak ať ani jako tlačítko nevypadá. */
.rl-page--pricelist .rl-pl-card__state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: auto;
    min-height: 52px;
    margin-top: auto;
    padding: 14px 20px;
    border: 1px solid #BBF7D0;
    border-radius: 14px;
    background: #F0FDF4;
    box-shadow: none;
    color: var(--rlp-green);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
}

/* ── Rozklikávací seznam funkcí ───────────────────────────────────────── */

/* Do tlačítka nesmí přijít ikona ani další značky: toggleDetailsPriceCard()
   přepisuje jeho textContent, což by potomky smazalo. Proto jen text. */
.rl-page--pricelist .rl-pl-card__toggle {
    width: 100%;
    margin-top: 14px;
    padding: 10px 0 0;
    border: 0;
    border-top: 1px solid var(--rl-border);
    background: none;
    font-family: var(--rl-font-body);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--rl-primary);
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color .15s var(--rlp-ease);
}

.rl-page--pricelist .rl-pl-card__toggle:hover {
    color: var(--rl-primary-hover);
}

.rl-page--pricelist .rl-pl-details {
    margin-top: 12px;
    padding-top: 2px;
    border-top: 0;
    text-align: left;
    font-size: 1rem;
    color: var(--rl-text-secondary);
}

.rl-page--pricelist .rl-pl-details ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rl-page--pricelist .rl-pl-details li {
    padding: 9px 0;
    border-bottom: 1px solid var(--rl-border);
    line-height: 1.45;
}

.rl-page--pricelist .rl-pl-details li:last-child {
    border-bottom: 0;
}

.rl-page--pricelist .price-card-line-li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 0;
    font-family: var(--rl-font-body);
}

.rl-page--pricelist .price-card-line-green,
.rl-page--pricelist .price-card-line-red {
    flex-shrink: 0;
    margin-top: 0.28em;
    font-size: 0.875rem;
}

.rl-page--pricelist .price-card-line-green {
    color: var(--rlp-green);
}

.rl-page--pricelist .price-card-line-red {
    color: #B91C1C;
}

.rl-page--pricelist .price-card-line-text {
    flex: 1;
    min-width: 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--rl-text-secondary);
    text-align: left;
    overflow-wrap: break-word;
}

/* Nezahrnutá funkce zůstává čitelná, ale je zjevně druhořadá. */
.rl-page--pricelist .price-card-line-red + .price-card-line-text {
    color: var(--rl-text-muted);
}

/* ── Doplňky k tarifu ─────────────────────────────────────────────────── */

.rl-page--pricelist .rl-pl-addons {
    padding: clamp(40px, 6vw, 68px) 0 clamp(56px, 8vw, 96px);
    border-top: 1px solid var(--rl-border);
}

.rl-page--pricelist .rl-pl-addons__title {
    margin: 0 0 clamp(24px, 4vw, 36px);
    font-family: var(--rl-font-head);
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--rl-text);
    text-align: center;
}

/* Doplňků je zatím jeden; roztažený přes celou šířku by vypadal jako pruh,
   proto se sloupce zastropují a mřížka se centruje. */
.rl-page--pricelist .rl-pl-addons__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 320px));
    justify-content: center;
    gap: 24px;
    align-items: start;
}

.rl-page--pricelist .rl-pl-addon {
    display: flex;
    flex-direction: column;
    padding: 24px;
    border: 1px solid var(--rl-border);
    border-radius: 20px;
    background: var(--rl-bg-elevated);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 28px -18px rgba(15, 23, 42, 0.25);
    transition: transform .2s var(--rlp-ease), box-shadow .2s var(--rlp-ease);
}

.rl-page--pricelist .rl-pl-addon:hover {
    transform: translateY(-4px);
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.05), 0 22px 44px -22px rgba(15, 23, 42, 0.35);
}

.rl-page--pricelist .rl-pl-addon__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 16px;
    border-radius: 12px;
    background: var(--rl-primary-soft);
    color: var(--rl-primary);
    font-size: 1.125rem;
}

.rl-page--pricelist .rl-pl-addon__top {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 12px;
    margin-bottom: 10px;
}

.rl-page--pricelist .rl-pl-addon__name {
    margin: 0;
    font-family: var(--rl-font-head);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--rl-text);
}

.rl-page--pricelist .rl-pl-addon__price {
    font-size: 1rem;
    font-weight: 700;
    color: var(--rl-primary);
    white-space: nowrap;
}

.rl-page--pricelist .rl-pl-addon__desc {
    flex: 1 1 auto;
    margin: 0 0 20px;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--rl-text-secondary);
}

.rl-page--pricelist .rl-pl-addon__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    padding: 12px 18px;
    border: 2px solid var(--rl-border);
    border-radius: 14px;
    background: #fff;
    font-family: var(--rl-font-body);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--rl-text);
    text-align: center;
    cursor: pointer;
    transition: border-color .15s var(--rlp-ease), background-color .15s var(--rlp-ease), color .15s var(--rlp-ease);
}

.rl-page--pricelist .rl-pl-addon__btn:hover {
    border-color: var(--rl-primary);
    color: var(--rl-primary);
}

/* Třídu btn-danger přidává PHP, když doplněk v tarifu už je — akce tedy
   znamená odebrání, což musí být vidět dřív než po kliknutí. */
.rl-page--pricelist .rl-pl-addon__btn.btn-danger {
    border-color: #FCA5A5;
    background: #FEF2F2;
    color: #B91C1C;
}

.rl-page--pricelist .rl-pl-addon__btn.btn-danger:hover {
    border-color: #B91C1C;
    background: #FEE2E2;
    color: #991B1B;
}

/* Viditelnost řídí JS inline stylem (display none/block), tady jen vzhled. */
.rl-page--pricelist .rl-pl-addon__info {
    margin: 14px 0 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: #FEF2F2;
    color: #B91C1C;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.45;
    text-align: center;
}

/* ── Menší displeje ───────────────────────────────────────────────────── */

@media (max-width: 900px) {
    /* Vysunutí doporučené karty dává smysl jen vedle ostatních; ve sloupci
       by z něj byla jen náhodná díra. */
    .rl-page--pricelist .rl-pl-card--highlight,
    .rl-page--pricelist .rl-pl-card--highlight:hover {
        transform: none;
    }
}

@media (max-width: 420px) {
    .rl-page--pricelist .rl-pl-billing {
        width: 100%;
    }

    .rl-page--pricelist .rl-pl-billing__opt {
        flex: 1 1 0;
        justify-content: center;
        padding: 10px 12px;
        font-size: 0.875rem;
    }

    .rl-page--pricelist .rl-pl-billing__save {
        padding: 3px 7px;
        font-size: 0.75rem;
    }

    .rl-page--pricelist .rl-pl-card,
    .rl-page--pricelist .rl-pl-addon {
        padding: 24px 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rl-page--pricelist .rl-pl-card,
    .rl-page--pricelist .rl-pl-addon,
    .rl-page--pricelist .rl-pl-billing__opt {
        transition: none;
    }

    .rl-page--pricelist .rl-pl-card:hover,
    .rl-page--pricelist .rl-pl-addon:hover {
        transform: none;
    }

    .rl-page--pricelist .rl-pl-card--highlight:hover {
        transform: translateY(-6px);
    }
}


/* ═══════════════════════════════════════════════════════════
   FAQ (/faq) — .rl-page--faq
   Dřív to byla zeď textu (tučná otázka + odstavec) ve třech <ol>.
   Teď accordion ve stejném vizuálním jazyce jako .hp-faq na homepage,
   aby uživatel skenoval jen otázky a rozbaloval, co ho zajímá.
   ═══════════════════════════════════════════════════════════ */

.rl-page--faq {
    padding-bottom: clamp(56px, 8vw, 96px);
}

/* Titulek „Často kladené otázky (FAQ)" je delší než výchozích 20ch
   ze sdíleného .rl-page__title a lámal by se hned za prvním slovem. */
.rl-page--faq .rl-page__title {
    max-width: 26ch;
}

/* ── Kategorie otázek ────────────────────────────────────── */

.rl-page--faq .faq-group + .faq-group {
    margin-top: clamp(36px, 5vw, 56px);
}

.rl-page--faq .faq-group__title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px;
    font-family: var(--rl-font-head);
    font-size: clamp(1.25rem, 2.2vw, 1.5rem);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--rl-text);
    text-wrap: balance;
}

/* Ikona v barevném čtverci: mezinadpis kategorie se od otázek odliší
   i bez velkého skoku ve velikosti písma (otázky jsou taky tučné). */
.rl-page--faq .faq-group__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--rl-primary-soft);
    color: var(--rl-primary);
    font-size: 1.125rem;
}

/* ── Jednotlivá otázka ───────────────────────────────────── */

.rl-page--faq .faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rl-page--faq .faq-item {
    border: 1px solid var(--rl-border);
    border-radius: 16px;
    background: var(--rl-bg-elevated);
    /* Výšku <details> nejde animovat spolehlivě napříč prohlížeči,
       proto se mění jen rám — obsah naskočí okamžitě. */
    transition: border-color .15s var(--rlp-ease), box-shadow .15s var(--rlp-ease);
}

.rl-page--faq .faq-item:hover {
    border-color: var(--rl-border-strong);
}

.rl-page--faq .faq-item[open] {
    border-color: var(--rl-primary);
    box-shadow: 0 12px 28px -20px rgba(15, 23, 42, 0.5), inset 0 0 0 1px var(--rl-primary);
}

.rl-page--faq .faq-item__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    /* list-style: none + ::-webkit-details-marker skryje výchozí trojúhelník
       (Chrome/Safari ho kreslí každý jinak), nahrazuje ho vlastní šipka. */
    list-style: none;
    cursor: pointer;
    font-family: var(--rl-font-head);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--rl-text);
    /* aby se fokusový outline nezařezával do zaoblených rohů karty */
    border-radius: 15px;
}

.rl-page--faq .faq-item__q::-webkit-details-marker {
    display: none;
}

.rl-page--faq .faq-item__q-text {
    min-width: 0;
    text-wrap: pretty;
}

.rl-page--faq .faq-item__chev {
    color: var(--rl-primary);
    font-size: 0.875rem;
    transition: transform .2s var(--rlp-ease);
}

.rl-page--faq .faq-item[open] .faq-item__chev {
    transform: rotate(180deg);
}

.rl-page--faq .faq-item__a {
    padding: 0 20px 18px;
}

.rl-page--faq .faq-item__a p {
    margin: 0;
    color: var(--rl-text-secondary);
    font-size: 0.9375rem;
    line-height: 1.7;
    text-wrap: pretty;
}

.rl-page--faq .faq-item__a p + p {
    margin-top: 12px;
}

.rl-page--faq .faq-item__a strong {
    color: var(--rl-text);
    font-weight: 700;
}

/* ── Blok „Nenašli jste odpověď?" ────────────────────────── */

.rl-page--faq .faq-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 20px;
    margin-top: clamp(40px, 6vw, 64px);
    padding: clamp(20px, 3vw, 28px);
}

.rl-page--faq .faq-cta__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: var(--rl-primary-soft);
    color: var(--rl-primary);
    font-size: 1.25rem;
}

/* min-width: 0 kvůli flexu — jinak dlouhé slovo roztáhne položku
   nad šířku rodiče a stránka začne přetékat vodorovně. */
.rl-page--faq .faq-cta__text {
    flex: 1 1 200px;
    min-width: 0;
}

.rl-page--faq .faq-cta__title {
    margin: 0 0 6px;
    font-family: var(--rl-font-head);
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--rl-text);
}

.rl-page--faq .faq-cta__text p {
    margin: 0;
    color: var(--rl-text-secondary);
    font-size: 0.9375rem;
    line-height: 1.6;
}

.rl-page--faq .faq-cta__btn {
    flex: 0 0 auto;
}

/* Na úzkém displeji se tlačítko vedle textu nevejde — místo lámání
   na půl slova jde všechno pod sebe a CTA přes celou šířku. */
@media (max-width: 560px) {
    .rl-page--faq .faq-cta {
        flex-direction: column;
        align-items: flex-start;
    }

    .rl-page--faq .faq-cta__btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rl-page--faq .faq-item,
    .rl-page--faq .faq-item__chev {
        transition: none;
    }
}


/* ═══════════════════════════════════════════════════════════
   KONTAKT (/contact)

   Dřív byly kontaktní údaje na stránce dvakrát: v kartičkách nad
   formulářem a znovu ve dvou blocích pod ním. Teď je to jeden
   dvousloupcový blok — vlevo formulář, vpravo jediný seznam údajů.

   Šablona si nechává tři staré třídy: contactpage_submit-button
   (hledá ji inline skript stránky), contactpage_result_ok /
   contactpage_result_message (vypisuje je kontroler) a
   contactpage_form-group-honey-pot (past na spamboty). Všechny mají
   vlastní styly v public.css a riselify-unified.css, proto je tady
   přebíjíme. U tlačítka má originál `!important`, takže ho musí mít
   i přepis — jinak se neprosadí.
   ═══════════════════════════════════════════════════════════ */

.rl-page--contact {
    /* Obal <main class="mainPageBodyKontroler"> je flex kontejner. Bez flex-grow
       se stránka smrskne na šířku obsahu a na širokém monitoru sedí vlevo. */
    flex: 1 1 auto;
    min-width: 0;
    padding-bottom: clamp(48px, 7vw, 88px);
    color: var(--rl-text);
}

/* ─── Rozložení: formulář vlevo, údaje vpravo ──────────────── */

.rl-page--contact .rl-c-grid {
    display: grid;
    /* minmax(0,…) místo 1fr: bez toho by dlouhá e-mailová adresa roztlačila
       sloupec nad jeho podíl a mřížka by přetekla ven ze stránky. */
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: clamp(20px, 3vw, 36px);
    align-items: start;
}

.rl-page--contact .rl-c-main {
    min-width: 0;
}

/* ─── Karta s formulářem ───────────────────────────────────── */

.rl-page--contact .rl-c-card {
    padding: clamp(24px, 3vw, 36px);
}

.rl-page--contact .rl-c-card__title {
    margin: 0 0 6px;
    font-family: var(--rl-font-head);
    font-size: clamp(1.25rem, 2.2vw, 1.5rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--rl-text);
}

.rl-page--contact .rl-c-card__note {
    margin: 0 0 24px;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--rl-text-muted);
}

.rl-page--contact .rl-c-form {
    display: grid;
    gap: 18px;
}

/* Pole si nechávají třídu .contactpage_form-group, která má v public.css
   margin-bottom: 20px. S grid gapem by se sčítal, proto margin nulujeme. */
.rl-page--contact .rl-c-field {
    display: grid;
    gap: 8px;
    margin: 0;
}

.rl-page--contact .rl-c-field > label {
    display: block;
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--rl-text);
}

/* Hvězdička je jen vizuální zkratka (aria-hidden); povinnost nese atribut
   required, takže odečítač o ni nepřijde. */
.rl-page--contact .rl-c-field__req {
    color: #B91C1C;
    font-weight: 700;
}

.rl-page--contact .rl-c-field input,
.rl-page--contact .rl-c-field textarea {
    width: 100%;
    /* 48 px = pohodlný dotykový cíl, pod tím se na mobilu trefuje špatně. */
    min-height: 48px;
    padding: 12px 16px;
    border: 1.5px solid var(--rl-border-strong);
    border-radius: var(--rl-radius-sm);
    background: var(--rl-bg-elevated);
    color: var(--rl-text);
    font-family: var(--rl-font-body);
    /* Přesně 1rem: pod 16 px iOS Safari při fokusu automaticky přiblíží stránku. */
    font-size: 1rem;
    line-height: 1.5;
    transition: border-color .15s var(--rlp-ease), box-shadow .15s var(--rlp-ease);
}

.rl-page--contact .rl-c-field textarea {
    min-height: 168px;
    resize: vertical;
}

/* opacity: 1 kvůli Firefoxu — ten placeholder ještě sám zesvětluje a spadl by
   pod čitelný kontrast. #64748B na bílé = 4,8:1. */
.rl-page--contact .rl-c-field input::placeholder,
.rl-page--contact .rl-c-field textarea::placeholder {
    color: #64748B;
    opacity: 1;
}

.rl-page--contact .rl-c-field input:hover,
.rl-page--contact .rl-c-field textarea:hover {
    border-color: #94A3B8;
}

/* Jen barva rámečku. Obrys fokusu kreslí sdílené pravidlo .rl-page input:focus,
   sem se outline: none psát nesmí. */
.rl-page--contact .rl-c-field input:focus,
.rl-page--contact .rl-c-field textarea:focus {
    border-color: var(--rl-primary);
}

/* Past na spamboty: musí zůstat v DOM a odesílat se, ale nesmí být vidět. */
.rl-page--contact .contactpage_form-group-honey-pot {
    display: none;
}

/* Tlačítko na plnou šířku formuláře. Přepisuje gradient z riselify-unified.css,
   který je deklarovaný s !important. */
.rl-page--contact .contactpage_submit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    margin-top: 6px;
    padding: 14px 28px;
    border: 0;
    border-radius: 14px;
    background: var(--rl-primary) !important;
    color: #fff !important;
    font-family: var(--rl-font-body);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.1;
    cursor: pointer;
    box-shadow: 0 12px 32px -14px rgba(29, 78, 216, 0.7);
    transition: background-color .15s var(--rlp-ease), box-shadow .15s var(--rlp-ease),
                transform .15s var(--rlp-ease);
}

.rl-page--contact .contactpage_submit-button:hover {
    background: var(--rl-primary-hover) !important;
    box-shadow: 0 14px 34px -14px rgba(29, 78, 216, 0.75);
    transform: translateY(-1px);
}

.rl-page--contact .contactpage_submit-button:active {
    transform: none;
}

/* ─── Hlášky o výsledku odeslání ───────────────────────────── */

/* Staré .contactpage_result_* mají pevnou výšku (200 px / 20 px) — delší text
   z nich vytékal přes okolní obsah. height: auto to vrací do normálu. */
.rl-page--contact .rl-c-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    height: auto;
    margin: 0 0 20px;
    padding: 16px 18px;
    border-radius: var(--rl-radius-md);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.55;
    text-align: left;
}

.rl-page--contact .rl-c-alert .rl-ic {
    width: 1.25em;
    height: 1.25em;
    margin-top: 0.15em;
}

.rl-page--contact .rl-c-alert--ok {
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    color: #065F46;
}

.rl-page--contact .rl-c-alert--error {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    color: #991B1B;
}

/* ─── Sloupec s kontaktními údaji ──────────────────────────── */

.rl-page--contact .rl-c-aside {
    padding: clamp(22px, 2.6vw, 30px);
    border: 1px solid var(--rl-border);
    border-radius: 20px;
    background: linear-gradient(180deg, var(--rl-primary-soft) 0%, var(--rl-bg-elevated) 55%);
    box-shadow: var(--rl-shadow-sm);
}

.rl-page--contact .rl-c-aside__title {
    margin: 0 0 18px;
    font-family: var(--rl-font-head);
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--rl-text);
}

.rl-page--contact .rl-c-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rl-page--contact .rl-c-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 16px 0;
    border-top: 1px solid var(--rl-border);
}

.rl-page--contact .rl-c-item:first-child {
    padding-top: 0;
    border-top: 0;
}

.rl-page--contact .rl-c-item:last-child {
    padding-bottom: 0;
}

.rl-page--contact .rl-c-item__ic {
    display: grid;
    place-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--rl-border);
    border-radius: 12px;
    background: var(--rl-bg-elevated);
    color: var(--rl-primary);
    font-size: 1.0625rem;
}

.rl-page--contact .rl-c-item__body {
    min-width: 0;
}

.rl-page--contact .rl-c-item__label {
    display: block;
    margin-bottom: 3px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rl-text-muted);
}

/* font-style kvůli <address>, které prohlížeč sází kurzívou. */
.rl-page--contact .rl-c-item__text {
    display: block;
    margin: 0;
    font-size: 0.9375rem;
    font-style: normal;
    line-height: 1.55;
    color: var(--rl-text-secondary);
}

.rl-page--contact .rl-c-item__link {
    display: inline-block;
    padding: 2px 0;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.55;
    color: var(--rl-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    /* Dlouhá adresa se na úzkém displeji musí zalomit, jinak roztlačí sloupec. */
    overflow-wrap: anywhere;
}

.rl-page--contact .rl-c-item__link:hover {
    color: var(--rl-primary-hover);
}

/* ─── Responzivita ─────────────────────────────────────────── */

@media (max-width: 900px) {
    /* Pod sebou. Formulář je v DOM první, takže na mobilu vychází nahoru sám. */
    .rl-page--contact .rl-c-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
}

@media (max-width: 560px) {
    .rl-page--contact .rl-c-card,
    .rl-page--contact .rl-c-aside {
        padding: 20px 18px;
    }

    .rl-page--contact .rl-c-item {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 12px;
    }

    .rl-page--contact .rl-c-item__ic {
        width: 38px;
        height: 38px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rl-page--contact .rl-c-field input,
    .rl-page--contact .rl-c-field textarea,
    .rl-page--contact .contactpage_submit-button {
        transition-duration: 0.001ms;
    }

    .rl-page--contact .contactpage_submit-button:hover {
        transform: none;
    }
}


/* ═══════════════════════════════════════════════════════════
   BLOG – výpis článků (/blog)

   Dřív to byly široké řádky s malým náhledem vlevo; na širokém monitoru
   z toho byla jedna dlouhá kolona s obřími řádky textu. Teď mřížka karet
   (3 / 2 / 1 sloupec) — náhled 16:9, datum jako štítek, perex na 3 řádky.
   ═══════════════════════════════════════════════════════════ */

.rl-page--blog {
    padding-bottom: clamp(56px, 8vw, 96px);
}

/* Nadpis je delší než u ostatních stránek (kopíruje <title>), 20ch by ho
   zlomil na čtyři řádky. */
.rl-page--blog .rl-page__title {
    max-width: 26ch;
}

/* ── Mřížka ─────────────────────────────────────────────────────────── */

.rl-page--blog .rl-blog__grid {
    display: grid;
    /* min(100%, 280px): pevné minimum by na 390px displeji přeteklo z obrazovky.
       auto-fill (ne auto-fit) drží karty ve stejné šířce i když jsou články jen dva. */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: clamp(20px, 2.5vw, 28px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.rl-page--blog .rl-blog__item {
    display: flex;
    margin: 0;
}

.rl-page--blog .rl-blog__card {
    position: relative; /* kotva pro překryvný odkaz .rl-blog__link::after */
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    overflow: hidden; /* náhled se ořízne do rádiusu karty */
    background: var(--rl-bg-elevated);
    transition: transform .2s var(--rlp-ease), box-shadow .2s var(--rlp-ease),
                border-color .2s var(--rlp-ease);
}

.rl-page--blog .rl-blog__card:hover {
    transform: translateY(-4px);
    border-color: var(--rl-border-strong);
    box-shadow: 0 2px 4px rgba(15, 23, 42, .05), 0 22px 44px -22px rgba(15, 23, 42, .35);
}

/* ── Náhled ─────────────────────────────────────────────────────────── */

/* Pevný poměr 16:9 sjednotí výšku karet v řádku bez ohledu na to, jaký
   obrázek redaktor nahraje. */
.rl-page--blog .rl-blog__media {
    position: relative;
    flex: 0 0 auto; /* poměr 16:9 nesmí rozbít flexbox karty */
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--rl-primary-soft);
    border-bottom: 1px solid var(--rl-border);
}

.rl-page--blog .rl-blog__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s var(--rlp-ease);
}

.rl-page--blog .rl-blog__card:hover .rl-blog__img {
    transform: scale(1.04);
}

/* Článek bez obrázku dostane barevnou plochu s ikonou — prázdné místo
   nahoře v kartě vypadalo jako chyba načtení. */
.rl-page--blog .rl-blog__ph {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--rl-primary-soft) 0%, #E2EAFF 100%);
    color: var(--rl-primary);
    font-size: 2rem;
    opacity: .5;
}

/* ── Text karty ─────────────────────────────────────────────────────── */

.rl-page--blog .rl-blog__content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 20px 22px 22px;
}

.rl-page--blog .rl-blog__date {
    margin: 0 0 12px;
}

.rl-page--blog .rl-blog__date time {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--rl-bg);
    color: var(--rl-text-muted);
    font-size: .75rem;
    font-weight: 600;
}

/* Slovo „Publikováno:“ zůstává jen pro čtečky obrazovky — vizuálně je
   z kontextu jasné, co datum znamená, a ve štítku by zabralo půl karty. */
.rl-page--blog .rl-blog__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* POZOR: na nadpis se nesmí dát overflow:hidden (ani -webkit-line-clamp) —
   ořízl by překryvný ::after odkazu a klikatelná by zůstala jen jeho plocha. */
.rl-page--blog .rl-blog__title {
    margin: 0 0 10px;
    font-family: var(--rl-font-head);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.01em;
    color: var(--rl-text);
    overflow-wrap: anywhere; /* titulek bez mezer nesmí roztáhnout sloupec mřížky */
}

.rl-page--blog .rl-blog__link {
    color: inherit;
    text-decoration: none;
}

/* Klikatelná celá karta, ale v přístupnostním stromu je jen jeden odkaz. */
.rl-page--blog .rl-blog__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.rl-page--blog .rl-blog__card:hover .rl-blog__link {
    color: var(--rl-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Fokus kreslíme na překryv přes celou kartu, ne kolem textu nadpisu.
   Offset jde dovnitř, protože karta má overflow:hidden a vnější prstenec
   by se uřízl. Pořadí :focus → :focus-visible kopíruje globální pravidlo. */
.rl-page--blog .rl-blog__link:focus {
    outline: none;
}

.rl-page--blog .rl-blog__link:focus::after {
    outline: 3px solid var(--rl-focus);
    outline-offset: -3px;
}

.rl-page--blog .rl-blog__link:focus:not(:focus-visible)::after {
    outline: none;
}

.rl-page--blog .rl-blog__perex {
    margin: 0 0 18px;
    color: var(--rl-text-secondary);
    font-size: .9375rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* margin-top:auto přišpendlí patičku ke dnu, takže „Detail článku“ sedí
   ve všech kartách řádku na stejné lince i při různě dlouhém perexu. */
.rl-page--blog .rl-blog__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    color: var(--rl-primary);
    font-size: .875rem;
    font-weight: 700;
}

/* Ve spritu není šipka doprava, otočený chevron ji zastoupí.
   Na najetí posun doprava — po rotaci o -90° je to lokální osa Y. */
.rl-page--blog .rl-blog__more-ic {
    transform: rotate(-90deg);
    transition: transform .15s var(--rlp-ease);
}

.rl-page--blog .rl-blog__card:hover .rl-blog__more-ic {
    transform: rotate(-90deg) translateY(3px);
}

/* ── Prázdný stav ───────────────────────────────────────────────────── */

.rl-page--blog .rl-blog__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: clamp(40px, 8vw, 72px) 24px;
    border: 1px dashed var(--rl-border-strong);
    border-radius: 20px;
    background: var(--rl-bg-elevated);
    text-align: center;
}

.rl-page--blog .rl-blog__empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--rl-primary-soft);
    color: var(--rl-primary);
    font-size: 1.5rem;
}

.rl-page--blog .rl-blog__empty-text {
    margin: 0;
    max-width: 44ch;
    color: var(--rl-text-secondary);
    font-size: 1rem;
    line-height: 1.6;
}

/* ── Omezený pohyb ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .rl-page--blog .rl-blog__card,
    .rl-page--blog .rl-blog__img,
    .rl-page--blog .rl-blog__more-ic {
        transition: none;
    }

    .rl-page--blog .rl-blog__card:hover,
    .rl-page--blog .rl-blog__card:hover .rl-blog__img {
        transform: none;
    }

    .rl-page--blog .rl-blog__card:hover .rl-blog__more-ic {
        transform: rotate(-90deg);
    }
}


/* ═══════════════════════════════════════════════════════════
   Přihlášení + obnova hesla — /admin a /lostpassword
   Slug `login` sdílí obě stránky schválně: uživatel mezi nimi přechází
   jedním kliknutím, takže jakýkoli rozdíl v kartě by působil jako jiný web.
   Nahrazuje dřívější .prefix_admin_login-* (public.css + riselify-unified.css)
   a bootstrapí zbytky na /lostpassword (col-md-*, form-horizontal), které se
   na veřejné stránky vůbec nenačítají.
   ═══════════════════════════════════════════════════════════ */

.rl-page--login {
    padding: clamp(24px, 5vw, 56px) 0 clamp(48px, 7vw, 88px);
}

/* Karta je užší než --rlp-narrow: přihlašovací formulář o dvou polích
   se na 760 px roztahuje do nečitelně dlouhých řádků. */
.rl-page--login .rl-login__wrap {
    max-width: 468px;
}

.rl-page--login .rl-login__card {
    padding: clamp(24px, 5vw, 36px);
    /* .rl-card dává shadow-sm; vstupní brána je jediný prvek na stránce,
       takže si zaslouží o stupeň víc odsazení od pozadí. */
    box-shadow: var(--rl-shadow-md);
}

/* ── Hlavička karty ─────────────────────────────────────── */

.rl-page--login .rl-login__head {
    text-align: center;
    margin-bottom: clamp(20px, 3vw, 28px);
}

.rl-page--login .rl-login__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 16px;
    border-radius: 16px;
    background: var(--rl-primary-soft);
    color: var(--rl-primary);
    font-size: 1.375rem;
}

.rl-page--login .rl-login__title {
    margin: 0 0 8px;
    font-family: var(--rl-font-head);
    font-size: clamp(1.5rem, 3.4vw, 1.75rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--rl-text);
    text-wrap: balance;
}

.rl-page--login .rl-login__subtitle {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--rl-text-secondary);
    text-wrap: pretty;
}

/* ── Hlášky nad formulářem ──────────────────────────────── */

.rl-page--login .rl-login__alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 20px;
    padding: 13px 15px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.55;
}

/* Ikona nesmí zúžit ani spadnout pod text, když se hláška zalomí. */
.rl-page--login .rl-login__alert .rl-ic {
    flex: 0 0 auto;
    margin-top: 0.2em;
    font-size: 1.0625em;
}

/* Chyba přihlášení: #991B1B na #FEF2F2 = kontrast 8,5:1. Dřív to byl jen
   drobný text v kartě, který se dal snadno přehlédnout. */
.rl-page--login .rl-login__alert--error {
    background: #FEF2F2;
    border-color: #FECACA;
    color: #991B1B;
}

/* Informace (odhlášení, vypršená relace) — dřív řešeno inline style="". */
.rl-page--login .rl-login__alert--info {
    background: var(--rl-primary-soft);
    border-color: #C7D2FE;
    color: #1E3A8A;
}

/* ── Formulář ───────────────────────────────────────────── */

.rl-page--login .rl-login__form {
    display: grid;
    gap: 20px;
}

.rl-page--login .rl-login__field {
    display: grid;
    gap: 8px;
}

.rl-page--login .rl-login__field-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.rl-page--login .rl-login__label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--rl-text);
}

.rl-page--login .rl-login__control {
    position: relative;
    display: block;
}

.rl-page--login .rl-login__ico {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 1.125rem;
    height: 1.125rem;
    color: var(--rl-text-muted);
    /* Ikona je dekorace — klik na ni musí projít do pole pod ní. */
    pointer-events: none;
}

.rl-page--login .rl-login__input {
    box-sizing: border-box;
    width: 100%;
    /* public.css dává .inputLostPassEmail vlastní margin-top/bottom — nulujeme,
       o rozestupy se stará grid formuláře. */
    margin: 0;
    min-height: 52px;
    padding: 14px 16px 14px 46px;
    border: 1px solid var(--rl-border-strong);
    border-radius: 14px;
    background: var(--rl-bg-elevated);
    font-family: var(--rl-font-body);
    /* 16 px: menší písmo nutí iOS Safari při fokusu přiblížit celou stránku. */
    font-size: 1rem;
    line-height: 1.3;
    color: var(--rl-text);
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .15s var(--rlp-ease);
}

/* Místo pro tlačítko oka, ať přes něj text hesla neprojíždí. */
.rl-page--login .rl-login__input--pass {
    padding-right: 54px;
}

/* #64748B na bílé = 4,8:1; původní #94A3B8 mělo 2,5:1 a byl nečitelný. */
.rl-page--login .rl-login__input::placeholder {
    color: #64748B;
    opacity: 1;
}

.rl-page--login .rl-login__input:hover {
    border-color: #94A3B8;
}

/* Jen barva rámečku — prstenec fokusu řeší sdílené pravidlo .rl-page input:focus
   výš v tomhle souboru, přepsat ho tady by shodilo WCAG 2.4.7. */
.rl-page--login .rl-login__input:focus {
    border-color: var(--rl-primary);
}

/* ── Přepínač viditelnosti hesla ────────────────────────── */

.rl-page--login .rl-login__toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 38 px zásah prstem uvnitř 52px pole — pod 24 px by to byl WCAG 2.5.8 fail. */
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--rl-text-muted);
    font-size: 1.125rem;
    cursor: pointer;
    transition: background-color .15s var(--rlp-ease), color .15s var(--rlp-ease);
}

.rl-page--login .rl-login__toggle:hover {
    background: var(--rl-primary-soft);
    color: var(--rl-primary);
}

/* Sepnutý stav (heslo je vidět) musí být poznat i okem — samotné aria-pressed
   vidí jen odečítač obrazovky. */
.rl-page--login .rl-login__toggle[aria-pressed="true"] {
    background: var(--rl-primary-soft);
    color: var(--rl-primary);
}

/* ── Odkazy ─────────────────────────────────────────────── */

/* Podtržení je tu povinné: odkaz „Zapomněl/a jsem heslo" stojí v jednom řádku
   s popiskem pole a bez něj splýval v běžný text. */
.rl-page--login .rl-login__link {
    color: var(--rl-primary);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.rl-page--login .rl-login__link:hover {
    color: var(--rl-primary-hover);
    text-decoration-thickness: 2px;
}

.rl-page--login .rl-login__link--forgot {
    font-size: 0.8125rem;
    white-space: nowrap;
}

/* ── Odesílací tlačítko ─────────────────────────────────── */

.rl-page--login .rl-login__submit {
    width: 100%;
}

/* ── Patička karty ──────────────────────────────────────── */

.rl-page--login .rl-login__footer {
    margin-top: clamp(20px, 3vw, 26px);
    padding-top: 20px;
    border-top: 1px solid var(--rl-border);
    text-align: center;
}

.rl-page--login .rl-login__footer-text {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--rl-text-secondary);
    text-wrap: pretty;
}

/* REG-ODKAZ-01: vstup do registrace jako tlačítko přes celou šířku karty, stejně široké
   jako „Přihlásit se" nad ním — obrysové, aby nesoupeřilo s hlavní akcí stránky. */
.rl-page--login .rl-login__register {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 12px;
}

.rl-page--login .rl-login__secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 14px 0 0;
    font-size: 0.8125rem;
    color: var(--rl-text-muted);
}

.rl-page--login .rl-login__secure .rl-ic {
    color: var(--rlp-green);
}

/* ── Mobil ──────────────────────────────────────────────── */

@media (max-width: 480px) {
    .rl-page--login .rl-login__card {
        padding: 24px 18px 22px;
    }

    /* Na 390 px se „Heslo" a odkaz na obnovu do jednoho řádku nevejdou;
       flex-wrap by odkaz odsunul doleva pod popisek, tohle je čitelnější. */
    .rl-page--login .rl-login__field-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .rl-page--login .rl-login__link--forgot {
        white-space: normal;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rl-page--login .rl-login__input,
    .rl-page--login .rl-login__toggle {
        transition: none;
    }
}


/* ═══════════════════════════════════════════════════════════
   Stavové stránky — /samples (prázdný stav), 404 a 403

   Tři stránky, jeden vzor: „značka" (kruhová ikona + volitelně kód chyby),
   nadpis, vysvětlení, dvě akce, doplňková věta. Díky společné kostře působí
   jako jedna rodina a člověk pozná, že pořád stojí na Riselify — dřív to
   vypadalo jako rozbitý web (prázdná bílá plocha, resp. holý text s emoji).
   ═══════════════════════════════════════════════════════════ */

/* Jemné světlo shora navazuje na hero homepage, aby stavová stránka nebyla
   jen prázdný obdélník. Gradient mizí do průhledna, takže nevytváří viditelné
   hrany ani uvnitř užšího obsahového sloupce adminu. */
.rl-page--stavy {
    background: radial-gradient(ellipse 60% 45% at 50% 0%, rgba(29, 78, 216, 0.07) 0%, transparent 60%);
}

/* Vertikální vycentrování — bez min-height by obsah visel u horní hrany
   a patička by vyjela do poloviny obrazovky. */
.rl-page--stavy .rl-stavy {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: clamp(360px, 62vh, 640px);
    padding: var(--rlp-pad) 0 clamp(48px, 7vw, 88px);
    text-align: center;
}

/* ─── Značka stránky (ikona + kód chyby) ─────────────────── */

.rl-page--stavy .rl-stavy__sign {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-bottom: clamp(20px, 3vw, 28px);
}

/* Velikost ikony řídí font-size — .rl-ic je 1em, takže se nemusí přepisovat
   width/height u každého svg zvlášť. */
.rl-page--stavy .rl-stavy__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--rl-primary-soft);
    color: var(--rl-primary);
    font-size: 32px;
    /* Prstenec místo borderu: nezvětšuje kruh, takže se nerozjede zarovnání. */
    box-shadow: 0 0 0 10px rgba(29, 78, 216, 0.06);
}

/* 403 je zákaz, ne informace — jantarový odstín odliší „nesmíte" od „nenašlo se",
   aniž bychom sahali po červené (ta je v systému vyhrazená pro chyby formulářů). */
.rl-page--stavy .rl-stavy__badge--lock {
    background: #FEF3C7;
    color: #92400E;
    box-shadow: 0 0 0 10px rgba(180, 83, 9, 0.06);
}

/* Číslo chyby je grafika stránky, proto vlastní velikost mimo typografickou škálu.
   Barva primary drží kontrast 7:1 na --rl-bg, takže projde i jako běžný text. */
.rl-page--stavy .rl-stavy__code {
    margin: 0;
    font-family: var(--rl-font-head);
    font-size: clamp(3.5rem, 13vw, 6.5rem);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.04em;
    color: var(--rl-primary);
}

/* ─── Texty ──────────────────────────────────────────────── */

.rl-page--stavy .rl-page__title {
    max-width: 18ch;
}

.rl-page--stavy .rl-page__lead {
    max-width: 54ch;
    margin-top: 14px;
}

.rl-page--stavy .rl-stavy__note {
    max-width: 52ch;
    margin: 22px 0 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--rl-text-muted);
    text-wrap: pretty;
}

/* ─── Akce ───────────────────────────────────────────────── */

.rl-page--stavy .rl-stavy__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: clamp(24px, 4vw, 34px);
}

/* Na 403 (a na 404 po přihlášení) se stránka vykresluje uvnitř adminu, kde
   riselify-admin-modern.css přebíjí .rl-page .rl-btn selektorem o vyšší
   specificitě (body.is-admin .pageBodyKontroler--admin .rl-btn). Proto se tu
   geometrie tlačítka opakuje s dostatečnou vahou — jinak by 403 vypadala jinak
   než 404 a /samples. */
.rl-page--stavy .rl-stavy__actions .rl-btn {
    min-height: 52px;
    padding: 14px 28px;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 700;
    box-shadow: none;
}

.rl-page--stavy .rl-stavy__actions .rl-btn--primary {
    background: var(--rl-primary);
    color: #fff;
    box-shadow: 0 12px 32px -14px rgba(29, 78, 216, 0.7);
}

.rl-page--stavy .rl-stavy__actions .rl-btn--primary:hover {
    background: var(--rl-primary-hover);
}

.rl-page--stavy .rl-stavy__actions .rl-btn--ghost {
    border: 2px solid var(--rl-border);
    background: var(--rl-bg-elevated);
    color: var(--rl-text);
}

.rl-page--stavy .rl-stavy__actions .rl-btn--ghost:hover {
    border-color: var(--rl-primary);
    color: var(--rl-primary);
}

/* Admin verze tlačítek posouvá hover o pixel nahoru a přesvětluje filtrem;
   na veřejném vzoru to nechceme, ať je hover stejný na všech třech stránkách. */
.rl-page--stavy .rl-stavy__actions .rl-btn:hover {
    transform: none;
    filter: none;
}

/* ─── Mobil ──────────────────────────────────────────────── */

@media (max-width: 480px) {
    /* Dvě tlačítka vedle sebe se na úzkém displeji lámou nevzhledně do „schodů" —
       na celou šířku sloupce je čitelnější a prst je trefí spolehlivěji. */
    .rl-page--stavy .rl-stavy__actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 320px;
    }

    .rl-page--stavy .rl-stavy__badge {
        width: 72px;
        height: 72px;
        font-size: 28px;
    }
}


/* ═══════════════════════════════════════════════════════════
   /terms — Všeobecné obchodní podmínky (dlouhý právní dokument)

   Vzhled téhle stránky byl původně v <style> uvnitř terms.phtml a přepisoval
   :root proměnné (--primary, --accent, --bg, --text, --border) plus nastavoval
   Arial a globální `p, li {…}`. To nedopadalo jen na VOP, ale na celý web —
   proto je celý blok přenesený sem a uzavřený pod .rl-page--terms.
   ═══════════════════════════════════════════════════════════ */

.rl-page--terms {
    /* Topbar je position:sticky a vysoký ~52 px. Kotvy z obsahu i lepivý
       sloupec musí začínat pod ním, jinak skok schová nadpis za lištu. */
    --tp-sticky-top: 72px;
    /* Míra řádku ~72 znaků; kartu s textem držíme na téhle šířce. */
    --tp-measure: 82ch;
}

/* ─── Hlavička stránky ───────────────────────────────────── */

/* Výchozích 20ch by dlouhý název dokumentu zlomilo do čtyř řádků. */
.rl-page--terms .rl-page__title {
    max-width: 30ch;
}

.rl-page--terms .rl-page__head {
    padding-bottom: clamp(20px, 3vw, 32px);
}

/* Datum účinnosti — jediný údaj o platnosti, který je v samotném textu VOP. */
.rl-page--terms .tp-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 18px 0 0;
    padding: 7px 16px;
    border: 1px solid var(--rl-border);
    border-radius: 999px;
    background: var(--rl-bg-elevated);
    color: var(--rl-text-muted);
    font-size: 0.875rem;
    font-weight: 600;
}

/* ─── Mřížka: obsah dokumentu + text ─────────────────────── */

.rl-page--terms .tp-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(20px, 3vw, 40px);
    align-items: start;
    padding-bottom: clamp(48px, 7vw, 88px);
}

/* Od 60rem se vejde lepivý sloupec vedle textu; pod tím je obsah nad textem
   jako rozbalovací <details>. Druhý sloupec je omezený mírou řádku, ne 1fr —
   jinak by se na širokém monitoru řádky natáhly na 100+ znaků. */
@media (min-width: 60rem) {
    .rl-page--terms .tp-layout {
        grid-template-columns: minmax(220px, 260px) minmax(0, var(--tp-measure));
        justify-content: center;
    }
}

/* ─── Obsah dokumentu ────────────────────────────────────── */

.rl-page--terms .tp-toc {
    min-width: 0;
}

@media (min-width: 60rem) {
    .rl-page--terms .tp-toc {
        position: sticky;
        top: var(--tp-sticky-top);
        /* Při 16 článcích se seznam na nízkém okně nevejde — ať roluje sám
           v sobě a nepřetlačuje patičku. */
        max-height: calc(100vh - var(--tp-sticky-top) - 24px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

.rl-page--terms .tp-toc__box {
    background: var(--rl-bg-elevated);
    border: 1px solid var(--rl-border);
    border-radius: 16px;
    box-shadow: var(--rl-shadow-sm);
}

.rl-page--terms .tp-toc__summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    font-family: var(--rl-font-head);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--rl-text);
    cursor: pointer;
    /* Vlastní šipka vpravo místo výchozího trojúhelníku prohlížeče. */
    list-style: none;
}

.rl-page--terms .tp-toc__summary::-webkit-details-marker {
    display: none;
}

.rl-page--terms .tp-toc__chevron {
    margin-left: auto;
    color: var(--rl-text-muted);
    transition: transform .15s var(--rlp-ease);
}

/* Otáčíme transform, ne opacity — animace startující na opacity:0 se mimo
   viewport uspí a obsah zůstane neviditelný. */
.rl-page--terms .tp-toc__box[open] .tp-toc__chevron {
    transform: rotate(180deg);
}

.rl-page--terms .tp-toc__list {
    margin: 0;
    padding: 0 8px 10px;
    list-style: none;
}

.rl-page--terms .tp-toc__list--extra {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--rl-border);
}

/* Text položky je v jednom obalu: odkaz je flex kontejner, takže vnořený
   <span class="rl-nowrap"> (KNOW-HOW) by se jinak stal samostatnou flex položkou
   a název kapitoly by se rozpadl na dva sloupce. */
.rl-page--terms .tp-toc__list .tp-toc__text {
    min-width: 0;
}

.rl-page--terms .tp-toc__list a {
    display: flex;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--rl-text-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: background-color .15s var(--rlp-ease), color .15s var(--rlp-ease);
}

.rl-page--terms .tp-toc__list a:hover {
    background: var(--rl-primary-soft);
    color: var(--rl-primary);
}

.rl-page--terms .tp-toc__num {
    flex: 0 0 auto;
    min-width: 1.9em;
    color: var(--rl-primary);
    font-variant-numeric: tabular-nums;
}

/* ─── Karta s textem podmínek ────────────────────────────── */

.rl-page--terms .tp-doc {
    /* min-width: 0 samo nestačí: tabulka ceníku má min-width 620 px a její
       obalovací div řeší max-width v procentech, takže se do min-content
       šířky karty stejně propsala a karta na 390 px vylezla na 711 px
       (vodorovný posuv celé stránky). Tvrdý strop na šířku rodiče to
       zastaví, scrolluje pak jen tabulka. */
    min-width: 0;
    width: 100%;
    max-width: min(var(--tp-measure), 100%);
    margin-inline: auto;
    padding: clamp(20px, 4vw, 44px);
    background: var(--rl-bg-elevated);
    border: 1px solid var(--rl-border);
    border-radius: 20px;
    box-shadow: var(--rl-shadow-sm);
    color: var(--rl-text-secondary);
    font-size: 1rem;
    /* Právní text se čte dlouho — vzdušnější proklad než výchozích 1.5. */
    line-height: 1.7;
    /* Pojistka proti vodorovnému přetečení na 390 px (dlouhé názvy, e-maily). */
    overflow-wrap: break-word;
}

.rl-page--terms .tp-doc p {
    margin: 0 0 14px;
}

.rl-page--terms .tp-doc strong {
    color: var(--rl-text);
    font-weight: 700;
}

.rl-page--terms .tp-doc a {
    color: var(--rl-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.rl-page--terms .tp-doc a:hover {
    color: var(--rl-primary-hover);
}

/* Články oddělujeme linkou a mezerou, ať je při rolování jasné, kde jeden končí. */
.rl-page--terms .tp-art ~ .tp-art {
    margin-top: clamp(32px, 5vw, 48px);
    padding-top: clamp(28px, 4vw, 40px);
    border-top: 1px solid var(--rl-border);
}

.rl-page--terms .tp-h2 {
    margin: 0 0 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--rl-border);
    font-family: var(--rl-font-head);
    font-size: clamp(1.125rem, 2.2vw, 1.3125rem);
    font-weight: 800;
    line-height: 1.35;
    /* Nadpisy jsou ve zdroji verzálkami — kladné prostrkání je u verzálek nutné. */
    letter-spacing: 0.02em;
    color: var(--rl-text);
    scroll-margin-top: calc(var(--tp-sticky-top) + 8px);
}

/* Po skoku z obsahu musí být poznat, kam čtenář přistál. Záporný margin
   vyrovná odsazení, takže text nadpisu zůstane zarovnaný s odstavci. */
.rl-page--terms .tp-h2:target {
    margin-left: -16px;
    padding-left: 12px;
    border-left: 4px solid var(--rl-primary);
}

.rl-page--terms .tp-h3 {
    margin: 28px 0 10px;
    font-family: var(--rl-font-head);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.45;
    color: var(--rl-text);
    scroll-margin-top: calc(var(--tp-sticky-top) + 8px);
}

/* První podnadpis hned za nadpisem článku nepotřebuje další mezeru navíc. */
.rl-page--terms .tp-h2 + .tp-h3 {
    margin-top: 0;
}

.rl-page--terms .tp-list {
    margin: 0 0 14px;
    padding-left: 1.6em;
}

.rl-page--terms .tp-list li {
    margin-bottom: 8px;
}

.rl-page--terms .tp-list li::marker {
    color: var(--rl-primary);
}

/* Bloky identifikačních a kontaktních údajů (sídlo, banka, Comgate) — v textu
   jsou to shluky řádků oddělených <br>, bez odlišení splývají s odstavci. */
.rl-page--terms .tp-ident {
    padding: 14px 18px;
    border-left: 3px solid var(--rl-primary);
    border-radius: 0 12px 12px 0;
    background: var(--rl-primary-soft);
    line-height: 1.75;
}

/* Příloha č. 1 je vzorový text k překopírování — proto přerušovaný rám. */
.rl-page--terms .tp-appendix {
    padding: clamp(18px, 3vw, 28px);
    border: 1px dashed var(--rl-border-strong);
    border-radius: 16px;
    background: #F8FAFC;
}

.rl-page--terms .tp-art ~ .tp-art.tp-appendix {
    border-top: 1px dashed var(--rl-border-strong);
}

.rl-page--terms .tp-signoff {
    margin: clamp(28px, 4vw, 40px) 0 0;
    text-align: center;
    font-weight: 600;
    color: var(--rl-text);
}

.rl-page--terms .tp-note {
    margin: clamp(28px, 4vw, 40px) 0 0;
    padding-top: 18px;
    border-top: 2px solid var(--rl-border);
    color: var(--rl-text-muted);
    font-size: 0.875rem;
    line-height: 1.6;
}

.rl-page--terms .tp-backtop {
    margin: 20px 0 0;
}

.rl-page--terms .tp-backtop a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}

.rl-page--terms .tp-backtop a:hover {
    text-decoration: underline;
}

/* ─── Tabulka tarifů ─────────────────────────────────────── */

/* Šest sloupců se na mobil nevejde — tabulka roluje uvnitř obalu, stránka ne.
   tabindex na obalu dělá roli scrollovatelné oblasti dosažitelnou z klávesnice. */
.rl-page--terms .tp-tablewrap {
    max-width: 100%;
    margin: 4px 0 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--rl-border);
    border-radius: 14px;
}

.rl-page--terms .tp-tablewrap:focus {
    outline: 3px solid var(--rl-focus);
    outline-offset: 2px;
}

.rl-page--terms .tp-tablewrap:focus:not(:focus-visible) {
    outline: none;
}

.rl-page--terms .tp-table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.rl-page--terms .tp-table th,
.rl-page--terms .tp-table td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--rl-border);
    text-align: center;
    color: var(--rl-text-secondary);
    vertical-align: middle;
}

.rl-page--terms .tp-table thead th {
    background: var(--rlp-dark);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.rl-page--terms .tp-table__plan {
    text-align: left;
    background: #F8FAFC;
    color: var(--rl-text);
    font-weight: 700;
    white-space: nowrap;
}

.rl-page--terms .tp-table tbody tr:last-child th,
.rl-page--terms .tp-table tbody tr:last-child td {
    border-bottom: 0;
}

/* Původní zelená #10b981 měla na bílé kontrast 2,5:1 — pod prahem WCAG AA. */
.rl-page--terms .tp-yes {
    color: var(--rlp-green);
    font-weight: 700;
}

/* ─── Tisk ───────────────────────────────────────────────── */

/* VOP se tisknou a archivují; navigace a rámy na papíře jen překážejí. */
@media print {
    .rl-page--terms .tp-toc,
    .rl-page--terms .tp-backtop {
        display: none;
    }

    .rl-page--terms .tp-doc {
        max-width: none;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .rl-page--terms .tp-h2,
    .rl-page--terms .tp-h3 {
        break-after: avoid;
    }

    .rl-page--terms .tp-art {
        break-inside: auto;
    }
}


/* ═══════════════════════════════════════════════════════════
   /privacy — Zásady zpracování osobních údajů (GDPR)

   Dlouhý právní text, který lidé čtou jen v okamžiku, kdy něco
   hledají. Proto: krátký řádek, vysoký proklad, výčty vysázené
   jako definiční seznam (termín se dá přeletět očima) a obsah
   s kotvami — na širokém displeji lepivý vedle textu, na mobilu
   složený do <details>, ať netlačí dokument pod okraj obrazovky.
   ═══════════════════════════════════════════════════════════ */

.rl-page--privacy {
    /* Délka řádku ~72 znaků. Nad tou mez oko nenajde začátek dalšího řádku. */
    --pv-measure: 72ch;
    /* Kotvy musí doskrolovat POD lepivý topbar, jinak nadpis zmizí za lištou.
       Skutečnou výšku dopočítá JS do --rl-topbar-h, hodnota níž je jen pojistka
       pro první vykreslení. */
    --pv-anchor: calc(var(--rl-topbar-h, 60px) + 20px);
    padding-bottom: clamp(56px, 8vw, 96px);
}

/* ─── Hlavička ─────────────────────────────────────────────── */

/* Jemný nádech modré jako na homepage, ať se právní stránka netváří
   jako cizí příloha. Pruh je přes celou šířku, proto vlastní obal. */
.rl-page--privacy .pv-band {
    background: radial-gradient(ellipse 70% 70% at 50% 0%, rgba(29, 78, 216, 0.10), transparent 62%);
}

.rl-page--privacy .rl-page__head {
    padding-bottom: clamp(24px, 3vw, 36px);
}

/* Titulek je delší než u marketingových stránek, 20ch by ho lámalo na 4 řádky. */
.rl-page--privacy .rl-page__title {
    max-width: 26ch;
}

.rl-page--privacy .pv-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 22px 0 0;
}

.rl-page--privacy .pv-meta__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 16px;
    border: 1px solid var(--rl-border);
    border-radius: 999px;
    background: var(--rl-bg-elevated);
    color: var(--rl-text-muted);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
}

.rl-page--privacy .pv-meta__item--link {
    color: var(--rl-primary);
}

.rl-page--privacy .pv-meta__item--link:hover {
    background: var(--rl-primary-soft);
    border-color: var(--rl-primary);
    color: var(--rl-primary-hover);
}

/* ─── Rozvržení: obsah + dokument ──────────────────────────── */

.rl-page--privacy .pv-layout {
    display: grid;
    gap: clamp(18px, 3vw, 28px);
    align-items: start;
}

/* ─── Obsah dokumentu (obě varianty) ───────────────────────── */

.rl-page--privacy .pv-toc {
    background: var(--rl-bg-elevated);
    border: 1px solid var(--rl-border);
    border-radius: var(--rl-radius-lg);
    box-shadow: var(--rl-shadow-sm);
}

.rl-page--privacy .pv-toc__title {
    margin: 0;
    padding: 16px 18px 8px;
    font-family: var(--rl-font-head);
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rl-text-muted);
}

/* Globální reset v public.css bere odrážky i odsazení všem ul/li,
   tady se čísla stejně kreslí vlastním elementem. */
.rl-page--privacy .pv-toc__list {
    margin: 0;
    padding: 0 10px 12px;
    list-style: none;
}

.rl-page--privacy .pv-toc__list li {
    margin: 0;
}

.rl-page--privacy .pv-toc__list a {
    display: flex;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--rl-radius-md);
    color: var(--rl-text-secondary);
    font-size: 0.9375rem;
    line-height: 1.4;
    text-decoration: none;
}

.rl-page--privacy .pv-toc__list a:hover {
    background: var(--rl-primary-soft);
    color: var(--rl-primary);
}

.rl-page--privacy .pv-toc__num {
    flex: 0 0 20px;
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--rl-text-muted);
}

.rl-page--privacy .pv-toc__list a:hover .pv-toc__num {
    color: var(--rl-primary);
}

/* Mobilní varianta: rozbalovací. Vlastní šipka místo systémového trojúhelníku. */
.rl-page--privacy .pv-toc__summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    cursor: pointer;
    font-family: var(--rl-font-head);
    font-size: 1rem;
    font-weight: 700;
    color: var(--rl-text);
    list-style: none;
}

.rl-page--privacy .pv-toc__summary::-webkit-details-marker {
    display: none;
}

.rl-page--privacy .pv-toc__chev {
    margin-left: auto;
    color: var(--rl-text-muted);
    transition: transform .18s var(--rlp-ease);
}

/* Animuje se jen transform — nic se nikdy nerozjede na opacity: 0. */
.rl-page--privacy .pv-toc--mobile[open] .pv-toc__chev {
    transform: rotate(180deg);
}

.rl-page--privacy .pv-toc--mobile[open] .pv-toc__summary {
    border-bottom: 1px solid var(--rl-border);
}

/* Do 999 px se obsah zobrazuje jen jako <details>. Dvě samostatné varianty
   místo jedné jsou schválně: zavřený <details> už dnes prohlížeče skrývají přes
   ::details-content / content-visibility, takže ho nejde spolehlivě „odemknout“
   samotným CSS po zvětšení okna — uživatel by na desktopu zůstal bez obsahu. */
.rl-page--privacy .pv-toc--wide {
    display: none;
}

/* ─── Tělo dokumentu ───────────────────────────────────────── */

.rl-page--privacy .pv-doc {
    padding: clamp(22px, 4vw, 44px);
    color: var(--rl-text-secondary);
    font-size: 1.0625rem;
    line-height: 1.7;
    overflow-wrap: break-word;
}

.rl-page--privacy .pv-doc p,
.rl-page--privacy .pv-doc dd,
.rl-page--privacy .pv-list li {
    max-width: var(--pv-measure);
}

.rl-page--privacy .pv-doc p {
    margin: 0 0 16px;
}

.rl-page--privacy .pv-doc p:last-child {
    margin-bottom: 0;
}

.rl-page--privacy .pv-doc strong {
    font-weight: 700;
    color: var(--rl-text);
}

.rl-page--privacy .pv-doc a {
    color: var(--rl-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
}

.rl-page--privacy .pv-doc a:hover {
    color: var(--rl-primary-hover);
}

/* Sekce oddělené vlasovou linkou; karta zůstává jedna, ať dokument drží pohromadě. */
.rl-page--privacy .pv-sec {
    scroll-margin-top: var(--pv-anchor);
}

.rl-page--privacy .pv-sec + .pv-sec {
    margin-top: clamp(34px, 5vw, 52px);
    padding-top: clamp(30px, 4vw, 44px);
    border-top: 1px solid var(--rl-border);
}

.rl-page--privacy .pv-sec__title {
    position: relative;
    margin: 0 0 18px;
    padding-left: 18px;
    font-family: var(--rl-font-head);
    font-size: clamp(1.3rem, 2.2vw, 1.55rem);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--rl-text);
    text-wrap: balance;
}

/* Modrý praporek u nadpisu — jediná ozdoba, kterou si dokument bere z původní verze. */
.rl-page--privacy .pv-sec__title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.2em;
    bottom: 0.2em;
    width: 4px;
    border-radius: 2px;
    background: var(--rl-primary);
}

.rl-page--privacy .pv-doc h3 {
    margin: 30px 0 10px;
    font-family: var(--rl-font-head);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.45;
    color: var(--rl-text);
}

/* Mezititulek uvnitř výčtu (není nadpis — pod h2 by v té sekci skákal na h4). */
.rl-page--privacy .pv-sublabel {
    margin: 26px 0 12px;
    font-weight: 700;
    color: var(--rl-text);
}

/* ─── Prosté odrážky ───────────────────────────────────────── */

/* public.css nuluje list-style na ul I na li, proto se to musí vrátit dvakrát. */
.rl-page--privacy .pv-list {
    margin: 0 0 18px;
    padding-left: 22px;
    list-style: disc;
}

.rl-page--privacy .pv-list li {
    list-style: disc;
    margin-bottom: 8px;
}

.rl-page--privacy .pv-list li::marker {
    color: var(--rl-primary);
}

/* ─── Výčty údajů, příjemců a práv jako definiční seznam ───── */

.rl-page--privacy .pv-defs {
    display: grid;
    gap: 10px;
    margin: 0 0 20px;
}

.rl-page--privacy .pv-defs > div {
    padding: 14px 16px;
    background: var(--rl-bg);
    border: 1px solid var(--rl-border);
    border-radius: var(--rl-radius-md);
}

.rl-page--privacy .pv-defs dt {
    margin-bottom: 4px;
    font-weight: 700;
    color: var(--rl-text);
}

.rl-page--privacy .pv-defs dd {
    margin: 0;
}

/* Vnořený výčet (podmínky předání dat poskytovatelům AI) — světlejší,
   ať je na první pohled vidět, že patří dovnitř nadřazené položky. */
.rl-page--privacy .pv-defs--nested {
    margin: 12px 0 0;
    gap: 8px;
}

.rl-page--privacy .pv-defs--nested > div {
    background: var(--rl-bg-elevated);
}

/* Dvanáct práv se hledá podle článku GDPR — termín dostane barvu, aby šel přeletět. */
.rl-page--privacy .pv-defs--rights dt {
    color: var(--rl-primary);
}

/* ─── Rámeček s kontaktem na správce ───────────────────────── */

.rl-page--privacy .pv-contact {
    padding: clamp(18px, 3vw, 26px);
    border: 1px solid var(--rl-border);
    border-radius: var(--rl-radius-xl);
    background: var(--rl-primary-soft);
}

.rl-page--privacy .pv-contact__intro {
    font-weight: 600;
    color: var(--rl-text);
}

.rl-page--privacy .pv-defs--ident > div {
    background: var(--rl-bg-elevated);
}

.rl-page--privacy .pv-contact__mail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 0;
    padding: 14px 16px;
    background: var(--rl-bg-elevated);
    border: 1px solid var(--rl-border);
    border-radius: var(--rl-radius-md);
}

.rl-page--privacy .pv-contact__mail .rl-ic {
    color: var(--rl-primary);
}

.rl-page--privacy .pv-contact__mail a {
    font-weight: 700;
}

/* ─── Zvýrazněná poznámka (Privacy by Design) ──────────────── */

.rl-page--privacy .pv-note {
    display: flex;
    gap: 14px;
    margin: 20px 0;
    padding: clamp(16px, 2.5vw, 22px);
    border: 1px solid var(--rl-border);
    border-radius: var(--rl-radius-lg);
    background: var(--rl-primary-soft);
}

.rl-page--privacy .pv-note__icon {
    flex: none;
    width: 1.3em;
    height: 1.3em;
    margin-top: 0.15em;
    color: var(--rl-primary);
}

.rl-page--privacy .pv-note p {
    margin: 0;
}

/* ─── Návrat na začátek ────────────────────────────────────── */

.rl-page--privacy .pv-back {
    margin: clamp(30px, 4vw, 44px) 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--rl-border);
}

.rl-page--privacy .pv-back a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    text-decoration: none;
}

.rl-page--privacy .pv-back a:hover {
    text-decoration: underline;
}

/* ─── Široký displej ───────────────────────────────────────── */

@media (min-width: 1000px) {
    .rl-page--privacy .pv-layout {
        grid-template-columns: 250px minmax(0, 1fr);
        gap: clamp(28px, 4vw, 48px);
    }

    .rl-page--privacy .pv-toc--wide {
        display: block;
        position: sticky;
        top: calc(var(--rl-topbar-h, 60px) + 16px);
        /* Deset kapitol se vejde, ale kdyby dokument narostl, ať se roluje
           uvnitř sloupce a ne mimo obrazovku. */
        max-height: calc(100vh - var(--rl-topbar-h, 60px) - 48px);
        overflow-y: auto;
    }

    .rl-page--privacy .pv-toc--mobile {
        display: none;
    }
}

/* Popisek a hodnota vedle sebe až tam, kde na to je místo; níž pod sebou. */
@media (min-width: 560px) {
    .rl-page--privacy .pv-defs--ident > div {
        display: grid;
        grid-template-columns: max-content minmax(0, 1fr);
        gap: 4px 16px;
        align-items: baseline;
    }

    .rl-page--privacy .pv-defs--ident dt {
        margin-bottom: 0;
    }
}

/* ─── Tisk ─────────────────────────────────────────────────── */

/* Právní dokument se tiskne a zakládá — obsah, karty ani stíny na papíře nic nepřinesou. */
@media print {
    .rl-page--privacy .pv-toc,
    .rl-page--privacy .pv-back,
    .rl-page--privacy .pv-meta__item--link {
        display: none;
    }

    /* Pruh se skrýt nesmí, je v něm h1 — stačí sundat barevný nádech. */
    .rl-page--privacy .pv-band {
        background: none;
    }

    .rl-page--privacy .pv-doc {
        padding: 0;
        border: 0;
        box-shadow: none;
        color: #000;
        font-size: 11pt;
    }

    .rl-page--privacy .pv-sec {
        break-inside: avoid;
    }

    .rl-page--privacy .pv-defs > div,
    .rl-page--privacy .pv-contact,
    .rl-page--privacy .pv-note {
        background: transparent;
        break-inside: avoid;
    }
}


/* ═══════════════════════════════════════════════════════════
   Stavové stránky toku hesla a odhlášení (.rl-page--login)

   /lostpassword byl předělaný, ale navazující stránky („odkaz odeslán“,
   „e-mail nenalezen“, „heslo obnoveno“, chyby) i /logout zůstávaly na
   mrtvých bootstrapích třídách — uživatel odeslal formulář a přistál na
   holém textu. Používají tu samou kartu jako přihlášení, jen bez formuláře.
   ═══════════════════════════════════════════════════════════ */

.rl-page--login .rl-login__card--status {
    text-align: center;
}

.rl-page--login .rl-login__card--status .rl-login__head {
    margin-bottom: clamp(22px, 3vw, 30px);
}

/* Zelená a červená varianta odznaku — barva nese stav ještě dřív,
   než uživatel přečte nadpis. */
.rl-page--login .rl-login__badge--ok {
    background: #DCFCE7;
    color: #15803D;
}

.rl-page--login .rl-login__badge--error {
    background: #FEE2E2;
    color: #B91C1C;
}

.rl-page--login .rl-login__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

/* Tlačítko je odkaz, ne <button> — .rl-login__submit dává jen šířku,
   zbytek geometrie nese .rl-btn. */
.rl-page--login .rl-login__actions .rl-login__submit {
    width: 100%;
}

.rl-page--login .rl-login__card--status .rl-login__secure {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--rl-border);
}

/**
 * Svislý rytmus na mobilu (tester 2026-08-16).
 *
 * Odsazení sekcí je psané pro desktop: `clamp()` má spodní hranici 48–56 px, takže
 * mezi dvěma sousedními bloky zůstávalo na úzkém displeji přes 110 px prázdna a
 * stránka působila roztrhaně. Snižují se jen dolní hranice tokenů, takže od tabletu
 * výš zůstává vzhled beze změny.
 *
 * Musí to být na konci souboru: dřívější media query na .rl-page__head by jinak
 * se stejnou specificitou vyhrála.
 */
@media (max-width: 600px) {
    .rl-page {
        --rlp-pad: 32px;
    }

    .rl-page__head {
        padding-bottom: 24px;
    }

    .rl-page--about {
        --ab-sec: 40px;
    }

    .rl-page--about .ab-mission {
        padding-top: 28px;
    }
}