/*-----------------------------------------------------------------------------------

	Klient:			Michal Doležal, truhlář
	Tier:			T1 Prezentační web
	Postavil:		Riverlab (riverlab.cz)
	Verze:			0.2 (koncept)
	Dodáno:			Listopad 2026

-----------------------------------------------------------------------------------

	OBSAH

	01. Hero
	02. Nábytek
	03. Jak to probíhá

-----------------------------------------------------------------------------------*/


/*-----------------------------------------------------------------------------------
	ZAČÁTEK: 01. Hero
-----------------------------------------------------------------------------------*/

.hero {
	--hero-karty: 9.5rem;
	padding-block: calc(var(--header-h) + var(--space-4)) var(--space-7);  /* místo pro lištu, která hero překrývá */
	background: var(--color-hero-bg);
	overflow: hidden;
}

.hero__mrizka {
	display: grid;
	gap: var(--space-5);
}

/* Velikost obřího slova se počítá z šířky scény (cqi), ne okna: „truhlář“ má 4,5 em,
   při 21 cqi zabere zhruba 92 % šířky a nikdy nepřeteče. */
/* Nápis a komoda sdílí jednu buňku mřížky: komoda stojí volně na olivovém pozadí
   a „truhlář“ stojí na její horní desce. Odsazení komody je v cqi, takže sedí v každé šířce. */
.hero__scena {
	container-type: inline-size;
	position: relative;
	display: grid;
}

.hero__scena > * {
	grid-area: 1 / 1;
}

.hero__nadpis {
	position: relative;
	z-index: 1;
	display: grid;
	align-self: start;
	justify-items: start;
	margin: 0;
}

.hero__obri {
	font-size: 21cqi;
	font-weight: 800;
	line-height: 0.85;
	letter-spacing: -0.03em;
	color: var(--color-text-inverse);
}

/* Písmena rozseká animace.js. Ořez jen dole, ať háček a čárka nad písmeny zůstanou celé. */
.hero__pismena {
	display: inline-block;
	clip-path: inset(-0.4em -0.2em 0 -0.2em);
}

.hero__pismeno {
	display: inline-block;
}

.hero__misto {
	justify-self: end;
	margin-top: -0.2em;
	margin-right: 4cqi;
	padding: var(--space-1) var(--space-4);
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: clamp(1rem, 3.6cqi, 1.75rem);
	font-weight: 800;
	letter-spacing: 0;
}

/* Výřez bez pozadí, stín pod komodou ji posadí na „podlahu“. */
.hero__foto {
	width: 90%;
	margin: 15cqi auto 0;
	filter: drop-shadow(0 3cqi 2.5cqi var(--color-shadow));
}

.hero__akce {
	display: grid;
	justify-items: start;
	gap: var(--space-5);
}

.hero .tlacitko {
	min-height: 3.75rem;
	padding-inline: var(--space-6);
	font-size: var(--step-1);
}

.hero .tlacitko svg {
	width: 1.375rem;
	height: 1.375rem;
}

/* Perex je pevný obdélník: věta a pod ní adresa dílny. Na počítači nejvýš dva řádky,
   delší text se ořízne. Na telefonu se adresa do řádku nevejde, tam se zalomí. */
.hero__perex {
	max-width: 46ch;
	color: var(--color-text-inverse);
	font-size: var(--step-0);
	font-weight: 600;
	line-height: 1.35;
}

.hero__karty {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-3);
}

@media (min-width: 60rem) {
	.hero {
		padding-block: calc(var(--header-h) + var(--space-5)) var(--space-7);
	}

	.hero__mrizka {
		grid-template-columns: minmax(0, 1fr) var(--hero-karty);
		grid-template-areas:
			"scena karty"
			"akce akce";
		column-gap: var(--space-6);
	}

	/* Komoda s nápisem o 10 px níž, blíž k perexu, a o 20 px doleva; karty vpravo zůstávají. */
	.hero__scena {
		grid-area: scena;
		align-self: center;
		translate: -20px 10px;
	}

	/* Karty začínají u těla písmene „ř“, ne u jeho háčku. */
	.hero__karty {
		grid-area: karty;
		grid-template-columns: 1fr;
		align-content: start;
		gap: var(--space-5);
	}

	ul.hero__karty {
		margin-top: calc(var(--space-7) + var(--space-4));
	}

	.hero__perex {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		overflow: hidden;
		font-size: var(--step-1);
	}

	/* Perex začíná pod levou hranou komody (komoda má 90 % šířky scény, odsazení 5 %),
	   tlačítko má šířku karet a stojí v jedné řadě s textem. */
	.hero__akce {
		grid-area: akce;
		grid-template-columns: minmax(0, 1fr) var(--hero-karty);
		align-items: center;
		margin-top: var(--space-5);
		padding-left: calc((100% - var(--hero-karty) - var(--space-6)) * 0.05);
	}

	.hero__akce .tlacitko {
		justify-self: stretch;
		padding-inline: var(--space-2);
	}
}

/*-----------------------------------------------------------------------------------
	KONEC: 01. Hero
-----------------------------------------------------------------------------------*/


/*-----------------------------------------------------------------------------------
	ZAČÁTEK: 02. Nábytek
-----------------------------------------------------------------------------------*/

.nabytek {
	padding-block: var(--section-space);
}

.nabytek__uvod {
	display: grid;
	gap: var(--space-5);
	margin-bottom: var(--space-7);
}

.nabytek__nadpis {
	font-size: var(--step-4);
	line-height: 1.1;
}

.nabytek__text {
	max-width: 44ch;
	font-size: var(--step-0);
}

.nabytek__poznamka {
	margin-top: var(--space-5);
	color: var(--color-text-muted);
	font-size: var(--step--1);
}

.nabytek__karty {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: var(--space-5);
}

.karta {
	display: grid;
	gap: var(--space-4);
}

.karta__foto {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--radius-photo);
}

.karta__pata {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
}

.karta__nazev {
	font-family: var(--font-body);
	font-size: var(--step-1);
	font-weight: 700;
	letter-spacing: 0;
}

@media (min-width: 60rem) {
	/* Celá sekce na jednu obrazovku pod lištou. */
	.nabytek {
		padding-block: var(--space-7);
	}

	/* Nadpis a text jako jeden blok: text sedí u spodního řádku nadpisu. */
	.nabytek__uvod {
		margin-bottom: var(--space-6);
		grid-template-columns: 1.5fr 1fr;
		align-items: end;
		column-gap: var(--space-7);
	}

	.nabytek__nadpis {
		max-width: 16ch;
	}

	/* Nižší fotky, aby úvod i tři karty byly vidět najednou. */
	.nabytek__karty .karta__foto {
		aspect-ratio: auto;
		height: clamp(15rem, 100svh - 32rem, 28rem);
	}
}

/*-----------------------------------------------------------------------------------
	KONEC: 02. Nábytek
-----------------------------------------------------------------------------------*/


/*-----------------------------------------------------------------------------------
	ZAČÁTEK: 03. Jak to probíhá
-----------------------------------------------------------------------------------*/

.postup {
	overflow-x: clip;
	background: var(--color-surface-dark);
	color: var(--color-text-inverse);
}

.postup__mrizka {
	display: grid;
	gap: var(--space-7);
	padding-block: var(--space-8);
}

/* Velká fotka dílny s popiskem na tmavém přechodu, stejně jako malé karty v hero. */
.postup__foto {
	position: relative;
	margin: 0;
	border-radius: var(--radius-photo);
	overflow: hidden;
}

.postup__foto img {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.postup__foto figcaption {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: 3.5rem var(--space-4) var(--space-4);
	background: var(--gradient-popisek);
	color: var(--color-text-inverse);
	font-weight: 700;
	line-height: 1.3;
}

.postup__nadpis {
	font-size: var(--step-4);
	line-height: 1.1;
}

.postup__text {
	max-width: 34ch;
	margin-top: var(--space-4);
	color: var(--color-text-muted-inverse);
	font-size: var(--step-1);
}

/* Metr: krémový pruh s ryskami po 0,5 rem a delšími po 2,5 rem. Čísla kroků na něm
   leží jako značky. Kde prohlížeč umí animaci podle posunu, metr se vysouvá shora
   dolů, jak čtenář jde po krocích. Bez té podpory je vidět celý.
   Dvojitá třída přebíjí reset seznamů (ol[role="list"] nuluje odsazení). */
.kroky.kroky {
	--metr: 2.75rem;
	position: relative;
	margin-top: var(--space-7);
	padding-left: calc(var(--metr) + var(--space-5));
}

.kroky::before {
	content: "";
	position: absolute;
	inset-block: 0;
	left: 0;
	width: var(--metr);
	border-radius: 0.5rem;
	background:
		repeating-linear-gradient(to bottom, var(--color-text-muted) 0 1px, transparent 1px 2.5rem) right top / 0.85rem 100% no-repeat,
		repeating-linear-gradient(to bottom, var(--color-text-muted) 0 1px, transparent 1px 0.5rem) right top / 0.5rem 100% no-repeat,
		var(--color-surface);
}

/* Obrys celého metru i s ryskami je vidět stále. Krémový pruh se v něm vysouvá podle
   posunu, takže čtenář vidí, kolik metru ještě zbývá. Rysky mají stejný rozestup a polohu
   jako na pruhu, ať na sebe při vysunutí přesně sednou. */
.kroky::after {
	--obrys: color-mix(in srgb, var(--color-text-muted-inverse) 55%, transparent);
	content: "";
	position: absolute;
	inset-block: 0;
	left: 0;
	width: var(--metr);
	box-sizing: border-box;
	border: 1px solid var(--obrys);
	border-radius: 0.5rem;
	background:
		repeating-linear-gradient(to bottom, var(--obrys) 0 1px, transparent 1px 2.5rem) right top / 0.85rem 100% no-repeat,
		repeating-linear-gradient(to bottom, var(--obrys) 0 1px, transparent 1px 0.5rem) right top / 0.5rem 100% no-repeat;
	background-origin: border-box;
	pointer-events: none;
}

.kroky__krok {
	position: relative;
	padding-block: var(--space-4) var(--space-5);
	border-top: 1px solid var(--color-line-inverse);
}

.kroky__krok:first-child {
	border-top: 0;
}

.kroky__cislo {
	position: absolute;
	top: 0;
	left: calc(-1 * (var(--metr) + var(--space-5)));
	display: grid;
	place-items: start center;
	width: calc(var(--metr) - 0.85rem);
	height: var(--metr);
	padding-top: var(--space-4);
	color: var(--color-text);
	font-family: var(--font-heading);
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.2;
}

/* Číslo je vytištěné na metru, jako popisek u rysky. Tlustá ryska přes celou šířku metru
   leží přesně v dělicí čáře kroku, takže čára vede z metru do textu. */
.kroky__cislo::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: var(--metr);
	height: 2px;
	background: var(--color-text);
}

.kroky__nazev {
	font-size: var(--step-2);
	line-height: var(--lh-heading);
}

.kroky__krok p {
	max-width: 48ch;
	margin-top: var(--space-2);
	color: var(--color-text-muted-inverse);
}

.kroky__krok a {
	color: var(--color-text-inverse);
	font-weight: 700;
	text-underline-offset: 0.2em;
}

.kroky__krok a:hover {
	color: var(--color-accent-on-dark);
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.kroky::before {
			animation: metr-vysun linear both;
			animation-timeline: view();
			animation-range: entry 30% cover 55%;
		}

		.kroky__krok {
			animation: krok-vstup linear both;
			animation-timeline: view();
			animation-range: entry 10% entry 90%;
		}
	}
}

@keyframes metr-vysun {
	from {
		clip-path: inset(0 0 92% 0 round 0.5rem);
	}
	to {
		clip-path: inset(0 0 0 0 round 0.5rem);
	}
}

@keyframes krok-vstup {
	from {
		opacity: 0.25;
		transform: translateX(1.5rem);
	}
}

@keyframes metr-vysun-vodorovne {
	from {
		clip-path: inset(0 92% 0 0 round 0.5rem);
	}
	to {
		clip-path: inset(0 0 0 0 round 0.5rem);
	}
}

@keyframes krok-vstup-nahoru {
	from {
		opacity: 0.25;
		transform: translateY(1rem);
	}
}

/* Od 60 rem leží fotka přes celou šířku a pod ní vodorovný metr s pěti kroky vedle sebe.
   Na telefonu zůstává svislý metr výš. */
@media (min-width: 60rem) {
	.postup__foto img {
		aspect-ratio: 16 / 7;
	}

	.postup__text {
		max-width: 60ch;
	}

	/* Rysky se opakují po šířce sloupce (20 %): 25 jemných, každá pátá dlouhá. Tlustá ryska
	   na začátku kroku tak vždy padne na dlouhou rysku, ať je okno jakkoli široké. */
	.kroky.kroky {
		--metr: 2.75rem;
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		padding-left: 0;
	}

	.kroky::before {
		inset-block: 0 auto;
		width: 100%;
		height: var(--metr);
		background:
			repeating-linear-gradient(to right, var(--color-text-muted) 0 1px, transparent 1px 20%) left bottom / 20% 0.85rem repeat-x,
			repeating-linear-gradient(to right, var(--color-text-muted) 0 1px, transparent 1px 4%) left bottom / 20% 0.5rem repeat-x,
			var(--color-surface);
	}

	.kroky::after {
		inset-block: 0 auto;
		width: 100%;
		height: var(--metr);
		background:
			repeating-linear-gradient(to right, var(--obrys) 0 1px, transparent 1px 20%) left bottom / 20% 0.85rem repeat-x,
			repeating-linear-gradient(to right, var(--obrys) 0 1px, transparent 1px 4%) left bottom / 20% 0.5rem repeat-x;
		background-origin: border-box;
	}

	.kroky__krok {
		padding-block: calc(var(--metr) + var(--space-4)) 0;
		padding-right: var(--space-5);
		border-top: 0;
	}

	.kroky__cislo {
		top: 0;
		left: 0;
		place-items: start;
		width: auto;
		height: calc(var(--metr) - 0.85rem);
		padding-top: var(--space-2);
		padding-left: var(--space-3);
	}

	/* Tlustá ryska je tu svislá a stojí na začátku každého kroku. */
	.kroky__cislo::before {
		width: 2px;
		height: var(--metr);
	}

	.kroky__nazev {
		font-size: var(--step-1);
	}

	@supports (animation-timeline: view()) {
		@media (prefers-reduced-motion: no-preference) {
			.kroky::before {
				animation-name: metr-vysun-vodorovne;
			}

			.kroky__krok {
				animation-name: krok-vstup-nahoru;
			}
		}
	}
}

/*-----------------------------------------------------------------------------------
	KONEC: 03. Jak to probíhá
-----------------------------------------------------------------------------------*/