/* ============================================================================
   ai-profile.css — podstránka titána /ai/{code}
   ----------------------------------------------------------------------------
   Načítá se JEN na téhle stránce (`$pageCss` v controlleru → `layouts/main.php`),
   a to AŽ ZA `site.css`, takže při stejné specificitě vyhrává. Na tom stojí
   přebíjení `.hero` — nepřesouvat výš.

   Pravidla, která tu platí (viz skill `web-css-konvence`):
     • žádné `!important` — specificita se řeší pořadím a rodičovskou třídou,
     • barvy, rozestupy a rádiusy VŽDY z tokenů (`tokens.css`), nikdy natvrdo,
     • ikona vedle textu = `inline-flex` + `align-items:center` + `gap`,
       ikona `display:block`, pevná velikost, `flex:none`,
     • rytmus textu dělá jediné pravidlo `.tp-prose > * + *`; odstavcům se nuluje
       jen SPODNÍ okraj (`margin: 0` by to pravidlo tiše přebilo),
     • každá třída, která nastavuje `display`, má i variantu `[hidden]` —
       atribut `hidden` je jen UA `display:none` s nejnižší specificitou.

   `--ai` (barva titána) přichází z databáze jako custom property na kořeni sekce.
   Je to vazba na data, ne vzhled — stejně to dělá `titan_card.php` i `hero_lineup.php`.
   ========================================================================== */

.tp-hero,
.tp-body,
.tp-preds,
.tp-sousedi {
    --tp-ai-soft:  color-mix(in srgb, var(--ai) 14%, transparent);
    --tp-ai-line:  color-mix(in srgb, var(--ai) 42%, transparent);
    --tp-ai-glow:  color-mix(in srgb, var(--ai) 45%, transparent);
    --tp-ai-text:  color-mix(in srgb, var(--ai) 78%, #ffffff);
}

/* ===========================================================================
   1) HERO
   ========================================================================= */

.tp-hero {
    position: relative;
    overflow: hidden;
    padding: calc(var(--header-h) + var(--sp-8)) 0 var(--sp-7);
    isolation: isolate;
}
.tp-hero[hidden] { display: none; }

.tp-hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden;
    background: linear-gradient(168deg, #0a0a1e 0%, #150d33 46%, color-mix(in srgb, var(--ai) 22%, #160f3e) 100%); }

/* Světelná koule za titánem. `filter: blur` na velké ploše je drahé, proto
   raději měkký radiální přechod — vizuálně totéž, bez překreslování při scrollu. */
.tp-orb {
    position: absolute; top: -22%; right: -6%;
    width: min(760px, 68vw); aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%,
        color-mix(in srgb, var(--ai) 52%, transparent) 0%,
        color-mix(in srgb, var(--ai) 16%, transparent) 42%,
        transparent 68%);
    animation: tp-dech 9s ease-in-out infinite;
}

/* Technická mřížka — dva prokládané přechody, žádný obrázek navíc. */
.tp-mesh {
    position: absolute; inset: 0;
    background-image:
        repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 82px),
        repeating-linear-gradient(0deg,  rgba(255,255,255,.035) 0 1px, transparent 1px 82px);
    mask-image: radial-gradient(120% 90% at 65% 12%, #000 12%, transparent 72%);
    -webkit-mask-image: radial-gradient(120% 90% at 65% 12%, #000 12%, transparent 72%);
}

/* Jemný pruh světla, který jednou za čas přejede plochu. */
.tp-scan {
    position: absolute; left: 0; right: 0; height: 240px; top: -240px;
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--ai) 10%, transparent), transparent);
    animation: tp-scan 11s linear infinite;
}

.tp-hero-in {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
    align-items: center;
    gap: var(--sp-6);
    min-height: 520px;
}
.tp-hero-in[hidden] { display: none; }

.tp-hero-txt { position: relative; z-index: 2; }
.tp-eyebrow  { display: block; margin-bottom: var(--sp-4); color: var(--tp-ai-text); }

.tp-arch {
    display: inline-block;
    font-family: var(--font-head); font-weight: 900;
    text-transform: uppercase; letter-spacing: .1em; font-size: .74rem; line-height: 1;
    padding: 7px 13px; border-radius: var(--r-pill);
    background: var(--ai); color: #0a0a16;
    box-shadow: 0 0 26px var(--tp-ai-glow);
}
.tp-arch[hidden] { display: none; }

/* ⚠️ Anton má JEDEN řez — nikdy netučnit, prohlížeč by udělal syntetický bold
   a písmo by se zalilo. `font-synthesis:none` je pojistka. */
.tp-name {
    font-size: clamp(2.6rem, 7vw, 5.4rem);
    font-weight: 400;
    font-synthesis: none;
    margin: var(--sp-3) 0 var(--sp-2);
    text-shadow: 0 0 46px var(--tp-ai-glow);
}

.tp-who { font-family: var(--font-head); font-weight: 700; font-size: 1rem; color: var(--text-dim); margin-bottom: 0; }
.tp-who strong { color: var(--text); }
.tp-sep { color: var(--text-mute); padding: 0 4px; }

/* ⚠️ `--sp-5` (24 px), ne `em`: eyebrow má drobné písmo, takže `em` z něj vyjde
   8 px a háčky nadpisu do popisku pořád zasahují (naměřeno 20. 8.). */
.tp-mission { max-width: 46ch; margin-top: var(--sp-5); }

.tp-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); }
.tp-chips[hidden] { display: none; }

.tp-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: var(--r-pill);
    background: rgba(255,255,255,.05); border: 1px solid var(--border);
    font-size: .82rem; color: var(--text-dim); line-height: 1;
}
.tp-chip[hidden] { display: none; }
.tp-chip svg { display: block; width: 15px; height: 15px; flex: none; color: var(--tp-ai-text); }
.tp-chip b { color: var(--text); font-weight: 700; }
.tp-chip-ai { border-color: var(--tp-ai-line); background: var(--tp-ai-soft); }

.tp-hero-cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.tp-hero-cta[hidden] { display: none; }
.tp-hero-cta .btn svg { width: 16px; height: 16px; }

/* --- postava --- */

.tp-hero-fig {
    position: relative;
    display: flex; align-items: flex-end; justify-content: center;
    min-height: 520px;
}
.tp-hero-fig[hidden] { display: none; }

/* 🔴 Zdrojový výřez je uříznutý v půlce stehen (tak vznikl), takže postava
   končí rovnou vodorovnou čárou. Zakrývá se PŘEKRYVEM, ne maskou:
   `mask-image` na tom obrázku sice v prohlížeči drží, ale při pořizování
   snímku se maskovaná vrstva NEVYKRESLILA VŮBEC (naměřeno 3. 9. — obrázek
   měl naturalWidth 760, opacity 1, a přesto na snímku nebyl). Překryv je
   obyčejný prvek, u kterého k tomu dojít nemůže. */
.tp-hero-fig::after {
    content: ""; position: absolute; z-index: 3; pointer-events: none;
    left: 0; right: 0; bottom: 0; height: 22%;
    background: linear-gradient(180deg, transparent,
        color-mix(in srgb, var(--ai) 18%, #161038) 92%);
}

.tp-cut {
    position: relative; z-index: 2;
    display: block;
    width: 100%; max-width: 460px; height: auto;
    filter: drop-shadow(0 24px 60px rgba(0,0,0,.6))
            drop-shadow(0 0 42px var(--tp-ai-glow));
    animation: tp-vznos 7s ease-in-out infinite;
    /* Parallax posun dopisuje JS do `--tp-par`; bez JS je 0 a nic se neděje. */
    transform: translate3d(0, var(--tp-par, 0px), 0);
}

/* Rotující prstenec za postavou — čistě CSS, žádný obrázek. */
.tp-ring {
    position: absolute; z-index: 1;
    bottom: 6%; left: 50%;
    width: min(430px, 74%); aspect-ratio: 1;
    translate: -50% 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        transparent 0deg,
        color-mix(in srgb, var(--ai) 62%, transparent) 42deg,
        transparent 118deg,
        color-mix(in srgb, var(--ai) 28%, transparent) 210deg,
        transparent 300deg);
    mask-image: radial-gradient(circle, transparent 61%, #000 63%, #000 70%, transparent 72%);
    -webkit-mask-image: radial-gradient(circle, transparent 61%, #000 63%, #000 70%, transparent 72%);
    animation: tp-rot 24s linear infinite;
}

.tp-halo {
    position: absolute; z-index: 0;
    bottom: 2%; left: 50%; translate: -50% 0;
    width: min(520px, 88%); aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, var(--tp-ai-glow) 0%, transparent 62%);
    animation: tp-dech 6s ease-in-out infinite;
}

/* Heslo titána jako obrovský duch za postavou. `catchphrase` je krátké slovo
   (FASTER, EUROPE…) — delší text by přetekl, proto `white-space:nowrap` + ořez. */
.tp-catch {
    position: absolute; z-index: 0;
    top: 12%; left: 50%; translate: -50% 0;
    font-family: var(--font-display); font-weight: 400; font-synthesis: none;
    font-size: clamp(3rem, 9vw, 7rem);
    letter-spacing: .04em; white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 1px color-mix(in srgb, var(--ai) 34%, transparent);
    opacity: .55;
    pointer-events: none;
}

.tp-logo {
    position: absolute; z-index: 3; right: 4%; top: 8%;
    display: flex; align-items: center; justify-content: center;
    width: 54px; height: 54px; border-radius: 16px;
    background: rgba(10,10,26,.72); border: 1px solid var(--tp-ai-line);
    color: var(--ai);
    box-shadow: 0 0 28px var(--tp-ai-glow);
    backdrop-filter: blur(6px);
}
.tp-logo svg { display: block; width: 28px; height: 28px; }

/* Problikávání tvář ↔ helma. ⚠️ Je to ŘEZ, ne prolnutí: s plynulým přechodem
   se snímek trefí do mezistavu a obě fotky jsou vidět přes sebe jako duch
   (naměřeno 26. 8. na nástupu na hlavní straně). */
.tp-flip {
    position: absolute; z-index: 4;
    right: 2%; bottom: 8%;
    width: 132px; aspect-ratio: 2/3;
    border-radius: var(--r-md); overflow: hidden;
    border: 1px solid var(--tp-ai-line);
    box-shadow: 0 12px 34px rgba(0,0,0,.55), 0 0 24px var(--tp-ai-glow);
}
.tp-flip[hidden] { display: none; }
.tp-flip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.tp-flip-b { opacity: 0; transition: opacity 90ms steps(2, end); }
.tp-blik.je-helma .tp-flip-b { opacity: 1; }

/* --- pás faktů pod hero --- */

.tp-stats {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3);
    margin-top: var(--sp-7);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--border);
}
.tp-stats[hidden] { display: none; }

.tp-stat { display: flex; flex-direction: column; gap: 4px; }
.tp-stat[hidden] { display: none; }
.tp-stat .v {
    font-family: var(--font-display); font-weight: 400; font-synthesis: none;
    font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1;
    color: var(--tp-ai-text);
}
.tp-stat .l { font-size: .74rem; text-transform: uppercase; letter-spacing: .09em; color: var(--text-mute); }

/* ===========================================================================
   2) TĚLO — hlavní sloupec + osa modelů vpravo
   ========================================================================= */

.tp-body { padding: var(--sp-8) 0 var(--sp-6); }
.tp-body[hidden] { display: none; }

.tp-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
    align-items: start;
    gap: var(--sp-7);
}
.tp-grid[hidden] { display: none; }

.tp-main { min-width: 0; }
.tp-block + .tp-block { margin-top: var(--sp-7); }
.tp-block[hidden] { display: none; }

.tp-h2 { font-family: var(--font-display); font-weight: 400; font-synthesis: none;
    font-size: clamp(1.7rem, 3.6vw, 2.5rem); text-transform: uppercase;
    /* ⚠️ 24 px, ne `em` — háčky a čárky lezou nad content box a do drobného
       eyebrow nad sebou zasahují i tehdy, když se boxy nepřekrývají. */
    margin: var(--sp-2) 0 var(--sp-5); }
.tp-h3 { font-family: var(--font-head); font-weight: 800; font-size: 1.1rem;
    text-transform: uppercase; letter-spacing: .05em; margin-bottom: var(--sp-4);
    color: var(--text-dim); }

/* Rytmus textu: JEDINÉ pravidlo. Odstavcům se nuluje jen spodní okraj —
   `margin: 0` má vyšší specificitu a tohle pravidlo by tiše vyplo. */
.tp-prose > * + * { margin-top: var(--sp-5); }
.tp-prose > :first-child { margin-top: 0; }
.tp-prose p { margin-bottom: 0; font-size: 1.02rem; line-height: 1.72; color: var(--text-dim); max-width: 68ch; }
.tp-prose p:first-of-type { font-size: 1.12rem; color: var(--text); }

/* Fakta */
.tp-fakta { display: grid; gap: var(--sp-3); margin: 0; }
.tp-fakta[hidden] { display: none; }
.tp-fakt {
    display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: var(--sp-4);
    align-items: baseline;
    padding: var(--sp-4);
    background: var(--surface); border: 1px solid var(--border);
    border-left: 3px solid var(--tp-ai-line);
    border-radius: var(--r-md);
    transition: border-color var(--t), transform var(--t);
}
.tp-fakt[hidden] { display: none; }
.tp-fakt:hover { border-color: var(--border-strong); border-left-color: var(--ai); transform: translateX(3px); }
.tp-fakt dt {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--font-head); font-weight: 700; font-size: .78rem;
    text-transform: uppercase; letter-spacing: .07em; color: var(--text-mute);
}
.tp-fakt-ic { display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--tp-ai-text); }
.tp-fakt-ic svg { display: block; width: 16px; height: 16px; }
.tp-fakt dd { margin: 0; font-size: .96rem; color: var(--text); line-height: 1.5; }

/* Odkazy ke zdrojům */
.tp-odkazy { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.tp-odkazy[hidden] { display: none; }
.tp-odkaz {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 10px 16px; border-radius: var(--r-pill);
    background: rgba(255,255,255,.04); border: 1px solid var(--border);
    font-family: var(--font-head); font-weight: 700; font-size: .85rem; color: var(--text-dim);
    transition: color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.tp-odkaz[hidden] { display: none; }
.tp-odkaz svg { display: block; width: 16px; height: 16px; flex: none; }
.tp-odkaz:hover { color: var(--text); border-color: var(--tp-ai-line); transform: translateY(-2px); }

/* ===========================================================================
   3) GRAFY
   ========================================================================= */

.tp-grafy { display: grid; gap: var(--sp-5); }
.tp-grafy[hidden] { display: none; }

.tp-chart-head { display: flex; flex-direction: column; gap: 3px; margin-bottom: var(--sp-4); }
.tp-chart-head[hidden] { display: none; }
.tp-chart-head strong { font-family: var(--font-head); font-size: 1rem; }
.tp-chart-head .muted { font-size: .82rem; line-height: 1.45; }

.chart-wrap-sm { height: 220px; }
.tp-chart-note { margin: var(--sp-4) 0 0; font-size: .76rem; color: var(--text-mute); line-height: 1.5; }

/* Srovnání celé rady přes celou šířku — stojí za mřížkou, ne v levém sloupci. */
.tp-graf-siroky { margin-top: var(--sp-7); }
.tp-graf-siroky[hidden] { display: none; }
.tp-graf-siroky .chart-wrap { height: 420px; }

/* ===========================================================================
   4) ČASOVÁ OSA MODELŮ (pravý sloupec)
   ========================================================================= */

.tp-side { min-width: 0; }
.tp-side[hidden] { display: none; }
.tp-side-head { margin-bottom: var(--sp-5); }
.tp-side-title { font-family: var(--font-head); font-weight: 900; font-size: 1.25rem; line-height: 1.25;
    margin: 6px 0 var(--sp-3); }
.tp-side-note { font-size: .78rem; color: var(--text-mute); line-height: 1.55; margin-bottom: 0; }

.tp-tl { position: relative; list-style: none; margin: 0; padding: 0 0 0 26px; }
.tp-tl[hidden] { display: none; }

/* Svislice osy: silná nahoře (nejnovější), do minulosti se ztrácí.
   ⚠️ Spodní zarážka je `--border-strong`, ne `--border`: s `--border`
      (8 % bílé) linka na tmavém podkladu prakticky zmizela a osa vypadala
      jako sloupec karet bez souvislosti. Ověřeno na snímku, ne v CSS. */
.tp-tl::before {
    content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px;
    background: linear-gradient(180deg,
        var(--ai) 0%,
        var(--tp-ai-line) 30%,
        color-mix(in srgb, var(--ai) 18%, transparent) 70%,
        var(--border-strong) 100%);
    border-radius: 2px;
}

.tp-tl-item { position: relative; padding-bottom: var(--sp-4); }
.tp-tl-item[hidden] { display: none; }

.tp-tl-dot {
    position: absolute; left: -26px; top: 16px;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--bg-2); border: 2px solid var(--tp-ai-line);
    transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.tp-tl-item.je-aktualni .tp-tl-dot {
    background: var(--ai); border-color: var(--ai);
    box-shadow: 0 0 0 5px var(--tp-ai-soft), 0 0 20px var(--tp-ai-glow);
}
.tp-tl-item:hover .tp-tl-dot { border-color: var(--ai); transform: scale(1.18); }

.tp-tl-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-md); padding: var(--sp-4);
    transition: border-color var(--t), transform var(--t), background var(--t);
}
.tp-tl-card[hidden] { display: none; }
.tp-tl-item:hover .tp-tl-card {
    border-color: var(--tp-ai-line); transform: translateX(3px);
    background: color-mix(in srgb, var(--ai) 5%, var(--surface));
}
.tp-tl-item.je-aktualni .tp-tl-card {
    border-color: var(--tp-ai-line);
    background: color-mix(in srgb, var(--ai) 8%, var(--surface));
    box-shadow: 0 10px 34px rgba(0,0,0,.35);
}

.tp-tl-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.tp-tl-top[hidden] { display: none; }
.tp-tl-date { font-family: var(--font-head); font-weight: 700; font-size: .74rem;
    text-transform: uppercase; letter-spacing: .07em; color: var(--text-mute); }

.tp-tl-badge {
    display: inline-flex; align-items: center; gap: 5px; line-height: 1;
    padding: 4px 9px; border-radius: var(--r-pill);
    font-family: var(--font-head); font-weight: 800; font-size: .64rem;
    text-transform: uppercase; letter-spacing: .07em;
}
.tp-tl-badge[hidden] { display: none; }
.tp-tl-badge-now { background: var(--ai); color: #0a0a16; }

.tp-tl-name { font-family: var(--font-head); font-weight: 900; font-size: 1.02rem;
    margin: 7px 0 0; color: var(--text); }
.tp-tl-sum { font-size: .86rem; line-height: 1.55; color: var(--text-dim); margin: 8px 0 0; }

/* Odznak vlastních dat — „tenhle model nám doopravdy odpověděl". */
.tp-tl-rada {
    display: flex; align-items: flex-start; gap: 8px;
    margin: var(--sp-3) 0 0; padding: 8px 10px;
    background: var(--tp-ai-soft); border-radius: var(--r-sm);
    font-size: .76rem; line-height: 1.5; color: var(--text-dim);
}
.tp-tl-rada[hidden] { display: none; }
/* ⚠️ Víceřádkový text: ikona dostane výšku řádku, ne `margin-top`. Dorovnání
   odhadnutou konstantou sedí jen při té velikosti písma, u které vzniklo. */
.tp-tl-rada svg { display: block; width: 13px; height: 1.5em; flex: none; color: var(--tp-ai-text); }
.tp-tl-rada a { color: var(--tp-ai-text); text-decoration: underline; text-underline-offset: 2px; }

.tp-tl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: var(--sp-3); }
.tp-tl-meta[hidden] { display: none; }
.tp-tl-meta:empty { display: none; }

.tp-tl-chip {
    display: inline-flex; align-items: center; line-height: 1;
    padding: 5px 9px; border-radius: var(--r-sm);
    background: rgba(255,255,255,.05); border: 1px solid var(--border);
    font-size: .7rem; font-weight: 700; color: var(--text-dim);
}
.tp-tl-chip[hidden] { display: none; }

.tp-tl-src {
    display: inline-flex; align-items: center; gap: 5px; line-height: 1;
    margin-left: auto;
    font-size: .7rem; font-weight: 700; color: var(--text-mute);
    transition: color var(--t-fast);
}
.tp-tl-src[hidden] { display: none; }
.tp-tl-src svg { display: block; width: 12px; height: 12px; flex: none; }
.tp-tl-src:hover { color: var(--tp-ai-text); }

/* Postupné nabíhání položek. ⚠️ Skrývá se JEN pod třídou `js-reveal`, kterou
   nasadí JavaScript. Bez JS (nebo když spadne) je osa normálně vidět —
   obsah nikdy nesmí záviset na tom, jestli doběhl skript. */
.tp-tl.js-reveal .tp-tl-item { opacity: 0; transform: translateY(16px);
    transition: opacity 520ms cubic-bezier(.4,0,.2,1), transform 520ms cubic-bezier(.4,0,.2,1); }
.tp-tl.js-reveal .tp-tl-item.je-videt { opacity: 1; transform: none; }
.tp-tl.js-reveal .tp-tl-item:nth-child(1)  { transition-delay: 0ms; }
.tp-tl.js-reveal .tp-tl-item:nth-child(2)  { transition-delay: 55ms; }
.tp-tl.js-reveal .tp-tl-item:nth-child(3)  { transition-delay: 110ms; }
.tp-tl.js-reveal .tp-tl-item:nth-child(4)  { transition-delay: 150ms; }
.tp-tl.js-reveal .tp-tl-item:nth-child(5)  { transition-delay: 180ms; }
.tp-tl.js-reveal .tp-tl-item:nth-child(n+6) { transition-delay: 200ms; }

/* ===========================================================================
   5) PREDIKCE A PRŮCHOD RADOU
   ========================================================================= */

.tp-preds { border-top: 1px solid var(--border); }
.tp-preds[hidden] { display: none; }
/* Zveřejněná otázka bývá jedna. Ve dvousloupcové mřížce po ní zbyla prázdná
   polovina, takže se jediná karta zúží a nechá kolem sebe vzduch záměrně. */
.tp-preds .grid-2 > .card:only-child { max-width: 680px; }
.tp-pred-unit { font-size: .78rem; margin-bottom: 4px; }
.tp-pred-q { font-size: 1.02rem; margin-bottom: var(--sp-3); }
.tp-pred-h { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; }
.tp-pred-sum { font-size: .88rem; margin: var(--sp-3) 0; }
.tp-pred-foot { border-top: 1px solid var(--border); padding-top: var(--sp-3); margin-top: var(--sp-3); }
.tp-pred-foot[hidden] { display: none; }
.tp-pred-ask { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }

.tp-prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.tp-prevnext[hidden] { display: none; }

.tp-pn {
    display: flex; align-items: center; gap: var(--sp-4);
    padding: var(--sp-5);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg);
    transition: border-color var(--t), transform var(--t), background var(--t);
}
.tp-pn[hidden] { display: none; }
.tp-pn svg { display: block; width: 22px; height: 22px; flex: none; color: var(--ai); }
.tp-pn span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tp-pn small { font-size: .7rem; text-transform: uppercase; letter-spacing: .09em; color: var(--text-mute); }
.tp-pn b { font-family: var(--font-head); font-weight: 900; font-size: 1.1rem; color: var(--text); }
.tp-pn:hover { border-color: color-mix(in srgb, var(--ai) 45%, transparent);
    background: color-mix(in srgb, var(--ai) 7%, var(--surface)); transform: translateY(-3px); }
.tp-pn-next { justify-content: flex-end; text-align: right; }

/* ===========================================================================
   6) ANIMACE
   ========================================================================= */

@keyframes tp-rot   { to { rotate: 360deg; } }
@keyframes tp-dech  { 0%, 100% { opacity: .65; scale: 1; } 50% { opacity: 1; scale: 1.05; } }
@keyframes tp-vznos { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
@keyframes tp-scan  { 0% { top: -240px; } 100% { top: 120%; } }

/* Kdo si vypnul pohyb v systému, nedostane ho ani tady. Obsah zůstává celý. */
@media (prefers-reduced-motion: reduce) {
    .tp-orb, .tp-scan, .tp-ring, .tp-halo, .tp-cut { animation: none; }
    .tp-cut { transform: none; }
    .tp-tl.js-reveal .tp-tl-item { opacity: 1; transform: none; transition: none; }
    .tp-flip-b { transition: none; }
}

/* ===========================================================================
   7) RESPONZIVITA
   ⚠️ Mediální bloky patří ZA základní pravidla komponent — se stejnou
      specificitou vyhrává to, co je v souboru níž.
   ========================================================================= */

@media (max-width: 1180px) {
    .tp-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: var(--sp-6); }
    .tp-fakt { grid-template-columns: 160px minmax(0, 1fr); }
}

@media (max-width: 1040px) {
    /* Osa spadne pod obsah — proto je v HTML až za hlavním sloupcem. */
    .tp-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
    .tp-hero-in { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .tp-hero-fig { min-height: 0; order: -1; margin-bottom: var(--sp-5); }
    .tp-cut { max-width: 320px; }
    .tp-catch { top: 4%; font-size: clamp(2.4rem, 12vw, 4.4rem); }
    .tp-flip { width: 104px; right: 6%; }
}

@media (max-width: 780px) {
    .tp-stats { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
    .tp-prevnext { grid-template-columns: minmax(0, 1fr); }
    .tp-pn-next { justify-content: flex-start; text-align: left; flex-direction: row-reverse; }
}

@media (max-width: 560px) {
    .tp-hero { padding-top: calc(var(--header-h) + var(--sp-5)); }
    .tp-fakt { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
    .tp-tl { padding-left: 22px; }
    .tp-tl-dot { left: -22px; }
    .tp-flip { display: none; }
    .tp-tl-src { margin-left: 0; }
}