/*
Theme Name: Ověřování tachografů
Theme URI: https://www.overenitachografu.cz
Author: mgweb.cz
Description: Custom theme pro autorizované metrologické středisko KAMADOTRANS spol. s r.o. Součást skupiny webů Kamadotrans. Bez page builderu.
Version: 0.5.10
Requires at least: 6.4
Tested up to: 6.9
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: tachografy
*/

/* Písma hostovaná v theme (GDPR - bez volání Google serverů). Latin + latin-ext pro češtinu. */
@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;
}
@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;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/archivo-600-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: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/archivo-600-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;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/archivo-600-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: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/archivo-600-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;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/archivo-600-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: 'Archivo';
  font-style: normal;
  font-weight: 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/archivo-600-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;
}
@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;
}
@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;
}
@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;
}
@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;
}
@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;
}
@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;
}


/* ==========================================================================
   1. Tokeny
   ========================================================================== */

:root {
	/* Paleta - viz design-spec kapitola 2. Modrá je jediný značkový token;
	   po dokončení rebrandu Kamadotransu se mění jen tyhle tři řádky. */
	--c-brand: #0067FF;
	--c-brand-deep: #0B4FA8;
	--c-brand-soft: rgba(0, 103, 255, .08);

	--c-bg: #F3F2EF;
	--c-surface: #FFFFFF;
	--c-ink: #15171C;
	--c-muted: #5C636E;
	/* Tlumená šedá v hero musí být tmavší - nad fotkou by --c-muted
	   neprošel ani při zesíleném závoji. Měřeno, viz níže u .hero__foto. */
	--c-muted-hero: #4B5260;
	--c-line: rgba(21, 23, 28, .12);
	--c-line-svetla: rgba(255, 255, 255, .18);
	--c-varovne: #A6301C;
	--c-ok: #1F6B3A;

	/* Tvarosloví - „přístrojová" poloha mezi měkkým rozcestníkem
	   a tvrdou Pneumatuškou. */
	--r-lg: 1.4rem;
	--r-md: .85rem;
	--r-sm: .45rem;

	/* Typografie */
	--f-wordmark: 'Anton', Impact, sans-serif;
	--f-nadpis: 'Archivo', 'Segoe UI', system-ui, sans-serif;
	--f-text: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;

	--fs-micro: .75rem;
	--fs-sm: .875rem;
	--fs-base: 1rem;
	--fs-md: clamp(1.05rem, .98rem + .35vw, 1.25rem);
	--fs-lg: clamp(1.3rem, 1.1rem + .9vw, 1.75rem);
	--fs-xl: clamp(1.75rem, 1.3rem + 2.1vw, 2.75rem);
	/* Hero wordmark. Nápis má devatenáct znaků, tedy skoro dvakrát víc než
	   PNEUMATUŠKA, takže při stejné velikosti písma působí drobněji - proto
	   se velikost odvozuje od šířky, kterou reálně zabere.

	   Změřeno: Anton v tomhle nápisu zabere 9,235 px šířky na každý pixel
	   velikosti písma, plus zhruba 16 px na kreslenou tečku. Do obalu
	   širokého 1136 px by se tedy vešlo až 123 px, strop 6.5rem (104 px)
	   nechává rezervu.

	   Sklon je odvozený tak, aby nápis zůstal na jednom řádku od 320 px výš
	   (tam vychází 28 px při 287 px užitné šířky, tedy 6 px rezervy).
	   Spodní mez 1.75rem se proto reálně skoro neuplatní - je jen pojistka.

	   Kdo bude měnit text wordmarku, písmo nebo šířku obalu, musí ten poměr
	   přeměřit. Jinak se nápis zalomí a hero se rozsype. */
	--fs-2xl: clamp(1.75rem, .434rem + 6.74vw, 6.5rem);

	/* Rytmus - tři tempa, aby stránka nesplynula v jeden svitek */
	--sp-tesna: clamp(2.75rem, 2rem + 3vw, 4rem);
	--sp-bezna: clamp(3.75rem, 2.6rem + 4.6vw, 6rem);
	--sp-vzdusna: clamp(4.5rem, 3rem + 6vw, 7.5rem);

	--obal: 1200px;
	--obal-padding: clamp(1.1rem, .7rem + 1.6vw, 2rem);

	/* Rozptýlený ambientní stín ve třech vrstvách. Jedna tvrdá vrstva dělá
	   z karty nálepku, tři měkké z ní dělají předmět ležící na papíru. */
	--stin-karta:
		0 1px 1px rgba(21, 23, 28, .03),
		0 8px 20px -14px rgba(21, 23, 28, .12),
		0 32px 64px -44px rgba(21, 23, 28, .3);
	--stin-zvednuty:
		0 1px 1px rgba(21, 23, 28, .04),
		0 14px 28px -16px rgba(21, 23, 28, .16),
		0 44px 80px -48px rgba(21, 23, 28, .36);

	/* Pružinové křivky. Lineární ani ease-in-out se nepoužívají - pohyb má
	   mít hmotnost, ne konstantní rychlost. */
	--ease-fluid: cubic-bezier(.32, .72, 0, 1);
	--ease-jemna: cubic-bezier(.2, .7, .3, 1);
	--prechod: 220ms var(--ease-jemna);

	/* Objímka - vnější lůžko a vnitřní jádro mají soustředné rádiusy. */
	--objimka-lem: .3rem;
}

/* ==========================================================================
   2. Základ
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

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

	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}

body {
	margin: 0;
	background: var(--c-bg);
	color: var(--c-ink);
	font-family: var(--f-text);
	font-size: var(--fs-base);
	line-height: 1.62;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* Jemné zrno přes celou plochu - dává papírovému pozadí fyzickou
   podstatu. Je zásadně na fixním pseudoprvku bez záchytu ukazatele:
   na scrollujícím kontejneru by nutilo GPU překreslovat celou plochu. */
body::after {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: .028;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

img {
	height: auto;
	display: block;
}

a {
	color: var(--c-brand-deep);
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
}

a:hover {
	color: var(--c-ink);
}

h1,
h2,
h3 {
	font-family: var(--f-nadpis);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -.015em;
	margin: 0 0 .6em;
	text-wrap: balance;
}

p {
	margin: 0 0 1em;
}

p:last-child {
	margin-bottom: 0;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

button {
	font: inherit;
	color: inherit;
}

/* Atribut hidden musí přebít i .btn { display: inline-flex }. Bez tohohle
   zůstane skryté tlačítko vidět - autorský styl porazí styl prohlížeče. */
[hidden] {
	display: none !important;
}

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

/* Tabulkové číslice - ceny a termíny se musí zarovnat pod sebe.
   Drobnost, které si nikdo vědomě nevšimne, ale dělá dojem měřicího
   přístroje místo letáku. */
.cislice {
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum' 1;
}

.obal {
	width: 100%;
	max-width: var(--obal);
	margin-inline: auto;
	padding-inline: var(--obal-padding);
}

.skryte-vizualne {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.preskocit {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: .8rem 1.2rem;
	background: var(--c-ink);
	color: #fff;
	border-radius: 0 0 var(--r-sm) 0;
	text-decoration: none;
}

.preskocit:focus {
	left: 0;
	top: 0;
	color: #fff;
}

/* ==========================================================================
   3. Tlačítka
   ========================================================================== */

.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	padding: .72rem 1.25rem;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: var(--f-nadpis);
	font-weight: 700;
	font-size: var(--fs-sm);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition:
		background 380ms var(--ease-fluid),
		color 380ms var(--ease-fluid),
		border-color 380ms var(--ease-fluid),
		box-shadow 380ms var(--ease-fluid),
		transform 380ms var(--ease-fluid);
}

/* Fyzika stisku: tlačítko se při hoveru nadzvedne a při stisku stlačí.
   Animuje se jen transform, nikdy rozměry. */
.btn:hover {
	transform: translateY(-2px);
}

.btn:active {
	transform: translateY(0) scale(.98);
}

.btn--velke {
	padding: .95rem 1.05rem .95rem 1.6rem;
	font-size: var(--fs-base);
}

.btn--velke:not(:has(.btn__sipka)) {
	padding-right: 1.6rem;
}

.btn--plne {
	width: 100%;
	justify-content: center;
}

.btn__ikona {
	display: inline-grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	margin-left: -.45rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, .2);
	flex: 0 0 auto;
	transition: transform 380ms var(--ease-fluid), background var(--prechod);
}

/* Tlačítko v tlačítku: šipka nikdy nestojí nahá vedle textu, sedí ve vlastním
   kolečku zarovnaném s vnitřním okrajem. Při hoveru se posune po diagonále -
   drobné kinetické napětí uvnitř komponenty. */
.btn__sipka {
	display: inline-grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	margin-left: .35rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, .18);
	flex: 0 0 auto;
	transition: transform 420ms var(--ease-fluid), background var(--prechod);
}

.btn:hover .btn__sipka {
	transform: translate(3px, -2px) scale(1.06);
	background: rgba(255, 255, 255, .3);
}

.btn:hover .btn__ikona {
	transform: scale(1.06);
}

.btn--brand {
	background: var(--c-brand);
	color: #fff;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .22),
		0 10px 22px -14px rgba(0, 103, 255, .85);
}

.btn--brand:hover {
	background: var(--c-brand-deep);
	color: #fff;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .22),
		0 18px 32px -16px rgba(0, 103, 255, .8);
}

.btn--duch {
	background: transparent;
	color: var(--c-ink);
	border-color: rgba(21, 23, 28, .22);
}

.btn--duch .btn__ikona,
.btn--duch .btn__sipka {
	background: var(--c-brand-soft);
	color: var(--c-brand-deep);
}

.btn--duch:hover {
	background: var(--c-ink);
	color: #fff;
	border-color: var(--c-ink);
}

.btn--duch:hover .btn__ikona,
.btn--duch:hover .btn__sipka {
	background: rgba(255, 255, 255, .16);
	color: #fff;
}

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

.btn--svetle .btn__sipka {
	background: rgba(11, 79, 168, .12);
}

.btn--svetle:hover {
	background: var(--c-ink);
	color: #fff;
}

.btn--svetle:hover .btn__sipka {
	background: rgba(255, 255, 255, .18);
}

.odkaz-tlacitko {
	background: none;
	border: 0;
	padding: 0;
	color: var(--c-brand-deep);
	font-family: var(--f-nadpis);
	font-weight: 600;
	font-size: var(--fs-sm);
	text-decoration: underline;
	text-underline-offset: .2em;
	cursor: pointer;
}

/* ==========================================================================
   4. Wordmark
   ========================================================================== */

.wordmark {
	display: inline-block;
	text-decoration: none;
	color: var(--c-ink);
	font-weight: 400;
	letter-spacing: 0;
	margin: 0;
}

.wordmark__radek {
	display: block;
	font-family: var(--f-wordmark);
	line-height: 1.06;
	text-transform: uppercase;
}

.wordmark__a {
	color: var(--c-ink);
}

.wordmark__b {
	color: var(--c-brand);
	margin-left: .28em;
}

/* Malý wordmark v hlavičce: #0067FF na světlém pozadí má 4,27:1, pod limit 4,5:1. */
.wordmark--male .wordmark__b {
	color: var(--c-brand-deep);
}

.wordmark__tecka {
	color: var(--c-brand);
}

.wordmark__podradek {
	display: block;
	/* Roste s wordmarkem - pod 104px nápisem by pevných .85rem působilo
	   přilepeně. */
	margin-top: clamp(.85rem, .45rem + .8vw, 1.5rem);
	font-family: var(--f-nadpis);
	font-weight: 600;
	font-size: var(--fs-micro);
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--c-muted);
	line-height: 1.5;
}

.wordmark--male .wordmark__radek {
	font-size: clamp(1.05rem, .9rem + .6vw, 1.35rem);
	/* Anton má vysokou diakritiku (Ě, Ů) - řádek musí mít rezervu, ať se
	   háček a kroužek neořezávají. */
	padding-top: .1em;
}

.wordmark--hero .wordmark__radek {
	font-size: var(--fs-2xl);
	padding-top: .08em;
}

.wordmark--svetly .wordmark__a {
	color: #fff;
}

.wordmark--svetly .wordmark__b,
.wordmark--svetly .wordmark__tecka {
	color: #6BA5FF;
}

/* ==========================================================================
   5. Hlavička
   ========================================================================== */

.sdeleni {
	background: var(--c-ink);
	color: #fff;
	font-size: var(--fs-sm);
}

.sdeleni__obal {
	padding-block: .55rem;
	text-align: center;
}

.hlavicka {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(243, 242, 239, .82);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--c-line);
	transition: padding var(--prechod), background var(--prechod);
}

.hlavicka--zmensena {
	background: rgba(243, 242, 239, .94);
}

.hlavicka__obal {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding-block: .8rem;
}

.hlavicka--zmensena .hlavicka__obal {
	padding-block: .55rem;
}

.navigace {
	margin-left: auto;
}

.navigace__seznam {
	display: flex;
	align-items: center;
	gap: clamp(.9rem, .2rem + 1.1vw, 1.6rem);
}

.navigace__seznam a {
	font-family: var(--f-nadpis);
	font-weight: 600;
	font-size: var(--fs-sm);
	color: var(--c-ink);
	text-decoration: none;
	padding-block: .3rem;
	border-bottom: 2px solid transparent;
	transition: border-color var(--prechod), color var(--prechod);
}

.navigace__seznam a:hover {
	color: var(--c-brand-deep);
	border-bottom-color: var(--c-brand);
}

.hamburger {
	display: none;
	margin-left: auto;
	width: 2.75rem;
	height: 2.75rem;
	background: transparent;
	border: 1px solid var(--c-line);
	border-radius: var(--r-sm);
	cursor: pointer;
}

.hamburger__carky {
	display: grid;
	gap: 4px;
	justify-items: center;
}

.hamburger__carky span {
	display: block;
	width: 18px;
	height: 2px;
	background: var(--c-ink);
	transition: transform var(--prechod), opacity var(--prechod);
}

.menu-otevreno .hamburger__carky span:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}

.menu-otevreno .hamburger__carky span:nth-child(2) {
	opacity: 0;
}

.menu-otevreno .hamburger__carky span:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 1023px) {
	.hamburger {
		display: grid;
		place-items: center;
		order: 2;
	}

	.btn--tel {
		order: 3;
	}

	.btn--tel .btn__text {
		display: none;
	}

	.btn--tel .btn__ikona {
		margin-left: 0;
	}

	.navigace {
		order: 4;
		flex-basis: 100%;
		margin-left: 0;
		display: none;
		border-top: 1px solid var(--c-line);
		padding-top: .9rem;
		margin-top: .3rem;
	}

	.menu-otevreno .navigace {
		display: block;
	}

	.navigace__seznam {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.navigace__seznam a {
		display: block;
		padding: .8rem .2rem;
		border-bottom: 1px solid var(--c-line);
	}

	/* Položky menu nenaskočí naráz - vyjedou zpod neviditelné hrany
	   po sobě. Zpoždění je krátké, aby menu nepůsobilo pomalu. */
	.menu-otevreno .navigace__seznam li {
		animation: tacho-nabidka 420ms var(--ease-fluid) both;
	}

	.menu-otevreno .navigace__seznam li:nth-child(1) { animation-delay: 30ms; }
	.menu-otevreno .navigace__seznam li:nth-child(2) { animation-delay: 65ms; }
	.menu-otevreno .navigace__seznam li:nth-child(3) { animation-delay: 100ms; }
	.menu-otevreno .navigace__seznam li:nth-child(4) { animation-delay: 135ms; }
	.menu-otevreno .navigace__seznam li:nth-child(5) { animation-delay: 170ms; }
	.menu-otevreno .navigace__seznam li:nth-child(6) { animation-delay: 205ms; }

	.hlavicka__obal {
		flex-wrap: wrap;
	}
}

@keyframes tacho-nabidka {
	from {
		opacity: 0;
		transform: translateY(14px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (min-width: 480px) {
	.btn--tel .btn__text {
		display: inline;
	}

	.btn--tel .btn__ikona {
		margin-left: -.45rem;
	}
}

/* ==========================================================================
   6. Hero
   ========================================================================== */

.hero {
	position: relative;
	isolation: isolate;
	padding-block: clamp(3rem, 1.5rem + 6vw, 6.5rem) var(--sp-vzdusna);
	overflow: hidden;
}

.hero__foto {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.hero__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 60% 40%;
}

/* Závoj drží fotku v roli textury.
   ⚠️ MĚŘENO. Proti nejtmavšímu pixelu pod každým textem vychází:
   wordmark 12,6:1 - podřádek 5,75:1 - claim 13,4:1 - perex 5,59:1 -
   popisky v pruhu důvěry 5,50:1 (měřeno 12. 8. 2026 na šířce 1440).
   Kdo sáhne na krytí závoje, na velikost textu nebo vymění fotku,
   MUSÍ přeměřit. Tlumené texty drží limit jen díky --c-muted-hero. */
.hero__foto::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(70% 90% at 88% 12%, rgba(0, 103, 255, .16), transparent 68%),
		linear-gradient(102deg, rgba(243, 242, 239, .975) 0%, rgba(243, 242, 239, .95) 42%, rgba(243, 242, 239, .88) 100%);
}

.hero__obal {
	position: relative;
}

.hero__claim {
	max-width: 20ch;
	margin: 1.6rem 0 0;
	font-family: var(--f-nadpis);
	font-weight: 900;
	font-size: var(--fs-xl);
	line-height: 1.14;
	letter-spacing: -.02em;
	text-wrap: balance;
}

.hero__perex {
	max-width: 52ch;
	margin-top: 1.1rem;
	font-size: var(--fs-md);
	color: var(--c-muted-hero);
}

.wordmark--hero .wordmark__podradek {
	color: var(--c-muted-hero);
}

/* --- Animovaná tečka wordmarku: budík ---------------------------------------

   Rodinné gesto skupiny. Rozcestník mění tečku podle oboru přes GSAP, protože
   potřebuje čtyři různé scénáře. Tady je scénář jediný, takže je animace
   vědomě v čistém CSS - 70 kB knihovny by se nevrátilo. Stejné rozhodnutí
   padlo u Pneumatušky.

   Tvarosloví i geometrie jsou shodné s rozcestníkem: zaoblený čtverec 80x80
   se zakulatí na disk (rx/ry 6 -> 40), objeví se oblouk o poloměru 62
   a ručička ze středu 50,50 přejede stupnici, přestřelí zpět a doměří.
   Kdo bude animaci měnit, musí tyhle tvary zachovat - jinak se dva weby
   skupiny přestanou tvářit jako jedna věc.

   Jediná odchylka od rozcestníku: oblouk se nevykresluje průhledností, ale
   odvíjením stopy (stroke-dashoffset). Stejný tvar i stejná doba, jen to čte
   jako kreslení stupnice místo prolnutí.

   rx, ry i stroke-dashoffset jsou v SVG2 běžné CSS vlastnosti, takže se dají
   animovat bez JavaScriptu. Ručička se otáčí kolem středu ciferníku díky
   transform-box: view-box, což je obdoba svgOrigin z GSAPu na rozcestníku. */

/* Poměr .26em je shodný s rozcestníkem i Pneumatuškou. Na telefonu ale
   wordmark klesne tak, že by tečka měla 10 px - tah 9 jednotek ve viewBoxu
   o straně 100 by pak vycházel na 0,9 px, tedy pod pixel, a z budíku by
   zbyla šmouha. Spodní mez 14 px se na desktopu neuplatní (tam vychází
   18 px) a na telefonu zachrání čitelnost. */
.hero__tacho {
	display: inline-block;
	width: max(.26em, 14px);
	height: max(.26em, 14px);
	margin-left: .06em;
	vertical-align: baseline;
	overflow: visible;
}

.hero__tacho svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.tacho__bod {
	fill: var(--c-brand);
	rx: 6px;
	ry: 6px;
}

/* Oblouk je značkový, ručička inkoustová - shodně s rozcestníkem. */
.tacho__oblouk {
	stroke: var(--c-brand);
	stroke-width: 9;
	fill: none;
	stroke-linecap: round;
	/* Délka půlkruhu o poloměru 62 je pí * 62, tedy zhruba 195. */
	stroke-dasharray: 195;
	stroke-dashoffset: 195;
	opacity: 0;
}

.tacho__rucicka {
	stroke: var(--c-ink);
	stroke-width: 9;
	stroke-linecap: round;
	opacity: 0;
	transform-box: view-box;
	transform-origin: 50px 50px;
}

/* Na malých displejích se tahy zesílí, aby stupnice i ručička zůstaly
   celopixelové. Na desktopu se pravidlo neuplatní. */
@media (max-width: 640px) {
	.tacho__oblouk {
		stroke-width: 12;
	}

	.tacho__rucicka {
		stroke-width: 12;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.tacho__bod {
		animation: tacho-bod 15s var(--ease-jemna) 1.2s infinite;
	}

	.tacho__oblouk {
		animation: tacho-oblouk 15s var(--ease-jemna) 1.2s infinite;
	}

	.tacho__rucicka {
		animation: tacho-rucicka 15s linear 1.2s infinite;
	}
}

/* Čtverec se zakulatí na číselník a na konci se zase zahrotí zpět na tečku.
   Časování shodné s Pneumatuškou, ať smyčky obou webů dýchají stejně. */
@keyframes tacho-bod {
	0%, 14% {
		rx: 6px;
		ry: 6px;
	}

	19%, 74% {
		rx: 40px;
		ry: 40px;
	}

	80%, 100% {
		rx: 6px;
		ry: 6px;
	}
}

/* Stupnice se odvine kolem hotového číselníku a na konci zmizí. */
@keyframes tacho-oblouk {
	0%, 19% {
		opacity: 0;
		stroke-dashoffset: 195;
	}

	24%, 70% {
		opacity: 1;
		stroke-dashoffset: 0;
	}

	76%, 100% {
		opacity: 0;
		stroke-dashoffset: 0;
	}
}

/* Přejezd, přestřelení a doměření. Každý úsek má vlastní křivku - proto je
   základní časování animace lineární a tvar pohybu určují jednotlivé snímky.
   Úhly jsou převzaté z rozcestníku (-55 -> 55 -> 15 -> 38). */
@keyframes tacho-rucicka {
	0%, 22% {
		opacity: 0;
		transform: rotate(-55deg);
		animation-timing-function: linear;
	}

	25% {
		opacity: 1;
		transform: rotate(-55deg);
		animation-timing-function: cubic-bezier(.45, 0, .55, 1);
	}

	43% {
		transform: rotate(55deg);
		animation-timing-function: cubic-bezier(.34, 1.56, .64, 1);
	}

	49% {
		transform: rotate(15deg);
		animation-timing-function: cubic-bezier(.45, 0, .55, 1);
	}

	56%, 70% {
		opacity: 1;
		transform: rotate(38deg);
	}

	76%, 100% {
		opacity: 0;
		transform: rotate(38deg);
	}
}

.hero__akce {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: 1.9rem;
}

.hero__duvera {
	margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

.hero__duvera > .objimka__jadro {
	display: grid;
	gap: 1px;
	background: var(--c-line);
	overflow: hidden;
}

.hero__duvera li {
	display: grid;
	gap: .18rem;
	padding: 1.05rem 1.2rem;
	background: rgba(255, 255, 255, .82);
}

.hero__duvera-stitek {
	font-family: var(--f-nadpis);
	font-weight: 600;
	font-size: var(--fs-micro);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--c-brand-deep);
}

.hero__duvera-hodnota {
	font-family: var(--f-nadpis);
	font-weight: 800;
	font-size: var(--fs-lg);
	line-height: 1.1;
}

.hero__duvera-popis {
	font-size: var(--fs-sm);
	color: var(--c-muted-hero);
}

/* Pruh důvěry není tři stejné buňky. Úřední značka je nejcennější údaj
   na webu, tak dostane víc místa než zbytek. */
@media (min-width: 700px) {
	.hero__duvera > .objimka__jadro {
		grid-template-columns: 1.35fr 1fr 1.1fr;
	}
}

/* ==========================================================================
   7. Sekce
   ========================================================================== */

.sekce {
	position: relative;
}

.sekce--tesna {
	padding-block: var(--sp-tesna);
}

.sekce--bezna {
	padding-block: var(--sp-bezna);
}

.sekce--vzdusna {
	padding-block: var(--sp-vzdusna);
}

.sekce + .sekce:not(.sekce--brand):not(.sekce--inkoust) {
	border-top: 1px solid var(--c-line);
}

/* Barevné předěly. Jemná mřížka na tmavých plochách je odkaz na milimetrový
   papír a záznamový kotouč - nesmí soupeřit s textem. */
.sekce--brand,
.sekce--inkoust {
	position: relative;
	isolation: isolate;
	color: #fff;
}

.sekce--brand {
	background: var(--c-brand-deep);
}

.sekce--inkoust {
	background: var(--c-ink);
}

.sekce--brand::before,
.sekce--inkoust::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 32px),
		repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 32px);
}

.sekce--brand a:not(.btn),
.sekce--inkoust a:not(.btn) {
	color: #fff;
}

.sekce__hlavicka {
	max-width: 62ch;
	margin-bottom: clamp(2rem, 1.2rem + 2.4vw, 3.25rem);
}

.sekce__hlavicka--uzka {
	max-width: 48ch;
}

/* Štítek sekce je pilulka s vlasovým lemem a signální tečkou, ne holý
   prostrkaný text. Působí jako popiska na přístroji, ne jako nadpis navíc. */
.sekce__stitek {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin: 0 0 1rem;
	padding: .32rem .8rem .32rem .62rem;
	border-radius: 999px;
	background: var(--c-brand-soft);
	box-shadow: inset 0 0 0 1px rgba(0, 103, 255, .16);
	font-family: var(--f-nadpis);
	font-weight: 700;
	font-size: var(--fs-micro);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--c-brand-deep);
	line-height: 1.4;
}

.sekce__stitek::before {
	content: '';
	width: .4rem;
	height: .4rem;
	border-radius: 999px;
	background: var(--c-brand);
	flex: 0 0 auto;
}

.sekce__stitek--svetly {
	background: rgba(255, 255, 255, .1);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
	color: #fff;
}

.sekce__stitek--svetly::before {
	background: #fff;
}

.sekce__nadpis {
	font-size: var(--fs-xl);
	margin-bottom: .5rem;
}

.sekce__nadpis--svetly {
	color: #fff;
}

.sekce__perex {
	font-size: var(--fs-md);
	color: var(--c-muted);
	margin: 0;
}

/* --- Objímka: vnější lůžko + vnitřní jádro ---------------------------------
   Panel nesmí ležet na pozadí naplocho. Vnější lůžko má vlastní tlumené
   pozadí a vlasový lem, vnitřní jádro sedí uvnitř s menším, dopočítaným
   rádiusem, takže křivky jsou soustředné. Je to obdoba dvojrámečku
   z Pneumatušky, jen přeložená do přístrojového tvarosloví: skleněná deska
   usazená v kovovém rámu. */

.objimka {
	padding: var(--objimka-lem);
	border-radius: var(--r-lg);
	background: rgba(21, 23, 28, .035);
	box-shadow: inset 0 0 0 1px rgba(21, 23, 28, .06);
}

.objimka__jadro {
	border-radius: calc(var(--r-lg) - var(--objimka-lem));
	background: var(--c-surface);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .9),
		0 0 0 1px var(--c-line),
		var(--stin-karta);
}

.objimka--svetla {
	background: rgba(255, 255, 255, .09);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}

.objimka--svetla .objimka__jadro {
	background: rgba(255, 255, 255, .06);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .14),
		0 0 0 1px rgba(255, 255, 255, .12);
}

.seznam-odrazky {
	display: grid;
	gap: .5rem;
}

.seznam-odrazky li {
	position: relative;
	padding-left: 1.35rem;
}

.seznam-odrazky li::before {
	content: '';
	position: absolute;
	left: 0;
	top: .62em;
	width: .5rem;
	height: .5rem;
	border: 2px solid var(--c-brand);
	border-radius: 999px;
}

/* ==========================================================================
   8. Karty a bento
   ========================================================================== */

.bento {
	display: grid;
	gap: clamp(.9rem, .5rem + 1.2vw, 1.35rem);
	grid-template-columns: 1fr;
}

.karta {
	position: relative;
	padding: clamp(1.3rem, 1rem + 1vw, 1.9rem);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	box-shadow: var(--stin-karta);
	transition:
		border-color 420ms var(--ease-fluid),
		box-shadow 420ms var(--ease-fluid),
		transform 420ms var(--ease-fluid);
}

.karta:hover {
	border-color: rgba(0, 103, 255, .34);
	box-shadow: var(--stin-zvednuty);
	transform: translateY(-4px);
}

.karta__cislo {
	margin: 0 0 .55rem;
	font-family: var(--f-nadpis);
	font-weight: 800;
	font-size: var(--fs-sm);
	letter-spacing: .12em;
	color: var(--c-brand);
}

.karta__nadpis {
	font-size: var(--fs-lg);
	margin-bottom: .55rem;
}

.karta__perex {
	color: var(--c-muted);
	margin-bottom: 1rem;
}

.karta__seznam {
	display: grid;
	gap: .45rem;
	font-size: var(--fs-sm);
}

.karta__seznam li {
	position: relative;
	padding-left: 1.25rem;
}

.karta__seznam li::before {
	content: '';
	position: absolute;
	left: 0;
	top: .55em;
	width: .55rem;
	height: .55rem;
	border-radius: 999px;
	border: 2px solid var(--c-brand);
}

/* Hlavní karta je v mřížce nejvyšší, protože ji táhne sousedka. Místo aby
   jí dole zůstalo prázdno, se výčet úkonů přisadí ke spodní hraně a oddělí
   linkou - vypadá to jako záměr, ne jako zbytek místa. */
.karta--hlavni {
	display: flex;
	flex-direction: column;
	background: var(--c-ink);
	color: #fff;
	border-color: transparent;
}

.karta--hlavni .karta__nadpis {
	font-size: var(--fs-xl);
}

.karta--hlavni .karta__perex {
	margin-bottom: 1.5rem;
}

.karta--hlavni .karta__seznam {
	margin-top: auto;
	padding-top: 1.35rem;
	border-top: 1px solid rgba(255, 255, 255, .14);
}

.karta--hlavni .karta__cislo {
	color: #6BA5FF;
}

.karta--hlavni .karta__perex {
	color: rgba(255, 255, 255, .78);
}

.karta--hlavni .karta__seznam li::before {
	border-color: #6BA5FF;
}

.karta--hlavni:hover {
	border-color: transparent;
}

@media (min-width: 640px) {
	.bento {
		grid-template-columns: repeat(2, 1fr);
	}

	.karta--hlavni {
		grid-column: 1 / -1;
	}

	.karta--hlavni .karta__perex {
		max-width: 60ch;
	}
}

/* Asymetrické bento. Čtyři stejně široké karty vedle sebe vypadají jako
   šablona; střídavé váhy 4-2 a 2-4 rozbijí řádkovost, aniž by se rozpadl
   rytmus. */
@media (min-width: 1024px) {
	.bento {
		grid-template-columns: repeat(6, 1fr);
	}

	/* Řádek 1: 4 + 2. Řádek 2: 2 + 4. Zrcadlené váhy, žádná řádkovost. */
	.karta--sluzba:nth-child(1) {
		grid-column: span 4;
	}

	.karta--sluzba:nth-child(2) {
		grid-column: span 2;
	}

	.karta--sluzba:nth-child(3) {
		grid-column: span 2;
	}

	.karta--sluzba:nth-child(4) {
		grid-column: span 4;
	}

	.karta--sluzba:nth-child(4) {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: .4rem 2.25rem;
		align-items: start;
	}

	.karta--sluzba:nth-child(4) .karta__cislo,
	.karta--sluzba:nth-child(4) .karta__nadpis,
	.karta--sluzba:nth-child(4) .karta__perex {
		grid-column: 1;
	}

	.karta--sluzba:nth-child(4) .karta__perex {
		margin-bottom: 0;
	}

	.karta--sluzba:nth-child(4) .karta__seznam {
		grid-column: 2;
		grid-row: 1 / span 3;
		align-self: center;
	}
}

/* ==========================================================================
   9. Průvodce
   ========================================================================== */

.pruvodce__panel > .objimka__jadro {
	padding: clamp(1.25rem, .8rem + 2vw, 2.5rem);
}

/* Bez JavaScriptu se místo formuláře ukáže statické shrnutí pravidel. */
.no-js .pruvodce__form,
.no-js .pruvodce__vysledek {
	display: none;
}

.js .pruvodce__staticky {
	display: none;
}

.pruvodce__staticky h3 {
	font-size: var(--fs-md);
	margin-top: 1.5rem;
}

.pruvodce__staticky h3:first-child {
	margin-top: 0;
}

.pruvodce__staticky p {
	margin-top: 1.2rem;
}

.pruvodce__postup {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.75rem;
}

.pruvodce__postup-cara {
	position: relative;
	flex: 1;
	height: 3px;
	background: var(--c-line);
	border-radius: 999px;
	overflow: hidden;
}

.pruvodce__postup-vypln {
	position: absolute;
	inset: 0 auto 0 0;
	width: 25%;
	background: var(--c-brand);
	border-radius: 999px;
	transition: width var(--prechod);
}

.pruvodce__postup-text {
	font-family: var(--f-nadpis);
	font-weight: 700;
	font-size: var(--fs-sm);
	color: var(--c-muted);
	flex: 0 0 auto;
}

.pruvodce__krok {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

/* Bez JS jsou vidět všechny kroky pod sebou. */
.no-js .pruvodce__krok + .pruvodce__krok {
	margin-top: 2rem;
}

.pruvodce__otazka {
	display: block;
	padding: 0;
	font-family: var(--f-nadpis);
	font-weight: 800;
	font-size: var(--fs-lg);
	line-height: 1.2;
	letter-spacing: -.015em;
	margin-bottom: 1.15rem;
}

.pruvodce__volby {
	display: grid;
	gap: .6rem;
}

@media (min-width: 640px) {
	.pruvodce__volby {
		grid-template-columns: repeat(2, 1fr);
	}
}

.volba {
	position: relative;
	display: block;
	cursor: pointer;
}

.volba input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.volba__telo {
	display: flex;
	align-items: center;
	gap: .75rem;
	min-height: 3.5rem;
	padding: .85rem 1.1rem;
	background: var(--c-bg);
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	font-family: var(--f-nadpis);
	font-weight: 600;
	font-size: var(--fs-base);
	line-height: 1.25;
	transition: border-color var(--prechod), background var(--prechod), box-shadow var(--prechod);
}

.volba__telo::before {
	content: '';
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	border: 2px solid rgba(21, 23, 28, .3);
	border-radius: 999px;
	transition: border-color var(--prechod), box-shadow var(--prechod);
}

.volba:hover .volba__telo {
	border-color: rgba(0, 103, 255, .45);
	background: #fff;
}

.volba input:checked + .volba__telo {
	border-color: var(--c-brand);
	background: var(--c-brand-soft);
}

.volba input:checked + .volba__telo::before {
	border-color: var(--c-brand);
	box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 12px var(--c-brand);
}

.volba input:focus-visible + .volba__telo {
	outline: 3px solid var(--c-brand);
	outline-offset: 2px;
}

.volba--nevim .volba__telo {
	font-weight: 500;
	color: var(--c-muted);
}

.pruvodce__napoveda {
	margin-top: .9rem;
	font-size: var(--fs-sm);
	color: var(--c-muted);
}

.pruvodce__datum {
	display: grid;
	gap: .9rem;
}

@media (min-width: 640px) {
	.pruvodce__datum {
		grid-template-columns: 1fr 1fr;
		align-items: end;
	}
}

.pruvodce__ovladani {
	display: flex;
	gap: .7rem;
	margin-top: 1.75rem;
	padding-top: 1.35rem;
	border-top: 1px solid var(--c-line);
}

.pruvodce__ovladani .btn:last-child {
	margin-left: auto;
}

.no-js .pruvodce__ovladani {
	display: none;
}

.pruvodce__chyba {
	margin: .85rem 0 0;
	color: var(--c-varovne);
	font-size: var(--fs-sm);
	font-weight: 600;
}

.pruvodce__vyhrada {
	max-width: 68ch;
	margin: 1.25rem auto 0;
	font-size: var(--fs-sm);
	color: var(--c-muted);
	text-align: center;
}

/* --- Výsledek --- */

.vysledek__stav {
	display: flex;
	align-items: center;
	gap: .7rem;
	margin: 0 0 .75rem;
	font-family: var(--f-nadpis);
	font-weight: 900;
	font-size: var(--fs-lg);
	letter-spacing: -.015em;
}

.vysledek__tecka {
	width: .85rem;
	height: .85rem;
	border-radius: 999px;
	flex: 0 0 auto;
	background: var(--c-brand);
}

.vysledek--ano .vysledek__tecka {
	background: var(--c-brand);
}

.vysledek--ne .vysledek__tecka {
	background: var(--c-ok);
}

.vysledek--nejasne .vysledek__tecka {
	background: var(--c-muted);
}

.vysledek__uvod {
	max-width: 64ch;
	color: var(--c-muted);
	font-size: var(--fs-md);
}

.vysledek__radky {
	display: grid;
	gap: 1px;
	margin: 1.6rem 0 0;
	background: var(--c-line);
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	overflow: hidden;
}

@media (min-width: 700px) {
	.vysledek__radky {
		grid-template-columns: repeat(2, 1fr);
	}
}

.vysledek__radek {
	display: grid;
	gap: .2rem;
	padding: 1.05rem 1.2rem;
	background: var(--c-bg);
}

.vysledek__radek dt {
	font-family: var(--f-nadpis);
	font-weight: 600;
	font-size: var(--fs-micro);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--c-brand-deep);
}

.vysledek__radek dd {
	margin: 0;
	display: grid;
	gap: .1rem;
}

.vysledek__hodnota {
	font-family: var(--f-nadpis);
	font-weight: 800;
	font-size: var(--fs-lg);
	line-height: 1.15;
}

.vysledek__pozn {
	font-size: var(--fs-sm);
	color: var(--c-muted);
}

.vysledek__radek--varovne {
	background: rgba(166, 48, 28, .07);
}

.vysledek__radek--varovne dt {
	color: var(--c-varovne);
}

.vysledek__radek--varovne .vysledek__hodnota {
	color: var(--c-varovne);
}

.vysledek__akce {
	display: flex;
	flex-wrap: wrap;
	gap: .7rem;
	margin-top: 1.6rem;
}

.vysledek__vyhrada {
	margin-top: 1.2rem;
	font-size: var(--fs-sm);
	color: var(--c-muted);
}

.vysledek__znovu {
	margin-top: .6rem;
}

/* ==========================================================================
   10. Dodávky
   ========================================================================== */

.dodavky {
	display: grid;
	gap: clamp(1.75rem, 1rem + 3vw, 3.25rem);
}

@media (min-width: 900px) {
	.dodavky {
		grid-template-columns: 1.1fr .9fr;
		align-items: center;
	}
}

.dodavky__perex {
	max-width: 52ch;
	font-size: var(--fs-md);
	color: rgba(255, 255, 255, .88);
}

.dodavky__akce {
	margin-top: 1.75rem;
}

.dodavky__karty {
	display: grid;
	gap: 1rem;
}

@media (min-width: 520px) and (max-width: 899px) {
	.dodavky__karty {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Dvojitý vlasový lem místo jednoho obtahu - karta pak vypadá jako deska
   usazená v rámu, ne jako obdélník s čárou kolem. */
.dodavky__karta {
	padding: 1.4rem 1.5rem;
	background: rgba(255, 255, 255, .1);
	border-radius: var(--r-md);
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, .2),
		inset 0 0 0 5px rgba(255, 255, 255, .055),
		inset 0 1px 0 rgba(255, 255, 255, .18);
}

.dodavky__karta h3 {
	font-size: var(--fs-md);
	margin-bottom: .35rem;
	color: #fff;
}

.dodavky__karta p {
	margin: 0;
	color: rgba(255, 255, 255, .85);
	font-size: var(--fs-sm);
}

.dodavky__znak {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	margin: 0 0 .85rem;
	border-radius: 999px;
	border: 1px solid var(--c-line-svetla);
	background: rgba(255, 255, 255, .12);
	color: #fff;
}

.dodavky__poznamka {
	max-width: 70ch;
	margin-top: clamp(1.75rem, 1rem + 2vw, 2.75rem);
	padding-top: 1.4rem;
	border-top: 1px solid var(--c-line-svetla);
	font-size: var(--fs-sm);
	color: rgba(255, 255, 255, .82);
}

/* ==========================================================================
   11. Jak to probíhá
   ========================================================================== */

.prubeh {
	display: grid;
	gap: clamp(1.75rem, 1rem + 3vw, 3rem);
}

@media (min-width: 1024px) {
	.prubeh {
		grid-template-columns: 1fr minmax(280px, 360px);
		align-items: start;
	}
}

.prubeh__kroky {
	display: grid;
	gap: 1.5rem;
}

.prubeh__krok {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1.1rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--c-line);
}

.prubeh__krok:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.prubeh__cislo {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--c-line);
	border-radius: 999px;
	font-family: var(--f-nadpis);
	font-weight: 800;
	font-size: var(--fs-sm);
	color: var(--c-brand-deep);
	background: var(--c-surface);
}

.prubeh__nazev {
	font-size: var(--fs-md);
	margin-bottom: .3rem;
}

.prubeh__telo p {
	margin: 0;
	color: var(--c-muted);
}

.prubeh__bok {
	display: grid;
	gap: 1.15rem;
}

.prubeh__foto {
	width: 100%;
	border-radius: var(--r-md);
	border: 1px solid var(--c-line);
}

.prubeh__box > .objimka__jadro {
	padding: 1.4rem 1.5rem;
}

.prubeh__box h3 {
	font-size: var(--fs-md);
	margin-bottom: .8rem;
}

.prubeh__box-pozn {
	margin-top: 1rem;
	padding-top: .9rem;
	border-top: 1px solid var(--c-line);
	font-size: var(--fs-sm);
	color: var(--c-muted);
}

/* ==========================================================================
   12. Ceník
   ========================================================================== */

.cenik {
	display: grid;
	border-top: 1px solid var(--c-line);
}

.cenik__radek {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: .3rem 1rem;
	align-items: baseline;
	padding: 1.05rem .25rem;
	border-bottom: 1px solid var(--c-line);
}

.cenik__nazev {
	font-family: var(--f-nadpis);
	font-weight: 600;
	font-size: var(--fs-md);
}

.cenik__poznamka {
	display: block;
	font-family: var(--f-text);
	font-weight: 400;
	font-size: var(--fs-sm);
	color: var(--c-muted);
}

.cenik__tecky {
	display: none;
}

.cenik__cena {
	font-family: var(--f-nadpis);
	font-weight: 800;
	font-size: var(--fs-md);
	white-space: nowrap;
	text-align: right;
}

@media (min-width: 700px) {
	.cenik__radek {
		grid-template-columns: auto 1fr auto;
	}

	.cenik__tecky {
		display: block;
		align-self: center;
		height: 1px;
		margin-top: .2rem;
		background: repeating-linear-gradient(90deg, var(--c-line) 0 3px, transparent 3px 8px);
	}

	.cenik__poznamka {
		max-width: 46ch;
	}
}

.cenik__pozn {
	margin-top: 1.4rem;
	font-size: var(--fs-sm);
	color: var(--c-muted);
}

/* ==========================================================================
   13. Legislativa
   ========================================================================== */

.legislativa {
	display: grid;
	gap: clamp(1.75rem, 1rem + 3vw, 3.25rem);
}

@media (min-width: 900px) {
	.legislativa {
		grid-template-columns: .95fr 1.05fr;
		align-items: start;
	}
}

.legislativa__perex {
	max-width: 52ch;
	font-size: var(--fs-md);
	color: rgba(255, 255, 255, .86);
}

.legislativa__perex strong {
	color: #fff;
}

.legislativa__rozhodnuti {
	margin-top: 1.5rem;
	padding-top: 1.2rem;
	border-top: 1px solid var(--c-line-svetla);
	font-size: var(--fs-sm);
	color: rgba(255, 255, 255, .7);
}

.legislativa__seznam {
	display: grid;
	gap: 1px;
	background: var(--c-line-svetla);
	border: 1px solid var(--c-line-svetla);
	border-radius: var(--r-md);
	overflow: hidden;
}

.legislativa__seznam li {
	display: grid;
	gap: .25rem;
	padding: 1.15rem 1.3rem;
	background: rgba(255, 255, 255, .045);
}

.legislativa__oznaceni {
	font-family: var(--f-nadpis);
	font-weight: 700;
	font-size: var(--fs-base);
	color: #fff;
}

.legislativa__popis {
	font-size: var(--fs-sm);
	color: rgba(255, 255, 255, .74);
}

/* ==========================================================================
   14. FAQ
   ========================================================================== */

/* Jediná sekce s vystředěnou hlavičkou. Osm sekcí se shodně zarovnaným
   štítkem, nadpisem a perexem by splynulo v šablonu - jedna odchylka
   uprostřed dolní půlky stránky rytmus rozbije. */
.faq-hlavicka {
	max-width: 46ch;
	margin-inline: auto;
	text-align: center;
}

.faq {
	max-width: 78ch;
	margin-inline: auto;
	border-top: 1px solid var(--c-line);
}

.faq__polozka {
	border-bottom: 1px solid var(--c-line);
}

.faq__otazka {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	padding: 1.15rem .25rem;
	font-family: var(--f-nadpis);
	font-weight: 700;
	font-size: var(--fs-md);
	line-height: 1.3;
	cursor: pointer;
	list-style: none;
}

.faq__otazka::-webkit-details-marker {
	display: none;
}

.faq__otazka:hover {
	color: var(--c-brand-deep);
}

.faq__znak {
	position: relative;
	flex: 0 0 auto;
	width: 1.6rem;
	height: 1.6rem;
	border: 1px solid var(--c-line);
	border-radius: 999px;
}

.faq__znak::before,
.faq__znak::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: .65rem;
	height: 2px;
	background: var(--c-brand);
	transform: translate(-50%, -50%);
	transition: transform var(--prechod), opacity var(--prechod);
}

.faq__znak::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.faq__polozka[open] .faq__znak::after {
	opacity: 0;
	transform: translate(-50%, -50%) rotate(0);
}

.faq__odpoved {
	padding: 0 .25rem 1.4rem;
	max-width: 68ch;
	color: var(--c-muted);
}

.faq__pozn {
	max-width: 78ch;
	margin: 1.5rem auto 0;
	font-size: var(--fs-sm);
	color: var(--c-muted);
	text-align: center;
}

/* ==========================================================================
   15. Kontakt a formulář
   ========================================================================== */

.kontakt {
	display: grid;
	gap: clamp(1.75rem, 1rem + 3vw, 3rem);
}

@media (min-width: 1024px) {
	.kontakt {
		grid-template-columns: 1.05fr .95fr;
		align-items: start;
	}
}

.kontakt__formular > .objimka__jadro {
	padding: clamp(1.25rem, .8rem + 1.8vw, 2.25rem);
}

.formular {
	display: grid;
	gap: 1rem;
}

.formular__radek {
	display: grid;
	gap: 1rem;
}

@media (min-width: 560px) {
	.formular__radek {
		grid-template-columns: repeat(2, 1fr);
	}
}

.pole {
	display: grid;
	gap: .35rem;
}

.pole__popis {
	font-family: var(--f-nadpis);
	font-weight: 600;
	font-size: var(--fs-sm);
}

.pole__nutne {
	color: var(--c-brand);
}

.pole__vstup {
	width: 100%;
	padding: .75rem .9rem;
	font-family: var(--f-text);
	font-size: var(--fs-base);
	color: var(--c-ink);
	background: var(--c-bg);
	border: 1px solid var(--c-line);
	border-radius: var(--r-sm);
	transition: border-color var(--prechod), background var(--prechod);
}

.pole__vstup:hover {
	border-color: rgba(21, 23, 28, .26);
}

.pole__vstup:focus {
	background: #fff;
	border-color: var(--c-brand);
	outline: 3px solid rgba(0, 103, 255, .22);
	outline-offset: 0;
}

textarea.pole__vstup {
	resize: vertical;
	min-height: 6rem;
}

.souhlas {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .65rem;
	align-items: start;
	font-size: var(--fs-sm);
	color: var(--c-muted);
	cursor: pointer;
}

.souhlas input {
	width: 1.15rem;
	height: 1.15rem;
	margin-top: .2rem;
	accent-color: var(--c-brand);
}

/* Honeypot - skryté pole, které člověk nevidí a robot vyplní. */
.past {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.hlaska {
	margin-bottom: 1.25rem;
	padding: .95rem 1.15rem;
	border-radius: var(--r-sm);
	border: 1px solid;
	font-size: var(--fs-sm);
}

.hlaska--ok {
	background: rgba(31, 107, 58, .08);
	border-color: rgba(31, 107, 58, .3);
	color: var(--c-ok);
}

.hlaska--chyba {
	background: rgba(166, 48, 28, .07);
	border-color: rgba(166, 48, 28, .3);
	color: var(--c-varovne);
}

.kontakt__udaje > .objimka__jadro {
	display: grid;
	gap: 1px;
	background: var(--c-line);
	overflow: hidden;
}

.kontakt__blok {
	padding: 1.3rem 1.45rem;
	background: var(--c-bg);
}

.kontakt__nadpis {
	margin-bottom: .5rem;
	font-family: var(--f-nadpis);
	font-weight: 600;
	font-size: var(--fs-micro);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--c-brand-deep);
}

.kontakt__adresa {
	font-family: var(--f-nadpis);
	font-weight: 600;
	font-size: var(--fs-md);
}

.kontakt__velky {
	font-family: var(--f-nadpis);
	font-weight: 800;
	font-size: var(--fs-lg);
	margin-bottom: .2rem;
}

.kontakt__velky a {
	text-decoration: none;
}

.kontakt__pozn {
	font-size: var(--fs-sm);
	color: var(--c-muted);
}

.kontakt__blok--znacka {
	/* Plná barva místo průhledné: průhledná se smíchala s podkladem mezerníku a text
	   pod ní měl kontrast 3,6:1. Nyní 5,0:1. */
	background: #E3ECFA;
}

.kontakt__mapa {
	line-height: 0;
	background: var(--c-bg);
}

.kontakt__mapa iframe {
	display: block;
	border: 0;
}

/* ==========================================================================
   16. Patička
   ========================================================================== */

.paticka {
	background: var(--c-ink);
	color: rgba(255, 255, 255, .8);
	padding-top: var(--sp-bezna);
	font-size: var(--fs-sm);
}

.paticka__obal {
	display: grid;
	gap: 2.25rem;
	padding-bottom: 2.5rem;
}

@media (min-width: 800px) {
	.paticka__obal {
		grid-template-columns: 1.4fr 1fr 1fr;
		gap: 3rem;
	}
}

.paticka a {
	color: #fff;
}

.paticka__perex {
	margin-top: 1rem;
	max-width: 44ch;
}

.paticka__skupina {
	margin-top: 1rem;
	font-family: var(--f-nadpis);
	font-weight: 600;
	letter-spacing: .04em;
}

.paticka__nadpis {
	margin-bottom: .75rem;
	font-family: var(--f-nadpis);
	font-weight: 600;
	font-size: var(--fs-micro);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #6BA5FF;
}

.paticka__sloupec p {
	margin-bottom: .9rem;
}

.paticka__drobne {
	color: rgba(255, 255, 255, .55);
}

.paticka__spodek {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	justify-content: space-between;
	padding-block: 1.25rem;
	border-top: 1px solid var(--c-line-svetla);
	color: rgba(255, 255, 255, .6);
	font-size: var(--fs-micro);
}

.paticka__spodek p {
	margin: 0;
}

/* ==========================================================================
   17. Běžné stránky
   ========================================================================== */

.stranka {
	padding-block: var(--sp-bezna);
	max-width: 80ch;
}

.stranka__nadpis {
	font-size: var(--fs-xl);
}

.stranka__obsah h2 {
	font-size: var(--fs-lg);
	margin-top: 2rem;
}

.stranka__obsah ul {
	list-style: disc;
	padding-left: 1.3rem;
	margin-bottom: 1em;
}

.stranka__akce {
	display: flex;
	flex-wrap: wrap;
	gap: .7rem;
	margin-top: 1.75rem;
}

/* ==========================================================================
   18. Scroll reveal - opt-in
   ========================================================================== */

/* Prvky jsou viditelné. Třídu .odkryv přidává až JavaScript, takže bez
   něj nic nezmizí.

   Nájezd má hmotnost: prvek se zvedne, doostří a rozsvítí najednou přes
   800 ms pružinovou křivkou. Animuje se výhradně transform, opacity
   a filter - nic, co by nutilo prohlížeč přepočítat rozvržení. */
/* ⚠️ 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. */
.odkryv {
	opacity: 1;
	transform: none;
	filter: none;
	transition: none;
}

.odkryv--videt {
	opacity: 1;
	transform: none;
	filter: none;
}

/* Sourozenci ve stejné mřížce nenajíždějí naráz, ale po sobě. */
.odkryv:nth-child(2) {
	transition-delay: 70ms;
}

.odkryv:nth-child(3) {
	transition-delay: 140ms;
}

.odkryv:nth-child(4) {
	transition-delay: 210ms;
}

.odkryv:nth-child(n + 5) {
	transition-delay: 280ms;
}

@media (prefers-reduced-motion: reduce) {
	.odkryv {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   19. Tisk
   ========================================================================== */

@media print {
	.hlavicka,
	.hamburger,
	.hero__foto,
	.kontakt__mapa,
	.pruvodce__ovladani {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
	}

	.sekce--brand,
	.sekce--inkoust,
	.paticka {
		background: #fff !important;
		color: #000 !important;
	}
}

/* ==========================================================================
   Complianz - cookie banner do brandu
   Complianz vkládá barvy inline přes proměnné, proto !important.
   Kontrast bílého textu na --c-brand (#0067FF) je 5,2:1.
   Plovoucí tlačítko "Spravovat souhlas" se skrývá, znovuotevření řeší odkaz
   "Nastavení cookies" v patičce.
   ========================================================================== */
#cmplz-manage-consent { display: none !important; }

#cmplz-cookiebanner-container .cmplz-cookiebanner {
	font-family: var(--f-text); color: var(--c-ink);
	border: 0; border-radius: 1rem;
	box-shadow: 0 18px 50px -18px rgba(21, 23, 28, .45);
}
#cmplz-cookiebanner-container .cmplz-title { font-family: var(--f-nadpis); font-weight: 800; }
#cmplz-cookiebanner-container .cmplz-btn {
	font-family: var(--f-nadpis); font-weight: 800; border-radius: 999px !important;
	border: 1px solid rgba(21, 23, 28, .25) !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: var(--c-brand-deep) !important; border-color: var(--c-brand-deep) !important; }
#cmplz-cookiebanner-container .cmplz-btn:focus-visible,
#cmplz-cookiebanner-container .cmplz-close:focus-visible { outline: 3px solid var(--c-brand); outline-offset: 2px; box-shadow: none; }
#cmplz-cookiebanner-container .cmplz-links .cmplz-link { color: var(--c-brand-deep) !important; }

/* ==========================================================================
   Contact Form 7. Vzhled drží .pole / .pole__vstup výš, tady jsou jen věci,
   které CF7 přidává navíc: obal pole, hláška u pole, hláška po odeslání,
   souhlas, honeypot, spinner.
   ⚠️ Chyba se rozlišuje tučným textem a tlustším rámečkem, ne jen barvou (WCAG 1.4.1).
   ========================================================================== */
.formular .wpcf7-form-control-wrap { display: block; }
.formular .hidden-fields-container { display: none; }
/* Honeypot (CF7 Apps) si pozici řeší inline; pojistka, aby nikdy nezabral buňku mřížky. */
.formular .cf7apps-honeypot-wrap { position: absolute; }
.formular .wpcf7-spinner { display: none; }
.formular .wpcf7-list-item { display: block; margin: 0; }

/* Souhlas: text uvnitř [acceptance]..[/acceptance], label je mřížka zaškrtávátko | text. */
.formular .souhlas { display: block; cursor: default; }
.formular .souhlas .wpcf7-list-item label {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .65rem;
	align-items: start;
	cursor: pointer;
}
.formular .souhlas a { color: var(--c-brand-deep); text-decoration: underline; }

/* Jen vlastní prvek pole - CF7 dává třídu i obalu souhlasu, kolem kterého by vznikla čára. */
.formular input.wpcf7-not-valid,
.formular select.wpcf7-not-valid,
.formular textarea.wpcf7-not-valid { border: 2px solid var(--c-varovne); }
.formular span.wpcf7-not-valid { border: 0; }
.formular .wpcf7-not-valid-tip {
	display: block;
	margin-top: .3rem;
	color: var(--c-varovne);
	font-size: var(--fs-sm);
	font-weight: 700;
}

/* Hláška po odeslání. Selektor s .wpcf7 je nutný: výchozí CSS CF7 dává hlášce žlutý
   rámeček se specificitou 0,3,1, kterou by jednodušší selektor nepřebil. */
.wpcf7 form.formular .wpcf7-response-output {
	margin: 0;
	padding: .95rem 1.15rem;
	border: 1px solid rgba(166, 48, 28, .3);
	border-radius: var(--r-sm);
	font-size: var(--fs-sm);
	background: rgba(166, 48, 28, .07);
	color: var(--c-varovne);
}
.wpcf7 form.formular.init .wpcf7-response-output,
.wpcf7 form.formular.resetting .wpcf7-response-output,
.wpcf7 form.formular.submitting .wpcf7-response-output { display: none; }
.wpcf7 form.formular.sent .wpcf7-response-output {
	background: rgba(31, 107, 58, .08);
	border-color: rgba(31, 107, 58, .3);
	color: var(--c-ok);
}

/* Zástupné tlačítko blokované mapy (Complianz): výchozí bílá na #808080 má 3,9:1. */
.cmplz-blocked-content-notice {
	background: var(--c-ink) !important;
	color: #fff !important;
}

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