/* ==========================================================================
   Úvodní stránka e-shopu (N1 auditu frontu) — Home/default.latte.
   Jen tokeny (--c-*, --k*, --r-ovladac, --pismo-*), takže platí pro oba
   směry (Značka / Půlnoc) i oba motivy. Rytmus sekcí: --k8 / --k9.

   Fotka hero je exponát: celá šíře kontejneru, zaoblení, žádný text přes
   obličeje — nadpis a CTA stojí POD fotkou. Varianta `--panel` (volba
   v obsahu úvodu) dá text do panelu vlevo přes fotku, jen na širokém displeji.
   ========================================================================== */

.uvod {
	--uvod-r-foto: 16px;
	--uvod-r-karta: 12px;
	padding-block: var(--k6) var(--k8);
}

.uvod h1,
.uvod h2 {
	text-wrap: balance;
}

/* ----- Hero ----- */
.uvod-hero {
	display: grid;
	gap: var(--k6);
}

.uvod-hero-foto {
	position: relative;
	overflow: hidden;
	border-radius: var(--uvod-r-foto);
	background: var(--c-pozadi2);
	aspect-ratio: 1480 / 541;
}

.uvod-hero-foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.uvod-hero-text {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"nadpis cta"
		"popis cta";
	align-items: center;
	column-gap: var(--k7);
	row-gap: var(--k2);
}

.uvod-hero h1 {
	grid-area: nadpis;
	margin: 0;
	font-family: var(--pismo-display);
	font-size: var(--t-h1);
	font-weight: 500;
	line-height: var(--vyska-radku-display, 1.15);
	letter-spacing: -.01em;
	color: var(--c-text);
	max-width: 22ch;
}

.uvod-hero-popis {
	grid-area: popis;
	margin: 0;
	max-width: 56ch;
	font-size: 17px;
	line-height: 1.55;
	color: var(--c-text-tlumene);
}

.uvod-cta {
	grid-area: cta;
	justify-self: end;
	display: inline-flex;
	align-items: center;
	gap: var(--k3);
	min-height: 52px;
	padding: 0 var(--k6);
	border-radius: 999px;
	background: var(--c-akcent);
	color: var(--c-na-akcentu);
	font-family: var(--pismo-text);
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--cas-rychle) ease, transform var(--cas-rychle) var(--pohyb);
}

.uvod-cta:hover {
	background: color-mix(in srgb, var(--c-akcent) 86%, var(--c-text));
	color: var(--c-na-akcentu);
}

.uvod-cta:active {
	transform: translateY(1px);
}

.uvod-cta .ikona,
.uvod-vse .ikona,
.uvod-odkaz .ikona,
.uvod-dlazdice-nazev .ikona {
	width: 18px;
	height: 18px;
	flex: none;
	transition: transform var(--cas-rychle) var(--pohyb);
}

.uvod-cta:hover .ikona,
.uvod-vse:hover .ikona,
.uvod-odkaz:hover .ikona,
.uvod-dlazdice-odkaz:hover .ikona {
	transform: translateX(3px);
}

/* Hero bez fotky (výchozí stav bez obsahu): jen typografie na jemném podkladu. */
.uvod-hero--bez-fotky .uvod-hero-text {
	padding: var(--k8) var(--k7);
	border-radius: var(--uvod-r-foto);
	background: var(--c-pozadi2);
}

/* Text v panelu přes fotku — jen kde je místo; jinak zůstává pod fotkou. */
@media (min-width: 1100px) {
	.uvod-hero--panel {
		position: relative;
	}

	.uvod-hero--panel .uvod-hero-text {
		position: absolute;
		inset-block-end: var(--k6);
		inset-inline-start: calc(var(--okraj) + var(--k6));
		max-width: 480px;
		grid-template-columns: 1fr;
		grid-template-areas: "nadpis" "popis" "cta";
		row-gap: var(--k3);
		padding: var(--k6);
		border-radius: var(--uvod-r-karta);
		background: var(--c-povrch);
		box-shadow: var(--stin-karta);
	}

	.uvod-hero--panel .uvod-cta {
		justify-self: start;
		margin-top: var(--k2);
	}
}

/* ----- Společné pro sekce ----- */
.uvod-sekce {
	margin-top: var(--k9);
}

.uvod-nadpis-sekce {
	margin: 0;
	font-family: var(--pismo-display);
	font-size: var(--t-h2);
	font-weight: 500;
	line-height: 1.2;
	color: var(--c-text);
}

.uvod-hlava-sekce {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--k3) var(--k5);
	margin-bottom: var(--k6);
}

.uvod-vse,
.uvod-odkaz {
	display: inline-flex;
	align-items: center;
	gap: var(--k2);
	min-height: 44px;
	color: var(--c-akcent-text);
	font-weight: 500;
	text-decoration: none;
}

.uvod-vse:hover,
.uvod-odkaz:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ----- Dlaždice kategorií ----- */
/* Jedna řada 1–8 dlaždic. --dl-vidno = kolik dlaždic je vidět naráz; když
   je jich víc, řada se posouvá (scroll-snap) a desetinná část nechá další
   dlaždici nakouknout. Desktop: do šesti se vejdou všechny (1–2 drží šířku
   čtyř sloupců, aby fotky nebyly obří), sedm a osm už by byly moc malé. */
.uvod-dlazdice {
	--dl-mezera: var(--k4);
	--dl-vidno: 4;
	--dl-okraj: 6px;
	--dl-stin: var(--k8);
}

/* Počet nese šablona v data-pocet (1–8); všechny selektory mají stejnou
   specifičnost, takže media query níž je přebije pořadím. */
.uvod-dlazdice[data-pocet="3"] { --dl-vidno: 3; }
.uvod-dlazdice[data-pocet="5"] { --dl-vidno: 5; }
.uvod-dlazdice[data-pocet="6"] { --dl-vidno: 6; }
.uvod-dlazdice[data-pocet="7"],
.uvod-dlazdice[data-pocet="8"] { --dl-vidno: 5.5; }

.uvod-dlazdice-hlava {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--k4);
	margin-bottom: var(--k6);
}

.uvod-dlazdice .uvod-nadpis-sekce {
	margin-bottom: 0;
}

.uvod-posun {
	display: flex;
	flex: none;
	gap: var(--k2);
}

.uvod-posun[hidden] {
	display: none;
}

/* Dotykové displeje: řadu posouvá prst, šipky by jen zabíraly místo. */
@media (hover: none) and (pointer: coarse) {
	.uvod-posun {
		display: none;
	}
}

.uvod-posun-tlacitko {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--c-linka);
	border-radius: var(--r-pilulka);
	background: var(--c-povrch, var(--c-pozadi));
	color: var(--c-text);
	cursor: pointer;
	transition: border-color var(--cas-rychle) var(--pohyb), color var(--cas-rychle) var(--pohyb), opacity var(--cas-rychle) var(--pohyb);
}

.uvod-posun-tlacitko .ikona {
	width: 18px;
	height: 18px;
}

.uvod-posun-tlacitko--zpet .ikona {
	transform: scaleX(-1);
}

.uvod-posun-tlacitko:hover:not(:disabled) {
	border-color: var(--c-akcent);
	color: var(--c-akcent-text);
}

.uvod-posun-tlacitko:focus-visible {
	outline: 2px solid var(--c-akcent);
	outline-offset: 2px;
}

.uvod-posun-tlacitko:disabled {
	cursor: default;
	opacity: .35;
}

/* Řada: vodorovný posuvník. Vnitřní okraj --dl-okraj nechá dýchat obrys
   fokusu (overflow jinak ořízne i svislý směr), záporný okraj ho vrací. */
.uvod-dlazdice-mrizka {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--dl-vidno) - 1) * var(--dl-mezera)) / var(--dl-vidno));
	gap: var(--dl-mezera);
	margin: calc(-1 * var(--dl-okraj));
	padding: var(--dl-okraj);
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--dl-okraj);
	scrollbar-width: thin;
	scrollbar-color: var(--c-linka) transparent;
}

.uvod-dlazdice-polozka {
	scroll-snap-align: start;
	min-width: 0;
}

/* Se skriptem nesou posun šipky a stíny okrajů; lišta by jen překážela. */
.uvod-dlazdice.je-posuvnik .uvod-dlazdice-mrizka {
	scrollbar-width: none;
}

.uvod-dlazdice.je-posuvnik .uvod-dlazdice-mrizka::-webkit-scrollbar {
	display: none;
}

/* Stín okraje: řada se ztrácí tam, kde ještě něco pokračuje. */
.uvod-dlazdice.je-posuvnik:not(.je-na-konci) .uvod-dlazdice-mrizka {
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--dl-stin)), transparent);
	mask-image: linear-gradient(to right, #000 calc(100% - var(--dl-stin)), transparent);
}

.uvod-dlazdice.je-posuvnik:not(.je-na-zacatku) .uvod-dlazdice-mrizka {
	-webkit-mask-image: linear-gradient(to right, transparent, #000 var(--dl-stin));
	mask-image: linear-gradient(to right, transparent, #000 var(--dl-stin));
}

.uvod-dlazdice.je-posuvnik:not(.je-na-zacatku):not(.je-na-konci) .uvod-dlazdice-mrizka {
	-webkit-mask-image: linear-gradient(to right, transparent, #000 var(--dl-stin), #000 calc(100% - var(--dl-stin)), transparent);
	mask-image: linear-gradient(to right, transparent, #000 var(--dl-stin), #000 calc(100% - var(--dl-stin)), transparent);
}

/* Pět a více dlaždic v řadě: užší karty, menší popisek. */
.uvod-dlazdice:has(li:nth-child(5)) .uvod-dlazdice-nazev {
	font-size: 16px;
}

.uvod-dlazdice-odkaz {
	display: flex;
	flex-direction: column;
	gap: var(--k3);
	height: 100%;
	color: var(--c-text);
	text-decoration: none;
	border-radius: var(--uvod-r-karta);
}

.uvod-dlazdice-foto {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	border-radius: var(--uvod-r-karta);
	background: var(--c-pozadi2);
}

/* Jemný rám: produktové fotky na bílém pozadí jinak splývají se stránkou
   a dlaždice nemá hranu — fotka s dvěma postavami pak vypadá jako useknutá
   další karta. Rám leží nad fotkou, takže ho obrázek nepřekryje. */
.uvod-dlazdice-foto::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px var(--c-linka);
	pointer-events: none;
}

.uvod-dlazdice-foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	transition: transform var(--cas-normal) var(--pohyb);
}

.uvod-dlazdice-odkaz:hover .uvod-dlazdice-foto img {
	transform: scale(1.03);
}

.uvod-dlazdice-nazev {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--k2);
	min-height: 28px;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.3;
}

.uvod-dlazdice-nazev .ikona {
	color: var(--c-akcent-text);
}

/* Dlaždice bez fotky: typografická karta téhož poměru stran. */
.uvod-dlazdice-polozka--text .uvod-dlazdice-odkaz {
	justify-content: flex-end;
	aspect-ratio: 4 / 5;
	padding: var(--k5);
	background: var(--c-pozadi2);
	border: 1px solid var(--c-linka);
}

.uvod-dlazdice-polozka--text .uvod-dlazdice-nazev {
	font-family: var(--pismo-display);
	font-size: var(--t-h3, 21px);
}

.uvod-dlazdice-odkaz:focus-visible,
.uvod-cta:focus-visible,
.uvod-vse:focus-visible,
.uvod-odkaz:focus-visible {
	outline: 2px solid var(--c-akcent);
	outline-offset: 4px;
}

/* ----- Pás výhod ----- */
.uvod-vyhody {
	margin-top: var(--k9);
	padding-block: var(--k7);
	background: var(--c-pozadi2);
}

.uvod-vyhody-seznam {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: var(--k6) var(--k6);
	margin: 0 auto;
	list-style: none;
}

.uvod-vyhoda {
	display: flex;
	align-items: flex-start;
	gap: var(--k4);
	min-width: 0;
}

.uvod-vyhoda-ikona {
	width: 28px;
	height: 28px;
	flex: none;
	color: var(--c-akcent-text);
}

.uvod-vyhoda-text {
	display: grid;
	gap: 2px;
	min-width: 0;
	line-height: 1.4;
}

.uvod-vyhoda-text strong {
	font-weight: 600;
	color: var(--c-text);
}

.uvod-vyhoda-text span {
	color: var(--c-text-tlumene);
	font-size: 15px;
	overflow-wrap: anywhere;
}

/* ----- Novinky ----- */
.uvod-novinky .mrizka {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ----- Volitelný obrázkový pás ----- */
.uvod-pas-karta {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	overflow: hidden;
	border-radius: var(--uvod-r-foto);
	background: var(--c-pozadi2);
}

.uvod-pas-foto {
	min-height: 320px;
	background: var(--c-linka);
}

.uvod-pas-foto picture,
.uvod-pas-foto img {
	display: block;
	width: 100%;
	height: 100%;
}

.uvod-pas-foto img {
	object-fit: cover;
	object-position: 60% top;
}

.uvod-pas-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: var(--k3);
	padding: var(--k7);
}

.uvod-pas-text p {
	margin: 0;
	color: var(--c-text-tlumene);
	font-size: 17px;
	line-height: 1.55;
}

/* ----- Tablet ----- */
@media (max-width: 1024px) {
	/* Tablet: vejdou se tři (1–3) nebo čtyři; víc se posouvá. */
	.uvod-dlazdice[data-pocet] { --dl-vidno: 3; }
	.uvod-dlazdice[data-pocet="4"] { --dl-vidno: 4; }
	.uvod-dlazdice[data-pocet="5"],
	.uvod-dlazdice[data-pocet="6"],
	.uvod-dlazdice[data-pocet="7"],
	.uvod-dlazdice[data-pocet="8"] { --dl-vidno: 3.4; }

	.uvod-novinky .mrizka {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ----- Mobil: fotka nahoře, text pod ní, dvousloupcové mřížky ----- */
@media (max-width: 700px) {
	.uvod {
		padding-top: var(--k4);
	}

	.uvod-hero {
		gap: var(--k5);
	}

	/* Úzký pás 2,7 : 1 by na telefonu zmenšil tváře na pár pixelů — ořez na
	   výšku drží střed záběru. */
	.uvod-hero-foto {
		aspect-ratio: 4 / 3;
		border-radius: var(--uvod-r-karta);
	}

	.uvod-hero-foto img {
		object-position: center 20%;
	}

	.uvod-hero-text {
		grid-template-columns: 1fr;
		grid-template-areas: "nadpis" "popis" "cta";
		row-gap: var(--k3);
	}

	.uvod-hero-popis {
		font-size: 16px;
	}

	.uvod-cta {
		justify-self: stretch;
		justify-content: center;
		margin-top: var(--k2);
	}

	.uvod-hero--bez-fotky .uvod-hero-text {
		padding: var(--k7) var(--k5);
	}

	.uvod-sekce,
	.uvod-vyhody {
		margin-top: var(--k8);
	}

	/* Mobil: dvě vedle sebe; od tří se řada posouvá prstem přes celou
	   šířku displeje (záporný okraj vrací boční okraj .obal, vnitřní
	   odsazení drží první dlaždici v zarovnání s textem). */
	.uvod-dlazdice[data-pocet] {
		--dl-mezera: var(--k3);
		--dl-vidno: 2.3;
		--dl-stin: var(--k5);
	}

	.uvod-dlazdice[data-pocet="1"],
	.uvod-dlazdice[data-pocet="2"] {
		--dl-vidno: 2;
	}

	.uvod-dlazdice-mrizka {
		margin-inline: calc(-1 * var(--okraj));
		padding-inline: var(--okraj);
		scroll-padding-inline: var(--okraj);
	}


	.uvod-dlazdice-nazev {
		font-size: 16px;
	}

	.uvod-dlazdice-polozka--text .uvod-dlazdice-odkaz {
		aspect-ratio: 3 / 4;
		padding: var(--k4);
	}

	.uvod-vyhody {
		padding-block: var(--k6);
	}

	.uvod-vyhody-seznam {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--k5) var(--k4);
	}

	.uvod-vyhoda {
		flex-direction: column;
		gap: var(--k2);
	}

	.uvod-vyhoda-text span {
		font-size: 14px;
	}

	.uvod-novinky .mrizka {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--k5) var(--k3);
	}

	.uvod-pas-karta {
		grid-template-columns: 1fr;
		border-radius: var(--uvod-r-karta);
	}

	.uvod-pas-foto {
		min-height: 0;
		aspect-ratio: 800 / 292;
	}

	.uvod-pas-text {
		padding: var(--k5);
	}

	.uvod-pas-text p {
		font-size: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.uvod-cta,
	.uvod-cta .ikona,
	.uvod-vse .ikona,
	.uvod-odkaz .ikona,
	.uvod-dlazdice-nazev .ikona,
	.uvod-dlazdice-foto img,
	.uvod-posun-tlacitko {
		transition: none;
	}

	.uvod-dlazdice-odkaz:hover .uvod-dlazdice-foto img {
		transform: none;
	}
}

/* ----- Jack: sjednocení s ostatními stránkami (směr Značka) ----- */
/* Rádiusy: úvod měl 16/12 px, karty produktů a blog 10/12 px. Jedna
   rodina: velké plochy 12 px, karty a fotky v mřížce 10 px. */
[data-smer="znacka"] .uvod {
	--uvod-r-foto: 12px;
	--uvod-r-karta: 10px;
	padding-top: var(--stranka-nahore);
}