/* Místo pohody — vzhled podle manuálu chatičky */

:root {
	--lavendule: #c5bbcf;
	--lavendule-svetla: #ded9e4;
	--lavendule-velmi-svetla: #f2eff5;
	--fialova: #644985;
	--fialova-tmava: #4a3663;
	--bila: #ffffff;
	--krem: #faf8f5;
	--text: #3a3340;
	--text-tlumeny: #6f6678;
	--ram: #d8d2e0;

	--sirka: 72rem;
	--sirka-uzka: 46rem;
	--radius: 0.75rem;
	--stin: 0 1px 2px rgb(58 51 64 / 6%), 0 8px 24px rgb(58 51 64 / 8%);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 5rem;
	-webkit-text-size-adjust: 100%;
}

body {
	background: var(--krem);
	color: var(--text);
	font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 1rem;
	line-height: 1.7;
	margin: 0;
}

img {
	display: block;
	height: auto;
	max-width: 100%;
}

picture {
	display: contents;
}

a {
	color: var(--fialova);
}

h1,
h2,
h3 {
	line-height: 1.25;
	margin: 0 0 0.75rem;
}

p {
	margin: 0 0 1rem;
}

/* --- opakující se prvky ------------------------------------------------ */

.obal {
	margin: 0 auto;
	max-width: var(--sirka);
	padding: 0 1.25rem;
	width: 100%;
}

.obal--uzky {
	max-width: var(--sirka-uzka);
}

.nadpis-psany {
	color: var(--fialova);
	font-family: Sacramento, cursive;
	font-size: clamp(2.5rem, 6vw, 3.75rem);
	font-weight: 400;
	letter-spacing: 0.01em;
	/* psané písmo má hluboké dotahy, potřebuje víc místa */
	line-height: 1.25;
	margin-bottom: 1rem;
}

.perex {
	color: var(--text-tlumeny);
	font-size: 1.05rem;
	margin-bottom: 2.5rem;
	max-width: 42rem;
}

.poznamka {
	color: var(--text-tlumeny);
	font-size: 0.9rem;
	margin-top: 2rem;
	max-width: 42rem;
}

.tlacitko {
	background: var(--fialova);
	border: 2px solid var(--fialova);
	border-radius: 999px;
	color: var(--bila);
	cursor: pointer;
	display: inline-block;
	font-family: inherit;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	padding: 0.95rem 2rem;
	text-decoration: none;
	text-transform: uppercase;
	transition: background 0.2s, color 0.2s, transform 0.2s;
}

.tlacitko:hover,
.tlacitko:focus-visible {
	background: var(--fialova-tmava);
	border-color: var(--fialova-tmava);
	transform: translateY(-1px);
}

.tlacitko--obrys {
	background: transparent;
	border-color: var(--bila);
	color: var(--bila);
}

.tlacitko--obrys:hover,
.tlacitko--obrys:focus-visible {
	background: var(--bila);
	border-color: var(--bila);
	color: var(--fialova);
}

.odrazky {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}

.odrazky li {
	padding-left: 1.5rem;
	position: relative;
}

.odrazky li::before {
	color: var(--lavendule);
	content: "\2766";
	left: 0;
	position: absolute;
}

.vizualne-skryto {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.preskocit {
	background: var(--fialova);
	color: var(--bila);
	left: 0;
	padding: 0.75rem 1.25rem;
	position: absolute;
	top: -100%;
	z-index: 100;
}

.preskocit:focus {
	top: 0;
}

/* --- hlavička ---------------------------------------------------------- */

.hlavicka {
	background: rgb(250 248 245 / 92%);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--ram);
	position: sticky;
	top: 0;
	z-index: 50;
}

.hlavicka__obal {
	align-items: center;
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	min-height: 4.25rem;
}

.znacka {
	align-items: center;
	color: var(--fialova);
	display: flex;
	flex-shrink: 0;
	font-size: 0.8rem;
	font-weight: 600;
	gap: 0.6rem;
	letter-spacing: 0.16em;
	text-decoration: none;
	text-transform: uppercase;
}

.znacka img {
	/* logo je bílé, na světlé hlavičce ho přebarvíme */
	filter: brightness(0) saturate(100%) invert(29%) sepia(23%) saturate(1425%) hue-rotate(233deg) brightness(93%) contrast(90%);
	height: 2.25rem;
	width: 2.25rem;
}

.menu ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.35rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.menu a {
	color: var(--text);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

.menu a:hover,
.menu a:focus-visible {
	color: var(--fialova);
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.menu__jazyk a {
	border: 1px solid var(--ram);
	border-radius: 999px;
	color: var(--fialova);
	padding: 0.15rem 0.7rem;
}

.menu-tlacitko {
	background: none;
	border: 0;
	cursor: pointer;
	display: none;
	height: 2.75rem;
	padding: 0;
	width: 2.75rem;
}

.menu-tlacitko__carky,
.menu-tlacitko__carky::before,
.menu-tlacitko__carky::after {
	background: var(--fialova);
	border-radius: 2px;
	display: block;
	height: 2px;
	transition: transform 0.2s, opacity 0.2s;
	width: 1.5rem;
}

.menu-tlacitko__carky {
	margin: 0 auto;
	position: relative;
}

.menu-tlacitko__carky::before,
.menu-tlacitko__carky::after {
	content: "";
	left: 0;
	position: absolute;
}

.menu-tlacitko__carky::before {
	top: -0.45rem;
}

.menu-tlacitko__carky::after {
	top: 0.45rem;
}

.menu-tlacitko[aria-expanded="true"] .menu-tlacitko__carky {
	background: transparent;
}

.menu-tlacitko[aria-expanded="true"] .menu-tlacitko__carky::before {
	transform: translateY(0.45rem) rotate(45deg);
}

.menu-tlacitko[aria-expanded="true"] .menu-tlacitko__carky::after {
	transform: translateY(-0.45rem) rotate(-45deg);
}

/* --- hero -------------------------------------------------------------- */

.hero {
	align-items: center;
	display: grid;
	isolation: isolate;
	justify-items: center;
	min-height: min(86svh, 46rem);
	overflow: hidden;
	position: relative;
	text-align: center;
}

.hero__foto,
.hero__foto img {
	height: 100%;
	inset: 0;
	object-fit: cover;
	object-position: center 42%;
	position: absolute;
	width: 100%;
}

.hero__foto::after {
	background: linear-gradient(180deg, rgb(58 44 78 / 34%) 0%, rgb(100 73 133 / 55%) 100%);
	content: "";
	inset: 0;
	position: absolute;
}

.hero__text {
	color: var(--bila);
	max-width: 40rem;
	padding: 4.5rem 1.5rem;
	position: relative;
	z-index: 1;
}

.hero__logo {
	height: auto;
	margin: 0 auto 1rem;
	width: clamp(5.5rem, 14vw, 8.5rem);
}

.hero__nadpis {
	color: var(--bila);
	font-size: clamp(2.9rem, 10vw, 6rem);
	margin-bottom: 0.25rem;
}

.hero__podnadpis {
	font-size: clamp(0.85rem, 2.4vw, 1rem);
	font-weight: 500;
	letter-spacing: 0.2em;
	margin-bottom: 1.5rem;
	text-transform: uppercase;
}

.hero__perex {
	font-size: 1.05rem;
	margin: 0 auto 2rem;
	max-width: 32rem;
}

.hero__tlacitka {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
	margin: 0;
}

/* --- sekce ------------------------------------------------------------- */

.sekce {
	padding: clamp(3.5rem, 8vw, 6rem) 0;
}

.sekce--lavendule {
	background: var(--lavendule-velmi-svetla);
}

.sekce--uvod {
	padding-top: clamp(3rem, 7vw, 5rem);
}

.dva-sloupce {
	display: grid;
	gap: clamp(2rem, 5vw, 3.5rem);
	grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
	.dva-sloupce {
		grid-template-columns: 1fr 1fr;
	}

	.dva-sloupce--foto {
		align-items: center;
		grid-template-columns: 1.15fr 1fr;
	}
}

.foto-ramecek img {
	border-radius: var(--radius);
	box-shadow: var(--stin);
	object-fit: cover;
	width: 100%;
}

/* --- karty vybavení ---------------------------------------------------- */

.karty {
	display: grid;
	gap: 1.75rem;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.karta {
	background: var(--bila);
	border: 1px solid var(--ram);
	border-radius: var(--radius);
	box-shadow: var(--stin);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.karta__foto img {
	object-fit: cover;
	width: 100%;
}

.karta h3 {
	color: var(--fialova);
	font-size: 0.82rem;
	letter-spacing: 0.14em;
	margin: 1.35rem 1.35rem 0.75rem;
	text-transform: uppercase;
}

.karta ul {
	list-style: none;
	margin: 0;
	padding: 0 1.35rem 1.5rem;
}

.karta li {
	font-size: 0.94rem;
	padding: 0.3rem 0 0.3rem 1.35rem;
	position: relative;
}

.karta li::before {
	color: var(--lavendule);
	content: "\2766";
	left: 0;
	position: absolute;
}

/* --- galerie ----------------------------------------------------------- */

.galerie {
	display: grid;
	gap: 0.6rem;
	grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
}

.galerie__polozka {
	background: none;
	border: 0;
	border-radius: var(--radius);
	cursor: zoom-in;
	overflow: hidden;
	padding: 0;
	position: relative;
}

.galerie__polozka img {
	object-fit: cover;
	transition: transform 0.4s ease;
	width: 100%;
}

.galerie__polozka:hover img,
.galerie__polozka:focus-visible img {
	transform: scale(1.05);
}

.pasek-fotek {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(3, 1fr);
}

.pasek-fotek--dve {
	grid-template-columns: repeat(2, 1fr);
}

.pasek-fotek img {
	border-radius: var(--radius);
	box-shadow: var(--stin);
	object-fit: cover;
	width: 100%;
}

/* --- tipy na okolí ----------------------------------------------------- */

.tipy {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	margin-bottom: 3rem;
}

.tip {
	background: var(--bila);
	border-left: 3px solid var(--lavendule);
	border-radius: 0 var(--radius) var(--radius) 0;
	padding: 1.35rem 1.5rem;
}

.tip h3 {
	color: var(--fialova);
	font-size: 1.05rem;
}

.tip__delka {
	color: var(--text-tlumeny);
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	margin-bottom: 0.6rem;
	text-transform: uppercase;
}

.tip p:last-child {
	font-size: 0.94rem;
	margin: 0;
}

.dva-sloupce h3 {
	color: var(--fialova);
	font-size: 0.85rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* --- ceník ------------------------------------------------------------- */

.tabulka-obal {
	margin-bottom: 2rem;
	overflow-x: auto;
}

.cenik {
	border-collapse: collapse;
	min-width: 26rem;
	width: 100%;
}

.cenik th,
.cenik td {
	border-bottom: 1px solid var(--ram);
	padding: 0.85rem 0.75rem;
	text-align: left;
}

.cenik thead th {
	color: var(--fialova);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.cenik tbody th {
	font-weight: 500;
}

.cenik td {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* --- kontakt a formulář ------------------------------------------------ */

.kontakt {
	display: grid;
	gap: clamp(2rem, 5vw, 3.5rem);
	grid-template-columns: 1fr;
}

@media (min-width: 52rem) {
	.kontakt {
		grid-template-columns: 1fr 1.2fr;
	}
}

.kontakt__udaje h3 {
	color: var(--fialova);
	font-size: 0.85rem;
	letter-spacing: 0.14em;
	margin-top: 2rem;
	text-transform: uppercase;
}

.telefon {
	align-items: baseline;
	display: flex;
	gap: 0.75rem;
	margin-bottom: 0.4rem;
}

.telefon span {
	color: var(--text-tlumeny);
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	min-width: 3.5rem;
	text-transform: uppercase;
}

.telefon a {
	font-size: 1.1rem;
	font-weight: 600;
	text-decoration: none;
}

.gps {
	color: var(--text-tlumeny);
	font-size: 0.85rem;
	font-variant-numeric: tabular-nums;
}

.odkazy {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.odkazy a {
	border: 1px solid var(--ram);
	border-radius: 999px;
	display: inline-block;
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	padding: 0.35rem 1rem;
	text-decoration: none;
}

.odkazy a:hover,
.odkazy a:focus-visible {
	background: var(--fialova);
	border-color: var(--fialova);
	color: var(--bila);
}

.kontakt__formular {
	background: var(--bila);
	border: 1px solid var(--ram);
	border-radius: var(--radius);
	box-shadow: var(--stin);
	padding: clamp(1.5rem, 4vw, 2.25rem);
}

.kontakt__formular h3 {
	color: var(--fialova);
	font-size: 0.85rem;
	letter-spacing: 0.14em;
	margin-bottom: 1.5rem;
	text-transform: uppercase;
}

.pole {
	margin-bottom: 1.1rem;
}

.pole label {
	display: block;
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	margin-bottom: 0.35rem;
}

.pole input,
.pole textarea {
	background: var(--krem);
	border: 1px solid var(--ram);
	border-radius: 0.45rem;
	color: var(--text);
	font-family: inherit;
	font-size: 1rem;
	padding: 0.7rem 0.85rem;
	width: 100%;
}

.pole input:focus,
.pole textarea:focus {
	border-color: var(--fialova);
	outline: 2px solid rgb(100 73 133 / 25%);
	outline-offset: 1px;
}

.pole textarea {
	resize: vertical;
}

.pole-dvojice {
	display: grid;
	gap: 0 1rem;
	grid-template-columns: 1fr 1fr;
}

.pole--souhlas label {
	align-items: flex-start;
	display: flex;
	font-size: 0.88rem;
	font-weight: 400;
	gap: 0.6rem;
	letter-spacing: 0;
	line-height: 1.5;
}

.pole--souhlas input {
	margin-top: 0.25rem;
	width: auto;
}

.pole--chyba input,
.pole--chyba textarea {
	border-color: #b3524a;
}

.chyba {
	color: #b3524a;
	display: block;
	font-size: 0.82rem;
	margin-top: 0.3rem;
}

.past {
	left: -9999px;
	position: absolute;
}

.hlaska {
	border-radius: 0.5rem;
	font-size: 0.95rem;
	margin-bottom: 1.5rem;
	padding: 0.9rem 1.1rem;
}

.hlaska--ok {
	background: #e8f2ea;
	border-left: 3px solid #5b7f68;
}

.hlaska--chyba {
	background: #f8ecea;
	border-left: 3px solid #b3524a;
}

/* --- patička ----------------------------------------------------------- */

.paticka {
	background: var(--lavendule);
	color: var(--bila);
	padding: 3.5rem 0 2.5rem;
	text-align: center;
}

.paticka__logo {
	height: auto;
	margin: 0 auto 1.25rem;
	width: 4.5rem;
}

.paticka a {
	color: var(--bila);
	text-decoration: none;
}

.paticka a:hover,
.paticka a:focus-visible {
	text-decoration: underline;
}

.paticka__stara {
	font-size: 1rem;
}

.paticka__provoz,
.paticka__prava {
	font-size: 0.82rem;
	opacity: 0.85;
}

.paticka__prava {
	margin: 1.5rem 0 0;
}

/* --- lupa (zvětšená fotka) --------------------------------------------- */

.lupa[hidden] {
	display: none;
}

.lupa {
	align-items: center;
	background: rgb(58 51 64 / 94%);
	display: flex;
	inset: 0;
	justify-content: center;
	padding: 1.5rem;
	position: fixed;
	z-index: 200;
}

.lupa__obsah {
	margin: 0;
	max-height: 100%;
	text-align: center;
}

.lupa__obsah img {
	border-radius: var(--radius);
	margin: 0 auto;
	max-height: 82vh;
	object-fit: contain;
	width: auto;
}

.lupa__obsah figcaption {
	color: var(--bila);
	font-size: 0.88rem;
	margin-top: 1rem;
}

.lupa__zavrit,
.lupa__sip {
	background: rgb(255 255 255 / 12%);
	border: 0;
	border-radius: 50%;
	color: var(--bila);
	cursor: pointer;
	font-size: 1.75rem;
	height: 3rem;
	line-height: 1;
	position: absolute;
	width: 3rem;
}

.lupa__zavrit {
	right: 1.25rem;
	top: 1.25rem;
}

.lupa__sip--vlevo {
	left: 1.25rem;
	top: 50%;
	transform: translateY(-50%);
}

.lupa__sip--vpravo {
	right: 1.25rem;
	top: 50%;
	transform: translateY(-50%);
}

.lupa__zavrit:hover,
.lupa__sip:hover {
	background: rgb(255 255 255 / 25%);
}

body.lupa-otevrena {
	overflow: hidden;
}

/* --- mobil ------------------------------------------------------------- */

@media (max-width: 60rem) {
	.menu-tlacitko {
		display: block;
	}

	.menu {
		background: var(--krem);
		border-top: 1px solid var(--ram);
		display: none;
		left: 0;
		position: absolute;
		right: 0;
		top: 100%;
	}

	.menu.je-otevrene {
		display: block;
	}

	.menu ul {
		flex-direction: column;
		gap: 0;
		padding: 0.5rem 1.25rem 1.25rem;
	}

	.menu li {
		border-bottom: 1px solid var(--ram);
	}

	.menu li:last-child {
		border-bottom: 0;
	}

	.menu a {
		display: block;
		font-size: 0.85rem;
		padding: 0.85rem 0;
	}

	.menu__jazyk a {
		display: inline-block;
		margin-top: 0.75rem;
	}
}

@media (max-width: 34rem) {
	.pasek-fotek {
		grid-template-columns: repeat(2, 1fr);
	}

	.hero__text {
		padding: 2.5rem 1.25rem;
	}

	.hero__logo {
		margin-bottom: 0.5rem;
		width: 5rem;
	}

	.hero__podnadpis {
		letter-spacing: 0.12em;
		margin-bottom: 1rem;
	}

	.hero__perex {
		font-size: 0.98rem;
		margin-bottom: 1.5rem;
	}

	.hero__tlacitka .tlacitko {
		padding: 0.85rem 1.25rem;
		width: 100%;
	}

	.lupa__sip {
		bottom: 1.25rem;
		top: auto;
		transform: none;
	}

	.lupa__sip--vlevo {
		left: 25%;
	}

	.lupa__sip--vpravo {
		right: 25%;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}