/* Source Sans 3 a Creamy - staženo, resp. převzato, a hostováno u nás.
   Každý řez se stahuje zvlášť: při žádosti o víc vah naráz vrací Google
   variabilní font, který je zhruba o 60 kB větší.
   Creamy pochází z původního projektu smartold. */

@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(../fonts/source/source-sans-3-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: 'Source Sans 3';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(../fonts/source/source-sans-3-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: 'Source Sans 3';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url(../fonts/source/source-sans-3-400-italic-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: 'Source Sans 3';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url(../fonts/source/source-sans-3-400-italic-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: 'Source Sans 3';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(../fonts/source/source-sans-3-700-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: 'Source Sans 3';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(../fonts/source/source-sans-3-700-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: 'Creamy';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(../fonts/creamy/creamy.woff2) format('woff2'),
	     url(../fonts/creamy/creamy.woff) format('woff');
}

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(../fonts/roboto/roboto-700-latin.woff2) format('woff2');
}


:root {
	--oranzova: #f0964b;
	--tyrkys: #4dbdc6;
	--tyrkys-tmavy: #3fadb6;
	--tyrkys-svetly: #dcf2f4;
	--text: #181717;
	--obsah-sirka: 1140px;
	--obal-okraj: 34px;
	--hlavicka-vyska: 80px;
	--hlavicka-radek: 80px;
}

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

/* Odkazy na kotvy (menu, "najděte si termín") stránkou plynule sjedou.
   Kdo má v systému omezené animace, dostane skok jako dřív. */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

body {
	margin: 0;
	font: normal 16px/1.5 'Source Sans 3', sans-serif;
	color: var(--text);
	background: #fff;
}

.obal {
	/* Obsah je na velké obrazovce široký 1140 px jako v originále, okraje navíc */
	max-width: calc(var(--obsah-sirka) + 2 * var(--obal-okraj));
	margin: 0 auto;
	padding: 0 var(--obal-okraj);
}


/* ---------- hlavička ---------- */

/* Hlavička zůstává při rolování nahoře. `sticky` místo `fixed` proto, že si
   drží místo v toku - není potřeba dorovnávat odsazení těla stránky. */
.hlavicka {
	position: sticky;
	top: 0;
	z-index: 100;
	margin-bottom: 30px;
	border-bottom: 1px solid var(--oranzova);
}

/* Bez tohohle by cíl kotvy skončil schovaný pod pevnou hlavičkou - sekce
   z menu i box s údaji k převodu u objednávky (#bank-transfer-info). */
section[id],
article[id] {
	scroll-margin-top: calc(var(--hlavicka-vyska) + 20px);
}

.hlavicka-pruh {
	color: #fff;
	background-color: var(--tyrkys);
	background-image: url(../img/header-bg.png);
	background-repeat: repeat-x;
	background-position: top left;
	border-bottom: 1px solid #fff;
}

.hlavicka-pruh .obal {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 20px;
	min-height: var(--hlavicka-vyska);
	/* Vyšší hlavička přibírá jen dole, řádek s logem a menu zůstává stejný */
	padding-bottom: calc(var(--hlavicka-vyska) - var(--hlavicka-radek));
}

/* Logo sedí o kousek níž než na střed - stejně jako v originále. Při
   align-items: center se centruje včetně okraje, takže posun je půlka z toho. */
.logo {
	display: block;
	margin-top: 11px;
	line-height: 0;
}

.logo img {
	display: block;
	width: 230px;
	height: auto;
}


/* ---------- oranžová tlačítka ---------- */

/* Společný vzhled. `.registrace` si nechává vlastní umístění, velké tlačítko
   v úvodu jen přidá rozměry - ať se ten tvar nepíše dvakrát. */
.pilulka,
.registrace,
.prihlasit {
	display: inline-block;
	font-family: 'Creamy', sans-serif;
	line-height: 1.3;
	color: #fff;
	text-decoration: none;
	background: var(--oranzova);
	border: 1px solid var(--tyrkys-tmavy);
	border-radius: 100px;
	transition: background-color 0.2s, box-shadow 0.2s;
}

.pilulka:hover,
.pilulka:focus-visible,
.registrace:hover,
.registrace:focus-visible,
.prihlasit:hover,
.prihlasit:focus-visible {
	color: #fff;
	background: #504646;
	box-shadow: inset 0 -5px 0 -3px #423a3a;
}

.pilulka:active,
.registrace:active,
.prihlasit:active {
	background: #504646;
	box-shadow: inset 0 5px 4px -2px #352e2e;
}

/* Posun dolů přes `top`, ne přes `margin`: menu má řádkování na celou výšku
   pruhu, takže okraj navíc by pruh natáhl. Takhle se layout nemění. */
.registrace,
.prihlasit {
	position: relative;
	top: 2.5px;
	padding: 2.5px 18px 3.5px;
	font-size: 25px;
}

/* Stejný tvar jako registrace, obrácené barvy - hlavní je registrace. */
.prihlasit {
	display: none;
	color: var(--tyrkys-tmavy);
	background: #fff;
}

.ucet {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Průhledný okraj ukáže výplň pod sebou, takže má vždy barvu tlačítka -
   i po najetí myší, kdy výplň ztmavne.
   Svislé okraje tlačítek jsou změřené tak, aby text seděl na výšku uprostřed
   (Creamy má velké horní ascendenty, střed je mezi výškou "h" a "x"). */
.pilulka {
	padding: 5.5px 24px;
	font-size: 26px;
	border-color: transparent;
}

.pilulka-velka {
	padding: 8px 34px 8px;
	font-size: 34px;
}

/* Velké tlačítko z originálu (btn-xl) - "zobrazit všechny termíny",
   "zvolte si termín". Obyčejné tlačítko, ne pilulka - zaoblení jen 4 px. */
.tlacitko-xl {
	padding: 0 20px;
	font-size: 35px;
	line-height: 1.43;
	border-radius: 4px;
}


/* ---------- text přihlášení ---------- */

/* Kde se "přihlásit se" do hlavičky nevejde, je v ní pod tlačítkem registrace
   jen text, stejně jako v originále. Jen pro nepřihlášené. */
.prihlaseni {
	position: absolute;
	right: var(--obal-okraj);
	bottom: 3px;
	font-size: 13px;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
}

.prihlaseni span {
	text-decoration: underline;
}

/* Kde se vejde, je "přihlásit se" tlačítkem vedle registrace a text odpadne.
   Hranice jsou změřené: s menu potřebuje hlavička 1075 px obsahu, tj. okno
   1143 px + 17 px posuvníku Windows + rezerva. Bez menu (pod 1000 px) potřebuje
   403 px + 17 px posuvníku + rezerva. */
@media (min-width: 1165px), (min-width: 460px) and (max-width: 999px) {
	.prihlasit {
		display: inline-block;
	}

	.prihlaseni {
		display: none;
	}
}

/* Jinde je hlavička vyšší o místo na text. Přihlášený text nemá, jeho hlavička
   se nemění. */
@media (max-width: 460px), (min-width: 1000px) and (max-width: 1164px) {
	:root:has(.prihlaseni) {
		--hlavicka-vyska: 90px;
	}
}

/* Na nejmenší šířce hlavička odjíždí se stránkou, takže kotvy nemusí nechávat
   místo pod ní. Toast si pozici měří sám v toast.js. */
@media (max-width: 460px) {
	.hlavicka {
		position: static;
	}

	section[id],
	article[id] {
		scroll-margin-top: 20px;
	}

	/* Větší plocha pro prst, vzhled se nemění. Nahoru jen 4 px, nad textem je
	   tlačítko registrace. Dolů smí, pod hlavičkou je prázdné odsazení. */
	.prihlaseni::after {
		content: '';
		position: absolute;
		inset: -4px -15px -20px -10px;
	}
}


/* ---------- přihlášený ---------- */

/* Menu přiléhá k hlavičce, mezeru pod ní si proto bere samo. Je v toku stránky
   (ne zavěšené pod hlavičkou) - na mobilu má víc řádků a obsah pod ním by
   jinak zakrylo. */
.hlavicka:has(+ .uzivatel-pruh) {
	margin-bottom: 0;
}

.uzivatel-pruh {
	margin-bottom: 30px;
	font-size: 15px;
	font-style: italic;
	color: #fff;
}

/* Oranžová záložka jen za položkami, dole zaoblená, vpravo jako horní menu.
   Poslední položka končí na stejném místě jako "kontakt" - o kolik je
   záložka širší, o tolik přesahuje doprava. */
.uzivatel-pruh ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	width: fit-content;
	margin: 0 -8px 0 auto;
	padding: 8px;
	list-style: none;
	background: var(--oranzova);
	border-radius: 0 0 10px 10px;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

.uzivatel-pruh li {
	display: flex;
	align-items: center;
}

.uzivatel-pruh a {
	padding: 0 9px;
	color: #fff;
	text-decoration: none;
}

.uzivatel-pruh a:hover,
.uzivatel-pruh a:focus-visible {
	text-decoration: underline;
}

/* Mezi položkami tenká světlá čára, jako v původním webu */
.uzivatel-pruh li + li {
	border-left: 1px solid #ffcca2;
}

/* Nastavení a odhlášení mají ikonu, ukáže se jen pod 460 px. Hranice je
   jiná než u hlavičky (425 px), menu přihlášeného se zalamuje dřív. */
.uzivatel-pruh svg {
	display: none;
	width: 20px;
	height: 20px;
	vertical-align: -5px;
	fill: currentColor;
}

@media (max-width: 459px) {
	.uzivatel-popis {
		display: none;
	}

	.uzivatel-pruh svg {
		display: inline-block;
	}
}


/* ---------- úvodní blok ---------- */

/* Obrázek je na střed bloku, stejně jako v originále. Levou část má prázdnou
   jen s kruhy v pozadí, takže text leží na nich a postavy vyjdou napravo. */
.uvod {
	position: relative;
	margin-bottom: 40px;
	background: url(../img/hero-image-bg.png) no-repeat center;
}

.uvod-titulek {
	margin: 0;
	font-family: 'Creamy', sans-serif;
	font-size: 75px;
	font-weight: normal;
	line-height: 1.1;
	color: var(--oranzova);
}

.uvod-podtitulek {
	margin: 0;
	font-family: 'Creamy', sans-serif;
	font-size: 35px;
	font-weight: normal;
	line-height: 1.2;
	color: var(--tyrkys);
}

.uvod p {
	max-width: 400px;
	margin: 20px 0;
	font-size: 18px;
	font-style: italic;
}

.uvod .pilulka {
	margin-top: 10px;
}

/* Vpravo nahoře, v rohu obrázku je volno - napravo od pána, nad kabelkou.
   Text je v šířce bloku na dva řádky, přesah nahoru drží jeho spodek nad kabelkou. */
.uvod-voucher {
	position: absolute;
	top: -14px;
	right: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	width: 130px;
	font-family: 'Creamy', sans-serif;
	font-size: 28px;
	line-height: 1.1;
	color: var(--tyrkys);
	text-align: center;
	text-decoration: none;
}

.uvod-voucher img {
	display: block;
	width: 100%;
	height: auto;
}


/* ---------- nadpisy sekcí ---------- */

/* Nadpis podstránky vypadá stejně, jen stojí hned pod hlavičkou */
.nadpis-sekce,
.nadpis-stranky {
	margin: 70px 0 40px;
	font-family: 'Creamy', sans-serif;
	font-size: 50px;
	font-weight: normal;
	line-height: 1.1;
	text-align: center;
	color: var(--oranzova);
}

.nadpis-stranky {
	margin-top: 0;
}

/* Tlačítko zpět vlevo nad nadpisem podstránky */
.zpet {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
	padding: 5px 18px 6px 16px;
	font-size: 18px;
	color: var(--tyrkys-tmavy);
	text-decoration: none;
	background: #fff;
	border: 1px solid var(--tyrkys);
	border-radius: 100px;
	transition: background-color 0.2s, color 0.2s;
}

.zpet:hover,
.zpet:focus-visible {
	color: #fff;
	background: var(--tyrkys);
}

.zpet-sipka svg {
	display: block;
	width: 15px;
	height: 15px;
	fill: currentColor;
}

/* Malé natočené srdíčko mezi obrázkem a textem - kroky, média, ... */
.oddelovac {
	width: 10px;
	height: 10px;
	margin: 15px auto 8px;
	color: var(--tyrkys);
	rotate: 20deg;
}

.oddelovac svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: currentColor;
}


/* ---------- termíny ---------- */

/* Každá karta zabere šest řádků mřížky a přes subgrid je sdílí se sousedkami.
   Stejná část karet tak stojí vedle sebe ve stejné výšce bez JavaScriptu.

   Šířku karty (nejvýš 300 px) drží sloupec, ne karta. Firefox počítá výšku
   řádků subgridu podle šířky sloupce - když byl sloupec širší než karta,
   vyšel mu vyšší obrázek a pod skutečným zůstávala mezera (až 100 px).
   space-around postaví každou kartu doprostřed jejího dílu, jako dřív. */
.terminy {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 300px));
	justify-content: space-around;
	gap: 10px 16px;
	margin-bottom: 20px;
}

/* Když je karet míň, sloupce jsou jen pro ně - jinak by se držely vlevo */
.terminy:has(> .termin:only-child) {
	grid-template-columns: minmax(0, 300px);
}

@media (min-width: 1000px) {
	.terminy:has(> .termin:nth-child(2):last-child) {
		grid-template-columns: repeat(2, minmax(0, 300px));
	}

	.terminy:has(> .termin:nth-child(3):last-child) {
		grid-template-columns: repeat(3, minmax(0, 300px));
	}
}

/* Text karet je v systémovém písmu (Windows: Arial) - stejně jako v originále,
   který deklaruje Noto Sans, ale nenačítá ho. Malá šedá kurzíva ze Source
   Sans 3 vychází na Windows kostrbatě, systémové písmo je na to vyladěné. */
.termin {
	position: relative;
	display: grid;
	grid-row: span 6;
	grid-template-rows: subgrid;
	margin-bottom: 55px;
	padding: 15px;
	font-family: sans-serif;
	font-size: 14px;
	font-style: italic;
	line-height: 1.43;
	color: #6a6e6e;
	background: var(--tyrkys-svetly);
	border-radius: 10px;
}

.termin-nazev {
	margin-bottom: 5px;
	font-family: 'Creamy', sans-serif;
	font-size: 35px;
	line-height: 0.8;
	color: var(--tyrkys);
}

/* Ikona před názvem podle zaškrtnutí u termínu. Velikosti jako v originále,
   šálek kávy je tam větší než sklenička a kostka. */
.termin-ikona {
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-right: 2px;
	margin-left: 2px;
	color: var(--oranzova);
	vertical-align: 1px;
}

.termin-ikona-kava {
	width: 25px;
	height: 25px;
	vertical-align: -3px;
}

.termin-ikona svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.termin-cas {
	color: var(--tyrkys);
}

.termin-popisek {
	font-size: 12px;
}

.termin-foto {
	position: relative;
	margin-top: 5px;
	container-type: inline-size;
}

.termin-foto img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
}

/* Nápis přes fotku při akci Black Friday. Velikost se odvíjí od šířky fotky
   (cqw), takže sedí na každé šířce karty. Roboto je nejblíž původnímu nápisu
   z WhatsAppu. */
.black-friday {
	position: absolute;
	top: 50%;
	left: 50%;
	padding: 1.2cqw 3.5cqw;
	font-family: 'Roboto', sans-serif;
	font-size: 12cqw;
	font-style: normal;
	font-weight: bold;
	line-height: 1.15;
	text-transform: uppercase;
	white-space: nowrap;
	color: #ffd83a;
	background: rgba(32, 32, 32, 0.82);
	border-radius: 3cqw;
	translate: -50% -50%;
	rotate: -14deg;
	pointer-events: none;
}

/* Cena drží spodek řádku - ať stojí ve všech kartách v jedné linii,
   i když nad ní některá má slevu a jiná ne. */
.termin-cena {
	align-self: end;
}

.termin-volno strong {
	color: var(--oranzova);
}

/* Víc místa než v originále - cena má řádkování 0,7 a číslice by jinak
   sahaly skoro až do textu slevy. */
.termin-sleva {
	display: block;
	margin-bottom: 12px;
}

.termin-sleva-black-friday {
	font-size: 15px;
	color: #d41c1c;
}

.termin-mensi {
	font-size: 90%;
}

.termin-castka {
	font-family: 'Creamy', sans-serif;
	font-size: 50px;
	font-style: normal;
	line-height: 0.7;
	color: var(--tyrkys);
}

/* Tlačítko sedí na spodní hraně karty - napůl uvnitř, napůl venku.
   Jeho ::after se roztáhne přes celou kartu, takže klikací je celá. */
.termin-akce {
	justify-self: center;
	align-self: start;
	margin-top: 5px;
	margin-bottom: -40px;
	padding: 6px 20px 6px;
	font-size: 35px;
	line-height: 1;
}

.termin-akce::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 10px;
}

.terminy-vse {
	text-align: center;
}

.terminy-zadne {
	text-align: center;
	font-style: italic;
}

/* Pás dvou karet pod termíny. Barvy z tlačítka "přihlásit se", kroužek v barvě
   obláčků z obrázku v úvodu. */
.terminy-nabidka {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	margin-top: 30px;
}

.nabidka {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 20px;
	color: var(--text);
	text-decoration: none;
	background: #fff;
	border: 1px solid var(--tyrkys-tmavy);
	border-radius: 12px;
	transition: background-color 0.2s;
}

.nabidka:hover,
.nabidka:focus-visible {
	background: var(--tyrkys-svetly);
}

.nabidka-ikona {
	display: grid;
	flex: none;
	place-items: center;
	width: 56px;
	height: 56px;
	color: var(--tyrkys-tmavy);
	background: var(--tyrkys-svetly);
	border-radius: 50%;
	transition: background-color 0.2s;
}

.nabidka:hover .nabidka-ikona,
.nabidka:focus-visible .nabidka-ikona {
	background: #fff;
}

.nabidka-ikona svg {
	display: block;
	width: 28px;
	height: 28px;
	fill: currentColor;
}

/* O 4 px výš - naměřeno na pixelech. Creamy má nahoře velké volné místo, takže
   text jinak sedí pod středem karty. */
.nabidka-text {
	position: relative;
	top: -4px;
	font-size: 16px;
	font-style: italic;
	line-height: 1.3;
}

.nabidka-text strong {
	display: block;
	font-family: 'Creamy', sans-serif;
	font-size: 29px;
	font-style: normal;
	font-weight: normal;
	line-height: 1.2;
	color: var(--tyrkys-tmavy);
}

/* Na úzkém displeji karty pod sebou */
@media (max-width: 767px) {
	.terminy-nabidka {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}
}

/* Nabídka kolem "jak to funguje" - nadpis stejný jako u ostatních sekcí */
.nabidka-sekce .nadpis-sekce {
	margin-bottom: 12px;
}

.nabidka-sekce {
	text-align: center;
}

.nabidka-sekce p {
	margin: 0;
	font-size: 18px;
	font-style: italic;
}

.nabidka-obrazek {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 18px auto 15px;
}

.nabidka-sekce .tlacitko-xl {
	margin-top: 25px;
}


/* ---------- jak to funguje ---------- */

.kroky {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px 16px;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

.krok-ikona {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 180px;
	height: 180px;
	margin: 0 auto;
	color: var(--tyrkys);
	background: var(--tyrkys-svetly);
	border-radius: 50%;
}

/* Ikony mají plátno 640 × 640 a kresba z něj zabírá zhruba 80 %, při 100 px
   je tedy velká kolem 80 px jako v originále. Srdce, dotazník a sklenička
   mají plátno bez okrajů (výška 512), proto `.krok-ikona-plna` rovnou 80 px.
   Zvětšení při najetí myší je na obalu <span>, ne na SVG: animaci `scale`
   na SVG Chrome nepustí na grafickou kartu, překresluje ji snímek po snímku
   a kresba se přitom zarovnává na celé pixely - ikona se klepe.
   Firefox přichytává na celé pixely všechno, co není natočené, a ikona při
   zvětšování poskakuje nahoru a dolů. Natočení o 0,1° to vypne (změřeno,
   0,02° nestačí) a vidět není - okraj ikony posune o desetinu pixelu. */
.krok-obrazek {
	display: block;
	line-height: 0;
	rotate: 0.1deg;
	transition: scale 0.4s;
}

.krok-ikona:hover .krok-obrazek {
	scale: 1.125;
}

.krok-ikona svg {
	width: 100px;
	height: 100px;
	fill: currentColor;
}

.krok-ikona-plna svg {
	width: 80px;
	height: 80px;
}

.krok-ikona-srdce svg {
	rotate: -20deg;
}

/* Originál lámal řádky ručně přes <br>, tady to dělá text-wrap: balance */
.krok p {
	max-width: 260px;
	margin: 0 auto;
	text-wrap: balance;
}


/* ---------- média ---------- */

/* Stejný trik jako u termínů: šířku drží sloupec, space-around rozestaví. */
.videa {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 310px));
	justify-content: space-around;
	gap: 40px 16px;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

.video-odkaz {
	position: relative;
	display: block;
	line-height: 0;
}

.video-odkaz img {
	width: 100%;
	height: auto;
	border-radius: 8px;
}

/* Originál ukazoval tlačítko jen při najetí myší - na telefonu tedy vůbec.
   Tady je vidět pořád a při najetí se zvýrazní. */
.video-prehrat {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 60px;
	height: 60px;
	color: #fff;
	opacity: 0.8;
	translate: -50% -50%;
	transition: opacity 0.2s, scale 0.2s;
}

.video-prehrat svg {
	display: block;
	width: 100%;
	height: 100%;
}

.video-odkaz:hover .video-prehrat,
.video-odkaz:focus-visible .video-prehrat {
	opacity: 1;
	scale: 1.1;
}

.video p {
	max-width: 310px;
	margin: 0 auto;
	text-wrap: balance;
}


/* ---------- píše se o nás ---------- */

/* V originále pod 992 px všech pět log pod sebou. Tady se zalomí do řádků. */
.noviny {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

.noviny img {
	display: block;
}

/* Loga mají dost bílé kolem sebe, srdíčko proto hned pod nimi */
.noviny .oddelovac {
	margin-top: 0;
}

.noviny p {
	margin: 0;
}

.noviny-odkaz {
	color: inherit;
	text-decoration: none;
}

.noviny-odkaz:hover p,
.noviny-odkaz:focus-visible p {
	text-decoration: underline;
}


/* ---------- modrý box: naše výsledky, kontakty ---------- */

/* Světle tyrkysový box se třemi položkami (v originále module-blue-box) */
.modry-box {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px 0;
	margin: 0;
	padding: 25px 0;
	list-style: none;
	font-style: italic;
	text-align: center;
	color: var(--tyrkys);
	background: var(--tyrkys-svetly);
	border-radius: 20px;
}

.modry-box > li {
	position: relative;
	padding: 0 15px;
}

/* Jen dvě položky (být náhradník: telefon a e-mail) */
.modry-box-dva {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Bílé srdíčko na předělu mezi položkami, jako v originále */
.modry-box-srdce {
	position: absolute;
	top: 50%;
	left: 0;
	width: 20px;
	height: 20px;
	color: #fff;
	translate: -50% -50%;
	rotate: 20deg;
}

.modry-box-srdce svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.vysledek-cislo {
	font-family: 'Creamy', sans-serif;
	font-size: 80px;
	font-style: normal;
	line-height: 1.2;
	color: var(--oranzova);
}

.kontakty {
	color: #4d4d4d;
}

.kontakty strong {
	font-size: 18px;
}

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

.kontakty a:hover,
.kontakty a:focus-visible {
	color: var(--oranzova);
}

/* Šedý jako patička, při najetí barva Facebooku */
.kontakty-facebook {
	display: block;
	width: fit-content;
	margin: 30px auto 0;
	color: #a8a8a8;
	transition: color 0.2s;
}

.kontakty-facebook:hover,
.kontakty-facebook:focus-visible {
	color: #0866ff;
}

.kontakty-facebook svg {
	display: block;
	width: auto;
	height: 36px;
	fill: currentColor;
}

.kontakt-ikona {
	display: block;
	width: 40px;
	height: 40px;
	margin: 15px auto 20px;
	color: var(--tyrkys);
}

.kontakt-ikona svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: currentColor;
}


/* ---------- lidé: recenze a dream team ---------- */

/* Karty s kulatou fotkou, srdíčkem, jménem a textem - recenze i tým */
.osoby {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px 16px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-style: italic;
	text-align: center;
}

/* Recenze nemají nadpis, odstup nahoře proto drží sekce - stejný jako nad nadpisy */
.recenze-sekce {
	margin-top: 70px;
}

.osoby img {
	display: block;
	margin: 0 auto;
	border-radius: 50%;
}

/* Klikací fotka - odkaz jen v její velikosti a kulatý, ať mu sedí i rámeček
   při ovládání klávesnicí */
.osoba-foto {
	display: block;
	width: fit-content;
	margin: 0 auto;
	border-radius: 50%;
	transition: opacity 0.2s;
}

.osoba-foto:hover {
	opacity: 0.85;
}

.osoba-jmeno {
	display: block;
	margin-bottom: 5px;
	font-size: 18px;
	font-weight: normal;
	color: var(--tyrkys);
}

.tym-sekce .osoba-jmeno {
	font-weight: bold;
}

.osoby p {
	max-width: 260px;
	margin: 0 auto;
	text-wrap: balance;
}

.osoby p a {
	color: var(--tyrkys-tmavy);
}

.osoby p a:hover,
.osoby p a:focus-visible {
	color: var(--oranzova);
}

/* Poslední recenze zve návštěvníka - oranžová místo tyrkysové */
.osoba-vy .oddelovac,
.osoba-vy .osoba-jmeno {
	color: var(--oranzova);
}

/* Moderátoři pohromadě - fotky se překrývají, první je navrchu jako
   v originále, jen méně (originál -20 px). Bílý lem je oddělí. */
.tym-skupina {
	margin-top: 50px;
	font-style: italic;
	text-align: center;
}

.tym-skupina-fotky {
	display: flex;
	justify-content: center;
}

.tym-skupina-fotky img {
	position: relative;
	border-radius: 50%;
	box-shadow: 0 0 0 3px #fff;
}

.tym-skupina-fotky img + img {
	margin-left: -13px;
}

.tym-skupina-fotky img:nth-child(1) {
	z-index: 2;
}

.tym-skupina-fotky img:nth-child(2) {
	z-index: 1;
}

.tym-skupina p {
	max-width: 600px;
	margin: 0 auto;
	text-wrap: balance;
}


/* ---------- o speed datingu ---------- */

/* Text stejného druhu jako v úvodu - kurzíva, 18 px (na malém displeji 16) */
.o-nas {
	text-align: center;
}

.o-nas-obrazek {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto 20px;
}

.o-nas p {
	max-width: 760px;
	margin: 20px auto 0;
	font-size: 18px;
	font-style: italic;
}

.o-nas .tlacitko-xl {
	margin-top: 40px;
}


/* ---------- stránka s celou recenzí ---------- */

.recenze-clanek-foto {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 20px;
}

.recenze-clanek-obsah {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
	gap: 30px;
	margin: 30px 0 70px;
}

.recenze-dopis {
	padding: 25px 30px;
	font-size: 18px;
	background: var(--tyrkys-svetly);
	border-radius: 20px;
}

.recenze-dopis > img {
	display: block;
	margin-bottom: 15px;
}

.recenze-dopis p {
	margin: 0 0 1em;
}

.recenze-dopis .recenze-podpis {
	margin: 25px 0 0;
	font-family: 'Creamy', sans-serif;
	font-size: 35px;
	line-height: 1.1;
	color: var(--tyrkys);
}

.recenze-clanek-portret {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	border-radius: 20px;
}


/* ---------- být náhradník ---------- */

/* Texty a pořadí z původního webu: nadpis, podnadpis, výzva, kontakty, odkaz
   na termíny. Užší sloupec na střed, ať se odstavec dobře čte. */
.nahradnik {
	max-width: 760px;
	margin: 0 auto 70px;
	text-align: center;
}

.nahradnik-podnadpis {
	margin: -25px 0 20px;
	font-family: 'Creamy', sans-serif;
	font-size: 35px;
	font-weight: normal;
	line-height: 1.2;
	color: var(--tyrkys);
}

.nahradnik p {
	margin: 0 0 35px;
	font-size: 18px;
}

.nahradnik .modry-box {
	margin-bottom: 40px;
}


/* ---------- okno s videem nebo obrázkem ---------- */

/* Vytváří ho www/js/okno.js. <dialog> obstará prohlížeč sám: vrstvu nad
   stránkou, ztmavení pozadí, zavření klávesou Esc i návrat fokusu na odkaz. */
.okno {
	max-width: calc(100% - 30px);
	max-height: none;
	padding: 0;
	overflow: visible;
	background: transparent;
	border: 0;
}

.okno::backdrop {
	background: rgba(0, 0, 0, 0.8);
}

/* Šířka videa hlídá i výšku okna, aby se vešlo i na telefon naležato */
.okno-video {
	width: min(960px, 100% - 30px, (100dvh - 100px) * 16 / 9);
}

.okno-zavrit {
	display: block;
	margin: 0 0 6px auto;
	padding: 0 4px;
	font: 44px/1 sans-serif;
	color: #fff;
	cursor: pointer;
	background: none;
	border: 0;
	opacity: 0.8;
}

.okno-zavrit:hover,
.okno-zavrit:focus-visible {
	opacity: 1;
}

.okno-video .okno-obsah {
	aspect-ratio: 16 / 9;
	background: #000;
}

.okno-obsah iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.okno-obsah img {
	display: block;
	max-width: 100%;
	max-height: calc(100dvh - 100px);
}

/* ---------- horní menu ---------- */

.menu {
	position: relative;
	top: 2.5px;
	margin-left: auto;
}

.menu ul {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

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

/* Srdíčko mezi položkami. Za poslední nepatří, proto se schová. */
.srdce {
	display: block;
	width: 11px;
	height: 11px;
	opacity: 0.85;
	transform: rotate(20deg);
}

.srdce svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.menu li:last-child .srdce {
	display: none;
}

.menu a {
	display: block;
	padding: 0 9px;
	font-size: 15px;
	font-style: italic;
	line-height: var(--hlavicka-radek);
	color: #fff;
	text-decoration: none;
}

.menu a:hover,
.menu a:focus-visible {
	text-decoration: underline;
}


/* ---------- okno s chybou formuláře ---------- */

/* Okno kreslí formsvalidate.js (Nette), když chybí povinné pole. Přidává si
   k němu vlastní styl (černý rámeček) - selektory s "dialog"
   mají vyšší váhu, takže vyhrají tyhle. Text a tlačítko "OK" dodává Nette. */
dialog.netteFormsModal {
	max-width: min(380px, calc(100% - 30px));
	margin: auto;
	padding: 28px 30px 24px;
	font-size: 17px;
	line-height: 1.5;
	color: var(--text);
	text-align: center;
	background: #fff;
	border: 3px solid #090a23;
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

dialog.netteFormsModal::backdrop {
	background: rgba(0, 0, 0, 0.45);
}

/* Tlačítko "OK" oranžové jako ostatní tlačítka webu */
dialog.netteFormsModal button {
	padding: 3px 34px 2px;
	font: 24px/1.3 'Creamy', sans-serif;
	color: #fff;
	cursor: pointer;
	background: var(--oranzova);
	border: 0;
	border-radius: 100px;
	transition: background-color 0.2s;
}

dialog.netteFormsModal button:hover {
	background: #504646;
}

dialog.netteFormsModal button:focus-visible {
	outline: 3px solid rgba(240, 150, 75, 0.4);
	outline-offset: 2px;
}


/* ---------- bublina u pole formuláře ---------- */

/* Hláška pod polem se šipkou nahoru k němu. Stejně vypadá z JavaScriptu
   (formular.js) i ze serveru. */
.bublina {
	position: relative;
	align-self: flex-start;
	display: block;
	width: fit-content;
	max-width: 100%;
	margin-top: 10px;
	padding: 7px 12px;
	font-size: 15px;
	font-style: normal;
	line-height: 1.35;
	color: #fff;
	background: #2a686d;
	border-radius: 8px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
	animation: bublina-objev 0.15s ease-out;
}

/* Odkaz v hlášce ze serveru, třeba "zaslat heslo" u už registrovaného e-mailu */
.bublina a {
	color: inherit;
	text-decoration: underline;
}

.bublina::before {
	content: '';
	position: absolute;
	top: -5px;
	left: 18px;
	width: 10px;
	height: 10px;
	background: inherit;
	border-radius: 2px 0 0 0;
	rotate: 45deg;
}

@keyframes bublina-objev {
	from {
		opacity: 0;
		translate: 0 -4px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bublina {
		animation: none;
	}
}


/* ---------- toast (hláška po přesměrování) ---------- */

/* Věrně podle původního webu (noty, motiv relax): šedý proužek se čtvercem
   s ikonou vlevo, přijede zprava s odskokem, po 8 s nebo po kliknutí odjede
   zpět doprava (toast.js přidá .toast-pryc). Písmo je systémové jako v kartách
   termínů - originál ho měl taky a malý šedý text v něm na Windows vypadá líp. */
/* Pod hlavičkou s mezerou 20 px, i když se stránka posune - hlavička zůstává
   nahoře taky. 2 px navíc jsou její spodní rámečky. Když z hlavičky něco visí
   (menu přihlášeného), posune toast níž toast.js. */
.toasty {
	position: fixed;
	top: calc(var(--hlavicka-vyska) + 2px + 20px);
	right: 20px;
	z-index: 1000;
	width: 310px;
	max-width: calc(100% - 10px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.toast {
	position: relative;
	display: flex;
	margin-bottom: 1px;
	overflow: hidden;
	background: #f2f2f2;
	color: #9e9e9e;
	font: 12px/1.2 sans-serif;
	text-align: center;
	cursor: pointer;
	animation: toast-prijezd 1s both;
}

.toast-pryc {
	animation: toast-odjezd 1s forwards;
}

.toast-ikona {
	display: grid;
	flex: none;
	place-items: center;
	width: 50px;
	height: 50px;
	color: #fff;
}

.toast-ok .toast-ikona {
	background: #74c054;
}

.toast-info .toast-ikona {
	background: #3498db;
}

/* Chyba jako v originále (noty, relax): červená a křížek v kroužku */
.toast-chyba .toast-ikona {
	background: #ef4836;
}

.toast-ikona svg {
	width: 28px;
	height: 28px;
}

.toast-text {
	display: flex;
	align-items: center;
	min-height: 50px;
	padding: 0 20px 0 10px;
}

/* Křížek se ukáže až při najetí myší, zavírá ale klik kamkoli na toast */
.toast-zavrit {
	position: absolute;
	top: 3px;
	right: 4px;
	width: 18px;
	height: 18px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	opacity: 0;
	transition: opacity .4s;
}

.toast:hover .toast-zavrit,
.toast-zavrit:focus-visible {
	opacity: 1;
}

.toast-zavrit svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* bounceInRight a bounceOutRight z animate.css, které používal originál */
@keyframes toast-prijezd {
	0% {
		opacity: 0;
		translate: 3000px 0;
	}

	60% {
		opacity: 1;
		translate: -25px 0;
	}

	75% {
		translate: 10px 0;
	}

	90% {
		translate: -5px 0;
	}

	100% {
		translate: 0 0;
	}
}

@keyframes toast-odjezd {
	20% {
		opacity: 1;
		translate: -20px 0;
	}

	100% {
		opacity: 0;
		translate: 2000px 0;
	}
}

@keyframes toast-zmizeni {
	to {
		opacity: 0;
	}
}

@media (max-width: 599px) {
	.toasty {
		right: 5px;
	}
}

/* Bez pohybu se jen objeví a zase zmizí - na stejném místě a ve stejnou dobu */
@media (prefers-reduced-motion: reduce) {
	.toast {
		animation: none;
	}

	.toast-pryc {
		animation: toast-zmizeni .3s forwards;
	}
}


/* ---------- patička ---------- */

.paticka {
	margin: 100px 0 50px;
	font-size: 16px;
	font-style: italic;
	text-align: center;
	color: #a8a8a8;
}

.paticka a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s;
}

.paticka a:hover,
.paticka a:focus-visible {
	color: var(--oranzova);
}

/* Bílá šipka v šedém kolečku, při najetí oranžovém jako ostatní tlačítka */
.paticka-nahoru {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100px;
	height: 100px;
	background: #a8a8a8;
	border-radius: 50%;
	transition: background-color 0.2s;
}

/* Šipka zůstává bílá i při najetí - obecné pravidlo patičky by ji obarvilo
   oranžově a na oranžovém pozadí by zmizela */
.paticka .paticka-nahoru,
.paticka .paticka-nahoru:hover,
.paticka .paticka-nahoru:focus-visible {
	color: #fff;
}

.paticka-nahoru:hover,
.paticka-nahoru:focus-visible {
	background: var(--oranzova);
}

/* Tučnější přes obrys ve stejné barvě - přidá 14 jednotek na každou stranu,
   proto overflow: visible, jinak by se okraje šipky ořízly */
.paticka-nahoru svg {
	display: block;
	width: auto;
	height: 48px;
	overflow: visible;
	fill: currentColor;
	stroke: currentColor;
	stroke-width: 28;
	stroke-linejoin: round;
}

.paticka-menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.paticka-menu li {
	display: flex;
	align-items: center;
}

.paticka-menu a {
	display: block;
	padding: 10px 15px;
}

.paticka-menu .srdce {
	width: 10px;
	height: 10px;
}

.paticka-menu li:last-child .srdce {
	display: none;
}

/* Logo z hlavičky převedené na šedou: brightness(0) z něj udělá černou
   siluetu a průhlednost 0,34 z ní na bílém pozadí udělá #a8a8a8 */
.paticka-logo {
	display: block;
	width: 184px;
	height: auto;
	margin: 30px auto;
}

.paticka-logo {
	filter: brightness(0);
	opacity: 0.34;
}

/* Přihlášení, registrace, zapomenuté heslo - místo hlavičky jen logo na středu
   nad formulářem. Filtr z něj udělá černou siluetu a tu přebarví na tyrkysovou
   #4dbdc6 (barva hlavičky webu). Platí pro loga všech webů. */
.jen-logo {
	padding: 40px 15px 25px;
	line-height: 0;
	text-align: center;
}

.jen-logo img {
	width: 184px;
	height: auto;
	filter: brightness(0) invert(62.5%) sepia(42%) saturate(475%) hue-rotate(135.9deg) brightness(0.96);
}

.paticka-copy {
	margin: 0;
	font-size: 14px;
}

/* Ručička pod copyrightem - mezera 30 px jako v původním webu */
.paticka-loudmark {
	display: block;
	margin: 30px auto 0;
}


/* ---------- lišta se souhlasem s cookies ---------- */

/* Jen pro návštěvníky z reklamy (Accessory\Reklama). Poslední prvek stránky:
   sticky ji drží dole na obrazovce, na konci stránky se usadí pod patičku
   a nic nepřekryje. Obě volby stejně velké - odmítnout jde stejně snadno. */
.souhlas-lista {
	position: sticky;
	bottom: 0;
	z-index: 50;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 30px;
	padding: 15px 16px;
	color: var(--text);
	background: #fff;
	border-top: 3px solid var(--tyrkys);
	box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.12);
}

.souhlas-lista p {
	max-width: 620px;
	margin: 0;
	font-size: 16px;
	line-height: 1.4;
}

.souhlas-lista-volby {
	display: flex;
	gap: 12px;
}

/* Tlačítka voleb - v liště i na stránce /cookies (změna souhlasu) */
.souhlas-lista-volby .pilulka {
	min-width: 150px;
	font-size: 22px;
	cursor: pointer;
}

/* Bílá s tyrkysovým rámečkem, při najetí stejně jako oranžová */
.souhlas-lista-volby .souhlas-lista-ne {
	color: var(--tyrkys-tmavy);
	background: #fff;
	border-color: var(--tyrkys);
}

.souhlas-lista-volby .souhlas-lista-ne:hover,
.souhlas-lista-volby .souhlas-lista-ne:focus-visible {
	color: #fff;
	background: #504646;
	border-color: var(--tyrkys-tmavy);
}

/* Odkaz na zásady - podtržený, ať je poznat i bez barvy */
.souhlas-lista a {
	color: var(--tyrkys-tmavy);
	text-underline-offset: 2px;
}

@media (max-width: 575px) {
	.souhlas-lista {
		text-align: center;
	}

	.souhlas-lista-volby {
		width: 100%;
	}

	.souhlas-lista-volby .pilulka {
		min-width: 0;
		flex: 1;
	}
}


/* ---------- malé displeje ---------- */

/* Pod tímhle zlomem se menu schová úplně - stejně jako v původním webu.
   Je to jednostránkový web, odkazy míří na kotvy téže stránky.
   Na užším okně s menu je v hlavičce těsno - na 1000 px s posuvníkem Windows
   zbývá 915 px obsahu a hlavička by potřebovala 952 px. Položky menu proto
   do 1164 px dostanou užší rozestupy. */

@media (min-width: 1000px) and (max-width: 1164px) {
	.menu a {
		padding: 0 5.5px;
	}

	/* Roh obrázku je tady úzký. Obrázek jde o kousek doleva, víc ne - vlevo by
	   narazil na text.
	   Zatím vypnuté, voucher v úvodu je zakomentovaný v _uvod.latte.
	.uvod {
		background-position: calc(50% - 20px) center;
	}
	*/

	.uvod-voucher {
		top: 12px;
		gap: 2px;
		width: 90px;
		font-size: 20px;
	}
}

@media (max-width: 999px) {
	:root {
		--obal-okraj: 15px;
	}

	.logo img {
		width: 150px;
	}

	.ucet {
		margin-left: auto;
	}

	.registrace,
	.prihlasit {
		padding: 3px 16px 3.5px;
		font-size: 25px;
	}

	.menu {
		display: none;
	}

	/* Vedle textu už není místo. Obrázek se pak ani nestahuje a obsah se
	   srovná na střed - každý prvek zvlášť, jako v originále. Dlouhý odstavec
	   tak vyplní šířku a čte se normálně zleva, krátký stojí uprostřed. */
	.uvod {
		display: flex;
		flex-direction: column;
		align-items: center;
		background: none;
	}

	.uvod p {
		max-width: none;
		font-size: 16px;
	}

	.nabidka-text strong {
		font-size: 25px;
	}

	.o-nas p {
		font-size: 16px;
	}

	.uvod-titulek {
		font-size: 50px;
	}

	.uvod-podtitulek {
		font-size: 28px;
	}

	/* Postavy tu nejsou, voucher jde pod "najděte si termín" */
	.uvod-voucher {
		position: static;
		flex-direction: row;
		gap: 8px;
		width: auto;
		margin-top: 22px;
	}

	.uvod-voucher img {
		width: 96px;
	}

	.pilulka-velka {
		padding: 6.5px 26px;
		font-size: 28px;
	}

	.nadpis-sekce,
	.nadpis-stranky {
		font-size: 40px;
	}

	.recenze-clanek-obsah {
		grid-template-columns: minmax(0, 1fr);
	}

	.recenze-dopis {
		padding: 20px;
		font-size: 16px;
	}

	.recenze-dopis .recenze-podpis {
		font-size: 28px;
	}

	/* Při 35 px by se na telefon nevešlo */
	.tlacitko-xl {
		font-size: 28px;
	}

	.terminy {
		grid-template-columns: repeat(2, minmax(0, 300px));
	}

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

	.videa {
		grid-template-columns: repeat(2, minmax(0, 310px));
	}

	/* Položky pod sebou, srdíčko se přesune doprostřed mezery mezi nimi */
	.modry-box,
	.modry-box-dva {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 50px;
	}

	.modry-box-srdce {
		top: -25px;
		left: 50%;
	}

	/* Třetí video by viselo samo vlevo - přes oba sloupce a doprostřed */
	.video:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		justify-self: center;
		width: 100%;
		max-width: 310px;
	}
}

@media (max-width: 575px) {
	.terminy {
		grid-template-columns: minmax(0, 300px);
	}

	.kroky,
	.osoby {
		grid-template-columns: minmax(0, 1fr);
	}

	.videa {
		grid-template-columns: minmax(0, 310px);
	}
}