/* ---------------------------------------------------------------------------
   SP Power — základ nové šablony
   Paleta, typografie, reset a kontejner. Hodnoty naměřené v návrhu (Zeplin,
   projekt „SP Power redesign"), viz .claude/redesign/design.md.
   --------------------------------------------------------------------------- */

/* --- Písmo ---------------------------------------------------------------
   BC Novatica CYR z Adobe Fonts, kit `uxh0tou` — `<link>` je v _head.php.
   Kit nese **jen řezy 400 / 600 / 700**; návrh místy sází 500, ale ten
   v kitu není a prohlížeč by ho syntetizoval z 400. Tři místa, která ho
   dřív žádala (.sp-drobny, .sp-paticka__nadpis, .sp-pobocka__udaje), mají
   proto natvrdo 400. Nové pravidlo `font-weight: 500` nepíšeme.
   Náhradní rodina za kitem je pojistka pro doménu, která ještě není
   v Adobe Fonts ve Web Projectu.
   ------------------------------------------------------------------------ */

:root {
	/* barvy z návrhu */
	--sp-modra: #032282;
	--sp-zluta: #fce900;
	--sp-bila: #ffffff;
	--sp-svetla: #dee2e8;

	/* odvozené odstíny — nejsou v návrhu, dopočítané pro stavy a překryvy */
	--sp-modra-tmava: #021a63;
	--sp-zluta-tmava: #e0d000;
	--sp-svetla-tmava: #c8cdd6;
	--sp-text: var(--sp-modra);
	--sp-text-tlumeny: #5a6478;
	--sp-obrys: rgba(3, 34, 130, 0.25);
	--sp-obrys-bily: rgba(255, 255, 255, 0.5);

	/* Tmavý překryv přes hero fotku. V návrhu jsou to tři vrstvy nad sebou
	   (Rectangle 27 / 1 / 40), všechny z ČISTĚ ČERNÉ — ne z modré. Modrý
	   překryv fotky domodra a na webu se to lišilo od návrhu na každé stránce.
	   Hodnoty odečtené z návrhu: vodorovný scrim klesá 0.69 → 0.52 na 41 %
	   a pak strmě na nulu v 60 % šířky. */
	--sp-hero-preklad: linear-gradient(90deg, rgba(0, 0, 0, 0.69) 0%, rgba(0, 0, 0, 0.55) 34%, rgba(0, 0, 0, 0.52) 41%, rgba(0, 0, 0, 0) 60%);

	/* Svislý scrim pod hlavičkou — logo a nabídka leží na fotce bez pozadí.
	   Návrh: 0.72 u horní hrany, nula ve 24 % výšky hero. */
	--sp-hero-preklad-svisly: linear-gradient(180deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0) 24%);

	/* písmo */
	--sp-pismo: "bc-novatica-cyr", "BCNovaticaCYR", "Helvetica Neue", Arial, sans-serif;

	/* typografická škála — clamp() mezi 390 a 1920 px, hodnoty z návrhu */
	--sp-h1: clamp(2.118rem, 1.5686vw + 2.118rem, 4rem);      /* 40 → 64 */
	--sp-h2: clamp(1.917rem, 1.1111vw + 1.917rem, 3.25rem);   /* 35 → 52 */
	--sp-h3: clamp(1.325rem, 0.7190vw + 1.325rem, 2.188rem);  /* 24 → 35 */
	--sp-h4: clamp(1.373rem, 0.5229vw + 1.373rem, 2rem);      /* 24 → 32 */
	--sp-nadpis-karty: clamp(1.248rem, 0.5229vw + 1.248rem, 1.875rem); /* 22 → 30 */
	--sp-titulek-karty: 1.25rem;   /* 20 — v návrhu stejné na mobilu i desktopu */
	--sp-mezinadpis: clamp(0.953rem, 0.1961vw + 0.953rem, 1.188rem);   /* 16 → 19 */
	--sp-text-velikost: 1rem;      /* 16 */
	--sp-menu: 1rem;               /* 16 — naměřeno v návrhu (w600) */
	--sp-text-karty: 0.9375rem;    /* 15 */
	--sp-popisek: clamp(0.734rem, 0.0654vw + 0.734rem, 0.8125rem);     /* 12 → 13 */
	--sp-drobny: 0.75rem;          /* 12 */

	/* proklad — poměry z návrhu */
	--sp-proklad-h1: 1.03;
	--sp-proklad-h2: 1.19;
	--sp-proklad-h3: 1.12;
	--sp-proklad-h4: 0.95;
	--sp-proklad-text: 1.875;
	--sp-proklad-karty: 1.47;

	/* rozestupy */
	--sp-mezera-1: 4px;
	--sp-mezera-2: 8px;
	--sp-mezera-3: 12px;
	--sp-mezera-4: 16px;
	--sp-mezera-5: 24px;
	--sp-mezera-6: 32px;
	--sp-mezera-7: 48px;
	--sp-mezera-8: 64px;
	--sp-mezera-9: 80px;
	--sp-mezera-10: 120px;

	/* mřížka — obsah v návrhu má 1552 px při plátně 1920 (odsazení 184 px) */
	--sp-kontejner: 1552px;
	--sp-kontejner-odsazeni: 24px;
	--sp-rozestup: 32px;

	/* zaoblení a ořezaný roh karet — z masek v návrhu */
	--sp-zaobleni: 16px;
	--sp-zaobleni-velke: 28px;
	--sp-rez-x: 105px;
	--sp-rez-y: 90px;

	/* Zaoblení obou zlomů řezu. Zlomy nejsou pravoúhlé — řez má sklon
	   ~105:90, takže délka tečny není rovna poloměru, ale R·tg(θ/2):
	   u vodorovné hrany θ ≈ 40,6° (tg = 0,37), u svislé θ ≈ 49,4°
	   (tg = 0,46). Směr řezu 0,759 : 0,651 je jednotkový vektor téhož
	   sklonu; na užších šířkách se poměr rez-x:rez-y mění o jednotky
	   procent, což je pod hranicí viditelnosti.

	   Poloměr se dědí, takže si ho prvek může přebít sám —
	   např. `.sp-sluzba { --sp-rez-zaobleni: 28px; }` sjednotí
	   zaoblení řezu se zaoblením zbylých rohů karty. */
	--sp-rez-zaobleni: 20px;
	--sp-rez-a: calc(var(--sp-rez-zaobleni) * 0.37);   /* tečna u vodorovné hrany */
	--sp-rez-b: calc(var(--sp-rez-zaobleni) * 0.46);   /* tečna u svislé hrany */
	--sp-rez-a-x: calc(var(--sp-rez-a) * 0.759);
	--sp-rez-a-y: calc(var(--sp-rez-a) * 0.651);
	--sp-rez-b-x: calc(var(--sp-rez-b) * 0.759);
	--sp-rez-b-y: calc(var(--sp-rez-b) * 0.651);

	/* tytéž ořezy jako hodnota clip-path — komponenty, které mají roh
	   na pseudoprvku, si je vloží přímo a nemusí třídy .sp-rez-*

	   Ostrá varianta je záloha pro prohlížeče bez shape(); obloukovou
	   podobu dosazuje @supports níž. */
	--sp-orez-vlevo: polygon(var(--sp-rez-x) 0, 100% 0, 100% 100%, 0 100%, 0 var(--sp-rez-y));
	--sp-orez-vpravo: polygon(0 0, calc(100% - var(--sp-rez-x)) 0, 100% var(--sp-rez-y), 100% 100%, 0 100%);

	/* o kolik karty služeb na úvodní stránce přesahují do hero fotky
	   (návrh: fotky karet začínají na y = 900, hero končí na 1114) */
	--sp-sluzby-presah: 214px;

	/* blok nadpisu „Nabízené služby" nad kartami — řádek 30 px a mezera
	   32 px. Sčítá se s přesahem, protože nadpis leží na hero fotce taky. */
	--sp-sluzby-nadpis: 78px;   /* řádek nadpisu 30 + mezera ke kartám 48 */

	/* odsazení bloku na celou šířku — obsah v něm drží šířku kontejneru */
	--sp-blok-odsazeni: max(var(--sp-kontejner-odsazeni), calc((100% - var(--sp-kontejner)) / 2));

	--sp-prechod: 0.2s ease;
	--sp-prechod-foto: 0.4s ease;   /* zoom fotky — 0,2 s je na něj moc trhané */
}

/* Zaoblené zlomy řezu. Kvadratická křivka s řídicím bodem přesně ve
   špičce je tečná k oběma hranám, takže na zaoblení nikde nenavazuje
   zlom. Prohlížeč bez shape() si nechá polygon z :root výš. */
@supports (clip-path: shape(from 0 0, line to 100% 0, close)) {
	:root {
		--sp-orez-vlevo: shape(
			from 100% 0,
			line to 100% 100%,
			line to 0 100%,
			line to 0 calc(var(--sp-rez-y) + var(--sp-rez-b)),
			curve to var(--sp-rez-b-x) calc(var(--sp-rez-y) - var(--sp-rez-b-y))
				with 0 var(--sp-rez-y),
			line to calc(var(--sp-rez-x) - var(--sp-rez-a-x)) var(--sp-rez-a-y),
			curve to calc(var(--sp-rez-x) + var(--sp-rez-a)) 0
				with var(--sp-rez-x) 0,
			close
		);
		--sp-orez-vpravo: shape(
			from 0 0,
			line to calc(100% - var(--sp-rez-x) - var(--sp-rez-a)) 0,
			curve to calc(100% - var(--sp-rez-x) + var(--sp-rez-a-x)) var(--sp-rez-a-y)
				with calc(100% - var(--sp-rez-x)) 0,
			line to calc(100% - var(--sp-rez-b-x)) calc(var(--sp-rez-y) - var(--sp-rez-b-y)),
			curve to 100% calc(var(--sp-rez-y) + var(--sp-rez-b))
				with 100% var(--sp-rez-y),
			line to 100% 100%,
			line to 0 100%,
			close
		);
	}
}

/* --- Reset --------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ul, ol {
	margin: 0;
}

ul, ol {
	padding: 0;
}

img, video, svg {
	max-width: 100%;
	height: auto;
	display: block;
}

button, input, select, textarea {
	font: inherit;
	color: inherit;
}

button {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

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

/* --- Typografie ---------------------------------------------------------- */

body {
	font-family: var(--sp-pismo);
	font-size: var(--sp-text-velikost);
	line-height: var(--sp-proklad-text);
	font-weight: 400;
	color: var(--sp-text);
	background: var(--sp-bila);
}

h1, .sp-h1 {
	font-size: var(--sp-h1);
	line-height: var(--sp-proklad-h1);
	font-weight: 700;
}

h2, .sp-h2 {
	font-size: var(--sp-h2);
	line-height: var(--sp-proklad-h2);
	font-weight: 700;
}

h3, .sp-h3 {
	font-size: var(--sp-h3);
	line-height: var(--sp-proklad-h3);
	font-weight: 700;
}

h4, .sp-h4 {
	font-size: var(--sp-h4);
	line-height: var(--sp-proklad-h4);
	font-weight: 700;
}

/* perex pod nadpisem sekce i v hero */
.sp-perex {
	font-size: var(--sp-mezinadpis);
	line-height: 1.58;
	font-weight: 600;
}

.sp-popisek {
	font-size: var(--sp-popisek);
	line-height: 2.3;
	font-weight: 600;
}

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

/* --- Viditelné zaostření -------------------------------------------------
   Reset ubral odkazům i tlačítkům podtržení a vlastní vzhled, obrys při
   pohybu klávesnicí je proto jediná stopa, kde uživatel stojí. Modrá je
   čitelná na bílé i světle šedé ploše; na modré ji přebíjí žlutá.
   ------------------------------------------------------------------------ */

:focus-visible {
	outline: 3px solid var(--sp-modra);
	outline-offset: 3px;
	border-radius: 2px;
}

.sp-blok--modra :focus-visible,
.sp-sekce--modra :focus-visible,
.sp-hlavicka :focus-visible,
.sp-hero :focus-visible {
	outline-color: var(--sp-zluta);
}

/* --- Typografie obsahu z administrace -------------------------------------
   Obal .sp-text sází text psaný v CKEditoru a výstupy jádra (prohlášení
   o přístupnosti, popis realizace). Reset zrušil odsazení i odrážky všem
   prvkům — tady se vracejí, ale jen prvkům bez třídy: komponenty návrhu
   (.sp-galerie, .sp-dlazdice, …) mají vlastní sazbu a nesmí ji dostat zpět.
   ------------------------------------------------------------------------ */

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

.sp-text h2,
.sp-text h3,
.sp-text h4 {
	margin-top: var(--sp-mezera-8);
}

.sp-text ul:not([class]),
.sp-text ol:not([class]) {
	padding-left: 1.5em;
	list-style: revert;
}

.sp-text ul:not([class]) ul,
.sp-text ol:not([class]) ol {
	margin-top: var(--sp-mezera-2);
	padding-left: 1.5em;
	list-style: revert;
}

.sp-text li + li {
	margin-top: var(--sp-mezera-2);
}

/* odkaz uvnitř textu musí být poznat i bez barvy — reset mu vzal podtržení */
.sp-text a:not([class]) {
	text-decoration: underline;
	text-underline-offset: 3px;
	font-weight: 600;
}

.sp-text a:not([class]):hover {
	text-decoration: none;
}

.sp-text strong,
.sp-text b {
	font-weight: 700;
}

.sp-text img {
	display: inline-block;
}

.sp-text table {
	width: 100%;
	border-collapse: collapse;
}

.sp-text th,
.sp-text td {
	padding: var(--sp-mezera-2) var(--sp-mezera-4);
	border-bottom: 1px solid var(--sp-obrys);
	text-align: left;
}

/* --- Kontejner a mřížka --------------------------------------------------- */

.sp-kontejner {
	width: 100%;
	max-width: calc(var(--sp-kontejner) + 2 * var(--sp-kontejner-odsazeni));
	margin: 0 auto;
	padding-left: var(--sp-kontejner-odsazeni);
	padding-right: var(--sp-kontejner-odsazeni);
}

.sp-mrizka {
	display: grid;
	gap: var(--sp-rozestup);
}

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

/* --- Plochy sekcí --------------------------------------------------------- */

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

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

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

/* --- Ořezaný roh ---------------------------------------------------------- */

/* V návrhu je řez vždy na PRAVÉM horním rohu — karty realizací i karty služeb.
   Levá varianta zůstává pro případ, že by ji návrh někde chtěl zrcadlově. */
.sp-rez-vlevo {
	clip-path: var(--sp-orez-vlevo);
}

.sp-rez-vpravo {
	clip-path: var(--sp-orez-vpravo);
}