/* ==================================================================
   HUB (Topic Hub) — sdílené stránkové styly pro VŠECHNY huby.
   Terminal wayfinding (V2). Render: src/hub/HubPage.tsx.
   Tabule (.board) je defaultně plná navy; když má hub video,
   HubPage přidá .board__video + tint + scrim. Bez videa zůstává
   navy solid (fallback background je přímo na .board).
   ================================================================== */
    /* ============ V2 — TERMINAL WAYFINDING ============ */
    html { scroll-behavior: smooth; }

    :root { --cendre-text: #2e6b8c; } /* ztmavený cendre pro malé mono popisky na světlé */

    /* fokus viditelný všude, tyrkysově */
    a:focus-visible,
    button:focus-visible {
      outline: 3px solid var(--turquoise);
      outline-offset: 2px;
      border-radius: 4px;
    }
    .pill:focus-visible { outline-color: var(--navy); }

    .skip {
      position: absolute;
      left: 1rem;
      top: -3.5rem;
      z-index: 40;
      padding: 0.6rem 1.1rem;
      border-radius: 999px;
      background: var(--navy);
      color: #fff;
      font-weight: 600;
      font-size: 0.9rem;
      text-decoration: none;
      transition: top 0.15s ease;
    }
    .skip:focus { top: 1rem; }

    /* aktivní hub v liště je vidět */
    .nav a[aria-current="page"] {
      font-weight: 650;
      color: var(--navy);
      text-decoration: underline 2px var(--turquoise);
      text-underline-offset: 7px;
    }

    /* --- lišta nad tabulí: průhledná, splývá s flow polem; pod tabulí
       se vrací plný bílý ostrov (přepíná JS podle pozice tabule) --- */
    .nav {
      transition: transform 0.3s ease, background-color 0.25s ease,
        border-color 0.25s ease, box-shadow 0.25s ease;
    }
    .nav--clear {
      background: transparent;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      border-color: rgb(255 255 255 / 0.28);
      box-shadow: none;
    }
    .nav--clear a,
    .nav--clear .nav__topics-btn,
    .nav--clear .nav__more-btn { color: #fff; }
    .nav--clear a:hover,
    .nav--clear .nav__more-btn:hover { color: var(--mint); }
    .nav--clear a[aria-current="page"] { color: #fff; }
    /* „Další témata" je vždy bílý ostrov — odkazy v něm musí zůstat tmavé
       i v průhledném režimu lišty nad tabulí (jinak bílá na bílé) */
    .nav--clear .nav__panel a { color: var(--navy); }
    .nav--clear .nav__panel a:hover { color: var(--navy); }
    .nav--clear .brand b { color: #fff; }
    .nav--clear .brand small { color: var(--mint); }
    .nav--clear .logo-mark { background-image: url('/assets/img/logo-ordinace-light.svg'); }
    .nav--clear .pill { color: var(--navy); } /* CTA zůstává tyrkysová pilulka */

    /* dropdown „Další témata" ovládaný i klikem (JS přepíná aria-expanded) */
    .nav__more.is-open .nav__panel {
      opacity: 1;
      visibility: visible;
      translate: 0 0;
      transition: opacity 0.15s ease, translate 0.15s ease;
    }
    .nav__more.is-open .nav__more-btn { color: var(--cendre); }
    .nav__more.is-open .nav__more-btn svg { transform: rotate(180deg); }

    /* --- mobilní menu: tlačítko Témata + panel se všemi šesti huby --- */
    .nav__topics-btn {
      display: none;
      align-items: center;
      gap: 0.4rem;
      background: none;
      border: 0;
      cursor: pointer;
      font: inherit;
      font-size: 0.93rem;
      font-weight: 500;
      color: var(--navy);
      padding: 0.4rem 0;
    }
    .nav__topics-btn svg { transition: transform 0.15s ease; }
    .nav__topics-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

    .mnav {
      position: fixed;
      z-index: 30;
      top: calc(0.75rem + 64px + 0.5rem);
      left: 1rem;
      right: 1rem;
      background: #fff; /* plné bílé — pod panelem nesmí prosvítat text stránky */
      border: 1px solid var(--mint);
      border-radius: 16px;
      box-shadow: 0 18px 40px -18px rgb(0 29 57 / 0.4);
      padding: 0.5rem;
    }
    .mnav nav { display: grid; }
    .mnav a {
      display: flex;
      align-items: baseline;
      gap: 0.7rem;
      padding: 0.75rem 0.9rem;
      border-radius: 10px;
      text-decoration: none;
      color: var(--navy);
      font-weight: 600;
      font-size: 1rem;
    }
    .mnav a small {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.72rem;
      letter-spacing: 0.06em;
      color: var(--cendre-text);
    }
    .mnav a:hover { background: #f4faf8; }
    .mnav a[aria-current="page"] {
      background: var(--mint);
    }
    .mnav a[aria-current="page"] small { color: #1d3d52; } /* na mintu #2e6b8c nestačí */

    @media (max-width: 900px) {
      /* tlačítko Témata je první dítě — pravidlo n+3 ze site.css nechává první dvojici;
         mezi 640 a 900 px by jinak zbyl jen odkaz na aktuální hub */
      .nav__group--left > :nth-child(n+3) { display: none; }
      .nav__topics-btn { display: inline-flex; }
    }
    @media (max-width: 640px) {
      .nav { grid-template-columns: auto auto auto; gap: 0.5rem; padding-inline: 0.85rem; }
      .nav__group--left { display: flex; }
      .nav__group--left > * { display: none; }
      .nav__topics-btn { display: inline-flex; }
      .nav .pill { padding: 0.45rem 0.85rem; font-size: 0.8rem; }
      .logo-mark { width: 30px; height: 28px; }
    }

    /* ============ ROZHODOVACÍ TABULE — první viewport ============ */
    .board {
      position: relative;
      overflow: hidden;
      background: var(--navy); /* fallback + podklad, dokud se shader nerozjede */
      color: #fff;
    }
    /* video na pozadí tabule — navy podklad drží, dokud se video nerozjede */
    .board__video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      pointer-events: none;
      z-index: 0;
    }
    /* brandový duotone: přebarví tóny videa do naší živé zeleno-tyrkysové
       palety (jako záře v patičce). mix-blend: color = zachová jas videa,
       nahradí barvu — proto rozhoduje hlavně odstín a sytost gradientu */
    .board__tint {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      mix-blend-mode: color;
      /* jen nádech — nízká průhlednost, ať video zůstane samo sebou */
      opacity: 0.28;
      background: linear-gradient(155deg, #6fe0c8 0%, #23a58c 52%, #0c5346 100%);
    }
    /* ztmavovací vrstva: nahoře jen náznak tyrkysové záře, dole neutrální
       tmavý podkres pro čitelnost bílého textu */
    .board__scrim {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background:
        radial-gradient(120% 78% at 50% -12%, rgb(70 205 207 / 0.12) 0%, transparent 58%),
        linear-gradient(180deg, rgb(0 0 0 / 0.40) 0%, rgb(2 26 22 / 0.74) 100%),
        linear-gradient(90deg, rgb(0 0 0 / 0.34) 0%, rgb(0 0 0 / 0) 60%);
    }
    .board .band { position: relative; z-index: 1; }
    .board .band { padding-block: clamp(2.6rem, 4.5vw, 3.8rem) clamp(2.2rem, 4vw, 3.4rem); }
    .board h2 {
      color: #fff;
      font-size: clamp(1.9rem, 3.4vw, 2.9rem);
      font-weight: 750;
      letter-spacing: -0.03em;
    }
    /* úsporná varianta: titulek na tabuli, „Co řešíte?" jen jako kicker;
       tabule jede od úplného vršku okna — lišta nad ní plave jako na homepage */
    .board { margin-top: calc(-1 * (64px + 0.75rem)); }
    .board .band {
      padding-block: calc(64px + 0.75rem + 0.75rem + clamp(2rem, 3.5vw, 3rem)) clamp(2.2rem, 4vw, 3.4rem);
    }
    .board__crumbs { color: var(--mint); }
    .board__crumbs a { color: inherit; }
    .board h1 {
      margin-top: 0.55rem;
      font-size: clamp(2.2rem, 4vw, 3.2rem);
      font-weight: 750;
      letter-spacing: -0.03em;
      line-height: 1.05;
      color: #fff;
    }
    .board__perex {
      margin-top: 0.8rem;
      max-width: 62ch;
      font-size: clamp(0.98rem, 1.2vw, 1.08rem);
      line-height: 1.65;
      color: rgb(255 255 255 / 0.72);
    }
    .board h2.board__kicker {
      margin-top: clamp(1.8rem, 3vw, 2.6rem);
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.78rem;
      font-weight: 500;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: var(--mint);
    }

    .board__rows {
      margin-top: clamp(1.4rem, 2.5vw, 2rem);
      display: grid;
    }
    .board__row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto;
      align-items: center;
      gap: clamp(1rem, 3vw, 2.5rem);
      padding: clamp(0.9rem, 1.6vw, 1.25rem) 0;
      border-top: 1px solid rgb(255 255 255 / 0.22);
      text-decoration: none;
      color: #fff;
      transition: background-color 0.15s ease;
    }
    .board__row:last-child { border-bottom: 1px solid rgb(255 255 255 / 0.22); }
    .board__row:hover { background: rgb(255 255 255 / 0.05); }
    .board__dest b {
      display: block;
      font-size: clamp(1.3rem, 2.4vw, 2rem);
      font-weight: 700;
      letter-spacing: -0.02em;
      line-height: 1.15;
    }
    .board__meta {
      display: block;
      margin-top: 0.35rem;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.74rem;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: var(--mint);
    }
    .board__gate {
      font-size: clamp(2.2rem, 4vw, 3.4rem);
      font-weight: 800;
      letter-spacing: -0.03em;
      line-height: 1;
      color: var(--mint);
      font-variant-numeric: tabular-nums;
    }
    .board__arrow {
      width: clamp(26px, 2.6vw, 34px);
      height: clamp(26px, 2.6vw, 34px);
      color: var(--turquoise);
      justify-self: end;
      transition: translate 0.15s ease;
    }
    .board__row:hover .board__arrow { translate: 0 4px; }

    /* ============ STANOVIŠTĚ 01–04 — cedulové panely ============ */
    .sign { scroll-margin-top: 3.2rem; border-top: 1px solid var(--line); }
    /* úsporná varianta: stanoviště na bílé — barvu nese jen cedulový prvek */
    .sign--mint, .sign--beau { background: #fff; }
    .sign .band {
      padding-block: clamp(3rem, 5.5vw, 4.5rem);
      display: grid;
      grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr);
      gap: clamp(1.75rem, 4vw, 4rem);
      align-items: start;
    }
    .sign__num {
      display: block;
      font-size: clamp(4.2rem, 8.5vw, 7rem);
      font-weight: 800;
      letter-spacing: -0.04em;
      line-height: 0.9;
      color: var(--navy);
      font-variant-numeric: tabular-nums;
    }
    .sign h2 {
      margin-top: 0.9rem;
      font-size: clamp(1.7rem, 2.7vw, 2.3rem);
      font-weight: 750;
      letter-spacing: -0.025em;
      line-height: 1.1;
      color: var(--navy);
      max-width: 14ch;
    }
    .sign__rows { display: grid; }
    .sign__row {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: clamp(0.85rem, 1.4vw, 1.1rem) 0.1rem;
      border-bottom: 1px solid rgb(0 29 57 / 0.2);
      text-decoration: none;
      color: var(--navy);
      font-size: clamp(1.08rem, 1.6vw, 1.35rem);
      font-weight: 600;
      letter-spacing: -0.01em;
      transition: color 0.15s ease;
    }
    .sign__row:first-child { border-top: 1px solid rgb(0 29 57 / 0.2); }
    .sign__row svg {
      flex: none;
      margin-left: auto;
      width: 20px;
      height: 20px;
      color: #1d3d52;
      transition: translate 0.15s ease, color 0.15s ease;
    }
    .sign__row:hover { color: var(--cendre-text); } /* světlý cendre má na beau jen 2.8:1 */
    .sign__row:hover svg { translate: 4px 0; color: var(--cendre-text); }

    /* checklist / vzor — vsazená bílá cedule, jiný typ obsahu */
    .sign__inset {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-top: 1.25rem;
      padding: 1rem 1.25rem;
      background: #fff;
      border: 1px solid var(--mint); /* na bílém podkladu potřebuje vsazená cedule obrys */
      border-radius: 16px;
      box-shadow: 0 14px 30px -20px rgb(0 29 57 / 0.25);
      text-decoration: none;
      color: var(--navy);
      transition: transform 0.15s ease, box-shadow 0.15s ease;
    }
    .sign__inset:hover {
      transform: translateY(-2px);
      box-shadow: 0 18px 34px -18px rgb(0 29 57 / 0.45);
    }
    .sign__inset i {
      flex: none;
      display: block;
      width: 22px;
      height: 22px;
      background: var(--cendre-text);
    }
    .sign__type {
      display: block;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.72rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--cendre-text);
    }
    .sign__inset b {
      display: block;
      margin-top: 0.15rem;
      font-size: 1.05rem;
      font-weight: 700;
      letter-spacing: -0.01em;
    }
    .sign__inset svg {
      flex: none;
      margin-left: auto;
      width: 18px;
      height: 18px;
      color: var(--cendre-text);
      transition: translate 0.15s ease;
    }
    .sign__inset:hover svg { translate: 4px 0; }

    /* ============ ÚSPORNÝ ZÁVĚR: test jako moment + tiché kam dál ============ */
    .testband .band { padding-block: clamp(2.5rem, 5vw, 4rem) 0; }
    .testband__card {
      background: var(--mint);
      border-radius: 16px;
      padding: clamp(1.8rem, 3.5vw, 2.6rem);
      box-shadow: 0 18px 40px -28px rgb(0 29 57 / 0.45);
    }
    .testband__card small {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.74rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #14554a;
    }
    .testband__card h2 {
      margin-top: 0.5rem;
      font-size: clamp(1.5rem, 2.6vw, 2.1rem);
      font-weight: 750;
      letter-spacing: -0.025em;
      color: var(--navy);
    }
    .testband__card p {
      margin-top: 0.5rem;
      max-width: 58ch;
      font-size: 1rem;
      line-height: 1.6;
      color: #14554a;
    }
    .testband__card .pill {
      display: inline-block;
      margin-top: 1.2rem;
      text-decoration: none;
    }

    .kamdal2 .band { padding-block: clamp(2.8rem, 5vw, 4rem) clamp(3rem, 5.5vw, 4.5rem); }
    .kamdal2 h2 {
      font-size: clamp(1.5rem, 2.4vw, 1.9rem);
      font-weight: 750;
      letter-spacing: -0.02em;
      color: var(--navy);
    }
    .kamdal2__rows { margin-top: 1.2rem; display: grid; }
    .kamdal2__row {
      display: flex;
      align-items: baseline;
      gap: 1.2rem;
      padding: 1.05rem 0.1rem;
      border-bottom: 1px solid var(--line);
      text-decoration: none;
      color: var(--navy);
      transition: color 0.15s ease;
    }
    .kamdal2__row:first-child { border-top: 1px solid var(--line); }
    .kamdal2__row small {
      flex: none;
      width: 5.4rem;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.72rem;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: var(--cendre-text);
    }
    .kamdal2__dest { flex: 1; min-width: 0; }
    .kamdal2__row b {
      font-size: clamp(1.05rem, 1.5vw, 1.25rem);
      font-weight: 650;
      letter-spacing: -0.01em;
    }
    .kamdal2__why {
      display: block;
      margin-top: 0.15rem;
      font-size: 0.9rem;
      color: var(--muted);
    }
    .kamdal2__row svg {
      flex: none;
      margin-left: auto;
      align-self: center;
      width: 18px;
      height: 18px;
      color: var(--cendre-text);
      transition: translate 0.15s ease;
    }
    .kamdal2__row:hover { color: var(--cendre-text); }
    .kamdal2__row:hover svg { translate: 4px 0; }
    @keyframes flap {
      from { transform: rotateX(-86deg); opacity: 0.15; }
      60%  { transform: rotateX(16deg); }
      to   { transform: rotateX(0); opacity: 1; }
    }

    /* patička je sdílená — styly .foot žijí v site.css */

    /* ============ RESPONSIVE ============ */
    @media (max-width: 800px) {
      .sign .band { grid-template-columns: 1fr; gap: 1.5rem; }
      .sign__head { display: flex; align-items: baseline; gap: 1rem; }
      .sign__num { font-size: clamp(2.9rem, 10.5vw, 4rem); }
      .sign h2 { margin-top: 0; max-width: none; }
    }
    @media (max-width: 700px) {
      .board__gate { font-size: 1.7rem; }
      .board__arrow { width: 22px; height: 22px; }
      .board__dest b { font-size: 1.15rem; }
      .board__meta { font-size: 0.72rem; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
    }