/* ---------------------------------------------------------------------------
   SP Power — komponenty
   Tlačítka, pilulky, karty, štítky. Rozšiřuje css/base.css.
   --------------------------------------------------------------------------- */

/* --- Tlačítka ------------------------------------------------------------- */

/* Návrh má tlačítko 55 px vysoké a 274 px široké při textu 190 px — tedy text
   16/30 a vodorovné odsazení 42 px. Výška vyjde 30 + 2 × 11,5 + 2 × 1 px obrys.
   Shodné na všech obrazovkách návrhu (kariéra, homepage, výpis realizací). */
.sp-tlacitko {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-mezera-3);
	padding: 11.5px 42px;
	border-radius: 999px;
	font-size: var(--sp-text-velikost);
	font-weight: 600;
	line-height: 1.875;
	border: 1px solid transparent;
	transition: background var(--sp-prechod), color var(--sp-prechod), border-color var(--sp-prechod);
	margin-top: var(--sp-mezera-4);
}

/* obrysové na světlém pozadí — „Další realizace společnosti" */
.sp-tlacitko--obrys {
	border-color: var(--sp-modra);
	color: var(--sp-modra);
}

.sp-tlacitko--obrys:hover,
.sp-tlacitko--obrys:focus-visible {
	background: var(--sp-modra);
	color: var(--sp-bila);
}

/* Na modrém pásu je „Další realizace společnosti" JEDINÉ obrysové tlačítko
   návrhu — a návrh mu dává BÍLOU VÝPLŇ, ne průhlednou (kariéra, Rectangle 4
   na y 5680,6: fill #ffffff, obrys 1 px #032282, text #032282). Bez výplně
   splyne modrý obrys i modrý text s pozadím a tlačítko zmizí.

   Průhledná varianta na modré je `--obrys-bily` výše; tahle je plná, proto
   se sem nedá použít. */
.sp-blok--modra .sp-tlacitko--obrys {
	background: var(--sp-bila);
}

/* výchozí hover (modrá výplň) by tlačítko na modré znovu schoval — na modrém
   pásu se proto přisvětluje směrem od bílé, text zůstává modrý */
.sp-blok--modra .sp-tlacitko--obrys:hover,
.sp-blok--modra .sp-tlacitko--obrys:focus-visible {
	background: var(--sp-svetla);
	color: var(--sp-modra);
}

/* obrysové na modrém pozadí */
.sp-tlacitko--obrys-bily {
	border-color: var(--sp-bila);
	color: var(--sp-bila);
}

.sp-tlacitko--obrys-bily:hover,
.sp-tlacitko--obrys-bily:focus-visible {
	background: var(--sp-bila);
	color: var(--sp-modra);
}

/* plné žluté — hlavní výzva k akci */
.sp-tlacitko--zlute {
	background: var(--sp-zluta);
	border-color: var(--sp-zluta);
	color: var(--sp-modra);
}

.sp-tlacitko--zlute:hover,
.sp-tlacitko--zlute:focus-visible {
	background: var(--sp-zluta-tmava);
	border-color: var(--sp-zluta-tmava);
}

/* kulaté tlačítko se šipkou — scroll dolů v hero, přepínač jazyka */
.sp-kolecko {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 55px;
	height: 55px;
	border-radius: 50%;
	border: 1px solid var(--sp-obrys-bily);
	color: var(--sp-bila);
	font-size: var(--sp-menu);
	font-weight: 600;
	transition: background var(--sp-prechod), color var(--sp-prechod);
}

.sp-kolecko:hover,
.sp-kolecko:focus-visible {
	background: var(--sp-bila);
	color: var(--sp-modra);
}

/* --- Pilulky (filtr kategorií) -------------------------------------------- */

.sp-pilulky {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-mezera-5);
	list-style: none;
}

/* Pilulka je v návrhu 41 px vysoká, písmo 16 — tedy stejně velká jako
   `.sp-pilulka--velka` níž. Základ používá jedině filtr realizací
   (`sp_filtr_kategorii()`); `--velka` si odsazení i velikost písma přebíjí
   sama, takže změna základu na ni nedosáhne.
   Naměřeno v návrhu: „Vše" 96 px, „Výroba a prefabrikace" 242 px — z toho
   vychází vodorovné odsazení 34 px. */
.sp-pilulka {
	display: inline-flex;
	align-items: center;
	padding: var(--sp-mezera-2) 34px;
	border-radius: 999px;
	border: 1px solid var(--sp-modra);
	color: var(--sp-modra);
	font-size: var(--sp-text-velikost);
	font-weight: 600;
	line-height: 1.44;
	transition: background var(--sp-prechod), color var(--sp-prechod), border-color var(--sp-prechod);
}

.sp-pilulka:hover,
.sp-pilulka:focus-visible {
	background: var(--sp-modra);
	color: var(--sp-bila);
}

.sp-pilulka--aktivni,
.sp-pilulka--aktivni:hover {
	background: var(--sp-zluta);
	border-color: var(--sp-zluta);
	color: var(--sp-modra);
}

/* varianta na modrém pozadí — v návrhu je filtr nad výpisem realizací */
.sp-sekce--modra .sp-pilulka {
	border-color: var(--sp-bila);
	color: var(--sp-bila);
}

.sp-sekce--modra .sp-pilulka:hover,
.sp-sekce--modra .sp-pilulka:focus-visible {
	background: var(--sp-bila);
	color: var(--sp-modra);
}

.sp-sekce--modra .sp-pilulka--aktivni,
.sp-sekce--modra .sp-pilulka--aktivni:hover {
	background: var(--sp-zluta);
	border-color: var(--sp-zluta);
	color: var(--sp-modra);
}

/* --- Štítek kategorie nad fotkou ------------------------------------------ */

.sp-stitek {
	display: inline-flex;
	align-items: center;
	padding: var(--sp-mezera-2) var(--sp-mezera-5);
	border-radius: 999px;
	/* Návrh má štítek jako tmavé sklo nad fotkou, ne bílou pilulku: barva
	   uvnitř se mění s fotkou pod ním (naměřeno na kartách výpisu). */
	background: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	color: var(--sp-bila);
	font-size: var(--sp-text-karty);
	font-weight: 600;
	line-height: 1;
	border: 1px solid var(--sp-bila);
}

/* --- Karta realizace ------------------------------------------------------ */

/* Pozadí karty sedí na těle, ne na kartě: ořezaný roh nad fotkou má
   v návrhu prosvítat POZADÍM STRÁNKY (bílým na světlé sekci, modrým na
   modré). Kdyby barvu nesla celá karta, prosvítala by levandulová. */
.sp-karta {
	display: flex;
	flex-direction: column;
	border-radius: var(--sp-zaobleni);
	overflow: hidden;
}

.sp-karta__telo {
	background: var(--sp-svetla);
	transition: background var(--sp-prechod);
}

.sp-karta:hover .sp-karta__telo,
.sp-karta:focus-visible .sp-karta__telo {
	background: var(--sp-zluta);
}

/* Ořezaný roh drží obal, ne fotka: transform při zoomu by zvětšil i ořez
   a roh by při najetí uhýbal. clip-path zaoblení přebíjí, proto levý horní
   roh řeší až `.sp-karta` svým overflow. */
.sp-karta__foto {
	position: relative;
	overflow: hidden;
	clip-path: var(--sp-orez-vpravo);
}

.sp-karta__foto img {
	display: block;
	width: 100%;
	aspect-ratio: 365 / 345;
	object-fit: cover;
	transition: transform var(--sp-prechod-foto);
}

.sp-karta:hover .sp-karta__foto img,
.sp-karta:focus-visible .sp-karta__foto img {
	transform: scale(1.05);
}

.sp-karta__stitek {
	position: absolute;
	left: var(--sp-mezera-5);
	bottom: var(--sp-mezera-5);
	z-index: 1;
}

.sp-karta__telo {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: var(--sp-mezera-5);
	padding: var(--sp-mezera-5);
}

.sp-karta__nazev {
	font-size: var(--sp-titulek-karty);
	line-height: 1.4;
	font-weight: 700;
	color: var(--sp-modra);
}

.sp-karta:hover .sp-karta__nazev,
.sp-karta:focus-visible .sp-karta__nazev {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sp-karta__paticka {
	display: flex;
	justify-content: flex-end;
	margin-top: auto;
	padding-bottom: var(--sp-mezera-3);
	border-bottom: 1px solid var(--sp-modra);
}

.sp-karta__sipka {
	width: 19px;
	height: 19px;
}

/* --- Fotka s ořezaným rohem (služby, hero bloky) -------------------------- */

.sp-foto {
	border-radius: var(--sp-zaobleni);
	overflow: hidden;
}

.sp-foto img {
	width: 100%;
	object-fit: cover;
}

/* ---------------------------------------------------------------------------
   Komponenty obsahových stránek (Fáze 3)

   Třídy z téhle části se píší ručně do obsahu stránky v administraci
   (CKEditor má allowedContent = true, takže <div class="…"> přežije uložení).
   Soupis a ukázky markupu jsou v .claude/redesign/stav.md.
   --------------------------------------------------------------------------- */

/* --- Blok přes celou šířku -------------------------------------------------
   Jediný <div>, který drží barevné pozadí přes celou šířku okna a obsah
   uvnitř na šířku kontejneru. Nahrazuje dvojici .sp-sekce > .sp-kontejner,
   aby se v CKEditoru nemusely vnořovat dva obaly.
   ------------------------------------------------------------------------ */

.sp-blok {
	padding-top: var(--sp-mezera-9);
	padding-bottom: var(--sp-mezera-8);
	padding-left: var(--sp-blok-odsazeni);
	padding-right: var(--sp-blok-odsazeni);
}

.sp-blok--modra {
	background: var(--sp-modra);
	color: var(--sp-bila);
}

.sp-blok--svetla {
	background: var(--sp-svetla);
}

.sp-blok--bez-odsazeni {
	padding-top: 0;
	padding-bottom: 0;
}

.sp-blok--bez-odsazeni-nahore {
	padding-top: 0;
}

.sp-blok>*+* {
	margin-top: var(--sp-mezera-7);
}

/* Detail služby: nadpis s perexem – pilulky – fotky. */
.sp-blok--volnejsi>*+* {
	margin-top: var(--sp-mezera-9);
}

/* Prvky vytažené z toku (dekorace, kulaté tlačítko) sourozeneckou mezeru
   nechtějí — u absolutně polohovaného prvku by se přičetla k `top`. */
.sp-blok>.sp-vypis__krivka,
.sp-blok>.sp-vypis__scroll {
	margin-top: 0;
}

/* --- Nadnadpis a žlutá linka ---------------------------------------------- */

.sp-nadnadpis {
	font-size: var(--sp-mezinadpis);
	line-height: 1.58;
	font-weight: 600;
}

/* Návrh: linka 726 × 8 px s gradientem z PRŮHLEDNÉ do žluté, která začíná
   u levé hrany okna, ne u kontejneru (naměřeno: alfa roste lineárně z 0 na
   x = 0 na plnou žlutou na x = 726). Plný žlutý pruh zarovnaný na kontejner
   byl proti návrhu.

   --sp-blok-odsazeni se tu použít nedá — je v procentech a počítalo by se ze
   šířky sloupce mřížky, ne z celého bloku; proto se odsazení dopočítá
   z šířky okna stejným vzorcem. */
.sp-linka {
	--sp-bleed: max(var(--sp-kontejner-odsazeni), (100vw - var(--sp-kontejner)) / 2);
	display: block;
	/* pevná šířka tu být nesmí — .sp-linka je položkou mřížky a 726 px by
	   jí přes min-width: auto roztáhlo celý sloupec a s ním i stránku */
	width: calc(100% + var(--sp-bleed));
	max-width: 726px;
	height: 8px;
	margin-left: calc(-1 * var(--sp-bleed));
	background: linear-gradient(90deg, rgba(252, 233, 0, 0) 0%, var(--sp-zluta) 100%);
}

/* --- Označení sekce (obrysová pilulka s popiskem) ------------------------- */

.sp-oznaceni {
	display: inline-block;
	padding: var(--sp-mezera-2) var(--sp-mezera-6);
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: var(--sp-text-velikost);
	font-weight: 600;
	line-height: 1.5;
	opacity: 0.85;
}

/* --- Dvousloupcový úvod sekce ---------------------------------------------
   Naměřeno v návrhu: nadpisový sloupec 674 px (x = 184), textový 724 px
   (x = 952), mezi nimi 94 px — sloupce jsou tedy skoro stejně široké.
   Dřívější poměr 0.85 / 1.15 dělal nadpisový sloupec o 65 px užší.
   ------------------------------------------------------------------------ */

/* Sloupce jsou v návrhu PEVNÉ (674 + 94 + 724 = 1492) a zbylých 60 px
   z kontejneru zůstává vpravo prázdných. S `fr` se roztáhly na celých
   1552 px, levý sloupec byl o 29 px širší a nadpisy se lámaly jinak než
   v návrhu na každé stránce. `minmax(0, …)` drží návrhovou šířku tam, kde
   je na ni místo, a pod 1400 px sloupce úměrně smrští místo přetečení. */
.sp-uvod {
	display: grid;
	grid-template-columns: minmax(0, 674px) minmax(0, 724px);
	gap: var(--sp-mezera-8) 94px;
	align-items: start;
}

.sp-uvod__hlavicka>*+* {
	margin-top: var(--sp-mezera-5);
}

.sp-uvod__hlavicka .sp-linka {
	margin-top: var(--sp-mezera-7);
}

.sp-uvod__text>*+* {
	margin-top: var(--sp-mezera-5);
}

/* --- Skupiny technologických pilulek s bublinou ---------------------------
   Nadpis skupiny a pod ním pilulky. Pilulka může nést bublinu s fotkou
   a textem — otevírá se najetím myší, dotykem ji přepíná js/sp.js.
   ------------------------------------------------------------------------ */

.sp-technologie+.sp-technologie {
	margin-top: var(--sp-mezera-7);
}

/* 22 px podle návrhu. Týž stupeň nese i samostatná třída `.sp-podnadpis`,
   kterou návrh používá nad skupinami mimo blok technologií („Co vám práce
   u nás přinese" nad ikonami, „Aktuálně hledáme" nad kartami pozic). */
.sp-technologie__nadpis,
.sp-podnadpis {
	font-size: 1.375rem;
	line-height: 1.36;
	font-weight: 700;
}

/* Mezera mezi pilulkami je v návrhu 24 px vodorovně i svisle — naměřeno
   na kariéře (řádky na y 1640 / 1705 / 1770 při výšce pilulky 41) i na
   o společnosti (1607 / 1762 / 1917). Dřívějších 16 px sráželo řádky k sobě. */
.sp-technologie__seznam {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-mezera-5);
	margin-top: var(--sp-mezera-5);
	list-style: none;
}

.sp-technologie__polozka {
	position: relative;
}

/* velká pilulka z návrhu — 41 px vysoká, obrys, text 16/30.
   8 px, ne 9: 8 + 23,04 (16 × 1,44) + 8 + 2 × 1 px obrysu = 41. Při 9 px
   vycházelo 43. Stejných 41 px má pilulka i na o společnosti a ve filtru
   realizací. */
.sp-pilulka--velka {
	padding: 8px 35px;
	border-color: currentColor;
	color: inherit;
	font-size: var(--sp-text-velikost);
	line-height: 1.44;
	opacity: 0.9;
}

.sp-pilulka--velka:hover,
.sp-pilulka--velka:focus-visible,
.sp-technologie__polozka--otevrena .sp-pilulka--velka {
	background: var(--sp-zluta);
	border-color: var(--sp-zluta);
	color: var(--sp-modra);
	opacity: 1;
}

.sp-bublina {
	position: absolute;
	left: 50%;
	top: calc(100% + var(--sp-mezera-3));
	z-index: 20;
	display: grid;
	grid-template-columns: 172px 1fr;
	gap: var(--sp-mezera-5);
	width: 503px;
	max-width: min(503px, 86vw);
	padding: var(--sp-mezera-4);
	transform: translateX(-50%);
	background: var(--sp-bila);
	color: var(--sp-text);
	border-radius: var(--sp-zaobleni);
	box-shadow: 0 3px 20px rgba(0, 0, 0, 0.26);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--sp-prechod), visibility var(--sp-prechod);
}

.sp-technologie__polozka:hover .sp-bublina,
.sp-technologie__polozka--otevrena .sp-bublina {
	opacity: 1;
	visibility: visible;
}

.sp-bublina__foto {
	width: 172px;
	height: 172px;
	object-fit: cover;
	border-radius: var(--sp-zaobleni);
}

.sp-bublina__text {
	font-size: 0.8125rem;
	/* 13 px podle návrhu */
	line-height: 1.54;
	font-weight: 400;
}

/* Návrh má v bublině fotku i text, obsah ale může mít jen jedno z toho —
   bez tohohle by po chybějící půlce zbyl prázdný sloupec. */
.sp-bublina--bez-fotky {
	grid-template-columns: 1fr;
	width: 320px;
	max-width: min(320px, 86vw);
}

.sp-bublina--bez-textu {
	grid-template-columns: 1fr;
	width: auto;
}

/* --- Číselné dlaždice ------------------------------------------------------
   Žlutá dlaždice 349 × 338 s ořezaným pravým horním rohem, číslo 140 px
   a popisek. Mezi dlaždicemi je v návrhu drobná rohová značka (roh.svg),
   tady se kreslí pseudoprvkem, aby nebyla v markupu obsahu.
   ------------------------------------------------------------------------ */

.sp-dlazdice {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 48px;
	list-style: none;
}

.sp-dlazdice__polozka {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	aspect-ratio: 349 / 338;
	padding: 46px;
	color: var(--sp-modra);
}

/* žlutá plocha je pseudoprvek — clip-path na položce by ořízl i rohovou značku */
.sp-dlazdice__polozka::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--sp-zluta);
	clip-path: var(--sp-orez-vpravo);
}

.sp-dlazdice__polozka:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 0;
	right: -16px;
	width: 32px;
	height: 32px;
	border-top: 1px solid var(--sp-modra);
	border-right: 1px solid var(--sp-modra);
}

.sp-dlazdice__cislo,
.sp-dlazdice__popis {
	position: relative;
}

.sp-dlazdice__cislo {
	font-size: clamp(4.375rem, 5.5vw, 8.75rem);
	/* 70 → 140 */
	line-height: 1;
	font-weight: 700;
}

.sp-dlazdice__popis {
	font-size: 1.4375rem;
	/* 23 px podle návrhu */
	line-height: 1.26;
	font-weight: 700;
}

/* --- Organizační struktura -------------------------------------------------
   Tři úrovně uzlů spojené linkami. Spojnice jsou pseudoprvky, žádné SVG:
   vodorovná lišta nad úrovní vede od středu prvního ke středu posledního
   sloupce, svislé nožky z ní vedou k jednotlivým uzlům.
   ------------------------------------------------------------------------ */

/* Pod schématem nechává návrh 143 px k dolní hraně bloku (běžné odsazení
   bloku je 80). */
.sp-struktura {
	text-align: center;
	padding-bottom: 62px;
}

/* Organizační struktura má v návrhu nadpis VLEVO vedle schématu, ne nad ním.
   Obal nese obsah stránky (dá se dopsat v editoru), aby se nadpis a schéma
   daly postavit vedle sebe bez zásahu do jádra. */
.sp-struktura-obal {
	display: grid;
	grid-template-columns: minmax(0, 376px) 1fr;
	gap: var(--sp-mezera-6);
	align-items: start;
	padding-top: var(--sp-mezera-10);
}

/* Nadpis sekce je v návrhu o stupeň menší než ostatní H2 (naměřeno 47 px
   proti 52 px, shodně na obou slovech). */
.sp-struktura-obal>h2 {
	font-size: 2.9375rem;
}

.sp-struktura__nadpis {
	font-size: 1.9375rem;
	/* 31 px podle návrhu */
	line-height: 1.2;
	font-weight: 700;
}

/* Rozestupy jsou naměřené v návrhu: od popisku „Vedení společnosti" k první
   liště 224 px, mezi úrovněmi 143 px (obojí včetně nožky 44 px). Schéma je
   v návrhu výrazně vzdušnější, než bylo. */
.sp-struktura__uroven {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-rozestup);
	margin-top: 144px;
	padding-top: 44px;
	list-style: none;
}

.sp-struktura__uroven:first-of-type {
	margin-top: 171px;
}

/* svislá nožka z předchozí úrovně dolů k liště */
.sp-struktura__uroven::before {
	content: "";
	position: absolute;
	left: 50%;
	top: -90px;
	width: 1px;
	height: 90px;
	background: currentColor;
}

.sp-struktura__uroven:first-of-type::before {
	top: -120px;
	height: 120px;
}

/* vodorovná lišta mezi středy krajních sloupců */
.sp-struktura__uroven::after {
	content: "";
	position: absolute;
	left: 16.666%;
	right: 16.666%;
	top: 0;
	height: 1px;
	background: currentColor;
}

.sp-struktura__uzel {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-mezera-3);
}

/* svislá nožka od lišty k uzlu */
.sp-struktura__uzel::before {
	content: "";
	position: absolute;
	left: 50%;
	top: -44px;
	width: 1px;
	height: 44px;
	background: currentColor;
	display: none;
}

/* na úrovni vedení sedí na liště kolečko místo prostého napojení */
.sp-struktura__uroven--vedeni .sp-struktura__uzel::after {
	content: "";
	position: absolute;
	left: 50%;
	top: -58px;
	width: 28px;
	height: 28px;
	transform: translateX(-50%);
	border: 1px solid currentColor;
	border-radius: 50%;
	background: var(--sp-modra);
	z-index: 1;
}

/* úroveň se dvěma uzly stojí v prvním a třetím sloupci jako v návrhu */
.sp-struktura__uroven--dve>.sp-struktura__uzel:last-child {
	grid-column: 3;
}

/* Úroveň s pilulkami: v návrhu vede vodorovná spojnice VE VÝŠCE STŘEDU
   pilulek a do uzlu vstupuje ze strany, ne shora. Nožka od lišty k uzlu
   proto odpadá a lišta se posune o polovinu výšky pilulky (67 / 2). */
.sp-struktura__uroven:not(.sp-struktura__uroven--vedeni) {
	padding-top: 0;
}

.sp-struktura__uroven:not(.sp-struktura__uroven--vedeni)::after {
	top: 33px;
}

.sp-struktura__uroven:not(.sp-struktura__uroven--vedeni)::before {
	height: 124px;
	/* 76 nožky + 33 do středu pilulky */
}

.sp-struktura__uroven:not(.sp-struktura__uroven--vedeni) .sp-struktura__uzel::before {
	display: none;
}

/* V návrhu je uzel PILULKA s plným zaoblením a bílým obrysem (274 × 67),
   ne obdélník s ořezaným rohem. Plné modré pozadí je funkční — vodorovná
   spojnice vede ve výšce středu pilulky a za ní se musí schovat. */
.sp-struktura__box {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 269px;
	max-width: 100%;
	min-height: 67px;
	padding: var(--sp-mezera-3) var(--sp-mezera-7);
	border: 1px solid currentColor;
	border-radius: 999px;
	background: var(--sp-modra);
	font-size: 1.4375rem;
	line-height: 1.2;
	font-weight: 700;
}

.sp-struktura__jmeno {
	font-size: 1.4375rem;
	/* 23 px */
	line-height: 1.2;
	font-weight: 700;
}

.sp-struktura__role {
	font-size: 1.4375rem;
	line-height: 1.2;
	font-weight: 300;
}

/* --- Mapa poboček ----------------------------------------------------------
   Vlevo kontaktní bloky, vpravo mapa ČR s body. Poloha bodů se zadává
   inline stylem left/top v procentech — mapa je obrázek, ne interaktivní SVG.
   ------------------------------------------------------------------------ */

/* Naměřeno v návrhu: údaje zabírají x 184–800 (616 px), mapa x 880–1780
   (900 px). Poměr 1 : 1.1 dělal mapu skoro o třetinu menší, než má být. */
/* Textový sloupec je v návrhu 705 px široký (pobočky 289 + 127 + 289) a mapa
   za ním přetéká až k pravé hraně okna. S dřívějšími `616fr 900fr` vycházel
   text na 598 px a pobočky se lámaly uprostřed názvu. */
.sp-mapa {
	display: grid;
	grid-template-columns: minmax(0, 705px) 1fr;
	/* Mezera je úzká schválně — v návrhu mapa na textový sloupec skoro
	   navazuje (text končí na 889, mapa začíná na 896) a doprava přetéká
	   z okna ven. */
	gap: var(--sp-mezera-9) var(--sp-mezera-5);
	align-items: center;
}

.sp-mapa__udaje>*+* {
	margin-top: var(--sp-mezera-5);
}

.sp-mapa__udaje>h1+.sp-kontakt,
.sp-mapa__udaje>.sp-oznaceni {
	margin-top: var(--sp-mezera-7);
}

/* Mapa v návrhu přetéká kontejner až k pravé hraně okna. `--sp-blok-odsazeni`
   se tu použít nedá: jeho `100%` je šířka samotného prvku, ne okna. */
.sp-mapa__plan {
	position: relative;
	margin-right: calc(-1 * max(var(--sp-kontejner-odsazeni), (100vw - var(--sp-kontejner)) / 2));
}

/* mapa má vlastní rozměr 1233 px; bez tohohle by na užším sloupci zůstala
   menší, než kolik jí sloupec dává */
.sp-mapa__plan img {
	width: 100%;
}

.sp-mapa__bod {
	position: absolute;
	width: 18px;
	height: 18px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--sp-zluta);
	box-shadow: 0 0 0 14px rgba(252, 233, 0, 0.18);
}

.sp-mapa__bod--hlavni {
	width: 28px;
	height: 28px;
	box-shadow: 0 0 0 24px rgba(252, 233, 0, 0.18);
}

/* --- Kontaktní údaje -------------------------------------------------------
   Popisek 12 px nad hodnotou 25/35 — podle obrazovky „kontakty".
   ------------------------------------------------------------------------ */

.sp-kontakt {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-mezera-5) var(--sp-mezera-8);
}

.sp-kontakt__hodnota {
	display: block;
	font-size: 1.5625rem;
	/* 25 px */
	line-height: 1.4;
	font-weight: 700;
}

/* dva sloupce po 289 px s mezerou 127 px podle návrhu */
.sp-pobocky {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sp-mezera-7) 127px;
	list-style: none;
}

.sp-pobocka__nazev {
	font-size: var(--sp-mezinadpis);
	line-height: 1.26;
	font-weight: 700;
}

.sp-pobocka__udaje {
	font-size: var(--sp-mezinadpis);
	line-height: 1.58;
	font-weight: 400;
	/* kit nemá řez 500, viz --sp-pismo */
}

/* e-mail a telefony poboček jsou v návrhu žluté */
.sp-pobocka__udaje a {
	color: var(--sp-zluta);
}

.sp-pobocka__udaje a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- Certifikace a oprávnění -----------------------------------------------
   Návrh má vedle sebe dvě označené skupiny log, ne přepínač.
   ------------------------------------------------------------------------ */

.sp-certifikace {
	display: grid;
	grid-template-columns: auto auto;
	justify-content: space-between;
	gap: var(--sp-mezera-8);
}

.sp-certifikace__loga {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-mezera-4);
	margin-top: var(--sp-mezera-6);
	list-style: none;
}

/* každý certifikát vede na plnou fotku — stejné nadzvednutí jako v galerii */
.sp-certifikace__odkaz {
	display: block;
	transition: transform var(--sp-prechod);
}

.sp-certifikace__odkaz:hover {
	transform: translateY(-4px);
}

/* výšku obrázků nelze zadat atributem — reset má img { height: auto } */
.sp-certifikace__loga img {
	width: auto;
	height: 232px;
	object-fit: contain;
}

/* --- Kvalifikace (revizní technici, svařovací inženýři) --------------------
   Pilulka s kolečkem a ikonou pracovníka na levé straně.
   ------------------------------------------------------------------------ */

.sp-kvalifikace {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-mezera-5);
	list-style: none;
	padding-top: var(--sp-mezera-5);
}

.sp-kvalifikace>li {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 56px;
	padding: var(--sp-mezera-2) var(--sp-mezera-6) var(--sp-mezera-2) 75px;
	/* v návrhu je pilulka bílá bez obrysu, kolečko modré a panáček bílý */
	background: var(--sp-bila);
	border-radius: 999px;
	font-size: var(--sp-text-velikost);
	font-weight: 600;
	line-height: 1.4;
}

.sp-kvalifikace>li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 56px;
	height: 56px;
	transform: translateY(-50%);
	border-radius: 50%;
	background: var(--sp-modra);
}

.sp-kvalifikace>li::after {
	content: "";
	position: absolute;
	left: 16px;
	top: 50%;
	width: 24px;
	height: 31px;
	transform: translateY(-50%);
	background-color: var(--sp-bila);
	-webkit-mask: url("../images/ico-avatar.svg") no-repeat center / contain;
	mask: url("../images/ico-avatar.svg") no-repeat center / contain;
}

/* --- Pás fotek -------------------------------------------------------------
   Začíná na hraně kontejneru a přetéká doprava mimo obrazovku, jak to
   ukazuje návrh. Scrolluje se dotykem, kolečkem i tažením (js/sp.js).
   ------------------------------------------------------------------------ */

/* obal drží kulaté tlačítko „další" nad pásem — pás sám je scrollovací
   a tlačítko uvnitř něj by se posouvalo spolu s fotkami */
.sp-pas-fotek__obal {
	position: relative;
}

.sp-pas-fotek {
	margin-right: calc(-1 * var(--sp-blok-odsazeni));
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

.sp-pas-fotek::-webkit-scrollbar {
	display: none;
}

.sp-pas-fotek__stopa {
	display: flex;
	gap: var(--sp-mezera-4);
	width: max-content;
	padding-right: var(--sp-blok-odsazeni);
}

/* fotky v pásu mají v návrhu OSTRÉ rohy — zaoblení tu bylo navíc */
.sp-pas-fotek__polozka {
	flex: 0 0 auto;
	width: 526px;
	max-width: 80vw;
	overflow: hidden;
}

.sp-pas-fotek__polozka img {
	width: 100%;
	height: 374px;
	object-fit: cover;
}

/* Kulaté tlačítko posunu: 62 px u pravé hrany kontejneru, svisle na střed
   pásu. Barvu i velikost má návrh shodnou s kulatým tlačítkem v hero. */
.sp-pas-fotek__dalsi {
	position: absolute;
	top: 187px;
	right: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	margin-top: -31px;
	border-radius: 50%;
	background: rgba(11, 20, 33, 0.82);
	transition: background var(--sp-prechod);
}

.sp-pas-fotek__dalsi:hover {
	background: rgba(11, 20, 33, 0.95);
}

.sp-pas-fotek__dalsi img {
	width: 19px;
	height: 19px;
}

/* --- Galerie (certifikáty) ------------------------------------------------- */

.sp-galerie {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: var(--sp-rozestup);
	list-style: none;
}

.sp-galerie__odkaz {
	display: block;
	border-radius: var(--sp-zaobleni);
	overflow: hidden;
	background: var(--sp-bila);
	transition: transform var(--sp-prechod);
}

.sp-galerie__odkaz:hover {
	transform: translateY(-4px);
}

.sp-galerie__odkaz img {
	width: 100%;
	height: 220px;
	object-fit: contain;
	padding: var(--sp-mezera-4);
}

/* --- Nedávné realizace -----------------------------------------------------
   Prozatímní sekce Fáze 3; plný výpis s filtrem dodělá Fáze 4.
   ------------------------------------------------------------------------ */

.sp-realizace__seznam {
	list-style: none;
}

/* karty v řádku končí na stejné výšce i při různě dlouhých názvech */
.sp-realizace__seznam>li {
	display: flex;
}

.sp-realizace__seznam>li>.sp-karta {
	flex: 1;
}

.sp-realizace__vice {
	text-align: center;
}

/* karta bez přiřazené fotky — decentní plocha místo rozbitého obrázku */
.sp-karta__bez-fotky {
	display: block;
	width: 100%;
	aspect-ratio: 365 / 345;
	background: linear-gradient(135deg, var(--sp-svetla-tmava), var(--sp-svetla));
}

/* --- Karta realizace bez fotky --------------------------------------------
   Návrh z ní dělá plnou žlutou dlaždici s modrým textem. Fotku nemá, takže
   je nižší než sousedé — dorovnává se k dolní hraně řádku, aby lícovala
   s jejich těly (naměřeno v návrhu: obojí 1806–2007).
   ------------------------------------------------------------------------ */

.sp-karta--zluta {
	align-self: end;
}

.sp-karta--zluta .sp-karta__telo,
.sp-karta--zluta:hover .sp-karta__telo,
.sp-karta--zluta:focus-visible .sp-karta__telo {
	background: var(--sp-zluta);
}

.sp-karta--zluta .sp-karta__paticka {
	border-bottom-color: var(--sp-modra);
}

/* --- Pilulky na modrém bloku -----------------------------------------------
   Totéž, co už platí pro .sp-sekce--modra; bloky obsahu používají .sp-blok.
   ------------------------------------------------------------------------ */

.sp-blok--modra .sp-pilulka {
	border-color: var(--sp-bila);
	color: var(--sp-bila);
}

.sp-blok--modra .sp-pilulka:hover,
.sp-blok--modra .sp-pilulka:focus-visible {
	background: var(--sp-bila);
	color: var(--sp-modra);
}

.sp-blok--modra .sp-pilulka--aktivni,
.sp-blok--modra .sp-pilulka--aktivni:hover {
	background: var(--sp-zluta);
	border-color: var(--sp-zluta);
	color: var(--sp-modra);
}

.sp-blok--modra .sp-kvalifikace>li {
	border-color: var(--sp-obrys-bily);
}

/* ---------------------------------------------------------------------------
   Realizace (Fáze 4)

   Výpis realizací s filtrem a detail projektu. Obě obrazovky mají v návrhu
   celou horní část na modré ploše, teprve „Nedávné realizace" jsou na bílé.
   --------------------------------------------------------------------------- */

/* --- Výpis realizací ------------------------------------------------------ */

/* Svislý rytmus pásu drží tenhle blok sám, ne `.sp-blok > * + *` — to dává
   mezeru jen přímým dětem `.sp-blok`, a tam je jediné dítě `.sp-vypis__obsah`.
   Odsazení shora je naměřené: v návrhu začíná `<h1>` na y = 325 a hlavička
   je 218 px vysoká. Zdola 120 px (návrh: modrá plocha končí 2867, tlačítko 2747). */
.sp-vypis {
	position: relative;
	overflow: hidden;
	padding-top: 107px;
	padding-bottom: var(--sp-mezera-10);
}

/* Křivka výpisu jde přes celou šířku okna. Plátno assetu začíná přesně na
   horní hraně bloku (v návrhu y = 218), takže se tu nic neposouvá.

   Není to jeden obrázek z návrhu, ale složenina tří vrstev `line` ze Zeplinu
   (obrazovka „Výpis realizací") — jedna vrstva je na plátně oříznutá pravou
   hranou okna. Kdo bude asset předělávat, musí je složit znovu; ručně
   vyříznutá křivka z předlohy má přetržený vodorovný úsek. */
.sp-vypis__krivka {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	pointer-events: none;
	z-index: 0;
}

/* obsah bloku leží nad křivkou; `margin-top: 0` ruší mezeru, kterou by mu
   dalo `.sp-blok > * + *` — stojí totiž až za `<img class="sp-vypis__krivka">` */
.sp-vypis__obsah {
	position: relative;
	z-index: 1;
	margin-top: 0;
}

/* Mezery mezi záhlavím, filtrem, mřížkou a stránkováním. Hodnoty z návrhu
   (absolutní y na plátně 1920): perex 498, popisek filtru 674, mřížka 872,
   tlačítko 2692 — poslední mínus 16 px, které si nese `.sp-tlacitko` samo. */
.sp-vypis__obsah > .sp-filtr {
	margin-top: 56px;
}

.sp-vypis__obsah > .sp-vypis__seznam {
	margin-top: 109px;
}

.sp-vypis__obsah > .sp-vypis__strankovani {
	margin-top: var(--sp-mezera-9);
}

.sp-vypis__zahlavi {
	max-width: 800px;
}

/* Kulaté tlačítko sedí u pravé hrany kontejneru na úrovni perexu — stejně
   jako v hero, jen počítané od horní hrany bloku. */
.sp-vypis__scroll {
	position: absolute;
	top: 402px;
	right: max(var(--sp-kontejner-odsazeni), calc((100% - var(--sp-kontejner)) / 2));
	z-index: 1;
	width: 62px;
	height: 62px;
}

.sp-vypis__zahlavi .sp-perex {
	margin-top: 40px;
}

/* --- Filtr kategorií ------------------------------------------------------ */

/* návrh: 18 / 30 / w700 */
.sp-filtr__popisek {
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.67;
	margin-bottom: var(--sp-mezera-4);
}

/* --- Mřížka výpisu --------------------------------------------------------
   Čtyři sloupce 365 px s mezerou 32 px, řádky s mezerou 40 px — hodnoty
   z návrhu. První karta první stránky zabírá dva sloupce.
   ------------------------------------------------------------------------ */

.sp-vypis__seznam {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: var(--sp-rozestup);
	row-gap: 40px;
	list-style: none;
}

.sp-vypis__polozka--velka {
	grid-column: span 2;
}

/* Karty v řádku končí na stejné výšce — `<li>` do výšky řádku roste samo,
   `.sp-karta` uvnitř ne. Totéž pravidlo má `.sp-realizace__seznam > li`. */
.sp-vypis__polozka {
	display: flex;
}

.sp-vypis__polozka > .sp-karta {
	flex: 1;
}

/* Tělo karty je v návrhu 202 px vysoké u všech karet — bez toho by každý
   řádek skončil na jiné výšce podle nejdelšího názvu. Velká karta se vynechává:
   její tělo je absolutně polohované a `min-height` by mu přebilo překryv. */
.sp-vypis__seznam .sp-karta:not(.sp-karta--velka) .sp-karta__telo {
	min-height: 202px;
}

.sp-vypis__prazdno {
	font-size: var(--sp-mezinadpis);
}

.sp-vypis__strankovani {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-mezera-5);
}

/* --- Velká karta ----------------------------------------------------------
   Fotka přes celou plochu karty, štítky a titulek přes ni; návrh má text
   zdola v odsazení 48 px a tmavý přechod, aby byl čitelný.
   ------------------------------------------------------------------------ */

/* Velká karta je fotka přes celou plochu — barvu pozadí nemá ani v klidu,
   ani při najetí (přechodový překryv nese její tělo). */
.sp-karta--velka {
	position: relative;
	border-radius: var(--sp-zaobleni-velke);
}

.sp-karta--velka .sp-karta__telo,
.sp-karta--velka:hover .sp-karta__telo,
.sp-karta--velka:focus-visible .sp-karta__telo {
	background: linear-gradient(to top, rgba(3, 34, 130, 0.85), rgba(3, 34, 130, 0));
}

.sp-karta--velka,
.sp-karta--velka .sp-karta__foto {
	height: 100%;
}

.sp-karta--velka .sp-karta__foto img,
.sp-karta--velka .sp-karta__bez-fotky {
	height: 100%;
	aspect-ratio: auto;
	min-height: 548px;
}

.sp-karta--velka .sp-karta__telo {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	gap: var(--sp-mezera-5);
	padding: var(--sp-mezera-7);
	color: var(--sp-bila);
	background: linear-gradient(to top, rgba(3, 34, 130, 0.85), rgba(3, 34, 130, 0));
	border-radius: 0 0 var(--sp-zaobleni-velke) var(--sp-zaobleni-velke);
}

.sp-karta--velka .sp-karta__nazev {
	font-size: var(--sp-nadpis-karty);
	color: var(--sp-bila);
}

.sp-karta__stitky {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-mezera-4);
}

/* --- Detail realizace ----------------------------------------------------- */

/* Detail je v návrhu modrý až k horní hraně okna a hlavička na něm leží bez
   vlastního pozadí (index.php). Drobečky proto začínají 192 px od vrchu —
   naměřeno v návrhu. */
.sp-detail {
	overflow: hidden;
	padding-top: 192px;
}

.sp-detail__mrizka {
	display: grid;
	grid-template-columns: minmax(0, 610fr) minmax(0, 724fr);
	column-gap: var(--sp-mezera-10);
	row-gap: var(--sp-mezera-7);
	align-items: start;
}

.sp-detail__hlavicka>*+* {
	margin-top: var(--sp-mezera-6);
}

.sp-detail__nadpis {
	font-size: var(--sp-h2);
	line-height: 1.19;
}

/* přetečení k levé hraně okna i gradient řeší společné pravidlo .sp-linka */
.sp-detail__linka {
	margin-top: var(--sp-mezera-8);
}

.sp-detail__telo>*+* {
	margin-top: var(--sp-mezera-6);
}

.sp-meta>*+* {
	margin-top: var(--sp-mezera-5);
}

.sp-meta__radek {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-mezera-2);
	font-size: var(--sp-mezinadpis);
	line-height: 1.3;
}

.sp-meta__popisek {
	font-weight: 700;
}

.sp-meta__hodnota {
	font-weight: 400;
}

.sp-detail__perex {
	font-size: var(--sp-mezinadpis);
	line-height: 1.6;
}

/* --- Fotogalerie na detailu ----------------------------------------------- */

.sp-detail__galerie {
	margin-top: var(--sp-mezera-9);
}

.sp-detail__nadpis-galerie {
	margin-bottom: var(--sp-mezera-6);
}

/* ukazatel posunu pásu fotek — v návrhu žlutý proužek pod každým pásem */
.sp-pas-fotek__ukazatel {
	display: block;
	width: 100%;
	max-width: 726px;
	height: 3px;
	margin-top: var(--sp-mezera-6);
	/* bez dráhy — návrh kreslí jen žlutý úsek */
	background: none;
}

.sp-pas-fotek__ukazatel span {
	display: block;
	height: 100%;
	width: 22%;
	background: var(--sp-zluta);
	transition: transform var(--sp-prechod);
}

/* --- Bílé tlačítko na modré ploše ----------------------------------------- */

.sp-tlacitko--bile {
	background: var(--sp-bila);
	border-color: var(--sp-modra);
	color: var(--sp-modra);
}

.sp-tlacitko--bile:hover,
.sp-tlacitko--bile:focus-visible {
	background: var(--sp-zluta);
	border-color: var(--sp-zluta);
}

/* ---------------------------------------------------------------------------
   Úvodní stránka a kariéra (Fáze 5)

   Rozměry z návrhu: hero úvodní stránky 1920 × 1114, fotky karet služeb
   495 × 403 začínají na y = 900 (tedy 214 px nad spodní hranou hero),
   fotka CTA banneru 1552 × 600, karty nedávných realizací 365 × 345.
   --------------------------------------------------------------------------- */

/* --- Nabízené služby -------------------------------------------------------
   Návrh: karta 495 × 403 je JEDEN celek — fotka přes celou plochu, přes ni
   černý gradient a v něm pořadové číslo, název a šipka. Žádný popisný
   odstavec a žádná dělicí linka; ty měla dřívější podoba navíc.

   Roh je ořezaný vpravo nahoře (clip-path), ostatní rohy zaoblené — proto
   border-radius i clip-path zároveň: border-radius ořízne pozadí a potomky,
   clip-path pak celý prvek. Karty i nadpis nad nimi zasahují do hero fotky,
   přesah řídí --sp-sluzby-presah (responsive.css ho na užších šířkách ruší).
   ------------------------------------------------------------------------ */

/* Varianta na světlém pozadí (mimo úvodní stranu): modrý nadpis, žádný
   přesah do hero, prostřední karta bez žlutého akcentu. */
.sp-sluzby:not(.sp-sluzby--uvodni) .sp-sluzby__nadpis {
	color: var(--sp-modra);
}

/* Pod kartami nechává návrh 256 px modré plochy, než začne blok
   „O společnosti" (naměřeno: karty končí 1302, popisek sekce 1568). */
.sp-sluzby--uvodni {
	position: relative;
	z-index: 1;
	padding-top: 0;
	padding-bottom: 256px;
	/* flow-root je tu nutnost, ne kosmetika: bez vlastního formátovacího
	   kontextu se záporný margin-top prvního potomka SLOUČÍ s blokem
	   (margin collapsing) a posune celou modrou plochu nahoru místo toho,
	   aby karty vytáhl ven nad ni. Přesně tím trpěla dřívější podoba —
	   modrá začínala o 214 px dřív a karty do hero vůbec nezasahovaly. */
	display: flow-root;
	/* Šipka v hero sem skáče: karty jsou vytažené nad začátek bloku, bez
	   odsazení by jejich horní část zůstala pod přilepenou hlavičkou. */
	scroll-margin-top: calc(var(--sp-sluzby-presah) + var(--sp-sluzby-nadpis) + 134px);
}

/* Posun nahoru je součet přesahu karet a bloku nadpisu nad nimi (řádek
   nadpisu 30 px + mezera 32 px), aby FOTKY karet začínaly přesně
   --sp-sluzby-presah nad spodní hranou hero, jak je to v návrhu. */
.sp-sluzby--uvodni>.sp-sluzby__vnitrek {
	margin-top: calc(-1 * (var(--sp-sluzby-presah) + var(--sp-sluzby-nadpis)));
}

.sp-sluzby__nadpis {
	color: var(--sp-bila);
}

.sp-sluzby__seznam {
	margin-top: var(--sp-mezera-7);
	list-style: none;
}

.sp-sluzba {
	position: relative;
	display: block;
	aspect-ratio: 495 / 403;
	border-radius: var(--sp-zaobleni-velke);
	overflow: hidden;
	clip-path: var(--sp-orez-vpravo);
	background: #000;
	color: var(--sp-bila);
}

/* Dvě třídy záměrně: `img[loading="lazy"]` z portlet-manager.css má vyšší
   specificitu než jedna třída a přebil by přechod jen na opacity — zoom by pak
   skočil bez animace. */
.sp-sluzba .sp-sluzba__foto {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--sp-prechod-foto);
}

.sp-sluzba:hover .sp-sluzba__foto,
.sp-sluzba:focus-visible .sp-sluzba__foto {
	transform: scale(1.05);
}

/* Gradient z návrhu: nahoře je fotka vidět, dole je plná čerň, aby text
   držel kontrast bez ohledu na to, co je na fotce. */
.sp-sluzba__stin {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
			rgba(0, 0, 0, 0.2) 0%,
			rgba(0, 0, 0, 0.15) 40%,
			rgba(0, 0, 0, 0.32) 70%,
			#000 82%);
}

.sp-sluzba__telo {
	position: absolute;
	right: var(--sp-mezera-6);
	bottom: var(--sp-mezera-6);
	left: var(--sp-mezera-6);
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--sp-mezera-5);
}

/* Titulek karty se v návrhu láme na dva řádky („Oblast / energetiky",
   „Výroba / a prefabrikace"), zatímco „Elektro a MaR" zůstává na jednom.
   Naměřené šířky titulků při 30 px vymezují sloupec na 217–267 px. */
.sp-sluzba__popis {
	display: flex;
	flex-direction: column;
	gap: var(--sp-mezera-3);
	max-width: 240px;
}

.sp-sluzba__cislo {
	font-size: var(--sp-mezinadpis);
	line-height: 1.5;
	font-weight: 600;
	color: var(--sp-bila);
}

.sp-sluzba__nazev {
	font-size: var(--sp-nadpis-karty);
	line-height: 1.17;
	font-weight: 700;
}

.sp-sluzba__sipka {
	flex: none;
	width: 24px;
	height: 24px;
	margin-bottom: var(--sp-mezera-2);
	background: var(--sp-bila);
	-webkit-mask: url("../images/sipka.svg") center / contain no-repeat;
	mask: url("../images/sipka.svg") center / contain no-repeat;
	transition: transform var(--sp-prechod), background var(--sp-prechod);
}

/* Najetí zbarví titulek i šipku dožluta — v návrhu to platí pro každou
   ze tří karet, ne jen napevno pro tu prostřední. */
.sp-sluzba:hover .sp-sluzba__nazev,
.sp-sluzba:focus-visible .sp-sluzba__nazev {
	color: var(--sp-zluta);
}

.sp-sluzba:hover .sp-sluzba__sipka,
.sp-sluzba:focus-visible .sp-sluzba__sipka {
	background: var(--sp-zluta);
	transform: translateX(var(--sp-mezera-2));
}

/* --- Dekorativní žlutá křivka ----------------------------------------------
   Návrh má na modrých plochách tenkou žlutou křivku, která do bloku vstupuje
   od pravé nebo levé hrany (homepage, kariéra, kontakty, detail realizace).

   Kreslí se pozadím pseudoprvku, ne <img>: obsah těch bloků se píše
   v administraci a značka by se do něj nedala vložit. Třídy se proto dají
   dopsat i k `.sp-blok--modra` přímo v editoru.

   Bez `overflow: hidden` schválně — blok obvykle obsahuje `.sp-linka`,
   která záměrně přetéká k levé hraně okna a ořez by ji uťal.
   ------------------------------------------------------------------------ */

/* isolation: isolate udělá z bloku stohovací kontext, takže křivka smí mít
   z-index: -1 — leží nad pozadím bloku, ale pod obsahem. Kdyby se místo toho
   zvedal obsah pravidlem `> *`, přebilo by to `position: absolute` prvkům,
   které ho už mají (obrázek křivky ve výpisu realizací), a ty by začaly
   zabírat místo v toku. */
.sp-krivka-vpravo,
.sp-krivka-vlevo {
	position: relative;
	isolation: isolate;
}

/* Rozměr je z návrhu: na 1920 px je křivka 509,4 px vysoká a podle strany
   641,9 (vpravo) nebo 1019,8 px (vlevo) široká — shodně na kariéře,
   homepage, o společnosti i kontaktech. Každá strana má proto vlastní poměr
   stran; společné `aspect-ratio: 641/509` s `width: 1019px; max-width: 45%`
   kreslilo na 1920 px 864 × 686, tedy o třetinu větší kresbu.

   `background-size: 100% 100%` schválně: užší varianty návrhu jsou tatáž
   kresba vodorovně stlačená, ne oříznutá. Procentní `max-width` drží
   zmenšování celé křivky na užších oknech — ořez by z ní udělal useknutou
   čáru jako kdysi ve výpisu realizací. */
.sp-krivka-vpravo::before,
.sp-krivka-vlevo::before {
	content: "";
	position: absolute;
	top: 50px;
	opacity: 0.9;
	pointer-events: none;
	z-index: -1;
}

.sp-krivka-vpravo::before {
	right: 0;
	width: 641.9px;
	max-width: 33.43%;  /* 641,9 z 1920 — níž se zmenšuje s oknem */
	aspect-ratio: 641.9 / 509.4;
	background: url("../images/krivka-hero.png") right top / 100% 100% no-repeat;
	transform: scaleX(-1);
}

/* vlevo je táž křivka zrcadlově — vlastní asset pro ni návrh nemá */
.sp-krivka-vlevo::before {
	left: 0;
	width: 1019.8px;
	max-width: 53.11%;  /* 1019,8 z 1920 */
	aspect-ratio: 1019.8 / 509.4;
	background: url("../images/krivka-hero.png") left top / 100% 100% no-repeat;
}

/* Na úvodní stránce leží blok „O společnosti" hned za `.sp-sluzby--uvodni`,
   která má kvůli kartám vytaženým do hero výslovné `z-index: 1`. Bez
   vlastního z-indexu prohrává i tenhle blok — vůbec ne kvůli ořezu, ale
   protože `.sp-sluzby--uvodni` ho v místě přesahu prostě překreslí navrch.
   Až se posune výš, narazí do 256px modré plochy pod kartami, která už
   patří té sekci — proto tu potřebuje vyšší z-index. */
.sp-sluzby--uvodni~.sp-krivka-vpravo {
	z-index: 2;
}

/* Posouvá se jen BOX (`top`) — nahoru přesah vadit nemůže, nad počátkem
   scrollu scrollbar nevzniká. Dřív se k tomu vodorovně posouvalo i pozadí
   (`background-position: left -275px`), protože box byl o třetinu širší,
   než má návrh, a kresba by jinak začínala moc vlevo. Od chvíle, kdy má box
   přesných 641,9 px z návrhu, je posun pozadí navíc — jen by křivku uřízl.

   Křivka leží v návrhu na y 1490,6, blok „O společnosti" začíná na 1579. */
.sp-sluzby--uvodni~.sp-krivka-vpravo::before {
	top: -88px;
}

/* --- Pás log partnerů ------------------------------------------------------
   Loga mají různé proporce, drží se proto na společné výšce a doplňují se
   na střed. Seven Energy má černé pozadí přímo v assetu, ostatní jsou
   průhledné.
   ------------------------------------------------------------------------ */

/* Na úvodní straně nechává návrh pod pásem log 183 px modré plochy,
   na ostatních stránkách vystačí běžné odsazení bloku. */
.sp-partneri--uvodni {
	padding-bottom: 183px;
}

.sp-partneri__nadpis {
	margin-bottom: var(--sp-mezera-7);
}

.sp-partneri__seznam {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* Mezera 87 px je naměřená v návrhu; `space-between` na 1552 px ji roztáhl
	   na 101 px a pás končil až u pravé hrany kontejneru místo na 1655 px. */
	gap: 87px;
	list-style: none;
}

/* Opakované pozice pásu drží šířku jen na širokém plátně jako v návrhu.
   Skrývají se v responsive.css, kde jsou všechny breakpointy pohromadě. */

.sp-partneri__polozka {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Loga mají různé proporce (Metrostav je široký, ČEZ čtvercový) — omezují se
   proto výškou a poměr stran si drží samy. V návrhu jsou všechna
   monochromaticky bílá.

   Společnou výšku návrh nemá — bere každé logo v jeho vlastní velikosti
   a nejvyšší z nich je strop řady. Naměřeno shodně na kariéře i na homepage:
   Veolia 164 × 40, Metrostav 198 × 24 (obojí přirozená velikost SVG),
   ČEZ 40 × 40 a Seven Energy 159 × 48. Strop je tedy 48 px; při dřívějších
   41 px se Seven Energy zmenšovalo proti návrhu, při 56 px byl naopak pás
   o 3 px širší než kontejner a poslední logo padalo na druhý řádek. */
.sp-partneri__polozka img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 48px;
	object-fit: contain;
}

/* SVG loga si velikost z návrhu nesou sama (Veolia 164 × 40, Metrostav
   198 × 24), obě rastrová ale ne — `partner-cez.png` je 120 × 120
   a `partner-seven-energy-bila.png` 462 × 130, takže by je strop řady
   roztáhl na 48 px výšky. ČEZ je v návrhu 40 × 40, Seven Energy 159 × 48. */
.sp-partneri__polozka img[src$="partner-cez.png"] {
	max-height: 40px;
}

.sp-partneri__polozka img[src$="partner-seven-energy-bila.png"] {
	width: 159px;
	height: 48px;
}

/* --- Důvody s ikonami (kariéra) --------------------------------------------
   Čtyři sloupce, v každém kulatá ikona, nadpis a text. Ikony se kreslí
   maskou, aby braly barvu z okolí — stejně jako .sp-ikona v layout.css.
   ------------------------------------------------------------------------ */

.sp-duvody {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sp-rozestup);
	list-style: none;
}

/* Mřížka, ne sloupec: ikony mají v návrhu každá jinou výšku (106,6 / 106,6 /
   95,3 / 95,3) a jsou zarovnané SPODNÍ hranou, takže nadpisy všech čtyř
   sloupců začínají na jedné lince. První řádek je proto pevných 107 px
   a ikona v něm sedí dole. Mezera 28 px je z návrhu (nadpis → text). */
.sp-duvod {
	display: grid;
	grid-template-rows: 107px auto auto;
	align-content: start;
	row-gap: 28px;
}

/* Ikony jsou v návrhu kresba s bílou výplní a modrým obrysem — nasazují se
   proto obyčejným <img>, ne maskou jako .sp-ikona. Poměr stran mají každá
   jiný (ico_worker 77 × 107 až ico_plant 148 × 95), drží se tedy na společné
   výšce. Naměřeno v návrhu: 107 px, mezi ikonou a nadpisem 50 px. */
.sp-duvod__ikona {
	align-self: end;
	justify-self: start;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 107px;
}

/* Nadpis důvodu je v návrhu velký bílý, ne drobný tučný — 30/35. Na dva
   řádky se láme ručním zalomením z obsahu („Smysluplná<br>práce"), stejně
   jako v návrhu. Ne `--sp-h3`: ten končí na 35 px, kdežto Zeplin má tady
   i u karet služeb na homepage shodně 30.
   23 px navrch k mezeře mřížky dává 51 px pod spodní hranu ikon (návrh 50,8). */
.sp-duvod__nazev {
	margin-top: 23px;
	font-size: 1.875rem;
	line-height: 1.167;
	font-weight: 700;
}

/* 16/30 podle návrhu — řádkování 1,6 dělalo o 4,4 px nižší řádek */
.sp-duvod__text {
	font-size: var(--sp-text-velikost);
	line-height: 1.875;
	opacity: 0.85;
}

/* --- Karty otevřených pozic (kariéra) --------------------------------------
   Tři sloupce, karta na světlé ploše s ořezaným pravým horním rohem,
   ikonou pracovníka, názvem pozice, rozpětím mzdy a odrážkami.
   ------------------------------------------------------------------------ */

/* Návrh staví karty pozic na modrý blok ve mřížce 2 × 2 — obrysová karta
   se zaobleným rohem, ne ořezaným, a ikona v plné žluté bublině. */

.sp-pozice {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sp-rozestup);
	list-style: none;
}

/* Návrh má ikonu a název pozice na JEDNOM řádku a zbytek karty zarovnaný
   pod název, ne pod ikonu. Mřížka to zvládne bez zásahu do obsahu psaného
   v administraci: ikona zabere první sloupec, všechno ostatní druhý. */
/* Odsazení z návrhu: kruh ikony začíná 22 px od levé hrany karty a 20 px od
   horní, text karty 26 px za kruhem (x 206 → 268 → 294 při kartě na x 184),
   dole 42 px. */
.sp-pozice__karta {
	display: grid;
	grid-template-columns: auto 1fr;
	align-content: start;
	gap: var(--sp-mezera-4) 26px;
	height: 100%;
	padding: 20px 22px 42px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: var(--sp-zaobleni);
	color: var(--sp-bila);
	background: var(--sp-modra);
}

.sp-pozice__karta>* {
	grid-column: 2;
}

/* Kruh ikony je 62 px vysoký, ale první řádek mřížky má v návrhu jen 42
   (12 px nad názvem + 30 px řádku názvu) — mzda začíná prakticky na spodní
   hraně kruhu, ne 16 px pod ní. Záporný `margin-bottom` sníží příspěvek
   ikony do výšky řádku na 42; kresba zůstane celá a přesahuje do druhého
   řádku, kde je vedle ní jen prázdný první sloupec. */
.sp-pozice__ikona {
	grid-column: 1;
	grid-row: 1;
	align-self: start;
	margin-bottom: -20px;
	box-sizing: content-box;
	width: 30px;
	height: 38px;
	padding: 12px 16px;
	background: var(--sp-zluta);
	border-radius: 50%;
}

/* Celá karta má v návrhu řádkování 30 px: název 22, mzda 16 polotučně,
   text i odrážky 16. Dřívějších 20 / 19 tučně / 15 byl odhad. */
.sp-pozice__nazev {
	/* název je v návrhu svisle na středu kruhu ikony — 12 px pod horní hranou */
	margin-top: 12px;
	font-size: 1.375rem;
	line-height: 1.364;
	font-weight: 700;
}

.sp-pozice__mzda {
	font-size: var(--sp-text-velikost);
	line-height: 1.875;
	font-weight: 600;
}

.sp-pozice__text {
	font-size: var(--sp-text-velikost);
	line-height: 1.875;
}

/* Odrážky NEJSOU odsazené dál než tělo karty — v návrhu leží kolečko přesně
   pod textem karty (obojí x 294) a odsazený je až text položky, o 22 px. */
.sp-pozice__seznam {
	display: flex;
	flex-direction: column;
	gap: 12px;
	list-style: none;
	font-size: var(--sp-text-velikost);
	line-height: 1.875;
}

.sp-pozice__seznam li {
	position: relative;
	padding-left: 22px;
}

/* v návrhu jsou odrážky bílé kolečko, ne žluté — 6 px */
.sp-pozice__seznam li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.75em;
	width: 6px;
	height: 6px;
	background: currentColor;
	border-radius: 50%;
}

/* --- CTA banner ------------------------------------------------------------
   Fotka 1552 × 600 přes celý kontejner, přes ni tmavý překlad a vlevo
   nadpis s textem a žlutým tlačítkem. Kotva #cta je cíl tlačítka v hero,
   které vykresluje sp_hero() podle sp_cta_akce().
   ------------------------------------------------------------------------ */

.sp-cta {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 600px;
	/* 120 px podle návrhu: banner na x 184, text na x 304; svisle 124 nahoře
	   a 123 dole při výšce 600. Dřívějších 80 px bylo o polovinu méně. */
	padding: var(--sp-mezera-10);
	border-radius: var(--sp-zaobleni-velke);
	overflow: hidden;
	background: var(--sp-modra);
	color: var(--sp-bila);
	scroll-margin-top: 140px;
}

.sp-cta__foto {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sp-cta::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--sp-hero-preklad);
}

.sp-cta__telo {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sp-mezera-5);
	/* 674 px podle návrhu — stejně široký sloupec jako nadpis v úvodu sekce */
	max-width: 674px;
}

/* nadpis → tlačítko je v návrhu 64 px; 24 dává `gap` výše, zbytek tohle */
.sp-cta__telo .sp-tlacitko {
	margin-top: 40px;
}

/* ---------------------------------------------------------------------------
   Systémové stránky (Fáze 7)

   Mapa stránek, prohlášení o přístupnosti, vyhledávání a chyba 404. Návrh
   je nemá — přebírají vzhled záhlaví výpisu realizací, aby ze zbytku webu
   nevypadly.
   --------------------------------------------------------------------------- */

/* --- Modré záhlaví -------------------------------------------------------- */

.sp-systemova {
	position: relative;
	overflow: hidden;
}

.sp-systemova__krivka {
	position: absolute;
	top: 0;
	right: 0;
	width: 641px;
	max-width: 45%;
	opacity: 0.9;
	pointer-events: none;
	z-index: 0;
}

.sp-systemova__zahlavi {
	position: relative;
	z-index: 1;
	max-width: 800px;
}

.sp-systemova__zahlavi .sp-perex {
	margin-top: var(--sp-mezera-6);
}

/* --- Mapa stránek ---------------------------------------------------------
   Dvě úrovně: položky nabídky tučně, realizace pod nimi drobněji.
   ------------------------------------------------------------------------ */

.sp-mapa-stranek,
.sp-mapa-stranek__deti {
	list-style: none;
}

.sp-mapa-stranek>li {
	font-size: var(--sp-mezinadpis);
	font-weight: 700;
}

.sp-mapa-stranek>li+li {
	margin-top: var(--sp-mezera-5);
}

.sp-mapa-stranek__deti {
	margin-top: var(--sp-mezera-2);
	padding-left: var(--sp-mezera-6);
	border-left: 1px solid var(--sp-obrys);
}

.sp-mapa-stranek__deti .sp-mapa-stranek__odkaz {
	font-size: var(--sp-text-velikost);
	font-weight: 400;
}

.sp-mapa-stranek__odkaz {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sp-mapa-stranek__odkaz:hover {
	text-decoration: none;
}

/* --- Vyhledávání ----------------------------------------------------------
   Pole a tlačítko v jednom řádku; na úzkém okně pod sebou.
   ------------------------------------------------------------------------ */

.sp-hledani {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-mezera-4);
	max-width: 720px;
}

.sp-hledani__pole {
	flex: 1 1 260px;
	min-width: 0;
	padding: var(--sp-mezera-3) var(--sp-mezera-5);
	border: 1px solid var(--sp-obrys);
	border-radius: 999px;
	background: var(--sp-bila);
}

.sp-hledani__pole::placeholder {
	color: var(--sp-text-tlumeny);
	opacity: 1;
}

.sp-hledani__odeslat {
	flex: 0 0 auto;
	cursor: pointer;
}

.sp-hledani__zprava {
	font-size: var(--sp-mezinadpis);
}

.sp-hledani__nadpis {
	margin-top: var(--sp-mezera-7);
}

.sp-hledani__seznam {
	list-style: none;
	font-size: var(--sp-mezinadpis);
}

.sp-hledani__seznam a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sp-hledani__seznam a:hover {
	text-decoration: none;
}

/* --- Chyba 404 ------------------------------------------------------------ */

.sp-chyba__akce {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-mezera-4);
}

/* bublina se otevírá i tabulátorem — atributy doplňuje js/sp.js */
.sp-technologie__polozka:focus-within .sp-bublina {
	opacity: 1;
	visibility: visible;
}

/* ---------------------------------------------------------------------------
   Kariéra — svislý rytmus podle návrhu

   Obecná odsazení `.sp-blok` (80 nahoře, 64 dole) ani sourozenecká mezera
   `.sp-blok > * + *` (48) na téhle obrazovce nesedí ani u jednoho bloku —
   návrh tu dýchá mnohem víc. Hodnoty jsou naměřené v Zeplinu jako absolutní
   `y` na plátně 1920 × 6470 a v komentářích se na ně odkazuje.

   Třídy `sp-kariera-*` rozdává `_skladba.php`; komponenty `.sp-duvod*`,
   `.sp-pozice*` a `.sp-cta` používá jen kariéra, ty se proto ladí přímo
   u sebe výše v souboru.
   --------------------------------------------------------------------------- */

/* hero končí na 1076, text nadnadpisu úvodu začíná na 1196 — box je o 3,5 px
   výš, protože řádkování 30 je vyšší než výška verzálek */
.sp-kariera-uvod {
	padding-top: 112px;
	padding-bottom: 0;
}

/* nadnadpis → nadpis je v návrhu 20 px (box 1222 → 1243), ne obecných 24 */
.sp-kariera-uvod .sp-uvod__hlavicka h2 {
	margin-top: 20px;
}

/* nadpis končí na 1429, žlutá linka leží na 1486 */
.sp-kariera-uvod .sp-uvod__hlavicka .sp-linka {
	margin-top: 57px;
}

/* žlutá linka končí na 1494, „Co vám práce u nás přinese" začíná na 1590 */
.sp-kariera-uvod .sp-technologie {
	margin-top: 96px;
}

/* poslední pilulka končí na 1811, „Spolupracujeme s" začíná na 1903,5;
   loga na 1970 a pás fotek na 2138 */
.sp-kariera-partneri {
	padding-top: 92px;
	padding-bottom: 120px;
}

.sp-kariera-partneri .sp-partneri__seznam {
	margin-top: 36px;
}

/* pás fotek končí na 2512, ukazatel leží na 2542 */
.sp-kariera-tym .sp-pas-fotek__ukazatel {
	margin-top: 30px;
}

/* ukazatel končí na 2545, „Co vám práce u nás přinese" začíná na 2696 */
.sp-kariera-tym>.sp-podnadpis {
	margin-top: 151px;
}

/* podnadpis končí na 2726, ikony důvodů začínají na 2788 */
.sp-kariera-tym>.sp-duvody {
	margin-top: 62px;
}

/* texty důvodů končí na 3133, „Aktuálně hledáme" začíná na 3332 */
.sp-kariera-tym>.sp-duvody+.sp-podnadpis {
	margin-top: 197px;
}

/* podnadpis končí na 3362, karty pozic začínají na 3424 */
.sp-kariera-tym>.sp-pozice {
	margin-top: 62px;
}

/* Karty pozic jsou v návrhu 755 px široké s mezerou 42 px vodorovně
   a 48 px svisle — ne 32 / 32 jako obecný `--sp-rozestup`. */
.sp-kariera-tym .sp-pozice {
	gap: var(--sp-mezera-7) 42px;
}

/* CTA banner končí na 4830, „Nedávné realizace" začíná na 4950 */
.sp-kariera-cta {
	padding-bottom: 120px;
}

/* tlačítko „Další realizace" končí na 5736, patička začíná na 5856 */
.sp-kariera-realizace {
	padding-bottom: 120px;
}

/* --- Žluté křivky na kariéře ----------------------------------------------
   Návrh má na stránce pět instancí téže kresby, všechny 509,4 px vysoké:
   hero (y 438,6 vlevo, 1019,8 široká), úvod (1626,3 vpravo, 641,9),
   karty pozic (3564,7 vlevo, 603,9), nedávné realizace (5346,2 vpravo, 641,9)
   a patička (5916,7 vlevo, 771,9). Hero a patičku kreslí vlastní `<img>`
   v layout.css, zbytek pseudoprvek `.sp-krivka-*`.

   Svisle se posouvá BOX (`top`), ne pozadí — vodorovné kotvení řeší
   `left`/`right` ve sdíleném pravidle výše.
   ------------------------------------------------------------------------ */

/* blok začíná na 1080, křivka na 1626,3 */
.sp-kariera-uvod::before {
	top: 546px;
}

/* Blok týmu začíná na 2139,7, křivka na 3564,7 — tedy 140 px pod horní
   hranou prvního řádku karet pozic, stejně jako v návrhu. Vlevo je tahle
   instance užší než hero varianta: 603,9 místo 1019,8. */
.sp-kariera-tym::before {
	top: 1425px;
	width: 603.9px;
	max-width: 31.45%;
	aspect-ratio: 603.9 / 509.4;
}

/* Křivka v nedávných realizacích končí v návrhu přesně na horní hraně
   patičky (5855,6), proto se kotví spodkem bloku, ne `top`. */
.sp-kariera-realizace::before {
	top: auto;
	bottom: 0;
}

/* --- Vynořování obsahu při scrollu -----------------------------------------
   Třídy nasazuje až js/sp.js. Koncový stav je `transform: none`, ne nulový
   posun: bublina ani přilepený prvek nesmí zůstat ve vlastním stohovacím
   kontextu.
   ------------------------------------------------------------------------ */

.sp-anim-pripraveno .sp-anim {
	opacity: 0;
	transform: translateY(56px);
	transition: opacity 0.8s ease, transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.sp-anim-pripraveno .sp-anim--videt {
	opacity: 1;
	transform: none;
}

@media print {
	.sp-anim-pripraveno .sp-anim {
		opacity: 1;
		transform: none;
	}
}