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

	Klient:			Deko Bistro
	Tier:			T1 Prezentační web
	Postavil:		Riverlab (riverlab.cz)
	Verze:			0.3 (koncept, nový design podle referencí)
	Dodáno:			Listopad 2026

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

	OBSAH

	01. Vlny mezi sekcemi, bloby, nálepky
	02. Hero
	03. Areál a děti
	04. Nabídka
	05. Teď u nás
	06. Kontakt a patička

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


/*-----------------------------------------------------------------------------------
	ZAČÁTEK: 01. Vlny mezi sekcemi, bloby, nálepky
-----------------------------------------------------------------------------------*/

.sekce { --sekce-bg: var(--color-bg); background: var(--sekce-bg); }
.sekce.sekce--tmava { --sekce-bg: var(--c-espresso-900); background: var(--sekce-bg); }

/* vlnitý horní okraj: pás nad sekcí v její barvě, vlna vznikne maskou */
.sekce--vlna { margin-top: 2.5rem; padding-top: calc(var(--section-y) - 1rem); }
.sekce--vlna::before {
	content: "";
	position: absolute;
	left: 0; right: 0;
	top: calc(-2.5rem + 1px);
	height: 2.5rem;
	background: var(--sekce-bg);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V22Q30 2 60 22T120 22V40Z'/%3E%3C/svg%3E") repeat-x 0 0 / 9rem 100%;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V22Q30 2 60 22T120 22V40Z'/%3E%3C/svg%3E") repeat-x 0 0 / 9rem 100%;
}

/* organické masky fotek, bez pozadí za fotkou */
.blob { overflow: hidden; margin: 0; }
.blob--1 { border-radius: 58% 42% 52% 48% / 42% 46% 54% 58%; aspect-ratio: 4 / 5; }
.blob--2 { border-radius: 46% 54% 42% 58% / 54% 42% 58% 46%; aspect-ratio: 5 / 6; }
.blob--3 { border-radius: 52% 48% 56% 44% / 48% 56% 44% 52%; aspect-ratio: 3 / 4; }
.blob--4 { border-radius: 44% 56% 48% 52% / 56% 44% 56% 44%; aspect-ratio: 3 / 4; margin-top: 2rem; }
.blob--5 { border-radius: 56% 44% 44% 56% / 44% 56% 48% 52%; aspect-ratio: 3 / 4; }

/* kulaté nálepky */
.nalepka {
	position: absolute;
	z-index: 2;
	display: grid;
	place-items: center;
	width: clamp(5.25rem, 22vw, 7rem);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--c-apricot-500);
	color: var(--c-espresso-900);
	font-family: var(--font-heading);
	font-size: clamp(0.9375rem, 3.6vw, 1.2rem);
	line-height: 1.05;
	text-align: center;
	outline: 2px dashed var(--c-espresso-900);
	outline-offset: -6px;
	transform: rotate(-10deg);
	pointer-events: none;
}
.nalepka--2 { width: clamp(7rem, 28vw, 9.25rem); align-content: center; gap: 0.1rem; padding: 0.9rem; background: var(--c-apricot-500); color: var(--c-espresso-900); outline: none; transform: rotate(9deg); box-shadow: 0.25rem 0.25rem 0 var(--c-espresso-900); }
.nalepka--2 span { position: relative; font-size: clamp(0.85rem, 3.2vw, 1rem); }
.nalepka--2 strong { position: relative; font-size: clamp(1.2rem, 4.8vw, 1.55rem); font-weight: 400; line-height: 1; }
/* přerušovaný kroužek se otáčí, text stojí */
.nalepka--2::before { content: ""; position: absolute; inset: 0.35rem; border: 2.5px dashed var(--c-espresso-900); border-radius: 50%; animation: otacet 14s linear infinite; }
@keyframes otacet { to { transform: rotate(360deg); } }
.nalepka--3 { background: var(--c-paper-50); transform: rotate(8deg); }

/* informace o provozu a hodnoty, které klient musí potvrdit */
.doplnit {
	display: inline;
	background: var(--c-paper-50);
	color: var(--c-espresso-900);
	outline: 1.5px dashed var(--c-copper-700);
	padding: 0.05em 0.4em;
	border-radius: 0.3em;
	font-weight: 500;
}

/*-----------------------------------------------------------------------------------
	KONEC: 01. Vlny mezi sekcemi, bloby, nálepky
-----------------------------------------------------------------------------------*/


/*-----------------------------------------------------------------------------------
	ZAČÁTEK: 02. Hero
-----------------------------------------------------------------------------------*/

/* espresso rám s proužky s odstupem od boků stránky a zaobleným dnem; zvlněný krémový tvar se z něj
   vyřezává maskou, takže za vlnami je všude stejný pruhovaný podklad */
.hero {
	--g: clamp(0.5rem, 1.6vw, 1.25rem);   /* šířka rámu kolem panelu */
	position: relative;
	margin: calc(-1 * var(--header-h)) var(--rm) 0;
	padding: var(--header-h) var(--g) var(--g);
	background: var(--c-espresso-900) var(--pruhy);
	border-radius: 1.75rem;
	display: flex;
	min-height: 100vh;
	min-height: 100svh;   /* hero vždy vyplní okno, na malém displeji naroste podle obsahu */
}
.hero__panel {
	flex: 1;
	display: flex;
	--w: 1.5rem;     /* tloušťka vlnitého okraje */
	--p: 15rem;      /* délka úseku se třemi vlnami, pak se opakuje */
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 400' preserveAspectRatio='none'%3E%3Cpath d='M40 0H11.2 C11.2 30.3 28.8 30.3 28.8 60.5 C28.8 95.6 9.0 95.6 9.0 130.7 C9.0 165.3 28.9 165.3 28.9 200.0 C28.9 236.9 9.5 236.9 9.5 273.9 C9.5 305.5 29.4 305.5 29.4 337.1 C29.4 368.5 11.2 368.5 11.2 400.0H40Z'/%3E%3C/svg%3E") 0 0 / var(--w) var(--p) repeat-y, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 400' preserveAspectRatio='none'%3E%3Cpath d='M0 0H28.5 C28.5 30.7 11.9 30.7 11.9 61.4 C11.9 96.2 30.0 96.2 30.0 131.1 C30.0 165.6 13.3 165.6 13.3 200.0 C13.3 233.2 32.5 233.2 32.5 266.4 C32.5 297.5 12.6 297.5 12.6 328.6 C12.6 364.3 28.5 364.3 28.5 400.0H0Z'/%3E%3C/svg%3E") 100% 0 / var(--w) var(--p) repeat-y, linear-gradient(#000, #000) calc(var(--w) - 1px) 0 / calc(100% - 2 * var(--w) + 2px) 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 400' preserveAspectRatio='none'%3E%3Cpath d='M40 0H11.2 C11.2 30.3 28.8 30.3 28.8 60.5 C28.8 95.6 9.0 95.6 9.0 130.7 C9.0 165.3 28.9 165.3 28.9 200.0 C28.9 236.9 9.5 236.9 9.5 273.9 C9.5 305.5 29.4 305.5 29.4 337.1 C29.4 368.5 11.2 368.5 11.2 400.0H40Z'/%3E%3C/svg%3E") 0 0 / var(--w) var(--p) repeat-y, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 400' preserveAspectRatio='none'%3E%3Cpath d='M0 0H28.5 C28.5 30.7 11.9 30.7 11.9 61.4 C11.9 96.2 30.0 96.2 30.0 131.1 C30.0 165.6 13.3 165.6 13.3 200.0 C13.3 233.2 32.5 233.2 32.5 266.4 C32.5 297.5 12.6 297.5 12.6 328.6 C12.6 364.3 28.5 364.3 28.5 400.0H0Z'/%3E%3C/svg%3E") 100% 0 / var(--w) var(--p) repeat-y, linear-gradient(#000, #000) calc(var(--w) - 1px) 0 / calc(100% - 2 * var(--w) + 2px) 100% no-repeat;
}
.hero__inner {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-bg);
	padding: calc(var(--w) + 0.5rem) calc(var(--w) + 0.5rem) calc(var(--w) + 2.5rem);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V7.6 C32.1 7.6 32.1 27.8 64.1 27.8 C97.1 27.8 97.1 12.2 130.0 12.2 C163.3 12.2 163.3 28.7 196.7 28.7 C231.1 28.7 231.1 12.0 265.6 12.0 C298.5 12.0 298.5 26.1 331.4 26.1 C365.7 26.1 365.7 7.6 400.0 7.6V40Z'/%3E%3C/svg%3E") 0 0 / var(--p) var(--w) repeat-x, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0V12.0 C33.9 12.0 33.9 25.9 67.8 25.9 C101.0 25.9 101.0 10.3 134.2 10.3 C165.5 10.3 165.5 28.6 196.7 28.6 C233.9 28.6 233.9 7.7 271.2 7.7 C301.3 7.7 301.3 27.4 331.5 27.4 C365.8 27.4 365.8 12.0 400.0 12.0V0Z'/%3E%3C/svg%3E") 0 100% / var(--p) var(--w) repeat-x, linear-gradient(#000, #000) 0 calc(var(--w) - 1px) / 100% calc(100% - 2 * var(--w) + 2px) no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V7.6 C32.1 7.6 32.1 27.8 64.1 27.8 C97.1 27.8 97.1 12.2 130.0 12.2 C163.3 12.2 163.3 28.7 196.7 28.7 C231.1 28.7 231.1 12.0 265.6 12.0 C298.5 12.0 298.5 26.1 331.4 26.1 C365.7 26.1 365.7 7.6 400.0 7.6V40Z'/%3E%3C/svg%3E") 0 0 / var(--p) var(--w) repeat-x, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0V12.0 C33.9 12.0 33.9 25.9 67.8 25.9 C101.0 25.9 101.0 10.3 134.2 10.3 C165.5 10.3 165.5 28.6 196.7 28.6 C233.9 28.6 233.9 7.7 271.2 7.7 C301.3 7.7 301.3 27.4 331.5 27.4 C365.8 27.4 365.8 12.0 400.0 12.0V0Z'/%3E%3C/svg%3E") 0 100% / var(--p) var(--w) repeat-x, linear-gradient(#000, #000) 0 calc(var(--w) - 1px) / 100% calc(100% - 2 * var(--w) + 2px) no-repeat;
}

.hero__obal { display: grid; justify-items: center; width: 100%; padding-inline: 0; max-width: 64rem; }
.hero__zaklad { width: 100%; }

.hero__hlava { text-align: center; }
.hero__obal-nadpisu { position: relative; top: 0.6rem; display: inline-block; }
.hero__nadpis {
	display: block;
	font-size: clamp(2.1rem, 0.3rem + 8.1vw, 7.25rem);
	font-weight: 400;
	line-height: 0.94;
	text-transform: uppercase;
}
.hero__r1, .hero__r2 { display: block; }
.hero__r1 { color: var(--c-copper-600); }
.hero__r2 { color: var(--c-espresso-900); }
/* stav provozu jako stamp na nadpisu: hrnek, „Otevřeno do 18:00“ a krátká výzva */
.hero__stitek {
	position: absolute;
	right: -3%; bottom: -30%;
	z-index: 3;
	display: flex; align-items: center; gap: 0.7rem;
	padding: 0.65rem 1rem 0.7rem 0.75rem;
	background: var(--c-apricot-500);
	color: var(--c-espresso-900);
	border: 2.5px solid var(--c-espresso-900);
	border-radius: 1.1rem;
	box-shadow: 0.3rem 0.3rem 0 var(--c-espresso-900);
	text-transform: none;
	text-align: left;
	transform: rotate(-5deg);
}

/* řádek pod nadpisem: perex a hodnocení vlevo, fotka přes spodek nadpisu, akce vpravo */
.hero__radek {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	gap: 1.5rem;
	width: 100%;
	margin-top: -2.25rem;
}
.hero__foto { position: relative; z-index: 2; width: clamp(13rem, 58vw, 17rem); order: -1; }
.hero__foto .foto { height: auto; object-fit: contain; filter: drop-shadow(0 1rem 0.9rem rgb(64 40 31 / 0.28)); }

.hero__perex { max-width: 22ch; font-size: var(--step-1); font-weight: 500; line-height: 1.3; text-align: center; text-wrap: balance; }
.hodnoceni__radek { display: block; }
.hodnoceni__radek a { color: inherit; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em; transition: text-decoration-color 0.2s var(--ease-out); }
.hodnoceni__radek a:hover, .hodnoceni__radek a:focus-visible { text-decoration-color: currentColor; }
.hodnoceni__hvezda { color: var(--c-copper-600); }
.hero__hodnoceni b { font-weight: 600; color: var(--color-text); }
.hero__hodnoceni strong { display: block; margin-bottom: 0.15rem; font-weight: 600; color: var(--color-text); }
.hero__hodnoceni { font-size: 1rem; line-height: 1.5; color: var(--color-text-muted); text-align: center; }

.hero__akce { display: grid; gap: 0.75rem; width: min(100%, 19rem); }
/* úzký displej: stamp pod nadpisem místo přes něj */
@media (max-width: 39.99rem) {
	.hero__stitek { position: static; width: fit-content; margin: 0.9rem auto 0; transform: rotate(-3deg); }
}
.stav__texty { display: grid; gap: 0.1rem; }
.stav__texty strong { font-family: var(--font-heading); font-size: clamp(1rem, 0.8rem + 0.6vw, 1.3rem); font-weight: 400; line-height: 1; text-transform: uppercase; }
.stav__texty span { font-variant-numeric: tabular-nums; font-size: clamp(0.8125rem, 0.75rem + 0.2vw, 0.9375rem); font-weight: 600; line-height: 1.25; }
.stav__ikona { flex: none; width: 2.25rem; height: 2.25rem; overflow: visible; }
.stav__ikona path { fill: none; stroke: var(--c-espresso-900); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.stav__ikona .hrnek { fill: var(--c-paper-50); }
.stav__ikona .para { animation: para 2.2s ease-in-out infinite alternate; }
.hero__stitek.stav--zavreno { background: var(--c-copper-600); color: var(--c-paper-50); }
.stav--zavreno .stav__ikona path { stroke: var(--c-paper-50); }
.stav--zavreno .stav__ikona .hrnek { fill: none; }
.stav--zavreno .stav__ikona .para { display: none; }

/* tlačítka hera: stejná šířka, jedna výška, hlavní plné, vedlejší obrys */
.btn-hero {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 3.5rem;
	padding: 0.6rem 1.5rem;
	border: 2px solid var(--c-espresso-900);
	border-radius: 999px;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.1;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s, transform 0.2s var(--ease-out);
}
.btn-hero--hlavni { background: var(--c-espresso-900); color: var(--c-paper-50); }
.btn-hero--vedlejsi { background: transparent; color: var(--c-espresso-900); }
.btn-hero:hover { background: var(--c-copper-600); border-color: var(--c-copper-600); color: var(--c-paper-50); }
.btn-hero:active { transform: scale(0.96); }
.btn-hero__sipka { font-size: 1.25rem; transition: transform 0.2s var(--ease-out); }
.btn-hero:hover .btn-hero__sipka { transform: translateX(0.25rem); }
.btn-hero__cislo { font-size: var(--step--1); font-weight: 500; opacity: 0.85; white-space: nowrap; }

@media (min-width: 52rem) {
	.hero { border-radius: 2.5rem; }
	.hero__panel { --w: 2.25rem; --p: 21rem; }
	.hero__inner { padding-top: calc(var(--w) + 0.5rem); padding-bottom: calc(var(--w) + 3rem); }
	.hero__obal { max-width: 78rem; }
	/* šířku určuje jen nadpis; řádek pod ním (contain) se podle něj natáhne, takže levý text začíná pod „D“ a pravý končí pod „U“ */
	.hero__zaklad { width: fit-content; max-width: 100%; }
	.hero__radek { contain: inline-size; }
	.hero__radek {
		grid-template-columns: 1fr auto 1fr;
		grid-template-areas: "perex foto akce" "hodn foto akce";
		grid-template-rows: 1fr auto;
		align-items: end;
		column-gap: 2rem;
		row-gap: 1rem;
		margin-top: -6rem;
	}
	.hero__foto { order: 0; grid-area: foto; width: clamp(14rem, 29vw, 22rem); }
	.hero__perex { grid-area: perex; justify-self: start; text-align: left; align-self: end; max-width: 16ch; }
	.hero__hodnoceni { grid-area: hodn; justify-self: start; text-align: left; margin-bottom: 3.5rem; }
	.hero__akce { grid-area: akce; justify-self: end; align-self: end; width: min(100%, 19rem); margin-bottom: 3.5rem; }
}

/*-----------------------------------------------------------------------------------
	KONEC: 02. Hero
-----------------------------------------------------------------------------------*/


/*-----------------------------------------------------------------------------------
	ZAČÁTEK: 03. Areál a děti
-----------------------------------------------------------------------------------*/

.areal__grid { display: grid; gap: 3.5rem; align-items: center; }
/* fotka celá, bez ořezu a bez masky: tmavý rámeček a stín jako u hero, trochu nakloněná */
.areal__foto { position: relative; max-width: 36rem; }
.areal__okno { margin: 0; padding: 0.6rem; background: var(--c-espresso-900); border-radius: 0.75rem; box-shadow: 0.6rem 0.6rem 0 var(--c-copper-600); transform: rotate(-2.5deg); }
.areal__okno .foto { display: block; width: 100%; height: auto; }
.areal__foto .nalepka { top: -1.25rem; right: -0.25rem; }
.areal__text .nadpis { max-width: none; font-size: clamp(2.75rem, 1.4rem + 5.4vw, 5.25rem); line-height: 0.95; text-transform: uppercase; }
.areal__radek { display: block; color: var(--c-copper-600); }
.areal__text .text { margin-top: 1.75rem; font-size: var(--step-0); }
.areal__odkaz { margin-top: 2.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
.areal__odkaz .odkaz { font-size: var(--step--1); opacity: 0.85; }

/* USP: ikona vlevo, vedle ní nadpis a jedna věta. Ikony bez podkladu. */
.areal__text .usp { margin: 2.5rem 0 0; padding: 0; list-style: none; display: grid; gap: 1.25rem 2rem; }
.usp li { display: grid; grid-template-columns: 3.25rem 1fr; grid-template-rows: auto 1fr; gap: 0.35rem 1rem; align-items: start; }
.usp svg { grid-row: 1 / span 2; width: 3.25rem; height: 3.25rem; overflow: visible; }
.usp h3 { font-size: var(--step-1); font-weight: 400; line-height: 1.1; align-self: start; }
.usp p { font-size: var(--step--1); line-height: 1.45; align-self: start; }
.usp .t { fill: none; stroke: var(--c-espresso-900); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.usp .a { fill: var(--c-apricot-500); }
.usp .m { fill: var(--c-copper-600); }
.usp .s { fill: var(--c-sage-500); }
.usp .w { fill: var(--c-espresso-900); stroke: none; }
.usp .k { fill: var(--c-paper-50); }
.usp p strong, .areal__text .text strong { font-weight: 600; color: var(--color-text); }

@media (min-width: 52rem) {
	.areal__grid { grid-template-columns: 1fr 1fr; gap: 4.5rem; }
	.usp { grid-template-columns: 1fr 1fr; }
}

/*-----------------------------------------------------------------------------------
	KONEC: 03. Areál a děti
-----------------------------------------------------------------------------------*/


/*-----------------------------------------------------------------------------------
	ZAČÁTEK: 04. Nabídka
-----------------------------------------------------------------------------------*/

.nabidka__hlava { max-width: 40rem; margin-inline: auto; text-align: center; }
.nabidka__hlava .perex { margin: 1rem auto 0; max-width: 40ch; }
.nabidka__pozn { margin: 3rem auto 0; font-size: var(--step--1); max-width: var(--measure); text-align: center; }

/* Přepínač: kulatá fotka na zubatém podkladu, vybraná má měděný podklad a popisek. Bez JS je skrytý a vidět jsou oba lístky pod sebou. */
.nabidka__taby { display: flex; justify-content: center; gap: clamp(1.5rem, 8vw, 4.5rem); margin-top: 2.5rem; }
.nabidka__taby[hidden] { display: none; }
.nabidka__tab {
display: grid;
justify-items: center;
gap: 0.75rem;
padding: 0;
border: 0;
background: none;
color: var(--color-text);
font: inherit;
cursor: pointer;
}
.nabidka__tab img {
width: clamp(5rem, 22vw, 7rem);
aspect-ratio: 1;
padding: 0.55rem;
background: var(--c-copper-200, #f0d9c4);
object-fit: cover;
clip-path: polygon(50% 0%, 58% 6%, 67% 3%, 72% 12%, 82% 11%, 84% 21%, 94% 24%, 92% 34%, 100% 41%, 95% 50%, 100% 59%, 92% 66%, 94% 76%, 84% 79%, 82% 89%, 72% 88%, 67% 97%, 58% 94%, 50% 100%, 42% 94%, 33% 97%, 28% 88%, 18% 89%, 16% 79%, 6% 76%, 8% 66%, 0% 59%, 5% 50%, 0% 41%, 8% 34%, 6% 24%, 16% 21%, 18% 11%, 28% 12%, 33% 3%, 42% 6%);
transition: background-color 0.25s var(--ease-out);
}
.nabidka__tab span {
padding: 0.15rem 0.9rem 0.25rem;
border-radius: 999px;
font-family: var(--font-heading);
font-size: var(--step-0);
line-height: 1.2;
transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.nabidka__tab[aria-selected="true"] img { background: var(--c-copper-600); }
.nabidka__tab[aria-selected="true"] span { background: var(--c-copper-600); color: var(--c-paper-50); }
.nabidka__tab:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 6px; border-radius: 1rem; }

/* Karty: krémová dlaždice, produkt vystavený uprostřed, pod ním název a popis. Fotky později jako vystřižené produkty. */
.nabidka__panel { margin-top: 3rem; }
.nabidka__panel[hidden] { display: none; }
ul.karty-nabidky { margin: 0; padding: 0; list-style: none; display: grid; gap: 1.25rem; max-width: 64rem; margin-inline: auto; }
.karta-nabidky { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 0.35rem; padding: 0 1.25rem 1.75rem; overflow: hidden; border-radius: 1.5rem; background: #f6e8d1; text-align: left; }
.karta-nabidky .karta__foto { margin: 0 0 1rem; aspect-ratio: 1; margin-inline: -1.25rem; background: #f6e8d1; }
.karta-nabidky .foto { display: block; width: 100%; height: 100%; object-fit: cover; }
.karta-nabidky h3 { font-family: var(--font-heading); font-size: var(--step-1); font-weight: 400; line-height: 1.1; }
.karta-nabidky p { max-width: 28ch; color: var(--color-text-muted); }
.nabidka__panel:not([hidden]) .karta-nabidky { animation: karta-vstup 0.55s var(--ease-out) both; }
.nabidka__panel:not([hidden]) .karta-nabidky:nth-child(2) { animation-delay: 0.07s; }
.nabidka__panel:not([hidden]) .karta-nabidky:nth-child(3) { animation-delay: 0.14s; }
@keyframes karta-vstup { from { opacity: 0; transform: translateY(1rem); } }

@media (min-width: 40rem) {
	.karty-nabidky { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	}
@media (prefers-reduced-motion: reduce) {
	.nabidka__panel:not([hidden]) .karta-nabidky { animation: none; }
	.nabidka__tab img, .nabidka__tab span { transition: none; }
}

/*-----------------------------------------------------------------------------------
	KONEC: 04. Nabídka
-----------------------------------------------------------------------------------*/


/* oddělovač: jediný prvek přes celou šířku stránky. Pevný obří nápis, fotka dezertu uprostřed mezi slovy a lehce přes jejich okraje. */
.oddelovac { overflow: hidden; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-block: 2.5rem calc(var(--section-y) + 2rem); }   /* obrázek přesahuje nahoru víc než dolů, mezera nad i pod pak vychází jako mezi sekcemi */
.oddelovac__slovo { font-family: var(--font-heading); font-size: clamp(3rem, 9vw, 9.5rem); line-height: 1.05; text-transform: uppercase; white-space: nowrap; }
.oddelovac__slovo--levo { justify-self: end; margin-right: -0.03em; color: var(--c-copper-600); }
.oddelovac__slovo--pravo { justify-self: start; margin-left: -0.03em; color: var(--c-espresso-900); }
.oddelovac__foto { position: relative; z-index: 1; margin: -2rem -3rem; width: clamp(10rem, 24vw, 22rem); aspect-ratio: 1; filter: drop-shadow(0.3rem 0.5rem 0 rgba(43, 26, 20, 0.18)); transform: rotate(-4deg); }
.oddelovac__foto .foto { width: 100%; height: 100%; object-fit: contain; }
.oddelovac + .sekce { padding-top: 0; }

/*-----------------------------------------------------------------------------------
	ZAČÁTEK: 05. Novinky a Instagram
-----------------------------------------------------------------------------------*/

/* velký měděný panel se zaoblenými rohy a pruhy jako hero */
.novinky__panel {
	padding: clamp(2rem, 5vw, 4rem);
	background: var(--c-copper-600) var(--pruhy);
	color: var(--c-paper-50);
	border-radius: 2.5rem;
}
.novinky__hlava { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 2rem; }
.novinky__aktual { margin: 0; font-size: var(--step--1); font-weight: 600; opacity: 0.85; }
.novinky__panel .nadpis { font-size: clamp(2.5rem, 1.2rem + 4.8vw, 4.75rem); line-height: 0.95; text-transform: uppercase; }
ul.novinky { margin: 2.5rem 0 0; padding: 0; list-style: none; display: grid; gap: 1.75rem 2.5rem; }
.novinky li { display: grid; grid-template-columns: 3.25rem 1fr; grid-template-rows: auto 1fr; gap: 0.35rem 1rem; align-items: start; }
.novinky svg { grid-row: 1 / span 2; width: 3.25rem; height: 3.25rem; overflow: visible; }
.novinky h3 { font-family: var(--font-heading); font-size: var(--step-1); font-weight: 400; line-height: 1.1; }
.novinky p { font-size: var(--step-0); line-height: 1.45; }
.novinky .t, .ig__nadpis .t { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.novinky .t { stroke: var(--c-paper-50); }
.novinky .a, .ig__nadpis .a { fill: var(--c-apricot-500); }
.novinky .s { fill: var(--c-sage-500); }
.novinky .w { fill: var(--c-wood-300); }
.ig__nadpis .t { stroke: var(--c-espresso-900); }
.ig__nadpis .b { fill: var(--c-espresso-900); }

/* pruh z Instagramu: fotky celou šířkou, pomalu jedou, po najetí se zastaví */
.ig { margin-top: clamp(4rem, 8vw, 6.5rem); }
.ig__hlava { display: grid; gap: 1rem 2rem; align-items: center; }
.ig__nadpis { display: flex; align-items: center; gap: 0.75rem; font-family: var(--font-heading); font-size: var(--step-1); font-weight: 400; }
.ig__nadpis a { display: flex; align-items: center; gap: 0.75rem; color: inherit; text-decoration: none; }
.ig__nadpis svg { width: 2.5rem; height: 2.5rem; flex: none; }
.ig__akce { display: flex; flex-wrap: wrap; gap: 0.75rem; }
/* pás fotek v pevném rámu: tmavá pruhovaná lišta zaoblená jako ostatní panely, fotky mizí na jejím okraji */
.ig__ram { position: relative; margin-top: 2.25rem; }
.ig__nalepka { top: -1.75rem; right: 1.5rem; }
.ig__pas { overflow: hidden; padding-block: 1.75rem; background: var(--c-espresso-900) var(--pruhy); border-radius: 2rem; }
.ig__stopa { display: flex; width: max-content; will-change: transform; animation: ig-jede 60s linear infinite; }
.ig__pas:hover .ig__stopa, .ig__pas:focus-within .ig__stopa { animation-play-state: paused; }
.ig__skupina { display: flex; margin: 0; padding: 0; list-style: none; }
/* všechny fotky stejný formát: čtverec s krémovým rámečkem, střídavě mírně nakloněné */
.ig__skupina li { flex: none; width: clamp(9.5rem, 17vw, 12.5rem); aspect-ratio: 1; margin-right: clamp(0.9rem, 2vw, 1.5rem); padding: 0.5rem; background: var(--c-paper-50); border-radius: 0.9rem; box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 0.25); transform: rotate(-2deg); }
.ig__skupina li:nth-child(even) { transform: rotate(2deg); }
.ig__skupina a { display: block; height: 100%; overflow: hidden; border-radius: 0.5rem; }
.ig__skupina .foto { transition: transform 0.5s var(--ease-out); }
.ig__skupina a:hover .foto { transform: scale(1.06); }
@keyframes ig-jede { to { transform: translateX(-50%); } }

@media (min-width: 52rem) {
	.novinky { grid-template-columns: repeat(3, 1fr); }
	.ig__hlava { grid-template-columns: auto 1fr auto; }
}
@media (prefers-reduced-motion: reduce) {
	.ig__stopa { animation: none; }
	.ig__pas { overflow-x: auto; }
	.ig__skupina[aria-hidden] { display: none; }
}

/*-----------------------------------------------------------------------------------
	KONEC: 05. Novinky a Instagram
-----------------------------------------------------------------------------------*/


/*-----------------------------------------------------------------------------------
	ZAČÁTEK: 06. Kontakt a patička
-----------------------------------------------------------------------------------*/

.kontakt__grid { display: grid; gap: 3rem; align-items: center; }
.kontakt__nadpis { font-size: clamp(2.75rem, 1.4rem + 5.4vw, 5.25rem); font-weight: 400; line-height: 0.95; text-transform: uppercase; }
.kontakt__r1 { display: block; color: var(--c-copper-600); }
.kontakt__text .perex { margin-top: 1.5rem; max-width: 28ch; }
.kontakt__akce { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
/* údaje jako vizitka: krémová karta s hnědým obrysem a odsazeným stínem */
.kontakt__udaje { margin: 0; padding: clamp(1.25rem, 3vw, 2rem); display: grid; background: var(--c-paper-50); color: var(--c-espresso-900); border: 3px solid var(--c-espresso-900); border-radius: 1.5rem; box-shadow: 0.5rem 0.5rem 0 var(--c-copper-600); }
.kontakt__udaje > div { display: grid; gap: 0.15rem 1.5rem; padding-block: 0.9rem; border-top: 2px dashed rgb(64 40 31 / 0.35); }
.kontakt__udaje > div:first-child { padding-top: 0; border-top: 0; }
.kontakt__udaje > div:last-child { padding-bottom: 0; }
.kontakt__udaje dt { font-family: var(--font-heading); font-size: var(--step--1); font-weight: 400; color: var(--c-copper-700); }
.kontakt__udaje dd { margin: 0; font-size: var(--step-0); font-weight: 500; }
.kontakt__udaje a { color: inherit; }
.kontakt__site { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.kontakt__udaje a:hover { color: var(--c-copper-700); }
@media (min-width: 40rem) {
	.kontakt__udaje > div { grid-template-columns: 7.5rem 1fr; align-items: baseline; }
}
@media (min-width: 52rem) {
	.kontakt__grid { grid-template-columns: 1fr 1fr; gap: 5rem; }
}

/* patička: tmavý panel se zaoblenými rohy a pruhy jako hero, razítko přes horní okraj */
.footer { padding: 5rem 0 var(--rm); font-size: var(--step--1); }
.footer__panel { position: relative; width: var(--sirka-obsahu); margin-inline: auto; padding: 5rem 0 1.5rem; background: var(--c-espresso-900) repeating-linear-gradient(90deg, rgb(253 255 230 / 0.018) 0 1.1rem, transparent 1.1rem 2.2rem); color: rgb(253 255 230 / 0.82); border-radius: 2.5rem; }
.footer a { color: inherit; text-decoration: none; }
.footer a:hover { color: var(--c-apricot-500); }
.footer .btn--svetle, .footer .btn--svetle:hover { color: var(--c-espresso-900); }
.footer__panel .container { max-width: none; padding-inline: clamp(1.5rem, 4vw, 3rem); }
.footer__grid { display: grid; gap: 2.5rem; text-align: center; justify-items: center; }
.footer__sloupec { display: grid; gap: 0.9rem; justify-items: center; align-content: start; }
.footer__sloupec ul[role="list"] { display: grid; gap: 0.5rem; }
.footer__titul { font-family: var(--font-heading); font-size: var(--step-0); color: var(--c-apricot-500); }
.footer__stred { display: grid; gap: 1rem; justify-items: center; align-content: start; max-width: 24rem; }
.footer__stred p:not(.footer__logo) { font-size: var(--step-0); line-height: 1.45; }
.footer__logo { font-family: var(--font-heading); font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1; text-transform: uppercase; color: var(--c-paper-50); }
.footer__sloupec ul.footer__site { display: flex; gap: 0.6rem; margin-top: 0.4rem; }
.footer__site a { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 2px solid rgb(253 255 230 / 0.6); border-radius: 50%; transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
.footer__site a:hover { background: var(--c-apricot-500); border-color: var(--c-apricot-500); color: var(--c-espresso-900); }
.footer__site svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.footer__site svg path { fill: currentColor; stroke: none; }
.footer__site svg .b { fill: currentColor; stroke: none; }
.footer__spodek { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 2rem; margin-top: 3rem; padding-top: 1.25rem; border-top: 2px dashed rgb(253 255 230 / 0.25); }
.footer__radek { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.footer__pecet { position: absolute; top: -3.75rem; left: 50%; width: 7.5rem; height: 7.5rem; margin-left: -3.75rem; transform: rotate(-8deg); }
.pecet__bg { fill: var(--c-apricot-500); stroke: var(--c-espresso-900); stroke-width: 2.5; }
.pecet__text { font-family: var(--font-heading); font-size: 10.5px; letter-spacing: 0.05em; fill: var(--c-espresso-900); animation: otacet 30s linear infinite; transform-origin: 50px 50px; }
.pecet__hrnek { fill: none; stroke: var(--c-espresso-900); stroke-width: 2.2; transform: translate(50px, 47.5px) scale(1.35) translate(-50px, -47.5px); stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 52rem) {
	.footer__grid { grid-template-columns: 1fr 1.3fr 1fr; align-items: start; text-align: left; justify-items: stretch; }
	.footer__sloupec { justify-items: start; }
	.footer__sloupec:last-child { justify-items: end; text-align: right; }
	.footer__stred { justify-items: center; text-align: center; justify-self: center; }
	.footer__spodek { justify-content: space-between; }
}

/*-----------------------------------------------------------------------------------
	KONEC: 06. Kontakt a patička
-----------------------------------------------------------------------------------*/