/* ==========================================================
   SKOLNI JIDELNA KRNOV - hrava vrstva
   Nacita se az za style.css, takze prepisuje jeho pravidla.
   Tokeny (barvy, pisma, radiusy) jsou v style.css v :root.
   ========================================================== */

/*
	Dekorativni prvky (naklonena poklicka hrnce, presah poklicky v paticce)
	vyckuji o kousek za pravy okraj okna. Clip je odstrihne a na rozdil od
	hidden neudela ze stranky scroll kontejner.
*/
html {
	overflow-x: clip;
}

/* ----------------------------------------------------------
   1. Typografie
   ---------------------------------------------------------- */
h1, h2, h3, h4,
.section__title,
.page-header__title,
.page-subsection__title,
.staff-card__name,
.blok-card__name,
.pricing-card__title {
	font-family: var(--font-heading);
	font-weight: 700;
	letter-spacing: 0;
}

.section__title,
.page-header__title {
	font-weight: 800;
	color: var(--color-gold-dark);
	text-transform: none;
}

.section__title {
	font-size: clamp(1.7rem, 3vw, 2.3rem);
}

.page-subsection__title {
	color: var(--color-gold-dark);
	font-weight: 800;
}

/* Vlnka pod nadpisem sekce */
.page-subsection__title::after,
.section__title::after {
	content: '';
	display: block;
	width: 74px;
	height: 8px;
	margin-top: 0.6rem;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--color-gold) 0 40%, var(--color-accent-2) 40% 70%, var(--color-yellow) 70% 100%);
}

.page-subsection__title::after,
.staff-section .section__title::after {
	margin-left: auto;
	margin-right: auto;
}

.page-header__eyebrow {
	font-family: var(--font-body);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-accent-2);
	font-size: 0.78rem;
}

/* ----------------------------------------------------------
   2. Logo / znacka
   ---------------------------------------------------------- */
.brand {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	text-decoration: none;
	padding: 0.55rem 0;
}

.brand__mark {
	width: 68px;
	height: 58px;
	flex: none;
	transition: transform 0.3s ease;
}

.brand:hover .brand__mark {
	transform: rotate(-6deg) scale(1.04);
}

.brand__text {
	display: flex;
	flex-direction: column;
	line-height: 1;
}

.brand__kicker {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.68rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--color-text-light);
	margin-bottom: 0.28rem;
}

.brand__name {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 1.75rem;
	letter-spacing: 0.01em;
	color: var(--color-gold-dark);
}

.brand__name::after {
	content: '.';
	color: var(--color-accent-2);
}

.brand__address {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	color: var(--color-text-light);
	margin-top: 0.3rem;
}

.brand--footer .brand__mark {
	width: 56px;
	height: 48px;
}

.brand--footer .brand__name {
	font-size: 1.4rem;
}

.brand--footer .brand__address {
	font-size: 0.68rem;
}

/* ----------------------------------------------------------
   3. Tlacitka
   ---------------------------------------------------------- */
.btn {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 0.01em;
	padding: 0.7rem 1.9rem;
	border-width: 2px;
	transition: transform 0.15s ease, background-color 0.2s ease, box-shadow 0.15s ease, color 0.2s ease;
}

.btn--primary {
	background-color: var(--color-accent-2);
	border-color: var(--color-accent-2);
	color: var(--color-white);
	box-shadow: 0 4px 0 var(--color-accent-2-dark);
}

.btn--primary:hover {
	background-color: var(--color-accent-2-dark);
	border-color: var(--color-accent-2-dark);
	color: var(--color-white);
	transform: translateY(3px);
	box-shadow: 0 1px 0 var(--color-accent-2-dark);
}

.btn--outline {
	color: var(--color-gold-dark);
	border-color: var(--color-gold);
	background-color: var(--color-white);
	box-shadow: 0 4px 0 var(--color-gold-light);
}

.btn--outline:hover {
	background-color: var(--color-gold);
	border-color: var(--color-gold);
	color: var(--color-white);
	transform: translateY(3px);
	box-shadow: 0 1px 0 var(--color-gold-dark);
}

/* Tlacitka vlozena do obsahu z editoru - odkazy v .rich-text jsou zelene,
   tlacitko ma ale vypadat stejne jako "Jidelnicek" v hlavicce */
.rich-text a.btn,
.rich-text a.btn:hover {
	text-decoration: none;
}

.rich-text a.btn--primary,
.rich-text a.btn--primary:hover {
	color: var(--color-white);
}

.rich-text a.btn--outline {
	color: var(--color-gold-dark);
}

.rich-text a.btn--outline:hover {
	color: var(--color-white);
}

/* ----------------------------------------------------------
   4. Hlavicka a navigace
   ---------------------------------------------------------- */
.header {
	border-bottom: none;
	box-shadow: 0 2px 18px rgba(30, 100, 70, 0.06);
}

.header--overlay {
	box-shadow: none;
}

.nav__link {
	font-family: var(--font-heading);
	font-weight: 600;
	letter-spacing: 0.02em;
	border-radius: var(--radius-pill);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.nav--desktop .nav__link {
	padding: 0.45rem 0.85rem;
}

.nav--desktop .nav__link:hover,
.nav--desktop .nav__dropdown:hover > .nav__link {
	background: var(--color-gold-light);
	color: var(--color-gold-dark);
}

.nav__submenu {
	border-radius: 16px;
	overflow: hidden;
	box-shadow: var(--shadow-card);
}

.header__cta {
	padding: 0.6rem 1.5rem;
	font-size: 0.95rem;
}

/* Hamburger jako talir z loga, se tremi carkami pro zachovani jasneho vyznamu menu */
.hamburger {
	position: relative;
	align-items: center;
	gap: 5px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: transparent;
	border: 3px solid var(--color-gold);
	box-shadow: none;
	transition: border-color 0.2s ease, transform 0.15s ease;
}

.hamburger span {
	position: relative;
	z-index: 1;
	height: 4px;
	border-radius: 999px;
	transition: width 0.3s ease, transform 0.3s ease;
}

.hamburger span:nth-child(1) {
	width: 24px;
	background: var(--color-gold-dark);
	transform: translateX(-3px);
}

.hamburger span:nth-child(2) {
	width: 16px;
	background: var(--color-accent-2);
	transform: translateX(3px);
}

.hamburger span:nth-child(3) {
	width: 20px;
	background: var(--color-blue);
	transform: translateX(-1px);
}

.hamburger:hover,
.hamburger:focus-visible {
	border-color: var(--color-accent-2);
}

.hamburger:hover span,
.hamburger:focus-visible span {
	width: 24px;
	transform: none;
}

.hamburger:active {
	transform: translateY(2px);
}

/* ----------------------------------------------------------
   5. Hero bez fotky - hero a pasek dohromady vyplni vysku okna,
      takze hrnec (pasek s poklickou) sedi u dolniho okraje
   ---------------------------------------------------------- */

/* Rozmery hrnce - plati pro pasek pod hero i pro paticku */
:root {
	--hero-strip-h: 135px;   /* vyska pasku = telo hrnce */
	--pot-lid-h: 20px;       /* tloustka poklicky */
	--pot-knob-h: 50px;      /* vyska drzatka */
	--pot-knob-w: 400px;     /* sirka drzatka */
	--pot-knob-thickness: 20px;  /* stejna tloustka car jako ma poklicka */
	--pot-lid-tilt: 0.45deg; /* prava hrana dosedne, leva se zvedne o ~10 px */
}

.hero--plain {
	display: flex;
	flex-direction: column;
	height: auto;
	min-height: max(420px, calc(100vh - var(--hero-strip-h)));
	min-height: max(420px, calc(100svh - var(--hero-strip-h)));
	background: linear-gradient(165deg, #F4FAF6 0%, #FFF8EE 52%, #FFEBD5 100%);
}

.hero--plain::after {
	background: none;
}

/* Text vlevo, ilustrace vpravo - v ramci stejne sirky jako hlavicka (1280 px) */
.hero--plain .container {
	flex: 1 1 auto;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	/* dolni odsazeni, aby obsah nelezl na poklicku a jeji ousko */
	padding-bottom: calc(var(--pot-lid-h) + var(--pot-knob-h) + 1.75rem);
}

.hero--plain .hero__content {
	text-shadow: none;
	flex: 0 1 540px;
	max-width: 540px;
	margin: 0;
}

/* stejne jako nadtitulek nad H1 na podstrankach (.page-header__eyebrow) */
.hero__eyebrow {
	margin-bottom: 0.6rem;
	font-family: var(--font-body);
	font-style: normal;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-size: 0.8rem;
	color: var(--color-accent-2);
}

.hero__eyebrow p {
	margin: 0;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
}

.hero__title {
	font-weight: 800;
}

/* Ilustrace v hero (prostreno + silueta budovy) - 62vh ji drzi v rozumne vysce i na nizkych oknech,
   aby se hero i s hrncem poradne veslo do vysky okna */
.hero__art {
	position: relative;
	z-index: 1;
	flex: 0 1 min(48vw, 620px, 62vh);
	width: min(48vw, 620px, 62vh);
	pointer-events: none;
}

.hero__art svg {
	width: 100%;
	height: auto;
	display: block;
}

.hero__art-steam {
	animation: steamRise 3.4s ease-in-out infinite;
	transform-origin: center bottom;
}

.hero__art-steam--2 {
	animation-delay: 0.6s;
}

.hero__art-steam--3 {
	animation-delay: 1.2s;
}

@keyframes steamRise {
	0%, 100% { opacity: 0.45; transform: translateY(0); }
	50% { opacity: 0.9; transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
	.hero__art-steam {
		animation: none;
	}
}

@media (max-width: 1024px) {
	.hero--plain .container {
		gap: 1.25rem;
	}

	.hero__art {
		flex-basis: min(40vw, 52vh);
		width: min(40vw, 52vh);
	}
}

/* Pasek se zalomi do dvou sloupcu, hrnec je tedy vyssi. Kratsi poklicka
   potrebuje vetsi uhel, aby se leva hrana zvedla o podobnych 10 px. */
@media (max-width: 900px) {
	:root {
		--hero-strip-h: 193px;
		--pot-lid-tilt: 0.75deg;
	}
}

/*
	Mobil: text, hned pod nim ilustrace a pod ni pasek - aby byl pasek videt
	bez posouvani. Ilustrace se na nizkych displejich zmensuje.
*/
@media (max-width: 720px) {
	.hero--plain .container {
		flex-direction: column;
		justify-content: flex-start;
		gap: 1rem;
		padding-top: calc(var(--header-height) + 1rem);
		padding-bottom: calc(var(--pot-lid-h) + var(--pot-knob-h) + 0.75rem);
	}

	/* ve sloupci by flex-basis 540px znamenal vysku 540 px (velka mezera pod textem) */
	.hero--plain .hero__content {
		flex: none;
	}

	.hero--plain .hero__title {
		margin-bottom: 0.9rem;
	}

	.hero--plain .hero__content-text {
		margin-bottom: 1.25rem;
		font-size: 0.98rem;
		line-height: 1.6;
	}

	.hero__art {
		flex: none;
		width: 100vw;
		max-width: none;
		margin-inline: calc(50% - 50vw);
	}
}

/* Uzka okna - drzatko 400 px by se uz neveslo, zmensuje se s obrazovkou */
@media (max-width: 560px) {
	:root {
		--pot-knob-w: 74vw;
		--pot-knob-h: 36px;
		--pot-knob-thickness: 14px;
		--pot-lid-h: 14px;
		--pot-lid-tilt: 1.4deg;
	}
}

/* Pasek na jeden sloupec - hrnec zabira uz hodne mista */
@media (max-width: 480px) {
	:root {
		--hero-strip-h: 240px;
	}
}

/* ----------------------------------------------------------
   6. Pasek pod hero
   ---------------------------------------------------------- */
.hero__strip {
	background: var(--color-gold-dark);
	border-top: none;
}

/*
	Vsechna policka stejne siroka (podle nejdelsiho textu): seznam ma sirku
	podle obsahu, takze sloupce 1fr dostanou sirku nejsirsi polozky. Obsah
	je zarovnany vlevo - pod sebou (tablet, mobil) jsou ikonky v jedne linii.
*/
.hero__strip-list {
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
	grid-template-columns: repeat(var(--strip-count, 4), minmax(0, 1fr));
	padding: 2.9rem 0;
	gap: 1rem clamp(1rem, 2vw, 2rem);
}

.hero__strip-item {
	justify-content: flex-start;
}

@media (max-width: 900px) {
	.hero__strip-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	/* pod sebou a hustsi, aby se pasek na mobilu vesel pod hero */
	.hero__strip-list {
		grid-template-columns: minmax(0, 1fr);
		padding: 1.6rem 0;
		row-gap: 0.55rem;
	}

	.hero__strip-icon {
		width: 36px;
		height: 36px;
	}

	.hero__strip-text {
		font-size: 0.95rem;
	}
}

.hero__strip-icon {
	display: inline-grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	color: var(--color-white);
}

.hero__strip-text {
	font-family: var(--font-body);
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0.01em;
	font-size: 1.02rem;
	color: var(--color-white);
}

/* ----------------------------------------------------------
   7. Karty
   ---------------------------------------------------------- */
.blok-card,
.staff-card,
.pricing-card,
.info-item,
.news-card {
	border-radius: var(--radius-card);
}

.blok-card,
.staff-card {
	border: 2px solid var(--color-border);
	box-shadow: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.blok-card:hover,
.staff-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-card-hover);
	border-color: var(--color-gold-light);
}

/* Tlacitka "Pridat ..." v mrizkach karet - ve vsech sekcich stejne carkovana */
.blok-card.blok-card--attach,
.staff-card.staff-card--attach {
	border: 2px dashed var(--color-border);
	background: var(--color-bg-light);
	box-shadow: none;
}

.blok-card.blok-card--attach:hover,
.staff-card.staff-card--attach:hover {
	transform: none;
	box-shadow: none;
	border-color: var(--color-gold);
	background: var(--color-bg);
}

/* Barevna pozadi karet - viz vyber "Barva pozadi karty" v administraci */
.blok-card--bg-modra,
.card-bg-modra {
	background: var(--color-blue-bg) !important;
}

.blok-card--bg-ruzova,
.card-bg-ruzova {
	background: var(--color-accent-2-bg) !important;
}

/* Vyhody - barevny puntik nad kartou */
.staff-grid--vyhody .staff-card,
.staff-carousel__track--vyhody .staff-card {
	background: var(--color-white);
	padding-top: 1.6rem;
	text-align: center;
}

.staff-grid--vyhody .staff-card::before,
.staff-carousel__track--vyhody .staff-card::before {
	content: '';
	display: block;
	width: 54px;
	height: 54px;
	margin: 0 auto 0.4rem;
	border-radius: 50%;
	background: var(--color-gold-light);
}

.staff-grid--vyhody .staff-card:nth-child(4n+2)::before {
	background: var(--color-accent-2-light);
}

.staff-grid--vyhody .staff-card:nth-child(4n+3)::before {
	background: var(--color-blue-bg);
}

.staff-grid--vyhody .staff-card:nth-child(4n)::before {
	background: #FFEFC2;
}

/* Personal - pozice pod jmenem, kontakty az pod popisem */
.staff-card__role {
	font-family: var(--font-body);
	font-weight: 800;
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent-2-dark);
	margin-bottom: 0.5rem;
}

.staff-card__body:has(.staff-card__role) {
	display: flex;
	flex-direction: column;
}

.staff-card__body:has(.staff-card__role) .staff-card__contact {
	order: 1;
	margin-top: 0.75rem;
	margin-bottom: 0;
}

.staff-card__body:has(.staff-card__role) .staff-card__more {
	order: 2;
}

/*
	Cislo / ikona karty v sekcich typu "blok" (volba "Ikona karty" v administraci).
	Vlastni cislovani i zvolena ikona sedi ve stejnem barevnem kruhu nad levym
	hornim rohem karty. Barvy se stridaji po trech: zelena, oranzova, modra.
*/
.blok-card.blok-card--badge {
	overflow: visible;
	padding-top: 1.2rem;
}

.blok-card.blok-card--badge .blok-card__number,
.blok-card.blok-card--badge .blok-card__icon,
.blok-card.blok-card--badge:hover .blok-card__number,
.blok-card.blok-card--badge:hover .blok-card__icon {
	position: absolute;
	top: -18px;
	left: 24px;
	width: 44px;
	height: 44px;
	margin: 0;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 1.25rem;
	line-height: 1;
	color: var(--color-white);
	background: var(--color-gold);
	box-shadow: 0 4px 0 var(--color-gold-dark);
	transform: none;
	z-index: 2;
}

.blok-card.blok-card--badge .blok-card__icon svg {
	width: 22px;
	height: 22px;
}

.blok-card.blok-card--badge:nth-child(3n+2) .blok-card__number,
.blok-card.blok-card--badge:nth-child(3n+2) .blok-card__icon {
	background: var(--color-accent-2);
	box-shadow: 0 4px 0 var(--color-accent-2-dark);
}

.blok-card.blok-card--badge:nth-child(3n) .blok-card__number,
.blok-card.blok-card--badge:nth-child(3n) .blok-card__icon {
	background: var(--color-blue);
	box-shadow: 0 4px 0 #2C6EA6;
}

/* karusel ma overflow-x: auto, ktery by kruh nad kartou orizl */
.blok-carousel__track:has(.blok-card--badge) {
	padding-top: 22px;
}

/* Aktualita bez fotky - misto prazdneho ramecku roztahneme text pres celou sirku */
.info-item__grid:has(.info-item__image-placeholder) {
	grid-template-columns: 1fr;
	grid-template-areas: "card";
}

.info-item__image:has(.info-item__image-placeholder) {
	display: none;
}

.news-item__meta {
	font-family: var(--font-body);
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-size: 0.72rem;
	color: var(--color-accent-2-dark);
}

/* ----------------------------------------------------------
   8. Cenik
   ---------------------------------------------------------- */
.pricing-card {
	border: 2px solid var(--color-border);
	background: var(--color-white);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.pricing-card:hover {
	transform: translateY(-4px);
	border-color: var(--color-gold-light);
	box-shadow: var(--shadow-card-hover);
}

.pricing-card__badge {
	background: var(--color-gold-light);
	color: var(--color-gold-dark);
	font-family: var(--font-body);
	font-weight: 800;
	letter-spacing: 0.08em;
	border-radius: var(--radius-pill);
}

.pricing-card__price {
	font-family: var(--font-heading);
	font-weight: 800;
	color: var(--color-accent-2-dark);
}

.pricing-cards.staff-carousel__track--pricing {
	display: flex;
	max-width: none;
	margin: 0;
	gap: 2rem;
}

.staff-carousel__track--pricing .pricing-card {
	flex: 0 0 calc((100% - (var(--items-per-row, 3) - 1) * 2rem) / var(--items-per-row, 3));
	min-width: 240px;
}

@media (max-width: 768px) {
	.staff-carousel__track--personal .staff-card {
		flex: 0 0 100%;
		min-width: 0;
		scroll-snap-stop: always;
	}

	.staff-carousel__track--pricing .pricing-card {
		flex: 0 0 100%;
		min-width: 0;
		scroll-snap-stop: always;
	}
}

@media (max-width: 480px) {
	.staff-carousel__track--pricing .pricing-card {
		flex-basis: 100%;
		min-width: 0;
	}
}

/* ----------------------------------------------------------
   9. Sekce a paticka
   ---------------------------------------------------------- */
/* Kontaktni formular pred patickou - rozlozeni podle ProfiPage:
   bila karta se stinem, vlevo kontaktni udaje, vpravo zprava */
.section--contact-form {
	padding-block: clamp(3rem, 6vw, 5rem);
	background: var(--color-bg);
}

.contact-form-box {
	max-width: 1060px;
	margin-inline: auto;
	padding: 3rem clamp(1.5rem, 4vw, 3.25rem);
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
}

.contact-form-box__title {
	font-family: var(--font-heading);
	font-size: clamp(1.7rem, 3.2vw, 2.2rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: 0;
	text-transform: none;
	color: var(--color-gold-dark);
	margin-bottom: 0.75rem;
}

/* stejna vlnka jako pod nadpisy sekci */
.contact-form-box__title::after {
	content: '';
	display: block;
	width: 74px;
	height: 8px;
	margin: 0.6rem auto 0;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--color-gold) 0 40%, var(--color-accent-2) 40% 70%, var(--color-yellow) 70% 100%);
}

.contact-form-box__subtitle {
	max-width: 54ch;
	margin: 0 auto 2.5rem;
	font-size: 1.02rem;
}

.contact-form-box__grid {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
	gap: 1.75rem;
	align-items: stretch;
}

.contact-form-box__left,
.contact-form-box__right {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}

.contact-form-box .form-group,
.contact-form-box__left .form-group {
	margin: 0;
}

.contact-form-box .form-control {
	width: 100%;
	padding-inline: 1rem;
	font-family: var(--font-body);
	font-size: 0.98rem;
	background: var(--color-cream);
	border: 1.5px solid var(--color-border);
	border-radius: 14px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.contact-form-box .form-control:focus {
	outline: none;
	background: var(--color-white);
	border-color: var(--color-gold);
	box-shadow: 0 0 0 4px rgba(47, 163, 107, 0.14);
}

.contact-form-box .field-float .form-control:focus + label,
.contact-form-box .field-float .form-control:not(:placeholder-shown) + label {
	font-weight: 700;
	text-transform: uppercase;
	color: var(--color-gold-dark);
}

/* textove pole vyplni vysku leveho sloupce */
.contact-form-box .field-float--textarea {
	flex: 1 1 auto;
	display: flex;
}

.contact-form-box .field-float--textarea .form-control {
	flex: 1 1 auto;
	min-height: 148px;
}

.contact-form-box__bottom {
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1.25rem;
	margin-top: 0.35rem;
}

.contact-form-box__bottom .form-checkbox {
	flex: 1 1 260px;
	max-width: 42ch;
	align-items: flex-start;
	gap: 0.6rem;
	line-height: 1.55;
	color: var(--color-text-light);
	cursor: pointer;
}

.contact-form-box__bottom .form-checkbox input {
	margin-top: 0.25rem;
	accent-color: var(--color-gold);
}

.contact-form-box__bottom .btn--submit {
	min-width: 200px;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 700;
}

@media (max-width: 900px) {
	.contact-form-box__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.contact-form-box {
		padding: 2rem 1.35rem;
	}

	.contact-form-box__bottom {
		flex-direction: column;
		align-items: stretch;
	}

	/* ve sloupci by flex-basis 260px natahl vysku */
	.contact-form-box__bottom .form-checkbox {
		flex: 0 0 auto;
		max-width: none;
	}

	.contact-form-box__bottom .btn--submit {
		width: 100%;
	}
}

/*
	Hrnec s poklickou podle predlohy PODKLADY/pot-with-lid-svgrepo-com.svg.
	Stejna sestava se pouziva dvakrat: pasek pod hero (.pot-lid--hero) a
	paticka (telo kresli .footer::before). Telo je proste hranaty obdelnik,
	nad nim plocha poklicka a na ni dute obdelnikove drzatko.

	Poklicka je lehce naklonena: pravou hranou dosedla na okraj hrnce, vlevo
	se nadzvedla a vznikla klinova skvira - bubliny z pozadi ji stoupaji ven,
	takze to vypada, ze se z hrnce kouri.
*/
/* Patička drží u spodní hrany okna i na kratkych strankach */
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* ve flex sloupci by se .container s margin: auto smrskl na sirku obsahu
   (napr. "Pridat dalsi sekci") - roztahneme ho na plnou sirku containeru */
body > .container {
	width: 100%;
}

body > * {
	flex: none;
}

.footer {
	--pot-gap: var(--pot-lid-h);   /* pruh nad telem hrnce, do ktereho dosedne poklicka */
	--pot-lid: #12583A;
	position: relative;
	margin-top: auto;
	padding-top: calc(3rem + var(--pot-gap));
	background: transparent;
	color: rgba(255, 255, 255, 0.88);
}

/* telo hrnce - obdelnik zacinajici az pod poklickou */
.footer::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: var(--pot-gap);
	bottom: 0;
	background: var(--color-gold-dark);
}

.footer .container {
	position: relative;
	z-index: 1;
}

/* poklicka - plocha hranata desticka pres celou sirku */
.pot-lid {
	--pot-lid: #12583A;
	position: absolute;
	left: 0;
	right: 0;
	height: var(--pot-lid-h);
	background: var(--pot-lid);
	border-radius: 5px 5px 3px 3px;
	box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.14);
	filter: drop-shadow(0 3px 4px rgba(12, 60, 36, 0.18));
	transform: rotate(var(--pot-lid-tilt));
	transform-origin: 100% 0;   /* cep vpravo nahore: prava hrana dosedne, leva se zvedne */
}

/* drzatko - hranaty obrys otevreny dolu, se stejnou tloustkou car jako poklicka */
.pot-lid::before {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 100%;
	width: var(--pot-knob-w);
	height: var(--pot-knob-h);
	transform: translateX(-50%);
	background: transparent;
	border: var(--pot-knob-thickness) solid var(--pot-lid);
	border-bottom: 0;
	border-radius: 8px 8px 0 0;
}

/* poklicka paticky - dosedne na horni hranu jejiho tela */
.footer .pot-lid {
	top: calc(var(--pot-gap) - var(--pot-lid-h));
}

/* pasek pod hero je druhy hrnec - proste hranaty obdelnik */
.hero__strip {
	position: relative;
}

/* poklicka hero pasku - dosedne na jeho horni hranu */
.pot-lid--hero {
	top: auto;
	bottom: 100%;
}

.footer a,
.footer__text,
.footer__content,
.footer__brand p,
.footer__text-contact-item,
.footer__links a {
	color: rgba(255, 255, 255, 0.86);
}

.footer a:hover,
.footer__links a:hover,
.footer__text-contact-item:hover {
	color: var(--color-yellow);
}

.footer .brand__kicker,
.footer .brand__address {
	color: rgba(255, 255, 255, 0.7);
}

.footer .brand__name {
	color: var(--color-white);
}

.footer .brand__mark .mark-plate {
	fill: var(--color-white);
}

.footer__copy {
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	color: rgba(255, 255, 255, 0.7);
}

.footer__copy a {
	color: var(--color-white);
}

.footer__text-social-link {
	border-color: rgba(255, 255, 255, 0.4);
	color: var(--color-white);
}

/* ----------------------------------------------------------
   10. Pozadi stranky - plovouci kolecka
   Vrstva .bubbles je fixni pres cele okno a lezi pod obsahem
   (z-index: -1), takze sekce s vlastnim pozadim (hero, pasek,
   formular, paticka) ji prekryji. Markup je v @layout.latte.
   ---------------------------------------------------------- */
body {
	background-color: #FDFBF7;
}

.bubbles {
	position: fixed;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}

.bubbles span {
	position: absolute;
	display: block;
	border-radius: 50%;
	background: var(--bubble, rgba(47, 163, 107, 0.07));
	width: var(--size, 40px);
	height: var(--size, 40px);
	left: var(--left, 50%);
	bottom: -16vh;
	opacity: 0;
	animation: bubbleRise var(--dur, 22s) linear var(--delay, 0s) infinite;
	will-change: transform, opacity;
}

/*
	Bublina stoupa vzhuru jako para nad hrncem, cestou se kolebe do stran
	a na konci "praskne" - rychle se nafoukne a zmizi.
	Vysku vystupu urcuje --rise, vychyleni do stran --sway.
*/
@keyframes bubbleRise {
	0% {
		opacity: 0;
		transform: translate3d(0, 0, 0) scale(0.7);
	}
	7% {
		opacity: 1;
		transform: translate3d(calc(var(--sway, 12px) * 0.4), calc(var(--rise, 100vh) * -0.07), 0) scale(1);
	}
	28% {
		transform: translate3d(var(--sway, 12px), calc(var(--rise, 100vh) * -0.28), 0) scale(1.01);
	}
	52% {
		transform: translate3d(calc(var(--sway, 12px) * -1), calc(var(--rise, 100vh) * -0.52), 0) scale(1.03);
	}
	76% {
		transform: translate3d(var(--sway, 12px), calc(var(--rise, 100vh) * -0.76), 0) scale(1.05);
	}
	88% {
		opacity: 1;
		transform: translate3d(0, calc(var(--rise, 100vh) * -0.88), 0) scale(1.07);
	}
	96% {
		opacity: 0;
		transform: translate3d(0, calc(var(--rise, 100vh) * -0.96), 0) scale(1.65);
	}
	100% {
		opacity: 0;
		transform: translate3d(0, calc(var(--rise, 100vh) * -1), 0) scale(1.65);
	}
}

/*
	Rozmisteni jednotlivych bublin. Zaporne --delay znamena, ze animace uz bezi
	od nacteni stranky - bubliny jsou tak hned rozprostrene po cele vysce.
	--top slouzi jen jako nahradni poloha pri vypnutych animacich.
*/
.bubbles span:nth-child(1)  { --left: 5%;  --top: 11%; --size: 84px; --bubble: rgba(47, 163, 107, 0.07); --dur: 32s; --delay: -4s;  --rise: 104vh; --sway: 16px; }
.bubbles span:nth-child(2)  { --left: 18%; --top: 62%; --size: 26px; --bubble: rgba(255, 201, 60, 0.20); --dur: 21s; --delay: -13s; --rise: 88vh;  --sway: 20px; }
.bubbles span:nth-child(3)  { --left: 30%; --top: 21%; --size: 50px; --bubble: rgba(245, 135, 46, 0.09); --dur: 26s; --delay: -19s; --rise: 96vh;  --sway: 14px; }
.bubbles span:nth-child(4)  { --left: 42%; --top: 79%; --size: 16px; --bubble: rgba(62, 143, 208, 0.12); --dur: 18s; --delay: -6s;  --rise: 72vh;  --sway: 24px; }
.bubbles span:nth-child(5)  { --left: 52%; --top: 6%;  --size: 104px;--bubble: rgba(47, 163, 107, 0.05); --dur: 36s; --delay: -24s; --rise: 110vh; --sway: 12px; }
.bubbles span:nth-child(6)  { --left: 63%; --top: 44%; --size: 32px; --bubble: rgba(255, 201, 60, 0.16); --dur: 22s; --delay: -2s;  --rise: 84vh;  --sway: 18px; }
.bubbles span:nth-child(7)  { --left: 74%; --top: 15%; --size: 64px; --bubble: rgba(62, 143, 208, 0.07); --dur: 29s; --delay: -16s; --rise: 100vh; --sway: 15px; }
.bubbles span:nth-child(8)  { --left: 86%; --top: 66%; --size: 42px; --bubble: rgba(245, 135, 46, 0.10); --dur: 24s; --delay: -9s;  --rise: 92vh;  --sway: 17px; }
.bubbles span:nth-child(9)  { --left: 94%; --top: 27%; --size: 20px; --bubble: rgba(255, 201, 60, 0.22); --dur: 19s; --delay: -15s; --rise: 78vh;  --sway: 22px; }
.bubbles span:nth-child(10) { --left: 9%;  --top: 87%; --size: 56px; --bubble: rgba(245, 135, 46, 0.08); --dur: 27s; --delay: -21s; --rise: 98vh;  --sway: 14px; }
.bubbles span:nth-child(11) { --left: 24%; --top: 39%; --size: 12px; --bubble: rgba(47, 163, 107, 0.14); --dur: 17s; --delay: -11s; --rise: 68vh;  --sway: 26px; }
.bubbles span:nth-child(12) { --left: 38%; --top: 53%; --size: 72px; --bubble: rgba(201, 235, 216, 0.55);--dur: 33s; --delay: -7s;  --rise: 106vh; --sway: 13px; }
.bubbles span:nth-child(13) { --left: 58%; --top: 88%; --size: 28px; --bubble: rgba(47, 163, 107, 0.09); --dur: 20s; --delay: -18s; --rise: 82vh;  --sway: 19px; }
.bubbles span:nth-child(14) { --left: 68%; --top: 70%; --size: 14px; --bubble: rgba(245, 135, 46, 0.14); --dur: 16s; --delay: -3s;  --rise: 64vh;  --sway: 25px; }
.bubbles span:nth-child(15) { --left: 80%; --top: 91%; --size: 90px; --bubble: rgba(201, 235, 216, 0.45);--dur: 34s; --delay: -28s; --rise: 108vh; --sway: 12px; }
.bubbles span:nth-child(16) { --left: 90%; --top: 47%; --size: 24px; --bubble: rgba(47, 163, 107, 0.10); --dur: 23s; --delay: -12s; --rise: 86vh;  --sway: 21px; }

/*
	Hero ma neprusvitne pozadi, takze pres nej vrstva na pozadi stranky neni
	videt - dostane proto vlastni kopii bublin uvnitr sekce. Vysku vystupu
	zkracujeme, aby bubliny praskly jeste uvnitr hero.
*/
.bubbles--hero {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.bubbles--hero span {
	--rise: 58vh;
}

.bubbles--hero span:nth-child(3n) {
	--rise: 72vh;
}

.bubbles--hero span:nth-child(4n) {
	--rise: 44vh;
}

@media (prefers-reduced-motion: reduce) {
	.bubbles span {
		animation: none;
		opacity: 1;
		bottom: auto;
		top: var(--top, 50%);
	}
}

/* Karty a bloky maji vlastni bilou, aby text zustal citelny */
.blok-card,
.staff-card,
.pricing-card,
.info-item,
.contact-form-box,
.modal-box {
	background-color: var(--color-white);
}

/* ----------------------------------------------------------
   11. Drobnosti
   ---------------------------------------------------------- */
/*
	Jablicko z hero ilustrace jako znacka - odrazky v seznamech a dokumenty
	ke stazeni. Oranzove a zelene se stridaji.
*/
:root {
	--apple-orange: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 52'%3E%3Ccircle cx='24' cy='31' r='20' fill='%23F5872E'/%3E%3Cellipse cx='16.5' cy='24' rx='5' ry='3.5' fill='%23fff' opacity='.4'/%3E%3Cpath d='M24 12c4-8 13-10 17-10 1 7-6 12-13 12z' fill='%236BBF8A'/%3E%3Cpath d='M24 13V6' stroke='%238A6A4B' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
	--apple-green: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 52'%3E%3Ccircle cx='24' cy='31' r='20' fill='%232FA36B'/%3E%3Cellipse cx='16.5' cy='24' rx='5' ry='3.5' fill='%23fff' opacity='.4'/%3E%3Cpath d='M24 12c4-8 13-10 17-10 1 7-6 12-13 12z' fill='%23FFC93C'/%3E%3Cpath d='M24 13V6' stroke='%238A6A4B' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Nerazeny seznam - misto tecky jablicko */
.rich-text ul,
.info-item__card .rich-text ul,
.blok-inline-item__card .rich-text ul {
	list-style: none;
	padding-left: 0.15rem;
}

.rich-text ul > li {
	position: relative;
	padding-left: 1.85rem;
	margin-bottom: 0.45rem;
}

.rich-text ul > li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 1.1rem;
	height: 1.2rem;
	background: var(--apple-orange) center / contain no-repeat;
}

.rich-text ul > li:nth-child(even)::before {
	background-image: var(--apple-green);
}

.rich-text li > ul {
	margin: 0.45rem 0 0.2rem;
}

.rich-text li > ul > li::before {
	top: 0.35em;
	width: 0.8rem;
	height: 0.9rem;
}

/* Razeny seznam - cisla v barevnych kruzich jako u karet bloku */
.rich-text ol {
	list-style: none;
	padding-left: 0;
	counter-reset: seznam;
}

.rich-text ol > li {
	position: relative;
	counter-increment: seznam;
	min-height: 1.8rem;
	padding-left: 2.55rem;
	margin-bottom: 0.7rem;
}

.rich-text ol > li::before {
	content: counter(seznam);
	position: absolute;
	left: 0;
	top: 0;
	width: 1.8rem;
	height: 1.8rem;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 0.98rem;
	line-height: 1;
	padding-top: 0.12em;
	color: var(--color-white);
	background: var(--color-gold);
	box-shadow: 0 3px 0 var(--color-gold-dark);
}

.rich-text ol > li:nth-child(3n+2)::before {
	background: var(--color-accent-2);
	box-shadow: 0 3px 0 var(--color-accent-2-dark);
}

.rich-text ol > li:nth-child(3n)::before {
	background: var(--color-blue);
	box-shadow: 0 3px 0 #2C6EA6;
}

/*
	Dokumenty ke stazeni - samostatne odkazy bez karty: jablicko, nazev,
	typ souboru a vyrazne tlacitko "Stahnout" se sipkou.
*/
.page-documents-section h2 {
	color: var(--color-gold-dark);
	font-weight: 800;
}

.page-documents {
	gap: 0.35rem;
	max-width: 820px;
}

.page-documents__item {
	padding: 0;
	border: none;
	border-radius: 16px;
	background: transparent;
}

.page-documents__link {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0.7rem 0.9rem 0.7rem 0.4rem;
	border-radius: 16px;
	color: var(--color-gold-dark);
	transition: background-color 0.2s ease;
}

.page-documents__link:hover {
	text-decoration: none;
	background: var(--color-accent-2-bg);
}

.page-documents__marker {
	flex: none;
	width: 2.1rem;
	height: 2.3rem;
	background: var(--apple-orange) center / contain no-repeat;
	transform-origin: 50% 90%;
	transition: transform 0.3s ease;
}

.page-documents__item:nth-child(even) .page-documents__marker {
	background-image: var(--apple-green);
}

.page-documents__link:hover .page-documents__marker {
	animation: appleWobble 0.6s ease;
}

.page-documents__name {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.12rem;
	line-height: 1.3;
	text-decoration: underline;
	text-decoration-color: var(--color-accent-2-light);
	text-decoration-thickness: 3px;
	text-underline-offset: 5px;
	transition: text-decoration-color 0.2s ease;
}

.page-documents__link:hover .page-documents__name {
	text-decoration-color: var(--color-accent-2);
}

.page-documents .doc-extension {
	flex: none;
	margin: 0;
	padding: 0.2rem 0.55rem;
	border-radius: var(--radius-pill);
	background: var(--color-gold-light);
	color: var(--color-gold-dark);
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.08em;
}

.page-documents__download {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-left: auto;
	padding: 0.45rem 1rem;
	border-radius: var(--radius-pill);
	background: var(--color-accent-2);
	box-shadow: 0 3px 0 var(--color-accent-2-dark);
	color: var(--color-white);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.92rem;
	line-height: 1;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s ease;
}

.page-documents__link:hover .page-documents__download {
	background: var(--color-accent-2-dark);
	box-shadow: 0 1px 0 var(--color-accent-2-dark);
	transform: translateY(2px);
}

.page-documents__link:hover .page-documents__download svg {
	animation: downloadBounce 0.7s ease infinite;
}

@keyframes appleWobble {
	0%, 100% { transform: rotate(0); }
	25% { transform: rotate(-12deg); }
	55% { transform: rotate(9deg); }
	80% { transform: rotate(-4deg); }
}

@keyframes downloadBounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(3px); }
}

@media (max-width: 600px) {
	.page-documents__link {
		flex-wrap: wrap;
		row-gap: 0.5rem;
	}

	/* nazev zabere cely radek vedle jablicka, typ souboru a tlacitko
	   spadnou pod nej (typ zarovnany s textem, tlacitko vpravo) */
	.page-documents__name {
		flex: 1 1 calc(100% - 3rem);
		min-width: 0;
	}

	.page-documents .doc-extension {
		margin-left: 3rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.page-documents__link:hover .page-documents__marker,
	.page-documents__link:hover .page-documents__download svg {
		animation: none;
	}
}

.rich-text blockquote {
	border-left: 5px solid var(--color-accent-2);
	background: var(--color-accent-2-bg);
	border-radius: 6px 18px 18px 6px;
	padding: 1.4rem 1.6rem 1.4rem 3.25rem;
	font-family: var(--font-heading);
	font-style: normal;
	font-weight: 500;
	font-size: 1.05rem;
	color: var(--color-gold-dark);
}

/* Baloo 2 nema kurzivu - prohlizec by ji jinak nasilne naklonil */
.page-header__title,
.nav__footer-brand,
.blok-card .quote-box,
.hero__eyebrow,
.rich-text blockquote {
	font-style: normal;
}

.reference-card__text {
	font-family: var(--font-body);
}

.rich-text table {
	width: 100%;
	border-collapse: collapse;
	margin: 1rem 0;
}

.rich-text table td {
	padding: 0.6rem 0.8rem;
	border-bottom: 1px solid var(--color-border);
}

.rich-text table tr:nth-child(odd) td {
	background: var(--color-bg);
}

.breadcrumb {
	font-size: 0.82rem;
}

.form-control {
	border-radius: 14px;
}

/* ----------------------------------------------------------
   12. Jidelnicek ze strava.cz (_jidelnicek.latte)
   ---------------------------------------------------------- */
.visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.menu {
	--menu-cols: 5;
}

.menu__week + .menu__week {
	margin-top: 1.25rem;
}

/* hlavicka tydne: stitek + rozsah dnu, na strance jidelnicku rozbalovaci */
.menu__week-head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem 0.8rem;
	margin-bottom: 1rem;
	list-style: none;
}

.menu__week-head::-webkit-details-marker {
	display: none;
}

summary.menu__week-head {
	cursor: pointer;
	padding: 0.6rem 0.9rem;
	border-radius: 16px;
	transition: background-color 0.2s ease;
}

summary.menu__week-head:hover {
	background: var(--color-bg);
}

details.menu__week:not([open]) > .menu__week-head {
	margin-bottom: 0;
}

.menu__week-label {
	padding: 0.25rem 0.75rem;
	border-radius: var(--radius-pill);
	background: var(--color-gold-light);
	color: var(--color-gold-dark);
	font-weight: 800;
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.menu__week-range {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 1.3rem;
	color: var(--color-gold-dark);
}

.menu__week-toggle {
	width: 32px;
	height: 32px;
	margin-left: auto;
	border-radius: 50%;
	background: var(--color-accent-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / 18px no-repeat;
	box-shadow: 0 3px 0 var(--color-accent-2-dark);
	transition: transform 0.25s ease;
}

details[open] > .menu__week-head .menu__week-toggle {
	transform: rotate(180deg);
	box-shadow: 0 -3px 0 var(--color-accent-2-dark);
}

.menu--compact .menu__week-head {
	justify-content: center;
}

/* dny */
.menu__days {
	display: grid;
	grid-template-columns: repeat(var(--menu-cols), minmax(0, 1fr));
	gap: 1rem;
	align-items: stretch;
}

.menu-day {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 1.1rem 1.1rem 0.9rem;
	background: var(--color-white);
	border: 2px solid var(--color-border);
	border-radius: var(--radius-card);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.menu-day:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-card-hover);
}

.menu-day--today {
	border-color: var(--color-gold);
	box-shadow: 0 0 0 4px rgba(47, 163, 107, 0.14), var(--shadow-card);
}

.menu-day--past {
	opacity: 0.55;
}

.menu-day--past:hover {
	opacity: 1;
}

.menu-day__head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.1rem 0.5rem;
	padding-bottom: 0.6rem;
	margin-bottom: 0.2rem;
	border-bottom: 3px solid var(--color-gold-light);
}

.menu-day--today .menu-day__head {
	border-bottom-color: var(--color-gold);
}

.menu-day__name {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 1.2rem;
	line-height: 1.2;
	color: var(--color-gold-dark);
}

.menu-day__date {
	font-weight: 700;
	font-size: 0.85rem;
	color: var(--color-text-light);
}

.menu-day__badge {
	position: absolute;
	top: -12px;
	right: 14px;
	padding: 0.2rem 0.7rem;
	border-radius: var(--radius-pill);
	background: var(--color-accent-2);
	box-shadow: 0 3px 0 var(--color-accent-2-dark);
	color: var(--color-white);
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 0.8rem;
	line-height: 1.3;
}

/* jidla */
.menu-day__meals {
	list-style: none;
	margin: 0;
	padding: 0;
}

.menu-meal {
	padding: 0.65rem 0;
}

.menu-meal + .menu-meal {
	border-top: 1px dashed var(--color-border);
}

.menu-meal__label {
	display: inline-block;
	padding: 0.1rem 0.55rem;
	border-radius: var(--radius-pill);
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: var(--color-bg);
	color: var(--color-text-light);
}

.menu-meal--polevka .menu-meal__label {
	background: #FFF1C7;
	color: #8A6200;
}

.menu-meal--obed1 .menu-meal__label {
	background: var(--color-gold-light);
	color: var(--color-gold-dark);
}

.menu-meal--obed2 .menu-meal__label {
	background: var(--color-accent-2-light);
	color: var(--color-accent-2-dark);
}

.menu-meal--dieta .menu-meal__label {
	background: var(--color-blue-bg);
	color: #2C6EA6;
}

.menu-meal__name {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.92rem;
	line-height: 1.4;
	color: var(--color-text);
}

.menu-meal--polevka .menu-meal__name {
	font-style: italic;
}

.menu-meal__allergens {
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
	margin-top: 0.35rem;
}

.menu-meal__allergen {
	display: grid;
	place-items: center;
	min-width: 1.35rem;
	height: 1.35rem;
	padding: 0 0.2rem;
	border-radius: var(--radius-pill);
	background: var(--color-cream);
	border: 1px solid var(--color-border);
	color: var(--color-text-light);
	font-size: 0.66rem;
	font-weight: 800;
	line-height: 1;
	text-decoration: none;
	cursor: help;
}

/* paticka: vysvetlivka + tlacitka */
.menu__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
	margin-top: 1.75rem;
}

.menu__note {
	flex: 1 1 320px;
	max-width: 62ch;
	margin: 0;
	font-size: 0.88rem;
	color: var(--color-text-light);
}

.menu__note a {
	color: var(--color-gold-dark);
	font-weight: 700;
}

.menu__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
}

.menu__actions .btn {
	text-decoration: none;
}

.menu__empty {
	padding: 2rem;
	text-align: center;
	background: var(--color-white);
	border: 2px dashed var(--color-border);
	border-radius: var(--radius-card);
}

.page-menu {
	margin-bottom: 2.5rem;
}

@media (max-width: 1100px) {
	.menu {
		--menu-cols: 3;
	}
}

@media (max-width: 760px) {
	.menu {
		--menu-cols: 2;
	}
}

/*
	Karusel (volba „Prebyvajici prvky jako karusel“): dny v jedne rade,
	5 / 4 / 3 / 1 vedle sebe podle sirky, sipky ukaze main.js jen kdyz
	se dny nevejdou. Bez karuselu zustava mrizka pod sebou (vyse).
*/
.menu--carousel {
	--menu-per-view: 5;
}

.menu__days--carousel {
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
	/* misto pro stitek „Dnes“ a nadzvednuti karty pri najeti mysi */
	padding: 14px 2px 6px;
	margin: -14px -2px 0;
}

.menu__days--carousel::-webkit-scrollbar {
	display: none;
}

.menu__days--carousel > .menu-day {
	flex: 0 0 calc((100% - (var(--menu-per-view) - 1) * 1rem) / var(--menu-per-view));
	min-width: 0;
}

.menu__days--carousel.is-scrollable {
	scroll-snap-type: x mandatory;
}

.menu__days--carousel.is-scrollable > .menu-day {
	scroll-snap-align: start;
}

.menu--carousel .menu__nav {
	margin: -0.5rem 0 0.75rem;
}

.menu--compact .menu__nav {
	margin-top: 0;
}

@media (max-width: 1100px) {
	.menu--carousel {
		--menu-per-view: 4;
	}
}

@media (max-width: 900px) {
	.menu--carousel {
		--menu-per-view: 3;
	}
}

@media (max-width: 600px) {
	.menu--carousel {
		--menu-per-view: 1;
	}
}

@media (max-width: 520px) {
	.menu {
		--menu-cols: 1;
	}

	.menu__actions,
	.menu__actions .btn {
		width: 100%;
		text-align: center;
	}
}

.menu-day__badge--soft {
	background: var(--color-gold);
	box-shadow: 0 3px 0 var(--color-gold-dark);
}

/* Administrace: rozsah jidelnicku vedle "Typ stranky" */
.form-row--page-type.form-row--page-type-menu {
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.5fr);
}

@media (max-width: 768px) {
	.form-row--page-type.form-row--page-type-menu {
		grid-template-columns: 1fr;
	}
}

/* ----------------------------------------------------------
   13. Karusely - sipky jen kdyz se prvky nevejdou (main.js),
       na dotyk se karty prichytavaji
   ---------------------------------------------------------- */
.blok-carousel__nav[hidden],
.staff-carousel__nav[hidden] {
	display: none;
}

.blok-carousel__track.is-scrollable,
.staff-carousel__track.is-scrollable {
	scroll-snap-type: x mandatory;
}

.blok-carousel__track.is-scrollable > *,
.staff-carousel__track.is-scrollable > * {
	scroll-snap-align: start;
}

/* Karty v karuselu se jen prolnou, bez zvetseni - zmensena karta (scale)
   by posunula body prichyceni a prvni karta by zustala kousek uriznuta */
.blok-carousel__track > [data-animate],
.staff-carousel__track > [data-animate] {
	transform: none;
}

/* ----------------------------------------------------------
   14. Fotogalerie stranky
   ---------------------------------------------------------- */
/* nadpis „Fotogalerie“ stejne jako „Dokumenty ke stazeni“ */
.page-gallery h2,
.gallery-carousel__header h2 {
	margin: 0 0 1rem;
	font-family: var(--font-heading);
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: 0;
	text-align: left;
	text-transform: none;
	color: var(--color-gold-dark);
}

.gallery-carousel__header {
	margin-bottom: 1rem;
}

.gallery-carousel__header h2 {
	margin-bottom: 0;
}

/* obecne .photo-link { height: 100% } roztahlo odkaz s fotkou na celou kartu
   a popisek pod fotkou pak karusel oriznul */
.gallery-card .photo-link {
	height: auto;
}

.gallery-card__caption {
	margin: 0.1rem 0 0;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--color-text);
}