/* ---------------------------------------------------------------------------
   SP Power — plášť stránky
   Hlavička, patička, drobečková navigace. Rozměry naměřené v návrhu
   (Zeplin, obrazovky „SP Power_homepage" a „SP Power_scrollovací menu").
   Načítá se za base.css, před components.css.
   --------------------------------------------------------------------------- */

/* --- Hlavička -------------------------------------------------------------
   V návrhu leží přes hero fotku bez vlastního pozadí; po odscrollování
   se zmenší na modrý pruh 110 px. Průhlednou variantu zapíná modifikátor
   --pruhledna, který nasadí Fáze 3 na stránky s hero blokem.
   ------------------------------------------------------------------------ */

.sp-hlavicka {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	height: 218px;
	background: var(--sp-modra);
	transition: height var(--sp-prechod), background var(--sp-prechod);
}

.sp-hlavicka--pruhledna {
	background: transparent;
}

/* Průhledná hlavička kreslí jen svůj řádek nahoře, ale její fixed box je
   vysoký celou hlavičku — a pod ním leží podle návrhu drobečková navigace
   detailu (y 192–222 na 1920). Box jí bral kliknutí: odkaz „Výpis realizací"
   byl vidět, ale nešel otevřít (`elementFromPoint` v jeho středu vracel
   `.sp-hlavicka__vnitrek`). V průhledném stavu si proto hlavička bere jen
   kliknutí na vlastní ovládání a zbytek plochy pouští dál. Jakmile se po
   odscrollování přebarví na modrý pruh (--pevna), je zase plnou plochou —
   skrz neprůhledný pruh se na obsah pod ním klikat nesmí. */
.sp-hlavicka--pruhledna:not(.sp-hlavicka--pevna),
.sp-hlavicka--pruhledna:not(.sp-hlavicka--pevna) .sp-hlavicka__vnitrek {
	pointer-events: none;
}

.sp-hlavicka--pruhledna:not(.sp-hlavicka--pevna) .sp-hlavicka__logo,
.sp-hlavicka--pruhledna:not(.sp-hlavicka--pevna) .sp-navigace,
.sp-hlavicka--pruhledna:not(.sp-hlavicka--pevna) .sp-hlavicka__nastroje {
	pointer-events: auto;
}

/* stav po odscrollování — nasazuje js/sp.js */
.sp-hlavicka--pevna {
	height: 110px;
	background: var(--sp-modra);
}

.sp-hlavicka__vnitrek {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-mezera-6);
	height: 100%;
}

.sp-hlavicka__logo img {
	width: auto;
	transition: height var(--sp-prechod);
}

.sp-hlavicka__logo-slozene {
	height: 80px;
}

/* V přilepeném pruhu má návrh vodorovné logo 226 × 50, ne zmenšenou složenou
   variantu. Obě jsou v markupu a přepínají se tady, aby se při scrollu nic
   nedonačítalo. */
.sp-hlavicka__logo-vodorovne {
	display: none;
	height: 50px;
}

.sp-hlavicka--pevna .sp-hlavicka__logo-slozene {
	display: none;
}

.sp-hlavicka--pevna .sp-hlavicka__logo-vodorovne {
	display: block;
}

.sp-hlavicka__nastroje {
	display: flex;
	align-items: center;
	gap: 55px;
}

/* --- Hlavní nabídka -------------------------------------------------------- */

.sp-navigace {
	margin-left: auto;
}

.sp-menu {
	display: flex;
	align-items: center;
	gap: 55px;
	list-style: none;
}

.sp-menu__polozka {
	position: relative;
}

.sp-menu__odkaz {
	display: block;
	font-size: var(--sp-text-velikost);
	font-weight: 600;
	line-height: 1.2;
	color: var(--sp-bila);
	transition: color var(--sp-prechod);
}

.sp-menu__odkaz:hover,
.sp-menu__odkaz:focus-visible,
.sp-menu__odkaz--aktivni {
	color: var(--sp-zluta);
}

/* Podnabídka — v návrhu není, menu je ploché. CMS ale podstránky obsahuje
   (Reference má tři potomky) a bez rozbalení by nešly z nabídky otevřít. */
.sp-menu__podnabidka {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 10;
	min-width: 240px;
	margin-top: var(--sp-mezera-3);
	padding: var(--sp-mezera-4) 0;
	list-style: none;
	background: var(--sp-modra);
	border-radius: var(--sp-zaobleni);
	box-shadow: 0 12px 32px rgba(3, 34, 130, 0.25);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--sp-prechod), visibility var(--sp-prechod);
}

.sp-menu__polozka--rozbalovaci:hover .sp-menu__podnabidka,
.sp-menu__polozka--rozbalovaci:focus-within .sp-menu__podnabidka {
	opacity: 1;
	visibility: visible;
}

.sp-menu__odkaz--podnabidka {
	padding: var(--sp-mezera-2) var(--sp-mezera-5);
	font-weight: 400;
}

/* kontakt a křivka patří jen mobilní nabídce — responsive.css */
.sp-navigace__spodek {
	display: none;
}

/* --- Přepínač jazyka a hamburger ------------------------------------------- */

.sp-jazyk,
.sp-hamburger {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	flex: 0 0 auto;
	border: 1px solid var(--sp-obrys-bily);
	border-radius: 50%;
	font-size: var(--sp-menu);
	font-weight: 600;
	color: var(--sp-bila);
}

.sp-hamburger {
	display: none;
	border-color: var(--sp-obrys-bily);
}

/* tři proužky kreslené z jednoho prvku */
.sp-hamburger__pruzky,
.sp-hamburger__pruzky::before,
.sp-hamburger__pruzky::after {
	display: block;
	width: 18px;
	height: 2px;
	background: var(--sp-bila);
	transition: transform var(--sp-prechod), opacity var(--sp-prechod);
}

.sp-hamburger__pruzky {
	position: relative;
}

.sp-hamburger__pruzky::before,
.sp-hamburger__pruzky::after {
	content: "";
	position: absolute;
	left: 0;
}

.sp-hamburger__pruzky::before {
	top: -7px;
}

.sp-hamburger__pruzky::after {
	top: 7px;
}

/* otevřený stav — proužky do křížku */
.sp-hamburger[aria-expanded="true"] .sp-hamburger__pruzky {
	background: transparent;
}

.sp-hamburger[aria-expanded="true"] .sp-hamburger__pruzky::before {
	top: 0;
	transform: rotate(45deg);
}

.sp-hamburger[aria-expanded="true"] .sp-hamburger__pruzky::after {
	top: 0;
	transform: rotate(-45deg);
}

/* --- Obsahová oblast ------------------------------------------------------- */

.sp-hlavni {
	padding-top: 218px;
}

/* Fáze 3: stránky s hero blokem si odsazení ruší, hlavička leží přes fotku */
.sp-hlavni--hero {
	padding-top: 0;
}

.sp-drobecky-pas {
	padding-top: var(--sp-mezera-7);
}

/* --- Drobečková navigace --------------------------------------------------
   Návrh ji ukazuje na tmavém hero: ikona domu žlutá, předchozí úroveň žlutě,
   aktuální bíle. Varianta --na-svetlem je pro plochy bez hero.
   ------------------------------------------------------------------------ */

.sp-drobecky {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	font-size: var(--sp-popisek);
	line-height: 2.3;
}

.sp-drobecky__domu {
	display: flex;
	align-items: center;
	color: var(--sp-zluta);
}

.sp-drobecky__odkaz {
	font-weight: 600;
	color: var(--sp-zluta);
}

.sp-drobecky__aktualni {
	font-weight: 400;
	color: var(--sp-bila);
}

.sp-drobecky .sp-ikona--sipka-drobecky {
	color: var(--sp-bila);
}

.sp-drobecky--na-svetlem .sp-drobecky__domu,
.sp-drobecky--na-svetlem .sp-drobecky__odkaz {
	color: var(--sp-modra);
}

.sp-drobecky--na-svetlem .sp-drobecky__aktualni,
.sp-drobecky--na-svetlem .sp-ikona--sipka-drobecky {
	color: var(--sp-text-tlumeny);
}

/* --- Ikony kreslené maskou -------------------------------------------------
   Jednobarevná SVG vykreslená přes mask-image berou barvu z currentColor,
   takže tatáž ikona sedí na modrém hero i na světlé ploše.
   ------------------------------------------------------------------------ */

.sp-ikona {
	display: inline-block;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.sp-ikona--domu {
	width: 12px;
	height: 12px;
	-webkit-mask-image: url("../images/ico-domu.svg");
	mask-image: url("../images/ico-domu.svg");
}

.sp-ikona--sipka-drobecky {
	width: 9px;
	height: 9px;
	-webkit-mask-image: url("../images/sipka-drobecky.svg");
	mask-image: url("../images/sipka-drobecky.svg");
}

/* --- Patička ---------------------------------------------------------------
   Návrh: plocha #dee2e8 vysoká 614 px, bílá linka nahoře, žlutá křivka vlevo,
   čtyři sloupce od x = 186 / 737 / 1075 / 1459 při kontejneru 1552 px.
   ------------------------------------------------------------------------ */

.sp-paticka {
	position: relative;
	overflow: hidden;
	padding-top: var(--sp-mezera-10);
	padding-bottom: var(--sp-mezera-9);
	border-top: 1px solid var(--sp-bila);
	background: var(--sp-svetla);
	color: var(--sp-modra);
}

.sp-paticka__krivka {
	position: absolute;
	top: 60px;
	left: 0;
	width: 772px;
	max-width: 60%;
	height: auto;
	pointer-events: none;
}

.sp-paticka__vnitrek {
	position: relative;
	display: grid;
	grid-template-columns: 1.6fr 1fr 1.15fr 0.85fr;
	gap: var(--sp-rozestup);
}

.sp-paticka__slogan {
	font-size: var(--sp-h3);
	line-height: 1.12;
	font-weight: 700;
	max-width: 420px;
}

.sp-paticka__kontakt {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-mezera-7);
	margin-top: var(--sp-mezera-9);
}

.sp-paticka__udaj {
	display: flex;
	flex-direction: column;
}

.sp-paticka__hodnota {
	font-size: var(--sp-menu);
	line-height: 1.2;
	font-weight: 600;
}

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

.sp-paticka__sidlo {
	margin-top: var(--sp-mezera-5);
	font-size: var(--sp-text-karty);
	line-height: 1.47;
	font-weight: 600;
}

.sp-paticka__pravni {
	margin-top: var(--sp-mezera-7);
	max-width: 380px;
	font-size: var(--sp-popisek);
	line-height: 1.54;
	font-weight: 400;
}

.sp-paticka__nadpis {
	margin-bottom: var(--sp-mezera-5);
	font-weight: 400;   /* kit nemá řez 500, viz --sp-pismo */
}

.sp-paticka__seznam {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--sp-mezera-7);
}

.sp-paticka__seznam a {
	font-size: var(--sp-menu);
	line-height: 1.2;
	font-weight: 600;
}

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

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

.sp-paticka__adresa {
	margin-top: var(--sp-mezera-3);
	font-size: var(--sp-text-karty);
	line-height: 1.47;
	font-weight: 400;
}

/* spodní řádek patičky — copyright vpravo, systémové odkazy vlevo */
.sp-paticka__spodek {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-mezera-4);
	margin-top: var(--sp-mezera-8);
}

.sp-paticka__copyright {
	margin-left: auto;
	font-size: var(--sp-popisek);
	font-weight: 400;
}

.sp-paticka__systemove {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-mezera-5);
	order: -1;
	list-style: none;
	font-size: var(--sp-popisek);
	font-weight: 400;
}

.sp-paticka__systemove a {
	color: var(--sp-text-tlumeny);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sp-paticka__systemove a:hover {
	color: var(--sp-modra);
}

/* ---------------------------------------------------------------------------
   Hero blok (Fáze 3)
   Návrh: fotka přes celou šířku (1920 × 1080 na „o společnosti", 1920 × 923
   na „detailu služby"), tmavý gradient zleva, žlutá křivka u dolní hrany,
   nadpis a perex 104 px nad spodkem, kulaté tlačítko se šipkou vpravo dole.
   --------------------------------------------------------------------------- */

.sp-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: clamp(560px, 56.25vw, 1080px);
	padding-top: 260px;
	padding-bottom: 104px;
	overflow: hidden;
	background: var(--sp-modra);
	color: var(--sp-bila);
}

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

/* dva překryvy: vodorovný kvůli čitelnosti textu vlevo, svislý kvůli
   průhledné hlavičce, která na fotce leží bez vlastního pozadí.
   Oba jsou ČERNÉ — v návrhu je scrim neutrální, ne modrý (viz base.css). */
.sp-hero__preklad {
	position: absolute;
	inset: 0;
	background:
		var(--sp-hero-preklad),
		var(--sp-hero-preklad-svisly);
}

/* křivka v návrhu leží u dolní hrany a zabírá 1019 z 1920 px */
.sp-hero__krivka {
	position: absolute;
	left: 0;
	top: 450px;
	width: 53%;
	max-width: 1019px;
	opacity: 0.9;
	pointer-events: none;
}

.sp-hero__vnitrek {
	position: relative;
	z-index: 1;
	margin-top: 120px;
}

/* Šířka odečtená z návrhu, ne `ch`: v `ch` se sloupec mění s písmem, takže
   se s náhradním fontem lámalo jinak než v návrhu. Při 760 px sedí zlom
   nadpisu na titulce („…údržbu" / „a servis energetických" / „provozů")
   i na kariéře — obojí ale jen ve spojení s nezlomitelnými mezerami po
   jednopísmenných předložkách, které dělá sp_nezlomit(). */
.sp-hero__nadpis {
	max-width: 760px;
}

/* 616 px = pravá hrana perexu v návrhu (kontejner 184 → 800). */
.sp-hero__perex {
	max-width: 616px;
	margin-top: var(--sp-mezera-7);
	font-size: var(--sp-mezinadpis);
	line-height: 1.58;
	font-weight: 600;
}

/* výzva k akci v hero — v návrhu ji má obrazovka „kariéra" */
.sp-hero__akce {
	margin-top: var(--sp-mezera-7);
}

/* kulaté tlačítko na hraně kontejneru, 62 px podle návrhu */
.sp-hero__scroll {
	position: absolute;
	right: max(var(--sp-kontejner-odsazeni), calc((100% - var(--sp-kontejner)) / 2));
	bottom: 104px;
	z-index: 1;
	width: 62px;
	height: 62px;
}

/* Hero stránky služby je v návrhu 923 px vysoké, ne 1080 jako ostatní. */
.sp-hero--sluzba {
	min-height: clamp(560px, 48.07vw, 923px);
}

/* hero úvodní stránky je v návrhu vyšší (1114 px) a karty služeb do něj
   zespodu zasahují o --sp-sluzby-presah — text i kulaté tlačítko proto
   končí nad hranou, kde karty začínají */
/* Hero úvodní stránky je vysoké 1114 px a text v něm končí 417 px nad
   spodní hranou — tedy nad přesahem karet (214), nad blokem nadpisu
   „Nabízené služby" (78) a ještě 125 px volna nad ním. Odečteno z návrhu:
   spodek perexu 697, spodní hrana hero 1114. */
.sp-hero--uvodni {
	min-height: clamp(600px, 58vw, 1114px);
	padding-bottom: calc(var(--sp-sluzby-presah) + var(--sp-sluzby-nadpis) + 125px);
}

.sp-hero--uvodni .sp-hero__scroll {
	bottom: calc(var(--sp-sluzby-presah) + var(--sp-sluzby-nadpis) + 125px);
}

/* Úvodní hero je vyšší, takže v něm křivka leží výš než na ostatních
   stránkách — tam ji spodní hrana hero zastihne dřív. */
.sp-hero--uvodni .sp-hero__krivka {
	top: 280px;
}

.sp-ikona--sipka-dolu {
	width: 15px;
	height: 15px;
	-webkit-mask-image: url("../images/sipka-scroll.svg");
	mask-image: url("../images/sipka-scroll.svg");
}