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

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

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

/*
	Konec stránky: závěr, kde se zavřou vrata dílny s cedulí s telefonem.
*/

/* ---------- Závěr: vrata se zavřou ---------- */

.zaver {
	position: relative;
	height: 100svh;
	min-height: 36rem;
	overflow: hidden;
	isolation: isolate;
}

/* Večerní dílna s autem ve vratech, vidět je jen než vrata sjedou dolů */
.zaver__dilna {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 58%;
	filter: brightness(0.75);
}

.zaver__vrata {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: calc(var(--header-h) + 1rem) var(--gutter) 5rem;
	box-shadow: 0 0.25rem 0 #0b0a09, 0 1.5rem 3rem rgba(217, 54, 44, 0.16);
}

/* Cedule přišroubovaná na vratech */
.cedule {
	position: relative;
	display: grid;
	gap: clamp(1rem, 2.5vw, 1.75rem);
	justify-items: center;
	width: min(100%, 58rem);
	padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 6vw, 5rem);
	border: 1px solid rgba(243, 239, 231, 0.12);
	background: linear-gradient(to bottom, #1c1a16, #11100e);
	box-shadow: 0 2.5rem 5rem rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.05);
	text-align: center;
}

/* Čtyři šrouby v rozích */
.cedule::before {
	content: "";
	position: absolute;
	inset: 0.9rem;
	--sroub: radial-gradient(circle, #6b665c 0 0.2rem, #2a2722 0.24rem 0.32rem, transparent 0.34rem);
	background: var(--sroub) 0 0, var(--sroub) 100% 0, var(--sroub) 0 100%, var(--sroub) 100% 100%;
	background-size: 0.7rem 0.7rem;
	background-repeat: no-repeat;
	pointer-events: none;
}

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

.cedule__cislo {
	color: var(--color-accent-jasna);
	font-family: var(--font-heading);
	font-weight: 600;
	font-stretch: 75%;
	font-size: clamp(3.25rem, 1.5rem + 8vw, 9rem);
	line-height: 0.95;
	letter-spacing: -0.01em;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s var(--ease-out);
}

.cedule__cislo:hover {
	color: var(--c-ruda-300);
}

/* Spodní pruh cedule: tenká čára přes celou šířku a pod ní hodnocení drobnými verzálkami jako popisek na štítku */
.hodnoceni {
	justify-self: stretch;
	display: grid;
	grid-template-columns: 1fr auto 1fr;   /* čárka mezi odkazy na středu cedule, i když je odkaz na Google delší */
	align-items: center;
	gap: 0.25rem 1.5rem;
	margin-top: clamp(0.5rem, 1.5vw, 1rem);
	padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
	border-top: 1px solid var(--color-line);
	color: var(--color-text-muted);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.hodnoceni a {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding-block: 0.6rem;              /* větší cíl pro prst */
	color: var(--color-text-muted);
	text-decoration: underline;
	text-decoration-color: var(--color-tick);
	text-underline-offset: 0.3em;
	transition: color 0.2s var(--ease-out);
}

.hodnoceni a:first-child { justify-self: end; }
.hodnoceni a:last-child { justify-self: start; }

.hodnoceni a:hover {
	color: var(--color-text);
	text-decoration-color: currentColor;
}

.hodnoceni strong {
	color: var(--color-text);
	font-weight: 700;
}

/* Svislá čárka mezi odkazy, na úzkém telefonu se odkazy zalomí pod sebe a čárka zmizí */
.hodnoceni__oddel {
	width: 1px;
	height: 1rem;
	background: var(--color-tick);
}

@media (max-width: 30rem) {
	.hodnoceni__oddel { display: none; }
	.hodnoceni { grid-template-columns: 1fr; justify-items: center; }
	.hodnoceni a:first-child,
	.hodnoceni a:last-child { justify-self: center; }
}

.hodnoceni__hvezdy {
	display: flex;
	gap: 0.15rem;
}

.hodnoceni__hvezdy svg {
	width: 0.95rem;
	height: 0.95rem;
	fill: var(--color-accent-jasna);
}


/* ---------- Patička hlavní stránky ---------- */

.footer__sloupce {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 2.5rem clamp(2rem, 4vw, 4rem);
	width: 100%;
	padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
	border-bottom: 1px solid var(--color-line);
}

/* Badge: na telefonu vlevo pod řádkem jako zbytek patičky, od tabletu na stejné lince jako řádek, zarovnaný k pravému okraji */
/* Pod spodním řádkem jen malý okraj. Místo navíc jen při zobrazené liště náhledu: lišta je fixní dole
   a nad ní plave tlačítko nahoru, obojí by jinak zakrylo řádek i badge */
.footer {
	padding-bottom: calc(2.5rem + env(safe-area-inset-bottom));
}

body:has(.rvl-preview-bar:not([style*="none"])) .footer {
	padding-bottom: calc(9.75rem + env(safe-area-inset-bottom));
}

@media (min-width: 40.01rem) {
	.footer__inner {
		grid-template-columns: 1fr auto;
		column-gap: 2rem;
	}

	.footer__sloupce {
		grid-column: 1 / -1;
	}

	.footer__konec {
		grid-column: 2;
		grid-row: 2;
		justify-self: end;
		align-self: center;
	}
}

@media (min-width: 75rem) {
	.footer__inner {
		grid-template-columns: minmax(15rem, 26rem) repeat(3, max-content);
		justify-content: space-between;
		column-gap: clamp(2rem, 4vw, 4rem);
	}

	.footer__sloupce {
		grid-column: 1 / -1;
		grid-template-columns: subgrid;
	}

	.footer__radek {
		grid-column: 1 / 4;
	}

	.footer__konec {
		grid-column: 4;
	}
}

/* Tablet: značka přes celou šířku, pod ní tři sloupce vedle sebe */
@media (min-width: 40.01rem) and (max-width: 74.99rem) {
	.footer__sloupce {
		grid-template-columns: auto auto auto;
		justify-content: space-between;
	}

	.footer__znacka-blok {
		grid-column: 1 / -1;
	}
}

.footer__znacka {
	font-family: var(--font-heading);
	font-weight: 700;
	font-stretch: 125%;
	text-transform: uppercase;
	font-size: var(--step-2);
	line-height: 1;
	color: var(--color-text);
}

.footer__veta {
	max-width: 34rem;
	margin-top: 1rem;
	color: var(--color-text-muted);
	font-size: 0.9375rem;
	line-height: 1.7;
}

.footer__sloupec {
	display: grid;
	align-content: start;
	justify-items: start;
	gap: 0.75rem;
	color: var(--color-text-muted);
	font-size: 0.9375rem;
	line-height: 1.6;
}

.footer__sloupec a {
	text-decoration: none;
}

/* Nadpis sloupce: světlejší a větší než obsah pod ním, červená linka ho odliší od odkazů */
.footer__titulek {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 0.5rem;
	color: var(--color-text);
	font-family: var(--font-heading);
	font-size: 1rem;
	font-weight: 700;
	font-stretch: 125%;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-transform: uppercase;
}

.footer__titulek::before {
	content: "";
	width: 1rem;
	height: 2px;
	background: var(--color-accent-jasna);
}

/* Řádek s ikonou: ikona drží první řádek textu, víceřádkový text (adresa) zůstává zarovnaný pod sebou */
.footer__polozka {
	display: grid;
	grid-template-columns: 1.125rem auto;
	column-gap: 0.625rem;
	align-items: start;
}

.footer__polozka svg {
	width: 1.125rem;
	height: 1.125rem;
	margin-top: 0.2rem;
	color: var(--color-accent-jasna);
}

.footer__telefon {
	color: var(--color-text);
	font-weight: 700;
	font-size: 1.0625rem;
}

.footer__pozn {
	max-width: 15rem;
	margin-top: -0.4rem;
	padding-left: 1.75rem;
	color: var(--color-text-faint);
	font-size: 0.8125rem;
	line-height: 1.5;
}

/* Podtržení vyjíždí zleva po najetí, jen pod textem (ne pod ikonou) */
.footer__sloupec .footer__text {
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	transition: background-size 0.25s ease-out;
}

.footer__sloupec a:hover .footer__text,
.footer__sloupec a:focus-visible .footer__text {
	background-size: 100% 1px;
}

@media (prefers-reduced-motion: reduce) {
	.footer__sloupec .footer__text {
		transition: none;
	}
}

.footer__cas {
	color: var(--color-text);
	font-weight: 700;
}

/* Telefon: odkazy ve dvou sloupcích, ať patička není přes celou obrazovku */
@media (max-width: 40rem) {
	.footer__nav {
		grid-template-columns: repeat(2, max-content);
		column-gap: 3rem;
	}

	.footer__nav .footer__titulek {
		grid-column: 1 / -1;
	}
}

.footer__nav a {
	padding-block: 0.125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	font-size: 0.875rem;
}