/* ==========================================================================
   TRIONET – style.css
   První obrazovka webu: loader, navigace, oranžový hero s ověřením dostupnosti, rozcestník
   ========================================================================== */


/* PÍSMO – Figtree (proměnná tloušťka 300–900) přímo z tohoto webu (složka fonts/, licence SIL OFL):
   bez načítání z Google Fonts – rychlejší první vykreslení a žádné předávání IP adres návštěvníků Googlu.
   latin = základní znaky, latin-ext = česká diakritika (č, ř, š, ž, ů…). Oba soubory se přednačítají v <head>. */
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("fonts/figtree-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: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("fonts/figtree-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;
}

/* Liška ve formátu WebP s náhradou PNG (<picture>): obal se nepočítá do rozvržení, obrázek se chová jako dřív */
.hero__fox picture,
.assistant__fox picture {
  display: contents;
}


/* VARIABLES */
:root {
  /* Barvy */
  --color-white: #ffffff;
  --color-black: #15171c;
  --color-black-soft: #2b2e35;
  --color-text: #1b1e23;
  --color-muted: #646a75;
  --color-orange: #f7630d;         /* hlavní oranžová – pozadí hero a ikony */
  --color-orange-light: #ff7c2e;   /* světlejší konec přechodu (za liškou) */
  --color-orange-deep: #ea570a;    /* tmavší začátek přechodu (pod textem, kvůli čitelnosti) */
  --color-orange-text: #c4460b;    /* oranžový text – kontrast min. 4,5 : 1 na bílé i světle šedé */
  --color-peach: #ffeee3;          /* kolečka pod ikonami */
  --color-peach-soft: #fff6f0;     /* jemně oranžová dlaždice (Bezpečnější internet) */
  --color-peach-line: #ffe1cf;
  --color-gray-50: #f7f7f8;
  --color-gray-100: #eef0f2;
  --color-gray-200: #e1e4e8;
  --color-gray-400: #9aa1ad;
  --color-placeholder: #6b7280;
  --color-error: #b42318;

  /* Typografie */
  --font-sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Měřítko celého webu. Rozměry jsou v rem (1rem = 16 px při měřítku 1), takže tímhle číslem se
     zmenší nebo zvětší všechno najednou – jako zoom v prohlížeči. Na počítači je web o kousek
     oddálený (blok MĚŘÍTKO pod proměnnými); zlomy @media se řídí skutečnou šířkou okna a zůstávají v px. */
  --page-scale: 1;

  /* Rozměry */
  --container: 82.5rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --nav-height: 4.75rem;

  --section-pad: clamp(4rem, 8vw, 7.5rem);     /* svislé odsazení obsahu sekce (nahoře a dole) */

  /* Logo – výška a maximální šířka místa pro img/logo.png */
  --logo-height: 2.75rem;
  --logo-max-width: 13.75rem;
  --logo-placeholder-width: 10.5rem;

  /* Zaoblení – jemné rohy, žádné kulaté tvary */
  --radius-xs: 0.1875rem;      /* drobnosti uvnitř jiných prvků */
  --radius-sm: 0.25rem;      /* tlačítka, pole, štítky, přepínač */
  --radius-md: 0.375rem;      /* karty, dlaždice, panely, ikony ve čtverečku */
  --radius-lg: 0.375rem;      /* velké plochy */

  /* Pruh s adresou v hero – měkčí rohy podle předlohy */
  --radius-search: 1rem;   /* bílý pruh a potvrzení po odeslání */
  --radius-search-cta: 0.625rem; /* oranžové tlačítko */
  --radius-field: 0.5rem;     /* pole a menší prvky uvnitř pruhu */

  /* Stíny */
  --shadow-card: 0 1.75rem 3.5rem -2rem rgba(18, 20, 24, 0.32), 0 2px 0.5rem rgba(18, 20, 24, 0.04);
  --shadow-search: 0 1.5rem 2.75rem -1.5rem rgba(110, 36, 0, 0.6);

  /* Pohyb */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --transition: 0.25s var(--ease-out);
}


/* MĚŘÍTKO – na počítači (myš nebo touchpad, okno od 1100 px) je web oddálený na 90 %.
   Tablety a telefony zůstávají na 100 % (větší cíle pro prst; iPhone/iPad by při písmu pole pod 16 px
   stránku přibližoval). Vrácení: smazat tenhle blok, nebo nastavit 1. */
@media (min-width: 1100px) and (pointer: fine) {
  :root {
    --page-scale: 0.9;
  }
}


/* RESET */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  font-size: calc(var(--page-scale) * 100%); /* 100 % = výchozí písmo prohlížeče (16 px), viz --page-scale */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-height) + 1.5rem);
}

body {
  min-height: 100vh;
  overflow-x: clip;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg {
  display: block;
  max-width: 100%;
}

input,
button {
  font: inherit;
  color: inherit;
}

button {
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  padding: 0;
  list-style: none;
}

h1,
h2,
h3 {
  line-height: 1.1;
  text-wrap: balance;
}

[hidden] {
  display: none !important;
}


/* BASE */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}


/* SEKCE – stránka je souvislá bílá plocha, sekce jsou přes celou šířku okna a odděluje je jemná linka.
   Nová sekce v <main> potřebuje jen svislé odsazení (padding-block: var(--section-pad)); linku nad ní
   přidejte do výčtu níže. */
main > section {
  scroll-margin-top: -1.5rem; /* po skoku z navigace začne sekce hned pod horní lištou */
}

.internet,
.tv,
.business,
.other,
.faq,
.order {
  border-top: 1px solid var(--color-gray-100);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.nowrap {
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: -6.25rem;
  left: 1rem;
  z-index: 1100;
  padding: 0.625rem 1rem;
  font-weight: 700;
  color: var(--color-white);
  background: var(--color-black);
  border-radius: var(--radius-sm);
}

.skip-link:focus {
  top: 0.75rem;
}

:focus-visible {
  outline: 3px solid var(--color-black);
  outline-offset: 3px;
}

/* Ikony (Phosphor Icons a Bootstrap Icons) – plné, barví se přes currentColor */
.icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  fill: currentColor;
}


/* LOGO – rezervované místo pro img/logo.png (v navigaci i v loaderu)
   Dokud logo chybí, ukáže se decentní přerušovaný rámeček ve stejné velikosti. */
.logo-slot {
  display: inline-flex;
  align-items: center;
  height: var(--logo-height);
}

.logo-slot__img {
  width: auto;
  height: 100%;
  max-width: var(--logo-max-width);
  object-fit: contain;
  object-position: left center;
}

.logo-slot__placeholder {
  display: none;
  place-items: center;
  width: var(--logo-placeholder-width);
  height: 100%;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gray-400);
  border: 1.5px dashed var(--color-gray-200);
  border-radius: var(--radius-sm);
}

.logo-slot.is-missing .logo-slot__img {
  display: none;
}

.logo-slot.is-missing .logo-slot__placeholder {
  display: grid;
}


/* LOADER */
.loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: var(--color-white);
  transition: opacity 0.5s var(--ease-out), visibility 0.5s;
}

.loader__brand {
  --logo-height: 3.75rem;
  --logo-max-width: 17.5rem;
  --logo-placeholder-width: 13.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(0.625rem);
  animation: loader-brand 0.6s var(--ease-out) 0.15s forwards;
}

.loader__brand .logo-slot__img {
  object-position: center;
}

.loader__fiber {
  position: absolute;
  top: calc(50% + 3.5rem);
  left: 0;
  right: 0;
  height: 2px;
  overflow: hidden;
  background: var(--color-gray-100);
}

.loader__beam {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(247, 99, 13, 0) 0%, var(--color-orange) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  animation: loader-beam 0.75s cubic-bezier(0.65, 0, 0.35, 1) 0.1s forwards;
}

.loader__spark {
  position: absolute;
  top: calc(50% + 3.5625rem);
  left: 0;
  width: 0.625rem;
  height: 0.625rem;
  margin: -0.3125rem 0 0 -0.3125rem;
  background: var(--color-white);
  border-radius: 50%;
  box-shadow: 0 0 0 0.1875rem var(--color-orange), 0 0 0.875rem 0.1875rem rgba(247, 99, 13, 0.35);
  opacity: 0;
  animation: loader-spark 0.75s cubic-bezier(0.65, 0, 0.35, 1) 0.1s forwards;
}

.is-loaded .loader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Loader jen při první návštěvě v relaci – jinak ho skript v <head> hned vypne (bez probliknutí) */
.no-intro .loader {
  display: none;
}

/* Bez JavaScriptu se loader schová sám */
html:not(.js) .loader {
  animation: loader-out 0.5s var(--ease-out) 1s forwards;
}


/* NAVIGATION */
.site-header {
  /* levý a pravý okraj obsahu lišty: stejná osa jako obsah sekcí (.container) */
  --nav-side: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-white);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--transition), border-color var(--transition);
}

.site-header.is-scrolled {
  border-bottom-color: var(--color-gray-100);
  box-shadow: 0 0.625rem 1.875rem -1.25rem rgba(18, 20, 24, 0.25);
}

/* Logo vlevo, menu přesně uprostřed, sociální sítě vpravo */
.nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 2rem;
  max-width: none;
  min-height: var(--nav-height);
  padding-inline: var(--nav-side);
}

.brand {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-sm);
}

.nav__panel {
  display: contents;
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.4vw, 2.5rem);
}

.nav__link {
  position: relative;
  display: inline-block;
  padding: 0.75rem 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text);
  transition: color var(--transition);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--color-orange);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.35s var(--ease-out);
}

.nav__link:hover,
.nav__link.is-active {
  color: var(--color-orange-text);
}

.nav__link:hover::after,
.nav__link.is-active::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.nav__social {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.nav__social-link {
  display: grid;
  place-items: center;
  width: 2.625rem;
  height: 2.625rem;
  font-size: 1.5rem;
  color: var(--color-black);
  border-radius: var(--radius-sm);
  transition: color var(--transition), background-color var(--transition), transform var(--transition);
}

.nav__social-link:hover {
  color: var(--color-orange-text);
  background: var(--color-peach);
  transform: translateY(-1px);
}

/* MEGA MENU – <MegaMenu />: Internet, TV, Pro firmy a Ostatní služby mají pod sebou široký panel
   jen se svým obsahem – dlaždice s názvem a krátkým popisem. Panel je zarovnaný na hlavní kontejner
   a visí hned pod lištou (bez mezery). Otevírá ho script.js → initNavDropdown(). */
.nav {
  position: relative;
}

/* Položky menu přes celou výšku lišty – mezi položkou a panelem není mezera, kde by se menu zavřelo */
.nav__menu {
  align-self: stretch;
}

.nav__menu > li {
  display: flex;
  align-items: center;
}

.nav__dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

/* Šipka u položky je jen v mobilním menu (na počítači menu vyjede samo) */
.nav__caret {
  display: none;
  font-size: 0.8125rem;
  transition: transform 0.3s var(--ease-out);
}

.nav__item--mega.is-open .nav__dropdown-toggle {
  color: var(--color-orange-text);
}

.nav__item--mega.is-open .nav__dropdown-toggle::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.nav__item--mega.is-open .nav__caret {
  transform: rotate(180deg);
}

.mega {
  position: absolute;
  top: 100%;
  left: var(--nav-side);
  right: var(--nav-side);
  z-index: 10;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-top-color: var(--color-gray-100);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: 0 1.75rem 3rem -1.875rem rgba(18, 20, 24, 0.3);
  opacity: 0;
  visibility: hidden;
  /* Mizející panel už nereaguje na myš – jinak by ho kurzor stojící nad ním po zavření (Esc) znovu otevřel */
  pointer-events: none;
  transform: translateY(-0.375rem);
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out), visibility 0s linear 0.2s;
}

.nav__item--mega.is-open .mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out), visibility 0s;
}

/* Dlaždice sekce: název a krátký popis. Čtyři sloupce – panel se třemi dlaždicemi (Internet) má stejně
   široké dlaždice jako ostatní, takže se při přejíždění mezi položkami menu nic neposouvá. */
.mega__inner {
  display: grid;
  grid-template-columns: repeat(var(--mega-cols, 4), minmax(0, 1fr));
  gap: clamp(0.5rem, 1vw, 1rem);
  padding: 1.25rem clamp(0.75rem, 1.6vw, 1.5rem) 1.375rem;
}

.mega__tiles > li {
  display: flex;
}

.mega__tile {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.3125rem;
  padding: 0.875rem 1rem 1rem;
  border-radius: var(--radius-md);
  color: var(--color-text);
  transition: background-color var(--transition);
}

.mega__tile-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  transition: color var(--transition);
}

.mega__tile-title::after {
  content: "";
  flex-shrink: 0;
  width: 0.375rem;
  height: 0.375rem;
  border-top: 1.75px solid currentColor;
  border-right: 1.75px solid currentColor;
  opacity: 0;
  transform: translateX(-0.375rem) rotate(45deg);
  transition: opacity var(--transition), transform var(--transition);
}

.mega__tile-text {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--color-muted);
}

.mega__tile:hover,
.mega__tile:focus-visible {
  background: var(--color-peach-soft);
}

.mega__tile:hover .mega__tile-title,
.mega__tile:focus-visible .mega__tile-title {
  color: var(--color-orange-text);
}

.mega__tile:hover .mega__tile-title::after,
.mega__tile:focus-visible .mega__tile-title::after {
  opacity: 1;
  transform: translateX(0) rotate(45deg);
}

/* Bez JavaScriptu se menu na počítači otevře najetím myší nebo klávesnicí */
@media (min-width: 1200px) {
  html:not(.js) .nav__item--mega:hover .mega,
  html:not(.js) .nav__item--mega:focus-within .mega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }
}

.nav__toggle {
  display: none;
}


/* HERO */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--color-white);
  background: linear-gradient(100deg, var(--color-orange-deep) 0%, var(--color-orange) 48%, var(--color-orange-light) 100%);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.hero__shapes {
  width: 100%;
  height: 100%;
}

.hero__band {
  fill: none;
  stroke: var(--color-white);
  stroke-opacity: 0.045;
  stroke-width: 96;
}

.hero__band--wide {
  stroke-opacity: 0.035;
  stroke-width: 130;
}

.hero__orbit {
  fill: none;
  stroke: var(--color-white);
  stroke-opacity: 0.08;
  stroke-width: 1.5;
}

/* Světlo, které obíhá po optickém vlákně */
.hero__pulse {
  fill: none;
  stroke: var(--color-white);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 36 964;
  opacity: 0;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  grid-template-areas: "content fox";
  column-gap: clamp(1rem, 2.5vw, 2.5rem);
  /* Výška podle okna: pod hero se má na první obrazovku vejít i rozcestník (boxy 9,25rem + odsazení pásu) */
  min-height: clamp(32rem, calc(100svh - var(--nav-height) - 9.25rem - 2 * clamp(1.125rem, 2vw, 1.75rem)), 42.5rem);
}

.hero__content {
  grid-area: content;
  position: relative;
  z-index: 1;
  align-self: center;
  max-width: 46.25rem;
  padding-block: clamp(2.25rem, 6vh, 4.5rem) clamp(4rem, 9vh, 6.5rem);
  container-type: inline-size; /* velikost nadpisu se řídí šířkou textového sloupce */
}

.hero__title {
  font-size: clamp(2.375rem, 1.2rem + 3vw, 4.5rem); /* záloha pro starší prohlížeče */
  font-size: clamp(2rem, 9.8cqi, 4.625rem);           /* nadpis se vždy vejde na 2 řádky */
  font-weight: 750;
  line-height: 1.06;
  letter-spacing: -0.025em;
}

.hero__title-line {
  display: block;
}

.hero__lead {
  max-width: 32em;
  margin-top: clamp(1rem, 2vh, 1.25rem);
  font-size: clamp(1.0625rem, 0.95rem + 0.3vw, 1.25rem);
  font-weight: 400;
  line-height: 1.5;
  text-wrap: pretty;
}

/* Liška – stojí na spodní hraně hero a ukazuje doleva na pole s adresou */
.hero__fox {
  grid-area: fox;
  position: relative;
  pointer-events: none;
}

.hero__fox-img {
  position: absolute;
  left: 0;
  bottom: 0;
  width: auto;
  height: calc(100% - 0.875rem);
  max-width: calc(100% + var(--gutter) + max(0px, (100vw - var(--container)) / 2)); /* nejdál k pravému okraji okna */
  object-fit: contain;
  object-position: left bottom;
}

/* Kdyby liška ukazovala doprava, přidejte k <figure> třídu hero__fox--flip */
.hero__fox--flip .hero__fox-img {
  transform: scaleX(-1);
}

/* Náhradní plocha, dokud v img/ chybí fox.png */
.hero__fox.is-missing .hero__fox-img {
  display: none;
}

.hero__fox.is-missing::before {
  content: "img/fox.png";
  position: absolute;
  left: 0;
  bottom: 3rem;
  display: grid;
  place-items: center;
  width: min(100%, 26.25rem);
  aspect-ratio: 1;
  font-size: 0.9375rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.08);
  border: 2px dashed rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-lg);
}


/* AVAILABILITY FORM – bílý box: otázka nahoře, pod ní jedno pole na celou adresu
   (špendlík v broskvovém kolečku) a vedle oranžové tlačítko. Na úzkém displeji je tlačítko pod polem. */
.availability {
  container: availability / inline-size; /* rozložení boxu se řídí jeho vlastní šířkou */
  max-width: 42.5rem;
  margin-top: clamp(1.625rem, 3.6vh, 2.375rem);
}

.search {
  padding: 1.125rem 1.375rem 1.375rem;
  background: var(--color-white);
  border-radius: var(--radius-search);
  box-shadow: var(--shadow-search);
}

.search__title {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 1.1875rem;
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--color-black);
}

.search__row {
  display: flex;
  gap: 0.75rem;
}

/* Pole – světle šedý box s jemným rámečkem, vlevo špendlík (u e-mailu obálka) v broskvovém kolečku */
.search__field {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  height: 3.25rem;
  padding-left: 0.5rem;
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-field);
  cursor: text;
  transition: border-color var(--transition), background-color var(--transition), box-shadow var(--transition);
}

.search__field:hover {
  border-color: #cdd2d9;
}

/* Aktivní pole – oranžový rámeček a jemná záře */
.search__field:focus-within {
  background: var(--color-white);
  border-color: var(--color-orange);
  box-shadow: 0 0 0 0.1875rem rgba(247, 99, 13, 0.2);
}

.search__field.is-invalid {
  background: var(--color-white);
  border-color: var(--color-error);
  box-shadow: 0 0 0 0.1875rem rgba(180, 35, 24, 0.14);
}

.search__pin {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  font-size: 1.25rem;
  color: var(--color-orange);
  background: var(--color-peach);
  border-radius: 50%;
}

/* Samotné pole bez rámečku (rámeček má celý box) */
.search__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0 0.75rem 0 1rem;
  font-size: 0.9375rem;
  line-height: 1.25;
  color: var(--color-black);
  background: transparent;
  border: 0;
  border-radius: var(--radius-field);
  text-overflow: ellipsis;
}

.search__input::placeholder {
  color: var(--color-placeholder);
  opacity: 1;
}

.search__input:focus {
  outline: none;
}

/* Na dotykových displejích 16px písmo, aby iPhone při psaní stránku nezvětšoval. Nápověda v poli
   zůstává o stupeň menší – celá se tak vejde i do užšího pole na telefonu. */
@media (pointer: coarse) {
  .search__input {
    font-size: 1rem;
  }

  .search__input::placeholder {
    font-size: 0.9375rem;
  }
}

/* Hlavní CTA – oranžový přechod se světlejším odleskem vlevo nahoře a oranžovou září */
.search__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6875rem;
  flex-shrink: 0;
  height: 3.25rem;
  padding: 0 1.0625rem 0 1.625rem;
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--color-white);
  background: var(--color-orange-text); /* tmavší oranžová: bílý text má kontrast 5 : 1 (čitelnost, hodnocení přístupnosti) */
  border-radius: var(--radius-search-cta);
  box-shadow: 0 0.75rem 1.375rem -0.75rem rgba(247, 99, 13, 0.7);
  transition: background-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

/* Při najetí tlačítko plynule ztmavne */
.search__btn:hover {
  background: #a93c09;
  box-shadow: 0 0.875rem 1.5rem -0.75rem rgba(196, 70, 11, 0.75);
}

.search__btn:active {
  transform: scale(0.985);
}

.search__arrow {
  font-size: 1rem;
  transition: transform var(--transition);
}

.search__btn:hover .search__arrow {
  transform: translateX(0.1875rem);
}

/* Užší box (tablety, mobil) – tlačítko přes celou šířku pod polem (vedle tlačítka by se do pole
   už nevešla celá nápověda) */
@container availability (max-width: 34.0625rem) {
  .search {
    padding: 1.125rem 1.125rem 1.25rem;
  }

  .search__row {
    flex-wrap: wrap;
  }

  .search__btn {
    flex: 1 1 100%;
  }
}

@container availability (max-width: 20.5625rem) {
  .search {
    padding: 1rem 0.875rem 1rem;
  }

  .search__title {
    font-size: 1.0625rem;
  }

  .search__input {
    padding-left: 0.625rem;
  }

  /* Nápověda v poli se na úzkém telefonu zmenší, aby se vešla celá (psaný text zůstává 16 px) */
  .search__input::placeholder {
    font-size: 0.875rem;
  }
}

@container availability (max-width: 18.6875rem) {
  .search__input::placeholder {
    font-size: 0.8125rem;
  }
}

/* Starší prohlížeče bez container queries – na mobilu tlačítko pod polem */
@supports not (container-type: inline-size) {
  @media (max-width: 639px) {
    .search__row {
      flex-wrap: wrap;
    }

    .search__btn {
      flex: 1 1 100%;
    }
  }
}

/* Našeptávač adres – obce a jejich ulice (umísťuje ho script.js pod pole s adresou) */
.suggest {
  position: absolute;
  z-index: 90;
  max-height: 18.75rem;
  overflow-y: auto;
  padding: 0.375rem;
  background: var(--color-white);
  border-radius: var(--radius-field);
  box-shadow: 0 1.5rem 3rem -1.25rem rgba(18, 20, 24, 0.35), 0 0 0 1px rgba(18, 20, 24, 0.06);
  animation: suggest-in 0.18s var(--ease-out);
}

.suggest__option {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  font-size: 0.9375rem;
  line-height: 1.3;
  color: var(--color-text);
  border-radius: 0.375rem;
  cursor: pointer;
}

.suggest__option .icon {
  font-size: 1rem;
  color: var(--color-gray-400);
}

.suggest__option mark {
  font-weight: 700;
  color: var(--color-black);
  background: none;
}

.suggest__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* U ulice vpravo obec, ve které leží */
.suggest__meta {
  flex-shrink: 0;
  margin-left: auto;
  padding-left: 0.75rem;
  font-size: 0.8125rem;
  color: var(--color-muted);
  white-space: nowrap;
}

.suggest__option:hover,
.suggest__option[aria-selected="true"] {
  background: var(--color-gray-50);
}

.suggest__option[aria-selected="true"] .icon {
  color: var(--color-orange);
}

/* Chybová hláška – tmavý štítek pod polem, dobře čitelný na oranžové */
.availability__error {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: fit-content;
  margin-top: 1rem;
  padding: 0.4375rem 1rem 0.4375rem 0.4375rem;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-white);
  background: rgba(21, 23, 28, 0.9);
  border-radius: var(--radius-field);
  animation: field-error-in 0.25s var(--ease-out);
}

.availability__error::before {
  content: "!";
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 1.375rem;
  height: 1.375rem;
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--color-black);
  background: var(--color-white);
  border-radius: 50%;
}

/* 2. krok – připomenutí zadané adresy */
.availability__note {
  max-width: 40em;
  margin-top: 1rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  text-wrap: pretty;
}

.availability__note strong {
  font-weight: 700;
}

.availability__link {
  margin-left: 0.25rem;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.1875rem;
  transition: text-decoration-thickness var(--transition);
}

.availability__link:hover {
  text-decoration-thickness: 0.15625rem;
}

/* Potvrzení po odeslání (vkládá script.js) */
.availability-success {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 45rem;
  margin-top: clamp(1.625rem, 3.6vh, 2.375rem);
  padding: 1rem 0.875rem 1rem 1rem;
  color: var(--color-text);
  background: var(--color-white);
  border-radius: var(--radius-search);
  box-shadow: var(--shadow-search);
  animation: success-in 0.5s var(--ease-out) both;
}

.availability-success:focus {
  outline: none;
}

.availability-success__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  font-size: 1.375rem;
  color: var(--color-white);
  background: var(--color-orange);
  border-radius: 50%;
}

.availability-success__body {
  flex: 1 1 0;
  min-width: 0;
  line-height: 1.35;
}

.availability-success__title {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--color-black);
}

.availability-success__text {
  color: var(--color-muted);
}

.availability-success__again {
  flex-shrink: 0;
  height: 3rem;
  padding: 0 1.375rem;
  font-weight: 700;
  color: var(--color-black);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-search-cta);
  transition: background-color var(--transition), border-color var(--transition);
}

.availability-success__again:hover {
  background: var(--color-gray-100);
  border-color: #cdd2d9;
}


/* ROZCESTNÍK – <QuickNav />: čtyři bílé boxy na bílém pásu hned pod hero. V boxu je velká obrysová
   ikona, svislá linka a název sekce. Při najetí myší box zoranžoví (bílá ikona i text), lehce se zvedne
   a ikona se rozpohybuje (signál Wi-Fi, přehrávání, kufřík, dlaždice).
   Barvy boxu jsou v proměnných --qn-*, zvýrazněný stav je jen přepisuje. */
.quicknav {
  padding: clamp(1.125rem, 2vw, 1.75rem) 0;
  background: var(--color-white);
}

.quicknav__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.625rem, 1.1vw, 1rem);
}

.quicknav__item {
  display: flex;
  min-width: 0;
}

.quicknav__link {
  --qn-bg: var(--color-white);
  --qn-border: var(--color-gray-100);
  --qn-text: var(--color-black);
  --qn-icon: var(--color-orange);
  --qn-rule: var(--color-gray-200);
  --qn-shadow: 0 1px 2px rgba(18, 20, 24, 0.04), 0 0.75rem 1.625rem -1rem rgba(18, 20, 24, 0.28);

  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: clamp(0.875rem, 1.4vw, 1.25rem);
  min-width: 0;
  min-height: 9.25rem;
  padding: 1.25rem clamp(1.125rem, 1.9vw, 1.75rem);
  color: var(--qn-text);
  background: var(--qn-bg);
  border: 1px solid var(--qn-border);
  border-radius: 0.625rem;
  box-shadow: var(--qn-shadow);
  transition: color var(--transition), background-color var(--transition), border-color var(--transition),
    box-shadow var(--transition), transform var(--transition);
}

/* Svislá linka mezi ikonou a názvem */
.quicknav__link::before {
  content: "";
  flex-shrink: 0;
  order: 1;
  width: 1px;
  height: 3.5rem;
  background: var(--qn-rule);
  transition: background-color var(--transition);
}

/* Obrysové ikony (vlastní kresba) */
.quicknav__icon {
  flex-shrink: 0;
  order: 0;
  width: 2.875rem;
  height: 2.875rem;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--qn-icon);
  transition: color var(--transition);
}

/* Název je všude aspoň 19 px tučně – bílý text na oranžové tak splňuje kontrast pro velké písmo */
.quicknav__title {
  order: 2;
  min-width: 0;
  font-size: clamp(1.1875rem, 0.95rem + 0.5vw, 1.375rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

/* Části ikon, které se při najetí hýbou, se otáčejí a zvětšují kolem vlastního středu */
.quicknav__play,
.quicknav__case,
.quicknav__tile {
  transform-box: fill-box;
  transform-origin: center;
}

/* Šipka „přehrát“ na obrazovce televize – ukáže se až při najetí */
.quicknav__play {
  fill: currentColor;
  stroke-width: 1.2;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.2s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Zvýrazněný box (klepnutí na dotykovém displeji, fokus z klávesnice): oranžová plocha, bílá ikona i text */
.quicknav__link:active,
.quicknav__link:focus-visible {
  --qn-bg: var(--color-orange);
  --qn-border: var(--color-orange);
  --qn-text: var(--color-white);
  --qn-icon: var(--color-white);
  --qn-rule: rgba(255, 255, 255, 0.45);
  --qn-shadow: 0 1px 2px rgba(247, 99, 13, 0.1), 0 0.75rem 1.375rem -0.875rem rgba(247, 99, 13, 0.45);
}

.quicknav__link:focus-visible {
  outline-offset: 3px;
}

.quicknav__link:focus-visible .quicknav__play {
  opacity: 1;
  transform: scale(1);
}

/* Najetí myší: box zoranžoví, lehce se zvedne a ikona se rozpohybuje */
@media (hover: hover) {
  .quicknav__link:hover {
    --qn-bg: var(--color-orange);
    --qn-border: var(--color-orange);
    --qn-text: var(--color-white);
    --qn-icon: var(--color-white);
    --qn-rule: rgba(255, 255, 255, 0.45);
    --qn-shadow: 0 1px 2px rgba(247, 99, 13, 0.1), 0 0.75rem 1.375rem -0.875rem rgba(247, 99, 13, 0.45);
    transform: translateY(-0.1875rem);
  }

  .quicknav__link:hover:active {
    transform: translateY(-1px);
  }

  /* Internet: oblouky signálu se rozsvěcují od tečky ven */
  .quicknav__link:hover .quicknav__wave {
    animation: quicknav-signal 1.3s ease-in-out infinite backwards;
  }

  .quicknav__link:hover .quicknav__wave--2 {
    animation-delay: 0.16s;
  }

  .quicknav__link:hover .quicknav__wave--3 {
    animation-delay: 0.32s;
  }

  /* Televize: na obrazovce vyskočí šipka „přehrát“ a jemně pulzuje */
  .quicknav__link:hover .quicknav__play {
    opacity: 1;
    transform: scale(1);
    animation: quicknav-play 1.3s ease-in-out 0.35s infinite;
  }

  /* Pro firmy: kufřík se pohupuje za ucho */
  .quicknav__link:hover .quicknav__case {
    transform-origin: 50% 0%;
    animation: quicknav-swing 1.1s ease-in-out infinite;
  }

  /* Ostatní služby: dlaždice se rozsvěcují dokola */
  .quicknav__link:hover .quicknav__tile {
    animation: quicknav-tile 1.4s ease-in-out infinite backwards;
  }

  .quicknav__link:hover .quicknav__tile--2 {
    animation-delay: 0.14s;
  }

  .quicknav__link:hover .quicknav__tile--3 {
    animation-delay: 0.28s;
  }

  .quicknav__link:hover .quicknav__tile--4 {
    animation-delay: 0.42s;
  }
}

@keyframes quicknav-signal {
  0%, 100% { opacity: 0.25; }
  35%, 70% { opacity: 1; }
}

@keyframes quicknav-play {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.22); }
}

@keyframes quicknav-swing {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-9deg); }
  75% { transform: rotate(8deg); }
}

@keyframes quicknav-tile {
  0%, 100% { opacity: 0.3; transform: scale(0.78); }
  30%, 60% { opacity: 1; transform: scale(1); }
}


/* ==========================================================================
   SPOLEČNÉ PRVKY SEKCÍ – nadpis sekce, perex, odkazy, tlačítka, rozbalování
   ========================================================================== */

.eyebrow {
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-orange-text);
}

.section-title {
  font-size: clamp(2.125rem, 1.2rem + 2.8vw, 3.75rem);
  font-weight: 750;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--color-black);
}

/* Klíčové slovo nadpisu v oranžové (kontrast pro velký text 4,3 : 1) */
.section-title__accent {
  color: var(--color-orange-text);
}

/* Sekce, na kterou se posouvá z navigace (nebo formulář z asistenta), dostane fokus kvůli čtečkám – bez rámečku */
section[tabindex="-1"]:focus,
.availability[tabindex="-1"]:focus {
  outline: none;
}

.section-lead {
  font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
  line-height: 1.55;
  color: var(--color-muted);
  text-wrap: pretty;
}

/* Perex hned pod nadpisem sekce */
.section-title + .section-lead {
  margin-top: 1rem;
}

/* Textový odkaz s šipkou (sekundární CTA) */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  color: var(--color-black);
  text-decoration: underline;
  text-decoration-color: var(--color-orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.375rem;
  transition: text-decoration-color var(--transition);
}

.text-link .icon {
  font-size: 1rem;
  transition: transform var(--transition);
}

.text-link:hover {
  text-decoration-color: currentColor;
}

.text-link:hover .icon {
  transform: translateX(0.1875rem);
}

/* Tlačítka */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  height: 3.125rem;
  padding: 0 1.5rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.btn:active {
  transform: scale(0.985);
}

.btn--dark {
  color: var(--color-white);
  background: var(--color-black);
  box-shadow: 0 0.625rem 1.25rem -0.75rem rgba(21, 23, 28, 0.55);
}

.btn--dark:hover {
  background: var(--color-black-soft);
  box-shadow: 0 0.875rem 1.625rem -0.875rem rgba(21, 23, 28, 0.6);
}

.btn--outline {
  color: var(--color-black);
  background: var(--color-white);
  box-shadow: inset 0 0 0 1.5px var(--color-gray-200);
}

.btn--outline:hover {
  box-shadow: inset 0 0 0 1.5px var(--color-black);
}

/* „Mám zájem“ u tarifů a balíčků – při najetí myší zoranžoví, text bude bílý
   (stejná oranžová jako vybraná záložka přepínače) */
@media (hover: hover) {
  .btn--interest:hover {
    color: var(--color-white);
    background: var(--color-orange-text);
    box-shadow: inset 0 0 0 1.5px var(--color-orange-text), 0 0.75rem 1.375rem -0.875rem rgba(196, 70, 11, 0.7);
  }
}

/* Na dotykových displejích zoranžoví při klepnutí */
.btn--interest:active {
  color: var(--color-white);
  background: var(--color-orange-text);
  box-shadow: inset 0 0 0 1.5px var(--color-orange-text);
}

.btn--sm {
  height: 2.5rem;
  padding: 0 1.125rem;
  font-size: 0.9375rem;
}

.btn--lg {
  gap: 0.75rem;
  height: 3.625rem;
  padding: 0 1.5rem 0 1.75rem;
  font-size: 1.0625rem;
}

.btn__arrow {
  font-size: 1rem;
  transition: transform var(--transition);
}

.btn:hover .btn__arrow {
  transform: translateX(0.1875rem);
}

/* Rozbalovací obsah – plynulá změna výšky, zavřený obsah není vidět ani pro čtečky */
.collapse {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.35s var(--ease-out), visibility 0s linear 0.35s;
}

.collapse.is-open {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 0.35s var(--ease-out), visibility 0s linear 0s;
}

.collapse__inner {
  min-height: 0;
  overflow: hidden;
}

/* Šipka u rozbalovacích tlačítek se po otevření otočí */
[data-collapse-toggle] .icon {
  transition: transform 0.3s var(--ease-out);
}

[data-collapse-toggle][aria-expanded="true"] .toggle-caret {
  transform: rotate(180deg);
}

[data-collapse-toggle][aria-expanded="true"] .toggle-plus {
  transform: rotate(45deg);
}


/* ==========================================================================
   INTERNET – tarify (vykresluje script.js z dat v tarify.js)
   ========================================================================== */

.internet {
  padding-block: var(--section-pad);
}

/* Úvod sekce: štítek a nadpis, pod nimi rovnou přepínač technologií (stejně v sekci TV) */
.internet__pricing,
.tv__pricing {
  margin-top: clamp(2rem, 4vw, 3.25rem);
}

.internet__noscript,
.tv__noscript {
  margin-top: 1.5rem;
  color: var(--color-muted);
}

/* TechnologyTabs – přepínač technologií (a poskytovatelů TV), oranžový jezdec ukazuje vybranou */
.tech-tabs {
  --count: 3;
  --active: 0;
  position: relative;
  display: inline-grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  padding: 0.3125rem;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  box-shadow: 0 0.5rem 1.25rem -0.875rem rgba(18, 20, 24, 0.25);
}

.tech-tabs:empty {
  display: none;
}

.tech-tabs__thumb {
  position: absolute;
  top: 0.3125rem;
  bottom: 0.3125rem;
  left: 0.3125rem;
  width: calc((100% - 0.625rem) / var(--count));
  background: var(--color-orange-text); /* stejná oranžová jako slovo v nadpisu – bílý text je dobře čitelný */
  border-radius: var(--radius-sm);
  box-shadow: 0 0.5rem 1.125rem -0.625rem rgba(196, 70, 11, 0.7);
  transform: translateX(calc(100% * var(--active)));
  transition: transform 0.4s var(--ease-out);
}

.tech-tabs__tab {
  position: relative;
  z-index: 1;
  min-width: 9.75rem;
  height: 3rem;
  padding: 0 1.375rem;
  font-size: 1rem;
  font-weight: 650;
  white-space: nowrap;
  color: var(--color-text);
  border-radius: var(--radius-sm);
  transition: color 0.3s var(--ease-out);
}

.tech-tabs__tab:hover {
  color: var(--color-orange-text);
}

.tech-tabs__tab[aria-selected="true"] {
  color: var(--color-white);
}

.tech-tabs__short {
  display: none;
}

/* Panel jedné technologie – při přepnutí se jemně objeví */
.tech-panel {
  padding-top: 1.75rem;
}

.tech-panel.is-entering {
  animation: panel-in 0.35s var(--ease-out);
}

/* Hlavička panelu: nadpis s popisem vlevo, u TV vpravo logo poskytovatele */
.tech-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem clamp(1.5rem, 4vw, 4rem);
}

.tech-panel__intro {
  min-width: 0;
  max-width: 46em;
}

/* Logo poskytovatele TV – dlaždice 16 : 9 s logem na barevné ploše (čtvercový obrázek se ořízne
   na střed); když se obrázek nenačte, místo pro něj zmizí */
.tech-panel__logo {
  flex-shrink: 0;
}

.tech-panel__logo img {
  display: block;
  width: clamp(9.375rem, 13vw, 11.5rem);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.tech-panel__logo.is-missing {
  display: none;
}

.tech-panel__title {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-black);
}

.tech-panel__text {
  margin-top: 0.25rem;
  line-height: 1.55;
  color: var(--color-muted);
  text-wrap: pretty;
}

/* Odkazy u TV („Přehled programů“, registrace) – otevřou se v novém okně */
.tech-panel__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin-top: 0.625rem;
}

.tech-panel__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 2px 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-orange-text);
  border-radius: var(--radius-xs);
}

.tech-panel__link:hover {
  text-decoration: underline;
  text-underline-offset: 0.1875rem;
}

/* Šipka ↗ u odkazů ven (přehled programů, registrace u poskytovatele TV) */
.icon-external {
  font-size: 0.8125em;
  transition: transform var(--transition);
}

.btn .icon-external {
  margin-left: -0.1875rem;
}

a:hover > .icon-external {
  transform: translate(2px, -2px);
}

/* FeaturedPlans – hlavní karty vedle sebe */
.plan-grid {
  --cols: 3;
  --plan-gap: clamp(1rem, 1.7vw, 1.5rem);
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--plan-gap);
  margin-top: 1.75rem;
}

.plan-grid--4 {
  --cols: 4;
}

/* Dvě karty mají stejný tvar jako tři karty optiky – zabírají dvě třetiny šířky, zarovnané vlevo
   (při přepínání technologií zůstává první karta na stejném místě) */
.plan-grid--2 {
  --cols: 3;
}

.plan-grid--1 {
  --cols: 1;
  max-width: 27.5rem;
}

.plan-grid__item {
  display: flex;
}

/* PlanCard – rychlost, cena, výhody, CTA */
.plan-card {
  position: relative; /* kvůli tachometru v pravém horním rohu */
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: clamp(1.375rem, 2vw, 1.875rem);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 2px rgba(18, 20, 24, 0.04);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.plan-card:hover {
  border-color: #cdd2da;
  box-shadow: 0 1.5rem 2.75rem -1.875rem rgba(18, 20, 24, 0.3), 0 1px 2px rgba(18, 20, 24, 0.04);
  transform: translateY(-2px);
}

/* Doporučený tarif – silnější oranžový rámeček a štítek, zbytek karty zůstává bílý */
.plan-card--highlight,
.plan-card--highlight:hover {
  border-color: var(--color-orange);
  box-shadow: 0 0 0 1px var(--color-orange), 0 1.5rem 2.75rem -1.875rem rgba(204, 74, 11, 0.45);
}

/* Tachometr v pravém horním rohu karty (jen internet): půlkruhová stupnice s ručičkou.
   --gauge = poloha ručičky v % stupnice (nastavuje script.js podle rychlosti tarifu):
   nejpomalejší z hlavních tarifů nízko, prostřední v půlce, nejrychlejší skoro na maximu.
   Tachometr je statický, bez animace. */
.plan-card__gauge {
  position: absolute;
  top: clamp(1.25rem, 1.9vw, 1.75rem);
  right: clamp(1.375rem, 2vw, 1.875rem);
  width: 5.25rem;
  pointer-events: none;
}

.gauge {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.gauge__track,
.gauge__value {
  fill: none;
  stroke-width: 6;
  stroke-linecap: round;
}

.gauge__track {
  stroke: var(--color-gray-200);
}

.gauge__value {
  stroke: var(--color-orange);
  stroke-dasharray: var(--gauge) 100;
}

.gauge__needle {
  stroke: var(--color-black);
  stroke-width: 2.5;
  stroke-linecap: round;
  transform: rotate(calc(var(--gauge) * 1.8deg));
  /* střed otáčení = čep ručičky v souřadnicích SVG (viewBox 72 × 44) – ne rem, s měřítkem stránky se nemění */
  transform-box: view-box;
  transform-origin: 36px 38px;
}

.gauge__pivot {
  fill: var(--color-black);
}

.plan-card__label {
  align-self: flex-start;
  justify-self: start;
  min-height: 1.625rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.625rem;
  color: var(--color-muted);
}

.plan-card__label--badge {
  padding: 0 0.75rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--color-white);
  background: var(--color-orange-text);
  border-radius: var(--radius-sm);
}

.plan-card__name {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--color-black);
}

.plan-card__label + .plan-card__name {
  margin-top: 0.875rem;
}

/* Rychlost – nejdůležitější údaj na kartě */
.plan-card__speed-block {
  margin-top: 0.875rem;
}

.plan-card__speed {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 0.5rem;
  line-height: 1;
  color: var(--color-black);
}

.plan-card__speed-value {
  font-size: clamp(2.5rem, 1.9rem + 1.3vw, 3.25rem);
  font-weight: 750;
  letter-spacing: -0.035em;
}

.plan-card__speed-unit {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Stahování/odesílání malým písmem pod rychlostí („60/30 Mb/s“) – u technologií se speedDetail v tarify.js */
.plan-card__speed-detail {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

.plan-card__speed--text .plan-card__speed-value {
  font-size: clamp(1.875rem, 1.6rem + 0.6vw, 2.25rem);
  letter-spacing: -0.025em;
}

/* Cena – akční cena velká, standardní cena menší pod ní */
.plan-card__price {
  margin-top: 1.375rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-gray-100);
}

.plan-card__price-main {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 0.375rem;
  line-height: 1.1;
}

.plan-card__amount {
  font-size: clamp(1.625rem, 1.3rem + 0.6vw, 1.875rem);
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--color-black);
  white-space: nowrap;
}

.plan-card__amount--text {
  font-size: 1.5rem;
}

.plan-card__star,
.plan-row__star {
  margin-left: -0.25rem;
  font-weight: 700;
  color: var(--color-orange-text);
}

.plan-card__period {
  font-size: 0.9375rem;
  color: var(--color-muted);
}

/* Cena po skončení akce – oranžově, aby bylo hned vidět, kolik bude internet stát potom */
.plan-card__regular {
  margin-top: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--color-orange-text);
}

/* Výhody */
.plan-card__benefits,
.plan-row__benefits {
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--color-text);
}

.plan-card__benefits {
  display: grid;
  gap: 0.625rem;
  margin-top: 1.375rem;
}

.plan-card__benefits li,
.plan-row__benefits li {
  display: flex;
  gap: 0.625rem;
}

.plan-card__benefits .icon,
.plan-row__benefits .icon {
  margin-top: 0.1875rem;
  font-size: 0.875rem;
  color: var(--color-orange);
}

.plan-card__benefits.plan-card__more-list {
  margin-top: 0;
  padding-top: 0.625rem;
}

.plan-card__more {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.375rem;
  margin-top: 0.75rem;
  padding: 0.25rem 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-orange-text);
  border-radius: var(--radius-xs);
}

.plan-card__more .icon {
  font-size: 0.75rem;
}

.plan-card__more:hover {
  text-decoration: underline;
  text-underline-offset: 0.1875rem;
}

.plan-card__note,
.plan-row__note {
  display: flex;
  gap: 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--color-muted);
}

.plan-card__note {
  margin-top: 1.125rem;
}

.plan-card__note .icon,
.plan-row__note .icon {
  margin-top: 2px;
  font-size: 0.875rem;
}

.plan-card__footer {
  margin-top: auto;
  padding-top: 1.625rem;
}

.plan-card__cta {
  width: 100%;
}

/* Části karet zarovnané napříč řadou (CSS subgrid): rychlost, cena, výhody i tlačítko
   začínají u všech karet ve stejné výšce. Starší prohlížeče ukážou karty bez zarovnání. */
@supports (grid-template-rows: subgrid) {
  .plan-grid {
    row-gap: 0;
    margin-bottom: calc(var(--plan-gap) * -1);
  }

  .plan-grid__item {
    display: grid;
    grid-row: span 7;
    grid-template-rows: subgrid;
  }

  /* 7. řádek = mezera mezi řadami karet */
  .plan-grid__item::after {
    content: "";
    grid-row: 7;
    height: var(--plan-gap);
  }

  .plan-card {
    display: grid;
    grid-row: 1 / span 6;
    grid-template-rows: subgrid;
  }

  .plan-card__label { grid-row: 1; }
  .plan-card__name { grid-row: 2; }
  .plan-card__speed-block { grid-row: 3; }
  .plan-card__price { grid-row: 4; }
  .plan-card__body { grid-row: 5; }
  .plan-card__footer { grid-row: 6; }
}

/* Stejný tvar karet ve všech záložkách Internetu i TV: karta je vysoká aspoň jako karty optiky.
   Volné místo zůstane mezi výhodami a tlačítkem – tlačítka jsou tak vždy dole ve stejné výšce.
   Jen na širších obrazovkách, kde jsou všechny hlavní karty v jedné řadě. */
@media (min-width: 860px) {
  @supports (grid-template-rows: subgrid) {
    .plan-grid {
      --plan-card-min: 38rem;
      grid-template-rows: auto auto auto auto 1fr auto auto;
      min-height: calc(var(--plan-card-min) + var(--plan-gap));
    }
  }
}

/* AllPlans – rozbalovací přehled všech tarifů */
.all-plans {
  margin-top: 1.25rem;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
}

.all-plans__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  width: 100%;
  min-height: 3.5rem;
  padding: 0.5rem 1.25rem;
  font-weight: 700;
  color: var(--color-black);
  border-radius: calc(var(--radius-md) - 1px);
  transition: background-color var(--transition);
}

.all-plans__toggle:hover {
  background: var(--color-gray-50);
}

.all-plans__toggle .icon {
  font-size: 0.875rem;
}

.all-plans.is-open .all-plans__toggle {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.plan-list {
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-gray-100);
}

/* PlanRow – jeden řádek přehledu */
.plan-row + .plan-row {
  border-top: 1px solid var(--color-gray-100);
}

.plan-row__main {
  position: relative;
  display: grid;
  grid-template-columns: minmax(8.75rem, 0.85fr) minmax(0, 1.25fr) minmax(11.875rem, 1fr) 6rem 9.75rem;
  grid-template-areas: "speed name price toggle cta";
  align-items: center;
  gap: 0.375rem 1.5rem;
  padding: 1rem 1.25rem 1rem 1.5rem;
  transition: background-color var(--transition);
}

.plan-row:hover .plan-row__main,
.plan-row.is-open .plan-row__main {
  background: var(--color-gray-50);
}

.plan-row.is-open {
  background: var(--color-gray-50);
}

.plan-row:last-child,
.plan-row:last-child .plan-row__main {
  border-radius: 0 0 calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px);
}

.plan-row__speed {
  grid-area: speed;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.plan-row__speed-value {
  font-size: 1.25rem;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--color-black);
  white-space: nowrap;
}

.plan-row__speed-detail {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.plan-row__name {
  grid-area: name;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.625rem;
  font-weight: 650;
  line-height: 1.3;
  color: var(--color-black);
}

.plan-row__badge {
  padding: 0.1875rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-white);
  background: var(--color-orange-text);
  border-radius: var(--radius-sm);
}

.plan-row__price {
  grid-area: price;
  line-height: 1.3;
}

.plan-row__amount {
  font-size: 1.0625rem;
  font-weight: 750;
  color: var(--color-black);
  white-space: nowrap;
}

.plan-row__star {
  margin-left: 1px;
}

.plan-row__period {
  font-size: 0.875rem;
  color: var(--color-muted);
}

.plan-row__regular {
  display: block;
  margin-top: 2px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-orange-text);
}

.plan-row__toggle {
  grid-area: toggle;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 2.5rem;
  padding: 0 0.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition), color var(--transition);
}

.plan-row__toggle:hover {
  color: var(--color-black);
  background: var(--color-gray-100);
}

.plan-row__toggle .icon {
  font-size: 0.75rem;
}

.plan-row__cta {
  grid-area: cta;
}

.plan-row__detail-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.75rem;
  padding: 2px 1.5rem 1.25rem;
}

.plan-row__benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.plan-row__benefits .icon {
  margin-top: 0.25rem;
}

.plan-row__detail-cta {
  display: none;
}

/* PricingTerms – krátká poznámka a rozbalovací podmínky */
.pricing-terms {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 1.25rem;
  margin-top: 1.25rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-muted);
}

.pricing-terms__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
  font-weight: 700;
  color: var(--color-orange-text);
  border-radius: var(--radius-xs);
}

.pricing-terms__toggle:hover {
  text-decoration: underline;
  text-underline-offset: 0.1875rem;
}

.pricing-terms__toggle .icon {
  font-size: 0.75rem;
}

.pricing-terms__body {
  flex-basis: 100%;
}

.pricing-terms__list {
  display: grid;
  gap: 0.5rem;
  max-width: 60em;
  margin-top: 0.375rem;
  padding: 1.25rem 1.5rem 1.25rem 2.625rem;
  list-style: disc;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
}

.pricing-terms__list li::marker {
  color: var(--color-orange);
}

/* INTERNET – responzivita */

/* Čtyři karty → 2 + 2 */
@media (max-width: 1099px) {
  .plan-grid--4 {
    --cols: 2;
  }
}

/* Tři hlavní karty → 2 + 1 (třetí karta uprostřed), dvě karty vedle sebe */
@media (max-width: 859px) {
  .plan-grid--2,
  .plan-grid--3 {
    --cols: 2;
  }

  .plan-grid--3 > .plan-grid__item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - clamp(1rem, 1.7vw, 1.5rem) / 2);
  }
}

/* Užší notebooky: řádky přehledu těsněji */
@media (max-width: 1099px) {
  .plan-row__main {
    grid-template-columns: minmax(8.125rem, 0.85fr) minmax(0, 1.25fr) minmax(11.25rem, 1fr) 5.625rem 9rem;
    column-gap: 1rem;
  }
}

/* Tablet: v řádku přehledu jen rychlost · název · cena · detail, tlačítko je v rozbaleném detailu */
@media (max-width: 899px) {
  .plan-row__main {
    grid-template-columns: minmax(8.25rem, 0.8fr) minmax(0, 1.2fr) minmax(10.625rem, 1fr) auto;
    grid-template-areas: "speed name price toggle";
  }

  .plan-row__cta {
    display: none;
  }

  .plan-row__detail-cta {
    display: inline-flex;
  }
}

/* Mobil: kompaktní řádky – rychlost a cena vedle sebe, detail a CTA po rozkliknutí */
@media (max-width: 639px) {
  .plan-row__main {
    grid-template-columns: minmax(0, 1fr) auto 2rem;
    grid-template-areas:
      "speed price toggle"
      "name  price toggle";
    gap: 2px 0.875rem;
    padding: 0.875rem 0.75rem 0.875rem 1rem;
  }

  .plan-row__cta {
    display: none;
  }

  .plan-row__name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-muted);
  }

  .plan-row__badge {
    padding: 2px 0.5rem;
    font-size: 0.6875rem;
  }

  .plan-row__price {
    text-align: right;
  }

  .plan-row__period {
    font-size: 0.8125rem;
  }

  /* Celý řádek funguje jako tlačítko „Detail“ */
  .plan-row__toggle {
    position: static;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    background: var(--color-gray-50);
    border-radius: var(--radius-sm);
  }

  .plan-row__toggle::after {
    content: "";
    position: absolute;
    inset: 0;
  }

  .plan-row__toggle-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .plan-row__detail-body {
    flex-direction: column;
    align-items: stretch;
    gap: 0.875rem;
    padding: 0 1rem 1.125rem;
  }

  .plan-row__benefits {
    display: grid;
    gap: 0.5rem;
  }

  .plan-row__detail-cta {
    display: flex;
    width: 100%;
  }
}

/* Mobil */
@media (max-width: 639px) {
  .tech-tabs {
    display: grid;
    width: 100%;
  }

  .tech-tabs__tab {
    min-width: 0;
    height: 2.875rem;
    padding: 0 0.5rem;
    font-size: 0.9375rem;
  }

  /* Na mobilu kratší názvy („Koax“, „Kabelová TV“) – v datech tabShort */
  .tech-tabs__long {
    display: none;
  }

  .tech-tabs__short {
    display: inline;
  }

  .tech-panel {
    padding-top: 1.5rem;
  }

  /* Logo poskytovatele nad nadpisem, menší */
  .tech-panel__head {
    flex-direction: column-reverse;
    align-items: flex-start;
  }

  .tech-panel__logo img {
    width: 8.5rem;
  }

  .plan-grid,
  .plan-grid--2,
  .plan-grid--3,
  .plan-grid--4 {
    --cols: 1;
    margin-top: 1.375rem;
  }

  .plan-grid--3 > .plan-grid__item:last-child:nth-child(odd) {
    grid-column: auto;
    justify-self: stretch;
    width: auto;
  }

  /* Karty jsou pod sebou – prázdný štítek, který jinak drží zarovnání v řadě, není potřeba */
  .plan-card__label:empty {
    display: none;
  }

  .plan-card__label:empty + .plan-card__name {
    margin-top: 0;
  }

  .plan-card__footer {
    padding-top: 1.375rem;
  }

  .pricing-terms__list {
    padding: 1rem 1.125rem 1rem 2.125rem;
  }
}

/* Velmi úzké mobily – delší název na přepínači se zalomí do dvou řádků, v přehledu jen ceny bez „/ měsíc“ */
@media (max-width: 374px) {
  .tech-tabs__tab {
    padding: 0 0.25rem;
    font-size: 0.875rem;
    line-height: 1.15;
    white-space: normal;
  }

  .plan-row__main {
    column-gap: 0.625rem;
  }

  .plan-row__period,
  .plan-row__regular-period {
    display: none;
  }
}


/* ==========================================================================
   TV – balíčky Sledování TV a GeniusTV (stejné komponenty jako Internet, data v tarify.js)
   ========================================================================== */

.tv {
  padding-block: var(--section-pad);
}

/* Jediný balíček a vedle něj seznam TV stanic (kabelová TV Hoštka) */
.plan-with-aside {
  display: grid;
  grid-template-columns: minmax(0, 25rem) minmax(0, 1fr);
  align-items: start; /* karta si drží svou výšku, i když je seznam stanic delší */
  gap: clamp(1rem, 1.7vw, 1.5rem);
  margin-top: 1.75rem;
}

.plan-with-aside > .plan-grid {
  max-width: none;
  margin-top: 0;
}

.plan-aside {
  align-self: stretch; /* kratší seznam se natáhne do výšky karty */
  padding: clamp(1.375rem, 2vw, 1.875rem);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-md);
}

.plan-aside__title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-black);
}

.plan-aside__title .icon {
  font-size: 1.25rem;
  color: var(--color-orange);
}

/* Stanice za sebou, každá s malou oranžovou tečkou */
.plan-aside__list {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 1.125rem;
  margin-top: 0.875rem;
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--color-text);
}

.plan-aside__list li {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  white-space: nowrap;
}

.plan-aside__list li::before {
  content: "";
  flex-shrink: 0;
  width: 0.25rem;
  height: 0.25rem;
  background: var(--color-orange);
  border-radius: 50%;
}

.plan-aside__list .plan-aside__more {
  color: var(--color-muted);
}

.plan-aside__list .plan-aside__more::before {
  display: none;
}

.plan-aside__note {
  margin-top: 1rem;
  padding-top: 0.875rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-muted);
  border-top: 1px solid var(--color-gray-200);
}

/* Dodavatelé programové nabídky – drobně na konci sekce */
.tv__footnote {
  margin-top: 1.5rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-muted);
}

/* Doplňkové služby a vybavení – nízký rozbalovací řádek pod balíčky, po otevření ceník ve dvou skupinách */
.extras {
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
}

.extras__toggle {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 0.875rem clamp(1rem, 2vw, 1.5rem);
  text-align: left;
  border-radius: calc(var(--radius-md) - 1px);
  transition: background-color var(--transition);
}

.extras__toggle:hover {
  background: var(--color-gray-50);
}

.extras.is-open .extras__toggle {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.extras__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.375rem;
  color: var(--color-orange);
  background: var(--color-peach);
  border-radius: var(--radius-md);
}

.extras__head {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.extras__title {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-black);
}

.extras__summary {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-muted);
}

.extras__action {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-black);
}

.extras__action .icon {
  font-size: 0.875rem;
}

.extras__body {
  padding: 1.125rem clamp(1rem, 2vw, 1.5rem) clamp(1.125rem, 2vw, 1.5rem);
  border-top: 1px solid var(--color-gray-100);
}

.extras__text {
  max-width: 52em;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-muted);
  text-wrap: pretty;
}

.extras__groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem clamp(1.75rem, 4vw, 3.5rem);
  margin-top: 1.25rem;
}

.extras__group-title {
  padding-bottom: 0.625rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-orange-text);
  border-bottom: 1px solid var(--color-gray-200);
}

/* Položka: název a popis vlevo, cena vpravo */
.extras__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 1.25rem;
  padding: 0.75rem 0;
}

.extras__item + .extras__item {
  border-top: 1px solid var(--color-gray-100);
}

.extras__name {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-black);
}

.extras__desc {
  grid-column: 1;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--color-muted);
  text-wrap: pretty;
}

.extras__price {
  grid-column: 2;
  grid-row: 1 / span 2;
  line-height: 1.35;
  text-align: right;
  white-space: nowrap;
}

.extras__amount {
  font-size: 0.9375rem;
  font-weight: 750;
  color: var(--color-black);
}

.extras__unit {
  font-size: 0.8125rem;
  color: var(--color-muted);
}

.extras__note {
  margin-top: 0.75rem;
  padding-top: 0.875rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-muted);
  border-top: 1px solid var(--color-gray-100);
}


/* TV – responzivita (karty a přehled balíčků přebírají pravidla sekce Internet) */

/* Tablet: karta užší, seznam stanic vedle ní */
@media (max-width: 1023px) {
  .plan-with-aside {
    grid-template-columns: minmax(0, 18.75rem) minmax(0, 1fr);
  }
}

/* Užší tablet a mobil: skupiny doplňkových služeb pod sebou */
@media (max-width: 767px) {
  .extras__groups {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Užší tablet a mobil: seznam stanic pod kartou */
@media (max-width: 767px) {
  .plan-with-aside {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 639px) {
  .plan-with-aside {
    margin-top: 1.375rem;
  }

  .plan-aside {
    padding: 1.125rem;
  }

  .plan-aside__list {
    gap: 0 0.875rem;
    font-size: 0.875rem;
  }
}

/* Mobil: v řádku jen ikona, název s výčtem a šipka */
@media (max-width: 639px) {
  .extras__toggle {
    gap: 0.75rem;
    padding: 0.75rem 0.75rem 0.75rem 0.875rem;
  }

  .extras__icon {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1.25rem;
  }

  .extras__title {
    font-size: 1rem;
  }

  .extras__summary {
    font-size: 0.8125rem;
  }

  .extras__action {
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: var(--color-gray-50);
    border-radius: var(--radius-sm);
  }

  .extras__action-label {
    display: none;
  }

  .extras__body {
    padding: 0.875rem 0.875rem 1rem;
  }

  .extras__item {
    column-gap: 0.875rem;
  }
}


/* ==========================================================================
   SLUŽBY – karty v sekcích Pro firmy a Ostatní služby: ikona, název, popis,
   pod čarou tři výhody a tlačítko se šipkou (oranžové až po najetí myší).
   Pro firmy: plná oranžová ikona, obsah vlevo a vpravo dole jemná kresba ke službě.
   Ostatní služby: obsah na střed, krátká oranžová linka nahoře, fajfky v kolečku
   a oranžová šipka. Tablet 2 × 2, mobil pod sebou.
   ========================================================================== */

.business {
  padding-block: var(--section-pad);
}

.service-grid {
  --service-gap: clamp(1rem, 1.7vw, 1.5rem);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--service-gap);
  margin-top: clamp(2rem, 4vw, 3.25rem);
}

.service-grid__item {
  display: flex;
}

/* Karta služby – stejný rámeček a stín jako karta tarifu */
.service-card {
  position: relative;
  isolation: isolate; /* kresba vpravo dole zůstane pod textem */
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: clamp(1.375rem, 2vw, 1.875rem);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 2px rgba(18, 20, 24, 0.04);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.service-card__icon {
  display: grid;
  place-items: center;
  justify-self: start;
  align-self: start;
  width: 3.25rem;
  height: 3.25rem;
  font-size: 1.625rem;
  color: var(--color-orange);
  background: var(--color-peach);
  border-radius: var(--radius-md);
  transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}

.service-card__name {
  margin-top: 1.25rem;
  font-size: clamp(1.25rem, 1.1rem + 0.35vw, 1.5rem);
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-black);
}

.service-card__text {
  margin-top: 0.625rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-muted);
  text-wrap: pretty;
}

/* Tři výhody pod čarou – stejné fajfky jako u tarifů */
.service-card__list {
  display: grid;
  align-content: start;
  gap: 0.625rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--color-text);
  border-top: 1px solid var(--color-gray-100);
}

.service-card__list li {
  display: flex;
  gap: 0.625rem;
}

.service-card__list .icon {
  margin-top: 0.1875rem;
  font-size: 0.875rem;
  color: var(--color-orange);
}

/* Fajfky v broskvovém kolečku (Ostatní služby) */
.service-card__list--round li {
  align-items: center;
  gap: 0.75rem;
}

.service-card__list--round .icon {
  box-sizing: content-box;
  margin-top: 0;
  padding: 0.375rem;
  font-size: 0.75rem;
  background: var(--color-peach);
  border-radius: 50%;
}

.service-card__footer {
  margin-top: auto;
  padding-top: 1.625rem;
}

/* Tlačítko podle délky textu, se šipkou; oranžové až po najetí myší (btn--interest) */
.service-card__cta {
  gap: 0.875rem;
}

/* Jemná kresba ke službě vpravo dole (Pro firmy) – pod textem, ořízne ji roh karty */
.service-card__art {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: min(46%, 11.25rem);
  aspect-ratio: 1;
  overflow: hidden;
  color: #f6c9ad;
  border-bottom-right-radius: calc(var(--radius-md) - 1px);
  pointer-events: none;
}

.service-card__art svg {
  position: absolute;
  right: -8%;
  bottom: -8%;
  width: 116%;
  height: 116%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service-card__art svg * {
  vector-effect: non-scaling-stroke;
}

/* Pro firmy – plná oranžová ikona s bílým symbolem */
.service-card--solid .service-card__icon {
  color: var(--color-white);
  background: var(--color-orange);
}

/* Ostatní služby – obsah karty na střed: krátká oranžová linka nahoře uprostřed, ikona, název a popis,
   výhody jako blok uprostřed (fajfky zůstávají pod sebou) a tlačítko s oranžovou šipkou */
.service-card--accent {
  text-align: center;
}

.service-card--accent::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: 4.5rem;
  height: 0.1875rem;
  background: var(--color-orange);
  transform: translateX(-50%);
  pointer-events: none;
}

.service-card--accent .service-card__icon {
  justify-self: center;
  align-self: center;
}

.service-card--accent .service-card__list {
  grid-template-columns: fit-content(100%);
  justify-content: center;
  text-align: left;
}

.service-card--accent .btn__arrow {
  color: var(--color-orange);
}

.service-card--accent .service-card__cta:active .btn__arrow {
  color: currentColor;
}

@media (hover: hover) {
  .service-card:hover {
    border-color: #cdd2da;
    box-shadow: 0 1.5rem 2.75rem -1.875rem rgba(18, 20, 24, 0.3), 0 1px 2px rgba(18, 20, 24, 0.04);
    transform: translateY(-2px);
  }

  .service-card:hover .service-card__icon {
    color: var(--color-white);
    background: var(--color-orange);
  }

  .service-card--solid:hover .service-card__icon {
    background: var(--color-orange-text);
  }

  .service-card--accent .service-card__cta:hover .btn__arrow {
    color: currentColor;
  }
}

/* Názvy, čáry, výhody i tlačítka zarovnané napříč řadou karet (CSS subgrid, stejně jako u tarifů) */
@supports (grid-template-rows: subgrid) {
  .service-grid {
    row-gap: 0;
    margin-bottom: calc(var(--service-gap) * -1);
  }

  .service-grid__item {
    display: grid;
    grid-row: span 6;
    grid-template-rows: subgrid;
  }

  /* 6. řádek = mezera mezi řadami karet */
  .service-grid__item::after {
    content: "";
    grid-row: 6;
    height: var(--service-gap);
  }

  .service-card {
    display: grid;
    grid-row: 1 / span 5;
    grid-template-rows: subgrid;
  }

  .service-card__icon { grid-row: 1; }
  .service-card__name { grid-row: 2; }
  .service-card__text { grid-row: 3; align-self: start; }
  .service-card__list { grid-row: 4; }
  .service-card__footer { grid-row: 5; }
}

/* Tablet a menší notebook: 2 × 2 (karty s výhodami potřebují víc místa) */
@media (max-width: 1199px) {
  .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobil: karty pod sebou */
@media (max-width: 639px) {
  .service-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .service-card {
    padding: 1.375rem 1.25rem;
  }

  .service-card__icon {
    width: 3rem;
    height: 3rem;
    font-size: 1.5rem;
  }

  .service-card__name {
    margin-top: 1rem;
  }

  .service-card__footer {
    padding-top: 1.375rem;
  }
}



/* ==========================================================================
   OSTATNÍ SLUŽBY – Hosting, Hardware a software, Kamery (karty stejné jako Pro firmy)
   a pod nimi ceník doplňkových služeb (řádky jako přehled tarifů u Internetu,
   vykresluje script.js z tarify.js). Tablet 2 + 1, mobil pod sebou.
   ========================================================================== */

.other {
  padding-block: var(--section-pad);
}

/* Tři karty vedle sebe */
.service-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Širší karty (tři vedle sebe na počítači) – o něco větší ikona a písmo, jako na předloze */
@media (min-width: 1100px) {
  .service-grid--3 .service-card__icon {
    width: 3.75rem;
    height: 3.75rem;
    font-size: 1.875rem;
  }

  .service-grid--3 .service-card__name {
    font-size: clamp(1.375rem, 1.2rem + 0.4vw, 1.75rem);
  }

  .service-grid--3 .service-card__text,
  .service-grid--3 .service-card__list {
    font-size: 1rem;
  }

  .service-grid--3 .service-card__list--round .icon {
    padding: 0.4375rem;
  }
}

/* Karta nebo ceník, na který se skočí z menu, dostane fokus kvůli čtečkám – bez rámečku */
.service-grid__item[tabindex="-1"]:focus,
.price-list[tabindex="-1"]:focus,
.faq__item[tabindex="-1"]:focus,
.about__block-head[tabindex="-1"]:focus {
  outline: none;
}

/* PriceList – nadpis a krátký popis, pod nimi řádky v rámečku jako přehled tarifů */
.price-list {
  margin-top: clamp(4rem, 7vw, 6.5rem);
}

.price-list__title {
  font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem);
  font-weight: 750;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--color-black);
}

.price-list__text {
  max-width: 46em;
  margin-top: 0.625rem;
  line-height: 1.55;
  color: var(--color-muted);
  text-wrap: pretty;
}

.price-list__noscript {
  color: var(--color-muted);
}

.price-list__rows {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding: 0;
  list-style: none;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
}

/* PriceRow – název s popisem · cena · „Mám zájem“ (stejné rozměry jako řádek tarifu) */
.price-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(11rem, auto) 9.75rem;
  grid-template-areas: "service price cta";
  align-items: center;
  gap: 0.625rem 1.5rem;
  padding: 1rem 1.25rem 1rem 1.5rem;
  transition: background-color var(--transition);
}

.price-row + .price-row {
  border-top: 1px solid var(--color-gray-100);
}

.price-row:hover {
  background: var(--color-gray-50);
}

.price-row:first-child {
  border-radius: calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0 0;
}

.price-row:last-child {
  border-radius: 0 0 calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px);
}

.price-row__service {
  grid-area: service;
  min-width: 0;
}

.price-row__name {
  font-weight: 650;
  line-height: 1.3;
  color: var(--color-black);
}

.price-row__desc {
  max-width: 62em;
  margin-top: 0.1875rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-muted);
  text-wrap: pretty;
}

.price-row__price {
  grid-area: price;
  line-height: 1.3;
  white-space: nowrap;
}

.price-row__amount {
  font-size: 1.0625rem;
  font-weight: 750;
  color: var(--color-black);
}

.price-row__amount--free {
  color: var(--color-orange-text);
}

.price-row__unit {
  font-size: 0.875rem;
  color: var(--color-muted);
}

.price-row__cta {
  grid-area: cta;
}

.price-list__note {
  margin-top: 1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-muted);
}

/* Tři karty zůstávají vedle sebe i tam, kde Pro firmy přejdou na 2 × 2 */
@media (max-width: 1199px) {
  .service-grid.service-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Užší notebooky: řádky ceníku těsněji (jako u tarifů) */
@media (max-width: 1099px) {
  .price-row {
    grid-template-columns: minmax(0, 1fr) minmax(10rem, auto) 9rem;
    column-gap: 1rem;
  }
}

/* Tablet: dvě karty vedle sebe, třetí pod nimi uprostřed */
@media (max-width: 859px) {
  .service-grid.service-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-grid--3 > .service-grid__item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - var(--service-gap) / 2);
  }
}

/* Užší tablet a mobil: cena a tlačítko pod popisem */
@media (max-width: 767px) {
  .price-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "service service"
      "price   cta";
    gap: 0.75rem 1rem;
  }
}

/* Mobil: karty pod sebou */
@media (max-width: 639px) {
  .service-grid.service-grid--3 {
    grid-template-columns: minmax(0, 1fr);
  }

  .service-grid--3 > .service-grid__item:last-child:nth-child(odd) {
    width: 100%;
  }

  .price-row {
    padding: 0.875rem 0.875rem 0.875rem 1rem;
  }
}



/* ==========================================================================
   O NÁS – úvod s velkou fotografií, pás s čísly, „S kým spolupracujeme“ (loga partnerů)
   a mapa Mělnicka s dostupností internetu.
   Editoriální styl: typografie, bílé místo, dělicí linky, fotografie a velká čísla.
   Fotografie: img/about-trionet.jpg, loga partnerů: img/partneri/.
   ========================================================================== */

/* Bez linky nahoře – sekci otevírá oranžový pás, který zasahuje do spodního odsazení předchozí sekce */
.about {
  background: var(--color-white);
}


/* ==========================================================================
   ORANŽOVÝ PÁS – šikmý oranžový pás se vzorem „vlny signálu“ na začátku sekce O nás
   (přechod z Ostatních služeb). Vzor je součástí SVG v index.html.
   Plátno SVG 3200 × 420 je vždy vycentrované a pás ho jen ořízne podle šířky obrazovky:
   na počítači 1 : 1, na tabletu 0,8 a na mobilu 0,55.
   --cx = která svislice plátna je uprostřed obrazovky.
   Horních 88 jednotek plátna leží ve spodním odsazení předchozí sekce.
   ========================================================================== */

.netband {
  --s: 1;
  --cx: 1600;
  position: relative;
  height: calc(26.25rem * var(--s));
  margin-top: calc(-5.5rem * var(--s));
  margin-bottom: calc(-1.25rem * var(--s));
  overflow: hidden;
  pointer-events: none;
}

/* Za pásem stačí menší horní odsazení úvodu O nás (bílá plocha pod pásem už ho odděluje) */
@media (min-width: 1024px) {
  .netband + .about__hero > .container {
    padding-top: clamp(3.5rem, 6vw, 5.5rem);
  }
}

.netband__svg {
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(200rem * var(--s));
  max-width: none;
  height: calc(26.25rem * var(--s));
  margin-left: calc(var(--cx) * var(--s) * -0.0625rem);
  overflow: visible;
}

/* Plocha pásu má oranžový přechod jako v hero (tmavší vlevo, světlejší vpravo). Přechod #netband-fill,
   ořez #netband-clip i barva a síla oblouků jsou přiřazené přímo v SVG (atributy) – odkazy url(#…)
   by některé prohlížeče v externím CSS nenašly. */

@media (max-width: 1199px) {
  .netband {
    --s: 0.8;
    --cx: 1540;
  }
}

@media (max-width: 639px) {
  .netband {
    --s: 0.55;
    --cx: 1455;
  }
}

/* Fotografie – dokud soubor chybí, je místo ní tmavá plocha s jemnou oranžovou září a názvem souboru */
.photo-slot {
  position: relative;
  overflow: hidden;
  margin: 0;
  background:
    radial-gradient(90% 80% at 78% 24%, rgba(247, 99, 13, 0.42), rgba(247, 99, 13, 0) 62%),
    linear-gradient(160deg, var(--color-black-soft) 0%, var(--color-black) 72%);
}

.photo-slot__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* <picture> (WebP s náhradou JPEG) se nepočítá do rozvržení – obrázek vyplní místo jako dřív */
.photo-slot picture {
  display: contents;
}

.photo-slot.is-missing .photo-slot__img {
  display: none;
}

.photo-slot.is-missing::after {
  content: attr(data-slot);
  position: absolute;
  right: 1.25rem;
  bottom: 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.62);
}

/* Úvod: text vlevo, velká fotografie kanceláře vpravo (v kontejneru stránky) */
.about__hero {
  position: relative;
}

.about__hero > .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  column-gap: clamp(2.5rem, 4.5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(4.5rem, 8vw, 7.5rem);
}

.about__intro {
  max-width: 40rem;
}

.about__title {
  font-size: clamp(2.5rem, 1.3rem + 3.3vw, 4.5rem);
  font-weight: 750;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--color-black);
}

/* „28 let“ oranžově (kontrast pro velký text 4,3 : 1) */
.about__accent {
  color: var(--color-orange-text);
  white-space: nowrap;
}

/* Druhý řádek nadpisu menší */
.about__title-sub {
  display: block;
  margin-top: 0.14em;
  font-size: 0.6em;
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.about__lead {
  margin-top: clamp(1.5rem, 2.6vw, 2.25rem);
  font-size: clamp(1.125rem, 1.04rem + 0.3vw, 1.3125rem);
  line-height: 1.6;
  color: var(--color-text);
  text-wrap: pretty;
}

.about__text {
  margin-top: 1rem;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-muted);
  text-wrap: pretty;
}

.about__text strong {
  font-weight: 650;
  color: var(--color-text);
}

/* Fotografie s diagonálním řezem vlevo, vedle řezu tenká oranžová linka */
.about__media-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
}

.about__media {
  position: absolute;
  inset: 0;
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
}

.about__slash {
  position: absolute;
  top: 0;
  left: -1rem;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.about__slash line {
  stroke: var(--color-orange);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

/* Hlavní čísla – pás mezi linkami přes celou šířku stránky, jen typografie a svislé oddělovače */
.about__stats {
  border-block: 1px solid var(--color-gray-200);
}

.stat-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

.stat {
  container-type: inline-size; /* velikost čísla se řídí šířkou sloupce */
  padding: 0.375rem clamp(0.75rem, 2vw, 2rem);
  text-align: center;
}

.stat + .stat {
  border-left: 1px solid var(--color-gray-200);
}

.stat__value {
  font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.75rem);
  font-size: min(clamp(2.25rem, 1.4rem + 2.6vw, 3.75rem), 22cqi); /* i „120 000+“ se vejde do úzkého sloupce */
  font-weight: 750;
  line-height: 1;
  letter-spacing: -0.035em;
  white-space: nowrap;
  color: var(--color-black);
}

.stat__value--accent {
  color: var(--color-orange-text);
}

.stat__unit {
  font-size: 0.6em;
  letter-spacing: -0.02em;
}

.stat__label {
  margin-top: 0.875rem;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* Společná hlavička bloků pod čísly (štítek s linkou, nadpis, krátký text) */
.about__block-title {
  max-width: 21em;
  font-size: clamp(1.875rem, 1.2rem + 1.9vw, 3rem);
  font-weight: 750;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--color-black);
  text-wrap: balance;
}

.about__block-lead {
  max-width: 36em;
  margin-top: 1.125rem;
  font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
  line-height: 1.6;
  color: var(--color-muted);
  text-wrap: pretty;
}

/* S kým spolupracujeme – loga partnerů v mřížce 4 × 2, buňky oddělené jen linkami */
.about__partners {
  padding-block: clamp(4.5rem, 8vw, 7.5rem);
}

.partners {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--color-gray-200);
}

.partner {
  display: grid;
  place-items: center;
  min-height: clamp(7rem, 11vw, 9.5rem);
  padding: 1.5rem clamp(1rem, 2.6vw, 2.5rem);
  border-bottom: 1px solid var(--color-gray-200);
  border-left: 1px solid var(--color-gray-200);
}

.partner:nth-child(4n + 1) {
  border-left: 0;
}

/* Logo se vejde do buňky bez ohledu na své rozměry */
.partner__logo {
  width: auto;
  max-width: min(100%, 11.25rem);
  height: auto;
  max-height: 3.75rem;
  object-fit: contain;
}

/* Název partnera je vidět jen tehdy, když se logo nepodaří načíst */
.partner__name {
  display: none;
  font-size: 1.125rem;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-align: center;
  color: var(--color-muted);
}

.partner.is-missing .partner__logo {
  display: none;
}

.partner.is-missing .partner__name {
  display: block;
}

/* Mobil: loga po dvou */
@media (max-width: 639px) {
  .partners {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .partner {
    min-height: 6rem;
    padding: 1.25rem 1rem;
  }

  .partner:nth-child(4n + 1) {
    border-left: 1px solid var(--color-gray-200);
  }

  .partner:nth-child(2n + 1) {
    border-left: 0;
  }

  .partner__logo {
    max-height: 3rem;
  }
}

/* Realizované dotační tituly – pod partnery: název a popis projektu, pod nimi loga programu v jednom řádku
   (všechna stejně vysoká; logo EU tak není menší než ostatní). Odstup nahoře dává spodní okraj partnerů. */
.about__grants {
  padding-bottom: clamp(4.5rem, 8vw, 7.5rem);
}

.grant {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.75rem, 3.5vw, 2.5rem);
  border-top: 1px solid var(--color-gray-200);
}

.grant__title {
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--color-black);
}

.grant__text {
  max-width: 46em;
  margin-top: 0.75rem;
  line-height: 1.6;
  color: var(--color-muted);
  text-wrap: pretty;
}

.grant__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem clamp(1.75rem, 4vw, 3.5rem);
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

.grant__logo {
  width: auto;
  height: clamp(3rem, 7.5vw, 4.5rem);
  object-fit: contain;
  object-position: left center;
}

/* Mobil: logo EU na samostatném řádku, ministerstvo a plán obnovy vedle sebe pod ním */
@media (max-width: 639px) {
  .grant__logos li:first-child {
    flex-basis: 100%;
  }

  .grant__logos li:first-child .grant__logo {
    height: 3.5rem;
  }
}


/* Tablet a mobil: úvod pod sebou – text, pod ním fotografie přes celou šířku obsahu */
@media (max-width: 1023px) {
  .about__hero > .container {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2.5rem;
    padding-block: 4rem 3rem;
  }

  .about__intro {
    max-width: 42.5rem;
  }

  .about__media-wrap {
    max-width: 48rem;
  }

  /* Diagonála zůstane naznačená na horní hraně fotografie */
  .about__media {
    clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%);
  }

  .about__slash {
    display: none;
  }
}

/* Tablet a mobil: čísla 2 × 2 */
@media (max-width: 1023px) {
  .stat-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-block: 0.5rem;
  }

  .stat {
    padding: 1.625rem 0.625rem;
  }

  .stat + .stat {
    border-left: 0;
  }

  .stat:nth-child(even) {
    border-left: 1px solid var(--color-gray-200);
  }

  .stat:nth-child(n + 3) {
    border-top: 1px solid var(--color-gray-200);
  }

  .stat__label {
    letter-spacing: 0.12em;
  }
}

@media (max-width: 639px) {
  .about__hero > .container {
    padding-block: 3rem 2.25rem;
  }

  .about__text {
    font-size: 1rem;
  }
}

/* Nejužší telefony: čísla o kus menší, ať se vejdou dvě vedle sebe */
@media (max-width: 374px) {
  .stat {
    padding-inline: 0.375rem;
  }

  .stat__value {
    font-size: 1.875rem;
    font-size: min(1.875rem, 22cqi);
  }
}


/* ==========================================================================
   ČASTÉ DOTAZY (FAQ) – vlevo nadpis a odkaz na asistenta, vpravo otázky oddělené linkami.
   Rozbalování obstarává stejný mechanismus jako u podmínek tarifů ([data-collapse-toggle]).
   ========================================================================== */

.faq {
  padding-block: var(--section-pad);
}

.faq__layout {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 6vw, 6.5rem);
  align-items: start;
}

/* Nadpis zůstává při procházení otázek vedle nich */
.faq__intro {
  position: sticky;
  top: calc(var(--nav-height) + 2.5rem);
}

.faq__ask {
  margin-top: 1.75rem;
}

/* Bez JavaScriptu asistent není – tlačítko by nic neudělalo */
html:not(.js) .faq__ask {
  display: none;
}

.faq__list {
  border-top: 1px solid var(--color-gray-200);
}

.faq__item {
  border-bottom: 1px solid var(--color-gray-200);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 1.5rem 0;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: -0.01em;
  text-align: left;
  color: var(--color-black);
  text-wrap: pretty;
  transition: color var(--transition);
}

.faq__question .icon {
  flex-shrink: 0;
  font-size: 1.125rem;
  color: var(--color-orange);
}

@media (hover: hover) {
  .faq__question:hover {
    color: var(--color-orange-text);
  }
}

.faq__question[aria-expanded="true"] {
  color: var(--color-orange-text);
}

.faq__answer p {
  max-width: 62ch;
  padding: 0 2.5rem 1.625rem 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-muted);
  text-wrap: pretty;
}

.faq__answer a {
  font-weight: 600;
  color: var(--color-orange-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.1875rem;
}

/* Bez JavaScriptu jsou odpovědi rovnou rozbalené */
html:not(.js) .faq .collapse {
  grid-template-rows: 1fr;
  visibility: visible;
}

html:not(.js) .faq__question .icon {
  display: none;
}

/* Tablet a mobil: nadpis nad otázkami */
@media (max-width: 1023px) {
  .faq__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .faq__intro {
    position: static;
  }
}

@media (max-width: 639px) {
  .faq__question {
    gap: 1rem;
    padding: 1.25rem 0;
  }

  .faq__answer p {
    padding-right: 0;
    font-size: 0.9375rem;
  }
}


/* ==========================================================================
   FORMULÁŘ „MÁM ZÁJEM“ (#formular) – vlevo nadpis s jednou větou a pod ním blok Kontakt (jeden seznam:
   vlevo popisek, vpravo údaje; sídlo a fakturační údaje jsou sbalené), vpravo formulář v kartě:
   čtyři dlaždice na výběr služeb (zaškrtávací, jde vybrat víc), pod nimi ke každé zaškrtnuté jeden
   výběr (tarif, TV balíček, služba – po dvou vedle sebe, přesně pod dvojicemi dlaždic), pak údaje
   zákazníka, zpráva a tlačítko. Formulář vyplňuje zbytek šířky až po pravou osu obsahu; v široké kartě
   jsou údaje po třech vedle sebe (dvě řady), v užší po dvou, na mobilu pod sebou.
   Bez nápověd pod poli – povinná pole mají hvězdičku, co chybí, řekne formulář při odeslání.
   Na tabletu a mobilu je pořadí: úvod, formulář, kontakt. Pod tím je mapa přes celou šířku (níže).
   Výběry tarifů a služeb doplňuje script.js → initOrderSection().
   ========================================================================== */

/* Dole sekci uzavírá mapa (.locator) přes celou šířku */
.order {
  padding-top: var(--section-pad);
}

/* Vlevo úvod a pod ním kontakt, vpravo formulář přes oba řádky.
   Levý sloupec začíná na stejné ose jako ostatní sekce a formulář končí na stejné ose vpravo
   (nejvýš je široký --order-form-max). Okraje stránky jsou první a poslední sloupec mřížky. */
.order__layout {
  --order-form-max: 70rem;
  --order-side: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  display: grid;
  max-width: none;
  padding-inline: 0;
  grid-template-columns:
    var(--order-side)
    clamp(20rem, calc((min(100%, var(--container)) - 2 * var(--gutter)) * 0.325), 27.5rem)
    clamp(2.5rem, 5.4vw, 6.5rem)
    minmax(0, var(--order-form-max))
    minmax(var(--order-side), 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    ". intro    . main ."
    ". contacts . main .";
  align-items: start;
}

.order__intro {
  grid-area: intro;
}

/* Krátká věta pod nadpisem – když se zalomí, tak na dva stejně dlouhé řádky */
.order__intro .section-lead {
  text-wrap: balance;
}

.order__main {
  container: order-main / inline-size; /* šířka karty formuláře – podle ní se skládají pole vedle sebe */
  grid-area: main;
}

.order__contacts {
  grid-area: contacts;
}

/* KONTAKT – jeden klidný seznam se stejnými řádky: vlevo šedý popisek, vpravo údaje, mezi řádky
   jemná linka. Všechny údaje začínají na stejné svislé ose; zvýrazněné je jen hlavní číslo a e-mail.
   V úzkém sloupci (menší notebook, telefon) je popisek nad údaji.
   Sídlo a fakturační údaje jsou pod seznamem sbalené – rozbalí je řádek s šipkou. */
.contacts {
  container: contacts / inline-size;
  margin-top: clamp(2.125rem, 3.6vw, 3rem);
}

/* Blok, na který skočí „Kontakt“ z menu, dostane fokus kvůli čtečkám – bez rámečku */
.contacts[tabindex="-1"]:focus {
  outline: none;
}

/* Stejný nadpis jako „Co vás zajímá?“ a „Vaše údaje“ ve formuláři */
.contacts__title {
  font-size: clamp(1.1875rem, 1.1rem + 0.3vw, 1.375rem);
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--color-black);
}

.contacts__list {
  margin-top: 0.875rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-gray-200);
}

.contacts__row {
  display: grid;
  grid-template-columns: 8.25rem minmax(0, 1fr);
  gap: 2px 1rem;
  padding: 0.875rem 0;
  border-top: 1px solid var(--color-gray-200);
}

.contacts__label,
.contacts__key {
  color: var(--color-muted);
}

/* Telefony a e-mail – každý na svém řádku, černě; hlavní číslo a e-mail tučně */
.contacts__link {
  display: block;
  width: fit-content;
  font-weight: 500;
  white-space: nowrap;
  color: var(--color-black);
  border-radius: var(--radius-xs);
  transition: color var(--transition);
}

.contacts__link--main {
  font-weight: 700;
}

@media (hover: hover) {
  .contacts__link:hover {
    color: var(--color-orange-text);
  }
}

/* Řádky fakturačních údajů a otevírací doba (o kousek níž pod adresou) */
.contacts__line,
.contacts__note {
  display: block;
}

.contacts__note {
  margin-top: 0.375rem;
}

.contacts__value strong {
  font-weight: 700;
  color: var(--color-black);
}

/* Řádek „Sídlo a fakturační údaje“ – tlačítko přes celou šířku seznamu, šipka vpravo */
.contacts__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 0.875rem 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.6;
  text-align: left;
  color: var(--color-black);
  border-bottom: 1px solid var(--color-gray-200);
  transition: color var(--transition);
}

.contacts__toggle .icon {
  font-size: 1rem;
  color: var(--color-muted);
}

@media (hover: hover) {
  .contacts__toggle:hover {
    color: var(--color-orange-text);
  }
}

/* Rozbalené řádky navazují na tlačítko (linku mezi nimi dělá jeho spodní okraj) */
.contacts__list--more {
  margin-top: 0;
}

.contacts__list--more .contacts__row:first-child {
  border-top: 0;
}

/* Bez JavaScriptu jsou údaje vidět rovnou a řádek není tlačítko */
html:not(.js) .contacts .collapse {
  grid-template-rows: 1fr;
  visibility: visible;
}

html:not(.js) .contacts__toggle {
  cursor: default;
}

html:not(.js) .contacts__toggle .icon {
  display: none;
}

/* Úzký sloupec: popisek menším písmem nad údaji */
@container contacts (max-width: 23.1875rem) {
  .contacts__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .contacts__label {
    font-size: 0.8125rem;
  }
}

/* Starší prohlížeče bez container queries – stejné rozložení podle šířky okna */
@supports not (container-type: inline-size) {
  @media (min-width: 1024px) and (max-width: 1199px), (max-width: 419px) {
    .contacts__row {
      grid-template-columns: minmax(0, 1fr);
    }

    .contacts__label {
      font-size: 0.8125rem;
    }
  }
}

.order__noscript {
  color: var(--color-muted);
}

/* Karta formuláře (a potvrzení po odeslání) – stejný rámeček jako karta tarifu.
   --order-gap je mezera mezi sloupci: stejná pro dlaždice, výběry pod nimi i pole s údaji. */
.order-form,
.order-success {
  --order-gap: clamp(0.625rem, 1.1vw, 1rem);
  padding: clamp(1.25rem, 2.8vw, 2.5rem);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 2px rgba(18, 20, 24, 0.04);
}

/* Po kliknutí na „Mám zájem“ dostane formulář fokus kvůli čtečkám a klávesnici – bez rámečku */
.order-form[tabindex="-1"]:focus {
  outline: none;
}

/* Bez JavaScriptu by formulář nešel odeslat – zůstane jen úvod s kontakty */
html:not(.js) .order-form {
  display: none;
}

/* Dvě části formuláře: výběr služeb a údaje, mezi nimi linka */
.order-form__group + .order-form__group {
  margin-top: clamp(1.625rem, 3vw, 2.25rem);
  padding-top: clamp(1.625rem, 3vw, 2.25rem);
  border-top: 1px solid var(--color-gray-100);
}

.order-form__legend {
  font-size: clamp(1.1875rem, 1.1rem + 0.3vw, 1.375rem);
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--color-black);
}

/* Dlaždice na výběr služeb – ikona z rozcestníku, název a zaškrtávací políčko v rohu.
   Celá dlaždice je popisek neviditelného zaškrtávacího pole (jde ovládat i klávesnicí). */
.order-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr; /* všechny dlaždice stejně vysoké, i když se název zalomí */
  gap: var(--order-gap);
  margin-top: 1rem;
}

.order-tile {
  position: relative;
  display: flex;
  min-width: 0;
  cursor: pointer;
}

.order-tile__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.order-tile__box {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.875rem;
  min-width: 0;
  min-height: 6.75rem;
  padding: 1rem 1rem 0.9375rem;
  color: var(--color-black);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  transition: border-color var(--transition), background-color var(--transition), box-shadow var(--transition);
}

/* Obrysové ikony jako v rozcestníku pod hero */
.order-tile__icon {
  flex-shrink: 0;
  width: 2.125rem;
  height: 2.125rem;
  fill: none;
  stroke: var(--color-orange);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.order-tile__name {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* Políčko v rohu dlaždice – po zaškrtnutí oranžové s bílou fajfkou. Fajfka se schovává průhledností,
   ne barvou – stav je tak poznat i v režimu vynucených barev (Windows s vysokým kontrastem). */
.order-tile__check {
  position: absolute;
  top: 0.875rem;
  right: 0.875rem;
  display: grid;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  font-size: 0.75rem;
  color: var(--color-white);
  background: var(--color-white);
  border: 1.5px solid #7f8794; /* kontrast 3 : 1 na bílé */
  border-radius: var(--radius-xs);
  transition: background-color var(--transition), border-color var(--transition);
}

.order-tile__check .icon {
  opacity: 0;
  transition: opacity var(--transition);
}

@media (hover: hover) {
  .order-tile:hover .order-tile__box {
    border-color: #9aa1ad;
  }
}

.order-tile__input:checked + .order-tile__box {
  background: var(--color-peach-soft);
  border-color: var(--color-orange);
  box-shadow: 0 0 0 1px var(--color-orange);
}

.order-tile__input:checked + .order-tile__box .order-tile__check {
  background: var(--color-orange-text);
  border-color: var(--color-orange-text);
}

.order-tile__input:checked + .order-tile__box .order-tile__check .icon {
  opacity: 1;
}

.order-tile__input:focus-visible + .order-tile__box {
  outline: 3px solid var(--color-black);
  outline-offset: 3px;
}

/* Mřížky polí: výběry pod dlaždicemi (.order-details) a údaje zákazníka (.order-form__grid) */
.order-details,
.order-form__grid {
  display: grid;
  gap: 1.125rem var(--order-gap);
}

/* Upřesnění k zaškrtnutým dlaždicím: ke každé jeden výběr (u „Pro firmy“ navíc Název firmy).
   V užší kartě jsou výběry pod sebou přes celou šířku, v širší po dvou – každý pak sedí přesně pod
   dvojicí dlaždic a vejdou se do něj i dlouhé názvy tarifů.
   Obal oblasti do mřížky nezasahuje – jejími buňkami jsou rovnou pole. */
.order-details {
  grid-template-columns: minmax(0, 1fr);
  margin-top: 1.125rem;
}

.order-detail {
  display: contents;
}

/* Dvě pole k jedné dlaždici (služba pro firmy a název firmy) zůstávají spolu v jedné řadě */
.order-detail--pair {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: inherit;
  gap: inherit;
}

.order-details + .field__error {
  margin-top: 0.625rem;
}

/* Údaje zákazníka: v užší kartě dva sloupce, v široké tři */
.order-form__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 1.125rem;
}

/* Pole – popisek nad polem, pod ním případná chyba */
.field {
  display: grid;
  align-content: start;
  gap: 0.4375rem;
  min-width: 0;
}

/* Přes celou šířku: zpráva, v užší kartě i jméno a dvojice telefon + e-mail */
.field--wide,
.order-form__grid > [data-order-field="name"],
.field--pair {
  grid-column: 1 / -1;
}

.field__label {
  font-size: 0.9375rem;
  font-weight: 650;
  line-height: 1.3;
  color: var(--color-black);
}

/* Hvězdička u povinného pole */
.field__req {
  font-weight: 700;
  color: var(--color-orange-text);
}

/* Telefon a e-mail pod společným popiskem – dvě pole ve stejných sloupcích jako zbytek formuláře */
.field__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem var(--order-gap);
}

.field__cell {
  display: grid;
  align-content: start;
  gap: 0.4375rem;
  min-width: 0;
}

.field__input {
  width: 100%;
  height: 3.25rem;
  padding: 0 1rem;
  font: inherit;
  font-size: 0.9375rem;
  line-height: 1.25;
  color: var(--color-black);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition), background-color var(--transition), box-shadow var(--transition);
}

.field__input::placeholder {
  color: var(--color-placeholder);
  opacity: 1;
}

.field__input:hover {
  border-color: #cdd2d9;
}

/* Aktivní pole – oranžový rámeček jako u pole s adresou v hero. Obrys je průhledný, vidět je
   jen v režimu vynucených barev (tam se stíny nekreslí). */
.field__input:focus {
  background: var(--color-white);
  border-color: var(--color-orange);
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 0.1875rem rgba(247, 99, 13, 0.2);
}

.field__input[aria-invalid="true"] {
  background: var(--color-white);
  border-color: var(--color-error);
  box-shadow: 0 0 0 0.1875rem rgba(180, 35, 24, 0.14);
}

/* Pole s chybou, ve kterém je kurzor, se od ostatních chybných polí liší červeným obrysem */
.field__input[aria-invalid="true"]:focus {
  outline-color: var(--color-error);
}

.field__input--area {
  height: auto;
  min-height: 6rem;
  padding: 0.8125rem 1rem;
  line-height: 1.5;
  resize: vertical;
}

/* Výběr (tarif, balíček, služba, typ objektu) – vlastní šipka místo systémové */
.select {
  position: relative;
  display: block;
}

.select .field__input {
  padding-right: 2.625rem;
  text-overflow: ellipsis;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.select .icon {
  position: absolute;
  top: 50%;
  right: 1rem;
  font-size: 1rem;
  color: var(--color-muted);
  transform: translateY(-50%);
  pointer-events: none;
}

/* Nepovinný výběr, ve kterém zatím nic není, má text šedý jako nápověda v polích */
.select--optional .field__input:has(option[value=""]:checked) {
  color: var(--color-placeholder);
}

.select--optional option {
  color: var(--color-black);
}

/* Na dotykových displejích 16px písmo, aby iPhone při psaní stránku nezvětšoval */
@media (pointer: coarse) {
  .field__input {
    font-size: 1rem;
  }
}

.field__error {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-error);
  animation: field-error-in 0.25s var(--ease-out);
}

/* Širší karta: výběry pod dlaždicemi po dvou (od šířky, kdy se do nich vejdou i nejdelší názvy) */
@container order-main (min-width: 43.75rem) {
  .order-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Široká karta: údaje po třech – jméno, telefon a e-mail v jedné řadě, pod nimi ulice, obec a typ objektu */
@container order-main (min-width: 46.25rem) {
  .order-form__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .order-form__grid > [data-order-field="name"] {
    grid-column: auto;
  }

  .field--pair {
    grid-column: span 2;
  }
}

/* Tlačítko „Odeslat“ vlevo (na konci stránky by ho vpravo překrýval plovoucí asistent), vedle něj
   odkaz na prohlášení o ochraně osobních údajů */
.order-form__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.875rem 1.5rem;
  margin-top: clamp(1.375rem, 2.6vw, 1.875rem);
}

.order-form__submit {
  gap: 0.75rem;
  height: 3.375rem;
  padding: 0 1.375rem 0 1.625rem;
}

/* Během odesílání (tlačítko zůstává ve fokusu, další klepnutí se ignoruje) */
.order-form__submit[aria-disabled="true"] {
  opacity: 0.65;
  cursor: progress;
}

/* Odkaz otevře dokument z patičky */
.order-form__privacy {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-muted);
  text-decoration: underline;
  text-underline-offset: 0.1875rem;
  border-radius: var(--radius-xs);
  transition: color var(--transition);
}

@media (hover: hover) {
  .order-form__privacy:hover {
    color: var(--color-orange-text);
  }
}

/* Upozornění na reCAPTCHA – plovoucí odznak Googlu je skrytý (vpravo dole je asistent), proto ten text */
.grecaptcha-badge {
  visibility: hidden;
}

.form-recaptcha {
  display: block;
  margin-top: 0.875rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--color-muted);
}

.form-recaptcha a {
  text-decoration: underline;
  text-underline-offset: 0.15625rem;
}

/* V oranžovém úvodu je text bílý jako poznámka nad ním */
.availability__note .form-recaptcha {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: inherit;
}

@media (hover: hover) {
  .order-form .form-recaptcha a:hover {
    color: var(--color-orange-text);
  }
}

/* Během odesílání ověření dostupnosti */
.search__btn[aria-disabled="true"] {
  opacity: 0.7;
  cursor: progress;
}

/* Odeslání se nepovedlo */
.order-form__failure {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--color-error);
  background: #fef3f2;
  border: 1px solid #f6cdc9;
  border-radius: var(--radius-sm);
}

.order-form__failure a {
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 0.1875rem;
}

/* Potvrzení po odeslání (vkládá script.js místo formuláře) */
.order-success {
  animation: success-in 0.5s var(--ease-out) both;
}

.order-success:focus {
  outline: none;
}

.order-success__icon {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  font-size: 1.5rem;
  color: var(--color-white);
  background: var(--color-orange);
  border-radius: var(--radius-md);
}

.order-success__title {
  margin-top: 1.25rem;
  font-size: clamp(1.5rem, 1.3rem + 0.7vw, 2rem);
  font-weight: 750;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--color-black);
}

.order-success__text {
  max-width: 34em;
  margin-top: 0.5rem;
  line-height: 1.55;
  color: var(--color-muted);
  text-wrap: pretty;
}

/* Co zákazník vybral */
.order-success__list {
  display: grid;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding: 1rem 1.125rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--color-text);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-md);
}

.order-success__list strong {
  font-weight: 700;
  color: var(--color-black);
}

.order-success__again {
  margin-top: 1.5rem;
}

/* Tablet a mobil: úvod, formulář a pod ním kontakt */
@media (max-width: 1023px) {
  .order__layout {
    max-width: var(--container);
    padding-inline: var(--gutter);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
      "intro"
      "main"
      "contacts";
    row-gap: 2.25rem;
  }

  /* Mezeru nad kontaktem dělá mřížka; seznam se neroztahuje přes celou šířku tabletu */
  .contacts {
    max-width: 35rem;
    margin-top: 0.25rem;
  }
}

/* Mobil: dlaždice 2 × 2, pole pod sebou, tlačítko přes celou šířku */
@media (max-width: 639px) {
  .order-form,
  .order-success {
    padding: 1.25rem 1rem;
  }

  .order-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .order-tile__box {
    min-height: 6rem;
    padding: 0.875rem 0.875rem 0.8125rem;
  }

  .order-tile__check {
    top: 0.75rem;
    right: 0.75rem;
  }

  .order-form__grid,
  .field__pair {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Užší okraje uvnitř polí – do výběru se na telefonu vejdou i dlouhé názvy tarifů a služeb */
  .field__input {
    padding-inline: 0.875rem;
  }

  .select .field__input {
    padding-right: 2.375rem;
  }

  .select .icon {
    right: 0.8125rem;
  }

  .order-form__footer {
    flex-direction: column;
    align-items: stretch;
  }

  .order-form__privacy {
    align-self: flex-start;
  }
}


/* ==========================================================================
   MAPA – kde TRIONET najdete (.locator): pás přes celou šířku stránky pod formulářem.
   Počítač a tablet: mapa přes celý pás, vlevo na ní bílá kartička s adresou a odkazy na trasu;
   špendlík je uprostřed volné části mapy vpravo od kartičky. Mobil: texty nad mapou.
   Mapu vykresluje script.js → initOfficeMap() (MapLibre GL JS + podklad OpenFreeMap). Dokud není
   načtená, je místo ní světlá plocha s kruhy kolem špendlíku – stejná zůstane, když mapu načíst nejde.
   ========================================================================== */

.locator {
  --locator-card: 21.75rem;  /* šířka kartičky */
  --locator-land: #f2f3f0; /* barva pevniny mapového podkladu – plocha pod mapou s ní splývá */
  /* levý okraj obsahu stránky (stejná osa jako ostatní sekce) */
  --locator-side: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  /* vodorovná poloha špendlíku: střed volné části mapy vpravo od kartičky */
  --locator-pin-x: calc((100% + var(--locator-side) + var(--locator-card)) / 2);
  position: relative;
  z-index: 0; /* vlastní vrstva – ovládací prvky mapy se nedostanou nad horní lištu ani nad asistenta */
  height: clamp(26.25rem, 34vw, 33.75rem);
  margin-top: var(--section-pad);
  overflow: hidden;
  background: var(--locator-land);
  border-top: 1px solid var(--color-gray-200);
}

/* Plocha mapy; před načtením jemné kruhy kolem špendlíku */
.locator__map {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background:
    repeating-radial-gradient(circle at var(--locator-pin-x) 50%, transparent 0 3.9375rem, rgba(21, 23, 28, 0.06) 3.9375rem 4rem),
    var(--locator-land);
}

/* Mapa se po načtení plynule objeví přes plochu s kruhy */
.locator .locator__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  font-family: inherit;
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}

.locator.is-ready .locator__canvas {
  opacity: 1;
}

/* Špendlík – stejný před načtením (ve stránce) i v mapě; hrot ukazuje přesně na místo */
.locator__pin,
.locator__marker {
  display: block;
  width: 2.75rem;
  height: 3.5rem;
  filter: drop-shadow(0 0.375rem 0.3125rem rgba(21, 23, 28, 0.26));
  pointer-events: none;
}

.locator__pin svg,
.locator__marker svg {
  display: block;
  width: 100%;
  height: 100%;
}

.locator__pin path,
.locator__marker path {
  fill: var(--color-orange);
  stroke: var(--color-white);
  stroke-width: 3;
}

.locator__pin circle,
.locator__marker circle {
  fill: var(--color-white);
}

.locator__pin {
  position: absolute;
  top: 50%;
  left: var(--locator-pin-x);
  transform: translate(-50%, -100%);
  transition: opacity 0.5s var(--ease-out), visibility 0s linear 0.5s;
}

/* Jakmile je mapa načtená, špendlík má ona (posouvá se s ní) */
.locator.is-ready .locator__pin {
  visibility: hidden;
  opacity: 0;
}

/* Kartička leží nad mapou na levé ose obsahu stránky; mimo ni jde mapa ovládat */
.locator__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  max-width: none;
  height: 100%;
  padding-inline: var(--locator-side) 1.5rem;
  pointer-events: none;
}

.locator__card {
  width: min(100%, var(--locator-card));
  padding: 1.625rem 1.75rem 1.75rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  box-shadow: 0 1.5rem 2.75rem -1.875rem rgba(18, 20, 24, 0.45), 0 2px 0.5rem rgba(18, 20, 24, 0.05);
  pointer-events: auto;
}

/* Stejný nadpis jako „Kontakt“ a nadpisy ve formuláři */
.locator__title {
  font-size: clamp(1.1875rem, 1.1rem + 0.3vw, 1.375rem);
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--color-black);
}

.locator__address {
  margin-top: 0.75rem;
}

.locator__card strong {
  font-weight: 700;
  color: var(--color-black);
}

.locator__hours {
  margin-top: 0.375rem;
}

.locator__key {
  color: var(--color-muted);
}

/* Odkazy na trasu pod jemnou linkou */
.locator__route {
  margin-top: 1.125rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-gray-200);
}

.locator__route-label {
  font-weight: 650;
  line-height: 1.3;
  color: var(--color-black);
}

.locator__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.625rem;
}

/* Užší tlačítka – obě se vejdou vedle sebe i s širším náhradním písmem */
.locator__links .btn {
  gap: 0.4375rem;
  padding-inline: 0.75rem;
}

.locator__links .icon-external {
  color: var(--color-muted);
}

.locator__note {
  margin-top: 0.875rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--color-muted);
}

/* Ovládání mapy (MapLibre) ve stylu webu: tlačítka přiblížení vpravo nahoře na ose okraje stránky */
.locator .maplibregl-ctrl-top-right .maplibregl-ctrl {
  margin: 1.25rem var(--gutter) 0 0;
}

.locator .maplibregl-ctrl-group {
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 2px rgba(18, 20, 24, 0.08);
}

.locator .maplibregl-ctrl-group button {
  width: 2.5rem;
  height: 2.5rem;
}

.locator .maplibregl-ctrl-group button + button {
  border-top: 1px solid var(--color-gray-200);
}

.locator .maplibregl-ctrl button:focus-visible {
  outline: 3px solid var(--color-black);
  outline-offset: -3px;
  box-shadow: none;
}

.locator .maplibregl-canvas:focus-visible {
  outline: 3px solid var(--color-black);
  outline-offset: -3px;
}

/* Zdroj mapových dat (vlevo dole) a nápověda k ovládání */
.locator .maplibregl-ctrl-attrib {
  font-size: 0.75rem;
  line-height: 1.6;
}

/* Odkazy u zdroje dat podtržené – od okolního textu se neliší jen barvou */
.locator .maplibregl-ctrl-attrib a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.locator .maplibregl-cooperative-gesture-screen {
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
}

/* Mobil: texty nad mapou (bez kartičky), mapa pod nimi přes celou šířku */
@media (max-width: 767px) {
  .locator {
    --locator-pin-x: 50%;
    height: auto;
    overflow: visible;
    background: none;
    border-top: 0;
  }

  .locator__inner {
    display: block;
    height: auto;
    padding-inline: var(--gutter);
    pointer-events: auto;
  }

  .locator__card {
    width: auto;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .locator__map {
    position: relative;
    inset: auto;
    height: 21.25rem;
    margin-top: 1.75rem;
    border-top: 1px solid var(--color-gray-200);
  }

  .locator .maplibregl-ctrl-top-right .maplibregl-ctrl {
    margin-top: 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .locator .locator__canvas,
  .locator__pin {
    transition: none;
  }
}


/* ==========================================================================
   PODSTRÁNKA PRODUKTU – riser-box.html (RISER-BOX). Hlavička a patička jsou stejné jako na hlavní
   stránce, obsah má čtyři části: úvod s fotografiemi (.product-hero + .gallery), pás s parametry
   (.spec-band), text s časovou osou (.product-story + .timeline) a závěrečnou výzvu (.product-cta).
   Stejné třídy poslouží i dalším podstránkám.
   ========================================================================== */

/* Na podstránce není plovoucí asistent – patička pro něj nemusí držet místo */
.page-sub .site-footer {
  --footer-clear: 0px;
}

/* Drobečková navigace: Úvod / RISER-BOX */
.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--color-muted);
}

.breadcrumb__item + .breadcrumb__item::before {
  content: "/";
  margin-right: 0.625rem;
  color: var(--color-gray-400);
}

.breadcrumb__link {
  border-radius: var(--radius-xs);
  text-decoration: underline;
  text-decoration-color: var(--color-gray-200);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.25rem;
  transition: color var(--transition), text-decoration-color var(--transition);
}

.breadcrumb__link:hover {
  color: var(--color-orange-text);
  text-decoration-color: currentColor;
}

.breadcrumb__item[aria-current] {
  font-weight: 600;
  color: var(--color-text);
}

/* Úvod: vlevo název, věta o výrobku a tlačítka, vpravo fotografie */
.product-hero {
  padding-block: clamp(1.5rem, 3vw, 2.25rem) clamp(4rem, 7vw, 6.5rem);
}

.product-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
  margin-top: clamp(2rem, 4.5vw, 4rem);
}

.product-hero__title {
  font-size: clamp(2.5rem, 1.3rem + 3.3vw, 4.5rem);
  font-weight: 750;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--color-black);
}

.product-hero__accent {
  color: var(--color-orange-text);
  white-space: nowrap;
}

/* Druhý řádek nadpisu menší (stejně jako v sekci O nás) */
.product-hero__title-sub {
  display: block;
  margin-top: 0.14em;
  font-size: 0.6em;
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.product-hero__lead {
  max-width: 34em;
  margin-top: clamp(1.5rem, 2.6vw, 2.25rem);
  font-size: clamp(1.125rem, 1.04rem + 0.3vw, 1.3125rem);
  line-height: 1.6;
  color: var(--color-text);
  text-wrap: pretty;
}

.product-hero__actions,
.product-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.product-hero__actions {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

/* Když se tlačítka nevejdou vedle sebe (užší sloupec vedle fotografií), jsou pod sebou a stejně široká */
.product-hero__intro {
  container-type: inline-size;
}

@container (max-width: 35rem) {
  .product-hero__actions {
    display: inline-grid;
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Fotografie: velký snímek a pod ním náhledy, kterými se přepíná. Snímek se do rámečku vejde celý
   (object-fit: contain), ať má jakýkoli poměr stran; dokud se nenačte, je vidět světlá plocha. */
.gallery__stage {
  position: relative;
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
}

.gallery__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.gallery__thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-gray-50);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px var(--color-gray-200);
}

.gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Rámeček náhledu leží nad obrázkem: šedý, u vybraného snímku oranžový */
.gallery__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--color-gray-200);
  transition: box-shadow var(--transition);
  pointer-events: none;
}

.gallery__thumb[aria-pressed="true"]::after {
  box-shadow: inset 0 0 0 2px var(--color-orange);
}

@media (hover: hover) {
  .gallery__thumb:hover::after {
    box-shadow: inset 0 0 0 2px var(--color-black);
  }

  .gallery__thumb[aria-pressed="true"]:hover::after {
    box-shadow: inset 0 0 0 2px var(--color-orange);
  }
}

/* Fotografie, která se nenačetla: místo ní název souboru, který do složky img/ patří */
.gallery__stage.is-missing .gallery__image,
.gallery__thumb.is-missing img {
  display: none;
}

.gallery__stage.is-missing::after {
  content: attr(data-slot);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  color: var(--color-muted);
}

/* Bez JavaScriptu se náhledy přepínat nedají – ukážou se proto všechny tři fotografie pod sebou */
html:not(.js) .gallery__stage {
  display: none;
}

html:not(.js) .gallery__thumbs {
  grid-template-columns: minmax(0, 1fr);
  margin-top: 0;
}

html:not(.js) .gallery__thumb {
  aspect-ratio: auto;
  cursor: default;
}

html:not(.js) .gallery__thumb img {
  height: auto;
  object-fit: contain;
}

/* Parametry výrobku – bílý pás mezi linkami jako čísla v sekci O nás: hodnota a pod ní popisek */
.spec-band {
  border-block: 1px solid var(--color-gray-200);
}

.spec-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding-block: clamp(2.25rem, 4.4vw, 3.75rem);
}

.spec {
  display: flex;
  flex-direction: column-reverse; /* v kódu popisek → hodnota, na pohled hodnota → popisek */
  justify-content: flex-start;    /* popisky všech sloupců leží na jedné lince, i když je hodnota na dva řádky */
  padding: 0.375rem clamp(0.75rem, 2vw, 2rem);
  text-align: center;
}

.spec + .spec {
  border-left: 1px solid var(--color-gray-200);
}

.spec__label {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.spec__value {
  margin: 0;
  font-size: clamp(1.25rem, 0.95rem + 1vw, 1.75rem);
  font-weight: 750;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--color-black);
  text-wrap: balance;
}

/* Co je RISER-BOX a jeho historie: vlevo text, vpravo časová osa */
.product-story {
  padding-block: clamp(4.5rem, 8vw, 7.5rem);
}

.product-story__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  align-items: start;
  gap: clamp(2.5rem, 6vw, 6rem);
}

.product-story__title {
  font-size: clamp(1.875rem, 1.2rem + 1.9vw, 3rem);
  font-weight: 750;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--color-black);
}

.product-story__lead {
  margin-top: clamp(1.375rem, 2.4vw, 2rem);
  font-size: clamp(1.125rem, 1.04rem + 0.3vw, 1.3125rem);
  line-height: 1.6;
  color: var(--color-text);
  text-wrap: pretty;
}

.product-story__text {
  margin-top: 1rem;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-muted);
  text-wrap: pretty;
}

/* Časová osa – tři kroky pod sebou spojené linkou */
.timeline {
  position: relative;
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.5rem);
  margin: 0;
  padding: 0.375rem 0 0 2.5rem;
  list-style: none;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 1rem;
  bottom: 1rem;
  left: 0.4375rem;
  width: 2px;
  background: var(--color-gray-200);
}

.timeline__item {
  position: relative;
}

.timeline__item::before {
  content: "";
  position: absolute;
  top: 1px;
  left: -2.5rem;
  width: 1rem;
  height: 1rem;
  background: var(--color-white);
  border: 2px solid var(--color-orange);
  border-radius: 50%;
}

/* Linka končí u posledního kroku – pod ním ji zakryje bílá plocha */
.timeline__item:last-child::after {
  content: "";
  position: absolute;
  top: 1.0625rem;
  bottom: -2px;
  left: -2.5rem;
  width: 1rem;
  background: var(--color-white);
}

.timeline__when {
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-orange-text);
}

.timeline__title {
  margin-top: 0.5rem;
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-black);
}

.timeline__text {
  max-width: 32em;
  margin-top: 0.5rem;
  line-height: 1.65;
  color: var(--color-muted);
  text-wrap: pretty;
}

/* Závěr stránky: cena na vyžádání a tlačítka */
.product-cta {
  padding-block: clamp(3.5rem, 6vw, 5.5rem);
  border-top: 1px solid var(--color-gray-200);
}

.product-cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.75rem 3rem;
}

.product-cta__title {
  font-size: clamp(1.625rem, 1.2rem + 1.3vw, 2.375rem);
  font-weight: 750;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--color-black);
}

.product-cta__text {
  max-width: 34em;
  margin-top: 0.75rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-muted);
  text-wrap: pretty;
}

.product-cta__text a {
  font-weight: 650;
  white-space: nowrap;
  color: var(--color-black);
  border-radius: var(--radius-xs);
  transition: color var(--transition);
}

.product-cta__text a:hover {
  color: var(--color-orange-text);
}

/* Tablet a mobil: všechno pod sebou */
@media (max-width: 1023px) {
  .product-hero__grid,
  .product-story__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .gallery {
    max-width: 45rem;
  }

  .spec-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 2rem;
  }

  .spec:nth-child(odd) {
    border-left: 0;
  }
}

@media (max-width: 639px) {
  .gallery__thumbs {
    gap: 0.5rem;
    margin-top: 0.5rem;
  }

  .spec {
    padding-inline: 0.5rem;
  }

  .product-hero__actions {
    display: grid;
  }

  .product-cta__actions .btn {
    flex: 1 1 100%;
  }

  .product-cta__actions {
    width: 100%;
  }
}


/* ==========================================================================
   PATIČKA (.site-footer) – tmavá plocha, která stránku uzavírá: logo s krátkým popisem, tři sloupce
   odkazů (Služby, TRIONET, Dokumenty), kontakt, pod čarou identifikace společnosti a copyright.
   Vpravo dole zůstává volné místo pro plovoucího asistenta (--footer-clear).
   ========================================================================== */

.site-footer {
  --footer-text: #b7bcc5;   /* kontrast 9,5 : 1 na tmavém pozadí */
  --footer-muted: #9198a4;  /* drobné texty – kontrast 6,2 : 1 */
  --footer-line: rgba(255, 255, 255, 0.12);
  --footer-clear: 20.625rem;    /* šířka místa, které vpravo dole zabírá tlačítko asistenta */
  --footer-gap: clamp(2rem, 4.5vw, 5rem);     /* mezera mezi logem, odkazy a kontaktem */
  --footer-nav-gap: clamp(1.5rem, 3vw, 3rem);   /* mezera mezi sloupci odkazů */
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--footer-text);
  background: var(--color-black);
}

/* Fokus z klávesnice je na tmavém pozadí bílý */
.site-footer :focus-visible {
  outline-color: var(--color-white);
}

.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 3fr) minmax(0, 1fr);
  gap: 2.5rem var(--footer-gap);
  padding-block: clamp(3rem, 5.5vw, 4.75rem) clamp(2.5rem, 4.5vw, 3.75rem);
}

/* Logo (světlá varianta) – o něco menší než v horní liště */
.site-footer__logo {
  display: inline-flex;
  border-radius: var(--radius-xs);
}

.site-footer .logo-slot {
  --logo-height: 2.5rem;
}

.site-footer .logo-slot__placeholder {
  color: var(--footer-muted);
  border-color: rgba(255, 255, 255, 0.28);
}

.site-footer__about {
  max-width: 34em;
  margin-top: 1.25rem;
  text-wrap: pretty;
}

/* Tři sloupce odkazů; sloupec s dokumenty je širší (delší názvy) */
.site-footer__nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.55fr);
  gap: 2.25rem var(--footer-nav-gap);
}

.site-footer__title {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--color-white);
}

.site-footer__list {
  display: grid;
  gap: 2px;
  margin-top: 0.875rem;
}

.site-footer__link {
  display: inline-block;
  padding-block: 0.25rem;
  line-height: 1.4;
  color: var(--footer-text);
  border-radius: var(--radius-xs);
  transition: color var(--transition);
}

/* Telefon a e-mail bíle a tučně */
.site-footer__link--strong {
  font-weight: 700;
  white-space: nowrap;
  color: var(--color-white);
}

@media (hover: hover) {
  .site-footer__link:hover {
    color: var(--color-orange-light);
  }
}

/* Šipka ↗ u odkazů, které se otevřou v novém okně – hned za posledním slovem */
.site-footer__link .icon-external {
  display: inline-block;
  margin-left: 0.375rem;
  font-size: 0.6875em;
  vertical-align: 0.02em;
  opacity: 0.7;
}

.site-footer__address {
  margin-top: 0.75rem;
  font-style: normal;
}

.site-footer__hours {
  margin-top: 0.375rem;
}

/* Pod čarou: identifikace společnosti a kontaktní místo podle DSA – drobně; vpravo zůstává místo
   pro hlavu lišky z tlačítka asistenta */
.site-footer__legal {
  display: grid;
  gap: 0.5rem;
  padding-block: 1.5rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--footer-muted);
}

.site-footer__legal p {
  max-width: min(84ch, calc(100% - 9.375rem));
  text-wrap: pretty;
}

/* Počítač: oba odstavce vedle sebe. Druhý začíná na ose sloupce „TRIONET“ – jeho odsazení se počítá
   ze stejných poměrů a mezer jako mřížka nahoře (logo 1,25 : odkazy 3 : kontakt 1; sloupce odkazů
   1 : 1 : 1,55). Vpravo dál zůstává místo pro hlavu lišky. */
@media (min-width: 1100px) {
  .site-footer__legal {
    --footer-rest: calc(100% - 2 * var(--footer-gap));
    --footer-second: calc(var(--footer-rest) * 1.25 / 5.25 + var(--footer-gap)
      + (var(--footer-rest) * 3 / 5.25 - 2 * var(--footer-nav-gap)) / 3.55 + var(--footer-nav-gap));
    grid-template-columns: calc(var(--footer-second) - var(--footer-gap)) minmax(0, 1fr);
    column-gap: var(--footer-gap);
  }

  .site-footer__legal p {
    max-width: none;
  }

  .site-footer__legal p:last-child {
    padding-right: 9.375rem;
  }
}

/* Linky pod čarou sahají jen po obsah stránky (kontejner má vnitřní okraje) */
.site-footer__legal,
.site-footer__bottom {
  position: relative;
}

.site-footer__legal::before,
.site-footer__bottom::before {
  content: "";
  position: absolute;
  top: 0;
  right: var(--gutter);
  left: var(--gutter);
  height: 1px;
  background: var(--footer-line);
}

.site-footer__bottom {
  padding-block: 1.375rem 1.625rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--footer-muted);
}

.site-footer__copy {
  max-width: calc(100% - var(--footer-clear));
}

/* Menší notebook a tablet: nahoře logo s popisem a kontakt, pod nimi odkazy. Obě mřížky mají stejné
   sloupce i mezery, takže Kontakt stojí přesně nad sloupcem Dokumenty. */
@media (max-width: 1099px) {
  .site-footer__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.55fr);
    column-gap: var(--footer-nav-gap);
  }

  .site-footer__brand {
    grid-column: 1 / 3;
  }

  .site-footer__contact {
    grid-column: 3;
  }

  .site-footer__nav {
    grid-row: 2;
    grid-column: 1 / -1;
  }
}

/* Mobil: všechno pod sebou, Služby a TRIONET vedle sebe */
@media (max-width: 639px) {
  .site-footer {
    --footer-clear: 6.875rem;
  }

  .site-footer__top {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.25rem;
  }

  .site-footer__brand,
  .site-footer__contact {
    grid-column: auto;
  }

  .site-footer__nav {
    grid-row: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 1.5rem;
  }

  .site-footer__nav .site-footer__col:last-child {
    grid-column: 1 / -1;
  }

  .site-footer__legal p {
    max-width: none;
  }

  /* Odkazy jsou na dotyk o něco vyšší */
  .site-footer__link {
    padding-block: 0.375rem;
  }
}


/* ==========================================================================
   DOKUMENTY (.doc) – Ochrana osobních údajů a Typy rozhraní. Texty jsou na konci patičky v prvcích
   <dialog> a otevírají se v bílém okně přes ztmavenou stránku (script.js → initDocuments()):
   nahoře štítek, název a křížek, pod nimi text, který se posouvá. Na mobilu je okno přes celou obrazovku.
   Bez JavaScriptu (nebo v prohlížeči bez <dialog>) se dokument po kliknutí ukáže přímo v patičce.
   ========================================================================== */

/* Stránka pod otevřeným dokumentem se neposouvá. Posuvník přitom zmizí – o jeho šířku (--scrollbar-gap,
   nastaví script.js) se odsadí obsah stránky i plovoucí asistent, aby při otevření nic neposkočilo. */
html.is-doc-open {
  overflow: hidden;
}

html.is-doc-open body {
  padding-right: var(--scrollbar-gap, 0px);
}

html.is-doc-open .assistant {
  margin-right: var(--scrollbar-gap, 0px);
}

.doc {
  display: none;
  flex-direction: column;
  width: min(55rem, calc(100% - 2 * var(--gutter)));
  max-width: none;
  max-height: calc(100vh - 3rem);
  max-height: min(57.5rem, calc(100dvh - 3rem));
  margin: auto;
  padding: 0;
  overflow: hidden;
  color: var(--color-text);
  background: var(--color-white);
  border: 0;
  border-radius: var(--radius-md);
  box-shadow: 0 2.5rem 5rem -2.25rem rgba(18, 20, 24, 0.6), 0 0.25rem 1rem rgba(18, 20, 24, 0.1);
}

.doc[open] {
  display: flex;
}

/* Fokus patří textu dokumentu (má vlastní obrys), samotné okno ho neukazuje */
.doc:focus-visible {
  outline: none;
}

.doc::backdrop {
  background: rgba(21, 23, 28, 0.6);
}

@media (prefers-reduced-motion: no-preference) {
  .doc[open] {
    animation: doc-in 0.3s var(--ease-out);
  }

  .doc[open]::backdrop {
    animation: doc-backdrop-in 0.3s var(--ease-out);
  }
}

@keyframes doc-in {
  from {
    opacity: 0;
    transform: translateY(0.875rem);
  }
}

@keyframes doc-backdrop-in {
  from {
    opacity: 0;
  }
}

/* Hlavička okna: štítek a název vlevo, křížek vpravo; zůstává nahoře, posouvá se jen text */
.doc__head {
  display: flex;
  flex-shrink: 0;
  align-items: flex-start;
  gap: 1rem;
  padding: clamp(1.25rem, 2.6vw, 1.875rem) clamp(1.25rem, 3vw, 2.5rem) clamp(1rem, 2vw, 1.375rem);
  border-bottom: 1px solid var(--color-gray-200);
}

.doc__heading {
  flex: 1 1 auto;
  min-width: 0;
}

.doc__title {
  margin-top: 0.5rem;
  font-size: clamp(1.3125rem, 1.05rem + 1vw, 1.8125rem);
  font-weight: 750;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-black);
}

.doc__close {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: -0.375rem -0.625rem 0 0;
  font-size: 1.25rem;
  color: var(--color-black);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition);
}

@media (hover: hover) {
  .doc__close:hover {
    background: var(--color-gray-100);
  }
}

/* Text dokumentu – posouvá se uvnitř okna, stránka pod ním stojí */
.doc__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: clamp(1.125rem, 2.2vw, 1.625rem) clamp(1.25rem, 3vw, 2.5rem) clamp(1.625rem, 3vw, 2.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  font-size: 0.9375rem;
  line-height: 1.65;
}

.doc__body:focus-visible {
  outline: 3px solid var(--color-black);
  outline-offset: -3px;
}

.doc__body > * + * {
  margin-top: 0.75rem;
}

.doc__body h3,
.doc__body h4 {
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--color-black);
  text-wrap: balance;
}

.doc__body h3 {
  margin-top: 2rem;
  font-size: clamp(1.125rem, 1.02rem + 0.4vw, 1.3125rem);
}

.doc__body h4 {
  margin-top: 1.5rem;
  font-size: 1.0625rem;
}

.doc__body ul {
  display: grid;
  gap: 0.5rem;
}

/* Odrážky jako malé oranžové tečky (stejně jako u seznamu TV stanic) */
.doc__body li {
  position: relative;
  padding-left: 1.25rem;
}

.doc__body li::before {
  content: "";
  position: absolute;
  top: 0.64em;
  left: 0.1875rem;
  width: 0.375rem;
  height: 0.375rem;
  background: var(--color-orange);
  border-radius: 50%;
}

.doc__body strong,
.doc__label {
  font-weight: 700;
  color: var(--color-black);
}

.doc__label {
  margin-top: 1.25rem;
}

.doc__label + address {
  margin-top: 0.25rem;
}

.doc__label + h3 {
  margin-top: 1rem;
}

.doc__body address {
  font-style: normal;
}

.doc__body a {
  color: var(--color-black);
  text-decoration: underline;
  text-decoration-color: var(--color-orange);
  text-underline-offset: 0.1875rem;
  overflow-wrap: anywhere;
  border-radius: var(--radius-xs);
}

@media (hover: hover) {
  .doc__body a:hover {
    color: var(--color-orange-text);
  }
}

.doc__date {
  margin-top: 1.75rem;
  color: var(--color-muted);
}

/* Mobil: dokument přes celou obrazovku */
@media (max-width: 639px) {
  .doc {
    width: 100%;
    height: 100%;
    height: 100dvh; /* výška bez lišt prohlížeče – konec textu nezůstane pod nimi */
    max-height: none;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

/* Bez JavaScriptu (nebo bez podpory <dialog>): dokument, na který vede odkaz, se ukáže jako bílý blok
   na konci patičky – bez křížku, který by neměl co zavírat */
html:not(.js) .doc:target,
html.no-dialog .doc:target {
  position: static;
  display: flex;
  width: min(55rem, 100%);
  height: auto;
  max-height: none;
  margin: 0 0 clamp(2rem, 4vw, 3.5rem);
  overflow: visible;
  box-shadow: none;
}

html:not(.js) .doc:target .doc__body,
html.no-dialog .doc:target .doc__body {
  overflow: visible;
}

html:not(.js) .doc__close,
html.no-dialog .doc__close {
  display: none;
}


/* ==========================================================================
   ONLINE ASISTENT – <OnlineAssistant />: plovoucí tlačítko s liškou vpravo dole a chat.
   Hlavička v tmavší oranžové s oblouky jako v hero, pole pro dotaz jako pruh s adresou.
   Logika v script.js → initOnlineAssistant() a createAssistantBrain().
   ========================================================================== */

.assistant {
  --pill-h: 3.625rem;   /* výška oranžové pilulky */
  --fox-w: 8.0625rem;   /* liška z img/fox.png (679 × 580 px – stejný obrázek jako v hero) */
  --fox-h: 6.875rem;
  --fox-room: 0.875rem; /* místo nad liškou, aby se při najetí myší neusekly uši */
  position: fixed;
  right: clamp(0.75rem, 2vw, 1.75rem);
  bottom: clamp(0.75rem, 2vw, 1.5rem);
  z-index: 80; /* pod horní lištou s menu (100) a našeptávačem obcí (90) */
  pointer-events: none; /* průhledné místo kolem pilulky a lišky propouští kliknutí na obsah pod ním */
}

/* Bez JavaScriptu by chat nešel otevřít – asistent se vůbec neukáže */
html:not(.js) .assistant {
  display: none;
}

/* Objeví se až po úvodní animaci stránky (jen průhlednost – transform by na mobilu
   uzavřel panel do rozměrů tlačítka) */
.js .assistant {
  opacity: 0;
}

.is-loaded .assistant {
  animation: assistant-in 0.6s var(--ease-out) 0.9s both;
}

@keyframes assistant-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Liška v kolečku (img/fox-avatar.png) v hlavičce a u zpráv; kdyby obrázek chyběl, ukáže se ikona zprávy */
.fox-avatar {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--color-orange);
  background: var(--color-peach);
  border-radius: 50%;
}

.fox-avatar__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fox-avatar__icon {
  display: none;
  font-size: 1.375rem;
}

.fox-avatar.is-missing .fox-avatar__img {
  display: none;
}

.fox-avatar.is-missing .fox-avatar__icon {
  display: block;
}

/* Tlačítko = oranžová pilulka a liška, která z ní vykukuje. Klikat jde na pilulku a na lišku,
   ne na průhledné místo vedle její hlavy. */
.assistant__launcher {
  position: relative;
  display: block;
  padding: calc(var(--fox-h) - var(--pill-h)) 0 0;
  text-align: left;
  background: none;
  border: 0;
  pointer-events: none;
}

.assistant__launcher:focus-visible {
  outline: none;
}

/* Pilulka – stejná tmavší oranžová jako hlavička chatu (bílý text má kontrast min. 4,5 : 1) */
.assistant__pill {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  height: var(--pill-h);
  padding: 0 calc(var(--fox-w) + 0.625rem) 0 1.25rem;
  overflow: hidden;
  color: var(--color-white);
  background: linear-gradient(120deg, #b03e09 0%, var(--color-orange-text) 50%, #d24e0d 100%);
  border-radius: 62.4375rem;
  box-shadow: 0 1.125rem 2rem -1rem rgba(110, 36, 0, 0.65), 0 2px 0.375rem rgba(110, 36, 0, 0.12);
  pointer-events: auto;
  cursor: pointer;
  transition: box-shadow var(--transition), padding 0.35s var(--ease-out);
}

/* Oblouky jako v hero a v hlavičce chatu – jen ozdoba za liškou */
.assistant__pill-arcs {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  width: 10rem;
  height: 100%;
  fill: none;
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 1;
  pointer-events: none;
}

.assistant__label {
  display: flex;
  flex-direction: column;
  max-width: 13.75rem;
  overflow: hidden;
  line-height: 1.25;
  white-space: nowrap;
  transition: max-width 0.35s var(--ease-out), opacity 0.2s var(--ease-out);
}

.assistant__label-title {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: 0.9375rem;
  font-weight: 750;
  letter-spacing: -0.005em;
}

.assistant__label-sub {
  padding-left: 1rem;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.9);
}

.assistant__online {
  flex-shrink: 0;
  width: 0.625rem;
  height: 0.625rem;
  background: #4ade80;
  border: 2px solid var(--color-white);
  border-radius: 50%;
}

/* Ikona zprávy na místě lišky – vidět, jen když je liška schovaná */
.assistant__pill-icon {
  position: absolute;
  right: calc(var(--fox-w) / 2 - 2px);
  top: 50%;
  font-size: 1.5rem;
  opacity: 0;
  transform: translate(50%, -50%) scale(0.6);
  transition: opacity 0.25s var(--ease-out), transform 0.35s var(--ease-out);
}

/* Liška – stojí na spodní hraně pilulky, hlava je nad ní; dolní roh kopíruje zaoblení pilulky */
.assistant__fox {
  position: absolute;
  right: 0;
  bottom: 0;
  width: calc(var(--fox-w) + 0.5rem);
  height: calc(var(--fox-h) + var(--fox-room));
  overflow: hidden;
  border-bottom-right-radius: calc(var(--pill-h) / 2);
}

/* Klikací plocha hlavy lišky nad pilulkou */
.assistant__fox::before {
  content: "";
  position: absolute;
  top: var(--fox-room);
  right: 18%;
  left: 22%;
  height: 56%;
  border-radius: 46% 46% 0 0;
  pointer-events: none;
}

/* Spodek trička je kousek pod hranou pilulky, aby se při naklonění neodlepil */
.assistant__fox-img {
  position: absolute;
  right: 0.25rem;
  bottom: -0.5rem;
  display: block;
  width: var(--fox-w);
  height: var(--fox-h);
  max-width: none;
  object-fit: contain;
  object-position: 50% 100%;
  transform: translateY(102%);
  transform-origin: 50% 100%;
  transition: transform 0.55s cubic-bezier(0.25, 1.2, 0.4, 1);
  pointer-events: none;
}

.assistant.is-fox-out .assistant__fox-img,
.assistant.is-open .assistant__fox-img {
  transform: none;
}

.assistant.is-fox-out .assistant__fox::before,
.assistant.is-open .assistant__fox::before {
  pointer-events: auto;
  cursor: pointer;
}

.assistant:not(.is-fox-out):not(.is-open) .assistant__pill-icon,
.assistant__launcher:has(.assistant__fox.is-missing) .assistant__pill-icon {
  opacity: 1;
  transform: translate(50%, -50%);
}

.assistant__fox.is-missing {
  display: none;
}

.assistant__launcher:focus-visible .assistant__pill {
  outline: 3px solid var(--color-black);
  outline-offset: 3px;
}

@media (hover: hover) {
  .assistant__launcher:hover .assistant__pill {
    box-shadow: 0 1.375rem 2.375rem -1rem rgba(110, 36, 0, 0.7), 0 2px 0.375rem rgba(110, 36, 0, 0.14);
  }

  .assistant.is-fox-out:not(.is-open) .assistant__launcher:hover .assistant__fox-img {
    transform: translateY(-0.375rem) rotate(-3deg);
  }

}

.assistant__launcher:active .assistant__pill {
  box-shadow: 0 0.625rem 1.375rem -0.875rem rgba(110, 36, 0, 0.6);
}

/* Otevřený chat: text se schová a z pilulky zůstane jen liška */
.assistant.is-open .assistant__label {
  max-width: 0;
  opacity: 0;
}

.assistant.is-open .assistant__pill {
  padding-left: 0.75rem;
}

/* Panel – otevře se nad tlačítkem s liškou */
.assistant__panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.75rem);
  display: flex;
  flex-direction: column;
  width: min(23.75rem, calc(100vw - 2rem));
  height: min(37.5rem, calc(100vh - var(--nav-height) - var(--fox-h) - 4rem));
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 0.875rem;
  box-shadow: 0 1.875rem 4.375rem -1.875rem rgba(18, 20, 24, 0.5), 0 2px 0.5rem rgba(18, 20, 24, 0.06);
  transform-origin: 85% 100%;
  visibility: hidden;
  opacity: 0;
  pointer-events: auto;
  transform: translateY(0.625rem) scale(0.98);
  transition: opacity 0.2s var(--ease-out), transform 0.25s var(--ease-out), visibility 0s linear 0.25s;
}

/* Při otevření se viditelnost přepne hned (bez přechodu), aby šlo panel rovnou ovládat klávesnicí */
.assistant.is-open .assistant__panel {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity 0.2s var(--ease-out), transform 0.25s var(--ease-out);
}

/* Hlavička – tmavší oranžová (bílý text má kontrast min. 4,5 : 1), oblouky jako v hero */
.assistant__head {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 0.75rem 1rem 1rem;
  color: var(--color-white);
  background: linear-gradient(120deg, #b03e09 0%, var(--color-orange-text) 55%, #cf4b0b 100%);
}

.assistant__orbits {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  width: 13.75rem;
  height: 6.875rem;
  fill: none;
  stroke: rgba(255, 255, 255, 0.2);
  stroke-width: 1;
  pointer-events: none;
}

.assistant__avatar {
  flex-shrink: 0;
  width: 2.875rem;
  height: 2.875rem;
  box-shadow: 0 0 0 0.1875rem rgba(255, 255, 255, 0.92);
}

.assistant__heading {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.3;
}

.assistant__title {
  font-size: 1rem;
  font-weight: 750;
  letter-spacing: -0.01em;
}

.assistant__status {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  margin-top: 1px;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.92);
}

.assistant__dot {
  width: 0.5rem;
  height: 0.5rem;
  background: #4ade80;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.assistant__close,
.assistant__reset {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  font-size: 0.875rem;
  color: var(--color-white);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition);
}

/* Nový rozhovor – šipka dokola vedle zavírání */
.assistant__reset {
  margin-right: -0.5rem;
  font-size: 1.0625rem;
}

.assistant__reset[hidden] {
  display: none;
}

.assistant__close:hover,
.assistant__reset:hover {
  background: rgba(255, 255, 255, 0.16);
}

.assistant__close:focus-visible,
.assistant__reset:focus-visible {
  outline-color: var(--color-white);
  outline-offset: 0;
}

/* Konverzace */
.assistant__log {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.875rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.125rem 0.875rem;
  background: #fbfbfc;
}

.chat-msg {
  display: flex;
  align-items: flex-start;
  gap: 0.5625rem;
  animation: chat-in 0.3s var(--ease-out) both;
}

.chat-msg__avatar .fox-avatar {
  width: 1.875rem;
  height: 1.875rem;
}

.chat-msg__avatar .fox-avatar__icon {
  font-size: 0.9375rem;
}

.chat-msg__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.chat-bubble {
  max-width: 100%;
  padding: 0.6875rem 0.875rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 0.25rem 0.875rem 0.875rem;
  overflow-wrap: anywhere;
}

.chat-bubble p + p {
  margin-top: 0.5rem;
}

.chat-bubble__note {
  margin-top: 0.625rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--color-muted);
}

/* Víc otázek v jedné zprávě – ke které otázce odpověď patří */
.chat-bubble__about {
  margin-bottom: 0.375rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--color-muted);
}

.chat-bubble .chat-bubble__about + p {
  margin-top: 0;
}

/* Úryvek ze stránky – odkud odpověď je */
.chat-source {
  margin-top: 0.625rem;
  padding: 1px 0 1px 0.75rem;
  border-left: 3px solid var(--color-orange);
}

.chat-source + .chat-source {
  margin-top: 0.75rem;
}

.chat-source .chat-source__title {
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-black);
}

.chat-source .chat-source__text {
  margin-top: 0.1875rem;
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Seznam v citaci z dokumentu (práva, lhůty, parametry rozhraní) */
.chat-source .chat-source__list {
  display: grid;
  gap: 0.3125rem;
  margin-top: 0.3125rem;
  font-size: 0.875rem;
  line-height: 1.45;
}

.chat-source .chat-source__list li {
  position: relative;
  padding-left: 0.8125rem;
}

.chat-source .chat-source__list li::before {
  position: absolute;
  top: 0.6em;
  left: 0;
  width: 0.3125rem;
  height: 0.3125rem;
  content: "";
  background: var(--color-orange);
  border-radius: 50%;
}

/* Dotaz zákazníka – vpravo, v oranžové */
.chat-msg--user {
  justify-content: flex-end;
}

.chat-msg--user .chat-bubble {
  max-width: 84%;
  color: var(--color-white);
  background: var(--color-orange-text);
  border-color: var(--color-orange-text);
  border-radius: 0.875rem 0.25rem 0.875rem 0.875rem;
}

/* Tarify, balíčky a ceny v odpovědi */
.chat-cards {
  margin-top: 0.625rem;
  border-top: 1px solid var(--color-gray-100);
}

.chat-card {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5625rem 0;
  border-bottom: 1px solid var(--color-gray-100);
}

.chat-card:last-child {
  padding-bottom: 2px;
  border-bottom: 0;
}

.chat-card__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.chat-card__name {
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-black);
}

.chat-card__badge {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 1px 0.4375rem;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.5;
  color: #b8420a; /* kontrast 4,9 : 1 na broskvové */
  vertical-align: 1px;
  background: var(--color-peach);
  border-radius: var(--radius-sm);
}

.chat-card__meta {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--color-muted);
}

.chat-card__price {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.3;
  text-align: right;
  white-space: nowrap;
}

.chat-card__price strong {
  font-weight: 750;
  color: var(--color-black);
}

.chat-card__period,
.chat-card__after {
  font-size: 0.75rem;
  color: var(--color-muted);
}


/* Výhody služby s fajfkou */
.chat-checks {
  display: grid;
  gap: 0.375rem;
  margin-top: 0.625rem;
}

.chat-checks li {
  display: flex;
  gap: 0.5rem;
  line-height: 1.4;
}

.chat-checks .icon {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--color-orange);
}

/* Postup po krocích (např. když nejde internet) – očíslované kroky */
.chat-steps {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.625rem;
  padding: 0;
  list-style: none;
  counter-reset: chat-step;
}

.chat-steps li {
  display: flex;
  gap: 0.625rem;
  line-height: 1.45;
  counter-increment: chat-step;
}

.chat-steps li::before {
  content: counter(chat-step);
  flex: none;
  display: grid;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-orange-text);
  background: var(--color-peach);
  border-radius: var(--radius-xs);
}

/* Důležité upozornění ke krokům („zařízení neresetujte“) */
.chat-bubble__warn {
  margin-top: 0.625rem;
  padding: 0.5rem 0.625rem;
  font-weight: 650;
  line-height: 1.45;
  color: var(--color-black);
  background: var(--color-peach-soft);
  border-left: 3px solid var(--color-orange);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.chat-bubble .chat-steps + p,
.chat-bubble .chat-bubble__warn + p {
  margin-top: 0.625rem;
}

/* Nabídka dalších kroků */
.chat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.5rem;
}

.chat-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4375rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 650;
  line-height: 1.2;
  color: var(--color-orange-text);
  background: var(--color-peach-soft);
  border: 1px solid #fcd3bb;
  border-radius: 62.4375rem;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

/* Akce na stránce (posun, ověření dostupnosti) a odkazy ven mají šipku */
.chat-chip--action::after,
.chat-chip--link::after {
  content: "→";
  font-weight: 700;
}

.chat-chip--link::after {
  content: "↗";
}

@media (hover: hover) {
  .chat-chip:hover {
    color: var(--color-white);
    background: var(--color-orange-text);
    border-color: var(--color-orange-text);
  }
}

.chat-chip:active {
  color: var(--color-white);
  background: var(--color-orange-text);
}

/* „Asistent píše…“ – signál jako v logu: tečka a dva oblouky se postupně rozsvěcují */
.chat-bubble--typing {
  padding: 0.5625rem 0.8125rem;
}

.chat-typing {
  display: block;
  width: 1.375rem;
  height: 1.375rem;
}

.chat-typing circle {
  fill: var(--color-orange);
}

.chat-typing path {
  fill: none;
  stroke: var(--color-orange);
  stroke-width: 2.6;
  stroke-linecap: round;
}

.chat-typing > * {
  opacity: 0.22;
  animation: chat-signal 1.2s ease-in-out infinite;
}

.chat-typing path:nth-of-type(1) {
  animation-delay: 0.18s;
}

.chat-typing path:nth-of-type(2) {
  animation-delay: 0.36s;
}

@keyframes chat-signal {
  0%, 70%, 100% {
    opacity: 0.22;
  }
  25%, 45% {
    opacity: 1;
  }
}

@keyframes chat-in {
  from {
    opacity: 0;
    transform: translateY(0.375rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Návrhy při psaní – nad polem pro dotaz, malé štítky s názvem tématu */
.assistant__suggest {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 0.5rem;
}

.assistant__suggest[hidden] {
  display: none;
}

.assistant__suggest-label {
  margin-right: 0.125rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-muted);
}

.assistant__suggest-chip {
  max-width: 100%;
  padding: 0.3125rem 0.625rem;
  overflow: hidden;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-text);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
  transition: color var(--transition), border-color var(--transition), background-color var(--transition);
}

@media (hover: hover) {
  .assistant__suggest-chip:hover {
    color: var(--color-orange-text);
    background: var(--color-peach-soft);
    border-color: #fcd3bb;
  }
}

.assistant__suggest-chip:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 1px;
}

/* Pole pro dotaz – jako pruh s adresou v hero, oranžové tlačítko s přechodem */
.assistant__form {
  padding: 0.75rem 0.75rem 0.625rem;
  background: var(--color-white);
  border-top: 1px solid var(--color-gray-100);
}

.assistant__field {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.25rem 0.25rem 0.875rem;
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: 0.75rem;
  transition: border-color var(--transition), background-color var(--transition), box-shadow var(--transition);
}

.assistant__field:focus-within {
  background: var(--color-white);
  border-color: var(--color-orange);
  box-shadow: 0 0 0 0.1875rem rgba(247, 99, 13, 0.18);
}

.assistant__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 2.5rem;
  padding: 0;
  font-size: 1rem;
  color: var(--color-text);
  background: transparent;
  border: 0;
}

.assistant__input::placeholder {
  color: var(--color-placeholder);
  opacity: 1;
}

.assistant__input:focus {
  outline: none;
}

.assistant__send {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.0625rem;
  color: var(--color-white);
  background: var(--color-orange);
  border-radius: 0.5625rem;
  box-shadow: 0 0.5rem 1rem -0.5rem rgba(247, 99, 13, 0.7);
  transition: background-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.assistant__send:hover {
  background: var(--color-orange-deep);
  box-shadow: 0 0.625rem 1.25rem -0.5rem rgba(234, 87, 10, 0.8);
  transform: translateX(1px);
}

.assistant__note {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--color-muted);
  text-align: center;
}

/* Mobil: malá pilulka bez textu, z ní vykukuje jen hlava lišky (výřez z img/fox.png).
   Chat se otevře přes skoro celou obrazovku. */
@media (max-width: 639px) {
  .assistant {
    --pill-h: 3.25rem;
    --fox-w: 4rem;
    --fox-h: 4.3125rem;
    --fox-room: 0.625rem;
    right: 0.75rem;
    bottom: 0.75rem;
  }

  .assistant__pill {
    width: calc(var(--fox-w) + 1.375rem);
    padding: 0;
  }

  .assistant__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .assistant__pill-icon {
    right: 50%;
  }

  /* Liška zabírá celou pilulku, dolní rohy kopírují její zaoblení */
  .assistant__fox {
    width: calc(var(--fox-w) + 1.375rem);
    border-radius: 0 0 calc(var(--pill-h) / 2) calc(var(--pill-h) / 2);
  }

  /* Obrázek celé lišky je větší než pilulka – vidět je jen hlava s límečkem, zbytek pilulka ořízne.
     Čísla odpovídají img/fox.png (hlava je v oblasti 96–461 × 0–392 px z 679 × 580 px). */
  .assistant__fox-img {
    top: var(--fox-room);
    right: auto;
    bottom: auto;
    left: calc(50% - var(--fox-h) * 0.7105);
    width: calc(var(--fox-h) * 1.7321);
    height: calc(var(--fox-h) * 1.4796);
    object-fit: fill;
    /* jen hlava – bez čárek u ruky, tlapky a ocasu */
    clip-path: polygon(14.1% 0, 67.9% 0, 67.9% 48.6%, 63% 48.6%, 63% 100%, 26.2% 100%, 26.2% 55.5%, 14.1% 55.5%);
  }

  .assistant__fox::before {
    right: 10%;
    left: 10%;
    height: 70%;
  }

  /* Zelená tečka „online“ v rohu pilulky */
  .assistant__launcher::after {
    content: "";
    position: absolute;
    top: calc(var(--fox-h) - var(--pill-h) - 2px);
    right: 2px;
    width: 0.8125rem;
    height: 0.8125rem;
    background: #4ade80;
    border: 2px solid var(--color-white);
    border-radius: 50%;
  }

  .assistant__panel {
    position: fixed;
    left: 0.5rem;
    right: 0.5rem;
    bottom: 0.5rem;
    width: auto;
    height: calc(100vh - var(--nav-height) - 1rem);
    height: calc(100dvh - var(--nav-height) - 1rem);
    transform-origin: 50% 100%;
  }

  /* Otevřený chat tlačítko překryje – zavírá se křížkem v hlavičce */
  .assistant.is-open .assistant__launcher {
    visibility: hidden;
    opacity: 0;
  }
}

/* Místo na stránce, které asistent ukazuje – na chvilku se orámuje oranžově */
.assistant-target {
  border-radius: 0.75rem;
  box-shadow: 0 0 0 0.25rem rgba(247, 99, 13, 0);
  transition: box-shadow 0.8s var(--ease-out);
}

.assistant-target.is-assistant-target {
  box-shadow: 0 0 0 0.25rem rgba(247, 99, 13, 0.55);
  transition-duration: 0.25s;
}

/* Celá sekce je přes celou šířku – orámování bez zaoblení */
main > section.assistant-target {
  border-radius: 0;
}

/* ==========================================================================
   COOKIE LIŠTA – tmavá karta uprostřed dole, kousek nad spodním okrajem okna (--cookie-gap).
   Nahoře liška se sušenkou a text, pod ním tlačítka; Nastavení rozbalí tři kategorie pod sebou.
   Šířku karty mění --cookie-width. Dokud je lišta vidět, má <html> třídu has-cookie-bar a proměnnou
   --cookie-bar-h (výška lišty) – asistent vpravo dole se posune nad ni. Vytváří ji script.js → initCookieConsent().
   ========================================================================== */
:root {
  --cookie-width: 40rem;
  --cookie-gap: clamp(0.75rem, 2.5vw, 1.5rem);
}

.cookie-bar {
  --ck-text: #f1f2f4;
  --ck-muted: #b7bcc5;   /* kontrast 9,5 : 1 na tmavém pozadí (stejně jako patička) */
  --ck-line: rgba(255, 255, 255, 0.14);
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--cookie-gap) + env(safe-area-inset-bottom, 0px));
  z-index: 85; /* nad asistentem (80), pod horní lištou (100) a okny dokumentů */
  width: min(var(--cookie-width), calc(100% - 2 * var(--cookie-gap)));
  max-height: calc(100vh - var(--nav-height) - 2 * var(--cookie-gap));
  max-height: calc(100svh - var(--nav-height) - 2 * var(--cookie-gap) - env(safe-area-inset-bottom, 0px));
  margin-inline: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(1.125rem, 2.5vw, 1.5rem);
  color: var(--ck-text);
  background: var(--color-black);
  border: 1px solid var(--ck-line); /* oddělí kartu i od tmavé patičky */
  border-radius: var(--radius-md);
  box-shadow: 0 1.25rem 3rem -0.75rem rgba(18, 20, 24, 0.45), 0 0.25rem 0.75rem rgba(18, 20, 24, 0.18);
}

.cookie-bar[hidden] {
  display: none;
}

.cookie-bar.is-entering {
  animation: cookie-in 0.45s var(--ease-out) both;
}

@keyframes cookie-in {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
}

.cookie-bar__head {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

/* Liška se sušenkou */
.cookie-bar__fox {
  position: relative;
  flex: none;
  width: 3.25rem;
  height: 3.25rem;
}

.cookie-bar__avatar {
  width: 100%;
  height: 100%;
}

.cookie-bar__avatar.is-missing {
  background: var(--color-peach);
}

.cookie-bar__avatar.is-missing .fox-avatar__img {
  display: none;
}

.cookie-bar__cookie {
  position: absolute;
  right: -0.375rem;
  bottom: -0.25rem;
  width: 1.625rem;
  height: 1.625rem;
  filter: drop-shadow(0 1px 1.5px rgba(21, 23, 28, 0.25));
  transform: rotate(-12deg);
}

.cookie-bar__dough {
  fill: #e0a861;
  stroke: #b97b34;
  stroke-width: 1.2;
}

.cookie-bar__chip {
  fill: #5a3518;
}

.cookie-bar__intro {
  min-width: 0;
}

.cookie-bar__title {
  font-size: 1.0625rem;
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-white);
}

.cookie-bar__text {
  margin-top: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ck-muted);
  text-wrap: pretty;
}

.cookie-bar__link {
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 0.15625rem;
}

@media (hover: hover) {
  .cookie-bar__link:hover {
    color: var(--color-orange-light);
  }
}

/* Volby kategorií */
.cookie-bar__settings {
  display: grid;
  margin-top: 1rem;
  border-top: 1px solid var(--ck-line);
}

.cookie-bar__settings[hidden] {
  display: none;
}

.cookie-bar__option {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--ck-line);
}

.cookie-bar__option-text {
  display: grid;
  gap: 0.125rem;
  min-width: 0;
}

label.cookie-bar__option-text {
  cursor: pointer;
}

.cookie-bar__option-name {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-white);
}

.cookie-bar__option-note {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ck-muted);
}

/* Přepínač: hranatý jako ostatní ovládací prvky (--radius-sm) */
.cookie-switch {
  position: relative;
  flex: none;
  width: 2.75rem;
  height: 1.5rem;
}

.cookie-switch__input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.cookie-switch__input:disabled {
  cursor: not-allowed;
}

.cookie-switch__track {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition);
}

.cookie-switch__track::after {
  content: "";
  position: absolute;
  top: 0.1875rem;
  left: 0.1875rem;
  width: 1.125rem;
  height: 1.125rem;
  background: var(--color-white);
  border-radius: var(--radius-xs);
  box-shadow: 0 1px 2px rgba(18, 20, 24, 0.2);
  transition: transform var(--transition);
}

.cookie-switch__input:checked + .cookie-switch__track {
  background: var(--color-orange);
}

.cookie-switch__input:checked + .cookie-switch__track::after {
  transform: translateX(1.25rem);
}

.cookie-switch.is-locked .cookie-switch__track {
  opacity: 0.55;
}

.cookie-switch__input:focus-visible + .cookie-switch__track {
  outline: 2px solid var(--color-orange);
  outline-offset: 2px;
}

/* Tlačítka */
.cookie-bar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 1.125rem;
}

.cookie-bar__btn {
  flex: 1 1 8rem;
}

.cookie-bar__btn[hidden],
.cookie-bar__more[hidden] {
  display: none;
}

.cookie-bar__more {
  flex: none;
  margin-left: -0.375rem; /* text odkazu lícuje s tlačítky, i když se zalomí na další řádek */
  padding: 0.5rem 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 0.1875rem;
  border-radius: var(--radius-xs);
}

@media (hover: hover) {
  .cookie-bar__more:hover {
    color: var(--color-orange-light);
  }
}

/* Tlačítka na tmavém pruhu: „Přijmout vše“ bílé, ostatní obrysové; oranžová jen při najetí myší */
.cookie-bar .btn--dark {
  color: var(--color-black);
  background: var(--color-white);
  box-shadow: none;
}

.cookie-bar .btn--outline {
  color: var(--color-white);
  background: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.38);
}

@media (hover: hover) {
  .cookie-bar .btn--dark:hover,
  .cookie-bar .btn--outline:hover {
    color: var(--color-white);
    background: var(--color-orange-text);
    box-shadow: inset 0 0 0 1.5px var(--color-orange-text);
  }
}

.cookie-bar .btn:focus-visible,
.cookie-bar__more:focus-visible,
.cookie-bar__link:focus-visible {
  outline: 2px solid var(--color-orange-light);
  outline-offset: 2px;
}

/* Širší okno: tlačítka a kategorie lícují s textem (odsazené o lišku), tlačítka nejsou roztažená */
@media (min-width: 640px) {
  .cookie-bar__head {
    align-items: center;
  }

  .cookie-bar__actions,
  .cookie-bar__settings {
    margin-left: 4.25rem; /* liška 3,25rem + mezera 1rem */
  }

  .cookie-bar__btn {
    flex: none;
    min-width: 9.5rem;
  }

  .cookie-bar__more {
    margin-left: 0.25rem;
  }
}

@media (max-width: 639px) {
  .cookie-bar__fox {
    width: 2.75rem;
    height: 2.75rem;
  }
}

/* Dokud je lišta vidět, asistent vpravo dole stojí nad ní (--cookie-bar-h nastavuje script.js).
   Na širokém okně je karta uprostřed a zavřený asistent se vedle ní vejde – posune se jen otevřený chat. */
.has-cookie-bar .assistant {
  bottom: calc(clamp(0.75rem, 2vw, 1.5rem) + var(--cookie-bar-h, 0px) + var(--cookie-gap));
}

.has-cookie-bar .assistant__panel {
  height: min(37.5rem, calc(100vh - var(--nav-height) - var(--fox-h) - 4rem - var(--cookie-bar-h, 0px) - var(--cookie-gap)));
}

@media (min-width: 1280px) {
  .has-cookie-bar .assistant:not(.is-open) {
    bottom: clamp(0.75rem, 2vw, 1.5rem);
  }
}

@media (max-width: 639px) {
  .has-cookie-bar .assistant {
    bottom: calc(0.75rem + var(--cookie-bar-h, 0px) + var(--cookie-gap));
  }

  /* Otevřený chat je na mobilu přes celou obrazovku – překryje i lištu */
  .has-cookie-bar .assistant.is-open {
    z-index: 86;
  }

  .has-cookie-bar .assistant__panel {
    height: calc(100vh - var(--nav-height) - 1rem);
    height: calc(100dvh - var(--nav-height) - 1rem);
  }
}

/* Odkaz „Nastavení cookies“ v patičce (bez JavaScriptu nemá co otevřít, tak se neukáže) */
html:not(.js) .site-footer__cookies {
  display: none;
}

.site-footer__cookies {
  margin-left: 0.75rem;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.1875rem;
  border-radius: var(--radius-xs);
  transition: color var(--transition);
}

@media (hover: hover) {
  .site-footer__cookies:hover {
    color: var(--color-white);
  }
}

/* Autor webu – „Made by Hexora“ za odkazem na cookies */
.site-footer__credit {
  display: inline-block;
  margin-left: 0.75rem;
  white-space: nowrap;
}

.site-footer__credit a {
  color: var(--color-white);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--footer-line);
  text-underline-offset: 0.1875rem;
  border-radius: var(--radius-xs);
  transition: color var(--transition), text-decoration-color var(--transition);
}

@media (hover: hover) {
  .site-footer__credit a:hover {
    color: var(--color-orange-light);
    text-decoration-color: currentColor;
  }
}

/* STRÁNKA 404 (404.html) – velké číslo chyby nad nadpisem a odkazy na hlavní sekce */
.error-page__inner {
  max-width: 46rem;
  padding-block: clamp(2rem, 6vw, 5rem);
}

.error-page__code {
  font-size: clamp(4.5rem, 3rem + 6vw, 8rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--color-gray-200);
}

.error-page__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: 2rem;
  font-weight: 600;
}

.error-page__links a {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 0.1875rem;
}

@media (hover: hover) {
  .error-page__links a:hover {
    color: var(--color-orange-text);
  }
}

/* KE STAŽENÍ (download.html) a PŘEHLED PROGRAMŮ (sled.html) – úvod bez fotografie, pod ním obsah */
.product-hero--compact {
  padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
}

.files__intro {
  max-width: 46rem;
  margin-top: clamp(2rem, 4.5vw, 4rem);
}

/* Dokumenty po skupinách – každý řádek je odkaz na PDF (ikona, název, typ a velikost) */
.files {
  padding-bottom: clamp(4rem, 7vw, 6rem);
}

.files__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.5rem, 4vw, 3.5rem) clamp(2rem, 5vw, 5rem);
}

.files__title {
  padding-bottom: 0.875rem;
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-black);
  border-bottom: 1px solid var(--color-gray-200);
}

.files__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.file {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 0.9375rem 0.25rem;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-gray-100);
  border-radius: var(--radius-xs);
}

.file__icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--color-orange-text);
  background: var(--color-peach);
  border-radius: var(--radius-md);
}

.file__icon svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 18;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.file__text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.file__name {
  font-weight: 650;
  line-height: 1.35;
  color: var(--color-black);
  transition: color var(--transition);
}

.file__meta {
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--color-muted);
}

.file > .icon-external {
  font-size: 1rem;
  color: var(--color-gray-400);
}

@media (hover: hover) {
  .file:hover .file__name,
  .file:hover > .icon-external {
    color: var(--color-orange-text);
  }
}

@media (max-width: 767px) {
  .files__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Přehled programů: místo pro plugin Sledování TV; náhradní text jen dokud je plugin prázdný */
.channels {
  padding-bottom: clamp(4rem, 7vw, 6rem);
}

.channels__plugin:not(:empty) {
  min-height: 20rem;
}

/* Náhradní text se ukáže až po 8 s – do té doby má plugin čas se načíst */
.channels__fallback {
  max-width: 40rem;
  padding-top: 1.5rem;
  color: var(--color-muted);
  border-top: 1px solid var(--color-gray-200);
  visibility: hidden;
  animation: channels-fallback 0s linear 8s forwards;
}

@keyframes channels-fallback {
  to {
    visibility: visible;
  }
}

.channels__fallback a {
  font-weight: 600;
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 0.1875rem;
}

.channels__plugin:not(:empty) + .channels__fallback {
  display: none;
}

/* ANIMATIONS */

/* Úvodní animace hero – spustí se po zmizení loaderu (třída .is-loaded na <html>) */
.js .hero__content,
.js .hero__fox {
  opacity: 0;
}

.is-loaded .hero__content {
  animation: fade-up 0.8s var(--ease-out) 0.05s both;
}

/* Formulář se objeví o chvilku později než text */
.is-loaded .availability {
  animation: fade-up 0.8s var(--ease-out) 0.2s both;
}

.is-loaded .hero__fox {
  animation: fox-in 1s var(--ease-out) 0.3s both;
}

.is-loaded .hero__pulse--1 {
  animation: orbit-pulse 20s linear 1.5s infinite;
}

.is-loaded .hero__pulse--2 {
  animation: orbit-pulse 28s linear 6s infinite;
}

@keyframes loader-brand {
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes loader-beam {
  to {
    transform: scaleX(1);
  }
}

@keyframes loader-spark {
  0% {
    opacity: 0;
    transform: translateX(0);
  }
  10%,
  88% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(100vw);
  }
}

@keyframes loader-out {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(0.875rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fox-in {
  from {
    opacity: 0;
    transform: translateY(1.5rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes orbit-pulse {
  0% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
  10%,
  85% {
    opacity: 0.5;
  }
  100% {
    stroke-dashoffset: -1000;
    opacity: 0;
  }
}

@keyframes field-error-in {
  from {
    opacity: 0;
    transform: translateY(-0.25rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes success-in {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes suggest-in {
  from {
    opacity: 0;
    transform: translateY(-0.25rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}


/* RESPONSIVE */

/* Velké monitory (1600 px a víc) */
@media (min-width: 1600px) {
  :root {
    --container: 90rem;
  }
}

/* Menší notebooky a tablety na šířku */
@media (max-width: 1279px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  }

  .hero__title {
    font-size: clamp(2rem, min(9.8cqi, 1.5rem + 2.6vw), 4.625rem);
  }
}


/* Užší tablety na šířku – víc místa pro vyhledávací pole */
@media (max-width: 1099px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  }
}

/* Menší notebooky: položky menu blíž k sobě, ať se vedle loga vejde i „Ostatní služby“ */
@media (max-width: 1365px) {
  .nav__menu {
    gap: 1.5rem;
  }

  /* Rozcestník: menší ikona a užší odsazení, ať se „Ostatní služby“ vejdou na jeden řádek */
  .quicknav__link {
    gap: 1rem;
    padding-inline: 1.25rem;
  }

  .quicknav__icon {
    width: 2.5rem;
    height: 2.5rem;
  }
}

/* Navigace – hamburger menu (sedm položek se vedle loga a sociálních sítí vejde až od 1200 px) */
@media (max-width: 1199px) {
  /* Rozcestník: boxy 2 × 2 */
  .quicknav__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quicknav__link {
    min-height: 7.75rem;
  }

  .nav {
    display: flex;
    justify-content: space-between;
  }

  .nav__toggle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3125rem;
    width: 2.875rem;
    height: 2.875rem;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition);
  }

  .nav__toggle:hover {
    background: var(--color-gray-50);
  }

  .nav__toggle-line {
    display: block;
    width: 1.375rem;
    height: 2px;
    background: var(--color-black);
    border-radius: 2px;
    transition: transform 0.3s var(--ease-out), opacity 0.2s;
  }

  .nav.is-open .nav__toggle-line:nth-child(1) {
    transform: translateY(0.4375rem) rotate(45deg);
  }

  .nav.is-open .nav__toggle-line:nth-child(2) {
    opacity: 0;
  }

  .nav.is-open .nav__toggle-line:nth-child(3) {
    transform: translateY(-0.4375rem) rotate(-45deg);
  }

  .nav__panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: block;
    max-height: calc(100vh - var(--nav-height));
    max-height: calc(100dvh - var(--nav-height));
    padding: 0.5rem var(--nav-side) 1.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-gray-100);
    box-shadow: 0 1.5rem 2.5rem -1.5rem rgba(18, 20, 24, 0.25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.5rem);
    transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out), visibility 0.25s;
  }

  .nav.is-open .nav__panel {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav__menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav__link {
    display: block;
    padding: 0.9375rem 0;
    font-size: 1.0625rem;
    border-bottom: 1px solid var(--color-gray-100);
  }

  .nav__link::after {
    right: auto;
    bottom: 0.625rem;
    width: 1.75rem;
  }

  .nav__menu > li {
    display: block;
  }

  /* Mega menu v mobilním menu – po klepnutí se položka rozbalí jako harmonika */
  .nav__link.nav__dropdown-toggle {
    display: flex;
    justify-content: space-between;
    width: 100%;
    text-align: left;
  }

  .nav__caret {
    display: block;
  }

  .mega,
  .nav__item--mega.is-open .mega {
    position: static;
    display: none;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: none;
  }

  .nav__item--mega.is-open .mega {
    display: block;
  }

  /* Dlaždice v mobilním menu: bez odsazení a zvýraznění, popis menším písmem */
  .mega__inner {
    gap: 0.25rem 1.5rem;
    padding: 0.625rem 0 0.875rem;
    border-bottom: 1px solid var(--color-gray-100);
  }

  .mega__tile {
    padding: 0.5rem 0;
  }

  .mega__tile:hover,
  .mega__tile:focus-visible {
    background: none;
  }

  .mega__tile-title::after {
    display: none;
  }

  .mega__tile-text {
    font-size: 0.8125rem;
  }

  .nav__social {
    justify-self: start;
    margin: 1rem 0 0 -0.5625rem;
  }
}

/* Tablet na výšku a mobil: text nahoře, liška pod ním */
@media (max-width: 959px) {
  /* Dlaždice mega menu se v mobilním menu zalomí na dva sloupce */
  .mega__inner {
    --mega-cols: 2;
  }

  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "content"
      "fox";
    min-height: 0;
  }

  .hero__content {
    max-width: 40rem;
    padding-block: 3rem 0;
  }

  .hero__fox {
    --fox-height: clamp(15.625rem, 50vw, 25rem);
    height: var(--fox-height);
    margin-top: 1rem;
  }

  .hero__fox-img {
    left: auto;
    right: calc(var(--gutter) * -1); /* až k pravému okraji okna */
    height: 100%;
    max-width: calc(100% + var(--gutter));
    object-position: right bottom;
  }

  .hero__fox.is-missing::before {
    left: auto;
    right: 0;
    bottom: 2.5rem;
    width: min(60%, 18.75rem);
  }
}

/* Mobil */
@media (max-width: 639px) {
  :root {
    --nav-height: 4.125rem;
    --logo-height: 2.25rem;
    --logo-max-width: 11.25rem;
    --logo-placeholder-width: 8.5rem;
  }

  .hero__title {
    font-size: clamp(1.875rem, 10.4cqi, 2.625rem);
  }

  .hero__content {
    padding-top: 2.25rem;
  }

  /* Potvrzení na mobilu: ikona s textem v jednom řádku, tlačítko pod nimi přes celou šířku */
  .availability-success {
    flex-wrap: wrap;
    padding: 1rem;
  }

  .availability-success__again {
    flex-basis: 100%;
  }

  /* Liška na mobilu menší a až pod obsahem */
  .hero__fox {
    --fox-height: clamp(12.5rem, 60vw, 16.875rem);
    margin-top: 1rem;
  }

  /* Mega menu na mobilu: dlaždice pod sebou */
  .mega__inner {
    --mega-cols: 1;
    gap: 2px;
    padding: 0.5rem 0 0.75rem;
  }

  /* Rozcestník na mobilu: boxy 2 × 2, menší ikona a užší odsazení */
  .quicknav__list {
    gap: 0.625rem;
  }

  .quicknav__link {
    gap: 0.6875rem;
    min-height: 6.25rem;
    padding: 0.875rem 0.875rem;
  }

  .quicknav__link::before {
    height: 2.375rem;
  }

  .quicknav__icon {
    width: 2rem;
    height: 2rem;
  }

  .quicknav__title {
    font-size: 1.1875rem;
  }
}

/* Úzké telefony: v boxu 2 × 2 je méně místa – menší ikona a odsazení */
@media (max-width: 374px) {
  .quicknav__link {
    gap: 0.5625rem;
    padding-inline: 0.75rem;
  }

  .quicknav__icon {
    width: 1.625rem;
    height: 1.625rem;
  }
}

/* Nejužší telefony (320 px): boxy pod sebou přes celou šířku */
@media (max-width: 339px) {
  .quicknav__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .quicknav__link {
    gap: 0.875rem;
    min-height: 4.875rem;
    padding-inline: 1.125rem;
  }

  .quicknav__icon {
    width: 2rem;
    height: 2rem;
  }
}


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

  .loader,
  .hero__pulse {
    display: none;
  }

  .js .hero__content,
  .js .hero__fox,
  .js .availability {
    opacity: 1;
    transform: none;
  }

  /* Přechody úplně vypnuté (0s): s 0.01ms by se „přecházelo“ i u prvků bez vlastního přechodu
     a obsah panelu by se zviditelnil až o snímek později – fokus by na něj nešel přesunout */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
}