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

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

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

/*
	Sekce v pořadí stránky: hero, kontakt. Ohlasy a závěr s vraty jsou v zaver.css. Služby jsou v sluzby.css.
	Výchozí stav je statický a čitelný. Třídu .ma-pohyb přidá main.js, jen když běží GSAP
	a návštěvník nemá zapnuté omezení pohybu. Teprve pod ní se rozvržení mění pro připnuté scény.
*/

/* ---------- Hero ---------- */

.hero__scena {
	position: relative;
	height: 100svh;
	min-height: 36rem;
	overflow: hidden;
	isolation: isolate;
	--hero-posun: calc(10svh - 25px);                /* dílna, auto i slogan o kus výš, blíž k hlavičce. Spodek doplní tma ze ztmavení. */
}

.hero__plate,
.hero__plate img,
.hero__auto {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Dílna a auto mají stejný ořez, auto tak sedí přesně na svém místě */
.hero__plate img,
.hero__auto {
	object-fit: cover;
	object-position: 50% 58%;
}

/* Dílna je o posun výš: spodní okraj fotky plynule zmizí do pozadí, ať pod ním není vidět hrana */
.hero__plate img {
	translate: 0 calc(-1 * var(--hero-posun));
	-webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent);
	mask-image: linear-gradient(to bottom, #000 78%, transparent);
}

.hero__plate { z-index: -1; }
.hero__titulek { z-index: 0; }
.hero__auto { z-index: 1; translate: 0 calc(4svh - var(--hero-posun)); }   /* auto o kus níž než dílna */
.hero__vrata { z-index: 2; }
.hero__spodek { z-index: 3; }

/* Vrata dílny: lamely kreslené v CSS, dole spára se světlem z dílny.
   Zavřená jsou od prvního vykreslení (třída .js z preload.js), main.js je zvedne.
   Pojistka: kdyby skript nedoběhl, vrata po 5 s zmizí a text se ukáže. */
.hero__vrata {
	display: none;
	position: absolute;
	inset: 0 0 auto;
	height: 100%;
	box-shadow: 0 0.25rem 0 #0b0a09, 0 1.5rem 3rem rgba(217, 54, 44, 0.16);
}

/* Lamely vrat: stejný vzor v úvodu (vrata se zvednou) i v závěru (vrata se zavřou) */
.lamely {
	background:
		linear-gradient(to bottom, rgba(13, 12, 10, 0.55), rgba(13, 12, 10, 0) 40%),
		repeating-linear-gradient(to bottom, #1d1b17 0, #24221d 0.9rem, #121110 1rem, #1a1815 1.1rem, #1d1b17 1.4rem);
}

@media (prefers-reduced-motion: no-preference) {
	.js .hero__vrata {
		display: block;
		animation: pojistka-pryc 0.4s 5s forwards;
	}

	.js .hero__radek,
	.js .hero__spodek > * {
		opacity: 0;
		animation: pojistka-ukaz 0.4s 5s forwards;
	}
}

@keyframes pojistka-pryc { to { opacity: 0; visibility: hidden; } }
@keyframes pojistka-ukaz { to { opacity: 1; } }

.hero__vrata::after,
.zaver__vrata::after {
	content: "";
	position: absolute;
	inset: auto 0 -1px;
	height: 1px;
	background: linear-gradient(to right, transparent, var(--color-accent-text) 30%, var(--color-accent-text) 70%, transparent);
	box-shadow: 0 0 1.5rem 0.25rem rgba(217, 54, 44, 0.45);
}

/* Ztmavení jen pod spodním textem */
.hero__scena::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	z-index: 2;
	height: 40%;
	background: linear-gradient(to top, var(--color-bg) 0%, rgba(13, 12, 10, 0.85) 35%, rgba(13, 12, 10, 0.4) 65%, rgba(13, 12, 10, 0) 100%);
	pointer-events: none;
}

/* Slogan za autem, na šířku na jednom řádku, spodní okraj schovaný za střechou. Je to <p>, hlavní nadpis (h1) je řádek s místem nad perexem. */
.hero__titulek {
	position: absolute;
	font-family: var(--font-heading);
	font-weight: 700;
	font-stretch: 125%;
	text-transform: uppercase;
	/* Spodek sloganu 0,2 em pod střechou auta. Fotka (poměr 1,79, object-position 58 %, auto +4svh) má výšku max(100svh, 55,87vw),
	   střecha je ve 29,3 % její výšky. Z toho odstup zdola: 38svh + 0,287 × výška fotky. */
	inset: auto 0 calc(38svh + 0.287 * max(100svh, 55.87vw) - 0.2em + var(--hero-posun));
	padding-inline: var(--gutter);
	font-size: min(5.9vw, 12svh, 9rem);         /* celý řádek má asi 15 em, zabere asi 90 % šířky */
	line-height: 0.95;
	letter-spacing: -0.02em;
	text-align: center;
	text-wrap: balance;
}

.hero__radek {
	display: inline-block;              /* inline-block kvůli najetí v main.js, mezera mezi řádky je z HTML */
	/* Místo nahoře pro čárky a háčky nad verzálkami: přeliv je vystřižený z plochy řádku, bez něj by je usekl. Okraj to vrací, řádky stojí stejně. */
	padding-top: 0.22em;
	margin-top: -0.22em;
}

/* Lehký stříbrný přeliv. Bez podpory background-clip zůstane barva textu */
@supports (background-clip: text) or (-webkit-background-clip: text) {
	.hero__radek {
		background: linear-gradient(170deg, #ffffff 0%, #d6d4cf 32%, #858380 56%, #c4c2bd 78%, #f2f0ec 100%);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
}

.hero__spodek {
	position: absolute;
	inset: auto 0 0;
	display: grid;
	gap: 1.5rem;
	justify-items: center;
	padding-bottom: clamp(2rem, 5svh, 3.5rem);
	text-align: center;
}

/* Hlavní nadpis: místo, vypadá jako první řádek perexu (stejné písmo, velikost i barva), mezera jako mezi řádky */
.hero__misto {
	margin-bottom: -1.5rem;
	color: var(--color-text-muted);
	font-family: var(--font-body);
	font-size: var(--step-0);
	font-weight: 400;
	font-stretch: 100%;
	letter-spacing: 0;
	line-height: 1.6;
	text-transform: none;
}

.hero__perex {
	color: var(--color-text-muted);
	font-size: var(--step-0);
	line-height: 1.6;
	text-wrap: balance;
}


/* Místo a cena předem: tučně rudě ze ztlumeného textu */
.hero__misto strong,
.hero__perex strong {
	/* Sytější a světlejší než akcent, ať na tmavé fotce nevybledne */
	color: var(--color-accent-jasna);
	font-weight: 700;
}

/* Otevírací doba a adresa: větší, s ikonami */
.hero__udaje {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem 3rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--step-1);
	font-weight: 500;
	line-height: 1.2;
}

.hero__udaje li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

/* Na šířku (perex na jednom řádku): údaje přesně na šířku perexu. Otevírací doba začíná pod začátkem perexu,
   adresa končí pod jeho koncem a čára (::before) stojí uprostřed mezery mezi nimi. */
@media (min-width: 64rem), (min-width: 48rem) and (orientation: landscape) {
	.hero__spodek {
		grid-template-columns: max-content;
		justify-content: center;
	}

	.hero__udaje {
		justify-self: stretch;
		flex-wrap: nowrap;
		justify-content: space-between;
		gap: 0;
	}

	.hero__udaje::before {
		content: "";
		order: 1;
		align-self: stretch;
		width: 1px;
		background: var(--color-tick);
	}

	.hero__udaje li + li {
		order: 2;
	}
}

.hero__udaje svg {
	width: 1.1em;
	height: 1.1em;
	flex-shrink: 0;
	color: var(--color-accent-text);
}

.hero__udaje a {
	padding-block: 0.6rem;              /* větší cíl pro prst */
	color: var(--color-text);
	text-decoration: none;
}

.hero__udaje a:hover {
	color: var(--color-accent-text);
}

@media (max-width: 47.99rem) {
	.hero__udaje { flex-direction: column; align-items: center; font-size: clamp(0.9375rem, 0.2rem + 4.4vw, 1.375rem); }
	.hero__udaje li { white-space: nowrap; }
}

/* Lišta konceptu (Riverlab) je přes spodek obrazovky: dokud je vidět, spodek hero nad ní. Po zavření nebo s ostrou verzí pravidlo nic nedělá. */
body:has(.rvl-preview-bar:not([style*="none"])) .hero__spodek {
	padding-bottom: calc(clamp(1.5rem, 3svh, 2.5rem) + 3rem);
}

@media (max-width: 63.99rem) {
	body:has(.rvl-preview-bar:not([style*="none"])) .hero__spodek {
		padding-bottom: calc(clamp(2rem, 5svh, 3.5rem) + 8.5rem);   /* na telefonu a tabletu má lišta tři řádky */
	}
}

/* Telefon a tablet na výšku: jedna portrétní fotka s autem, vrstva auta se nepoužije. Stejný dotaz je u <source> v index.html. */
@media (max-width: 47.99rem), (orientation: portrait) and (max-width: 63.99rem) {
	.hero__auto {
		display: none;
	}

	/* Fotka o kus výš, ať perex a údaje stojí pod autem, ne přes něj. Spodek doplní tma ze ztmavení, které končí barvou pozadí. */
	.hero__plate img {
		translate: 0 -12svh;
	}

	.hero__titulek {
		inset: max(calc(var(--header-h) + 1.5rem), 19svh) 0 auto;   /* blíž k autu, končí kousek nad střechou */
		font-size: clamp(1.75rem, 0.5rem + 7.4vw, 3.5rem);   /* každý řádek se vejde na jeden */
	}

	/* Na výšku se jeden řádek nevejde: nadpis i perex po řádcích, každá věta perexu zvlášť */
	.hero__radek,
	.hero__perex span {
		display: block;
	}

	/* Kdyby se řádek zalomil na dva, přeliv se opakuje po každém řádku textu, jinak by spodní půlka zešedla */
	.hero__radek {
		background-size: 100% 0.95em;
		background-position: 0 0.22em;
	}

	.hero__scena::after {
		height: 46%;
	}
}

/* ---------- Kontakt ---------- */

.kontakt__inner {
	display: grid;
	gap: 3rem;
	padding-block: var(--section-y);
}

/* Nadpis přes celou šířku, stejně jako Naše služby a O nás */
.kontakt__nadpis {
	grid-column: 1 / -1;
	font-size: var(--step-3);
	letter-spacing: -0.015em;
}

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

.kontakt__udaje {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	gap: 2.25rem 2rem;
	margin: 0;
	align-content: start;
}

.kontakt__udaje > div {
	display: grid;
	gap: 0.6rem;
}

.kontakt__udaje dt {
	color: var(--color-accent-jasna);
	font-size: 0.875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.kontakt__udaje dd {
	margin: 0;
	font-size: var(--step-1);
	line-height: 1.5;
}

.kontakt__udaje dd a {
	text-decoration: none;
}

/* Pod mapou vlevo tlačítko na trasu, vpravo zdroj mapy */
.kontakt__mapa {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 1rem;
	justify-items: start;
}

.kontakt__mapa .mapa {
	grid-column: 1 / -1;
}

/* Telefon: vedle tlačítka na zdroj nezbývá místo, jde pod něj */
@media (max-width: 30rem) {
	.kontakt__mapa {
		grid-template-columns: 1fr;
	}
}

/* Mapa: vlastní tmavý výřez z OpenStreetMap, rudý špendlík. Klik otevře Mapy Google. */
.mapa {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--color-surface);
	box-shadow: inset 0 0 0 1px var(--color-line);
	color: var(--color-text);
	text-decoration: none;
}

.mapa img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s var(--ease-out);
}

/* Okraje mapy se ztrácejí do tmy */
.mapa::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 50% 50%, rgba(13, 12, 10, 0) 45%, rgba(13, 12, 10, 0.75) 100%);
	pointer-events: none;
}

/* Záměrný kříž přes špendlík, jako na měřicím přístroji */
.mapa__zamer {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(to right, transparent, rgba(217, 54, 44, 0.35) 30%, rgba(217, 54, 44, 0.35) 70%, transparent) 0 50% / 100% 1px no-repeat,
		linear-gradient(to bottom, transparent, rgba(217, 54, 44, 0.35) 30%, rgba(217, 54, 44, 0.35) 70%, transparent) 50% 0 / 1px 100% no-repeat;
}

.mapa__spendlik {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	width: 1rem;
	height: 1rem;
	margin: -0.5rem 0 0 -0.5rem;
	border-radius: 50%;
	background: var(--color-accent-text);
	box-shadow: 0 0 0 0.35rem rgba(217, 54, 44, 0.25), 0 0 1.5rem rgba(217, 54, 44, 0.6);
}

@media (prefers-reduced-motion: no-preference) {
	.mapa__spendlik::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: 50%;
		border: 1px solid var(--color-accent-text);
		animation: mapa-pulz 2.4s var(--ease-out) infinite;
	}

	.mapa:hover img {
		transform: scale(1.04);
	}
}

@keyframes mapa-pulz {
	from { transform: scale(1); opacity: 1; }
	to { transform: scale(5); opacity: 0; }
}

.mapa__stitek {
	position: absolute;
	top: calc(50% - 4.25rem);
	left: calc(50% + 1.25rem);
	z-index: 2;
	display: grid;
	gap: 0.2rem;
	padding: 0.6rem 0.9rem;
	border-left: 1px solid var(--color-accent-text);
	background: rgba(13, 12, 10, 0.88);
	font-family: var(--font-heading);
	font-weight: 700;
	font-stretch: 125%;
	text-transform: uppercase;
	font-size: 1rem;
	line-height: 1;
}

.mapa__stitek small {
	color: var(--color-text-muted);
	font-family: var(--font-body);
	font-size: 0.8125rem;
	line-height: 1.3;
}

/* Úzký telefon: štítek vedle špendlíku by přetekl z mapy, sedne do rohu */
@media (max-width: 30rem) {
	.mapa__stitek {
		top: 0.75rem;
		left: auto;
		right: 0.75rem;
	}
}

.mapa__otevrit {
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	z-index: 2;
	padding: 0.5rem 0.85rem;
	background: rgba(13, 12, 10, 0.88);
	color: var(--color-text-muted);
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transition: color 0.2s var(--ease-out);
}

.mapa:hover .mapa__otevrit {
	color: var(--color-accent-text);
}

.mapa:focus-visible {
	outline: 3px solid var(--color-focus);
	outline-offset: 3px;
}

.mapa__zdroj {
	justify-self: end;
	text-align: right;
	color: var(--color-text-faint);
	font-size: 0.8125rem;
}

.mapa__zdroj a {
	color: inherit;
}

@media (min-width: 56rem) {
	.kontakt__inner {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: clamp(2.5rem, 5vw, 5rem);
	}
}