/* ---------------------------------------------------------------------------
   SP Power — responsivita
   Breakpointy 1400 / 1024 / 768 / 390. Načítá se jako poslední, přebíjí
   base.css i components.css.
   --------------------------------------------------------------------------- */

/* --- do 1400 px ----------------------------------------------------------- */

@media (max-width: 1400px) {
	:root {
		--sp-rez-x: 84px;
		--sp-rez-y: 68px;
		--sp-rozestup: 24px;
	}

	.sp-sekce {
		padding-top: var(--sp-mezera-8);
		padding-bottom: var(--sp-mezera-8);
	}
}

/* --- do 1024 px ----------------------------------------------------------- */

@media (max-width: 1024px) {
	:root {
		--sp-rez-x: 72px;
		--sp-rez-y: 59px;
	}

	.sp-mrizka--4 { grid-template-columns: repeat(2, 1fr); }
	.sp-mrizka--3 { grid-template-columns: repeat(2, 1fr); }
}

/* --- do 768 px ------------------------------------------------------------ */

@media (max-width: 768px) {
	:root {
		--sp-rez-x: 60px;
		--sp-rez-y: 49px;
		--sp-kontejner-odsazeni: 16px;
		--sp-zaobleni: 12px;
		--sp-zaobleni-velke: 20px;
	}

	.sp-sekce {
		padding-top: var(--sp-mezera-7);
		padding-bottom: var(--sp-mezera-7);
	}
}

/* --- do 560 px (jednosloupcové rozložení) --------------------------------- */

@media (max-width: 560px) {
	.sp-mrizka--2,
	.sp-mrizka--3,
	.sp-mrizka--4 {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------------
   Plášť — hlavička, mobilní nabídka, patička (Fáze 2)
   --------------------------------------------------------------------------- */

/* --- do 1200 px — nabídka se sklápí do hamburgeru -------------------------
   Sedm položek s mezerou 55 px plus logo se pod tuto šířku nevejde.
   ------------------------------------------------------------------------ */

@media (max-width: 1200px) {

	.sp-hamburger {
		display: flex;
	}

	/* Návrh má v mobilní hlavičce jen hamburger — kolečko „cs" tam není
	   (přepínač jazyka je stejně jen vizuální, CMS vícejazyčnost neumí). */
	.sp-jazyk {
		display: none;
	}

	.sp-hlavicka__nastroje {
		gap: var(--sp-mezera-4);
	}

	/* nabídka se rozbalí přes celou plochu pod hlavičkou */
	.sp-navigace {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: -1;
		display: flex;
		flex-direction: column;
		margin-left: 0;
		padding: 218px var(--sp-kontejner-odsazeni) var(--sp-kontejner-odsazeni);
		background: var(--sp-modra);
		overflow-y: auto;
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--sp-prechod), visibility var(--sp-prechod);
	}

	.sp-navigace--otevrena {
		opacity: 1;
		visibility: visible;
	}

	.sp-hlavicka--pevna .sp-navigace {
		padding-top: 110px;
	}

	/* Posunuté položky nabídky nesmí přejet přes logo. Vnitřek hlavičky se
	   maluje nad nabídkou (ta má z-index -1), stačí mu dát pozadí. */
	.sp-hlavicka__vnitrek {
		transition: background var(--sp-prechod);
	}

	.sp-nabidka-otevrena .sp-hlavicka__vnitrek {
		background: var(--sp-modra);
	}

	.sp-menu {
		flex: none;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.sp-menu > .sp-menu__polozka {
		border-bottom: 1px solid rgba(255, 255, 255, 0.22);
	}

	.sp-menu__odkaz {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--sp-mezera-4);
		padding: 13px 0;
		font-size: 1.375rem;
	}

	.sp-menu__odkaz::after {
		content: "";
		flex: none;
		width: 18px;
		height: 18px;
		background: currentColor;
		-webkit-mask: url("../images/sipka.svg") center / contain no-repeat;
		mask: url("../images/sipka.svg") center / contain no-repeat;
		transition: transform var(--sp-prechod);
	}

	.sp-menu__odkaz:hover::after {
		transform: translateX(var(--sp-mezera-1));
	}

	/* podnabídka na mobilu nevyskakuje, stojí rovnou pod rodičem */
	.sp-menu__podnabidka {
		position: static;
		opacity: 1;
		visibility: visible;
		min-width: 0;
		margin-top: var(--sp-mezera-4);
		padding: 0;
		box-shadow: none;
		display: flex;
		flex-direction: column;
		gap: var(--sp-mezera-3);
	}

	.sp-menu__odkaz--podnabidka {
		padding: 0;
		font-size: var(--sp-text-velikost);
	}

	.sp-menu__odkaz--podnabidka::after {
		content: none;
	}

	/* Spodek zabírá zbytek výšky. Křivka je kotvená dole, takže na nižším
	   telefonu ořízne svůj horní konec a ke kontaktu se nikdy nepřiblíží;
	   když se nabídka nevejde, posouvá se celá (.sp-navigace má overflow). */
	.sp-navigace__spodek {
		position: relative;
		flex: 1 0 auto;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		gap: 14px;
		margin: 0 calc(-1 * var(--sp-kontejner-odsazeni)) calc(-1 * var(--sp-kontejner-odsazeni));
		padding: var(--sp-mezera-6) var(--sp-kontejner-odsazeni) var(--sp-kontejner-odsazeni);
	}

	.sp-navigace__spodek::before {
		content: "";
		position: absolute;
		inset: 0;
		background: url("../images/krivka-paticka.png") left bottom / 470px auto no-repeat;
		pointer-events: none;
		opacity: 0;
		transition: opacity 0.12s ease;
	}

	.sp-navigace--otevrena .sp-navigace__spodek::before {
		opacity: 1;
		transition: opacity 0.6s ease 0.4s;
	}

	.sp-navigace__udaj {
		position: relative;
		display: flex;
		flex-direction: column;
	}

	.sp-navigace__udaj .sp-popisek {
		line-height: 1.4;
		color: var(--sp-zluta);
	}

	.sp-navigace__udaj a {
		align-self: flex-start;
		color: var(--sp-bila);
		font-size: 1.125rem;
		font-weight: 600;
		line-height: 1.3;
	}

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

	/* Položky naskakují po sobě, pořadí --sp-poradi doplňuje js/sp.js.
	   Zavírání bez zpoždění, ať nabídka nezdržuje. */
	.sp-menu > .sp-menu__polozka,
	.sp-navigace__udaj {
		opacity: 0;
		transform: translateY(18px);
		transition: opacity 0.12s ease, transform 0.12s ease;
	}

	.sp-navigace--otevrena .sp-menu > .sp-menu__polozka,
	.sp-navigace--otevrena .sp-navigace__udaj {
		opacity: 1;
		transform: none;
		transition:
			opacity 0.42s ease calc(var(--sp-poradi, 0) * 50ms + 80ms),
			transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--sp-poradi, 0) * 50ms + 80ms);
	}

	@media (prefers-reduced-motion: reduce) {
		.sp-menu > .sp-menu__polozka,
		.sp-navigace__udaj,
		.sp-navigace--otevrena .sp-menu > .sp-menu__polozka,
		.sp-navigace--otevrena .sp-navigace__udaj {
			transform: none;
			transition: none;
		}
	}

	/* při otevřené nabídce se stránka pod ní nescrolluje */
	body.sp-nabidka-otevrena {
		overflow: hidden;
	}
}

/* --- do 1024 px — nižší hlavička ------------------------------------------ */

@media (max-width: 1024px) {

	.sp-hlavicka {
		height: 116px;
	}

	.sp-hlavicka--pevna {
		height: 88px;
	}

	.sp-hlavicka__logo img {
		height: 46px;
	}

	.sp-hlavicka--pevna .sp-hlavicka__logo img {
		height: 38px;
	}

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

	.sp-hlavni--hero {
		padding-top: 0;
	}

	/* Detail realizace fotku nemá — modrý blok začíná rovnou pod průhlednou
	   hlavičkou a drobeček z návrhu leží v jeho horním odsazení. Na 1920 se
	   vejde pod logo (hlavička 218, drobeček 192), tady je hlavička jen 116 px
	   a obecné odsazení `.sp-blok` (64, pod 768 px 48) by drobeček nakreslilo
	   přes logo. Dvojitá třída je tu proto, aby ho užší `.sp-blok` níž v téhle
	   souboru nepřebily. */
	.sp-blok.sp-detail {
		padding-top: calc(116px + var(--sp-mezera-6));
	}

	.sp-navigace {
		padding-top: 116px;
	}

	.sp-paticka__vnitrek {
		grid-template-columns: 1fr 1fr;
		gap: var(--sp-mezera-8) var(--sp-rozestup);
	}

	.sp-paticka__sloupec--hlavni {
		grid-column: 1 / -1;
	}

	/* prázdný nadpis čtvrtého sloupce drží zarovnání jen na širokém rozložení */
	.sp-paticka__nadpis--prazdny {
		display: none;
	}
}

/* --- do 768 px ------------------------------------------------------------ */

@media (max-width: 768px) {

	.sp-paticka {
		padding-top: var(--sp-mezera-8);
	}

	.sp-paticka__krivka {
		max-width: 100%;
	}

	.sp-paticka__kontakt {
		margin-top: var(--sp-mezera-7);
		gap: var(--sp-mezera-6);
	}

	.sp-paticka__copyright {
		margin-top: var(--sp-mezera-7);
		text-align: left;
	}
}

/* --- do 560 px ------------------------------------------------------------ */

@media (max-width: 560px) {

	.sp-paticka__vnitrek {
		grid-template-columns: 1fr;
	}

	.sp-paticka__slogan {
		max-width: none;
	}
}

/* ---------------------------------------------------------------------------
   Obsahové stránky — hero a komponenty (Fáze 3)
   --------------------------------------------------------------------------- */

/* --- do 1400 px ----------------------------------------------------------- */

@media (max-width: 1400px) {

	.sp-uvod {
		gap: var(--sp-mezera-7) var(--sp-mezera-8);
	}

	.sp-dlazdice {
		gap: var(--sp-mezera-6);
	}

	.sp-dlazdice__polozka {
		padding: var(--sp-mezera-6);
	}

	.sp-certifikace__loga img {
		height: 170px;
	}

	.sp-pas-fotek__polozka img {
		height: 300px;
	}
}

/* --- do 1200 px — hlavička je nižší, hero se posouvá ---------------------- */

@media (max-width: 1200px) {

	.sp-hero {
		padding-top: 200px;
	}
}

/* --- do 1024 px ----------------------------------------------------------- */

@media (max-width: 1024px) {

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

	.sp-hero {
		min-height: 620px;
		padding-top: 170px;
		padding-bottom: var(--sp-mezera-8);
	}

	/* na užší obrazovce se kolečko nevejde vedle textu k pravé hraně —
	   vrací se do toku pod perex a centruje se na střed hero */
	.sp-hero__scroll {
		position: relative;
		right: auto;
		bottom: auto;
		align-self: center;
		margin-top: var(--sp-mezera-7);
	}

	.sp-hero--uvodni .sp-hero__scroll {
		bottom: auto;
	}

	.sp-hero__krivka {
		width: 80%;
	}

	/* dvousloupcové bloky se skládají pod sebe */
	.sp-uvod,
	.sp-mapa,
	.sp-struktura-obal {
		grid-template-columns: 1fr;
	}

	.sp-dlazdice {
		grid-template-columns: repeat(2, 1fr);
	}

	/* rohová značka patří jen mezi dlaždice v jedné řadě */
	.sp-dlazdice__polozka:nth-child(2n)::after {
		display: none;
	}

	.sp-certifikace {
		grid-template-columns: 1fr;
		justify-content: start;
	}

	.sp-pas-fotek__polozka {
		width: 420px;
	}
}

/* --- do 900 px — organizační struktura do sloupce -------------------------
   Spojnice mezi sloupci nedávají v jednosloupcovém rozložení smysl; zůstává
   jedna svislá osa a odsazení mezi úrovněmi.
   ------------------------------------------------------------------------ */

@media (max-width: 900px) {

	.sp-struktura__uroven {
		grid-template-columns: 1fr;
		gap: var(--sp-mezera-7);
		margin-top: var(--sp-mezera-7);
		padding-top: var(--sp-mezera-7);
	}

	.sp-struktura__uroven::before {
		top: calc(-1 * var(--sp-mezera-7));
		height: var(--sp-mezera-7);
	}

	.sp-struktura__uroven::after,
	.sp-struktura__uzel::before,
	.sp-struktura__uroven--vedeni .sp-struktura__uzel::after {
		display: none;
	}

	.sp-struktura__uroven--dve > .sp-struktura__uzel:last-child {
		grid-column: auto;
	}

	.sp-struktura__box {
		max-width: none;
	}
}

/* --- do 768 px ------------------------------------------------------------ */

@media (max-width: 768px) {

	.sp-blok {
		padding-top: var(--sp-mezera-7);
		padding-bottom: var(--sp-mezera-7);
	}

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

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

	.sp-hero {
		min-height: 520px;
		padding-top: 150px;
	}

	.sp-hero__perex {
		margin-top: var(--sp-mezera-5);
	}

	.sp-pobocky {
		grid-template-columns: 1fr;
	}

	.sp-bublina {
		grid-template-columns: 1fr;
		left: 0;
		transform: none;
	}

	.sp-bublina__foto {
		width: 100%;
		height: 140px;
	}

	.sp-pas-fotek__polozka {
		width: 300px;
	}

	.sp-pas-fotek__polozka img {
		height: 230px;
	}

	.sp-certifikace__loga img {
		height: 120px;
	}
}

/* --- do 560 px ------------------------------------------------------------ */

@media (max-width: 560px) {

	.sp-dlazdice {
		grid-template-columns: 1fr;
	}

	.sp-dlazdice__polozka::after {
		display: none;
	}

	.sp-kontakt {
		gap: var(--sp-mezera-5);
	}

	.sp-kvalifikace > li {
		width: 100%;
	}

	.sp-realizace__seznam {
		grid-template-columns: 1fr;
	}
}

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

@media (max-width: 1400px) {

	.sp-karta--velka .sp-karta__foto img,
	.sp-karta--velka .sp-karta__bez-fotky {
		min-height: 460px;
	}

	.sp-detail__mrizka {
		column-gap: var(--sp-mezera-8);
	}
}

@media (max-width: 1200px) {

	.sp-vypis__seznam {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* --- do 1024 px — mřížka na dva sloupce, detail do jednoho ---------------- */

@media (max-width: 1024px) {

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

	.sp-detail__mrizka {
		grid-template-columns: 1fr;
	}

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

	.sp-karta--velka .sp-karta__foto img,
	.sp-karta--velka .sp-karta__bez-fotky {
		min-height: 380px;
	}

	.sp-karta--velka .sp-karta__telo {
		padding: var(--sp-mezera-6);
	}
}

/* --- do 768 px ------------------------------------------------------------ */

@media (max-width: 768px) {

	.sp-vypis__krivka {
		display: none;
	}

	.sp-vypis__seznam {
		row-gap: var(--sp-mezera-6);
	}

	.sp-vypis__strankovani {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}

	.sp-vypis__strankovani .sp-tlacitko {
		justify-content: center;
	}
}

/* --- do 560 px — jeden sloupec, velká karta se chová jako ostatní --------- */

@media (max-width: 560px) {

	.sp-vypis__seznam {
		grid-template-columns: 1fr;
	}

	.sp-vypis__polozka--velka {
		grid-column: auto;
	}

	.sp-karta--velka .sp-karta__foto img,
	.sp-karta--velka .sp-karta__bez-fotky {
		min-height: 300px;
	}

	.sp-karta--velka .sp-karta__telo {
		padding: var(--sp-mezera-5);
	}
}

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

   Mobilní návrh („SP Power_homepage_responsive", 390 × 7067) má hero vysoké
   667 px a fotky karet služeb až na y = 990 — karty do hero **nezasahují**.
   Přesah se proto s klesající šířkou zmenšuje a pod 768 px mizí docela.
   --------------------------------------------------------------------------- */

@media (max-width: 1400px) {
	:root {
		--sp-sluzby-presah: 170px;
	}

	.sp-cta {
		min-height: 520px;
		padding: var(--sp-mezera-8);
	}
}

@media (max-width: 1200px) {
	:root {
		--sp-sluzby-presah: 130px;
	}

	.sp-duvody {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--sp-mezera-7) var(--sp-rozestup);
	}
}

/* --- do 1024 px — služby a pozice do dvou sloupců -------------------------- */

@media (max-width: 1024px) {
	:root {
		--sp-sluzby-presah: 90px;
	}

	.sp-sluzby__seznam {
		row-gap: var(--sp-mezera-8);
	}

	.sp-partneri__seznam {
		justify-content: flex-start;
		gap: var(--sp-mezera-8);
	}

	/* Sedm pozic je z návrhu pro plátno 1920. Užší pás by je zalomil do druhé
	   řádky, což vypadá jako chyba — opakovaná loga proto mizí první. */
	.sp-partneri__polozka--opakovane {
		display: none;
	}

	.sp-cta {
		min-height: 460px;
	}
}

/* --- do 768 px — karty služeb už do hero nezasahují ------------------------ */

@media (max-width: 768px) {
	:root {
		--sp-sluzby-presah: 0px;
		/* bez přesahu leží nadpis na modré ploše a nemá se kam posouvat */
		--sp-sluzby-nadpis: 0px;
	}

	/* bez přesahu potřebuje blok zase vlastní horní odsazení */
	.sp-sluzby {
		padding-top: var(--sp-mezera-7);
	}

	.sp-hero--uvodni {
		padding-bottom: var(--sp-mezera-9);
	}

	.sp-duvod__ikona {
		height: 56px;
	}

	.sp-pozice {
		grid-template-columns: 1fr;
	}

	.sp-pozice__karta {
		padding: var(--sp-mezera-6) var(--sp-mezera-5);
	}

	/* pás log se na úzké obrazovce láme do mřížky — při space-between by
	   zbyla osamocená loga na koncích řádků */
	.sp-partneri__seznam {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--sp-mezera-7) var(--sp-mezera-6);
	}

	.sp-partneri__polozka img {
		max-height: 44px;
	}

	.sp-cta {
		min-height: 0;
		padding: var(--sp-mezera-7) var(--sp-mezera-5);
	}

	/* na úzké obrazovce už vodorovný gradient text nekryje — přes fotku
	   proto jde svislý, stejně jako u hero (viz sekce „Obsahové stránky") */
	.sp-cta::after {
		background: linear-gradient(180deg, rgba(3, 34, 130, 0.55) 0%, rgba(3, 34, 130, 0.92) 70%);
	}
}

/* --- do 560 px ------------------------------------------------------------ */

@media (max-width: 560px) {

	.sp-duvody {
		grid-template-columns: 1fr;
		gap: var(--sp-mezera-6);
	}

	.sp-partneri__seznam {
		gap: var(--sp-mezera-6) var(--sp-mezera-5);
	}

	.sp-partneri__polozka img {
		max-height: 36px;
	}
}

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

@media (max-width: 1200px) {

	.sp-systemova__krivka {
		max-width: 38%;
	}
}

@media (max-width: 768px) {

	.sp-systemova__krivka {
		display: none;
	}

	.sp-mapa-stranek__deti {
		padding-left: var(--sp-mezera-4);
	}
}

@media (max-width: 560px) {

	.sp-hledani__odeslat {
		flex: 1 1 100%;
		justify-content: center;
	}

	.sp-chyba__akce .sp-tlacitko {
		flex: 1 1 100%;
		justify-content: center;
	}
}