/* ============================================================================
   PAGE-ABOUT.CSS — /kdo-jsme
   ----------------------------------------------------------------------------
   Stránka je o dvou lidech a jejich kanálech, ne o firmě. Sází ji čtyři bloky:
   karta streamera, rozcestník, blok o odpovědném hraní a FAQ s kontaktem.

   Co drží někdo jiný a co se tady proto neopisuje:
     .jl-pagehead      záhlaví stránky            → core/shared.css
     .jl-band          pás sekce (o stupeň světlejší plocha) → core/shared.css
     .jl-section-label hlavička sekce             → core/shared.css
     .ed-faq           harmonika dotazů           → components/editorial.css
     .jl-btn--primary  zelené tlačítko            → core/shared.css
     section padding   svislý rytmus sekcí        → components/karty.css

   Odtud zmizelo celé rozvržení předchozí verze (.ab-wrap, .ab-block, .ab-intro,
   .ab-h1, .ab-purpose, .ab-method, .ab-resp, .ab-contact) i dvě obcházky
   kaskády, které k němu patřily. Bloky jsou teď <section> s jedním
   .jl-container, takže `display:flex` z base.css a `section { padding }`
   z karty.css sedí rovnou a nic se nepřebíjí.

   Pravidla, která tenhle soubor drží:
     1  rádius z tokenů: --r-card na kartě, --r-btn na mřížce, 50 % jen u avataru
     2  3px hrana nese STAV, ne identitu: neutrální --rail-2, živě --live,
        blok pomoci --warn
     3  žebřík ploch: pás --band → karta --panel → buňka mřížky --panel
     4  visutý sloupec 2.6ch pro čísla, ikony i odrážky
     8  pohyb je odpověď: zdvih karty a zesílený stín

   BARVA NESE STAV, NE OZDOBU. pages/about.php posílá do karet inline
   style="--ab-odstin:#c084fc" (fialová, azurová, modrá, růžová, mátová).
   Inline vlastnost se ze stylopisu nepřebije, tak ji tenhle soubor prostě
   NEČTE — hrany, prstenec avataru i štítky berou --rail-2 a barvu dostanou
   jen tehdy, když nesou stav. Sedm odstínů mimo paletu tím ze stránky mizí,
   aniž by se sahalo na PHP.

   CO JE ÚDAJ, TO JE STROJOPIS. Štítky, adresy kanálů, počty diváků, mřížka
   faktů i telefon na poradnu jedou var(--font-code); jména a nadpisy Archivo.

   Odznak vysílání je sdílená .jl-live z core/shared.css. Vlastní .ab-live
   s jinou tečkou i jiným tepem odsud odešla — dvě varianty téže komponenty
   znamenají dvě různá tvrzení o tomtéž stavu.
   ============================================================================ */

.about-page {
    display: block;
    width: 100%;
}

/* ============================================================================
   0. ZÁHLAVÍ, text a fotka vedle sebe
   ----------------------------------------------------------------------------
   Nestejné sloupce. Stránka pod tím jede dvojice karet, mřížku a výpis, takže
   souměrné záhlaví by z celku udělalo jeden dlouhý sloupec obdélníků.
   Fotka nenese popisek ani štítek: je to prostředí, ne ilustrace k větě.
   ============================================================================ */
.about-page .ab-top {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: end;
    column-gap: 40px;
    margin-bottom: 26px;
}

/* Uvnitř mřížky si záhlaví nebere vlastní spodní linku ani odsazení. */
.about-page .ab-top-text {
    max-width: none;
    margin: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.ab-top-shot {
    overflow: hidden;
    background: var(--panel);
    border: 1px solid var(--rail);
    border-radius: var(--r-card);
}

.ab-top-shot img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

@media (max-width: 900px) {
    .about-page .ab-top {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 20px;
    }
    /* Na mobilu čte divák nejdřív, o čem stránka je; fotka jde pod text. */
    .ab-top-shot { order: 2; }
}

/* Odkaz „rozvrh streamů" v hlavičce sekce. Je to sazba, ne tlačítko. */
.ab-see-all {
    margin-left: auto;
    font-family: var(--font-code);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--paper-3);
    transition: color var(--t-base);
}

.ab-see-all:hover,
.ab-see-all:focus-visible { color: var(--go); }


/* ============================================================================
   1. KDO VYSÍLÁ — karta streamera
   ----------------------------------------------------------------------------
   Sazba je stejná jako u referenční řádkové karty nabídky (.bp-row,
   core/shared.css): 3px značková linka nahoře, plocha --panel, vlásečnice,
   rádius --r-card a černý stín. Největší prvek je to, kvůli čemu na kartu
   koukáš — u nabídky částka, tady jméno.

   Živý stav dopisuje prohlížeč (script.js → [data-kick-channel] dostane
   .is-live), takže se karta renderuje offline a nic na serveru se netváří,
   že o streamu ví.
   ============================================================================ */
.ab-duo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 18px;
}

.ab-streamer {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 26px 24px 24px;
    background: var(--panel);
    border: 1px solid var(--rail);
    border-radius: var(--r-card);
    box-shadow: var(--lift);
    transition: transform 0.2s ease, background-color 0.2s ease,
                border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Linka na horní hraně. Neutrální, dokud karta nenese stav. */
.ab-streamer::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--rail-2);
    border-radius: var(--r-card) var(--r-card) 0 0;
}

/* Zdvih při najetí: stín zesílí a rámeček zesvětlí (pravidlo 8). */
.ab-streamer:hover,
.ab-streamer:focus-within {
    transform: translateY(-2px);
    background: var(--panel-hi);
    border-color: var(--rail-2);
    box-shadow: var(--lift-hi);
}

/* Živé vysílání je jediný stav, který kartu obarví — červená a nic jiného. */
.ab-streamer.is-live::before { background: var(--live); }
.ab-streamer.is-live .ab-streamer-flag { color: var(--live); }
.ab-streamer.is-live .ab-avatar { border-color: var(--live); }

/* Odznak je první vysázený řádek, ne stužka přes roh. */
.ab-streamer-flag {
    order: -1;
    margin: 0;
    font-family: var(--font-code);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--paper-3);
}

.ab-streamer-head {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

/* Avatar je doopravdy kruh, takže si 50 % nechá (pravidlo 1). */
.ab-avatar {
    position: relative;
    flex: none;
    display: block;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--raise);
    border: 2px solid var(--rail-2);
}

.ab-avatar-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Fallback písmeno. Inline style drží display:none, JS ho při chybě obrázku
   přepne na flex, proto se tu nastavuje jen zarovnání a typografie. */
.ab-avatar-letter {
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1;
    color: var(--paper-2);
}

.ab-streamer-id {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* Jméno je na kartě to největší — kvůli němu na ni koukáš. */
.ab-streamer-name {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: var(--track-tight);
    text-transform: none;
    color: var(--paper);
}

/* Adresa kanálu je údaj — strojopis. */
.ab-streamer-handle {
    font-family: var(--font-code);
    font-size: 0.74rem;
    line-height: 1.4;
    letter-spacing: 0.01em;
    color: var(--paper-3);
    word-break: break-word;
}

/* Řádek stavu. Odznak vysílání je SDÍLENÁ .jl-live (core/shared.css) —
   vlastní varianta téhož tady měla jiný tvar, jinou tečku i jiný tep, takže
   se /kdo-jsme jako jediná stránka hlásila jinak než zbytek webu.
   Zůstává jen řádek kolem odznaku a počet diváků vedle něj. */
.ab-livewrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.9ch;
    margin: 0;
}

.ab-live-viewers {
    font-family: var(--font-code);
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--paper-2);
    font-variant-numeric: tabular-nums;
}

.ab-streamer-bio {
    margin: 0;
    max-width: 68ch;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--paper-2);
}

/* Mřížka faktů. Mezera 1 px nad barvou linky dělá vlasovou mřížku bez
   jediného borderu na buňce — týž idiom jako .nb-terms u karty nabídky,
   takže se fakta o streamerovi čtou stejně jako parametry nabídky. */
.ab-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    gap: 1px;
    margin: 0;
    background: var(--rail);
    overflow: hidden;
}

.ab-fact {
    padding: 9px 11px;
    background: var(--panel);
}

.ab-streamer:hover .ab-fact,
.ab-streamer:focus-within .ab-fact { background: var(--panel-hi); }

.ab-fact dt {
    font-family: var(--font-code);
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--paper-3);
    white-space: nowrap;
}

.ab-fact dd {
    margin: 3px 0 0;
    font-family: var(--font-code);
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--paper);
}

/* Akce sedí na spodní hraně, ať obě karty končí zároveň. */
.ab-streamer-act {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
    padding-top: 4px;
}

.ab-follow { gap: 0.8ch; }
.ab-follow svg { flex: none; }


/* ============================================================================
   2. CO SI TU VEZMEŠ, rozcestník na tři karty
   ----------------------------------------------------------------------------
   Krátký odkaz, který má nalevo od textu ikonu ve visutém sloupci 2.6ch
   (pravidlo 4). Stav nese levá hrana (pravidlo 2).

   Kontakt na konci stránky BÝVAL druhá mřížka téhle komponenty. Dvě stejná
   rozvržení na jedné stránce se čtou jako jedna sekce omylem vysázená dvakrát,
   takže je z kontaktu výpis .ab-contact níž, ne další karty.
   ============================================================================ */
/* Jeden sloupec, ne dvě stejně široké karty. Souměrnou dvojici na téhle
   stránce nese jedině „Kdo vysílá" (dva lidé, dvě karty); rozcestník je výpis
   řádků, takže se stránka po dvojici streamerů neopakuje potřetí.

   Řádek je tabulka: visutá ikona, cíl, věta, pobídka. Krajní sloupce jsou
   pevné, prostřední pruží. */
.ab-take-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    border-top: 1px solid var(--rail);
}

.ab-take-card {
    display: grid;
    grid-template-columns:
        var(--ed-hang, 2.6ch)
        minmax(0, 24ch)
        minmax(0, 1fr)
        auto;
    column-gap: 26px;
    align-items: baseline;
    padding: 20px 4px;
    border-bottom: 1px solid var(--rail);
    /* Levá hrana je neutrální --rail-2. Inline --ab-odstin z PHP se tu vědomě
       nečte, stejně jako u karty streamera: barva na webu nese stav, ne
       identitu dlaždice (viz hlavička souboru). */
    border-left: 3px solid var(--rail-2);
    padding-left: 18px;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.ab-take-card:hover,
.ab-take-card:focus-visible { background-color: var(--panel-hi); }

/* Ve visutém sloupci je ikona v odstínu karty. Pořadové „01 / 02 / 03" odsud
   odešlo: nic neznačilo (nejsou to kroky ani žebříček) a stejný sloupec
   v kontaktu níž nesl ikonu, takže se komponenta chovala dvakrát jinak. */
.ab-take-mark {
    align-self: start;
    margin-top: 0.15em;
    font-size: 0.9rem;
    /* Odstín karty nese jen její levá hrana. Druhá barevná věc v kartě by
       z odstínu udělala ozdobu místo rozlišovacího znaku. */
    color: var(--paper-3);
}

.ab-take-mark svg {
    width: 1.15em;
    height: 1.15em;
}

/* Cíl je jméno, ne údaj — Archivo, stejně jako jméno streamera nad ním. */
.ab-take-title {
    font-family: var(--font-display);
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--paper);
    overflow-wrap: anywhere;
}

.ab-take-text {
    font-size: 0.9rem;
    line-height: 1.62;
    color: var(--paper-2);
}

/* Pobídka je sazba, ne druhé zelené tlačítko — celý řádek je odkaz. */
.ab-take-cta {
    justify-self: end;
    white-space: nowrap;
    font-family: var(--font-code);
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--paper-3);
    transition: color var(--t-fast);
}

.ab-take-card:hover .ab-take-cta,
.ab-take-card:focus-visible .ab-take-cta { color: var(--paper); }

/* E-mailová adresa je údaj, ne štítek — strojopis zůstává, verzálky ne. */
.ab-take-cta--plain {
    font-size: 0.78rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--paper-2);
    word-break: break-word;
}

.ab-take-arw {
    display: inline-block;
    transition: transform 0.2s ease;
}

.ab-take-card:hover .ab-take-arw { transform: translateX(3px); }


/* ============================================================================
   3. HRAJ S HLAVOU
   ----------------------------------------------------------------------------
   Blok pomoci nese varovnou hranu, ne zelenou: zelená znamená „klikni sem"
   a tady se nikam neklikne kvůli akci webu.
   ============================================================================ */
.ab-care-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(17rem, 1fr);
    align-items: start;
    gap: 18px;
}

.ab-care-main,
.ab-help {
    padding: 24px 24px 24px 21px;
    background: var(--panel);
    border: 1px solid var(--rail);
    border-left: 3px solid var(--rail-2);
    border-radius: var(--r-card);
    box-shadow: var(--lift);
}

.ab-help { border-left-color: var(--warn); }

.ab-care-text {
    max-width: 68ch;
    margin: 0 0 16px;
    font-size: 0.98rem;
    line-height: 1.72;
    color: var(--paper-2);
}

/* Odrážka stojí ve visutém sloupci, ne v řádku textu (pravidlo 4). */
.ab-care-list {
    margin: 0;
    padding: 0;
    list-style: none;
    max-width: 68ch;
}

.ab-care-list li {
    display: grid;
    grid-template-columns: var(--ed-hang, 2.6ch) 1fr;
    column-gap: var(--ed-hang-gap, 0.9ch);
    align-items: baseline;
    margin-bottom: 9px;
    font-size: 0.94rem;
    line-height: 1.65;
    color: var(--paper-2);
}

.ab-care-list li:last-child { margin-bottom: 0; }

/* Odrážka je čtvereček, ne pomlčka. Znak „—" web v sazbě nepoužívá nikde, tak
   ho nemá ani jako značku seznamu; krátká vodorovná linka by od pomlčky nebyla
   k rozeznání, proto čtverec. */
.ab-care-list li::before {
    content: "";
    align-self: start;
    margin-top: 0.66em;   /* na střed prvního řádku, ne doprostřed celé položky */
    width: 5px;
    height: 5px;
    border-radius: 1px;
    background: var(--paper-3);
}

.ab-help-flag {
    margin: 0 0 10px;
    font-family: var(--font-code);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--warn);
}

.ab-help-title {
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1.25;
    text-transform: none;
    letter-spacing: 0;
    color: var(--paper);
}

.ab-help-text {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.62;
    color: var(--paper-2);
}

.ab-help-links {
    display: grid;
    gap: 10px;
    margin: 16px 0 14px;
    padding: 0;
    list-style: none;
}

.ab-help-links li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--rail);
}

.ab-help-links li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.ab-help-k {
    font-family: var(--font-code);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--paper-3);
}

/* Telefon i doména jsou údaj, ne nadpis — proto strojopis. */
.ab-help-links a {
    font-family: var(--font-code);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--paper);
    text-decoration: underline;
    text-decoration-color: var(--rail-2);
    text-underline-offset: 3px;
    transition: text-decoration-color 0.15s ease;
}

.ab-help-links a:hover,
.ab-help-links a:focus-visible { text-decoration-color: var(--warn); }

.ab-help-note {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--paper-3);
}


/* ============================================================================
   4. NA CO SE PTÁTE
   ----------------------------------------------------------------------------
   .ed-faq je sloupec o šířce čtení, tady jede přes celý pás.

   Dva stejně široké sloupce otázek odsud odešly. Byla to třetí souměrná
   dvojice na jedné stránce (po kartách streamerů a po rozcestníku), a v mřížce
   se navíc dvě otázky vedle sebe čtou jako dva nesouvisející sloupce textu.
   Rozbalovací seznam je od přírody jeden sloupec: otázka, pod ní odpověď.
   ============================================================================ */
.ab-faq-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    width: 100%;
    max-width: none;
}


/* ============================================================================
   5. KONTAKT, výpis dvou adres
   ----------------------------------------------------------------------------
   Ne třetí mřížka karet na jedné stránce. Kontakt je krátký seznam „kam
   a proč", takže se sází jako řádky výpisu: vlevo strojopisný klíč, vpravo
   adresa a jedna věta. Vlasová linka mezi řádky, žádné panely.
   ============================================================================ */
.ab-contact {
    margin: 22px 0 0;
    padding: 0;
    border-top: 1px solid var(--rail);
}

.ab-contact-row {
    display: grid;
    grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
    column-gap: 24px;
    padding: 16px 2px;
    border-bottom: 1px solid var(--rail);
}

.ab-contact-k {
    font-family: var(--font-code);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--paper-3);
    padding-top: 0.25em;
}

.ab-contact-v {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
    min-width: 0;
}

/* Adresa je údaj, tedy strojopis. */
.ab-contact-v a {
    font-family: var(--font-code);
    font-size: 0.94rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--paper);
    text-decoration: underline;
    text-decoration-color: var(--rail-2);
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
    transition: text-decoration-color 0.15s ease, color 0.15s ease;
}

.ab-contact-v a:hover,
.ab-contact-v a:focus-visible {
    color: var(--go);
    text-decoration-color: var(--go);
}

.ab-contact-note {
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--paper-2);
}

@media (max-width: 40rem) {
    .ab-contact-row {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 6px;
    }
    .ab-contact-k { padding-top: 0; }
}


/* ============================================================================
   POHYB SE VYPÍNÁ (pravidlo 8)
   ----------------------------------------------------------------------------
   Náběh při scrollu je zrušený v celém projektu, takže tady zbývá vypnout
   jen přechody, které si stránka pouští sama.
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
    .ab-streamer,
    .ab-take-card,
    .ab-take-arw,
    .ab-contact-v a,
    .ab-see-all { transition: none; }

    .ab-streamer:hover,
    .ab-streamer:focus-within,
    .ab-take-card:hover,
    .ab-take-card:focus-visible { transform: none; }

    .ab-take-card:hover .ab-take-arw { transform: none; }
}


/* ============================================================================
   RESPONZIVA
   ============================================================================ */
@media (max-width: 62rem) {
    .ab-care-grid { grid-template-columns: minmax(0, 1fr); }

    /* Čtyři sloupce řádku se pod 62rem nevejdou: ikona drží visutý sloupec
       přes celý řádek, vpravo se pod sebe skládá cíl, věta a pobídka. */
    .ab-take-card {
        grid-template-columns: var(--ed-hang, 2.6ch) minmax(0, 1fr);
        column-gap: var(--ed-hang-gap, 0.9ch);
        row-gap: 7px;
    }
    .ab-take-mark  { grid-column: 1; grid-row: 1 / span 3; }
    .ab-take-title,
    .ab-take-text  { grid-column: 2; }
    .ab-take-cta   { grid-column: 2; justify-self: start; }
}

@media (max-width: 40rem) {
    .ab-streamer { padding: 22px 20px 20px; }

    .ab-streamer-head { gap: 14px; }

    .ab-avatar { width: 62px; height: 62px; }

    .ab-avatar-letter { font-size: 1.5rem; }

    .ab-streamer-name { font-size: 1.4rem; }

    .ab-care-main,
    .ab-help { padding: 20px 20px 20px 17px; }

    /* .jl-btn má white-space: nowrap, takže by se na úzkém displeji rozjelo
       z karty ven. */
    .ab-follow { width: 100%; }
}