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

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

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

	OBSAH

	04. O mně a otázky
	05. Kontakt
	06. Patička
	07. Vedlejší stránky (404, ochrana údajů)

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


/*-----------------------------------------------------------------------------------
	ZAČÁTEK: 04. O mně a otázky
-----------------------------------------------------------------------------------*/

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

.o-mne__mrizka {
	display: grid;
	gap: var(--space-7);
}

/* Místo pro skutečnou fotku. Šrafování ukazuje, že tu fotka chybí, a nepředstírá ji. */
.o-mne__foto {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 5;
	max-height: 34rem;
	padding: var(--space-5);
	border-radius: var(--radius-photo);
	background: repeating-linear-gradient(-45deg, var(--color-surface) 0 14px, var(--color-line) 14px 16px);
	color: var(--color-text-muted);
	font-weight: 700;
	text-align: center;
}

.o-mne__nadpis {
	font-size: var(--step-3);
}

.o-mne__text {
	max-width: var(--measure);
	margin-top: var(--space-4);
	font-size: var(--step-1);
}

.o-mne__otazky-nadpis {
	margin-top: var(--space-7);
	margin-bottom: var(--space-4);
	font-size: var(--step-2);
}

.otazky {
	display: grid;
	gap: var(--space-2);
}

.otazky__polozka {
	border-radius: var(--radius-control);
	background: var(--color-surface);
}

.otazky__polozka summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	min-height: var(--tap-min);
	padding: var(--space-3) var(--space-4);
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.otazky__polozka summary::-webkit-details-marker {
	display: none;
}

.otazky__polozka summary::after {
	content: "+";
	flex-shrink: 0;
	font-family: var(--font-heading);
	font-size: 1.25rem;
	transition: transform var(--dur-base) var(--ease-out);
}

.otazky__polozka[open] summary::after {
	transform: rotate(45deg);
}

.otazky__polozka p {
	padding: 0 var(--space-4) var(--space-4);
}

@media (min-width: 60rem) {
	.o-mne__mrizka {
		grid-template-columns: 5fr 7fr;
		align-items: start;
	}
}

/*-----------------------------------------------------------------------------------
	KONEC: 04. O mně a otázky
-----------------------------------------------------------------------------------*/


/*-----------------------------------------------------------------------------------
	ZAČÁTEK: 05. Kontakt
-----------------------------------------------------------------------------------*/

.kontakt {
	padding-block: var(--section-space);
	background: var(--color-hero-bg);
	color: var(--color-text-inverse);
}

.kontakt__mrizka {
	display: grid;
	gap: var(--space-7);
}

.kontakt__hlavni {
	container-type: inline-size;
	--kontakt-velikost: min(4.05rem, 12cqw);
}

.kontakt__nadpis {
	font-size: var(--kontakt-velikost);
	white-space: nowrap;
}

.kontakt__telefon {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap-min);
	margin-top: var(--space-4);
	color: var(--color-text);
	font-family: var(--font-heading);
	font-size: var(--kontakt-velikost);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.03em;
	text-decoration: none;
	white-space: nowrap;
}

.kontakt__telefon:hover {
	color: var(--color-text);
	text-decoration: underline;
	text-decoration-thickness: 0.06em;
}

/* Všechny údaje stejně: popisek, pod ním hodnota stejné velikosti, mezi bloky stejná mezera. */
.kontakt__udaje {
	display: grid;
	gap: var(--space-5);
	margin-top: var(--space-6);
}

.kontakt__udaje dt {
	margin-bottom: var(--space-1);
	font-size: 1.15rem;
	font-weight: 800;
	line-height: 1.35;
}

.kontakt__udaje dd {
	margin: 0;
	font-size: 1.35rem;
	line-height: 1.35;
}

.kontakt__udaje a {
	color: var(--color-text-inverse);
	font-weight: 700;
}

/* Štítek zástupného textu má výšku celého řádku, takže je stejně velký jako ostatní
   hodnoty a jeho spodek je spodek řádku. */
.kontakt__udaje .doplnit {
	display: inline-block;
	font-size: 1em;
	line-height: 1.35;
	vertical-align: bottom;
}

.formular {
	display: grid;
	gap: var(--space-4);
	padding: var(--space-5);
	border-radius: var(--radius-card);
	background: var(--color-surface);
	color: var(--color-text);
}

.formular__nadpis {
	font-size: clamp(1.05rem, 0.5rem + 2.4vw, 1.5rem);
}

.formular__pole {
	display: grid;
	gap: var(--space-1);
}

.formular__pole label {
	font-weight: 700;
}

.formular__pole input,
.formular__pole textarea {
	width: 100%;
	min-height: var(--tap-min);
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--color-line-strong);
	border-radius: var(--radius-control);
	background: var(--color-field);
	transition: border-color var(--dur-fast) var(--ease-out);
}

.formular__pole textarea {
	resize: vertical;
}

.formular__pole input:hover,
.formular__pole textarea:hover {
	border-color: var(--color-text);
}

.formular__pole [aria-invalid="true"] {
	border-color: var(--color-error);
	border-width: 2px;
}

.formular textarea::placeholder {
	color: var(--color-text-muted);
	opacity: 1;
}

/* Volby jako pilulky: skutečné checkboxy a přepínače, fungují i bez JS.
   Po kliknutí se pilulka zbarví, zleva vyjede fajfka a pilulka lehce „cvakne“. */
.volby {
	margin: 0;
	padding: 0;
	border: 0;
}

.volby legend {
	margin-bottom: var(--space-2);
	padding: 0;
	font-weight: 700;
}

/* Volby jako dlaždice s ikonou: velká plocha na klik, vyplní krok průvodce. */
.volby__seznam {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-3);
}

/* Kdy zavolat: tři řádky pod sebou. */
.volby--tri .volby__seznam {
	grid-template-columns: 1fr;
}

/* V průvodci dlaždice vyplní celou volnou výšku kroku, žádné prázdné místo. */
.formular.je-pruvodce .volby__seznam {
	flex: 1;
	grid-auto-rows: 1fr;
}

.volba {
	position: relative;
	cursor: pointer;
}

.volba input {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
}

.volba {
	display: block;
}

.volba span {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: var(--space-4);
	min-height: 4rem;
	height: 100%;
	padding: var(--space-3) var(--space-6) var(--space-3) var(--space-3);
	border: 1px solid var(--color-line-strong);
	border-radius: var(--radius-control);
	line-height: 1.2;
	background: var(--color-field);
	font-weight: 700;
	transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

/* Fajfka jako odznak v rohu: pilulka při výběru nemění šířku, nic se nezalomí. */
.volba span::before {
	content: "✓";
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
	display: grid;
	place-items: center;
	width: 1.375rem;
	height: 1.375rem;
	border: 2px solid var(--color-action);
	border-radius: 50%;
	background: var(--color-surface);
	color: var(--color-link);
	font-size: 0.75rem;
	font-weight: 900;
	line-height: 1;
	opacity: 0;
	transform: scale(0.3) rotate(-30deg);
	transition: opacity var(--dur-base) var(--ease-out), transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.volba:hover span {
	border-color: var(--color-text);
	transform: translateY(-2px);
}

.volba svg {
	flex: none;
	transition: transform var(--dur-sweep) var(--ease-sweep);
}

@media (hover: hover) {
	.volba:hover svg {
		transform: rotate(-6deg) scale(1.1);
	}
}

.volba input:checked + span {
	border-color: var(--color-action);
	background: var(--color-action);
	color: var(--color-text-inverse);
	animation: volba-cvak 300ms var(--ease-out);
}

.volba input:checked + span::before {
	opacity: 1;
	transform: none;
}

.volba input:focus-visible + span {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

.volby[aria-invalid="true"] .volba span {
	border-color: var(--color-error);
}

@keyframes volba-cvak {
	50% { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
	.volba span,
	.volba span::before {
		transition: none;
	}

	.volba input:checked + span {
		animation: none;
	}
}

/* Průvodce: kroky leží ve stejné buňce mřížky, takže formulář má výšku nejvyššího
   kroku a při přepínání nic neposkakuje. Aktivní krok vjede ze strany, kam se jde. */
.pruvodce {
	display: grid;
	gap: var(--space-5);
}

.pruvodce__krok {
	display: grid;
	align-content: start;
	gap: var(--space-3);
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.pruvodce__krok legend {
	float: left;
	width: 100%;
	margin-bottom: var(--space-1);
	padding: 0;
	font-family: var(--font-heading);
	font-size: var(--step-1);
	font-weight: 800;
	line-height: var(--lh-heading);
}

.pruvodce__krok textarea {
	width: 100%;
	min-height: var(--tap-min);
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--color-line-strong);
	border-radius: var(--radius-control);
	background: var(--color-field);
	resize: vertical;
}

/* Ovládání (Zpět, Dál) drží u spodní hrany, ve všech krocích na stejném místě. */
.formular.je-pruvodce .pruvodce > .pruvodce__krok {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
}

.formular.je-pruvodce .pruvodce__ovladani {
	margin-top: auto;
	padding-top: var(--space-3);
}

.formular.je-pruvodce .pruvodce__krok:not(.je-aktivni) {
	visibility: hidden;
	pointer-events: none;
}

.formular.je-pruvodce .pruvodce__krok.je-aktivni {
	animation: krok-vpred 380ms var(--ease-out);
}

.formular.je-pruvodce.jde-zpet .pruvodce__krok.je-aktivni {
	animation-name: krok-zpet;
}

@keyframes krok-vpred {
	from { opacity: 0; transform: translateX(2.5rem); }
}

@keyframes krok-zpet {
	from { opacity: 0; transform: translateX(-2.5rem); }
}

/* Čára postupu nahoře: plní se krok po kroku. */
.pruvodce__stav {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.pruvodce__stav[hidden] {
	display: none;
}

.pruvodce__cara {
	flex: 1;
	height: 6px;
	border-radius: var(--radius-pill);
	background: var(--color-line);
	overflow: hidden;
}

.pruvodce__cara span {
	display: block;
	height: 100%;
	width: 25%;
	border-radius: inherit;
	background: var(--color-action);
	transition: width 450ms var(--ease-sweep);
}

.pruvodce__cislo {
	color: var(--color-text-muted);
	font-size: var(--step--1);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

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

.pruvodce__ovladani[hidden] {
	display: none;
}

.pruvodce__ovladani .tlacitko {
	margin-left: auto;
}

.pruvodce__zpet {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: var(--tap-min);
	padding: 0 var(--space-2);
	border: 0;
	background: none;
	color: var(--color-text);
	font-weight: 700;
	cursor: pointer;
}

.pruvodce__zpet[hidden] {
	display: none;
}

@media (hover: hover) {
	.pruvodce__zpet:hover .sipka {
		transform: translateX(-5px);
	}
}

/* Shrnutí v posledním kroku: každá odpověď je pilulka, klik vrátí na její krok.
   Jeden řádek s pevnou výškou. Když je prázdné, nezabírá místo a pole leží hned pod nadpisem. */
.pruvodce__shrnuti {
	display: flex;
	gap: var(--space-2);
	min-height: 2.25rem;
}

.pruvodce__shrnuti:empty {
	display: none;
}

.pruvodce__shrnuti button {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-width: 0;
	flex: 0 1 auto;
	min-height: 2.25rem;
	padding: 0 var(--space-3);
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--color-tint-weak);
	color: var(--color-text);
	font-size: var(--step--1);
	font-weight: 700;
	cursor: pointer;
	transition: background-color var(--dur-base) var(--ease-out);
}

.pruvodce__shrnuti button span {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pruvodce__shrnuti button::after {
	content: "✎";
	opacity: 0.6;
}

.pruvodce__shrnuti button:hover {
	background: var(--color-tint-strong);
}

@media (prefers-reduced-motion: reduce) {
	.formular.je-pruvodce .pruvodce__krok.je-aktivni {
		animation: none;
	}

	.pruvodce__cara span {
		transition: none;
	}
}

.formular__napoveda,
.formular__souhlas {
	color: var(--color-text-muted);
	font-size: var(--step--1);
}

/* Nepovinné fotky místnosti: čárkovaná plocha jako tlačítko, pod ní náhledy s odebráním. */
.foto-pole {
	display: grid;
	gap: var(--space-3);
}

.foto-pole__vstup {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.foto-pole__tlacitko {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3);
	border: 1px dashed var(--color-line-strong);
	border-radius: var(--radius-control);
	background: var(--color-field);
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color var(--dur-fast) var(--ease-out);
}

.foto-pole__tlacitko svg {
	flex: none;
}

.foto-pole__tlacitko small {
	display: block;
	margin-top: 0.15rem;
	color: var(--color-text-muted);
	font-size: var(--step--1);
	font-weight: 400;
}

.foto-pole__tlacitko:hover {
	border-color: var(--color-text);
}

.foto-pole__vstup:focus-visible + .foto-pole__tlacitko {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

.foto-pole__seznam {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.foto-pole__seznam:empty {
	display: none;
}

.foto-pole__seznam li {
	position: relative;
	width: 4.5rem;
	height: 4.5rem;
}

.foto-pole__seznam img {
	width: 100%;
	height: 100%;
	border-radius: var(--radius-control);
	object-fit: cover;
}

.foto-pole__seznam button {
	position: absolute;
	top: -0.4rem;
	right: -0.4rem;
	display: grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--color-text);
	color: var(--color-surface);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
}

.formular__souhlas a {
	color: var(--color-text);
}

.formular .tlacitko {
	justify-self: start;
}

.formular__stav:empty {
	display: none;
}

.formular__stav {
	font-weight: 700;
}

/* Levý sloupec má výšku formuláře: nadpis začíná s horní hranou formuláře,
   poslední údaj končí s jeho spodní hranou. Levý obsah nesmí být vyšší než formulář. */
@media (min-width: 60rem) {
	.kontakt__mrizka {
		grid-template-columns: 1fr 1fr;
		align-items: stretch;
	}

	.kontakt__hlavni {
		display: flex;
		flex-direction: column;
		padding-top: 10px;
	}

	/* Údaje jdou pod telefonem se stejnou mezerou jako mezi sebou. */
	.kontakt__udaje {
		gap: var(--space-6);
		margin-top: var(--space-6);
	}

	.formular {
		padding: var(--space-6);
	}
}

/*-----------------------------------------------------------------------------------
	KONEC: 05. Kontakt
-----------------------------------------------------------------------------------*/


/*-----------------------------------------------------------------------------------
	ZAČÁTEK: 06. Patička
-----------------------------------------------------------------------------------*/

.paticka {
	padding-block: var(--space-8) var(--space-5);
	background: var(--color-surface-dark);
	color: var(--color-text-inverse);
	overflow: hidden;
}

.paticka a {
	color: var(--color-text-inverse);
}

.paticka__obsah {
	display: grid;
	gap: var(--space-7);
}

.paticka__horni {
	display: flex;
	flex-wrap: wrap;
	align-items: center;  /* tlačítko na svislém středu dvouřádkové věty */
	justify-content: space-between;
	gap: var(--space-5);
	padding-bottom: var(--space-7);
	border-bottom: 1px solid var(--color-line-inverse);
}

.paticka__vyzva {
	font-family: var(--font-heading);
	font-size: var(--step-4);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.02em;
}

.paticka__volat {
	min-height: 3.75rem;
	margin-left: 0;
	padding-inline: var(--space-6);
}

/* Na tmavé patičce je tlačítko krémové, olivová by na ořechové zapadla. Základ je tmavý a krémová
   je vrstva přes něj, která při najetí odjede doprava. Pod ní tak nikdy nezůstane krémový lem
   na okraji zaobleného tvaru, jen tmavý, který na ořechové patičce není vidět. */
.paticka a.paticka__volat {
	background-color: var(--color-inverse);
	color: var(--color-text);
	transition: transform var(--dur-fast) var(--ease-out), color var(--dur-sweep) var(--ease-sweep);
}

.paticka a.paticka__volat::before {
	background: var(--color-surface);
	clip-path: inset(0);
}

.paticka a.paticka__volat:focus-visible {
	color: var(--color-text-inverse);
}

.paticka a.paticka__volat:focus-visible::before {
	clip-path: inset(0 0 0 100%);
}

@media (hover: hover) {
	.paticka a.paticka__volat:hover {
		color: var(--color-text-inverse);
	}

	.paticka a.paticka__volat:hover::before {
		clip-path: inset(0 0 0 100%);
	}
}

.paticka__sloupce {
	display: grid;
	gap: var(--space-6);
}

.paticka__titulek {
	margin-bottom: var(--space-2);
	color: var(--color-text-muted-inverse);
	font-size: var(--step--1);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.paticka address {
	font-style: normal;
}

/* Odkazy v patičce: podtržení se natáhne zleva při najetí. */
.paticka__odkaz {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	min-height: var(--tap-min);
	font-weight: 700;
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) left calc(50% + 0.75em) / 0 2px no-repeat;
	transition: background-size var(--dur-sweep) var(--ease-sweep);
}

.paticka__odkaz:hover,
.paticka__odkaz:focus-visible {
	background-size: 100% 2px;
}

@media (hover: hover) {
	.paticka__odkaz:hover .sipka {
		transform: translateX(5px);
	}
}

.paticka__spodni {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-5);
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-line-inverse);
	color: var(--color-text-muted-inverse);
	font-size: var(--step--1);
}

.paticka__spodni a {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap-min);
}

.paticka__spodni .rl-badge {
	margin-left: auto;
}

/* Krátká patička vedlejších stránek (404, ochrana údajů). */
.paticka__nazev {
	font-family: var(--font-heading);
	font-size: var(--step-2);
	font-weight: 800;
}

/* Tři sloupce přes celou šířku: Dílna vlevo, Kontakt uprostřed, Na stránce vpravo.
   Každý řádek ve sloupcích má stejné písmo a výšku, takže řádky sedí vedle sebe. */
.paticka__sloupce address,
.paticka__sloupce p:not(.paticka__titulek),
.paticka__sloupce li {
	font-size: var(--step-1);
	line-height: 1.6;
}

@media (min-width: 48rem) {
	.paticka__sloupce {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.paticka__sloupce > :nth-child(2) {
		justify-self: center;
		text-align: center;
	}

	.paticka__sloupce > :nth-child(3) {
		justify-self: end;
		text-align: right;
	}

	/* Na počítači odkazy jako běžné řádky textu, bez výšky pro prst. */
	.paticka__sloupce .paticka__odkaz {
		display: inline-block;
		min-height: 0;
		font-size: var(--step-1);
		line-height: 1.6;
		background-position: left bottom;
	}

	/* Podtržení roste od strany, ke které je sloupec zarovnaný. */
	.paticka__sloupce > :nth-child(2) .paticka__odkaz {
		background-position: center bottom;
	}

	.paticka__sloupce > :nth-child(3) .paticka__odkaz {
		background-position: right bottom;
	}
}

/*-----------------------------------------------------------------------------------
	KONEC: 06. Patička
-----------------------------------------------------------------------------------*/


/*-----------------------------------------------------------------------------------
	ZAČÁTEK: 07. Vedlejší stránky (404, ochrana údajů)
-----------------------------------------------------------------------------------*/

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

.stranka__obsah {
	max-width: calc(var(--measure) + 2 * var(--gutter));
}

.stranka__nadpis {
	margin-bottom: var(--space-6);
	font-size: var(--step-4);
	line-height: var(--lh-heading);
}

.stranka h2 {
	margin-top: var(--space-7);
	margin-bottom: var(--space-3);
	font-size: var(--step-2);
	line-height: var(--lh-heading);
}

.stranka p + p {
	margin-top: var(--space-4);
}

.stranka__akce {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-5);
	margin-top: var(--space-7);
}

/*-----------------------------------------------------------------------------------
	KONEC: 07. Vedlejší stránky
-----------------------------------------------------------------------------------*/