@charset "UTF-8";
/* =========================================================================
   Praha3.Net — návrhový systém
   Bez build kroku: čisté CSS s @layer, vnořováním a oklch barvami.
   ========================================================================= */

@layer reset, tokeny, zaklad, rozvrzeni, komponenty, utility;

/* ---------------------------------------------------------------- fonty */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------- reset */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-block-start: 6rem;
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
    }
  }

  body { min-height: 100svh; line-height: 1.6; -webkit-font-smoothing: antialiased; }
  img, picture, svg, video { display: block; max-width: 100%; height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; background: none; border: 0; }
  h1, h2, h3, h4 { line-height: 1.15; text-wrap: balance; font-weight: 640; }
  p, li { text-wrap: pretty; }
  a { color: inherit; }
  /* Odkazy s vlastní třídou si vzhled řídí samy — bez výchozího podtržení. */
  a[class] { text-decoration: none; }
  ul[class], ol[class] { list-style: none; padding: 0; }
  :target { scroll-margin-block-start: 6rem; }
}

/* --------------------------------------------------------------- tokeny */
@layer tokeny {
  :root {
    --barva-pozadi:        oklch(99% 0.004 250);
    --barva-pozadi-2:      oklch(97% 0.008 250);
    --barva-povrch:        oklch(100% 0 0);
    --barva-povrch-2:      oklch(97.5% 0.006 250);
    --barva-okraj:         oklch(90% 0.012 250);
    --barva-okraj-2:       oklch(84% 0.018 250);
    --barva-text:          oklch(24% 0.025 255);
    --barva-text-2:        oklch(48% 0.02 255);
    --barva-text-3:        oklch(52% 0.02 255);

    /* Signální červená značky #C70E14 — zápis v oklch jí odpovídá přesně.
       Odstíny drží stejnou světlost jako dřívější modrá, takže kontrastní
       vztahy zůstávají v platnosti; červená je na nich o něco lepší
       (6,00:1 proti 5,40:1 u modré). Světlejší odstín se blíží červené
       v logu (#E60D18). */
    --barva-znacka:        oklch(52.5% 0.209 27.8);
    /* Značka jako barva textu. Ve světlém je shodná s plochou, v tmavém
       musí být světlejší — #C70E14 by na tmavém pozadí dalo jen 2,4:1. */
    --barva-znacka-text:   oklch(52.5% 0.209 27.8);
    --barva-znacka-text-2: oklch(62% 0.2 28);
    --barva-znacka-jasna:  oklch(59% 0.22 28);
    --barva-znacka-tmava:  oklch(40% 0.151 28);
    --barva-znacka-tlumena:oklch(96% 0.018 28);
    --barva-na-znacce:     oklch(100% 0 0);
    /* Inkoust loga — v tmavém režimu se překlápí na světlý. */
    --barva-logo-inkoust:  oklch(24% 0.025 255);

    /* Akcent není samostatná barva — je to značková červená. Odkazem na
       značkové tokeny se světlý i tmavý režim vyřeší sám, proto se akcent
       v režimových blocích už nepředefinovává. */
    --barva-akcent:        var(--barva-znacka-text);
    --barva-akcent-tlumena:var(--barva-znacka-tlumena);

    --barva-uspech:        oklch(48% 0.13 156);
    --barva-uspech-tlumena:oklch(95% 0.05 155);
    --barva-varovani:      oklch(50% 0.12 62);
    --barva-varovani-tlumena: oklch(96% 0.05 80);
    --barva-chyba:         oklch(50% 0.19 25);
    --barva-chyba-tlumena: oklch(96% 0.03 25);

    --stin-1: 0 1px 2px oklch(24% 0.03 255 / .06), 0 1px 3px oklch(24% 0.03 255 / .05);
    --stin-2: 0 4px 12px oklch(24% 0.03 255 / .07), 0 2px 4px oklch(24% 0.03 255 / .04);
    --stin-3: 0 12px 32px oklch(24% 0.03 255 / .1), 0 4px 8px oklch(24% 0.03 255 / .05);
    --stin-4: 0 24px 60px oklch(24% 0.03 255 / .14), 0 8px 16px oklch(24% 0.03 255 / .06);

    --pismo: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;

    --text-xs:  clamp(.75rem, .73rem + .1vw, .8rem);
    --text-sm:  clamp(.875rem, .85rem + .12vw, .925rem);
    --text-md:  clamp(1rem, .97rem + .15vw, 1.0625rem);
    --text-lg:  clamp(1.125rem, 1.06rem + .3vw, 1.3rem);
    --text-xl:  clamp(1.375rem, 1.25rem + .6vw, 1.75rem);
    --text-2xl: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
    --text-3xl: clamp(2.25rem, 1.8rem + 2.2vw, 3.75rem);
    --text-4xl: clamp(2.75rem, 2rem + 3.4vw, 4.75rem);

    --sirka-obsah: 72rem;
    --sirka-uzka: 46rem;
    --mezera-strany: clamp(1.125rem, 4vw, 3rem);
    --radius-sm: .5rem;
    --radius:    .875rem;
    --radius-lg: 1.25rem;
    --radius-xl: 1.75rem;
    --radius-full: 999px;

    --prechod: 180ms cubic-bezier(.4, 0, .2, 1);
    --prechod-pomaly: 420ms cubic-bezier(.16, 1, .3, 1);

    color-scheme: light;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-rezim="svetly"]) {
      color-scheme: dark;
      --barva-pozadi:        oklch(17% 0.02 260);
      --barva-pozadi-2:      oklch(20% 0.022 260);
      --barva-povrch:        oklch(22% 0.024 260);
      --barva-povrch-2:      oklch(26% 0.026 260);
      --barva-okraj:         oklch(31% 0.026 260);
      --barva-okraj-2:       oklch(40% 0.03 260);
      --barva-text:          oklch(95% 0.008 260);
      --barva-text-2:        oklch(77% 0.016 260);
      --barva-text-3:        oklch(63% 0.018 260);
      /* Značkové plochy nesou stejnou červenou jako světlý režim. */
      --barva-znacka:        oklch(52.5% 0.209 27.8);
      --barva-znacka-jasna:  oklch(59% 0.22 28);
      --barva-znacka-tmava:  oklch(40% 0.151 28);
      --barva-znacka-text:   oklch(72% 0.14 28);
      --barva-znacka-text-2: oklch(82% 0.1 28);
      --barva-znacka-tlumena:oklch(28% 0.06 28);
      /* Na tmavé červené musí být popis světlý, ne tmavý. */
      --barva-na-znacce:     oklch(100% 0 0);
      --barva-logo-inkoust:  oklch(95% 0.008 260);
      --barva-uspech:        oklch(74% 0.15 158);
      --barva-uspech-tlumena:oklch(27% 0.05 158);
      --barva-varovani:      oklch(80% 0.14 80);
      --barva-varovani-tlumena: oklch(29% 0.05 80);
      --barva-chyba:         oklch(70% 0.16 25);
      --barva-chyba-tlumena: oklch(28% 0.06 25);
      --stin-1: 0 1px 2px oklch(0% 0 0 / .3);
      --stin-2: 0 4px 12px oklch(0% 0 0 / .35);
      --stin-3: 0 12px 32px oklch(0% 0 0 / .45);
      --stin-4: 0 24px 60px oklch(0% 0 0 / .55);
    }
  }

  :root[data-rezim="tmavy"] {
    color-scheme: dark;
    --barva-pozadi:        oklch(17% 0.02 260);
    --barva-pozadi-2:      oklch(20% 0.022 260);
    --barva-povrch:        oklch(22% 0.024 260);
    --barva-povrch-2:      oklch(26% 0.026 260);
    --barva-okraj:         oklch(31% 0.026 260);
    --barva-okraj-2:       oklch(40% 0.03 260);
    --barva-text:          oklch(95% 0.008 260);
    --barva-text-2:        oklch(77% 0.016 260);
    --barva-text-3:        oklch(63% 0.018 260);
    /* Značkové plochy nesou stejnou červenou jako světlý režim. */
    --barva-znacka:        oklch(52.5% 0.209 27.8);
    --barva-znacka-jasna:  oklch(59% 0.22 28);
    --barva-znacka-tmava:  oklch(40% 0.151 28);
    --barva-znacka-text:   oklch(72% 0.14 28);
    --barva-znacka-text-2: oklch(82% 0.1 28);
    --barva-znacka-tlumena:oklch(28% 0.06 28);
    /* Na tmavé červené musí být popis světlý, ne tmavý. */
    --barva-na-znacce:     oklch(100% 0 0);
    --barva-logo-inkoust:  oklch(95% 0.008 260);
    --barva-uspech:        oklch(74% 0.15 158);
    --barva-uspech-tlumena:oklch(27% 0.05 158);
    --barva-varovani:      oklch(80% 0.14 80);
    --barva-varovani-tlumena: oklch(29% 0.05 80);
    --barva-chyba:         oklch(70% 0.16 25);
    --barva-chyba-tlumena: oklch(28% 0.06 25);
    --stin-1: 0 1px 2px oklch(0% 0 0 / .3);
    --stin-2: 0 4px 12px oklch(0% 0 0 / .35);
    --stin-3: 0 12px 32px oklch(0% 0 0 / .45);
    --stin-4: 0 24px 60px oklch(0% 0 0 / .55);
  }
}

/* --------------------------------------------------------------- základ */
@layer zaklad {
  body {
    font-family: var(--pismo);
    font-size: var(--text-md);
    font-optical-sizing: auto;
    color: var(--barva-text);
    background: var(--barva-pozadi);
    transition: background-color var(--prechod), color var(--prechod);
  }

  ::selection { background: var(--barva-znacka); color: var(--barva-na-znacce); }

  :focus-visible {
    outline: 2px solid var(--barva-znacka-text);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
  }
  :focus:not(:focus-visible) { outline: none; }

  a:not([class]) {
    color: var(--barva-znacka-text);
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
    transition: color var(--prechod);

    &:hover { color: var(--barva-znacka-tmava); }
  }

  strong, b { font-weight: 650; }
  small { font-size: var(--text-sm); }

  /* Číslice v tabulkách a cenách drží šířku */
  .cislice, td, th, .cena, .rychlost { font-variant-numeric: tabular-nums; }

  /* Přechody mezi stránkami tam, kde je prohlížeč umí */
  @view-transition { navigation: auto; }
  @media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
  }
}

/* ------------------------------------------------------------- rozvržení */
@layer rozvrzeni {
  .obal {
    width: min(100%, var(--sirka-obsah));
    margin-inline: auto;
    padding-inline: var(--mezera-strany);
  }
  .obal--uzky { width: min(100%, var(--sirka-uzka)); }
  .obal--siroky { width: min(100%, 84rem); }

  .sekce {
    padding-block: clamp(3.5rem, 8vw, 7rem);




  }
  .sekce--povrch { background: var(--barva-povrch); }

  .sekce--tlumena { background: var(--barva-pozadi-2); }

  .sekce--tesna { padding-block: clamp(2.5rem, 5vw, 4rem); }


  .mrizka {
    display: grid;
    gap: clamp(1rem, 2.5vw, 1.75rem);




  }
  .mrizka--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

  .mrizka--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }

  .mrizka--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }


  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--stack-mezera, 1rem);

    /* Štítek se ve sloupci jinak roztáhne přes celou šířku. */
    & > .stitek { align-self: flex-start; }
  }
  .radek {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--radek-mezera, .75rem);
  }

  .hlavicka-sekce {
    max-width: 44rem;
    margin-block-end: clamp(2rem, 4vw, 3rem);

    & > .stitek { margin-block-end: .875rem; }
    & > h1, & > h2 { font-size: var(--text-2xl); letter-spacing: -.02em; }
    & > p {
      margin-block-start: .875rem;
      font-size: var(--text-lg);
      color: var(--barva-text-2);
    }

  }
  .hlavicka-sekce--stred { margin-inline: auto; text-align: center; }

}

/* ------------------------------------------------------------ komponenty */
@layer komponenty {

  /* ---------- štítky ---------- */
  .stitek {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    padding: .3em .8em;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .01em;
    border-radius: var(--radius-full);
    background: var(--barva-znacka-tlumena);
    color: var(--barva-znacka-text);
    border: 1px solid transparent;
    white-space: nowrap;







    & .tecka {
      inline-size: .5em; block-size: .5em;
      border-radius: 50%;
      background: currentColor;
      flex: none;
    }
  }
  .stitek--obrys {
      background: transparent;
      border-color: var(--barva-okraj-2);
      color: var(--barva-text-2);
    }

  .stitek--chyba { background: var(--barva-chyba-tlumena); color: var(--barva-chyba); }

  .stitek--varovani { background: var(--barva-varovani-tlumena); color: var(--barva-varovani); }

  .stitek--uspech { background: var(--barva-uspech-tlumena); color: var(--barva-uspech); }

  .stitek--akcent { background: var(--barva-akcent-tlumena); color: var(--barva-akcent); }

  @media (prefers-color-scheme: dark) {
    :root:not([data-rezim="svetly"]) .stitek--uspech { color: var(--barva-uspech); }
  }

  /* ---------- tlačítka ---------- */
  .tlacitko {
    --tl-pozadi: var(--barva-znacka);
    --tl-text: var(--barva-na-znacce);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55em;
    padding: .8em 1.5em;
    font-size: var(--text-md);
    font-weight: 580;
    line-height: 1.2;
    text-decoration: none;
    border-radius: var(--radius-full);
    background: var(--tl-pozadi);
    color: var(--tl-text);
    border: 1px solid transparent;
    box-shadow: var(--stin-1);
    transition: transform var(--prechod), box-shadow var(--prechod),
                background-color var(--prechod), border-color var(--prechod);
    white-space: nowrap;

    &:hover { transform: translateY(-1px); box-shadow: var(--stin-2); }
    &:active { transform: translateY(0); box-shadow: var(--stin-1); }
    &[disabled], &[aria-disabled="true"] {
      opacity: .55; pointer-events: none; transform: none;
    }

    & svg { inline-size: 1.15em; block-size: 1.15em; flex: none; }








  }
  .tlacitko--akcent { --tl-pozadi: var(--barva-znacka); --tl-text: var(--barva-na-znacce); }

  .tlacitko--tiche {
      --tl-pozadi: transparent;
      --tl-text: var(--barva-text-2);
      box-shadow: none;

      &:hover { --tl-text: var(--barva-znacka-text); background: var(--barva-znacka-tlumena); }
    }

  .tlacitko--druhotne {
      --tl-pozadi: var(--barva-povrch);
      --tl-text: var(--barva-text);
      border-color: var(--barva-okraj-2);
      box-shadow: none;

      &:hover { border-color: var(--barva-znacka-text); color: var(--barva-znacka-text); }
    }

  .tlacitko--plne { inline-size: 100%; }

  .tlacitko--male { padding: .55em 1.1em; font-size: var(--text-sm); }

  .tlacitko--velke { padding: 1em 1.9em; font-size: var(--text-lg); }


  /* ---------- karty ---------- */
  .karta {
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    background: var(--barva-povrch);
    border: 1px solid var(--barva-okraj);
    border-radius: var(--radius-lg);
    box-shadow: var(--stin-1);
    transition: transform var(--prechod), box-shadow var(--prechod),
                border-color var(--prechod);




    & h3 { font-size: var(--text-lg); }
    & > p { color: var(--barva-text-2); }
  }
  .karta--tlumena { background: var(--barva-povrch-2); box-shadow: none; }

  .karta--zvedaci:hover {
      transform: translateY(-3px);
      box-shadow: var(--stin-3);
      border-color: var(--barva-okraj-2);
    }


  .ikona-krouzek {
    display: grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: var(--radius);
    background: var(--barva-znacka-tlumena);
    color: var(--barva-znacka-text);
    margin-block-end: 1rem;

    & svg { inline-size: 1.4rem; block-size: 1.4rem; }



  }
  .ikona-krouzek--uspech { background: var(--barva-uspech-tlumena); color: var(--barva-uspech); }

  .ikona-krouzek--akcent { background: var(--barva-akcent-tlumena); color: var(--barva-akcent); }


  /* ---------- otazník s bublinou ----------
     Vysvětlivka, která by jako hvězdička pod sekcí zůstala nepřečtená.
     Bublina naskočí i po projetí klávesnicí, ne jen myší. */
  .napoveda {
    position: relative;
    display: inline-grid;
    place-items: center;
    vertical-align: -.12em;
    inline-size: .95em;
    block-size: .95em;
    margin-inline-start: .3em;
    padding: 0;
    color: var(--barva-text-3);
    border-radius: 50%;
    transition: color var(--prechod);

    &:hover, &:focus-visible { color: var(--barva-znacka-text); }

    & > svg { inline-size: 100%; block-size: 100%; stroke-width: 1.9; }
  }

  .napoveda-bublina {
    position: absolute;
    inset-block-end: calc(100% + .55rem);
    inset-inline-start: 50%;
    translate: -50% 0;
    z-index: 20;
    padding: .4rem .7rem;
    border-radius: var(--radius-sm);
    background: var(--barva-text);
    color: var(--barva-pozadi);
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: 1.35;
    white-space: nowrap;
    box-shadow: var(--stin-2);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--prechod), visibility var(--prechod);

    /* špička bubliny */
    &::after {
      content: "";
      position: absolute;
      inset-block-start: 100%;
      inset-inline-start: 50%;
      translate: -50% -1px;
      border: .35rem solid transparent;
      border-block-start-color: var(--barva-text);
    }
  }

  .napoveda:hover .napoveda-bublina,
  .napoveda:focus-visible .napoveda-bublina {
    opacity: 1;
    visibility: visible;
  }

}

/* ------------------------------------------------- hlavička a navigace */
@layer komponenty {
  .preskocit {
    position: absolute;
    inset-block-start: -100%;
    inset-inline-start: var(--mezera-strany);
    z-index: 100;
    padding: .7em 1.2em;
    background: var(--barva-znacka);
    color: var(--barva-na-znacce);
    border-radius: 0 0 var(--radius) var(--radius);
    text-decoration: none;
    transition: inset-block-start var(--prechod);

    &:focus { inset-block-start: 0; }
  }

  .hlavicka {
    position: sticky;
    inset-block-start: 0;
    z-index: 50;
    background: color-mix(in oklch, var(--barva-pozadi) 82%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-block-end: 1px solid transparent;
    transition: border-color var(--prechod), background-color var(--prechod);

    &[data-posunuto="ano"] {
      border-block-end-color: var(--barva-okraj);
      box-shadow: var(--stin-1);
    }

    & .obal {
      display: flex;
      align-items: center;
      gap: 1rem;
      min-block-size: 4.25rem;
    }
  }

  .znacka {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    margin-inline-end: auto;

    /* Logo nese nápis Praha3.net přímo v SVG, proto se vedle nesází text.
       Poměr stran je 4:1 — řídí se výška, šířka se dopočítá. */
    & svg { block-size: 2.25rem; inline-size: auto; flex: none; }
  }

  .navigace {
    display: flex;
    align-items: center;
    gap: .15rem;

    & a {
      position: relative;
      padding: .5rem .85rem;
      font-size: var(--text-sm);
      font-weight: 520;
      color: var(--barva-text-2);
      text-decoration: none;
      border-radius: var(--radius-sm);
      transition: color var(--prechod), background-color var(--prechod);

      &:hover { color: var(--barva-text); background: var(--barva-povrch-2); }
      &[aria-current="page"] {
        color: var(--barva-znacka-text);
        font-weight: 600;
      }
      &[aria-current="page"]::after {
        content: "";
        position: absolute;
        inset-block-end: .1rem;
        inset-inline: .85rem;
        block-size: 2px;
        border-radius: 2px;
        background: var(--barva-znacka);
      }
    }
  }

  .hlavicka-akce {
    display: flex;
    align-items: center;
    gap: .5rem;
  }

  /* přepínač jazyka — dvě zkratky vedle sebe, aktivní je zvýrazněná */
  .prepinac-jazyka {
    display: flex;
    align-items: center;
    gap: .15rem;
    padding: .15rem;
    border: 1px solid var(--barva-okraj);
    border-radius: var(--radius-full);

    & a {
      padding: .25rem .5rem;
      border-radius: var(--radius-full);
      font-size: var(--text-xs);
      font-weight: 640;
      letter-spacing: .03em;
      color: var(--barva-text-3);
      transition: background-color var(--prechod), color var(--prechod);

      &:hover { color: var(--barva-text); background: var(--barva-povrch-2); }
      &[aria-current="true"] {
        color: var(--barva-znacka-text);
        background: var(--barva-znacka-tlumena);
      }
    }
  }

  .prepinac-rezimu {
    display: grid;
    place-items: center;
    inline-size: 2.4rem;
    block-size: 2.4rem;
    border-radius: var(--radius-full);
    color: var(--barva-text-2);
    transition: background-color var(--prechod), color var(--prechod);

    &:hover { background: var(--barva-povrch-2); color: var(--barva-text); }
    & svg { inline-size: 1.15rem; block-size: 1.15rem; }
    /* Ikona ukazuje, kam se přepne — ve světlém režimu měsíc, v tmavém slunce. */
    & .ikona-slunce { display: none; }
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-rezim="svetly"]) .prepinac-rezimu {
      & .ikona-luna { display: none; }
      & .ikona-slunce { display: block; }
    }
  }
  :root[data-rezim="tmavy"] .prepinac-rezimu {
    & .ikona-luna { display: none; }
    & .ikona-slunce { display: block; }
  }

  /* mobilní menu */
  .prepinac-menu { display: none; }

  @media (max-width: 62rem) {
    .prepinac-menu {
      display: grid;
      place-items: center;
      inline-size: 2.4rem;
      block-size: 2.4rem;
      border-radius: var(--radius-full);
      color: var(--barva-text);

      &:hover { background: var(--barva-povrch-2); }
      & svg { inline-size: 1.35rem; block-size: 1.35rem; }
      & .ikona-krizek { display: none; }
      &[aria-expanded="true"] {
        & .ikona-menu { display: none; }
        & .ikona-krizek { display: block; }
      }
    }

    .navigace {
      position: fixed;
      inset: 4.25rem 0 auto;
      flex-direction: column;
      align-items: stretch;
      gap: .2rem;
      padding: 1rem var(--mezera-strany) 1.5rem;
      background: var(--barva-pozadi);
      border-block-end: 1px solid var(--barva-okraj);
      box-shadow: var(--stin-3);
      translate: 0 -110%;
      opacity: 0;
      visibility: hidden;
      transition: translate var(--prechod-pomaly), opacity var(--prechod),
                  visibility var(--prechod);

      &[data-otevreno="ano"] { translate: 0; opacity: 1; visibility: visible; }

      & a {
        padding: .75rem .85rem;
        font-size: var(--text-md);
        &[aria-current="page"]::after { display: none; }
      }
    }
    .hlavicka-akce .tlacitko--telefon { display: none; }

    /* Na mobilu je v hlavičce těsno, přepínač jazyka proto bez rámečku. */
    .prepinac-jazyka {
      border: 0;
      padding: 0;
      & a { padding: .25rem .35rem; }
    }

    /* Zóna zůstává i na mobilu, ale jen jako ikona — popisek by hlavičku
       na úzkých displejích rozbil. */
    .hlavicka-akce .tlacitko--zona {
      padding-inline: .6em;
      & span { display: none; }
    }
  }
}

/* -------------------------------------------------------------- hero */
@layer komponenty {
  .hero-podnadpis {
    font-size: var(--text-lg);
    color: var(--barva-text-2);
    max-width: 40rem;
    margin-inline: auto;
  }

  /* ---------- homepage: mapa jako podklad přes celou šířku ----------
     Mapa leží pod obsahem, ne nad ním — tím hero nezabírá dvojnásobek
     výšky a vyhledání adresy je přímo v mapě. */
  .hero-plocha {
    /* Výšku mapy držíme napevno. Karta s výsledkem ověření je v běžném toku,
       takže se protáhne dolů přes spodní hranu mapy, aniž by mapu natáhla. */
    --vyska-mapy: clamp(27rem, 68svh, 36rem);

    position: relative;
    isolation: isolate;
    display: grid;
    align-items: start;
    min-block-size: var(--vyska-mapy);
  }

  .hero-plocha-mapa {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: var(--vyska-mapy);
    z-index: 0;
    border-block-end: 1px solid var(--barva-okraj);

    /* Mapa je světlá; pod kartou ji jemně ztlumíme, ať text drží kontrast. */
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background: radial-gradient(ellipse 60% 70% at 50% 50%,
        color-mix(in oklch, var(--barva-pozadi) 55%, transparent),
        transparent 75%);
    }
  }

  .hero-plocha-obsah {
    position: relative;
    z-index: 1;
    inline-size: min(100%, var(--sirka-obsah));
    margin-inline: auto;
    /* Karta začíná zhruba ve čtvrtině mapy — než přijde výsledek, působí
       vycentrovaně, a přitom má kam růst. */
    padding-inline: var(--mezera-strany);
    padding-block: clamp(2rem, 9vh, 5rem) clamp(2rem, 5vw, 3rem);

    /* Vedle karty musí zůstat mapa uchopitelná myší. */
    pointer-events: none;
  }

  .hero-karta {
    pointer-events: auto;
    inline-size: min(100%, 40rem);
    margin-inline: auto;
    display: grid;
    gap: clamp(.85rem, 2vw, 1.15rem);
    padding: clamp(1.25rem, 3.5vw, 2rem);
    text-align: center;
    background: color-mix(in oklch, var(--barva-povrch) 92%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--barva-okraj);
    border-radius: var(--radius-xl);
    box-shadow: var(--stin-4);

    & h1 {
      font-size: var(--text-2xl);
      letter-spacing: -.03em;
      font-weight: 700;

      & .zvyrazneni {
        background: linear-gradient(100deg in oklab,
          var(--barva-znacka-text) 0%, var(--barva-znacka-text-2) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }
    }

    & .hero-podnadpis { font-size: var(--text-md); }
    & .overeni { margin-block: 0; }
  }

  .hero-cena {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    font-size: var(--text-lg);
    font-variant-numeric: tabular-nums;

    & strong { font-weight: 700; letter-spacing: -.02em; }
    & span { color: var(--barva-text-3); }
  }

}

/* ------------------------------------------- ověření dostupnosti adresy */
@layer komponenty {
  .overeni {
    position: relative;
    z-index: 10;
    max-width: 40rem;
    margin-inline: auto;
    inline-size: 100%;
  }
  /* V hero je pole na střed, v sekcích zarovnaných doleva začíná u okraje. */
  .overeni--vlevo { margin-inline: 0; }

  .overeni-pole {
    position: relative;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .45rem .45rem 1.1rem;
    background: var(--barva-povrch);
    border: 1px solid var(--barva-okraj-2);
    border-radius: var(--radius-full);
    box-shadow: var(--stin-3);
    transition: border-color var(--prechod), box-shadow var(--prechod);

    &:focus-within {
      border-color: var(--barva-znacka-text);
      box-shadow: var(--stin-3),
                  0 0 0 4px color-mix(in oklch, var(--barva-znacka-text) 18%, transparent);
    }

    & > .ikona-lupa {
      inline-size: 1.25rem;
      block-size: 1.25rem;
      color: var(--barva-text-3);
      flex: none;
    }

    & input {
      flex: 1;
      min-inline-size: 4rem;
      padding-block: .75rem;
      border: 0;
      background: none;
      font-size: var(--text-md);
      outline: none;

      &::placeholder {
        color: var(--barva-text-3);
        text-overflow: ellipsis;
      }
    }

    /* Delší popisek tlačítka nesmí vytlačit pole ven z rámečku. */
    & > .tlacitko { flex: 0 1 auto; min-inline-size: 0; }
  }

  @media (max-width: 30rem) {
    .overeni-pole {
      flex-wrap: wrap;
      border-radius: var(--radius-lg);
      padding: .75rem;

      & input { inline-size: 100%; flex-basis: 100%; }
      & .tlacitko { inline-size: 100%; }
      & > .ikona-lupa { display: none; }
    }
  }

  /* stav načítání */
  .overeni-pole[data-nacita="ano"] .ikona-lupa {
    animation: puls 1.1s ease-in-out infinite;
  }
  @keyframes puls { 50% { opacity: .35; } }

  /* ---------- našeptávač ---------- */
  .naseptavac {
    position: absolute;
    inset-block-start: calc(100% + .5rem);
    inset-inline: 0;
    z-index: 30;
    max-block-size: min(24rem, 60svh);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: .4rem;
    background: var(--barva-povrch);
    border: 1px solid var(--barva-okraj);
    border-radius: var(--radius-lg);
    box-shadow: var(--stin-4);
    scrollbar-width: thin;

    &:not([data-otevreno="ano"]) { display: none; }
  }

  .naseptavac-polozka {
    display: flex;
    align-items: center;
    gap: .75rem;
    inline-size: 100%;
    padding: .65rem .75rem;
    text-align: start;
    border-radius: var(--radius-sm);
    transition: background-color 90ms linear;

    &:hover, &[aria-selected="true"] { background: var(--barva-znacka-tlumena); }
    &[aria-selected="true"] { outline: none; }

    & .pin {
      inline-size: 1.1rem;
      block-size: 1.1rem;
      color: var(--barva-text-3);
      flex: none;
    }
    & .text { flex: 1; min-inline-size: 0; }
    & .ulice {
      display: block;
      font-weight: 550;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    & .misto {
      display: block;
      font-size: var(--text-xs);
      color: var(--barva-text-3);
    }
    & mark {
      background: none;
      color: var(--barva-znacka-text);
      font-weight: 700;
    }
  }

  .naseptavac-prazdno {
    padding: 1rem .75rem;
    font-size: var(--text-sm);
    color: var(--barva-text-3);
    text-align: center;
  }

  .naseptavac-napoveda {
    padding: .5rem .75rem;
    font-size: var(--text-xs);
    color: var(--barva-text-3);
    border-block-start: 1px solid var(--barva-okraj);
    margin-block-start: .3rem;
    display: flex;
    justify-content: space-between;
    gap: .5rem;

    & kbd {
      font: inherit;
      font-size: .95em;
      padding: .05em .35em;
      border: 1px solid var(--barva-okraj-2);
      border-block-end-width: 2px;
      border-radius: .3em;
    }
  }

  /* ---------- výsledek ověření ---------- */
  .vysledek {
    margin-block-start: 1.5rem;
    border-radius: var(--radius-xl);
    border: 1px solid var(--barva-okraj);
    background: var(--barva-povrch);
    box-shadow: var(--stin-3);
    overflow: hidden;
    text-align: start;

    @starting-style { opacity: 0; translate: 0 .75rem; }
    animation: vysledek-vjezd var(--prechod-pomaly) both;
  }
  @keyframes vysledek-vjezd {
    from { opacity: 0; translate: 0 .75rem; }
  }

  .vysledek-hlava {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
    padding: 1.15rem clamp(1.15rem, 3vw, 1.75rem);
    background: var(--vys-pozadi, var(--barva-povrch-2));
    border-block-end: 1px solid var(--barva-okraj);

    & .vysledek-znak {
      display: grid;
      place-items: center;
      inline-size: 2.5rem;
      block-size: 2.5rem;
      border-radius: 50%;
      background: var(--vys-barva);
      color: var(--barva-povrch);
      flex: none;

      & svg { inline-size: 1.35rem; block-size: 1.35rem; }
    }
    & .vysledek-titulek {
      flex: 1;
      min-inline-size: 12rem;

      & strong { display: block; font-size: var(--text-lg); color: var(--vys-barva); }
      & span { font-size: var(--text-sm); color: var(--barva-text-2); }
    }
  }

  .vysledek[data-stav="dostupne"] {
    --vys-barva: var(--barva-uspech);
    --vys-pozadi: var(--barva-uspech-tlumena);
  }
  .vysledek[data-stav="planovane"] {
    --vys-barva: var(--barva-varovani);
    --vys-pozadi: var(--barva-varovani-tlumena);
  }
  .vysledek[data-stav="na_vyzadani"] {
    --vys-barva: var(--barva-znacka-text);
    --vys-pozadi: var(--barva-znacka-tlumena);
  }
  .vysledek[data-stav="nedostupne"],
  .vysledek[data-stav="neznama_adresa"],
  .vysledek[data-stav="chyba"] {
    --vys-barva: var(--barva-text-2);
    --vys-pozadi: var(--barva-povrch-2);
  }

  .vysledek-telo {
    padding: clamp(1.15rem, 3vw, 1.75rem);
    display: grid;
    gap: 1.25rem;
  }

}

/* ------------------------------------------------------------- nabídka */
@layer komponenty {
  /* Jediný produkt — cena musí být čitelná bez čtení okolního textu. */
  .nabidka {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .4rem 1.25rem;
    padding: 1.1rem 1.35rem;
    border: 1px solid var(--barva-okraj-2);
    border-radius: var(--radius);
    background: var(--barva-povrch-2);

    & .nabidka-nazev { font-size: var(--text-lg); font-weight: 680; }
    & .nabidka-cena {
      font-size: var(--text-lg);
      font-weight: 700;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }
  }

  .nabidka--velka {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 1rem;
    padding: clamp(1.75rem, 5vw, 3rem);
    background: var(--barva-povrch);
    box-shadow: var(--stin-2);
    border-radius: var(--radius-xl);

    & .nabidka-nazev { font-size: var(--text-2xl); letter-spacing: -.03em; }
    & .nabidka-cena { font-size: var(--text-xl); }
    & .nabidka-poznamka { color: var(--barva-text-2); max-width: 34rem; }
  }

  /* ---------- rozcestník na typy připojení ---------- */
  .rozcestnik {
    display: grid;
    gap: clamp(.75rem, 2vw, 1.25rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  }
  .rozcestnik-dlazdice {
    display: grid;
    gap: .25rem;
    align-content: start;
    padding: clamp(1.1rem, 2.2vw, 1.5rem);
    background: var(--barva-povrch);
    border: 1px solid var(--barva-okraj);
    border-radius: var(--radius-lg);
    box-shadow: var(--stin-1);
    color: inherit;
    text-decoration: none;
    transition: transform var(--prechod), box-shadow var(--prechod),
                border-color var(--prechod);

    & strong { font-weight: 660; }

    &:hover,
    &:focus-visible {
      transform: translateY(-3px);
      box-shadow: var(--stin-3);
      border-color: var(--barva-okraj-2);
    }

    &:hover .rozcestnik-sipka { transform: translateY(2px); }
  }
  .rozcestnik-sipka {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-block-start: .75rem;
    font-size: var(--text-sm);
    font-weight: 580;
    color: var(--barva-znacka-text);
    transition: transform var(--prechod);

    & svg { inline-size: 1.15rem; block-size: 1.15rem; }
  }

  /* ---------- výčet vlastností s odškrtnutím ---------- */
  .vyhody {
    display: grid;
    gap: 1rem;

    & > li {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: .1rem .75rem;
      align-items: baseline;
    }
    & > li > svg {
      grid-row: span 2;
      align-self: start;
      inline-size: 1.3rem;
      block-size: 1.3rem;
      margin-block-start: .1rem;
      color: var(--barva-znacka-text);
    }
    & strong { font-weight: 620; }
    & p {
      grid-column: 2;
      font-size: var(--text-sm);
      color: var(--barva-text-2);
    }
  }

  /* ---------- nadpis sekce s ikonou ---------- */
  .nadpis-s-ikonou {
    display: flex;
    align-items: center;
    gap: .7rem;

    & > svg {
      inline-size: 1.6rem;
      block-size: 1.6rem;
      flex: none;
      color: var(--barva-znacka-text);
    }
  }

  /* ---------- pruh s ověřením adresy uvnitř stránky ---------- */
  .pruh-overeni {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) minmax(min(100%, 20rem), 1.5fr);
    align-items: center;
    gap: 1rem 2rem;
    padding: clamp(1.1rem, 2.5vw, 1.6rem);
    background: var(--barva-povrch-2);
    border: 1px solid var(--barva-okraj);
    border-radius: var(--radius-lg);

    & .pruh-overeni-nadpis {
      font-size: var(--text-lg);
      font-weight: 620;
      line-height: 1.3;
      text-wrap: balance;
    }
    & .overeni { margin-block: 0; }

    @media (max-width: 52rem) {
      grid-template-columns: 1fr;
    }
  }

  /* ---------- postup instalace ---------- */
  .kroky {
    counter-reset: krok;
    display: grid;
    gap: clamp(1rem, 2.5vw, 1.75rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  }
  .krok {
    position: relative;
    padding-block-start: 3.25rem;

    &::before {
      counter-increment: krok;
      content: counter(krok);
      position: absolute;
      inset-block-start: 0;
      inset-inline-start: 0;
      display: grid;
      place-items: center;
      inline-size: 2.5rem;
      block-size: 2.5rem;
      border-radius: 50%;
      background: var(--barva-znacka);
      color: var(--barva-na-znacce);
      font-weight: 700;
      font-size: var(--text-md);
      font-variant-numeric: tabular-nums;
    }
    /* spojnice mezi kroky */
    &:not(:last-child)::after {
      content: "";
      position: absolute;
      inset-block-start: 1.25rem;
      inset-inline-start: 3rem;
      inline-size: calc(100% - 1.5rem);
      block-size: 1px;
      background: linear-gradient(to right,
        var(--barva-okraj-2), color-mix(in oklch, var(--barva-okraj-2) 20%, transparent));
    }
    @media (max-width: 60rem) {
      &::after { display: none; }
    }

    & h3 { font-size: var(--text-lg); margin-block-end: .4rem; }
    & p { color: var(--barva-text-2); font-size: var(--text-sm); }
  }

  /* ---------- FAQ ---------- */
  .faq {
    display: grid;
    gap: .6rem;
  }
  .otazka {
    border: 1px solid var(--barva-okraj);
    border-radius: var(--radius);
    background: var(--barva-povrch);
    overflow: hidden;
    transition: border-color var(--prechod);

    &[open] { border-color: var(--barva-okraj-2); }
    &:hover { border-color: var(--barva-okraj-2); }

    & > summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 1rem 1.15rem;
      font-weight: 580;
      cursor: pointer;
      list-style: none;

      &::-webkit-details-marker { display: none; }

      &::after {
        content: "";
        inline-size: .55rem;
        block-size: .55rem;
        flex: none;
        border-inline-end: 2px solid var(--barva-text-3);
        border-block-end: 2px solid var(--barva-text-3);
        rotate: 45deg;
        translate: 0 -25%;
        transition: rotate var(--prechod), border-color var(--prechod);
      }
    }
    &[open] > summary::after { rotate: -135deg; translate: 0 25%; }

    & .odpoved {
      padding: 0 1.15rem 1.15rem;
      color: var(--barva-text-2);
      font-size: var(--text-sm);

      & p + p { margin-block-start: .75rem; }
    }
  }

  /* ---------- hero stránky Televize ---------- */
  .hero-dvojice {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3rem);

    @media (max-width: 56rem) {
      grid-template-columns: 1fr;
    }
  }

  /* Ilustrace má průhledné pozadí, takže žádný vlastní podklad ani rámeček
     nepotřebuje — stojí rovnou na ploše stránky a funguje v obou režimech. */
  .hero-dvojice-obrazek {
    justify-self: center;
    inline-size: min(100%, 32rem);

    & img { inline-size: 100%; block-size: auto; }
  }

  /* ---------- tři balíčky vedle sebe ---------- */
  .baliky-mrizka {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: clamp(.75rem, 2vw, 1.25rem);
    align-items: start;
  }

  .balik-karta {
    display: grid;
    gap: .3rem;
    padding: clamp(1.1rem, 2.2vw, 1.5rem);
    background: var(--barva-povrch);
    border: 1px solid var(--barva-okraj);
    border-radius: var(--radius-lg);
    box-shadow: var(--stin-1);

    & .balik-karta-nazev {
      font-size: var(--text-lg);
      font-weight: 700;
      color: var(--barva-znacka-text);
    }
    & .balik-karta-pocet { font-weight: 620; }
    & .balik-karta-cena {
      font-weight: 700;
      font-variant-numeric: tabular-nums;
    }
    & .balik-karta-popis {
      margin-block-start: .6rem;
      font-size: var(--text-sm);
      color: var(--barva-text-2);
    }
    & > details {
      margin-block-start: 1rem;
      border-block-start: 1px solid var(--barva-okraj);
      padding-block-start: .9rem;

      & > summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        font-size: var(--text-sm);
        font-weight: 560;
        cursor: pointer;
        list-style: none;

        &::-webkit-details-marker { display: none; }
        &::after {
          content: "";
          inline-size: .5rem;
          block-size: .5rem;
          flex: none;
          border-inline-end: 2px solid var(--barva-text-3);
          border-block-end: 2px solid var(--barva-text-3);
          rotate: 45deg;
          translate: 0 -25%;
          transition: rotate var(--prechod);
        }
      }
      &[open] > summary::after { rotate: -135deg; translate: 0 25%; }
    }
  }

  /* ---------- pruh s vysvětlivkou ---------- */
  .info-pruh {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .9rem 1.15rem;
    background: var(--barva-povrch-2);
    border: 1px solid var(--barva-okraj);
    border-radius: var(--radius);
    font-size: var(--text-sm);
    color: var(--barva-text-2);

    & > svg {
      inline-size: 1.25rem;
      block-size: 1.25rem;
      flex: none;
      color: var(--barva-text-3);
    }
  }

  /* ---------- hledání stanice v balíčcích ---------- */
  .hledani-stanice {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) minmax(min(100%, 18rem), 1.2fr);
    align-items: center;
    gap: 1rem 2rem;
    padding: clamp(1.1rem, 2.5vw, 1.5rem);
    background: var(--barva-povrch-2);
    border: 1px solid var(--barva-okraj);
    border-radius: var(--radius-lg);

    @media (max-width: 52rem) { grid-template-columns: 1fr; }
  }

  .stanice-vysledek {
    grid-column: 1 / -1;
    display: grid;
    gap: .4rem;

    &:empty { display: none; }
  }

  .stanice-radek {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    padding: .6rem .85rem;
    background: var(--barva-povrch);
    border: 1px solid var(--barva-okraj);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);

    & .stanice-nazev { font-weight: 580; }
    & .stanice-baliky { display: flex; flex-wrap: wrap; gap: .35rem; margin-inline-start: auto; }
  }

  /* ---------- dlaždice tématických balíčků ---------- */
  .tematicke-dlazdice {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
    gap: .75rem;
  }

  /* Subgrid drží název, počet a cenu na stejné výšce napříč dlaždicemi.
     Kde subgrid není, spadne to na běžný sloupec — jen bez zarovnání. */
  .tematicka-dlazdice {
    position: relative;
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    justify-items: center;
    align-content: start;
    gap: .2rem;
    padding: 1.1rem .75rem;

    /* 18+ nesmí posouvat řádky, proto sedí v rohu mimo tok. */
    & .tematicka-18 {
      position: absolute;
      inset-block-start: .5rem;
      inset-inline-end: .5rem;
      padding: .15em .5em;
      font-size: .68rem;
    }
    text-align: center;
    background: var(--barva-povrch);
    border: 1px solid var(--barva-okraj);
    border-radius: var(--radius);
    box-shadow: var(--stin-1);

    & > svg {
      inline-size: 1.6rem;
      block-size: 1.6rem;
      margin-block-end: .5rem;
      color: var(--barva-znacka-text);
    }
    & .tematicka-nazev {
      font-size: var(--text-sm);
      font-weight: 640;
      letter-spacing: .02em;
    }
    & .tematicka-detail { font-size: var(--text-xs); color: var(--barva-text-3); }

    /* Dlaždice je odkaz na rozpis balíčku o sekci níž. */
    transition: border-color var(--prechod), box-shadow var(--prechod),
                transform var(--prechod);

    &:hover, &:focus-visible {
      border-color: var(--barva-znacka-text);
      box-shadow: var(--stin-3);
      transform: translateY(-2px);
    }
    &:focus-visible { outline: 2px solid var(--barva-znacka-text); outline-offset: 2px; }
  }

  /* Balíček, na který se přišlo z dlaždice, chvíli svítí, ať je vidět kam. */
  .balik:target {
    border-color: var(--barva-znacka-text);
    box-shadow: 0 0 0 3px var(--barva-znacka-tlumena);
  }

  /* ---------- podporovaná zařízení ---------- */
  .zarizeni {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
    gap: clamp(1rem, 3vw, 2rem);
    text-align: center;

    & > li { display: grid; justify-items: center; gap: .25rem; }
    & svg {
      inline-size: 1.8rem;
      block-size: 1.8rem;
      margin-block-end: .5rem;
      color: var(--barva-znacka-text);
    }
    & strong { font-weight: 620; }
    & span { font-size: var(--text-sm); color: var(--barva-text-2); }
  }

  /* Ikona odkazu ven z webu sedí v řádku textu, ne na vlastním řádku. */
  a[rel~="external"] > svg {
    display: inline;
    inline-size: .85em;
    block-size: .85em;
    vertical-align: -.08em;
    margin-inline-start: .2em;
  }

  /* ---------- kontaktní karta (telefon, e-mail) ---------- */
  /* Karty sdílejí řádky, aby číslo a e-mail seděly na stejné lince i tehdy,
     když má jedna karta o řádek víc (dostupnost pod číslem). */
  .kontakt-mrizka {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: clamp(1rem, 2.5vw, 1.75rem);
  }

  .kontakt-karta {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: subgrid;
    grid-row: span 3;
    align-content: center;
    column-gap: 1rem;
    row-gap: .15rem;
    padding: clamp(1.1rem, 2.2vw, 1.4rem);
    background: var(--barva-povrch);
    border: 1px solid var(--barva-okraj);
    border-radius: var(--radius-lg);
    box-shadow: var(--stin-1);
    color: inherit;
    text-decoration: none;
    transition: transform var(--prechod), box-shadow var(--prechod),
                border-color var(--prechod);

    & > .ikona-krouzek {
      grid-row: 1 / -1;
      align-self: center;
      margin-block-end: 0;
    }
    & .kontakt-popisek { font-size: var(--text-sm); color: var(--barva-text-2); }
    & .kontakt-hodnota {
      font-size: var(--text-lg);
      font-weight: 660;
      letter-spacing: -.01em;
      overflow-wrap: anywhere;
    }
    & .kontakt-detail { font-size: var(--text-sm); color: var(--barva-text-3); }

    &:hover, &:focus-visible {
      transform: translateY(-2px);
      box-shadow: var(--stin-3);
      border-color: var(--barva-okraj-2);
    }
  }

  /* ---------- velká ikona vedle nadpisu sekce ---------- */
  .velka-ikona {
    display: grid;
    place-items: center;
    justify-self: center;
    inline-size: clamp(7rem, 18vw, 11rem);
    block-size: clamp(7rem, 18vw, 11rem);
    border-radius: 50%;
    background: var(--barva-znacka-tlumena);
    color: var(--barva-znacka-text);

    & svg { inline-size: 45%; block-size: 45%; }
  }

  /* ---------- číslované rozbalovací otázky ---------- */
  .faq--cislovane {
    counter-reset: otazka;

    & > .otazka > summary {
      gap: .85rem;
      justify-content: flex-start;

      &::before {
        counter-increment: otazka;
        content: counter(otazka);
        display: grid;
        place-items: center;
        inline-size: 1.75rem;
        block-size: 1.75rem;
        flex: none;
        border-radius: 50%;
        border: 1px solid var(--barva-znacka-text);
        color: var(--barva-znacka-text);
        font-size: var(--text-sm);
        font-weight: 680;
        font-variant-numeric: tabular-nums;
      }
      &::after { margin-inline-start: auto; }
    }
    & .odpoved { font-size: var(--text-md); }
  }

  /* postup po krocích uvnitř odpovědi */
  .kroky-seznam {
    display: grid;
    gap: .9rem;
    counter-reset: krok-seznam;
    padding: 0;
    list-style: none;

    & > li {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: .15rem .6rem;
    }
    & > li::before {
      counter-increment: krok-seznam;
      content: counter(krok-seznam) ".";
      grid-row: span 2;
      font-weight: 680;
      color: var(--barva-text);
    }
    & strong { font-weight: 640; color: var(--barva-text); }
    & p { grid-column: 2; }
  }

  .info-pruh--varovani {
    background: var(--barva-varovani-tlumena);
    border-color: color-mix(in oklch, var(--barva-varovani) 35%, transparent);
    color: var(--barva-text);

    & > svg { color: var(--barva-varovani); }
  }

  /* ---------- programová skladba televize ---------- */
  .balik > summary {
    & .balik-nazev { font-weight: 640; }
    & .balik-pocet {
      display: flex;
      align-items: center;
      gap: .5rem;
      margin-inline-start: auto;
      padding-inline-end: .75rem;
      font-size: var(--text-sm);
      font-weight: 450;
      color: var(--barva-text-3);
      white-space: nowrap;
    }
    & .balik-cena {
      font-weight: 700;
      color: var(--barva-text);
      font-variant-numeric: tabular-nums;
    }
  }

  .kanaly {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr));
    gap: .3rem .75rem;
    margin-block-start: .9rem;
  }
  .kanal {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding-block: .3rem;
    font-size: var(--text-sm);
    color: var(--barva-text);
    border-block-end: 1px solid var(--barva-okraj);

    & .kanal-logo {
      inline-size: 1.75rem;
      block-size: 1.75rem;
      flex: none;
      object-fit: contain;
      border-radius: var(--radius-sm);
      /* Loga stanic mají průhledné pozadí a část je bílá — na tmavém webu
         by zmizela, proto pod ně dáváme světlou podložku. */
      background: oklch(100% 0 0);
      padding: 1px;
    }
    & .kanal-logo--chybi { background: var(--barva-povrch-2); }

    & .kanal-nazev { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }

    & .kanal-hd {
      margin-inline-start: auto;
      padding-inline-start: .35rem;
      font-size: var(--text-xs);
      font-weight: 640;
      letter-spacing: .03em;
      color: var(--barva-znacka-text);
    }
  }
}

/* ---------------------------------------------------------- formuláře */
@layer komponenty {
  .formular {
    display: grid;
    gap: 1.1rem;
  }
  .pole {
    display: grid;
    gap: .4rem;

    & > label {
      font-size: var(--text-sm);
      font-weight: 580;

      & .nepovinne { font-weight: 450; color: var(--barva-text-3); }
    }

    & input, & textarea, & select {
      inline-size: 100%;
      padding: .75rem .95rem;
      background: var(--barva-povrch);
      border: 1px solid var(--barva-okraj-2);
      border-radius: var(--radius);
      transition: border-color var(--prechod), box-shadow var(--prechod);

      &:focus {
        outline: none;
        border-color: var(--barva-znacka-text);
        box-shadow: 0 0 0 3px color-mix(in oklch, var(--barva-znacka-text) 16%, transparent);
      }
      &::placeholder { color: var(--barva-text-3); }
    }
    & textarea { resize: vertical; min-block-size: 7rem; }

    & .napoveda { font-size: var(--text-xs); color: var(--barva-text-3); }

    & .chyba-pole {
      font-size: var(--text-xs);
      color: var(--barva-chyba);
      font-weight: 550;
    }
    &[data-chyba] {
      & input, & textarea, & select { border-color: var(--barva-chyba); }
    }
  }

  .pole-dvojice {
    display: grid;
    gap: 1.1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  }

  /* Formulář ve dvou sloupcích; na úzkém displeji spadne pod sebe. */
  .formular--sloupce {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    align-items: start;
    column-gap: clamp(1.1rem, 3vw, 2rem);
  }

  .povinne {
    color: var(--barva-chyba);
    margin-inline-start: .15em;
  }

  /* ---------- pruh s výzvou (ověření adresy na Kontaktu) ---------- */
  .pruh-vyzva {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    padding: clamp(1rem, 2.2vw, 1.35rem);
    background: var(--barva-povrch-2);
    border: 1px solid var(--barva-okraj);
    border-radius: var(--radius-lg);

    & > .ikona-krouzek { flex: none; margin-block-end: 0; }
    & > .tlacitko { margin-inline-start: auto; }
    & .pruh-vyzva-text { flex: 1 1 16rem; }

    /* Na mobilu tlačítko přes celou šířku, ne zaražené v pravém rohu. */
    @media (max-width: 34rem) {
      & > .tlacitko { inline-size: 100%; margin-inline-start: 0; }
    }
    & strong { font-weight: 640; }
    & p { font-size: var(--text-sm); color: var(--barva-text-2); }
  }

  /* ---------- adresy a firemní údaje ---------- */
  .adresa-karta {
    display: grid;
    align-content: start;
    gap: .3rem;
    padding: clamp(1.1rem, 2.2vw, 1.5rem);
    background: var(--barva-povrch);
    border: 1px solid var(--barva-okraj);
    border-radius: var(--radius-lg);
    box-shadow: var(--stin-1);

    & h3 { font-size: var(--text-lg); margin-block-end: .35rem; }
    & p { color: var(--barva-text-2); }
    & .adresa-odkaz {
      margin-block-start: .9rem;
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      font-size: var(--text-sm);
      font-weight: 580;
      color: var(--barva-znacka-text);
    }
  }

  .udaje {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: .85rem clamp(1.5rem, 4vw, 3rem);
    padding: clamp(1.1rem, 2.2vw, 1.5rem);
    background: var(--barva-povrch);
    border: 1px solid var(--barva-okraj);
    border-radius: var(--radius-lg);

    & > li {
      display: grid;
      grid-template-columns: auto 9.5rem 1fr;
      align-items: baseline;
      gap: .75rem;
    }
    & svg {
      inline-size: 1.05rem;
      block-size: 1.05rem;
      color: var(--barva-text-3);
      translate: 0 .15rem;
    }
    & .udaj-nazev { font-size: var(--text-sm); color: var(--barva-text-2); }
    & .udaj-hodnota { font-weight: 580; overflow-wrap: anywhere; }

    @media (max-width: 30rem) {
      & > li { grid-template-columns: auto 1fr; }
      & .udaj-hodnota { grid-column: 2; }
    }
  }

  .zaskrtavatko {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .7rem;
    align-items: start;
    font-size: var(--text-sm);
    color: var(--barva-text-2);
    cursor: pointer;

    & input {
      inline-size: 1.1rem;
      block-size: 1.1rem;
      margin-block-start: .2rem;
      accent-color: var(--barva-znacka);
      cursor: pointer;
    }
  }

  /* honeypot proti robotům */
  .past {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .hlaska {
    display: flex;
    gap: .75rem;
    padding: .95rem 1.15rem;
    border-radius: var(--radius);
    font-size: var(--text-sm);
    border: 1px solid transparent;

    & svg { inline-size: 1.15rem; block-size: 1.15rem; flex: none; margin-block-start: .1rem; }




  }
  .hlaska--info {
      background: var(--barva-znacka-tlumena);
      color: var(--barva-znacka-text);
      border-color: color-mix(in oklch, var(--barva-znacka-text) 25%, transparent);
    }

  .hlaska--chyba {
      background: var(--barva-chyba-tlumena);
      color: var(--barva-chyba);
      border-color: color-mix(in oklch, var(--barva-chyba) 30%, transparent);
    }

  .hlaska--uspech {
      background: var(--barva-uspech-tlumena);
      color: var(--barva-uspech);
      border-color: color-mix(in oklch, var(--barva-uspech) 30%, transparent);
    }

  @media (prefers-color-scheme: dark) {
  }
}

/* --------------------------------------------------------------- mapa */
@layer komponenty {
  .mapa-obal {
    position: relative;
    border-radius: var(--radius-xl);
    border: 1px solid var(--barva-okraj);
    background: var(--barva-povrch-2);
    overflow: hidden;
    box-shadow: var(--stin-2);
  }
  .mapa {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 16 / 10;
    display: block;
    touch-action: pan-y;

    /* Fill a opacity nese <g>, poloměr je na kruzích — <g> ho neumí předat. */
  }

  /* Mapa přes celou šířku hera — bez rámečku a rohů, výšku určuje sekce. */
  .mapa-obal--plna {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    block-size: 100%;

    & .mapa-plocha,
    & .mapa-plocha--maplibre {
      aspect-ratio: auto;
      block-size: 100%;
    }
    & .mapa {
      aspect-ratio: auto;
      block-size: 100%;
      object-fit: cover;
    }

    /* Legenda plave v rohu mapy místo pruhu pod ní. */
    & .mapa-legenda {
      position: absolute;
      inset-block-end: .75rem;
      inset-inline-start: .75rem;
      z-index: 2;
      border: 1px solid var(--barva-okraj);
      border-radius: var(--radius);
      background: color-mix(in oklch, var(--barva-povrch) 88%, transparent);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      padding: .5rem .75rem;
      font-size: var(--text-xs);
      gap: .3rem .7rem;
      max-inline-size: min(22rem, calc(100% - 1.5rem));

      /* zdroj dat se do plovoucí legendy nevejde */
      & [data-mapa-zdroj] { display: none; }
    }
  }

  /* Na úzkém displeji legenda kartu s vyhledáváním jen tlačí z obrazu. */
  @media (max-width: 46rem) {
    .mapa-obal--plna .mapa-legenda { display: none; }
  }

  /* Plocha pro mapu. Výšku drží poměr stran, ať stránka při načtení
     neposkočí. */
  .mapa-plocha--maplibre {
    aspect-ratio: 16 / 10;
    inline-size: 100%;
    background: var(--barva-povrch-2);

    /* MapLibre dává svým prvkům z-index, ale sám stacking context netvoří —
       bez tohohle by se překreslil přes našeptávač adres. */
    position: relative;
    z-index: 0;
    isolation: isolate;

    & .maplibregl-map { font: inherit; }
    & .maplibregl-ctrl-attrib {
      background: color-mix(in oklch, var(--barva-povrch) 85%, transparent);
      color: var(--barva-text-3);
      font-size: var(--text-xs);

      & a { color: var(--barva-text-2); }
    }
    & .maplibregl-ctrl-attrib-button { background-color: transparent; }
  }

  /* špendlík vyhledané adresy */
  .mapa-spendlik {
    display: grid;
    place-items: center;

    & .mapa-spendlik-bod {
      inline-size: .95rem;
      block-size: .95rem;
      border-radius: 50%;
      background: var(--barva-znacka);
      border: 3px solid var(--barva-povrch);
      box-shadow: 0 0 0 2px var(--barva-znacka-text), var(--stin-2);
    }
    &[data-stav="dostupne"] .mapa-spendlik-bod {
      background: var(--barva-uspech);
      box-shadow: 0 0 0 2px var(--barva-uspech), var(--stin-2);
    }
    &[data-stav="nedostupne"] .mapa-spendlik-bod,
    &[data-stav="neznama_adresa"] .mapa-spendlik-bod {
      background: var(--barva-text-2);
      box-shadow: 0 0 0 2px var(--barva-text-2), var(--stin-2);
    }
  }
  .mapa-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .95rem;
    padding: .85rem 1.1rem;
    border-block-start: 1px solid var(--barva-okraj);
    background: var(--barva-povrch);
    font-size: var(--text-sm);

    & li { display: flex; align-items: center; gap: .45rem; }
    & .vzorek {
      inline-size: .7rem;
      block-size: .7rem;
      border-radius: 50%;
      flex: none;
    }
  }
}

/* ------------------------------------------------------------ patička */
@layer komponenty {
  .paticka {
    margin-block-start: auto;
    padding-block: clamp(2.5rem, 5vw, 4rem) 1.5rem;
    background: var(--barva-pozadi-2);
    border-block-start: 1px solid var(--barva-okraj);
    font-size: var(--text-sm);
  }
  .paticka-mrizka {
    display: grid;
    gap: clamp(1.75rem, 4vw, 3rem);
    /* Na úzkých displejích jeden sloupec — kombinace 18rem + 9rem sloupců
       se pod 430 px nevejde a vytlačila by stránku do strany. */
    grid-template-columns: 1fr;
    padding-block-end: 2rem;
    border-block-end: 1px solid var(--barva-okraj);

    & h3 {
      font-size: var(--text-xs);
      text-transform: uppercase;
      letter-spacing: .07em;
      color: var(--barva-text-3);
      margin-block-end: .85rem;
      font-weight: 650;
    }
    & ul { display: grid; gap: .5rem; }
    & a {
      color: var(--barva-text-2);
      text-decoration: none;
      transition: color var(--prechod);

      &:hover { color: var(--barva-znacka-text); }
    }
  }
  @media (min-width: 34rem) {
    .paticka-mrizka {
      grid-template-columns: minmax(min(100%, 18rem), 1.5fr) repeat(auto-fit, minmax(9rem, 1fr));
    }
  }

  .paticka-o-nas {
    & p { color: var(--barva-text-2); margin-block-start: .85rem; max-width: 26rem; }
    /* V patičce nese logo roli podpisu značky, proto je větší než v hlavičce. */
    & .znacka svg { block-size: 4rem; }
  }
  .paticka-kontakt {
    display: grid;
    gap: .45rem;
    margin-block-start: 1.1rem;

    & a, & span {
      display: flex;
      align-items: center;
      gap: .55rem;
      color: var(--barva-text-2);
      text-decoration: none;
    }
    & svg { inline-size: 1rem; block-size: 1rem; color: var(--barva-text-3); flex: none; }
    & a:hover { color: var(--barva-znacka-text); }
  }
  .paticka-spodek {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    padding-block-start: 1.5rem;
    color: var(--barva-text-3);
    font-size: var(--text-xs);

    & .odkazy { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
    & a { text-decoration: none; &:hover { color: var(--barva-znacka-text); } }
  }
}

/* ------------------------------------------------------------- pruhy */
@layer komponenty {
  .vyzva {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: clamp(2.25rem, 5vw, 3.5rem);
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg,
      var(--barva-znacka-tmava), var(--barva-znacka) 55%, var(--barva-znacka-jasna));
    /* Gradient je v obou režimech z tmavých červených, popis je proto
       bílý. Dřív tu byla pevná světlá barva, která v tmavém režimu na
       světlém gradientu dávala jen 1,8:1. */
    color: var(--barva-na-znacce);
    text-align: center;
    display: grid;
    gap: 1.25rem;
    justify-items: center;

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background-image: radial-gradient(circle at 1px 1px,
        oklch(100% 0 0 / .18) 1px, transparent 0);
      background-size: 1.5rem 1.5rem;
      mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, #000, transparent 70%);
      -webkit-mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, #000, transparent 70%);
    }

    & h2 { font-size: var(--text-2xl); letter-spacing: -.025em; }
    & p { max-width: 38rem; opacity: .92; }
    & .tlacitko--druhotne {
      --tl-pozadi: oklch(100% 0 0 / .12);
      --tl-text: var(--barva-na-znacce);
      border-color: oklch(100% 0 0 / .35);
      backdrop-filter: blur(4px);

      &:hover { --tl-pozadi: oklch(100% 0 0 / .2); border-color: oklch(100% 0 0 / .6); }
    }
    & .tlacitko:not(.tlacitko--druhotne) {
      --tl-pozadi: var(--barva-povrch);
      --tl-text: var(--barva-znacka-tmava);
    }
  }

  .pruh-oznameni {
    padding: .6rem var(--mezera-strany);
    background: var(--barva-znacka-tmava);
    color: var(--barva-na-znacce);
    font-size: var(--text-sm);
    text-align: center;

    & a { color: inherit; text-underline-offset: .2em; }
  }
}

/* ------------------------------------------------------------ utility */
@layer utility {
  .jen-pro-ctecky {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .stred { text-align: center; }
  .tlumene { color: var(--barva-text-2); }
  .drobne { font-size: var(--text-sm); }
  .vetsi { font-size: var(--text-lg); }
  .bez-mezery { margin: 0; }
  .mezera-nahore { margin-block-start: clamp(1.5rem, 3vw, 2.5rem); }
  /* Užší sloupec uvnitř běžného obalu — levá hrana zůstane s ostatními sekcemi. */
  .uzsi { max-inline-size: var(--sirka-uzka); }
  /* Přímo na obalu zúží jeho obsah, ne obal sám; jinak by celá sekce
     uskočila doprostřed a hrana by se rozešla se zbytkem stránky. */
  .obal.uzsi {
    max-inline-size: none;

    & > * { max-inline-size: var(--sirka-uzka); }
  }
  .justify-stred { justify-content: center; }

  /* Odhalení při rolování — bez JS, jen tam, kde to prohlížeč umí */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .odhalit {
        animation: odhaleni linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 22%;
      }
      @keyframes odhaleni {
        from { opacity: 0; translate: 0 1.75rem; }
        to { opacity: 1; translate: 0; }
      }
    }
  }
}