/* Villa Bella Casa — główny arkusz stylów
   Układ: sekcje naprzemiennie kremowe / piaskowe / granatowe,
   ceny i odległości zawsze w kroju mono jak w karcie meldunkowej. */

/* Paleta marki (stała, jasna, premium):
   Granat #13203A, Granat jaśniejszy #26365A, Krem #F6F1E7, Piasek #EDE4D0,
   Złoto mosiężne #B8955A (przyciski), Złoto ciemne #7D6029 (ceny i wyróżnienia na jasnym tle),
   Szampan #E2CDA4 (akcenty na granacie) */
:root {
	--navy: #13203a;       /* tekst, ciemne sekcje, menu, przyciski */
	--navy-2: #26365a;     /* tło pod zdjęciami, drobne linie i akcenty */
	--cream: #f6f1e7;      /* główne tło */
	--sand: #ede4d0;       /* co druga sekcja, karty */
	--gold: #b8955a;       /* przyciski, przycisk z telefonem */
	--gold-hover: #a6834a;
	--gold-deep: #7d6029;  /* ceny, wyróżnienia w tekście na jasnym tle */
	--champagne: #e2cda4;  /* akcenty na granacie: linia pod menu, aktywna zakładka, ramki */

	--paper: var(--cream);
	--surface: var(--sand);
	--tint: var(--sand);
	--ink: var(--navy);
	--muted: #4b5671;
	--line: rgb(38 54 90 / .2);
	--green: var(--navy);
	--on-green: var(--cream);
	--on-green-muted: #c3c8d4;
	--accent: var(--gold);
	--accent-ink: var(--navy);
	--ph-a: var(--navy-2);
	--ph-b: #1d2b4a;

	--f-display: "Marcellus", "Optima", "Palatino Linotype", Georgia, serif; /* jedna grubość: 400 */
	--f-body: "Jost", "Futura", "Century Gothic", "Segoe UI", system-ui, sans-serif;

	--ease-out: cubic-bezier(.2, .7, .2, 1);  /* wejścia */
	--ease-io: cubic-bezier(.7, 0, .2, 1);    /* kurtyny, przejścia */

	--wrap: 1200px;
	--gutter: clamp(16px, 4vw, 40px);
	--r: 4px;
	--sec: clamp(56px, 8vw, 112px);
	color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0; background: var(--paper); color: var(--ink);
	font: 400 17px/1.6 var(--f-body);
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
/* Nic nie może poszerzyć strony w poziomie (np. obracana pizza ma przezroczyste rogi,
   które przy obrocie wystają poza ekran). clip nie psuje przyklejonego nagłówka. */
main { overflow-x: clip; }
@supports not (overflow: clip) { main { overflow-x: hidden; } }
a { color: inherit; text-decoration-color: var(--accent); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
.site-head :focus-visible, .section--ink :focus-visible, .site-foot :focus-visible, .cta-band :focus-visible { outline-color: var(--champagne); }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p { margin: 0; }
.mono { font-variant-numeric: tabular-nums lining-nums; letter-spacing: .02em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: absolute; left: 16px; top: -60px; background: var(--accent); color: var(--accent-ink); padding: 8px 14px; z-index: 50; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

/* --- typografia ------------------------------------------------------- */
.eyebrow {
	font: 500 12.5px/1.4 var(--f-body); letter-spacing: .18em; text-transform: uppercase;
	color: var(--muted); margin-bottom: 14px;
}
.eyebrow--light { color: var(--champagne); }
.h2 { font: 400 clamp(30px, 3.5vw, 44px)/1.2 var(--f-display); }
.h3 { font: 400 clamp(23px, 2.3vw, 29px)/1.25 var(--f-display); }
.h4 { font: 500 18px/1.35 var(--f-body); letter-spacing: .01em; }
.prose { max-width: 70ch; display: grid; gap: 16px; }
.note { font-size: 14px; color: var(--muted); }
.big { font-size: 26px; }

/* --- przyciski -------------------------------------------------------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 46px; padding: 0 22px; border-radius: var(--r);
	font: 500 14px/1.2 var(--f-body); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; border: 1.5px solid transparent;
	transition: background .35s, color .35s, border-color .35s, transform .35s var(--ease-out), box-shadow .35s;
	cursor: pointer; white-space: nowrap;
}
.btn--lg { min-height: 54px; padding: 0 30px; font-size: 14.5px; }
.btn--accent { background: var(--accent); color: var(--accent-ink); }
.btn--accent:hover { transform: translateY(-2px); background: var(--gold-hover); box-shadow: 0 12px 22px -14px rgb(19 32 58 / .6); }
.btn:active { transform: translateY(0) scale(.98); }
.btn--navy { background: var(--navy); color: var(--cream); }
.btn--navy:hover { background: var(--navy-2); border-color: var(--gold); }
.btn--line { border-color: var(--navy); color: var(--navy); }
.btn--line:hover { background: var(--navy); color: var(--cream); }
.btn--ghost-light { border-color: var(--champagne); color: var(--cream); }
.btn--ghost-light:hover { background: var(--champagne); color: var(--navy); }
.link-arrow { font-weight: 600; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; }
.link-arrow::after { content: "→"; color: var(--accent); transition: transform .2s; }
.link-arrow:hover::after { transform: translateX(4px); }

/* --- pasek górny i nagłówek ------------------------------------------ */
.topbar { background: var(--navy-2); color: var(--on-green-muted); font: 400 13px/1.3 var(--f-body); letter-spacing: .04em; }
.topbar__in { display: flex; justify-content: space-between; gap: 16px; padding-block: 10px; flex-wrap: wrap; }
.topbar__right { display: flex; gap: 20px; }
.topbar a { color: var(--on-green); text-decoration: none; }

.site-head {
	position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
	background: var(--navy); color: var(--cream);
	border-bottom: 1px solid var(--champagne);
}
/* zalogowany administrator: nagłówek przykleja się pod czarnym paskiem WordPressa, nie pod nim */
.admin-bar .site-head { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-head { top: 46px; } }
@media (max-width: 600px) { .admin-bar .site-head { top: 0; } } /* tu pasek WordPressa przewija się razem ze stroną */
.site-head__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand__logo { max-height: 52px; width: auto; }
/* logo hotelu: znak KH i „BY KEMPA HOTELS” w szampańskim złocie, nazwa w kremie */
.logo { display: block; flex: none; overflow: visible; }
.logo__znak, .logo__by { fill: var(--champagne); }
.logo__nazwa { fill: var(--cream); }
.brand .logo { height: 54px; width: auto; transform-origin: left center; transition: transform .5s var(--ease-out); }
.brand__short { display: none; }

.nav { display: flex; align-items: center; gap: 28px; }
.nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 24px; }
.nav__list a { position: relative; display: inline-block; text-decoration: none; font-weight: 500; font-size: 15px; padding: 6px 0; color: var(--cream); transition: color .3s; }
.nav__list a::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--champagne);
	transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease-io);
}
.nav__list a:hover, .nav__list a[aria-current="page"], .nav__list .current-menu-item > a { color: var(--champagne); }
.nav__list a:hover::after, .nav__list a[aria-current="page"]::after, .nav__list .current-menu-item > a::after { transform: scaleX(1); transform-origin: left; }
.nav__extra { display: none; }
.nav-toggle { display: none; }

.site-head.is-scrolled { box-shadow: 0 14px 30px -20px rgb(8 14 28 / .55); }
.site-head.is-scrolled .brand .logo { transform: scale(.92); }
/* węższe ekrany komputerów: logo i odstępy menu odrobinę mniejsze, żeby linki mieściły się w jednej linii */
@media (min-width: 1061px) {
	.nav__list a { white-space: nowrap; }
}
@media (min-width: 1061px) and (max-width: 1240px) {
	.brand .logo { height: 46px; }
	.nav { gap: 22px; }
	.nav__list { gap: 18px; }
	.site-head__in { gap: 18px; }
}

/* menu mobilne: kurtyna z góry, linki wjeżdżają po kolei */
@media (max-width: 1060px) {
	.nav-toggle {
		display: inline-flex; align-items: center; gap: 14px; padding: 0; border: 0; background: none; cursor: pointer;
		color: var(--cream); font: 500 12px/1 var(--f-body); letter-spacing: .22em; text-transform: uppercase;
	}
	.nav-toggle__label { display: grid; overflow: hidden; height: 1.3em; line-height: 1.3em; text-align: right; }
	.nav-toggle__label span { grid-area: 1 / 1; transition: transform .5s var(--ease-io), opacity .35s; }
	.nav-toggle__label span + span { transform: translateY(100%); opacity: 0; }
	.nav-toggle[aria-expanded="true"] .nav-toggle__label span:first-child { transform: translateY(-100%); opacity: 0; }
	.nav-toggle[aria-expanded="true"] .nav-toggle__label span + span { transform: none; opacity: 1; }
	.nav-toggle__icon {
		position: relative; width: 46px; height: 46px; border-radius: 50%; flex: none; color: var(--cream);
		border: 1px solid rgb(226 205 164 / .55); transition: background .4s, border-color .4s, color .4s, transform .5s var(--ease-out);
	}
	.nav-toggle__icon i {
		position: absolute; left: 13px; height: 1.5px; border-radius: 2px; background: currentColor;
		transition: transform .5s var(--ease-io), top .35s var(--ease-io), width .35s var(--ease-io);
	}
	.nav-toggle__icon i:first-child { top: 18px; width: 20px; }
	.nav-toggle__icon i:last-child { top: 26px; width: 12px; }
	.nav-toggle:hover .nav-toggle__icon { border-color: var(--champagne); }
	.nav-toggle:hover .nav-toggle__icon i:last-child { width: 20px; }
	.nav-toggle[aria-expanded="true"] .nav-toggle__icon { background: var(--champagne); border-color: var(--champagne); color: var(--navy); transform: rotate(90deg); }
	.nav-toggle[aria-expanded="true"] .nav-toggle__icon i { top: 22px; width: 20px; }
	.nav-toggle[aria-expanded="true"] .nav-toggle__icon i:first-child { transform: rotate(45deg); }
	.nav-toggle[aria-expanded="true"] .nav-toggle__icon i:last-child { transform: rotate(-45deg); }

	.nav {
		position: fixed; left: 0; right: 0; top: var(--nav-top, 76px); z-index: 19;
		max-height: calc(100dvh - var(--nav-top, 76px)); overflow-y: auto;
		flex-direction: column; align-items: stretch; gap: 20px;
		background: var(--navy); padding: 4px var(--gutter) 24px;
		border-bottom: 1px solid var(--champagne); box-shadow: 0 24px 40px -24px rgb(8 14 28 / .6);
		clip-path: inset(0 0 100% 0); visibility: hidden;
		transition: clip-path .55s var(--ease-io), visibility 0s linear .55s;
	}
	.nav.is-open { clip-path: inset(0 0 -60px 0); visibility: visible; transition: clip-path .55s var(--ease-io), visibility 0s; }
	/* reszta strony widoczna, lekko przyciemniona; kliknięcie w nią zamyka menu */
	.site-head::after {
		content: ""; position: fixed; left: 0; right: 0; bottom: 0; top: var(--nav-top, 76px); z-index: 18;
		background: rgb(19 32 58 / .35); opacity: 0; visibility: hidden; transition: opacity .45s, visibility 0s linear .45s;
	}
	html.menu-open .site-head::after { opacity: 1; visibility: visible; transition: opacity .45s, visibility 0s; }
	.nav__list { flex-direction: column; gap: 0; }
	.nav__list li { opacity: 0; transform: translateY(18px); transition: opacity .3s, transform .3s var(--ease-out); }
	.nav.is-open .nav__list li { opacity: 1; transform: none; transition: opacity .6s, transform .7s var(--ease-out); }
	.nav.is-open .nav__list li:nth-child(1) { transition-delay: .15s; }
	.nav.is-open .nav__list li:nth-child(2) { transition-delay: .2s; }
	.nav.is-open .nav__list li:nth-child(3) { transition-delay: .25s; }
	.nav.is-open .nav__list li:nth-child(4) { transition-delay: .3s; }
	.nav.is-open .nav__list li:nth-child(5) { transition-delay: .35s; }
	.nav.is-open .nav__list li:nth-child(n+6) { transition-delay: .4s; }
	.nav__list a {
		display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 13px 0;
		font: 400 22px/1.25 var(--f-display); border-bottom: 1px solid rgb(226 205 164 / .18);
	}
	.nav__list a::after {
		content: "→"; position: static; height: auto; background: none; transform: none;
		font: 400 18px/1 var(--f-body); color: var(--champagne); opacity: .6; transition: translate .4s var(--ease-out), opacity .3s;
	}
	.nav__list a:hover::after, .nav__list a[aria-current="page"]::after, .nav__list .current-menu-item > a::after { transform: none; translate: 6px 0; opacity: 1; }
	.nav__cta, .nav__extra { opacity: 0; transform: translateY(14px); transition: opacity .3s, transform .3s var(--ease-out); }
	.nav.is-open .nav__cta, .nav.is-open .nav__extra { opacity: 1; transform: none; transition: opacity .6s .4s, transform .7s var(--ease-out) .4s; }
	.nav__cta { width: 100%; min-height: 50px; }
	.nav__extra { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; color: var(--on-green-muted); font-size: 14px; }
	.nav__extra a { color: var(--champagne); text-decoration: none; font: 400 20px/1.3 var(--f-display); }
	.nav__extra span:last-child { flex-basis: 100%; }
	.topbar__in > span:first-child { display: none; }
}

/* --- zdjęcia z polem zastępczym -------------------------------------- */
.ph {
	position: relative; margin: 0; aspect-ratio: 4 / 3; max-width: 100%; overflow: hidden; border-radius: var(--r);
	background:
		repeating-linear-gradient(135deg, transparent 0 14px, rgb(240 181 143 / .12) 14px 15px),
		linear-gradient(160deg, var(--ph-a), var(--ph-b));
}
.ph::after {
	content: attr(data-label); position: absolute; left: 14px; bottom: 12px; right: 14px;
	font: 500 12px/1.4 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--champagne);
}
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.ph--tall { aspect-ratio: 4 / 5; }

/* --- hero ------------------------------------------------------------- */
.hero { padding-block: clamp(40px, 6vw, 80px) clamp(48px, 6vw, 88px); }
.hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero__copy { min-width: 0; }
.hero__title { font: 400 clamp(38px, 5.2vw, 68px)/1.14 var(--f-display); }
.hero__title em { font-style: normal; color: var(--gold-deep); }
.hero__lead { margin-top: 24px; font-size: clamp(17px, 1.5vw, 19px); color: var(--muted); max-width: 52ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero__media { position: relative; }
.hero__tag {
	position: absolute; left: -28px; bottom: 32px; z-index: 2; background: var(--cream); padding: 16px 20px; border: 2px solid var(--champagne);
	border-radius: var(--r); display: grid; gap: 2px; box-shadow: 0 18px 40px -20px rgb(0 0 0 / .35);
}
.hero__tag strong { font: 400 34px/1.15 var(--f-display); color: var(--gold-deep); }
.hero__tag .mono { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* --- fakty ------------------------------------------------------------ */
.facts { border-block: 1px solid var(--line); background: var(--sand); }
.facts__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.fact { padding: 26px 20px 24px 0; display: grid; gap: 4px; }
.fact + .fact { padding-left: 24px; border-left: 1px solid var(--line); }
.fact__n { font: 400 40px/1.15 var(--f-display); }
.fact__n small { font-size: 18px; color: var(--muted); }
.fact__l { font-size: 14px; color: var(--muted); }

/* --- sekcje ----------------------------------------------------------- */
.section { padding-block: var(--sec); }
.section--flush { padding-top: clamp(16px, 3vw, 40px); }
.section--tint { background: var(--tint); }
.section--ink { background: var(--green); color: var(--on-green); overflow: clip; }
.section--ink p { color: var(--on-green-muted); }
.section__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; }
.section__head > div { max-width: 640px; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.split--rev .split__copy { order: 0; }
.split__copy { display: grid; gap: 18px; align-content: start; min-width: 0; }
.split__copy .h2 { margin-bottom: 4px; }
.split__media { min-width: 0; display: grid; gap: 14px; }

.ticks { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.ticks li { padding-left: 26px; position: relative; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .55em; width: 12px; height: 7px; border-left: 2px solid var(--gold-deep); border-bottom: 2px solid var(--gold-deep); transform: rotate(-45deg); }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); }
.duo__item { display: grid; gap: 12px; align-content: start; min-width: 0; }
.duo__item .ph { margin-bottom: 10px; }
.duo__item--card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(24px, 3vw, 40px); align-content: center; }
.stack { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

/* odległości: lista jak tabliczka kilometrażu */
.dist { list-style: none; margin: 0; padding: 0; display: grid; }
.dist li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid rgb(240 181 143 / .3); }
.dist li .mono { color: var(--champagne); white-space: nowrap; }
.dist--light li { border-bottom-color: var(--line); }
.dist--light li .mono { color: var(--gold-deep); font-weight: 500; }

.teasers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.teaser { position: relative; background: var(--paper); padding: 32px 28px; text-decoration: none; display: grid; gap: 10px; align-content: start; transition: background .5s var(--ease-out); }
.teaser::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-io); }
.teaser:hover { background: var(--sand); }
.teaser:hover::before { transform: scaleX(1); }
.teaser__t { font: 400 24px/1.3 var(--f-display); }

/* --- pokoje ----------------------------------------------------------- */
.rooms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.room-card { text-decoration: none; display: grid; gap: 14px; }
.room-card { cursor: pointer; }
.room-card__media { position: relative; }
.room-card .ph img { transition: transform 1.4s var(--ease-out); }
.room-card:hover .ph img { transform: scale(1.02); }
.room-card__more {
	position: absolute; left: 16px; bottom: 16px; z-index: 2; padding: 11px 16px;
	background: var(--navy); color: var(--cream); border-bottom: 1px solid var(--champagne);
	font: 500 12px/1 var(--f-body); letter-spacing: .2em; text-transform: uppercase;
	opacity: 0; translate: 0 10px; transition: opacity .4s, translate .6s var(--ease-out);
}
.room-card:hover .room-card__more, .room-card:focus-visible .room-card__more { opacity: 1; translate: 0 0; }
@media (hover: none) { .room-card__more { opacity: 1; translate: 0 0; } }
.room-card__name { transition: color .3s; }
.room-card:hover .room-card__name { color: var(--gold-deep); }
.room-card__body { display: grid; gap: 4px; }
.room-card__name { font: 400 24px/1.3 var(--f-display); }
.room-card__meta { font-size: 14px; color: var(--muted); }
.room-card__price { margin-top: 6px; color: var(--muted); }
.room-card__price strong { color: var(--gold-deep); font: 400 22px/1.2 var(--f-display); }

.room { display: grid; gap: 16px; align-content: start; scroll-margin-top: 110px; }
.room__body { display: grid; gap: 8px; }
.room__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.room__name { font: 400 26px/1.3 var(--f-display); }
.room__price { white-space: nowrap; }
.room__price span { color: var(--muted); font-size: 14px; }
.room__price strong { font: 400 26px/1.2 var(--f-display); color: var(--gold-deep); }
.room__meta { font-size: 14px; color: var(--muted); padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.room { scroll-margin-top: 110px; }
.room__meta { position: relative; }
.room__meta::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease-io); }
.room.is-arrived .room__meta::after { transform: scaleX(1); }
.room.is-arrived .room__name { color: var(--gold-deep); }
.room__name { transition: color .8s; }

.rules { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-bottom: 32px; }
.rule { display: grid; gap: 10px; align-content: start; padding-top: 18px; border-top: 2px solid var(--navy); }
.rule p { color: var(--muted); }
.rule .big { color: var(--ink); }

/* --- sala ------------------------------------------------------------- */
.capacity { display: grid; gap: 18px; margin-top: 12px; }
.capacity__row { display: grid; grid-template-columns: 130px 1fr 70px; gap: 16px; align-items: center; }
.capacity__l { font-weight: 600; }
.capacity__bar { height: 10px; background: var(--sand); border-radius: 99px; overflow: hidden; }
.capacity__bar i { display: block; height: 100%; background: var(--navy); border-radius: 99px; }
.capacity__n { color: var(--gold-deep); font-weight: 500; }
.capacity__n { text-align: right; }
.pill { border: 1px solid var(--line); background: var(--cream); padding: 10px 16px; border-radius: 99px; font-size: 15px; }
.pill { padding: 6px 12px; font-size: 13px; }

.section--tint .form, .section--tint .duo__item--card { background: var(--cream); }

/* --- wyposażenie sali: piktogramy w jednym rzędzie ------------------ */
.equip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.equip__item {
	display: grid; justify-items: center; align-content: start; gap: 14px; text-align: center; padding: 26px 10px 22px;
	background: var(--cream); border: 1px solid var(--line); border-radius: var(--r);
	transition: translate .5s var(--ease-out), border-color .4s, box-shadow .5s var(--ease-out);
}
.equip__item:hover { translate: 0 -5px; border-color: var(--gold); box-shadow: 0 18px 32px -24px rgb(19 32 58 / .55); }
.equip__icon { transition: background .4s, transform .6s var(--ease-out); }
.equip__item:hover .equip__icon { background: var(--navy-2); transform: scale(1.06); }
.equip__icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: var(--champagne); box-shadow: inset 0 0 0 4px var(--navy), inset 0 0 0 5px rgb(226 205 164 / .45); }
.equip__icon .icon { width: 32px; height: 32px; }
.equip__label { font-size: 15px; line-height: 1.35; font-weight: 500; text-wrap: balance; }

/* --- trattoria ------------------------------------------------------- */
.trattoria { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 72px); align-items: center; background: var(--navy); color: var(--cream); border-radius: var(--r); padding: clamp(28px, 5vw, 64px); position: relative; overflow: hidden; }
.trattoria::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgb(226 205 164 / .35); border-radius: 2px; pointer-events: none; }
.trattoria__copy { display: grid; gap: 18px; justify-items: start; min-width: 0; position: relative; }
.trattoria__copy p:not(.eyebrow) { color: var(--on-green-muted); max-width: 52ch; }
.trattoria__name { font: 400 clamp(32px, 4vw, 52px)/1.15 var(--f-display); color: var(--cream); }
.trattoria__host { font-size: 14px; letter-spacing: .06em; }
.trattoria__visual { position: relative; display: grid; place-items: center; min-width: 0; }
.trattoria__visual::before { /* delikatna poświata pod pizzą */
	content: ""; position: absolute; width: 86%; aspect-ratio: 1; border-radius: 50%;
	background: radial-gradient(closest-side, rgb(226 205 164 / .22), transparent 70%);
}
.trattoria__pizza { position: relative; width: min(100%, 460px); height: auto; filter: drop-shadow(0 28px 34px rgb(0 0 0 / .55)); }

/* --- dojazd / kontakt ------------------------------------------------- */
.map { aspect-ratio: 4 / 3; max-width: 100%; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: var(--tint); }
.map--wide { aspect-ratio: 21 / 8; }
.map iframe { width: 100%; height: 100%; border: 0; display: block; }
.routes { display: grid; gap: 22px; margin-bottom: 12px; }
.route p:not(.eyebrow) { color: var(--muted); }

.contact { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.dl { margin: 0; display: grid; gap: 0; }
.dl > div { padding: 18px 0; border-bottom: 1px solid var(--line); display: grid; gap: 4px; }
.dl dt { font: 500 12px/1.4 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.dl dd { margin: 0; font-size: 18px; overflow-wrap: anywhere; }
.contact-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.contact-strip__big { font: 400 clamp(24px, 3vw, 34px)/1.3 var(--f-display); text-decoration: none; overflow-wrap: anywhere; }
.contact-strip__big a { text-decoration: none; }

.form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(22px, 3vw, 40px); display: grid; gap: 20px; min-width: 0; }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field span { font: 500 12px/1.4 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea {
	width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: var(--cream);
	border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; min-height: 48px;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
.hp { position: absolute; left: -9999px; }
.form__guard { display: flex; align-items: center; gap: 10px; margin: -4px 0 0; font-size: 13px; color: var(--muted); }
.form__guard-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); flex: none; transition: background .4s; }
.form__guard[data-state="working"] .form__guard-dot { background: var(--gold); animation: vbc-pulse 1s ease-in-out infinite; }
.form__guard[data-state="ready"] .form__guard-dot { background: #2f8a5b; }
@keyframes vbc-pulse { 50% { opacity: .3; } }
.form__submit:disabled { opacity: .7; cursor: progress; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--muted); cursor: pointer; }
.consent input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--navy); }
.alert { padding: 14px 16px; border-radius: var(--r); font-weight: 500; border: 1px solid var(--line); }
.alert--ok { background: color-mix(in srgb, #2f8a5b 14%, var(--surface)); border-color: #2f8a5b; }
.alert--err { background: color-mix(in srgb, #b9442f 12%, var(--surface)); border-color: #b9442f; }

/* --- nagłówek podstrony ---------------------------------------------- */
.page-head { padding-block: clamp(40px, 6vw, 80px) clamp(32px, 4vw, 48px); }
.page-head__title { font: 400 clamp(42px, 6vw, 80px)/1.12 var(--f-display); }
.page-head__lead { margin-top: 20px; max-width: 60ch; font-size: 19px; color: var(--muted); }
.editor-content { margin-top: 24px; }

/* --- pas CTA i stopka ------------------------------------------------- */
.cta-band { background: var(--navy-2); color: var(--cream); border-top: 1px solid var(--champagne); }
.cta-band__in { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding-block: clamp(40px, 5vw, 64px); flex-wrap: wrap; }
.cta-band .eyebrow { color: var(--champagne); }
.cta-band__title { font: 400 clamp(28px, 3.2vw, 40px)/1.25 var(--f-display); max-width: 22ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; min-width: 0; }
.cta-band .btn--accent { background: var(--gold); color: var(--navy); }
.cta-band .btn--accent:hover { background: var(--gold-hover); }
.cta-band .btn--ghost-light { border-color: var(--cream); color: var(--cream); white-space: normal; overflow-wrap: anywhere; }
.cta-band .btn--ghost-light:hover { background: var(--cream); color: var(--navy); }

.site-foot { background: var(--green); color: var(--on-green-muted); font-size: 15px; }
.site-foot a { color: var(--on-green); text-decoration: none; }
.site-foot a:hover { text-decoration: underline; }
.site-foot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-block: 64px 40px; }
.site-foot__grid > div { display: grid; gap: 12px; align-content: start; min-width: 0; overflow-wrap: anywhere; }
.site-foot__logo { justify-self: start; margin-bottom: 8px; }
.site-foot__logo .logo { width: 230px; height: auto; }
.site-foot a.site-foot__logo:hover { text-decoration: none; }
.site-foot__h { font: 500 12px/1.4 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--champagne); }
.site-foot__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
/* linki do podstron: dwie kolumny po trzy */
.site-foot__list--pages { grid-template-columns: repeat(2, max-content); grid-template-rows: repeat(3, auto); grid-auto-flow: column; column-gap: 44px; }
.site-foot__legal { border-top: 1px solid var(--navy-2); padding-block: 22px 28px; display: grid; gap: 6px; font-size: 13px; }

/* --- responsywność ---------------------------------------------------- */
@media (max-width: 960px) {
	.hero__grid, .split, .duo, .contact { grid-template-columns: 1fr; }
	.split--rev .split__copy { order: 0; }
	.hero__tag { left: 16px; }
	.facts__grid { grid-template-columns: 1fr 1fr; }
	.fact:nth-child(3) { border-left: 0; padding-left: 0; }
	.fact:nth-child(n+3) { border-top: 1px solid var(--line); }
	.rooms { grid-template-columns: 1fr 1fr; }
	.rules { grid-template-columns: 1fr 1fr; }
	.teasers { grid-template-columns: 1fr; }
	.equip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.trattoria { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
	/* gdy zdjęcie nie mieści się obok tekstu (tablet, telefon): tekst leży na zdjęciu tarasu */
	.hero { padding-block: 0; background: var(--navy); }
	.hero .hero__grid { position: relative; display: block; padding-inline: 0; }
	.hero__media { position: absolute; inset: 0; overflow: hidden; }
	.hero__media .ph { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
	.hero__media .ph img { object-position: 30% 30%; }
	.hero__media .ph::after { content: none; }
	.hero__media::after {
		content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
		background: linear-gradient(180deg, rgb(19 32 58 / .1) 0%, rgb(19 32 58 / .4) 35%, rgb(19 32 58 / .88) 68%, var(--navy) 100%);
	}
	.hero__tag { display: none; }
	.hero__copy { position: relative; z-index: 2; padding: clamp(220px, 50vw, 380px) var(--gutter) clamp(40px, 6vw, 64px); color: var(--cream); }
	.hero__copy > * { max-width: 640px; }
	.hero__copy .eyebrow { color: var(--champagne); }
	.hero__title em { color: var(--champagne); }
	.hero__lead { color: rgb(246 241 231 / .88); }
	.hero__copy .btn--navy { background: transparent; border-color: var(--champagne); color: var(--cream); }
}
@media (max-width: 600px) {
	body { font-size: 16px; }
	.brand__full { display: none; }
	.brand .brand__short { display: block; height: 40px; }
	.rooms, .rules, .ticks, .form__grid, .contact-strip, .site-foot__grid { grid-template-columns: 1fr; }
	.capacity__row { grid-template-columns: 1fr auto; }
	.capacity__bar { grid-column: 1 / -1; grid-row: 2; }
	.map--wide { aspect-ratio: 4 / 3; }
	.topbar__right span { display: none; }
	.equip { gap: 10px; }
	.equip__item { padding: 18px 6px 16px; }
	.equip__icon { width: 54px; height: 54px; }
	.equip__label { font-size: 14px; }
}
@media (max-width: 370px) {
	.nav-toggle__label { display: none; }
	.btn { white-space: normal; text-align: center; }
}

/* ======================================================================
   TREŚĆ Z EDYTORA BLOKÓW (Strony → edytuj)
   Bloki mają te same klasy co wbudowany układ; poniżej tylko różnice
   wynikające ze znaczników, jakie tworzy edytor WordPressa.
   ====================================================================== */
/* zerowanie domyślnych odstępów WordPressa (zerowa siła selektora, więc odstępy motywu wygrywają) */
:where(.vbc-content) :where(.wp-block-group, .wp-block-buttons, .wp-block-image, .wp-block-table, .wp-block-list) { margin-block: 0; }

/* zdjęcia */
:where(.vbc-content) figure.wp-block-image { margin: 0; }
.vbc-content .wp-block-image.ph img { height: 100%; max-width: none; }
.vbc-content .wp-block-image.ph > a { display: block; position: absolute; inset: 0; z-index: 1; }
figure.trattoria__pizza { margin: 0; }
.trattoria__pizza img { display: block; width: 100%; height: auto; }

/* przyciski (style do wyboru w edytorze: Złoty, Granatowy, Obrys granatowy, Obrys jasny) */
.vbc-content .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.vbc-content .wp-block-buttons.hero__actions { margin-top: 32px; }
.vbc-content .wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 46px; padding: 0 22px; border-radius: var(--r); box-shadow: none;
	font: 500 14px/1.2 var(--f-body); letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
	border: 1.5px solid transparent; background: var(--navy); color: var(--cream); white-space: nowrap;
	transition: background .35s, color .35s, border-color .35s, transform .35s var(--ease-out), box-shadow .35s;
}
.vbc-content .wp-block-button__link:active { transform: translateY(0) scale(.98); }
.vbc-content .is-style-granat > .wp-block-button__link:hover { background: var(--navy-2); border-color: var(--gold); }
.vbc-content .is-style-zloty > .wp-block-button__link { background: var(--gold); color: var(--navy); }
.vbc-content .is-style-zloty > .wp-block-button__link:hover { background: var(--gold-hover); transform: translateY(-2px); box-shadow: 0 12px 22px -14px rgb(19 32 58 / .6); }
.vbc-content .is-style-obrys > .wp-block-button__link { background: transparent; border-color: var(--navy); color: var(--navy); }
.vbc-content .is-style-obrys > .wp-block-button__link:hover { background: var(--navy); color: var(--cream); }
.vbc-content .is-style-obrys-jasny > .wp-block-button__link { background: transparent; border-color: var(--champagne); color: var(--cream); }
.vbc-content .is-style-obrys-jasny > .wp-block-button__link:hover { background: var(--champagne); color: var(--navy); }
.vbc-content .hero__actions .wp-block-button__link,
.vbc-content .trattoria__copy .wp-block-button__link { min-height: 54px; padding: 0 30px; font-size: 14.5px; }

/* drobne zamienniki znaczników, których edytor nie obsługuje */
.fact__n em { font-style: normal; font-size: 18px; color: var(--muted); }
.room__price em { font-style: normal; color: var(--muted); font-size: 14px; }
.room-card__name a, .teaser__t a { color: inherit; text-decoration: none; }
p.link-arrow a { color: inherit; text-decoration: none; }
.teaser p.link-arrow a::before { content: ""; position: absolute; inset: 0; } /* cały kafelek klikalny */
.hero__tag p { margin: 0; }
.dl .dl__t { font: 500 12px/1.4 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.dl .dl__d { font-size: 18px; overflow-wrap: anywhere; }
.dl .dl__d.contact-strip__big { font: 400 clamp(24px, 3vw, 34px)/1.3 var(--f-display); }
.dl .dl__d a { text-decoration: none; }

/* tabela odległości (Dojazd) */
.vbc-content .wp-block-table.dist { margin: 0; overflow-x: visible; }
.vbc-content .wp-block-table.dist table { width: 100%; border-collapse: collapse; table-layout: auto; }
.vbc-content .wp-block-table.dist td { border: 0; border-bottom: 1px solid var(--line); padding: 14px 0; vertical-align: baseline; }
.vbc-content .wp-block-table.dist td:last-child { text-align: right; white-space: nowrap; padding-left: 16px; color: var(--gold-deep); font-weight: 500; font-variant-numeric: tabular-nums; }

@media (max-width: 960px) {
	.vbc-content .hero__copy .is-style-granat > .wp-block-button__link { background: transparent; border-color: var(--champagne); color: var(--cream); }
}
@media (max-width: 600px) {
	.vbc-content .wp-block-button__link { white-space: normal; text-align: center; }
}

/* ======================================================================
   ANIMACJE (subtelne; wyłączają się, gdy ktoś ma w systemie ograniczony ruch)
   ====================================================================== */

@keyframes vbc-rise { from { opacity: 0; transform: translateY(26px); } }
@keyframes vbc-fade { from { opacity: 0; } }
@keyframes vbc-curtain { from { clip-path: inset(100% 0 0 0); } }
@keyframes vbc-settle { from { scale: 1.05; } }
@keyframes vbc-grow { from { transform: scaleX(0); } }
@keyframes vbc-draw { from { stroke-dashoffset: 1; } }
@keyframes vbc-spin { from { rotate: -18deg; } to { rotate: 18deg; } }
@keyframes vbc-spin-page { from { rotate: 0deg; } to { rotate: 140deg; } }

@media (prefers-reduced-motion: no-preference) {
	/* płynne przejście między podstronami (Chrome, Edge, Safari 18+) */
	@view-transition { navigation: auto; }
	::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; }
	.site-head { view-transition-name: site-head; }

	/* wejście strony: nagłówek podstrony i hero */
	.page-head .wrap > *, .hero__copy > * { animation: vbc-rise 1s var(--ease-out) both; }
	.page-head .wrap > :nth-child(2), .hero__copy > :nth-child(2) { animation-delay: .1s; }
	.page-head .wrap > :nth-child(3), .hero__copy > :nth-child(3) { animation-delay: .2s; }
	.hero__copy > :nth-child(4) { animation-delay: .3s; }
	.hero__media .ph { animation: vbc-curtain 1.3s var(--ease-io) .15s both; }
	.hero__media .ph img { animation: vbc-settle 2s var(--ease-out) .15s both; }
	.hero__tag { animation: vbc-rise .9s var(--ease-out) .95s both; }
	.facts .fact { animation: vbc-fade 1s var(--ease-out) both; }
	.facts .fact:nth-child(1) { animation-delay: .5s; }
	.facts .fact:nth-child(2) { animation-delay: .6s; }
	.facts .fact:nth-child(3) { animation-delay: .7s; }
	.facts .fact:nth-child(4) { animation-delay: .8s; }

	/* elementy pojawiają się przy przewijaniu (bez skryptu; tam, gdzie przeglądarka tego nie obsługuje, wszystko jest po prostu widoczne) */
	@supports (animation-timeline: view()) {
		.section__head, .split__copy, .split__media, .duo__item, .room, .room-card, .teaser, .rule,
		.equip__item, .trattoria, .capacity__row, .dl > div, .route, .form,
		.contact-strip > div, .cta-band__in > *, .note {
			animation: vbc-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 26%;
		}
		/* kolejne kafelki w rzędzie wchodzą odrobinę później */
		.rooms > :nth-child(3n+2), .teasers > :nth-child(2), .rules > :nth-child(2), .duo > :nth-child(2),
		.capacity__row:nth-child(2), .equip > :nth-child(2) { animation-range: entry 5% cover 30%; }
		.rooms > :nth-child(3n+3), .teasers > :nth-child(3), .rules > :nth-child(3),
		.capacity__row:nth-child(3), .equip > :nth-child(3) { animation-range: entry 10% cover 34%; }
		.rules > :nth-child(4), .equip > :nth-child(4) { animation-range: entry 15% cover 38%; }
		.equip > :nth-child(5) { animation-range: entry 20% cover 42%; }
		.equip > :nth-child(6) { animation-range: entry 25% cover 46%; }

		/* zdjęcia delikatnie „osiadają” podczas przewijania */
		.section .ph img { animation: vbc-settle linear both; animation-timeline: view(); animation-range: entry 0% cover 55%; }

		/* paski pojemności sali rosną od lewej */
		.capacity__bar i { transform-origin: left; animation: vbc-grow linear both; animation-timeline: view(); animation-range: entry 40% cover 50%; }

		/* pizza obraca się powoli podczas przewijania */
		.trattoria__pizza { animation: vbc-spin linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
		.trattoria__pizza--scroll { animation: vbc-spin-page linear both; animation-timeline: scroll(root block); animation-range: normal; }

		/* piktogramy rysują się linią */
		.equip__item { view-timeline-name: --equip; }
		.equip__icon .icon * { stroke-dasharray: 1; animation: vbc-draw linear both; animation-timeline: --equip; animation-range: entry 35% cover 55%; }
	}
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}