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

	Klient:			AutoCarlos
	Tier:			T1 Prezentační web
	Postavil:		Riverlab (riverlab.cz)
	Verze:			0.3 (koncept)
	Dodáno:			Listopad 2026

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

/*
	Služby: prohlášení, motor (vrchol stránky), hlavní tři, další. Ostatní sekce jsou v sections.css.
*/

/* ---------- Služby: nadpis sekce ---------- */

/* Nadpis nad motorem, velikost jako O nás, akcent rudě. Motor pod ním začíná hned, bez plného odsazení. */
.sluzby__hlava {
	padding-top: var(--section-y);
}

.sluzby__nadpis {
	font-size: var(--step-3);
	letter-spacing: -0.015em;
}

.sluzby__akcent {
	color: var(--color-accent-text);
}

.sluzby__hlava + .motor .motor__scena {
	padding-top: clamp(0.5rem, 1.5vw, 1.25rem);
}

/* S pohybem má scéna jinak výšku obrazovky a obsah uprostřed, pod nadpisem by vznikla díra */
.ma-pohyb .sluzby__hlava + .motor .motor__scena {
	height: auto;
}

/* Na šířku: nadpis uprostřed, celá scéna motoru posunutá kousek doprava (odsazení zleva ji posune o polovinu) */
@media (min-width: 56rem) {
	.sluzby__hlava {
		text-align: center;
	}

	.motor__scena {
		padding-left: clamp(6rem, 14vw, 14rem);
	}
}

/* ---------- Služby: prohlášení ---------- */

.prohlaseni {
	position: relative;
	/* Dole nic: mezeru k další části dělá odsazení nadpisu Naše služby */
	padding-block: clamp(7rem, 18vw, 14rem) 0;
	overflow: clip;
}

.prohlaseni__text {
	position: relative;
	z-index: 1;
	display: grid;
	gap: clamp(1.25rem, 2.5vw, 2rem);
	justify-items: center;
	max-width: 46rem;
	text-align: center;
}

.prohlaseni__nadpis {
	font-size: var(--step-3);
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.prohlaseni__veta {
	max-width: 36ch;                   /* delší text o nás, řádky zůstávají krátké */
	color: var(--color-text-muted);
	font-weight: 500;
	font-size: var(--step-2);
	line-height: 1.2;
	text-wrap: balance;
}

/* „nás“ v nadpisu rudě, „O“ zůstává bílé */
.prohlaseni__nas {
	color: var(--color-accent-text);
}

/* Druhé sdělení ve větě: věta je ztlumená, slib v ní svítí čistě bíle a tučně */
.prohlaseni__slib {
	color: var(--color-text);
	font-weight: 700;
}

/* Hlavní sdělení ve větě: široké písmo nadpisů, rudě */
.prohlaseni__dur {
	color: var(--color-accent-text);
	font-family: var(--font-heading);
	font-weight: 700;
	font-stretch: 125%;
	font-size: 0.86em;                 /* verzálky srovnané s výškou malých písmen věty */
	text-transform: uppercase;
	letter-spacing: -0.01em;
}

/* Bez pohybu a na telefonu: velké fotky v mřížce pod větou */
.prohlaseni__kolaz {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	width: 100%;
	max-width: var(--container);
	margin: clamp(3rem, 6vw, 5rem) auto 0;
	padding-inline: var(--gutter);
}

.prohlaseni__foto {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	filter: saturate(0.85) brightness(0.9);
}

.prohlaseni__foto:nth-child(n + 5) {
	display: none;
}

@media (min-width: 56rem) {
	.prohlaseni__kolaz {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1rem;
	}

	/* Průjezd dílnou: velké fotky letí v prostoru proti návštěvníkovi, věta stojí uprostřed.
	   Polohu a hloubku každé fotky nastavuje main.js podle posunu stránky. */
	.ma-pohyb .prohlaseni {
		display: grid;
		align-content: center;
		height: 100svh;
		padding-block: 0;
	}

	.ma-pohyb .prohlaseni__kolaz {
		position: absolute;
		inset: 0;
		display: block;
		max-width: none;
		margin: 0;
		padding: 0;
		perspective: 1000px;
		pointer-events: none;
	}

	.ma-pohyb .prohlaseni__foto {
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		width: 30vw;
		aspect-ratio: 4 / 3;
		margin: -11.25vw 0 0 -15vw;
		opacity: 0;
		will-change: transform, opacity;
		box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.6);
	}

	.ma-pohyb .prohlaseni__foto:nth-child(even) {
		width: 22vw;
		aspect-ratio: 4 / 5;
		margin: -13.75vw 0 0 -11vw;
	}

	/* Za větou tma, ať je čitelná i když za ní proletí fotka */
	.ma-pohyb .prohlaseni__text::before {
		content: "";
		position: absolute;
		inset: -30% -25%;
		z-index: -1;
		background: radial-gradient(closest-side, rgba(13, 12, 10, 0.92), rgba(13, 12, 10, 0.6) 60%, rgba(13, 12, 10, 0));
	}
}

/* ---------- Služby: motor (vrchol stránky) ---------- */
/* Bez pohybu: text a pod ním rozložený motor s popisky. S pohybem se motor po najetí do obrazu sám rozloží a zase složí. */

.motor__scena {
	display: grid;
	gap: clamp(2rem, 4vw, 3rem);
	align-items: center;
	/* Dole nic: mezeru k hlavním službám dělá jejich odsazení */
	padding-block: var(--section-y) 0;
}

.motor__text {
	display: grid;
	gap: clamp(1rem, 2svh, 1.5rem);
	align-content: center;
}

.motor__nadpis {
	font-size: var(--step-1);
	letter-spacing: -0.01em;
	color: var(--color-text-muted);
}

.motor__kroky {
	display: grid;
	font-family: var(--font-heading);
	font-weight: 700;
	font-stretch: 125%;
	text-transform: uppercase;
	font-size: clamp(1.75rem, 0.8rem + 2.4vw, 3rem);
	line-height: 1;
	white-space: nowrap;
}

.motor__popis {
	max-width: 34rem;
	color: var(--color-text-muted);
	font-size: var(--step-0);
	line-height: 1.6;
}

/* Sestava: obrázky na výšku, vpravo místo na popisky */
.motor__sestava {
	--popisky: clamp(7rem, 4rem + 8vw, 12rem);
	position: relative;
	justify-self: center;
	width: min(100%, 34rem);
	margin: 0;
	padding-right: var(--popisky);
}

.motor__rozlozeny,
.motor__dily {
	width: 100%;
	aspect-ratio: 825 / 1024;
	translate: 15px 0;                  /* motor o kus blíž k čarám popisků, popisky stojí */
}

.motor__dily {
	display: none;
	position: relative;
}

.motor__dil {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	will-change: transform;
}

/* Popisky dílů: tenká čára od dílu, rudá tečka, název */
.motor__popisky {
	position: absolute;
	inset: 0 0 0 calc((100% - var(--popisky)) * 0.78);   /* čáry začínají u pravého okraje motoru */
	margin: 0;
	padding: 0;
	list-style: none;
}

.motor__popisky li {
	position: absolute;
	top: var(--y);
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding-left: 3rem;
	color: var(--color-text);
	font-size: clamp(0.75rem, 0.65rem + 0.4vw, 0.9375rem);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.2;
	transform: translateY(-50%);
}

.motor__popisky li::before {
	content: "";
	position: absolute;
	left: 0;
	width: 2.5rem;
	height: 1px;
	background: linear-gradient(to right, var(--color-accent-text) 0.375rem, var(--color-tick) 0.375rem);
}

/* Polohy popisků podle středu dílu v rozloženém obrázku (v procentech výšky) */
.motor__popisky li:nth-child(1) { --y: 35.8%; }
.motor__popisky li:nth-child(2) { --y: 54.7%; }
.motor__popisky li:nth-child(3) { --y: 65.9%; }
.motor__popisky li:nth-child(4) { --y: 74.2%; }

/* S pohybem se písty a spodek rozjedou dál než v obrázku */
.ma-pohyb .motor__popisky li:nth-child(3) { --y: 68.9%; }
.ma-pohyb .motor__popisky li:nth-child(4) { --y: 81.2%; }

/* Text a motor drží u sebe uprostřed stránky, ne každý na svém okraji */
@media (min-width: 56rem) {
	.motor__scena {
		grid-template-columns: minmax(0, 34rem) minmax(0, 34rem);
		justify-content: center;
		column-gap: clamp(3rem, 7vw, 7rem);
	}

	/* S pohybem má sestava pevnou výšku a šířku si bere podle ní */
	.ma-pohyb .motor__scena {
		grid-template-columns: minmax(0, 30rem) auto;
		column-gap: clamp(3rem, 5vw, 5rem);
	}
}

/* S pohybem: scéna na výšku obrazovky, sestava z vrstev */
.ma-pohyb .motor__scena {
	height: 100svh;
	padding-block: calc(var(--header-h) + 1rem) clamp(1.5rem, 4svh, 3rem);
	gap: 1rem;
	align-content: center;
}

.ma-pohyb .motor__rozlozeny { display: none; }
.ma-pohyb .motor__dily { display: block; }

.ma-pohyb .motor__sestava {
	width: auto;
	height: min(100svh - var(--header-h) - 4rem, 38rem);   /* menší motor, celek se vejde doprostřed */
	aspect-ratio: auto;
}

.ma-pohyb .motor__dily {
	width: auto;
	height: 100%;
}

.ma-pohyb .motor__kroky span {
	transition: color 0.4s var(--ease-out);
}

.ma-pohyb .motor__kroky span:not(.je-aktivni) {
	color: var(--color-text-faint);
}

.ma-pohyb .motor__kroky span.je-aktivni {
	color: var(--color-accent-text);
}

/* Telefon s pohybem: kroky na jeden řádek, menší popis, sestava pod nimi */
@media (max-width: 55.99rem) {
	.ma-pohyb .motor__scena { grid-template-columns: minmax(0, 1fr); align-content: center; }
	.ma-pohyb .motor__kroky { display: flex; flex-wrap: wrap; gap: 0 0.35em; font-size: var(--step-1); white-space: normal; }
	.ma-pohyb .motor__popis { font-size: var(--step--1); }
	.ma-pohyb .motor__sestava { height: auto; }
	.ma-pohyb .motor__dily { height: auto; aspect-ratio: 825 / 1024; width: min(100vw - 2 * var(--gutter) - var(--popisky), (100svh - var(--header-h) - 16rem) * 0.8); }
}

/* ---------- Služby: hlavní tři ---------- */

.hlavni {
	padding-block: var(--section-y);
}

.hlavni .hlavni__seznam {
	display: grid;
	gap: clamp(3.5rem, 8vw, 5rem);
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.hlavni__polozka {
	display: grid;
	gap: 1.25rem;
	align-content: start;
}

/* Měřítko mezi nadpisem a textem služby */
.hlavni__polozka .meritko {
	max-width: 34rem;
}

.znaky {
	font-size: var(--step-3);
	line-height: 1;
	letter-spacing: -0.015em;
}

/* Slova drží pohromadě, písmena se rozsvěcují jednotlivě */
.znaky .slovo {
	display: inline-block;
	white-space: nowrap;
}

.hlavni__polozka p {
	max-width: 34rem;
	color: var(--color-text-muted);
	font-size: var(--step-0);
	line-height: 1.6;
}

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

.hlavni__ram {
	display: none;
}

/* Na počítači s pohybem: černý sloupec s texty vlevo, fotka na celou výšku až k okraji vpravo */
@media (min-width: 56rem) {
	.hlavni__foto {
		max-width: 40rem;
	}

	.ma-pohyb .hlavni {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		padding-block: 0;
	}

	.ma-pohyb .hlavni__seznam {
		gap: 0;
		max-width: none;
		margin: 0;
		padding-inline: max(var(--gutter), (100vw - var(--container)) / 2 + var(--gutter)) clamp(2rem, 5vw, 5rem);
	}

	.ma-pohyb .hlavni__polozka {
		align-content: center;
		gap: 1.25rem;
		min-height: 100svh;
	}

	.ma-pohyb .hlavni__foto {
		display: none;
	}

	/* Fotka odstoupí od textu, mezi nimi je pruh pozadí */
	.ma-pohyb .hlavni__ram {
		display: block;
		margin-left: clamp(2.5rem, 6vw, 6rem);
		position: sticky;
		top: 0;
		height: 100svh;
		overflow: hidden;
		background: var(--color-surface);
	}

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

	.ma-pohyb .hlavni__ram img + img {
		clip-path: inset(100% 0 0 0);
	}
}

/* ---------- Služby: další ---------- */

.dalsi {
	padding-bottom: var(--section-y);
}

.dalsi__hlava {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.dalsi__nadpis {
	font-size: var(--step-3);
	letter-spacing: -0.015em;
}

/* Telefon: vodorovný pás vysokých panelů, posouvá se prstem */
.dalsi .dalsi__pas {
	display: flex;
	gap: 0.75rem;
	padding-inline: var(--gutter);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--gutter);
	scrollbar-width: none;
}

.dalsi .dalsi__pas::-webkit-scrollbar {
	display: none;
}

/* Panel: fotka na výšku, text dole přímo na fotce */
.panel {
	position: relative;
	flex: 0 0 min(80vw, 22rem);
	aspect-ratio: 3 / 4;
	overflow: hidden;
	scroll-snap-align: start;
	background: var(--color-surface);
}

.panel img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.85);
	transition: transform 0.9s var(--ease-out), filter 0.5s var(--ease-out);
}

.panel::after {
	content: "";
	position: absolute;
	inset: 45% 0 0;
	background: linear-gradient(to top, rgba(13, 12, 10, 0.92) 0%, rgba(13, 12, 10, 0) 100%);
}

.panel__text {
	position: absolute;
	inset: auto 0 0;
	z-index: 1;
	display: grid;
	gap: 0.5rem;
	padding: clamp(1.5rem, 2.2vw, 2rem);
}

.panel h4 {
	font-size: clamp(1.125rem, 0.95rem + 0.6vw, 1.5rem);
	line-height: 1.05;
}

.panel p {
	color: var(--color-text-muted);
	font-size: 0.9375rem;
	line-height: 1.5;
}

/* Rudá čára dole, po najetí se protáhne zleva doprava jako jezdec měřítka */
.panel__text::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 3px;
	background: var(--color-accent-text);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.6s var(--ease-out);
}

.panel__text > * {
	transition: transform 0.5s var(--ease-out);
}

/* Najetí myší: ostatní panely ztmavnou, tenhle se rozsvítí jako pod lampou, text povyjede a dole projede rudá čára */
@media (hover: hover) {
	.dalsi__pas:hover .panel:not(:hover) img {
		filter: saturate(0.5) brightness(0.55);
	}

	.panel:hover img {
		filter: saturate(1) brightness(1.08);
		transform: scale(1.05);
	}

	.panel:hover .panel__text::after {
		transform: scaleX(1);
	}

	.panel:hover .panel__text > * {
		transform: translateY(-0.375rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.panel img,
	.panel__text > * {
		transition: filter 0.3s;
	}

	.panel:hover img,
	.panel:hover .panel__text > * {
		transform: none;
	}
}

@media (min-width: 56rem) {
	.dalsi .dalsi__pas {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
		gap: 1rem;
		max-width: var(--container);
		margin-inline: auto;
		overflow: visible;
	}

	.panel {
		flex: none;
	}

	/* Připnutý pás jede do strany */
	.ma-pohyb .dalsi {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		align-content: center;
		height: 100svh;
		padding-block: var(--header-h) 3rem;
		overflow: hidden;
	}

	.ma-pohyb .dalsi .dalsi__pas {
		display: flex;
		gap: 1rem;
		width: max-content;
		max-width: none;
		margin: 0;
		padding-inline: var(--gutter);
	}

	.ma-pohyb .panel {
		height: min(66svh, 44rem);
		width: auto;
	}
}

/* ---------- Služby: ceník ---------- */

/* Řádek: služba vlevo, cena vpravo, mezi řádky tenká čára */
.cenik {
	padding-bottom: var(--section-y);
}

.cenik__nadpis {
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
	font-size: var(--step-3);
	letter-spacing: -0.015em;
}

.cenik__seznam {
	margin: 0;
	border-top: 1px solid var(--color-line);
}

.cenik__radek {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.25rem 2rem;
	padding-block: 1.1rem;
	border-bottom: 1px solid var(--color-line);
}

.cenik__radek dt {
	font-size: var(--step-0);
	font-weight: 500;
}

.cenik__radek dd {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--step-0);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.cenik__pozn {
	margin-top: 1.25rem;
}

/* Na šířku dva sloupce řádků vedle sebe */
@media (min-width: 56rem) {
	.cenik__seznam {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: clamp(2rem, 5vw, 5rem);
		border-top: 0;
	}

	.cenik__radek:nth-child(-n + 2) {
		border-top: 1px solid var(--color-line);
	}

	/* Pod připnutým pásem dalších služeb je jen malá mezera */
	.ma-pohyb .cenik {
		padding-top: clamp(3rem, 6vw, 5rem);
	}
}

.cenik__jednotka {
	color: var(--color-accent-jasna);
}