/*
Theme Name: Husacina Plus
Theme URI: https://husacinaplus.sk
Author: OWI
Description: Husacina Plus — husacie hody, slovenské špeciality a penzión v Slovenskom Grobe. FSE block theme.
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: husacina
*/

/* ==========================================================================
   Token aliases — single source of truth lives in theme.json.
   These shorten the WP preset vars for readability; never hardcode values.
   ========================================================================== */
:root {
	--paper: var(--wp--preset--color--paper);
	--mist: var(--wp--preset--color--mist);
	--line: var(--wp--preset--color--line);
	--gold: var(--wp--preset--color--gold);
	--gold-dark: var(--wp--preset--color--gold-dark);
	--ink: var(--wp--preset--color--ink);
	--body: var(--wp--preset--color--body);
	--grey: var(--wp--preset--color--grey);
	--charcoal: var(--wp--preset--color--charcoal);

	--content: var(--wp--style--global--content-size);
	--wide: var(--wp--style--global--wide-size);

	--font-serif: var(--wp--preset--font-family--playfair);
	--font-sans: var(--wp--preset--font-family--montserrat);

	--fs-small: var(--wp--preset--font-size--small);
	--fs-base: var(--wp--preset--font-size--base);
	--fs-title: var(--wp--preset--font-size--title);
	--fs-lead: var(--wp--preset--font-size--lead);
	--fs-subheading: var(--wp--preset--font-size--subheading);
	--fs-heading: var(--wp--preset--font-size--heading);
	--fs-display: var(--wp--preset--font-size--display);

	--space-xs: var(--wp--preset--spacing--20);
	--space-s: var(--wp--preset--spacing--30);
	--space-m: var(--wp--preset--spacing--40);
	--space-l: var(--wp--preset--spacing--50);
	--space-xl: var(--wp--preset--spacing--60);
	--space-2xl: var(--wp--preset--spacing--70);
	--space-3xl: var(--wp--preset--spacing--80);

	--weight-light: 300;
	--weight-regular: 400;
	--weight-medium: 500;
	--weight-semibold: 600;
	--weight-bold: 700;

	/* Shared chrome metrics */
	--gutter: clamp(20px, 4vw, 24px);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

body {
	margin: 0;
	font-family: var(--font-sans);
	font-weight: var(--weight-regular);
	font-size: var(--fs-base);
	line-height: 1.6;
	color: var(--body);
	background: var(--paper);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

/* Prevent horizontal page scroll from full-bleed section backgrounds.
   `clip` (not `hidden`) so it never creates a scroll container that would
   break the sticky header. */
.wp-site-blocks { overflow-x: clip; }
.wp-site-blocks > main, .wp-site-blocks > footer { margin-block-start: 0; }
/* Unwrap the header template-part box so the sticky bar sticks to the whole
   page, not just its own wrapper height. */
.wp-site-blocks > header { display: contents; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
	font-family: var(--font-serif);
	font-weight: var(--weight-semibold);
	line-height: 1.18;
	color: var(--ink);
	margin: 0;
}

ul, ol { margin: 0; padding: 0; }

/* ==========================================================================
   Buttons — .btn base + variants
   primary: gold fill / ink text · outline: gold border / ink text
   ========================================================================== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--font-sans);
	font-weight: var(--weight-semibold);
	font-size: var(--fs-small);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1;
	text-align: center;
	min-height: 48px;
	padding: 0 32px;
	border: 1px solid var(--gold);
	background: transparent;
	color: var(--ink);
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.btn--primary {
	background: var(--gold);
	color: var(--ink);
}
.btn--primary:hover,
.btn--primary:focus-visible {
	background: var(--gold-dark);
	border-color: var(--gold-dark);
	color: var(--paper);
}

.btn--outline {
	background: transparent;
	color: var(--ink);
}
.btn--outline:hover,
.btn--outline:focus-visible {
	background: var(--gold);
	color: var(--ink);
}

/* On dark sections (footer, photo overlays), keep gold but lighten text */
.is-dark .btn--primary { color: var(--ink); }
.is-dark .btn--primary:hover, .is-dark .btn--primary:focus-visible { color: var(--paper); }
.is-dark .btn--outline { color: var(--paper); }
.is-dark .btn--outline:hover, .is-dark .btn--outline:focus-visible { color: var(--ink); }

/* ==========================================================================
   Section title pattern — gold eyebrow + Playfair heading; <em> renders as
   the italic gold accent (Playfair Italic 400).
   ========================================================================== */
.section-head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-xs);
}
.section-head.is-centered { align-items: center; text-align: center; }

.section-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-family: var(--font-sans);
	font-weight: var(--weight-semibold);
	font-size: var(--fs-small);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--gold-dark);
}
.section-eyebrow::before {
	content: '';
	width: 36px;
	height: 1px;
	background: var(--gold);
}
.section-head.is-centered .section-eyebrow::after {
	content: '';
	width: 36px;
	height: 1px;
	background: var(--gold);
}

.section-title {
	font-family: var(--font-serif);
	font-size: var(--fs-heading);
	font-weight: var(--weight-semibold);
	line-height: 1.18;
	color: var(--ink);
	margin: 0;
}
.section-title em {
	font-style: italic;
	font-weight: var(--weight-regular);
	color: var(--gold-dark);
}

/* Dark section context */
.is-dark { background: var(--charcoal); color: var(--paper); }
.is-dark .section-title { color: var(--paper); }
.is-dark .section-eyebrow { color: var(--gold); }

/* ==========================================================================
   Card — teaser card (Ubytovanie / Jedálny lístok pattern)
   ========================================================================== */
.card {
	display: flex;
	flex-direction: column;
	background: var(--mist);
	border: 1px solid var(--line);
	overflow: hidden;
	transition: box-shadow 0.35s ease, transform 0.35s var(--ease-out);
}
.card:hover {
	box-shadow: 0 18px 40px rgba(23, 23, 23, 0.1);
	transform: translateY(-4px);
}
.card__image { overflow: hidden; aspect-ratio: 3 / 2; }
.card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
.card:hover .card__image img { transform: scale(1.04); }
.card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-s);
	padding: var(--space-m);
	flex: 1;
}
.card__title { font-size: var(--fs-subheading); }
.card__text { margin: 0; color: var(--grey); }
.card__btn { margin-top: auto; }

/* ==========================================================================
   Site header — logo left · nav right · phone CTA
   Sticky; a subtle shadow appears once scrolled (body.is-scrolled from JS).
   ========================================================================== */
:root {
	--header-h: 88px;
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 8px); }

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--paper);
	color: var(--ink);
	border-bottom: 1px solid var(--line);
	transition: box-shadow 0.3s ease;
}
body.is-scrolled .site-header { box-shadow: 0 6px 24px rgba(23, 23, 23, 0.08); }

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(20px, 2.5vw, 40px);
	min-height: var(--header-h);
	max-width: var(--wide);
	margin-inline: auto;
	padding-inline: var(--gutter);
	animation: header-in 0.9s var(--ease-out) 0.1s both;
}
@keyframes header-in { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }

/* ---- Logo / text lockup ----------------------------------------------- */
.site-header__logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.site-header__logo img { display: block; height: 48px; width: auto; }

.site-header__lockup { display: flex; flex-direction: column; gap: 3px; }
.site-header__lockup-name {
	font-family: var(--font-serif);
	font-weight: var(--weight-bold);
	font-size: 24px;
	line-height: 1;
	color: var(--ink);
}
.site-header__lockup-sub {
	font-family: var(--font-sans);
	font-weight: var(--weight-medium);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--gold-dark);
	white-space: nowrap;
}

/* ---- Desktop nav ------------------------------------------------------- */
.site-header__list {
	display: flex;
	align-items: center;
	gap: clamp(16px, 1.8vw, 28px);
	list-style: none;
}
.site-header__item { position: relative; display: flex; align-items: center; gap: 4px; }

/* Nav link + gold underline wipe. transform-origin is non-animatable so it
   flips instantly: enter origin=left (grows rightward), leave origin=right —
   the underline never retracts backwards. */
.site-header__link {
	position: relative;
	display: inline-block;
	padding-block: 6px;
	font-weight: var(--weight-medium);
	font-size: var(--fs-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink);
	white-space: nowrap;
	transition: color 0.25s ease;
}
.site-header__link::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--gold);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 0.35s var(--ease-out);
}
.site-header__link:hover,
.site-header__link:focus-visible,
.site-header__link.is-active { color: var(--gold-dark); }
.site-header__link:hover::after,
.site-header__link:focus-visible::after,
.site-header__link.is-active::after {
	transform: scaleX(1);
	transform-origin: left center;
}

/* ---- Dropdown submenu (Spoločenské akcie) ------------------------------ */
.site-header__caret {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--grey);
	cursor: pointer;
	transition: color 0.25s ease, transform 0.3s var(--ease-out);
}
.site-header__caret:hover, .site-header__caret:focus-visible { color: var(--gold-dark); }
.site-header__item.is-open .site-header__caret,
.site-header__item:focus-within .site-header__caret { transform: rotate(180deg); }
@media (hover: hover) {
	.site-header__item.has-children:hover .site-header__caret { transform: rotate(180deg); }
}

.site-header__submenu {
	position: absolute;
	top: calc(100% + 14px);
	left: 50%;
	translate: -50% 0;
	min-width: 200px;
	padding: 10px 0;
	list-style: none;
	background: var(--paper);
	border: 1px solid var(--line);
	border-top: 2px solid var(--gold);
	box-shadow: 0 18px 40px rgba(23, 23, 23, 0.12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.25s ease, transform 0.3s var(--ease-out), visibility 0s linear 0.3s;
}
/* Hover bridge so the pointer can cross the gap without closing the menu. */
.site-header__submenu::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: -16px;
	height: 16px;
}
.site-header__item.is-open .site-header__submenu,
.site-header__item:focus-within .site-header__submenu {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 0.25s ease, transform 0.3s var(--ease-out), visibility 0s linear 0s;
}
@media (hover: hover) {
	.site-header__item.has-children:hover .site-header__submenu {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: opacity 0.25s ease, transform 0.3s var(--ease-out), visibility 0s linear 0s;
	}
}

.site-header__sublink {
	display: block;
	padding: 10px 22px;
	font-size: var(--fs-small);
	font-weight: var(--weight-medium);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink);
	white-space: nowrap;
	transition: color 0.2s ease, background-color 0.2s ease;
}
.site-header__sublink:hover,
.site-header__sublink:focus-visible {
	color: var(--gold-dark);
	background: var(--mist);
}

/* ---- Right actions: phone CTA + hamburger ------------------------------ */
.site-header__actions { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 24px); flex-shrink: 0; }

.site-header__phone {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-weight: var(--weight-semibold);
	font-size: 14px;
	color: var(--ink);
	white-space: nowrap;
	transition: color 0.25s ease;
}
.site-header__phone svg { color: var(--gold-dark); }
.site-header__phone:hover, .site-header__phone:focus-visible { color: var(--gold-dark); }

/* ---- Morphing hamburger (hidden on desktop) ---------------------------- */
.site-header__menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--ink);
	cursor: pointer;
}
.site-header__menu-icon { position: relative; display: block; width: 24px; height: 14px; }
.site-header__menu-icon__line {
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	background: currentColor;
	transform-origin: center;
	transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.2s ease;
}
.site-header__menu-icon__line:nth-child(1) { top: 0; }
.site-header__menu-icon__line:nth-child(2) { top: 50%; margin-top: -1px; }
.site-header__menu-icon__line:nth-child(3) { bottom: 0; }

body.is-menu-open .site-header__menu-icon__line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.is-menu-open .site-header__menu-icon__line:nth-child(2) { opacity: 0; transform: scaleX(0); }
body.is-menu-open .site-header__menu-icon__line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---- Full-screen mobile menu overlay ----------------------------------- */
.site-menu {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: var(--paper);
	opacity: 0;
	visibility: hidden;
	overflow-y: auto;
	transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
body.is-menu-open .site-menu {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.4s ease, visibility 0s linear 0s;
}

.site-menu__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-m);
	align-items: flex-start;
	min-height: 100%;
	padding: calc(var(--header-h) + var(--space-l)) var(--gutter) var(--space-xl);
}
.site-menu__list { list-style: none; display: flex; flex-direction: column; gap: var(--space-s); }

/* Staggered entrance per top-level item (--i from header.js). */
.site-menu__list > li,
.site-menu__cta {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}
body.is-menu-open .site-menu__list > li,
body.is-menu-open .site-menu__cta {
	opacity: 1;
	transform: translateY(0);
	transition-delay: calc(0.1s + var(--i, 0) * 0.05s);
}

.site-menu__link {
	font-family: var(--font-serif);
	font-size: clamp(26px, 6vw, 34px);
	font-weight: var(--weight-semibold);
	line-height: 1.25;
	color: var(--ink);
}
.site-menu__link:hover, .site-menu__link:focus-visible { color: var(--gold-dark); }

.site-menu__sublist {
	list-style: none;
	margin-top: 8px;
	padding-left: 22px;
	border-left: 2px solid var(--gold);
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.site-menu__sublink {
	font-size: var(--fs-title);
	font-weight: var(--weight-regular);
	color: var(--body);
}
.site-menu__sublink:hover, .site-menu__sublink:focus-visible { color: var(--gold-dark); }

.site-menu__cta { margin-top: var(--space-s); }

/* Lock body scroll when overlay is open */
body.is-menu-open { overflow: hidden; }

/* ---- Responsive header ------------------------------------------------- */
@media (max-width: 1180px) {
	.site-header__nav, .site-header__phone { display: none; }
	.site-header__menu-toggle { display: inline-flex; }
	.site-header__inner { min-height: 72px; }
	.site-header__logo img { height: 40px; }
	.site-header__lockup-name { font-size: 21px; }
}

/* ==========================================================================
   Footer — charcoal band, three columns (Kontakt / Otváracia doba / Menu),
   thin copyright bar with dynamic year.
   ========================================================================== */
.footer {
	background: var(--charcoal);
	color: var(--paper);
}
.footer__inner {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(32px, 5vw, 72px);
	max-width: var(--wide);
	margin-inline: auto;
	padding: var(--space-xl) var(--gutter);
}

.footer__heading {
	font-family: var(--font-sans);
	font-weight: var(--weight-semibold);
	font-size: var(--fs-small);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gold);
	margin: 0 0 var(--space-s);
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer__contact {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px 14px;
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
}
.footer__contact dt { color: rgba(255, 255, 255, 0.55); }
.footer__contact dd { margin: 0; color: var(--paper); }
.footer__contact a { color: var(--paper); transition: color 0.2s ease; }
.footer__contact a:hover, .footer__contact a:focus-visible { color: var(--gold); }

.footer__hours { margin: 0; font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, 0.85); }

.footer__nav { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer__link {
	font-size: 15px;
	color: rgba(255, 255, 255, 0.85);
	transition: color 0.2s ease, padding-left 0.25s var(--ease-out);
}
.footer__link:hover, .footer__link:focus-visible { color: var(--gold); padding-left: 6px; }

.footer__copyright { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.footer__copyright-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	max-width: var(--wide);
	margin-inline: auto;
	padding: 18px var(--gutter);
	font-size: var(--fs-small);
	color: rgba(255, 255, 255, 0.55);
}
.footer__copyright-sep { color: rgba(255, 255, 255, 0.25); }
.footer__copyright-link { color: rgba(255, 255, 255, 0.85); transition: color 0.2s ease; }
.footer__copyright-link:hover, .footer__copyright-link:focus-visible { color: var(--gold); }

@media (max-width: 900px) {
	.footer__inner { grid-template-columns: 1fr; gap: var(--space-m); }
}

/* ==========================================================================
   Reveal system (reveal.js) — a [data-reveal-root] section cascades its
   descendants in on scroll-in; each element on its own --rd delay.
   Types: in (plain fade), fade (rise), zoom (settle scale), grow (scaleY up),
   slice (per-word rise + un-blur, staggered by --ci after --rt).
   ========================================================================== */
.has-reveal-js [data-reveal="fade"],
.has-reveal-js [data-reveal="in"],
.has-reveal-js [data-reveal="grow"],
.has-reveal-js [data-reveal="zoom"] { opacity: 0; }
.has-reveal-js [data-reveal="slice"] { visibility: hidden; }
[data-reveal="slice"].is-split { visibility: visible; }

[data-reveal="in"] { transition: opacity 0.8s ease; transition-delay: var(--rd, 0ms); }
[data-reveal="zoom"] {
	transform: scale(1.08);
	transition: opacity 1s ease, transform 1.3s var(--ease-out);
	transition-delay: var(--rd, 0ms);
}
[data-reveal="fade"] {
	transform: translateY(26px);
	transition: opacity 0.8s ease, transform 0.9s var(--ease-out);
	transition-delay: var(--rd, 0ms);
}
[data-reveal="grow"] {
	transform: scaleY(0.82) translateY(26px);
	transform-origin: bottom center;
	transition: opacity 0.7s ease, transform 1s var(--ease-out);
	transition-delay: var(--rd, 0ms);
}
[data-reveal="slice"] .rw {
	display: inline-block;
	white-space: nowrap;
	opacity: 0;
	transform: translateY(0.5em) rotate(2deg);
	filter: blur(6px);
	transition:
		opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
		transform 0.9s var(--ease-out),
		filter 0.7s ease;
	transition-delay: calc(var(--rt, 0ms) + var(--ci) * 70ms);
	will-change: transform, opacity, filter;
}

[data-reveal-root].is-revealed [data-reveal="in"] { opacity: 1; }
[data-reveal-root].is-revealed [data-reveal="zoom"] { opacity: 1; transform: scale(1); }
[data-reveal-root].is-revealed [data-reveal="fade"] { opacity: 1; transform: none; }
[data-reveal-root].is-revealed [data-reveal="grow"] { opacity: 1; transform: none; }
[data-reveal-root].is-revealed [data-reveal="slice"] .rw { opacity: 1; transform: none; filter: blur(0); }

@media (prefers-reduced-motion: reduce) {
	[data-reveal], [data-reveal] .rw { transition: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
	.site-header__inner { animation: none; }
	.site-header, .site-header__link::after, .site-header__caret,
	.site-header__submenu, .site-header__menu-icon__line,
	.site-menu, .site-menu__list > li, .site-menu__cta { transition-duration: 0.01ms !important; }
	html { scroll-behavior: auto; }
	.card, .card__image img { transition: none; }
}

/* ==========================================================================
   Legal template (Zásady ochrany osobných údajov) — narrow prose column
   ========================================================================== */
.page-legal {
	padding-top: clamp(40px, 8vw, 80px);
	padding-bottom: clamp(80px, 10vw, 130px);
	padding-inline: var(--gutter);
}
.page-legal__head { margin-bottom: clamp(28px, 4vw, 48px); }
.page-legal__title { font-size: var(--fs-heading); }
.page-legal .wp-block-post-content { font-size: 17px; line-height: 1.7; color: var(--body); }
.page-legal .wp-block-post-content > * { margin-block: 0 1.1em; }
.page-legal .wp-block-post-content h2 { margin-top: 1.6em; font-size: var(--fs-subheading); }
.page-legal .wp-block-post-content h3 { margin-top: 1.4em; font-size: var(--fs-title); font-family: var(--font-sans); font-weight: var(--weight-semibold); }
.page-legal .wp-block-post-content a { color: var(--gold-dark); text-decoration: underline; text-underline-offset: 2px; }
.page-legal .wp-block-post-content :is(ul, ol) { margin: 0 0 1.1em; padding-left: 1.4em; }
.page-legal .wp-block-post-content ul { list-style: disc; }
.page-legal .wp-block-post-content ol { list-style: decimal; }
.page-legal .wp-block-post-content li { margin-bottom: 0.4em; }

/* ==========================================================================
   Styleguide (/styleguide) — dev reference only
   ========================================================================== */
.sg { padding: var(--space-2xl) var(--space-l); max-width: var(--wide); margin: 0 auto; }
.sg h2 { font-size: var(--fs-heading); margin-bottom: var(--space-m); }
.sg h2 em { font-style: italic; font-weight: var(--weight-regular); color: var(--gold-dark); }
.sg section { padding-block: var(--space-xl); border-top: 1px solid var(--line); }
.sg section:first-of-type { border-top: 0; }
.sg__label { font-size: var(--fs-small); color: var(--grey); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-s); }

.sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-s); }
.sg-swatch__chip { height: 96px; border: 1px solid var(--line); }
.sg-swatch__name { font-weight: var(--weight-medium); margin-top: 8px; font-size: var(--fs-base); }
.sg-swatch__val { font-size: var(--fs-small); color: var(--grey); }

.sg-type > * + * { margin-top: var(--space-s); }
.sg-type__row { display: flex; align-items: baseline; gap: var(--space-m); flex-wrap: wrap; }
.sg-type__meta { font-size: var(--fs-small); color: var(--grey); min-width: 130px; }

.sg-row { display: flex; gap: var(--space-s); flex-wrap: wrap; align-items: center; }
.sg-row + .sg-row { margin-top: var(--space-s); }

.sg-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-s); max-width: 720px; }

.sg-spacing__bar { background: var(--gold); height: 24px; }
.sg-spacing__row { display: flex; align-items: center; gap: var(--space-s); margin-top: var(--space-s); }
.sg-spacing__meta { font-size: var(--fs-small); color: var(--grey); min-width: 160px; }

/* ===== PAGE BLOCKS (merged from _build fragments) ===== */

/* ----- Blocks: homepage / gallery / okolie / ubytovanie ----- */
/* ==========================================================================
   Hero — full-bleed photo, dark scrim, centered guild eyebrow + display title
   ========================================================================== */
.hero {
	position: relative;
	display: grid;
	place-items: center;
	min-height: clamp(520px, 78vh, 780px);
	overflow: hidden;
}
.hero__media,
.hero__scrim { position: absolute; inset: 0; }
.hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Scrim darkens bottom-up so the photo stays readable behind light type */
.hero__scrim {
	background:
		linear-gradient(to top, rgba(23, 23, 23, 0.72), rgba(23, 23, 23, 0.3) 55%, rgba(23, 23, 23, 0.45));
}
.hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-s);
	max-width: var(--content);
	padding: var(--space-3xl) var(--gutter) var(--space-2xl);
	text-align: center;
}
.hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	font-weight: var(--weight-semibold);
	font-size: var(--fs-small);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--gold);
}
.hero__eyebrow::before,
.hero__eyebrow::after { content: ''; width: 36px; height: 1px; background: var(--gold); }
.hero__title {
	font-size: var(--fs-display);
	color: var(--paper);
	text-wrap: balance;
	text-shadow: 0 2px 24px rgba(23, 23, 23, 0.4);
}
.hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-xs);
	margin-top: var(--space-s);
}

/* ==========================================================================
   Welcome — intro text flanked by the two guild emblems
   ========================================================================== */
.welcome { padding: var(--space-2xl) var(--gutter); }
.welcome__inner {
	display: grid;
	grid-template-areas: 'el er' 'content content';
	grid-template-columns: 1fr 1fr;
	gap: var(--space-l) var(--space-m);
	align-items: center;
	max-width: var(--wide);
	margin-inline: auto;
}
.welcome__emblem--left { grid-area: el; justify-self: end; }
.welcome__emblem--right { grid-area: er; justify-self: start; }
.welcome__emblem img {
	width: clamp(110px, 18vw, 200px);
	height: auto;
}
.welcome__content {
	grid-area: content;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-m);
	max-width: 680px;
	margin-inline: auto;
	text-align: center;
}
.welcome__intro { display: flex; flex-direction: column; gap: var(--space-xs); }
.welcome__intro p { margin: 0; font-size: var(--fs-title); line-height: 1.7; }
.welcome__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	list-style: none;
	text-align: left;
}
.welcome__list li {
	position: relative;
	padding-left: 26px;
	color: var(--body);
}
.welcome__list li::before {
	content: '';
	position: absolute;
	left: 4px;
	top: 0.62em;
	width: 7px;
	height: 7px;
	background: var(--gold);
	transform: rotate(45deg);
}
.welcome__note {
	margin: 0;
	padding: var(--space-xs) var(--space-s);
	border: 1px solid var(--line);
	border-left: 3px solid var(--gold);
	background: var(--mist);
	font-weight: var(--weight-medium);
}
.welcome__tagline {
	margin: 0;
	font-family: var(--font-serif);
	font-style: italic;
	font-size: var(--fs-lead);
	color: var(--gold-dark);
}
@media (min-width: 1000px) {
	.welcome__inner {
		grid-template-areas: 'el content er';
		grid-template-columns: minmax(140px, 1fr) minmax(0, 3fr) minmax(140px, 1fr);
	}
	.welcome__emblem--left,
	.welcome__emblem--right { justify-self: center; }
}

/* ==========================================================================
   Specialties — three cards on the dark band + note + wine-list link
   ========================================================================== */
.specialties { padding: var(--space-2xl) var(--gutter); }
.specialties__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-l);
	max-width: var(--wide);
	margin-inline: auto;
}
.specialties__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-s);
	width: 100%;
}
.specialties__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-s);
	padding: var(--space-l) var(--space-m);
	text-align: center;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-top: 2px solid var(--gold);
	transition: background-color 0.35s ease, transform 0.35s var(--ease-out);
}
.specialties__card:hover {
	background: rgba(255, 255, 255, 0.07);
	transform: translateY(-4px);
}
.specialties__icon { width: 56px; height: 56px; color: var(--gold); }
.specialties__icon svg { width: 100%; height: 100%; }
.specialties__card-title {
	font-size: var(--fs-title);
	color: var(--paper);
	letter-spacing: 0.01em;
}
.specialties__card-text {
	margin: 0;
	color: rgba(255, 255, 255, 0.75);
	line-height: 1.7;
}
.specialties__foot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-s);
	text-align: center;
}
.specialties__note {
	margin: 0;
	font-family: var(--font-serif);
	font-style: italic;
	font-size: var(--fs-lead);
	color: var(--gold);
}
@media (min-width: 800px) {
	.specialties__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   Teasers — two .card photo cards (Ubytovanie + Jedálny lístok)
   ========================================================================== */
.teasers { padding: var(--space-2xl) var(--gutter); }
.teasers__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-m);
	max-width: var(--wide);
	margin-inline: auto;
}
.teasers__card .card__text strong { color: var(--ink); font-weight: var(--weight-semibold); }
@media (min-width: 760px) {
	.teasers__inner { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   Services — icon row on mist band
   ========================================================================== */
.services {
	padding: var(--space-2xl) var(--gutter);
	background: var(--mist);
}
.services__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-l);
	max-width: var(--wide);
	margin-inline: auto;
}
.services__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-l) var(--space-m);
	width: 100%;
	max-width: 880px;
	list-style: none;
}
.services__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-s);
	text-align: center;
}
.services__icon {
	display: grid;
	place-items: center;
	width: 92px;
	height: 92px;
	border: 1px solid var(--gold);
	border-radius: 50%;
	color: var(--gold-dark);
	background: var(--paper);
	transition: background-color 0.3s ease, color 0.3s ease, transform 0.35s var(--ease-out);
}
.services__icon svg { width: 44px; height: 44px; }
.services__item:hover .services__icon {
	background: var(--gold);
	color: var(--ink);
	transform: translateY(-4px);
}
.services__label {
	font-weight: var(--weight-semibold);
	font-size: var(--fs-small);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink);
}
@media (min-width: 760px) {
	.services__grid { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   Reviews — quote cards
   ========================================================================== */
.reviews { padding: var(--space-2xl) var(--gutter); }
.reviews__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-l);
	max-width: var(--wide);
	margin-inline: auto;
}
.reviews__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-s);
	width: 100%;
	max-width: 980px;
}
.reviews__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-s);
	margin: 0;
	padding: var(--space-l) var(--space-m) var(--space-m);
	border: 1px solid var(--line);
	border-top: 2px solid var(--gold);
	background: var(--paper);
}
.reviews__mark {
	position: absolute;
	top: 2px;
	left: var(--space-s);
	font-family: var(--font-serif);
	font-size: 84px;
	line-height: 1;
	color: var(--gold);
	opacity: 0.5;
	pointer-events: none;
}
.reviews__quote {
	margin: 0;
	font-family: var(--font-serif);
	font-style: italic;
	font-size: var(--fs-lead);
	line-height: 1.5;
	color: var(--ink);
}
.reviews__author {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: auto;
	font-weight: var(--weight-semibold);
	font-size: var(--fs-small);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--grey);
}
.reviews__author::before { content: ''; width: 26px; height: 1px; background: var(--gold); }
@media (min-width: 760px) {
	.reviews__grid { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   Gallery grid + lightbox (gallery_grid block)
   ========================================================================== */
.gallery { padding: var(--space-2xl) var(--gutter); }
/* Stacked galleries (Penzión + Reštaurácia) share one rhythm */
.gallery + .gallery { padding-top: 0; }
.gallery__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-l);
	max-width: var(--wide);
	margin-inline: auto;
}
.gallery__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-flow: dense;
	gap: var(--space-xs);
}
.gallery__item {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--mist);
}
.gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--ease-out);
}
.gallery__item:hover img,
.gallery__item:focus-visible img { transform: scale(1.05); }
.gallery__zoom {
	position: absolute;
	right: 12px;
	bottom: 12px;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(23, 23, 23, 0.55);
	color: var(--paper);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.3s ease, transform 0.35s var(--ease-out);
}
.gallery__zoom svg { width: 18px; height: 18px; }
.gallery__item:hover .gallery__zoom,
.gallery__item:focus-visible .gallery__zoom { opacity: 1; transform: none; }
@media (min-width: 760px) {
	.gallery__grid { grid-template-columns: repeat(3, 1fr); }
	/* Every 5th photo becomes a 2×2 anchor for a masonry-ish rhythm */
	.gallery__item:nth-child(5n + 1) { grid-column: span 2; grid-row: span 2; }
}

.gallery-lightbox {
	width: 100vw;
	height: 100vh;
	max-width: 100vw;
	max-height: 100vh;
	border: 0;
	margin: 0;
	padding: 0;
	background: transparent;
	color: var(--paper);
}
.gallery-lightbox::backdrop { background: rgba(23, 23, 23, 0.94); }
.gallery-lightbox__stage {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: clamp(56px, 8vh, 80px) clamp(56px, 9vw, 110px);
}
.gallery-lightbox__stage img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	box-shadow: 0 24px 80px rgba(23, 23, 23, 0.6);
}
.gallery-lightbox__close,
.gallery-lightbox__arrow {
	position: absolute;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	background: transparent;
	color: var(--paper);
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.gallery-lightbox__close svg,
.gallery-lightbox__arrow svg { width: 20px; height: 20px; }
.gallery-lightbox__close:hover,
.gallery-lightbox__close:focus-visible,
.gallery-lightbox__arrow:hover,
.gallery-lightbox__arrow:focus-visible {
	background: var(--gold);
	border-color: var(--gold);
	color: var(--ink);
}
.gallery-lightbox__close { top: 16px; right: 16px; }
.gallery-lightbox__arrow--prev { left: 12px; top: 50%; translate: 0 -50%; }
.gallery-lightbox__arrow--next { right: 12px; top: 50%; translate: 0 -50%; }
.gallery-lightbox__counter {
	position: absolute;
	bottom: 14px;
	left: 50%;
	translate: -50% 0;
	margin: 0;
	font-size: var(--fs-small);
	letter-spacing: 0.14em;
	color: rgba(255, 255, 255, 0.7);
}

/* ==========================================================================
   Attractions — /okolie/ cards (photo cards + bordered text cards)
   ========================================================================== */
.attractions { padding: var(--space-2xl) var(--gutter); }
.attractions__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-l);
	max-width: var(--wide);
	margin-inline: auto;
}
.attractions__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-s);
	width: 100%;
}
.attractions__card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--line);
	background: var(--paper);
	overflow: hidden;
	transition: box-shadow 0.35s ease, transform 0.35s var(--ease-out);
}
.attractions__card:hover {
	box-shadow: 0 18px 40px rgba(23, 23, 23, 0.1);
	transform: translateY(-4px);
}
.attractions__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background: var(--mist);
}
.attractions__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--ease-out);
}
.attractions__card:hover .attractions__media img { transform: scale(1.04); }
.attractions__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: var(--space-s) var(--space-m) var(--space-m);
	flex: 1;
}
.attractions__card--text {
	justify-content: center;
	border-top: 2px solid var(--gold);
	background: var(--mist);
}
.attractions__card--text .attractions__body { padding-block: var(--space-m); }
.attractions__name { font-size: var(--fs-title); }
.attractions__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	font-weight: var(--weight-semibold);
	font-size: var(--fs-small);
	letter-spacing: 0.08em;
	color: var(--gold-dark);
	transition: color 0.25s ease, gap 0.25s var(--ease-out);
}
.attractions__link svg { width: 14px; height: 14px; }
.attractions__link:hover,
.attractions__link:focus-visible { color: var(--ink); gap: 12px; }
@media (min-width: 640px) {
	.attractions__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
	.attractions__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   Rooms (room_features) — intro, výbava + framed photo, distribution, strip
   ========================================================================== */
.rooms { padding-block: var(--space-2xl); }
.rooms__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
	max-width: var(--wide);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.rooms__intro {
	max-width: 820px;
	margin: 0 auto;
	font-size: var(--fs-title);
	line-height: 1.75;
	text-align: center;
}
.rooms__columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-l);
	align-items: center;
}
.rooms__features {
	display: flex;
	flex-direction: column;
	gap: var(--space-m);
}
.rooms__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	list-style: none;
}
.rooms__list li {
	position: relative;
	padding-left: 26px;
}
.rooms__list li::before {
	content: '';
	position: absolute;
	left: 4px;
	top: 0.62em;
	width: 7px;
	height: 7px;
	background: var(--gold);
	transform: rotate(45deg);
}
/* Offset gold hairline frame behind the photo */
.rooms__photo {
	position: relative;
	margin: 0 var(--space-s) var(--space-s) 0;
}
.rooms__photo::after {
	content: '';
	position: absolute;
	inset: var(--space-s) calc(-1 * var(--space-s)) calc(-1 * var(--space-s)) var(--space-s);
	border: 1px solid var(--gold);
	pointer-events: none;
}
.rooms__photo img {
	position: relative;
	z-index: 1;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
.rooms__distribution {
	padding: var(--space-m) var(--space-m) var(--space-l);
	background: var(--mist);
	border: 1px solid var(--line);
	border-top: 2px solid var(--gold);
}
.rooms__distribution-title {
	margin-bottom: var(--space-s);
	font-size: var(--fs-subheading);
}
.rooms__distribution-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px var(--space-m);
	list-style: none;
}
.rooms__distribution-list li {
	position: relative;
	padding-left: 26px;
}
.rooms__distribution-list li::before {
	content: '';
	position: absolute;
	left: 4px;
	top: 0.62em;
	width: 7px;
	height: 7px;
	background: var(--gold);
	transform: rotate(45deg);
}
.rooms__strip {
	display: flex;
	gap: var(--space-xs);
	margin-top: var(--space-xl);
	padding-inline: var(--gutter);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}
.rooms__strip-item {
	flex: 0 0 auto;
	margin: 0;
	scroll-snap-align: center;
}
.rooms__strip-item img {
	height: clamp(200px, 30vw, 300px);
	width: auto;
}
@media (min-width: 900px) {
	.rooms__columns { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
	.rooms__distribution-list { grid-template-columns: 1fr 1fr; }
}

/* ----- Blocks: menu / events / contact ----- */
/* ==========================================================================
   BLOCKS B — page_header, price_table, menu_sets, wine_card, allergens,
   text_media, cta, contact_details, map. Token vars only; merged into
   style.css by the build step.
   ========================================================================== */

/* ---- page_header — subpage title bar ----------------------------------- */
.page-header {
	background: var(--mist);
	border-bottom: 1px solid var(--line);
}
.page-header__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-s);
	max-width: var(--content);
	margin-inline: auto;
	padding: clamp(44px, 7vw, 84px) var(--gutter);
	text-align: center;
}
.page-header__title {
	font-size: var(--fs-display);
	font-weight: var(--weight-semibold);
}
.page-header__rule {
	width: 64px;
	height: 1px;
	background: var(--gold);
}
.page-header__subtitle {
	margin: 0;
	font-size: var(--fs-small);
	font-weight: var(--weight-semibold);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--gold-dark);
}

/* ---- price_table — printed-menu typography ------------------------------ */
.price-table {
	padding: var(--space-l) var(--gutter);
}
.price-table__inner {
	max-width: 780px;
	margin-inline: auto;
}
.price-table__head {
	margin-bottom: var(--space-m);
}
.price-table__intro {
	margin: calc(-1 * var(--space-xs)) 0 var(--space-m);
	text-align: center;
	color: var(--grey);
}
.price-list {
	list-style: none;
	display: flex;
	flex-direction: column;
}
.price-list__row {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding-block: 13px;
}
.price-list__row + .price-list__row {
	border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
}
.price-list__item {
	font-weight: var(--weight-medium);
	color: var(--ink);
}
.price-list__portion {
	display: block;
	font-size: var(--fs-small);
	font-weight: var(--weight-regular);
	color: var(--grey);
	margin-top: 2px;
}
.price-list__dots {
	flex: 1;
	min-width: 24px;
	border-bottom: 1px dotted var(--line);
	transform: translateY(-4px);
}
.price-list__price {
	font-family: var(--font-serif);
	font-size: var(--fs-title);
	font-weight: var(--weight-semibold);
	color: var(--gold-dark);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.price-table__note {
	margin: var(--space-m) 0 0;
	padding-top: var(--space-s);
	border-top: 1px solid var(--line);
	font-size: var(--fs-small);
	font-style: italic;
	color: var(--grey);
	text-align: center;
}

/* ---- menu_sets — set-menu cards on mist -------------------------------- */
.menu-sets {
	background: var(--mist);
	border-block: 1px solid var(--line);
	padding: var(--space-2xl) var(--gutter);
	margin-block: var(--space-l);
}
.menu-sets__inner {
	max-width: var(--content);
	margin-inline: auto;
}
.menu-sets__head {
	margin-bottom: var(--space-l);
}
.menu-sets__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-s);
}
.menu-set {
	display: flex;
	flex-direction: column;
	background: var(--paper);
	border: 1px solid var(--line);
	border-top: 2px solid var(--gold);
	padding: var(--space-m);
}
.menu-set__name {
	font-size: var(--fs-subheading);
	text-align: center;
	padding-bottom: var(--space-s);
	margin-bottom: var(--space-s);
	border-bottom: 1px solid var(--line);
}
.menu-set__courses {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 9px;
	flex: 1;
}
.menu-set__course {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
}
.menu-set__course-portion {
	font-size: var(--fs-small);
	color: var(--grey);
	white-space: nowrap;
}
.menu-set__price {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin: var(--space-s) 0 0;
	padding-top: var(--space-s);
	border-top: 1px solid var(--line);
}
.menu-set__price-label {
	font-size: var(--fs-small);
	font-weight: var(--weight-semibold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--grey);
}
.menu-set__price-value {
	font-family: var(--font-serif);
	font-size: var(--fs-lead);
	font-weight: var(--weight-semibold);
	color: var(--gold-dark);
	font-variant-numeric: tabular-nums;
}
@media (min-width: 640px) {
	.menu-sets__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.menu-sets__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---- wine_card — dark PDF banner --------------------------------------- */
.wine-card {
	padding: var(--space-xl) var(--gutter);
	margin-block: var(--space-l);
}
.wine-card__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-m);
	max-width: var(--content);
	margin-inline: auto;
}
.wine-card__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-xs);
}
.wine-card__text {
	margin: 0;
	color: color-mix(in srgb, var(--paper) 85%, transparent);
}
.wine-card__hint {
	font-weight: var(--weight-regular);
	opacity: 0.75;
}
@media (min-width: 800px) {
	.wine-card__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

/* ---- allergens — small-print <details> --------------------------------- */
.allergens {
	padding: var(--space-l) var(--gutter);
}
.allergens__inner {
	max-width: 780px;
	margin-inline: auto;
}
.allergens__details {
	border: 1px solid var(--line);
	background: var(--mist);
}
.allergens__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-s);
	padding: var(--space-s) var(--space-m);
	cursor: pointer;
	list-style: none;
}
.allergens__summary::-webkit-details-marker { display: none; }
.allergens__title {
	font-family: var(--font-serif);
	font-size: var(--fs-title);
	font-weight: var(--weight-semibold);
	color: var(--ink);
}
.allergens__chevron {
	display: inline-flex;
	color: var(--gold-dark);
	transition: transform 0.3s var(--ease-out);
}
.allergens__details[open] .allergens__chevron { transform: rotate(180deg); }
.allergens__body {
	padding: 0 var(--space-m) var(--space-m);
	font-size: var(--fs-small);
	color: var(--grey);
}
.allergens__intro {
	margin: 0 0 var(--space-s);
	padding-top: var(--space-s);
	border-top: 1px solid var(--line);
}
.allergens__list {
	list-style: decimal;
	padding-left: 1.4em;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.allergens__item::marker {
	color: var(--gold-dark);
	font-weight: var(--weight-semibold);
}

/* ---- text_media — content + photo stack -------------------------------- */
.text-media {
	padding: var(--space-2xl) var(--gutter);
}
.text-media__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-l);
	align-items: start;
	max-width: var(--content);
	margin-inline: auto;
}
.text-media.has-media .text-media__inner {
	max-width: var(--wide);
}
.text-media__headline {
	margin-bottom: var(--space-m);
}
.text-media__body > * { margin-block: 0 1.1em; }
.text-media__body > *:last-child { margin-bottom: 0; }
.text-media__body a {
	color: var(--gold-dark);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.text-media__body strong { color: var(--ink); }
.text-media__body ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 1.4em;
}
.text-media__body ul li {
	position: relative;
	padding-left: 26px;
}
/* Gold en-dash marker keeps lists in the printed-menu register. */
.text-media__body ul li::before {
	content: '—';
	position: absolute;
	left: 0;
	color: var(--gold);
}
.text-media__media {
	display: grid;
	gap: var(--space-s);
}
.text-media__figure {
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--line);
}
.text-media__figure img {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
@media (min-width: 900px) {
	.text-media.has-media .text-media__inner {
		grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	}
	.text-media.is-media-left .text-media__content { order: 2; }
	.text-media.is-media-left .text-media__media { order: 1; }
	/* Two photos stagger like prints laid on a table. */
	.text-media__media--n2 .text-media__figure:nth-child(2) {
		margin-left: var(--space-xl);
	}
	.text-media__media--n2 .text-media__figure:first-child {
		margin-right: var(--space-xl);
	}
}

/* ---- cta — gold call-to-action band ------------------------------------ */
.cta-band {
	background: var(--gold);
	padding: var(--space-xl) var(--gutter);
}
.cta-band__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-m);
	max-width: var(--content);
	margin-inline: auto;
	text-align: center;
}
.cta-band__title {
	font-size: var(--fs-heading);
	color: var(--ink);
}
.cta-band__btn {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--paper);
}
.cta-band__btn:hover,
.cta-band__btn:focus-visible {
	background: var(--charcoal);
	border-color: var(--charcoal);
	color: var(--paper);
}
@media (min-width: 800px) {
	.cta-band__inner {
		flex-direction: row;
		justify-content: space-between;
		text-align: left;
	}
}

/* ---- contact_details — icon cards -------------------------------------- */
.contact-details {
	padding: var(--space-2xl) var(--gutter) var(--space-l);
}
.contact-details__inner {
	max-width: var(--content);
	margin-inline: auto;
}
.contact-details__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-s);
}
.contact-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	background: var(--mist);
	border: 1px solid var(--line);
	border-top: 2px solid var(--gold);
	padding: var(--space-m);
}
.contact-card__icon {
	display: inline-flex;
	color: var(--gold-dark);
	margin-bottom: 4px;
}
.contact-card__title {
	font-size: var(--fs-title);
}
.contact-card__text {
	margin: 0;
	line-height: 1.7;
}
.contact-card__text a { transition: color 0.2s ease; }
.contact-card__text a:hover,
.contact-card__text a:focus-visible { color: var(--gold-dark); }
.contact-card__meta {
	margin: var(--space-xs) 0 0;
	padding-top: var(--space-xs);
	border-top: 1px solid var(--line);
	font-size: var(--fs-small);
	color: var(--grey);
	line-height: 1.7;
}
.contact-card__meta-label {
	font-weight: var(--weight-semibold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gold-dark);
}
@media (min-width: 640px) {
	.contact-details__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.contact-details__grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---- map — click-to-load Google Maps ----------------------------------- */
.map {
	padding: var(--space-l) var(--gutter) var(--space-2xl);
}
.map__inner {
	max-width: var(--content);
	margin-inline: auto;
}
.map__head {
	margin-bottom: var(--space-m);
}
.map__frame {
	position: relative;
	height: clamp(320px, 45vw, 460px);
	border: 1px solid var(--line);
	background: var(--mist);
}
.map__frame iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}
.map__placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-s);
	height: 100%;
	padding: var(--space-m);
	text-align: center;
}
.map__pin { color: var(--gold-dark); }
.map__address {
	margin: 0;
	font-family: var(--font-serif);
	font-size: var(--fs-title);
	font-weight: var(--weight-semibold);
	color: var(--ink);
}
.map__consent {
	margin: 0;
	font-size: var(--fs-small);
	color: var(--grey);
}