/*
Theme Name: Pneumatuska
Theme URI: https://www.pneumatuska.cz
Author: MG Web
Description: PNEUMATUŠKA - pneuservis KAMADOTRANS spol. s r.o. Světlý industriální theme, sesterský k rozcestníku kamadotrans.cz.
Version: 0.8.2
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: pneuservis
*/

/* ── Písma hostovaná lokálně (latin + latin-ext) ─────────────────────
   Nahrazuje Google Fonts: žádný přenos IP do USA před souhlasem. */
/* Anton 400 latin-ext */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/anton-400-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;
}
/* Anton 400 latin */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/anton-400-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;
}
/* Archivo 500 latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/archivo-500-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;
}
/* Archivo 500 latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/archivo-500-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;
}
/* Archivo 600 latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/archivo-500-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;
}
/* Archivo 600 latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/archivo-500-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;
}
/* Archivo 700 latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/archivo-500-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;
}
/* Archivo 700 latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/archivo-500-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;
}
/* Archivo 800 latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/archivo-500-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;
}
/* Archivo 800 latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/archivo-500-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;
}
/* Archivo 900 latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/archivo-500-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;
}
/* Archivo 900 latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/archivo-500-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;
}
/* Plus Jakarta Sans 400 latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/plus-jakarta-sans-400-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;
}
/* Plus Jakarta Sans 400 latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/plus-jakarta-sans-400-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;
}
/* Plus Jakarta Sans 500 latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/plus-jakarta-sans-400-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;
}
/* Plus Jakarta Sans 500 latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/plus-jakarta-sans-400-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;
}
/* Plus Jakarta Sans 600 latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/plus-jakarta-sans-400-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;
}
/* Plus Jakarta Sans 600 latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/plus-jakarta-sans-400-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;
}
/* Plus Jakarta Sans 700 latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/plus-jakarta-sans-400-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;
}
/* Plus Jakarta Sans 700 latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/plus-jakarta-sans-400-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;
}


:root {
  /* Barvy - papírová základna sdílená s rozcestníkem, akcent červený */
  --c-bg: #F3F2EF;
  --c-surface: #FFFFFF;
  --c-ink: #15171C;
  --c-muted: #5C636E;
  /* Linka musí být vidět. Rozcestník má .09 a působí měkce a vzdušně,
     pneuservis má být sevřený a industriální - stejná DNA, jiná stavba. */
  --c-line: rgba(21, 23, 28, .14);
  --c-line-silna: rgba(21, 23, 28, .24);
  --c-brand: #D3232A;
  --c-brand-deep: #8E1519;
  --c-brand-soft: rgba(211, 35, 42, .09);

  /* Písma - shodná s kamadotrans.cz */
  --font-hero: "Anton", "Archivo", system-ui, sans-serif;
  --font-head: "Archivo", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, sans-serif;

  --maxw: 1200px;

  /* Tvrdší rádiusy než rozcestník. Ten je měkký a vzdušný, tenhle web
     má být dílenský - hrany, ne oblázky. */
  --r-lg: 1.15rem;
  --r-md: .65rem;
  --r-sm: .3rem;

  --ease: cubic-bezier(.32, .72, 0, 1);
  /* Pružina s mírným přestřelením - jen pro malé prvky (ikony v tlačítku),
     na velkých plochách by přestřelení vypadalo jako chyba layoutu. */
  --ease-pruzny: cubic-bezier(.34, 1.4, .64, 1);
  /* Přímá odezva na kurzor zůstává pod 200 ms - to je měřený závěr z v0.2.2
     a platí dál: pomalejší hover se nečte jako elegance, ale jako lag.
     Delší časy patří pohybům, které uživatel nevyvolal (reveal) nebo které
     jsou jen doprovodné (pružina ikony uvnitř tlačítka). */
  --t-rychle: .18s;
  --t-bezne: .36s;
  --t-pomale: .8s;

  --shadow-soft: 0 24px 50px -30px rgba(21, 23, 28, .38);
  --shadow-lift: 0 34px 70px -34px rgba(21, 23, 28, .48);

  /* ---- Dvojrámeček (Doppelrand) ----
     Karta nemá ležet na pozadí jako nálepka. Vnější tác drží vnitřní plát,
     jako sklo vsazené do hliníkového rámu. Šedý obtah 1px se tím nahradí
     materiálem: rozdílem plochy, vlasovým prstencem a horním přesvětlením.
     Bezel je zároveň rozdíl mezi vnějším a vnitřním rádiusem - proto
     concentric-radius výpočet, jinak rohy nejsou soustředné. */
  --bezel: .4rem;
  --tac-plocha: rgba(21, 23, 28, .05);
  --tac-prstenec: rgba(21, 23, 28, .08);
  --plat-plocha: var(--c-surface);
  --plat-prstenec: rgba(21, 23, 28, .07);
  --plat-svetlo: inset 0 1px 0 rgba(255, 255, 255, .9);
  --plat-stin: 0 1px 2px rgba(21, 23, 28, .04), 0 10px 24px -18px rgba(21, 23, 28, .3);
  --prstenec-brand: rgba(211, 35, 42, .3);
  --prstenec-brand-slaby: rgba(211, 35, 42, .16);
  /* Dělič uvnitř plátu. Slabší než --c-line, protože ta je stavěná
     na papír - na bílém plátu působí stejná hodnota jako rýha. */
  --linka-vnitrni: rgba(21, 23, 28, .09);

  /* Na inkoustovém a červeném podkladu se poměr obrací - tác je světlejší
     než pozadí, ne tmavší. */
  --tac-plocha-tma: rgba(255, 255, 255, .05);
  --tac-prstenec-tma: rgba(255, 255, 255, .1);
  --plat-plocha-tma: rgba(255, 255, 255, .06);
  --plat-prstenec-tma: rgba(255, 255, 255, .12);
  --plat-svetlo-tma: inset 0 1px 0 rgba(255, 255, 255, .1);

  /* Tempo sekcí. Stránka musí střídat nádech a sevření,
     jinak splyne v jeden svitek. */
  /* Tři tempa. Zvednuto ve v0.5.0: nejtěsnější tempo bylo 64 px a sousedilo
     se 160 px, takže vedlejší sekce působily zmáčknuté mezi hlavními.
     Poměr mezi tempy zůstal, jen se zvedla podlaha. */
  --sp-tesna: clamp(3.25rem, 6vw, 5rem);
  --sp-bezna: clamp(4.75rem, 8.5vw, 7.5rem);
  --sp-vzdusna: clamp(6.25rem, 12vw, 10.5rem);

  /* Typografická škála se skoky, ne s odstíny.
     Sousední kroky v poměru 1,15-1,37, aby byl rozdíl vidět. */
  --fs-micro: .75rem;
  --fs-sm: .875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.5rem;
  --fs-xl: 2rem;
  --fs-2xl: 2.75rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 800; letter-spacing: -.015em; line-height: 1.1; margin: 0; }

:focus-visible {
  outline: 3px solid var(--c-brand);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Jemné zrno - stejný prvek jako na rozcestníku, drží rodinný vzhled */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.container {
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2rem);
  position: relative; z-index: 2;
}

.preskoc {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--c-ink); color: #fff; padding: .8rem 1.2rem; border-radius: 0 0 var(--r-sm) 0;
  font-family: var(--font-head); font-weight: 700;
}
.preskoc:focus { left: 0; }

/* ============ Dvojrámeček (Doppelrand) ============

   Šedý obtah 1px byl na stránce dvacetkrát a dělal z každé karty nálepku
   na pozadí. Nahrazuje ho materiál: vnější tác drží vnitřní plát, mezi nimi
   je bezel. Rozdíl ploch, vlasový prstenec a horní přesvětlení dělají hranu
   čitelnou, aniž by ji bylo nutné obtáhnout.

   Technika: plát kreslí ::before se záporným z-index. Rodič má isolation,
   takže záporná vrstva zůstane nad jeho pozadím a pod obsahem. Díky tomu
   nemusí obsah dostat position: relative - honeypot ve formuláři si nechá
   svůj absolute a mřížky si nechají své grid items (absolutně pozicovaný
   pseudo-element není grid item).

   Bezel je zároveň rozdíl obou rádiusů, jinak nejsou rohy soustředné.
*/

:is(.sluzba, .duvod, .karta, .form, .udaj, .panel, .rozmer, .dot,
    .oznaceni__vysvetlivka, .zakon, .souhrn, .opotrebeni__foto,
    .kontakt__mapa, .pneuhotel__foto) {
  --r-vnejsi: var(--r-md);
  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: var(--r-vnejsi);
  background: var(--tac-plocha);
  box-shadow: 0 0 0 1px var(--tac-prstenec);
}

:is(.sluzba, .duvod, .karta, .form, .udaj, .panel, .rozmer, .dot,
    .oznaceni__vysvetlivka, .zakon, .souhrn, .opotrebeni__foto,
    .kontakt__mapa, .pneuhotel__foto)::before {
  content: "";
  position: absolute;
  inset: var(--bezel);
  z-index: -1;
  border-radius: calc(var(--r-vnejsi) - var(--bezel));
  background: var(--plat-plocha);
  box-shadow: 0 0 0 1px var(--plat-prstenec), var(--plat-svetlo), var(--plat-stin);
  transition: background var(--t-rychle) var(--ease), box-shadow var(--t-rychle) var(--ease);
}

/* Obal, jehož obsah sahá až k hraně plátu (fotka, mapa), potřebuje ořez -
   plát pod neprůhledným obrázkem by nebyl vidět. */
:is(.opotrebeni__foto, .kontakt__mapa, .pneuhotel__foto) { padding: var(--bezel); }
:is(.kontakt__mapa, .pneuhotel__foto) > * {
  border-radius: calc(var(--r-vnejsi) - var(--bezel));
  overflow: hidden;
  display: block;
}
/* Fotka a popiska sdílejí jeden plát, takže se zaobluje jen vnější dvojice
   rohů. Kdyby dostaly radius obě samostatně, vznikne uprostřed plátu šev. */
.opotrebeni__foto img {
  border-radius: calc(var(--r-vnejsi) - var(--bezel)) calc(var(--r-vnejsi) - var(--bezel)) 0 0;
}

/* ============ Wordmark ============ */

/* ⚠️ ANTON, ne Archivo. Do 10. 9. 2026 tu byl `--font-head` v řezu 900,
   takže pneuservis byl jediný web skupiny, jehož wordmark v hlavičce
   nesedl na sourozence: tachografy, jeřáby i automatuška ho mají v Antonu
   a v Antonu ho má i vlastní hero o kus níž. Značka se tak na jedné
   stránce psala dvěma různými písmy.

   Anton má jen řez 400 a je užší, proto o stupeň větší velikost
   a kladný prostrk místo záporného - jinak by wordmark vedle
   telefonního tlačítka opticky ubyl. */
.brand {
  font-family: var(--font-hero); font-weight: 400;
  letter-spacing: .02em; font-size: clamp(1.15rem, 2.1vw, 1.4rem);
  color: var(--c-ink); white-space: nowrap;
}
.brand__matuska { color: var(--c-brand); }
.brand__dot { color: var(--c-brand); }
.brand--sm { font-size: var(--fs-md); }

/* ============ Hlavička ============ */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(243, 242, 239, .86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--c-line);
}
.site-header__inner {
  display: flex; align-items: center; gap: 1rem;
  height: clamp(62px, 8vw, 76px);
}

.nav { display: none; gap: 1.5rem; margin-left: auto; }
.nav a {
  font-family: var(--font-head); font-weight: 600; font-size: var(--fs-sm);
  color: var(--c-muted); padding: .35rem 0; position: relative;
  transition: color .25s var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--c-brand); transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav a:hover { color: var(--c-ink); }
.nav a:hover::after { transform: scaleX(1); }

.site-header__akce { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
@media (min-width: 900px) { .site-header__akce { margin-left: 1.5rem; } }

/* ============ Tlačítka ============ */

.btn {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-base);
  padding: .7rem .8rem .7rem 1.35rem; border-radius: 999px;
  border: 0; cursor: pointer; text-align: left;
  transition: transform var(--t-rychle) var(--ease), background var(--t-rychle) var(--ease),
              color var(--t-rychle) var(--ease), box-shadow var(--t-rychle) var(--ease);
}
/* Tlačítko se pod kurzorem nadzvedne a při stisku zmáčkne - dvě fáze
   jednoho pohybu, ne skoková změna barvy. */
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(.98) translateY(0); transition-duration: .08s; }
.btn__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 999px; flex: 0 0 auto;
  transition: transform var(--t-bezne) var(--ease-pruzny);
}
.btn__ico svg { width: 1rem; height: 1rem; }
/* Vnitřní kolečko táhne diagonálně ven - napětí uvnitř tlačítka. */
.btn:hover .btn__ico { transform: translate(3px, -1px) scale(1.07); }

.btn--brand {
  background: var(--c-brand); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 16px -10px rgba(142, 21, 25, .8);
}
.btn--brand:hover {
  background: #b91d24;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 12px 24px -12px rgba(142, 21, 25, .85);
}
.btn--brand .btn__ico { background: rgba(255, 255, 255, .22); }

.btn--ink {
  background: var(--c-ink); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 6px 16px -10px rgba(21, 23, 28, .7);
}
.btn--ink:hover {
  background: #24272f;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 12px 24px -12px rgba(21, 23, 28, .75);
}
.btn--ink .btn__ico { background: rgba(255, 255, 255, .16); }

.btn--ghost {
  padding: .68rem 1.3rem; background: transparent;
  border: 1px solid var(--c-line-silna); color: var(--c-ink);
}
.btn--ghost:hover { border-color: var(--c-ink); background: rgba(21, 23, 28, .04); }

.btn--svetle { background: #fff; color: var(--c-brand-deep); }
.btn--svetle:hover { background: #f4f0f0; }
.btn--svetle .btn__ico { background: var(--c-brand-soft); }

.btn--plna { width: 100%; justify-content: space-between; padding-right: .7rem; }

/* Telefon v hlavičce - na mobilu jen ikona, číslo se skryje */
.btn--tel { padding: .5rem; gap: 0; }
.btn--tel .btn__ico { background: transparent; width: 1.7rem; height: 1.7rem; }
.btn--tel .btn__text { display: none; }
@media (min-width: 560px) {
  .btn--tel { padding: .55rem 1.1rem .55rem .75rem; gap: .5rem; }
  .btn--tel .btn__text { display: inline; }
}

/* Hamburger */
.hamburger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 10px;
  background: transparent; border: 1px solid var(--c-line-silna); border-radius: 999px;
  cursor: pointer;
}
.hamburger span {
  display: block; height: 2px; background: var(--c-ink); border-radius: 2px;
  transition: transform .35s var(--ease), opacity .2s var(--ease);
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 900px) {
  .nav { display: flex; }
  .hamburger { display: none; }
}

/* Rozbalené mobilní menu */
@media (max-width: 899px) {
  /* Menu je uvnitř .container (position:relative), takže by se jinak
     zarovnalo jen na jeho šířku. Roztáhneme ho přes celou obrazovku. */
  .nav.is-otevrene {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: 100%; left: 50%;
    width: 100vw; transform: translateX(-50%);
    background: var(--c-surface); border-bottom: 1px solid var(--c-line);
    padding: .5rem clamp(1.1rem, 4vw, 2rem) 1rem;
    box-shadow: var(--shadow-soft);
  }
  .nav.is-otevrene a {
    padding: .85rem 0; font-size: var(--fs-md); color: var(--c-ink);
    border-bottom: 1px solid var(--c-line);
  }
  .nav.is-otevrene a:last-child { border-bottom: 0; }
}

/* ============ Eyebrow a sekce ============ */

.eyebrow {
  display: inline-block; margin: 0 0 .9rem;
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-micro);
  letter-spacing: .18em; text-transform: uppercase; color: var(--c-brand);
  padding: .4rem .85rem; border-radius: 999px;
  background: var(--c-surface); border: 0;
  box-shadow: 0 0 0 1px var(--prstenec-brand-slaby), inset 0 1px 0 rgba(255, 255, 255, .9),
              0 4px 10px -8px rgba(21, 23, 28, .4);
}
.eyebrow--light {
  background: rgba(255, 255, 255, .16); color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .26), inset 0 1px 0 rgba(255, 255, 255, .18);
}

/* Tři tempa místo jednoho. Sekce, které nesou váhu, dostanou prostor,
   vedlejší se stáhnou. Bez toho je stránka metronom. */
.section { padding-block: var(--sp-bezna); }
.section--tesna { padding-block: var(--sp-tesna); }
.section--vzdusna { padding-block: var(--sp-vzdusna); }

.section__head { max-width: 44rem; margin-bottom: clamp(2.5rem, 4.6vw, 3.75rem); }
.section__title { font-size: clamp(1.85rem, 3.6vw, var(--fs-2xl)); }
.section__sub { color: var(--c-muted); margin: 1.15rem 0 0; font-size: var(--fs-md); }
.section__sub a { color: var(--c-brand); text-decoration: underline; text-underline-offset: 3px; }

/* Druhý typ hlavičky - nadpis vlevo, podnadpis vpravo na baseline.
   Dva tvary místo sedmi stejných bloků. */
.section__head--siroka { max-width: none; }
@media (min-width: 900px) {
  .section__head--siroka {
    display: grid; gap: .2rem 3rem; align-items: end;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  }
  /* Umístění je explicitní. Bez toho by grid naskládal tři sourozence
     do dvou sloupců po pořadí a nadpis by skončil vedle eyebrow. */
  /* justify-self je nutné: jako grid item by se inline-block roztáhl přes
     celý sloupec a z pilulky by byl pruh přes půl stránky. */
  .section__head--siroka .eyebrow { grid-column: 1; grid-row: 1; justify-self: start; }
  .section__head--siroka .section__title { grid-column: 1; grid-row: 2; }
  .section__head--siroka .section__sub { grid-column: 2; grid-row: 2; margin: 0 0 .4rem; }
}

.section--sluzby { background: var(--c-surface); border-block: 1px solid var(--c-line); }
/* Sekce je bílá, takže bílý plát by v ní zmizel a zbyl by jen obtah tácu.
   Karta se proto obrací na papír - stejně jako karty Poradny. */
.section--sluzby .sluzba { --plat-plocha: var(--c-bg); }
.section--stranka { padding-top: clamp(2.5rem, 6vw, 4rem); }

/* ---------- Proč my jako inkoustový blok ----------
   Web měl jediný barevný předěl (pneuhotel) ve 24 % délky a pak přes
   4000 px nepřerušeného papíru. Tenhle blok sedí v 78 % a zároveň
   funguje jako optický podstavec pro formulář pod sebou. */
.section--proc {
  background: var(--c-ink); color: rgba(255, 255, 255, .78);
  border-block: 0;
}
.section--proc .section__title { color: #fff; }
.section--proc .eyebrow {
  background: rgba(255, 255, 255, .09); color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .2), inset 0 1px 0 rgba(255, 255, 255, .12);
}
/* Na inkoustu se poměr obrací - tác je světlejší než pozadí, ne tmavší. */
.section--proc .duvod {
  --tac-plocha: var(--tac-plocha-tma);
  --tac-prstenec: var(--tac-prstenec-tma);
  --plat-plocha: var(--plat-plocha-tma);
  --plat-prstenec: var(--plat-prstenec-tma);
  --plat-svetlo: var(--plat-svetlo-tma);
  --plat-stin: 0 12px 30px -22px rgba(0, 0, 0, .75);
}
.section--proc .duvod__nazev { color: #fff; }
.section--proc .duvod__popis { color: rgba(255, 255, 255, .7); }
.section--proc .duvod__ico { background: var(--c-brand); color: #fff; }

/* ============ Hero ============ */

.hero {
  position: relative; overflow: hidden;
  padding: clamp(3.75rem, 9vw, 7.25rem) 0 clamp(3.5rem, 6.5vw, 5.5rem);
}
.hero__foto { position: absolute; inset: 0; z-index: 0; }
.hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
/* Silný světlý závoj - fotka slouží jako textura, ne jako hlavní motiv.
   Bez něj by inkoustový wordmark na tmavé pneumatice zmizel. */
.hero__foto::after {
  content: ""; position: absolute; inset: 0;
  background:
    /* Na mobilu text zabírá celou šířku, takže se závoj uvolnit nedá - dole
       sedí trust řádek v barvě --c-muted a ten potřebuje 4,5:1 jako běžný
       text. Při .80 spadl na 3,58:1. Odkrytí fotky proto zůstává výsadou
       desktopu, kde je vpravo od textu volné místo. */
    linear-gradient(180deg, rgba(243, 242, 239, .95) 0%, rgba(243, 242, 239, .89) 55%, rgba(243, 242, 239, .87) 100%),
    radial-gradient(120% 90% at 12% 0%, rgba(211, 35, 42, .16), transparent 58%);
}
/* Na širokých obrazovkách text zabírá levé dvě třetiny, takže vpravo
   necháme fotku dílny skutečně vidět. Hero nemá být bílý obdélník. */
/* Zlom závoje je sladěný s koncem textového bloku (max-width 60rem
   v kontejneru 1200px = zhruba 77 % šířky). Do té hranice drží závoj
   nad .90, aby červený claim měl kontrast s rezervou; za ní rychle
   padá a poslední pětina ukáže dílnu.
   Měřeno: při .60 v 64 % vycházela červená na 3,06:1 - to je na hraně
   limitu pro velký text a lokálně nad tmavou pryží to spadne pod. */
/* Odkrytí dílny (2026-08-11). Zlom posunut z 74 % na 66 % a pravá strana
   sražena skoro na čistou fotku, takže je vidět víc než dřív. V textové zóně
   se krytí smí uvolnit jen málo - drží kontrast červeného řádku claimu,
   který je nejcitlivější prvek hero. Hodnoty ověřeny měřením po nasazení,
   ne odhadem: postup i výsledek jsou v changelogu. */
@media (min-width: 900px) {
  .hero__foto::after {
    background:
      linear-gradient(96deg,
        rgba(243, 242, 239, .96) 0%,
        rgba(243, 242, 239, .94) 52%,
        rgba(243, 242, 239, .89) 75%,
        rgba(243, 242, 239, .16) 87%,
        rgba(243, 242, 239, .05) 100%),
      radial-gradient(80% 120% at 92% 30%, rgba(211, 35, 42, .20), transparent 60%);
  }
}

/* Hero má končit, ne vyšumět. */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 4px; background: var(--c-brand); z-index: 3;
}
.hero__inner { position: relative; z-index: 2; max-width: 60rem; }

.hero__title { margin: 0; }
.hero__brand {
  display: block;
  font-family: var(--font-hero); font-weight: 400;
  font-size: clamp(2.05rem, 11.5vw, 7rem);
  line-height: 1.02;           /* místo pro háček nad Š */
  letter-spacing: .005em;
  color: var(--c-ink);
  text-wrap: nowrap;
}
/* ---------- Tečka wordmarku se mění v kolo ----------

   Stejné gesto jako na rozcestníku kamadotrans.cz, kde tečka střídá čtyři
   obory. Tady má web jediný obor, takže jediná proměna - o to déle drží.

   Rozcestník to řídí GSAPem, protože tam běží čtyři různé mikropříběhy.
   Na jednu smyčku by 70 kB knihovny bylo neúměrné, takže tohle je čisté CSS.

   Kolo je kruh s mezerou ve stopě (stroke-dasharray). Rotace tu mezeru nechá
   obíhat, takže je pohyb vidět i u dokonale kulatého tvaru - bez mezery by
   se točící kruh nedal od stojícího rozeznat.

   Rotace končí na 720°, což je vizuálně shodné s 0°. Smyčka se proto uzavře
   bez viditelného skoku zpět.
*/
.hero__tecka {
  display: inline-block;
  width: .26em; height: .26em;
  margin-left: .05em;
  vertical-align: baseline;
  overflow: visible;
}
.hero__tecka svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Bod nemizí - po zakulacení slouží jako ráfek uprostřed kola. rx/ry jsou
   v SVG2 běžné CSS vlastnosti, takže se dají animovat bez JavaScriptu. */
.tecka__bod { fill: var(--c-brand); rx: 6px; ry: 6px; }
.tecka__pneu { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
/* Obruč je inkoustová, ne značková - stejně jako na rozcestníku. Barevný
   zůstane jen disk uprostřed, takže to čte jako guma na barevném ráfku. */
.tecka__pneu-kruh {
  stroke: var(--c-ink); stroke-width: 9; fill: none;
  /* obvod 2πr = 358, takže stopa 290 a mezera 68 - shodné s rozcestníkem */
  stroke-dasharray: 290 68.14; stroke-linecap: round;
  transform-box: fill-box; transform-origin: 50% 50%;
}

@media (prefers-reduced-motion: no-preference) {
  .tecka__bod { animation: tecka-bod 15s var(--ease) 1.2s infinite; }
  .tecka__pneu { animation: tecka-pneu-vstup 15s var(--ease) 1.2s infinite; }
  .tecka__pneu-kruh { animation: tecka-pneu-rotace 15s cubic-bezier(.45, 0, .3, 1) 1.2s infinite; }
}

/* Čtverec se zakulatí na disk a na konci se zase zahrotí zpět na tečku. */
@keyframes tecka-bod {
  0%, 14%   { rx: 6px; ry: 6px; }
  20%, 74%  { rx: 40px; ry: 40px; }
  80%, 100% { rx: 6px; ry: 6px; }
}

/* Obruč přijede s odrazem kolem už zakulaceného disku a na konci zmizí. */
@keyframes tecka-pneu-vstup {
  0%, 15%   { transform: scale(.35); opacity: 0; }
  22%       { transform: scale(1.1); opacity: 1; }
  26%, 72%  { transform: scale(1); opacity: 1; }
  78%, 100% { transform: scale(.35); opacity: 0; }
}

/* Dvě otáčky s rozjezdem a dojezdem - kolo, které dotočí, ne motor. */
@keyframes tecka-pneu-rotace {
  0%, 18%   { transform: rotate(0deg); }
  70%, 100% { transform: rotate(720deg); }
}

.hero__legal {
  display: block; margin-top: .7rem;
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(.7rem, 1.5vw, .92rem);
  letter-spacing: .2em; text-transform: uppercase; color: var(--c-muted);
}

/* Claim je nejlepší věta na webu - musí být větší než nadpisy sekcí,
   ne menší. Trikolon na tři řádky, gradace podpořená barvou. */
.hero__claim {
  font-family: var(--font-head); font-weight: 900;
  /* Zmenšeno oproti v0.2.2 (3.5rem), ale záměrně ne pod nadpis sekce
     (max 2.75rem) - claim je nejlepší věta na webu a nesmí být drobnější
     než mezititulky, jinak se z něj stane popiska. */
  font-size: clamp(1.45rem, 3.9vw, 2.95rem);
  line-height: 1.05; letter-spacing: -.025em;
  margin: clamp(2.1rem, 4.2vw, 3.1rem) 0 clamp(2.3rem, 4.2vw, 3.1rem);
}
/* Každý řádek claimu se láme sám za sebe, takže se vyvažuje po řádcích.
   Bez toho zůstalo na mobilu "vozy," samotné na řádku. */
.hero__claim span { display: block; text-wrap: balance; }
.hero__claim--duraz { color: var(--c-brand); }

.hero__cta { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; }

/* Trust řádek je jediný běžný text hero, takže potřebuje 4,5:1 - na velký
   text se spolehnout nemůže. --c-muted má i na čistém papíru jen 5,41:1
   a pod fotkou spadl na 4,05:1 (platilo i před odkrytím závoje, jen se to
   nikdy neměřilo). Tmavší odstín dá 6,5:1 i nad tmavým místem fotky
   a přitom zůstane zjevně sekundární vůči inkoustovému wordmarku. */
.hero__trust {
  display: flex; flex-wrap: wrap; gap: .5rem 1.6rem;
  list-style: none; padding: 0; margin: 2.6rem 0 0;
  font-family: var(--font-head); font-weight: 600; font-size: var(--fs-sm);
  letter-spacing: .04em; color: #414751;
}
.hero__trust li { display: flex; align-items: center; gap: .55rem; }
.hero__trust li::before {
  content: ""; width: 7px; height: 7px; border-radius: 999px;
  background: var(--c-brand); flex: 0 0 auto;
}

/* ============ Bento - tři segmenty ============ */

/* Mezera mezi kartami byla 13 až 17 px, takže se dlaždice skoro dotýkaly
   a celá mřížka působila jako jeden blok. Zvednuto na 18 až 30 px - karty
   se od sebe oddělí, aniž by se mřížka rozpadla. Stejná hodnota se používá
   i u služeb a důvodů, ať mají všechny mřížky na webu shodný rytmus. */
.bento { display: grid; gap: clamp(1.15rem, 2.1vw, 1.85rem); grid-template-columns: 1fr; }
@media (min-width: 640px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .bento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(180px, auto); }
  .tile--feature { grid-column: span 2; grid-row: span 2; }
  .tile--wide { grid-column: span 2; }
  .tile--accent { grid-column: span 2; }
}

/* Fotografická dlaždice dvojrámeček nedostává: fotka sahá k hraně a vnitřní
   plát by ji jen zmenšil. Materialitu jí dává prstenec, vnitřní přesvětlení
   horní hrany a stín - stejný slovník, jiná stavba. */
.tile {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(1.2rem, 2.2vw, 1.7rem); min-height: 250px;
  border-radius: var(--r-md); overflow: hidden; isolation: isolate;
  color: #fff;
  box-shadow: 0 0 0 1px rgba(21, 23, 28, .1), inset 0 1px 0 rgba(255, 255, 255, .14), var(--shadow-soft);
  transition: transform var(--t-rychle) var(--ease), box-shadow var(--t-rychle) var(--ease);
}
.tile:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 0 1px rgba(21, 23, 28, .14), inset 0 1px 0 rgba(255, 255, 255, .2), var(--shadow-lift);
}

.tile__foto {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--ease);
}
.tile:hover .tile__foto { transform: scale(1.045); }

/* Scrim - bez něj bílý text na světlé části fotky neprojde kontrastem */
.tile::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(12, 13, 16, .92) 0%, rgba(12, 13, 16, .72) 42%, rgba(12, 13, 16, .34) 100%);
}
.tile--accent::before {
  background: linear-gradient(to top, rgba(107, 15, 19, .94) 0%, rgba(142, 21, 25, .78) 45%, rgba(142, 21, 25, .42) 100%);
}

.tile__cislo {
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-micro);
  letter-spacing: .2em; opacity: .68;
}
.tile__nazev { font-size: clamp(1.2rem, 2.2vw, 1.65rem); margin: .7rem 0 0; }

/* Dlaždice se na hover zvedá a přizoomuje fotku - dva silné signály
   "klikni na mě". Musí tedy někam vést, jinak je to falešný slib.
   Odkaz v nadpisu roztažený přes celou dlaždici. */
.tile__odkaz::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.tile:focus-within { outline: 3px solid var(--c-brand); outline-offset: 3px; }
.tile__odkaz:focus-visible { outline: none; }
.tile__popis { font-size: var(--fs-base); margin: .75rem 0 0; opacity: .82; max-width: 34ch; }

.tile__ukony {
  display: flex; flex-wrap: wrap; gap: .55rem;
  list-style: none; padding: 0; margin: 1.35rem 0 0;
}
.tile__ukony li {
  font-family: var(--font-head); font-weight: 600; font-size: var(--fs-micro);
  letter-spacing: .02em; padding: .3rem .65rem; border-radius: 999px;
  background: rgba(255, 255, 255, .15); border: 1px solid rgba(255, 255, 255, .2);
}

/* ============ Služby ============ */

.sluzby {
  display: grid; gap: clamp(1.15rem, 2.1vw, 1.85rem);
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .sluzby { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .sluzby { grid-template-columns: repeat(3, 1fr); } }

.sluzba {
  padding: calc(1.95rem + var(--bezel)) calc(1.6rem + var(--bezel));
  transition: box-shadow var(--t-rychle) var(--ease);
}
/* Bez zvednutí - karta není klikatelná, takže nesmí slibovat interakci.
   Reaguje jen materiál: prstenec tácu se prokrví, plát se nadechne. */
.sluzba:hover { box-shadow: 0 0 0 1px var(--prstenec-brand-slaby); }
.sluzba:hover::before {
  box-shadow: 0 0 0 1px var(--prstenec-brand), var(--plat-svetlo), var(--plat-stin);
}

/* Jedna konvence ikonového čipu pro celý web: kroužek s vlasovým prstencem
   a horním přesvětlením. Dřív měly služby zaoblený čtverec a důvody kroužek -
   náhodná variace vypadá jako chyba, ne jako záměr. Liší se jen barva,
   a ta nese kontext: na papíru značková, na inkoustu plná. */
.sluzba__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.9rem; height: 2.9rem; border-radius: 999px; flex: 0 0 auto;
  background: var(--c-brand-soft); color: var(--c-brand); margin-bottom: 1.25rem;
  box-shadow: 0 0 0 1px var(--prstenec-brand-slaby), inset 0 1px 0 rgba(255, 255, 255, .7);
}
.sluzba__ico svg { width: 1.5rem; height: 1.5rem; }
.sluzba__nazev { font-size: var(--fs-md); }
.sluzba__popis { margin: .7rem 0 0; color: var(--c-muted); font-size: var(--fs-sm); }
/* Bez verzálek. Mikroverzálka je jeden akcent, ne výplň - na stránce
   jich bylo devět a přestaly cokoli zdůrazňovat. */
.sluzba__segmenty {
  margin: 1.3rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--linka-vnitrni);
  font-family: var(--font-body); font-weight: 500; font-size: var(--fs-sm);
  color: var(--c-muted);
}

/* ============ Pneuhotel ============ */

.pneuhotel { background: var(--c-brand-deep); color: #fff; }
.pneuhotel .section__title { color: #fff; }
.pneuhotel p { color: rgba(255, 255, 255, .84); }

.pneuhotel__grid { display: grid; gap: clamp(1.6rem, 4vw, 3rem); align-items: center; }
@media (min-width: 900px) { .pneuhotel__grid { grid-template-columns: 1fr 1fr; } }

.pneuhotel__text > p { max-width: 46ch; margin: 1.25rem 0 0; }

.pneuhotel__body {
  list-style: none; padding: 0; margin: 2.25rem 0;
  display: grid; gap: .9rem;
}
.pneuhotel__body li {
  display: flex; align-items: flex-start; gap: .7rem;
  font-family: var(--font-head); font-weight: 600; font-size: var(--fs-base);
  color: #fff;
}
.pneuhotel__body svg { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; margin-top: .28rem; opacity: .9; }

/* Na červené ploše je tác světlejší závoj, ne tmavší - jinak by fotka
   vypadala jako díra do sekce. */
.pneuhotel__foto {
  --tac-plocha: rgba(255, 255, 255, .12);
  --tac-prstenec: rgba(255, 255, 255, .16);
  --plat-prstenec: rgba(0, 0, 0, .2);
  /* Nulový stín, ne none - "none" uvnitř seznamu box-shadow shodí celé pravidlo. */
  --plat-svetlo: inset 0 0 0 0 transparent;
  --plat-stin: 0 30px 60px -30px rgba(0, 0, 0, .6);
  margin: 0;
}
.pneuhotel__foto img { width: 100%; }

/* ============ Zpětný odběr ============ */

.odber__grid { display: grid; gap: clamp(1.6rem, 4vw, 3rem); }
@media (min-width: 900px) { .odber__grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.odber__grid .section__head { margin-bottom: 0; }

/* Číslovaný seznam s linkami, ne karty. Podmínky odběru nejsou
   samostatné entity, je to výčet - a tak má vypadat. */
.odber__podminky { list-style: none; padding: 0; margin: 0; }
.odber__podminky li {
  display: grid; grid-template-columns: 2.8rem 1fr; gap: 0 1.2rem;
  padding: 1.9rem 0; align-items: start;
  border-top: 1px solid var(--c-line-silna);
}
.odber__podminky li:last-child { border-bottom: 1px solid var(--c-line-silna); }
.odber__cislo {
  font-family: var(--font-head); font-weight: 900;
  font-size: var(--fs-lg); line-height: 1; color: var(--c-brand); opacity: .3;
}
.odber__podminky h3 { font-size: var(--fs-base); }
.odber__podminky p { margin: .3rem 0 0; color: var(--c-muted); font-size: var(--fs-sm); }

/* ============ Poradna ============ */

.section--poradna { background: var(--c-surface); border-block: 1px solid var(--c-line); }

/* Sekce Poradna je bílá, karta papírová - proto se tu plát obrací
   na papír a tác je jeho tmavší stín. */
.karta {
  --r-vnejsi: var(--r-lg);
  --plat-plocha: var(--c-bg);
  padding: calc(clamp(1.4rem, 3vw, 2.2rem) + var(--bezel));
  margin-bottom: clamp(.9rem, 2vw, 1.3rem);
}
.karta:last-child { margin-bottom: 0; }
.karta__head { margin-bottom: 1.6rem; }
.karta__nazev { font-size: clamp(1.25rem, 2.4vw, 1.6rem); }
.karta__uvod { margin: .5rem 0 0; color: var(--c-muted); }
.karta__cta { margin: 1.6rem 0 0; font-family: var(--font-head); font-weight: 600; }
.karta__cta a { color: var(--c-brand); text-decoration: underline; text-underline-offset: 3px; }

/* --- A) Označení pneumatiky --- */

/* Prvky, které bez JavaScriptu nedávají smysl */
.jen-s-js { display: none; }
.je-interaktivni .jen-s-js { display: block; }

/* Zadání vlastního rozměru */
.rozmer {
  padding: calc(1.3rem + var(--bezel)); margin-bottom: 1.1rem;
}
.rozmer > label {
  display: block; font-family: var(--font-head); font-weight: 700;
  font-size: var(--fs-base); margin-bottom: .6rem;
}
.rozmer__radek { display: flex; flex-wrap: wrap; gap: .5rem; }
.rozmer__radek input {
  flex: 1 1 9rem; min-width: 0;
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-md);
  letter-spacing: .04em;
  padding: .72rem 1rem; border: 1px solid var(--c-line-silna); border-radius: 999px;
  background: var(--c-bg); color: var(--c-ink);
}
.rozmer__napoveda { margin: .7rem 0 0; font-size: var(--fs-sm); color: var(--c-muted); }
.rozmer__napoveda code {
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-sm);
  background: var(--c-brand-soft); color: var(--c-brand-deep);
  padding: .1rem .4rem; border-radius: .3rem;
}

.rozmer__vzory {
  margin: .8rem 0 0; font-size: var(--fs-sm); color: var(--c-muted);
  display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
}
.vzor {
  font-family: var(--font-head); font-weight: 600; font-size: var(--fs-micro);
  padding: .32rem .75rem; border-radius: 999px; cursor: pointer;
  background: var(--c-bg); border: 1px solid var(--c-line-silna); color: var(--c-ink);
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.vzor:hover { border-color: var(--c-brand); background: var(--c-brand-soft); }

.rozmer__chyba {
  margin: .9rem 0 0; padding: .85rem 1rem; border-radius: var(--r-sm);
  background: var(--c-brand-soft); border: 1px solid var(--c-brand);
  color: var(--c-brand-deep); font-size: var(--fs-sm); line-height: 1.55;
}
.rozmer__chyba strong { font-family: var(--font-head); }

.oznaceni__popisek {
  margin: 0 0 .6rem;
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-micro);
  letter-spacing: .16em; text-transform: uppercase; color: var(--c-muted);
}

.oznaceni__kod {
  display: flex; flex-wrap: wrap; gap: .35rem; align-items: center;
  padding: 1.1rem; background: var(--c-ink); border-radius: var(--r-md);
}
.oznaceni__cast {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(1.05rem, 3.2vw, 1.8rem); letter-spacing: -.01em;
  color: rgba(255, 255, 255, .55); background: transparent;
  border: 2px solid transparent; border-radius: .55rem;
  padding: .2rem .5rem; cursor: pointer;
  transition: color .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.oznaceni__cast:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.oznaceni__cast.is-aktivni { color: #fff; background: var(--c-brand); border-color: var(--c-brand); }
.oznaceni__cast:focus-visible { outline-color: #fff; }

.oznaceni__vysvetlivky { margin-top: 1.1rem; }
.oznaceni__vysvetlivka {
  display: flex; gap: 1.1rem; align-items: flex-start;
  padding: calc(1.2rem + var(--bezel)) calc(1.3rem + var(--bezel));
  margin-bottom: .5rem;
}
.oznaceni__vysvetlivka:last-child { margin-bottom: 0; }
/* JS zapne .je-interaktivni a nechá vidět jen aktivní vysvětlivku.
   Bez JS zůstanou viditelné všechny - obsah se nikdy neztratí. */
.je-interaktivni .oznaceni__vysvetlivka { display: none; margin-bottom: 0; }
.je-interaktivni .oznaceni__vysvetlivka.is-aktivni { display: flex; }

.oznaceni__kodik {
  font-family: var(--font-head); font-weight: 900; font-size: var(--fs-lg);
  color: var(--c-brand); margin: 0; min-width: 3rem; line-height: 1.1;
}
.oznaceni__vysvetlivka h4 { font-size: var(--fs-base); }
.oznaceni__vysvetlivka p { margin: .35rem 0 0; color: var(--c-muted); font-size: var(--fs-base); }
.oznaceni__detail {
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-sm);
  color: var(--c-ink) !important;
}

/* DOT kalkulačka */
.dot {
  display: grid; gap: 1rem; margin-top: 1.3rem;
  padding: calc(1.3rem + var(--bezel));
}
/* Bez min-width:0 protlačí vnitřní šířka <input> mřížku přes okraj karty
   a stránka začne na mobilu vodorovně rolovat. */
.dot > * { min-width: 0; }
@media (min-width: 720px) {
  .dot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
}

.dot label {
  display: block; font-family: var(--font-head); font-weight: 700;
  font-size: var(--fs-base); margin-bottom: .6rem;
}
.dot__radek { display: flex; flex-wrap: wrap; gap: .5rem; }
.dot__radek input {
  flex: 1 1 6rem; min-width: 0;
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-md);
  letter-spacing: .12em; text-align: center;
  padding: .7rem .8rem; border: 1px solid var(--c-line-silna); border-radius: 999px;
  background: var(--c-bg); color: var(--c-ink);
}
.dot__napoveda { margin: .7rem 0 0; font-size: var(--fs-sm); color: var(--c-muted); }

.dot__vysledek {
  display: block; min-height: 3.4rem;
  padding: 1rem 1.2rem; border-radius: var(--r-md);
  background: var(--c-bg); border: 1px dashed var(--c-line-silna);
  font-size: var(--fs-base); color: var(--c-muted);
}
.dot__vysledek:empty::before { content: "Zadejte kód a spočítáme stáří."; }
.dot__vysledek strong { color: var(--c-ink); font-family: var(--font-head); }
.dot__vysledek.je-varovani { border-color: var(--c-brand); border-style: solid; background: var(--c-brand-soft); }
.dot__vysledek.je-chyba { border-color: var(--c-brand); color: var(--c-brand-deep); }

/* Dopočítané rozměry po rozboru zadaného označení.
   Inkoustový ostrůvek uvnitř papírové karty - tác je tmavší než plát,
   takže blok vypadá zapuštěně, ne nalepeně. */
.souhrn {
  --tac-plocha: #0C0E12;
  --tac-prstenec: rgba(21, 23, 28, .18);
  --plat-plocha: var(--c-ink);
  --plat-prstenec: rgba(255, 255, 255, .08);
  --plat-svetlo: inset 0 1px 0 rgba(255, 255, 255, .08);
  --plat-stin: 0 14px 34px -24px rgba(0, 0, 0, .7);
  margin-top: 1.1rem; padding: calc(1.3rem + var(--bezel));
  color: rgba(255, 255, 255, .82);
}
.souhrn__nazev { color: #fff; font-size: var(--fs-base); margin-bottom: 1rem; }
.souhrn__mrizka { margin: 0; display: grid; gap: .95rem; }
@media (min-width: 560px) { .souhrn__mrizka { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .souhrn__mrizka { grid-template-columns: repeat(3, 1fr); } }
.souhrn__mrizka > div {
  padding: .8rem .9rem; border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12);
}
.souhrn__mrizka dt {
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-micro);
  letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .55);
}
.souhrn__mrizka dd {
  margin: .25rem 0 0; font-family: var(--font-head); font-weight: 800;
  font-size: var(--fs-md); color: #fff;
}
.souhrn__pozn {
  margin: 1.1rem 0 0; padding-top: .9rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: var(--fs-sm); opacity: .66; line-height: 1.55; max-width: 68ch;
}

.oznaceni__dalsi { margin-top: 1.2rem; }
.oznaceni__dalsi summary {
  cursor: pointer; font-family: var(--font-head); font-weight: 700; font-size: var(--fs-base);
  padding: .6rem 0; color: var(--c-brand);
}
.oznaceni__dalsi dl { margin: .85rem 0 0; display: grid; gap: .95rem; }
.oznaceni__dalsi dt {
  font-family: var(--font-head); font-weight: 800; font-size: var(--fs-sm);
  letter-spacing: .04em;
}
.oznaceni__dalsi dd { margin: .15rem 0 0; color: var(--c-muted); font-size: var(--fs-base); }

/* --- B) Sezónnost --- */

/* Přepínač je dvojrámeček sám o sobě: tác drží jeden vysunutý plát.
   Proto tu nekreslíme ::before, ale posouváme materiál na aktivní záložku. */
.zalozky {
  display: flex; gap: .35rem; padding: .35rem;
  background: var(--tac-plocha);
  box-shadow: 0 0 0 1px var(--tac-prstenec);
  border-radius: 999px; margin-bottom: 1.2rem; overflow-x: auto;
}
.zalozka {
  flex: 1 1 auto; white-space: nowrap;
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-base);
  padding: .65rem 1.1rem; border: 0; border-radius: 999px;
  background: transparent; color: var(--c-muted); cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.zalozka:hover { color: var(--c-ink); }
.zalozka.is-aktivni {
  background: var(--c-brand); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 2px 6px -2px rgba(142, 21, 25, .5);
}

.panel {
  padding: calc(1.4rem + var(--bezel)) calc(1.5rem + var(--bezel));
  margin-bottom: .6rem;
}
.je-interaktivni .panel { display: none; margin-bottom: 0; }
.je-interaktivni .panel.is-aktivni { display: block; }

.panel__shrnuti {
  margin: 0 0 1.2rem; font-family: var(--font-head); font-weight: 600;
  font-size: var(--fs-base); line-height: 1.5; max-width: 52ch;
}
.panel__tabulka { margin: 0; display: grid; gap: 1rem; }
@media (min-width: 640px) { .panel__tabulka { grid-template-columns: repeat(2, 1fr); } }
.panel__tabulka > div { padding-top: .75rem; border-top: 1px solid var(--linka-vnitrni); }
.panel__tabulka dt {
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-micro);
  letter-spacing: .14em; text-transform: uppercase; color: var(--c-brand);
}
.panel__tabulka dd { margin: .3rem 0 0; font-size: var(--fs-base); }

/* Výtah ze zákona - vizuálně oddělený, aby bylo jasné, že to není náš názor */
.zakon {
  --tac-plocha: #0C0E12;
  --tac-prstenec: rgba(21, 23, 28, .18);
  --plat-plocha: var(--c-ink);
  --plat-prstenec: rgba(255, 255, 255, .08);
  --plat-svetlo: inset 0 1px 0 rgba(255, 255, 255, .08);
  --plat-stin: 0 14px 34px -24px rgba(0, 0, 0, .7);
  margin-top: 1rem;
  padding: calc(1.4rem + var(--bezel)) calc(1.5rem + var(--bezel));
  color: rgba(255, 255, 255, .8);
}
.zakon__nazev { color: #fff; font-size: var(--fs-md); }
.zakon p { margin: .8rem 0 0; font-size: var(--fs-base); max-width: 62ch; }
.zakon__obdobi {
  font-family: var(--font-head); font-weight: 800; font-size: var(--fs-md) !important;
  color: var(--c-brand); margin-top: .6rem !important;
}
.zakon__limity { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .85rem; }
@media (min-width: 640px) { .zakon__limity { grid-template-columns: repeat(2, 1fr); } }
.zakon__limity li {
  padding: .9rem 1rem; border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12);
}
.zakon__kategorie {
  display: block; font-family: var(--font-head); font-weight: 700; font-size: var(--fs-micro);
  letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .58);
}
.zakon__hodnota {
  display: block; margin: .2rem 0 .3rem;
  font-family: var(--font-head); font-weight: 800; font-size: var(--fs-md); color: #fff;
}
.zakon__pozn { font-size: var(--fs-sm); line-height: 1.45; display: block; }
.zakon__zdroj {
  margin-top: 1.2rem !important; padding-top: .9rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: var(--fs-sm) !important; opacity: .62;
}

/* --- C) Opotřebení --- */

.opotrebeni__grid { display: grid; gap: 1.6rem; align-items: start; }
@media (min-width: 1000px) { .opotrebeni__grid { grid-template-columns: 1.6fr 1fr; } }

.opotrebeni__foto { margin: 0; }
.opotrebeni__foto img { width: 100%; }
.opotrebeni__foto figcaption {
  padding: .9rem 1.1rem; font-size: var(--fs-sm); color: var(--c-muted); line-height: 1.5;
}
@media (min-width: 1000px) { .opotrebeni__foto { position: sticky; top: 96px; } }

/* Levá linka místo rámečku - pod kurzorem zčervená.
   Šest karet pod sebou by bylo šest stejných boxů navíc. */
.opotrebeni { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.opotrebeni li {
  display: flex; gap: 1rem;
  border-left: 2px solid var(--c-line-silna);
  padding: .1rem 0 1.5rem 1.5rem;
  transition: border-color .18s var(--ease);
}
.opotrebeni li:hover { border-left-color: var(--c-brand); }
.opotrebeni li:last-child { padding-bottom: 0; }
.opotrebeni__cislo {
  font-family: var(--font-head); font-weight: 800; font-size: var(--fs-micro);
  color: var(--c-brand); flex: 0 0 auto; padding-top: .25rem;
}
.opotrebeni h4 { font-size: var(--fs-base); }
.opotrebeni p { margin: .35rem 0 0; color: var(--c-muted); font-size: var(--fs-sm); }

/* ============ Proč my ============ */

.duvody { display: grid; gap: clamp(1.15rem, 2.1vw, 1.85rem); grid-template-columns: 1fr; }
@media (min-width: 620px) { .duvody { grid-template-columns: repeat(2, 1fr); } }
/* Poslední karta (poloha v areálu ZZN) je širší - je to jediná doložitelná
   konkurenční výhoda na webu a neměla by mít stejnou váhu jako ostatní. */
@media (min-width: 1024px) { .duvody { grid-template-columns: 1fr 1fr 1.45fr; } }

.duvod { padding: calc(1.95rem + var(--bezel)) calc(1.6rem + var(--bezel)); }
.duvod__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.9rem; height: 2.9rem; border-radius: 999px; flex: 0 0 auto;
  background: var(--c-ink); color: #fff; margin-bottom: 1.3rem;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.duvod__ico svg { width: 1.45rem; height: 1.45rem; }
.duvod__nazev { font-size: var(--fs-md); }
.duvod__popis { margin: .75rem 0 0; color: var(--c-muted); font-size: var(--fs-sm); }

/* ============ Provozní pruh ============ */

.pruh { background: var(--c-ink); color: #fff; }
.pruh__inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem;
  padding-block: 1.05rem;
}
.pruh__text { margin: 0; font-family: var(--font-head); font-weight: 700; font-size: var(--fs-base); }
.pruh__odkaz {
  margin-left: auto; font-family: var(--font-head); font-weight: 700; font-size: var(--fs-sm);
  color: #fff; padding: .5rem 1.1rem; border-radius: 999px; background: var(--c-brand);
  transition: background .25s var(--ease);
}
.pruh__odkaz:hover { background: #b91d24; }

/* ============ Kontakt ============ */

.kontakt__grid { display: grid; gap: clamp(1.4rem, 3vw, 2.2rem); }
@media (min-width: 900px) { .kontakt__grid { grid-template-columns: 1.35fr 1fr; align-items: start; } }

.form {
  --r-vnejsi: var(--r-lg);
  padding: calc(clamp(1.3rem, 2.5vw, 1.9rem) + var(--bezel));
}
.form__radek { display: grid; gap: 0 1rem; }
@media (min-width: 560px) { .form__radek { grid-template-columns: 1fr 1fr; } }

.form__pole { margin: 0 0 1rem; }
.form__pole label {
  display: block; font-family: var(--font-head); font-weight: 700;
  font-size: var(--fs-sm); margin-bottom: .4rem;
}
/* Pole je zapuštěné, ne obtažené: horní vnitřní stín dělá dojem prohlubně
   ve formulářovém plátu. Obtah 1px by na plátu působil jako nálepka. */
.form__pole input,
.form__pole select,
.form__pole textarea {
  width: 100%; font-family: var(--font-body); font-size: var(--fs-base); color: var(--c-ink);
  padding: .72rem .9rem; border: 0; border-radius: var(--r-sm);
  background: var(--c-bg);
  box-shadow: inset 0 0 0 1px var(--c-line-silna), inset 0 2px 3px -2px rgba(21, 23, 28, .18);
  transition: box-shadow var(--t-rychle) var(--ease);
}
.form__pole textarea { resize: vertical; min-height: 6rem; }
.form__pole input:focus,
.form__pole select:focus,
.form__pole textarea:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--c-brand), 0 0 0 3px var(--c-brand-soft);
}
.form__pole--past { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Trvalá nápověda pod polem. Placeholder mizí při psaní a čtečky ho
   předčítají nekonzistentně, takže se na návod nehodí. */
.form__napoveda {
  display: block; margin-top: .35rem;
  font-size: var(--fs-sm); color: var(--c-muted);
}

.form__souhlas { display: flex; gap: .7rem; align-items: flex-start; margin: 0 0 1.3rem; }
.form__souhlas input { margin-top: .28rem; width: 1.05rem; height: 1.05rem; accent-color: var(--c-brand); flex: 0 0 auto; }
.form__souhlas label { font-size: var(--fs-sm); color: var(--c-muted); line-height: 1.5; }
.form__souhlas a { color: var(--c-brand); text-decoration: underline; text-underline-offset: 2px; }

.form__hlaska {
  padding: 1rem 1.2rem; border-radius: var(--r-md); margin: 0 0 1rem;
  font-family: var(--font-head); font-weight: 600; font-size: var(--fs-base);
}
.form__hlaska--ok { background: #E8F3EC; border: 1px solid #A8D5B8; color: #1B5E31; }
.form__hlaska--chyba { background: var(--c-brand-soft); border: 1px solid var(--c-brand); color: var(--c-brand-deep); }

.kontakt__udaje { display: grid; gap: 1.05rem; }
.udaj {
  padding: calc(1.2rem + var(--bezel)) calc(1.3rem + var(--bezel));
}
.udaj h3 {
  font-size: var(--fs-sm); letter-spacing: 0; text-transform: none;
  color: var(--c-muted); font-weight: 600; margin-bottom: .5rem;
}
.udaj p { margin: .2rem 0 0; font-size: var(--fs-base); color: var(--c-muted); }
.udaj__hlavni {
  font-family: var(--font-head); font-weight: 800; font-size: var(--fs-md) !important;
  color: var(--c-ink) !important; margin-top: 0 !important;
}
.udaj__hlavni a { color: var(--c-brand); }
.udaj__hlavni a:hover { text-decoration: underline; text-underline-offset: 3px; }
.udaj__pozn { font-style: italic; }
.udaj--firma p { font-size: var(--fs-sm); }

.kontakt__mapa { margin-top: clamp(1.4rem, 3vw, 2rem); }
.kontakt__mapa iframe { display: block; width: 100%; }

/* ============ Patička ============ */

.site-footer { background: var(--c-ink); color: rgba(255, 255, 255, .68); }
.site-footer__inner {
  display: grid; gap: 1.8rem; padding-block: clamp(2.2rem, 5vw, 3.2rem);
}
@media (min-width: 800px) { .site-footer__inner { grid-template-columns: 1.2fr 1fr 1fr; } }

.site-footer .brand { color: #fff; }
.site-footer p { margin: .3rem 0 0; font-size: var(--fs-sm); }
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--c-brand); }
.site-footer__skupina { margin-top: .8rem !important; }
.site-footer__pozn { opacity: .7; }
.site-footer__ico { opacity: .7; font-size: var(--fs-sm) !important; }
.site-footer__pravni { font-size: var(--fs-sm); }
@media (min-width: 800px) { .site-footer__pravni { text-align: right; } }

/* ============ Obsahové stránky ============ */

.stranka__title { font-size: clamp(1.9rem, 4vw, 2.7rem); margin-bottom: 1.5rem; }
.prose { max-width: 44rem; }
.prose h2 { font-size: var(--fs-lg); margin: 2.2rem 0 .8rem; }
.prose h3 { font-size: var(--fs-md); margin: 1.8rem 0 .6rem; }
.prose p, .prose li { color: var(--c-muted); }
.prose a { color: var(--c-brand); text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: .4rem; }

/* ============ Scroll reveal ============

   Výchozí stav je VIDITELNÝ. Skryje se až tehdy, když JS přidá .je-reveal
   na <html>. Bez JavaScriptu tak nikdy nezůstane prázdná stránka
   (to je chyba, kterou má rozcestník kamadotrans.cz).
*/
/* Prvek nepřiskočí, ale doostří se: těžký nádech zdola s rozostřením.
   Animují se jen transform, opacity a filter - žádná vlastnost, která by
   spustila přepočet layoutu. */
/* ⚠️ NÁJEZD OBSAHU ZRUŠEN 8. 9. 2026 NA PŘÁNÍ KLIENTA.
   Prvky byly do zobrazení průhledné, posunuté a rozostřené a doostřovaly
   se, teprve až na ně dojel scroll. Klient to popsal jako „pomalé načítání,
   nejdřív blur a až potom text" a chtěl to pryč napříč všemi weby skupiny.

   Obsah je proto viditelný okamžitě. Třídy i pozorovatel v JS zůstávají,
   jen nic nedělají - kdyby se to mělo vrátit, je to jedno pravidlo, ne
   přepis šablon. Vedlejší efekt je dobrý: obsah je vidět i bez JS
   a nezdrží ho žádný přechod. */
.je-reveal .reveal { opacity: 1; transform: none; filter: none; }
.je-reveal .reveal.je-videt { opacity: 1; transform: none; filter: none; transition: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .je-reveal .reveal { opacity: 1; transform: none; filter: none; }
}

/* ============ Tisk ============ */

/* ============ Ceny ============
   Přibylo ve v0.6.0, když klient poslal dvě potvrzená čísla (PN-2).
   Karta je záměrně širší a vzdušnější než .sluzba - částka má být
   největší věc v sekci, ne popisek vedle ikony. */

.ceny {
  display: grid;
  gap: clamp(1.1rem, 2.4vw, 1.6rem);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .ceny { grid-template-columns: repeat(2, 1fr); }
}
/* .karta počítá se svislým stohem a nese spodní mezeru. V mřížce
   ji dělá gap, takže by se sčítaly. */
.ceny .karta { margin-bottom: 0; }

.cena__nazev {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-md);
  margin: 0;
}
.cena__castka {
  margin: .55rem 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .1rem .6rem;
}
.cena__castka b {
  font-family: var(--font-hero);
  font-weight: 400;
  font-size: clamp(2.1rem, 5.2vw, 3.1rem);
  line-height: 1;
  letter-spacing: .005em;
  color: var(--c-brand);
}
.cena__castka span {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--c-muted);
}
.cena__popis {
  margin: .9rem 0 0;
  color: var(--c-muted);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.ceny__pozn {
  margin: clamp(1.4rem, 2.6vw, 2rem) 0 0;
  max-width: 46rem;
  color: var(--c-muted);
  font-size: var(--fs-sm);
  line-height: 1.65;
}
.ceny__pozn a {
  color: var(--c-brand);
  font-family: var(--font-head);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

/* Cena přímo v pneuhotelu. Sekce je plná barevná plocha, takže částka
   nesmí být brandová - vzala by se s pozadím. Bílá na červené drží. */
.pneuhotel__cena {
  margin: 1.5rem 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .1rem .6rem;
}
.pneuhotel__cena b {
  font-family: var(--font-hero);
  font-weight: 400;
  font-size: clamp(2rem, 4.6vw, 2.85rem);
  line-height: 1;
  color: #fff;
}
.pneuhotel__cena span {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, .82);
}

/* ============ Značky pneumatik ============
   Text, ne loga - viz pneu_znacky() v inc/segmenty.php. Bez log je to
   řádek slov, takže drží pohromadě linkou nahoře, ne rámečkem. */

.znacky {
  margin-top: clamp(2.2rem, 4vw, 3.2rem);
  padding-top: clamp(1.5rem, 2.8vw, 2.1rem);
  border-top: 1px solid var(--c-line);
}
.znacky__popis {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.znacky__seznam {
  list-style: none;
  margin: .9rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .55rem;
}
.znacky__seznam li {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--c-ink);
  padding: .3rem .7rem;
  border-radius: var(--r-sm);
  background: var(--c-surface);
  box-shadow: 0 0 0 1px var(--c-line);
}
.znacky__pozn {
  margin: 1rem 0 0;
  color: var(--c-muted);
  font-size: var(--fs-sm);
}

@media print {
  .site-header, .hamburger, .pruh, .kontakt__mapa, .hero__foto, body::after { display: none !important; }
  body { background: #fff; color: #000; }
  .tile { color: #000; box-shadow: none; border: 1px solid #ccc; }
  .tile::before, .tile__foto { display: none; }
}

/* ── Contact Form 7 - napojení na .form vzhled ───────────────────────
   CF7 obaluje pole do <span class="wpcf7-form-control-wrap">; bez display:block
   by se input (width:100%) smrskl na obsah spanu. Barvy, zapuštění i mřížku
   přebírají .form__pole pravidla výš, CF7 vlastní vzhled nepřidává. */
.form .wpcf7-form-control-wrap { display: block; }
.form .wpcf7-not-valid-tip {
  display: block; margin-top: .35rem;
  font-size: var(--fs-sm); font-weight: 600; color: var(--c-brand-deep);
}
.form .wpcf7-list-item { display: block; margin: 0; }
.form .wpcf7-list-item label { display: flex; gap: .7rem; align-items: flex-start; margin: 0; font-weight: 400; }
.form .wpcf7-acceptance input { margin-top: .28rem; width: 1.05rem; height: 1.05rem; accent-color: var(--c-brand); flex: 0 0 auto; }
.form .wpcf7-spinner { display: none; }

.wpcf7-response-output {
  padding: 1rem 1.2rem; border-radius: var(--r-md); margin: 0 0 1rem !important;
  font-family: var(--font-head); font-weight: 600; font-size: var(--fs-base);
  border: 1px solid var(--c-brand) !important; background: var(--c-brand-soft); color: var(--c-brand-deep);
}
.form.sent .wpcf7-response-output { background: #E8F3EC; border-color: #A8D5B8 !important; color: #1B5E31; }
.form:not(.sent):not(.invalid):not(.failed):not(.spam):not(.aborted) .wpcf7-response-output { display: none; }

/* CF7 odesílá <input type="submit"> a ten nemá ::after kolečko se šipkou
   jako .btn, proto jednodušší vzhled bez ikony. */
.form input[type="submit"] {
  width: 100%; cursor: pointer; border: 0; border-radius: 999px;
  padding: .95rem 1.6rem; background: var(--c-brand); color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-base);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 16px -10px rgba(142, 21, 25, .8);
  transition: transform var(--t-rychle) var(--ease), background var(--t-rychle) var(--ease), box-shadow var(--t-rychle) var(--ease);
}
.form input[type="submit"]:hover { transform: translateY(-1px); background: #b91d24; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 12px 24px -12px rgba(142, 21, 25, .85); }
.form input[type="submit"]:active { transform: scale(.98); transition-duration: .08s; }
.form input[type="submit"]:focus-visible { outline: 3px solid var(--c-brand-soft); outline-offset: 2px; }

/* Complianz po souhlasu nabízí plovoucí tlačítko - stejnou funkci dělá
   odkaz "Nastavení cookies" v patičce. */
#cmplz-manage-consent { display: none !important; }

/* Complianz banner do brandu. Complianz vkládá barvy inline přes proměnné,
   proto !important. Kontrast bílého textu na --c-brand je 5,0:1. */
#cmplz-cookiebanner-container .cmplz-cookiebanner {
  font-family: var(--font-body); color: var(--c-ink);
  border-radius: var(--r-lg); border: 0;
  box-shadow: 0 18px 50px -18px rgba(21, 23, 28, .45);
}
#cmplz-cookiebanner-container .cmplz-title { font-family: var(--font-head); font-weight: 800; }
#cmplz-cookiebanner-container .cmplz-btn {
  font-family: var(--font-head); font-weight: 700; border-radius: 999px !important;
  border: 1px solid var(--c-line-silna) !important;
  background: #fff !important; color: var(--c-ink) !important;
}
#cmplz-cookiebanner-container .cmplz-btn.cmplz-accept {
  background: var(--c-brand) !important; border-color: var(--c-brand) !important; color: #fff !important;
}
#cmplz-cookiebanner-container .cmplz-btn.cmplz-accept:hover { background: #b91d24 !important; }
#cmplz-cookiebanner-container .cmplz-btn:focus-visible,
#cmplz-cookiebanner-container .cmplz-close:focus-visible { outline: 3px solid var(--c-brand-soft); outline-offset: 2px; box-shadow: none; }
#cmplz-cookiebanner-container .cmplz-links .cmplz-link { color: var(--c-brand-deep) !important; }

/* Podpis autora v patičce - záměrně nenápadný */
.site-footer__podpis { opacity: .6; }
.site-footer__podpis a { color: inherit; }