/* 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');
}


:root {
	--oranzova: #f0964b;
	--tyrkys: #4dbdc6;
	--tyrkys-tmavy: #3fadb6;
	--tyrkys-svetly: #dcf2f4;
	--text: #181717;
	--obsah-sirka: 1140px;
	--obal-okraj: 34px;
	--hlavicka-vyska: 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 z menu skončil schovaný pod pevnou hlavičkou. */
section[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);
}

/* 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;
}


/* ---------- záložka přihlášení ---------- */

/* Visí zespodu z hlavičky pod tlačítkem registrace, takže hlavičku nezvětšuje.
   Jen pro nepřihlášené. `top` ji posune pod oranžovou linku hlavičky. */
.prihlaseni {
	position: absolute;
	top: calc(100% + 2px);
	right: var(--obal-okraj);
	padding: 7px 17px 7px;
	font-size: 15px;
	font-style: italic;
	color: #3b4141;
	text-decoration: none;
	white-space: nowrap;
	background: var(--tyrkys-svetly);
	border: 1px solid var(--tyrkys);
	border-top: 0;
	border-radius: 0 0 10px 10px;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
	transition: background-color 0.2s;
}

.prihlaseni span {
	text-decoration: underline;
}

.prihlaseni:hover,
.prihlaseni:focus-visible {
	background: #c6e9ed;
}

/* Kde se vejde, je "přihlásit se" tlačítkem vedle registrace a záložka 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) stačí
   okno 403 px - telefony posuvník nemají. Jinde zůstává záložka. */
@media (min-width: 1165px), (min-width: 410px) and (max-width: 999px) {
	.prihlasit {
		display: inline-block;
	}

	.prihlaseni {
		display: none;
	}
}


/* ---------- 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é jako záložka přihlášení) - 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;
}


/* ---------- ú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. Systémové písmo se širokými tvary
   jako v původním obrázku, tenký obrys ho ještě o kousek ztuční. */
.black-friday {
	position: absolute;
	top: 50%;
	left: 50%;
	padding: 1.2cqw 3.5cqw;
	font-family: sans-serif;
	font-size: 10cqw;
	font-style: normal;
	font-weight: bold;
	line-height: 1.15;
	-webkit-text-stroke: 0.02em currentColor;
	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-vyska);
	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;
}

.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, záložka), 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;
}

.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,
.jen-logo img {
	filter: brightness(0);
	opacity: 0.34;
}

/* Přihlášení, registrace, zapomenuté heslo - místo hlavičky jen šedé logo
   (stejné jako v patičce) na středu nad formulářem */
.jen-logo {
	padding: 40px 15px 25px;
	line-height: 0;
	text-align: center;
}

.jen-logo img {
	width: 184px;
	height: auto;
}

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


/* ---------- 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ý a shora do něj visí záložka přihlášení.
	   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: 7px 16px 6px;
		font-size: 19px;
	}

	.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);
	}
}