/* ==========================================================================
   Hotel-Restauracja Dowhań - propozycja nowego serwisu (DEMO)
   Autorski arkusz stylów, bez zależności zewnętrznych.
   ========================================================================== */

/* --- Zmienne ------------------------------------------------------------- */
:root{
	--ink:        #17140f;
	--ink-2:      #443c31;
	--ink-3:      #6f6455;
	--paper:      #fdfbf7;
	--sand:       #f2eade;
	--sand-2:     #e7dbc9;
	--line:       #ddd0ba;
	--brand:      #ab0303;
	--brand-dark: #7d0202;
	--gold:       #a8874e;
	--white:      #fff;

	--radius:     2px;
	--shadow-sm:  0 1px 2px rgba(23,20,15,.06), 0 2px 8px rgba(23,20,15,.05);
	--shadow-md:  0 4px 12px rgba(23,20,15,.08), 0 12px 32px rgba(23,20,15,.08);
	--shadow-lg:  0 8px 24px rgba(23,20,15,.10), 0 24px 60px rgba(23,20,15,.12);

	--serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;
	--sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--wrap:  1240px;
	--head-h: 84px;
}

/* --- Reset --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:110px}
body{
	margin:0; background:var(--paper); color:var(--ink-2);
	font-family:var(--sans); font-size:17px; line-height:1.7;
	-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
	overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--brand); text-decoration:none; transition:color .2s}
a:hover{color:var(--brand-dark)}
button{font:inherit}
:focus-visible{outline:3px solid var(--brand); outline-offset:3px; border-radius:2px}

h1,h2,h3,h4{font-family:var(--serif); color:var(--ink); font-weight:600; line-height:1.15; margin:0 0 .5em; letter-spacing:-.01em}
h1{font-size:clamp(2.4rem,5.2vw,4.1rem); font-weight:500}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem); font-weight:500}
h3{font-size:clamp(1.35rem,2.2vw,1.7rem)}
h4{font-size:1.2rem}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

/* --- Elementy pomocnicze ------------------------------------------------- */
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px}
.wrap--narrow{max-width:860px}
.section{padding:clamp(56px,8vw,110px) 0}
.section--sand{background:var(--sand)}
.section--ink{background:var(--ink); color:#cfc6b7}
.section--ink h2,.section--ink h3,.section--ink h4{color:#fff}
.section--tight{padding-block:clamp(40px,5vw,64px)}

.eyebrow{
	font-size:.74rem; letter-spacing:.22em; text-transform:uppercase;
	color:var(--gold); font-weight:600; margin:0 0 14px; font-family:var(--sans);
}
.section--ink .eyebrow{color:#cfa96a}
.lead{font-size:1.13rem; color:var(--ink-2)}
.center{text-align:center}
.sec-head{max-width:720px; margin:0 auto clamp(36px,5vw,60px)}
.sec-head.center{text-align:center}
.rule{width:56px; height:2px; background:var(--gold); border:0; margin:0 0 22px}
.center .rule,.sec-head.center .rule{margin-inline:auto}

/* --- Przyciski ----------------------------------------------------------- */
.btn{
	display:inline-flex; align-items:center; justify-content:center; gap:9px;
	padding:15px 32px; border:1px solid transparent; border-radius:var(--radius);
	font-family:var(--sans); font-size:.82rem; font-weight:600;
	letter-spacing:.14em; text-transform:uppercase; cursor:pointer;
	transition:background .22s, color .22s, border-color .22s, transform .22s, box-shadow .22s;
	white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--brand); color:#fff; box-shadow:var(--shadow-sm)}
.btn--primary:hover{background:var(--brand-dark); color:#fff; box-shadow:var(--shadow-md)}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn--ghost:hover{background:var(--ink); color:#fff; border-color:var(--ink)}
.btn--light{background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.45); backdrop-filter:blur(4px)}
.btn--light:hover{background:#fff; color:var(--ink); border-color:#fff}
.btn--sm{padding:11px 22px; font-size:.74rem}
.btn--wide{width:100%}

/* --- Nagłówek ------------------------------------------------------------ */
.topbar{
	background:var(--ink); color:#b9ae9c; font-size:.79rem; letter-spacing:.03em;
}
.topbar__in{display:flex; justify-content:space-between; align-items:center; gap:20px; min-height:38px; flex-wrap:wrap}
.topbar a{color:#e3dbcd}
.topbar a:hover{color:#fff}
.topbar__meta{display:flex; gap:22px; align-items:center; flex-wrap:wrap}
.topbar__social{display:flex; gap:14px; align-items:center}

.site-head{
	position:sticky; top:0; z-index:60; background:var(--paper);
	border-bottom:1px solid var(--line); transition:box-shadow .25s, background .25s;
}
.site-head.is-stuck{box-shadow:var(--shadow-md)}
.site-head__in{display:flex; align-items:center; gap:28px; min-height:var(--head-h)}
.brand{display:flex; align-items:center; flex-shrink:0; margin-right:auto}
.brand img{height:52px; width:auto}
.nav{display:flex; align-items:center; gap:4px}
.nav a{
	display:block; padding:10px 15px; color:var(--ink); font-size:.83rem;
	font-weight:500; letter-spacing:.10em; text-transform:uppercase; position:relative;
}
.nav a::after{
	content:""; position:absolute; left:15px; right:15px; bottom:4px; height:1.5px;
	background:var(--brand); transform:scaleX(0); transform-origin:left; transition:transform .25s;
}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--brand)}
.head-cta{display:flex; align-items:center; gap:12px; flex-shrink:0}
.head-tel{
	display:flex; flex-direction:column; line-height:1.2; text-align:right;
	font-family:var(--sans); color:var(--ink);
}
.head-tel small{font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3)}
.head-tel b{font-size:1.02rem; font-weight:600; white-space:nowrap}

.burger{
	display:none; width:46px; height:46px; border:1px solid var(--line); background:transparent;
	border-radius:var(--radius); cursor:pointer; position:relative; flex-shrink:0;
}
.burger span{
	position:absolute; left:12px; right:12px; height:1.5px; background:var(--ink);
	transition:transform .25s, opacity .2s;
}
.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){top:22px}
.burger span:nth-child(3){top:28px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* --- Hero ---------------------------------------------------------------- */
.hero{position:relative; min-height:clamp(520px,78vh,760px); display:flex; align-items:flex-end; overflow:hidden}
.hero__media{position:absolute; inset:0}
.hero__media img{width:100%; height:100%; object-fit:cover; object-position:center 58%}
.hero__media::after{
	content:""; position:absolute; inset:0; z-index:1;
	background:linear-gradient(180deg, rgba(10,8,6,.55) 0%, rgba(10,8,6,.18) 38%, rgba(10,8,6,.82) 100%);
}
.hero__in{position:relative; z-index:2; width:100%; padding-block:clamp(48px,7vw,92px); color:#fff}
.hero h1{color:#fff; max-width:16ch; text-shadow:0 2px 24px rgba(0,0,0,.4)}
.hero__stars{color:#e6c98a; letter-spacing:.4em; font-size:.9rem; margin-bottom:18px}
.hero__sub{font-size:clamp(1rem,1.6vw,1.2rem); color:#efe8dc; max-width:52ch; margin-bottom:32px; text-shadow:0 1px 12px rgba(0,0,0,.45)}
.hero__actions{display:flex; gap:14px; flex-wrap:wrap}
.hero--page{min-height:clamp(300px,40vh,420px); align-items:center}
.hero--page .hero__in{padding-block:clamp(40px,6vw,64px)}
.hero--page h1{max-width:22ch}

/* --- Slider zdjęć w nagłówku strony głównej ------------------------------ */
.hero__slider{background:#0f0c0a}
.hero__slider .hero__slide{
	position:absolute; inset:0; z-index:0; opacity:0;
	transition:opacity 1.1s ease;
}
/* Nowe zdjęcie wchodzi nad poprzednim - inaczej w połowie przenikania
   prześwitywałoby kremowe tło strony. */
.hero__slider .hero__slide.is-active{opacity:1; z-index:1}

.hero__nav{position:absolute; inset:0; z-index:3; pointer-events:none}
.hero__arrow{
	position:absolute; top:50%; transform:translateY(-50%); pointer-events:auto;
	width:48px; height:48px; display:grid; place-items:center; cursor:pointer;
	background:rgba(10,8,6,.32); border:1px solid rgba(255,255,255,.35); color:#fff;
	transition:background .25s, border-color .25s;
}
.hero__arrow:hover{background:rgba(10,8,6,.62); border-color:#fff}
.hero__arrow:focus-visible{outline:2px solid #e6c98a; outline-offset:3px}
.hero__arrow svg{
	width:20px; height:20px; fill:none; stroke:currentColor;
	stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
.hero__arrow--prev{left:clamp(10px,2.4vw,26px)}
.hero__arrow--next{right:clamp(10px,2.4vw,26px)}
/* Poniżej tej szerokości strzałka wchodziłaby na nagłówek - zostają kropki i palec.
   Próg wynika z pomiaru: kolumna tekstu zaczyna się na (szerokość-1240)/2+17 px,
   a strzałka kończy na 74 px, więc odstęp robi się dodatni dopiero od 1400 px. */
@media (max-width:1399px){
	.hero__arrow{display:none}
}

.hero__dots{
	position:absolute; left:0; right:0; bottom:62px; z-index:3;
	display:flex; justify-content:center; gap:10px; pointer-events:auto;
}
/* Miejsce na kropki pod przyciskami - inaczej pasek rezerwacji zjada je razem z dołem hero. */
.hero__slider ~ .hero__in{padding-bottom:calc(clamp(48px,7vw,92px) + 40px)}
.hero__dot{
	position:relative; width:9px; height:9px; padding:0; border-radius:50%; cursor:pointer;
	background:rgba(255,255,255,.4); border:1px solid rgba(255,255,255,.6);
	transition:background .25s, transform .25s, border-color .25s;
}
/* Powiększony obszar dotyku - sama kropka byłaby za mała na telefonie. */
.hero__dot::before{content:""; position:absolute; inset:-9px}
.hero__dot:hover{background:rgba(255,255,255,.75)}
.hero__dot:focus-visible{outline:2px solid #e6c98a; outline-offset:4px}
.hero__dot.is-active{background:#e6c98a; border-color:#e6c98a; transform:scale(1.3)}

@media (max-width:680px){
	.hero__dots{bottom:36px; gap:12px}
}
@media (prefers-reduced-motion: reduce){
	.hero__slider .hero__slide{transition:none}
}

.crumbs{font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.7); margin-bottom:14px}
.crumbs a{color:rgba(255,255,255,.9)}
.crumbs a:hover{color:#fff}
.crumbs span{opacity:.55; padding:0 6px}

/* --- Pasek atutów -------------------------------------------------------- */
.perks{background:var(--ink); color:#ddd3c3; border-top:1px solid rgba(255,255,255,.07)}
.perks__grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:0}
.perk{
	padding:26px 18px; text-align:center; border-right:1px solid rgba(255,255,255,.08);
	display:flex; flex-direction:column; align-items:center; gap:9px;
}
.perk:last-child{border-right:0}
.perk svg{width:26px; height:26px; stroke:#cfa96a; fill:none; stroke-width:1.4}
.perk b{font-size:.85rem; font-weight:600; color:#fff; letter-spacing:.02em}
.perk small{font-size:.76rem; color:#a89c8a; line-height:1.4}

/* --- Widget rezerwacji --------------------------------------------------- */
.resbar{position:relative; z-index:20; margin-top:-46px}
.resbar__box{
	background:#fff; box-shadow:var(--shadow-lg); padding:22px 26px;
	display:grid; grid-template-columns:repeat(4,1fr) auto; gap:16px; align-items:end;
	border-top:3px solid var(--brand);
}
.field{display:flex; flex-direction:column; gap:6px; min-width:0}
.field label{font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); font-weight:600}
.field input,.field select,.field textarea{
	width:100%; padding:12px 13px; border:1px solid var(--line); border-radius:var(--radius);
	background:var(--paper); color:var(--ink); font:inherit; font-size:.95rem; transition:border-color .2s, box-shadow .2s;
}
.field input:focus,.field select:focus,.field textarea:focus{
	outline:0; border-color:var(--brand); box-shadow:0 0 0 3px rgba(171,3,3,.12);
}
.field textarea{resize:vertical; min-height:120px}

/* --- Karty / siatki ------------------------------------------------------ */
.grid{display:grid; gap:28px}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}

.card{
	background:#fff; border:1px solid var(--line); border-radius:var(--radius);
	overflow:hidden; display:flex; flex-direction:column;
	transition:transform .3s, box-shadow .3s; box-shadow:var(--shadow-sm);
}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
.card__media{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--sand-2)}
.card__media img{width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.3,1)}
/* Zdjęcie w karcie bywa odnośnikiem do lightboxa - wrapper musi wypełnić kadr 4:3. */
.card__media a{display:block; width:100%; height:100%}
.card:hover .card__media img{transform:scale(1.05)}
.card__tag{
	position:absolute; top:14px; left:14px; background:rgba(23,20,15,.82); color:#fff;
	font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; padding:6px 12px; font-weight:600;
}
.card__body{padding:24px; display:flex; flex-direction:column; flex:1; gap:12px}
.card__body h3{margin:0}
.card__body p{color:var(--ink-3); font-size:.95rem}
.card__foot{margin-top:auto; padding-top:8px; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap}

.price{font-family:var(--serif); line-height:1.1}
.price b{font-size:1.9rem; color:var(--ink); font-weight:600}
.price small{display:block; font-family:var(--sans); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.price-alt{font-size:.85rem; color:var(--ink-3); border-top:1px dashed var(--line); padding-top:10px; margin-top:2px}

/* Ikonki wyposażenia */
.amen{display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:0}
.amen li{
	display:inline-flex; align-items:center; gap:6px; font-size:.78rem; color:var(--ink-3);
	background:var(--sand); padding:5px 10px; border-radius:999px;
}
.amen svg{width:14px; height:14px; stroke:var(--ink-3); fill:none; stroke-width:1.6}

/* --- Blok dwukolumnowy --------------------------------------------------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center}
.split--rev .split__media{order:2}
.split__media{position:relative}
.split__media img{width:100%; aspect-ratio:4/3; object-fit:cover; box-shadow:var(--shadow-md)}
.split__media a{display:block}
.split__media--stack{padding:0 40px 40px 0}
.split__media--stack .split__img2{
	position:absolute; right:0; bottom:0; width:52%; aspect-ratio:4/3; object-fit:cover;
	border:8px solid var(--paper); box-shadow:var(--shadow-md);
}
.badge-round{
	position:absolute; top:-24px; right:-24px; width:104px; height:104px; border-radius:50%;
	background:var(--brand); color:#fff; display:flex; flex-direction:column; align-items:center;
	justify-content:center; text-align:center; box-shadow:var(--shadow-md); line-height:1.1;
}
.badge-round b{font-family:var(--serif); font-size:1.6rem; display:block}
.badge-round small{font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; opacity:.9}

/* --- Lista faktów -------------------------------------------------------- */
.facts{list-style:none; padding:0; margin:0; display:grid; gap:14px}
.facts li{display:flex; gap:13px; align-items:flex-start; font-size:.97rem}
.facts svg{width:19px; height:19px; stroke:var(--brand); fill:none; stroke-width:1.7; flex-shrink:0; margin-top:3px}

/* --- Statystyki ---------------------------------------------------------- */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:28px; text-align:center}
.stat b{display:block; font-family:var(--serif); font-size:clamp(2.4rem,4.5vw,3.4rem); color:var(--brand); line-height:1}
.stat > span{font-size:.76rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3)}
.section--ink .stat b{color:#cfa96a}
.section--ink .stat > span{color:#a89c8a}

/* --- Galeria ------------------------------------------------------------- */
.gal{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px}
.gal a{display:block; position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--sand-2)}
.gal a.tall{grid-row:span 2; aspect-ratio:auto}
.gal img{width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.gal a:hover img{transform:scale(1.06)}
.gal a::after{
	content:""; position:absolute; inset:0; background:rgba(23,20,15,0); transition:background .3s;
}
.gal a:hover::after{background:rgba(23,20,15,.18)}

.gal-filter{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:32px}
.gal-filter button{
	background:transparent; border:1px solid var(--line); padding:9px 20px; cursor:pointer;
	font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2);
	border-radius:var(--radius); transition:all .2s;
}
.gal-filter button:hover{border-color:var(--ink)}
.gal-filter button[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:#fff}

/* --- Filmy z przyjec ----------------------------------------------------- */
/* Nagrania sa pionowe (telefon), stad proporcja 9:16. Bez sciezki dzwiekowej. */
.vid-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px}
.vid-grid a{
	display:block; position:relative; aspect-ratio:9/16; overflow:hidden;
	background:var(--ink); box-shadow:var(--shadow-sm);
}
.vid-grid img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.vid-grid a:hover img{transform:scale(1.06)}
/* Znak odtwarzania rysowany w calosci stylami - bez dodatkowych plikow. */
.vid-grid a::after{
	content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
	width:0; height:0; border-style:solid; border-width:13px 0 13px 22px;
	border-color:transparent transparent transparent #fff;
	filter:drop-shadow(0 2px 10px rgba(0,0,0,.7)); transition:opacity .2s;
}
.vid-grid a::before{
	content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
	width:62px; height:62px; border-radius:50%; background:rgba(23,20,15,.42);
	border:2px solid rgba(255,255,255,.75); transition:background .2s;
}
.vid-grid a:hover::before{background:rgba(171,3,3,.75)}

/* Lightbox */
.lb{
	position:fixed; inset:0; z-index:200; background:rgba(12,10,8,.94);
	display:none; align-items:center; justify-content:center; padding:40px 20px;
}
.lb.is-open{display:flex}
.lb img{max-width:min(1200px,94vw); max-height:86vh; object-fit:contain; box-shadow:0 20px 80px rgba(0,0,0,.6)}
.lb video{
	height:min(86vh,1080px); width:auto; aspect-ratio:9/16; max-width:94vw;
	background:#000; box-shadow:0 20px 80px rgba(0,0,0,.6);
}
.lb video[hidden],.lb img[hidden]{display:none}
.lb__close,.lb__nav{
	position:absolute; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.25);
	color:#fff; width:52px; height:52px; border-radius:50%; cursor:pointer; font-size:1.5rem;
	display:flex; align-items:center; justify-content:center; transition:background .2s;
}
.lb__close:hover,.lb__nav:hover{background:rgba(255,255,255,.24)}
.lb__close{top:24px; right:24px}
.lb__nav--prev{left:24px; top:50%; transform:translateY(-50%)}
.lb__nav--next{right:24px; top:50%; transform:translateY(-50%)}
.lb__count{position:absolute; bottom:24px; left:50%; transform:translateX(-50%); color:#b9ae9c; font-size:.85rem; letter-spacing:.1em}

/* --- Menu restauracji ---------------------------------------------------- */
.menu-nav{
	display:flex; gap:6px; flex-wrap:wrap; justify-content:center; margin-bottom:44px;
	position:sticky; top:calc(var(--head-h) + 6px); z-index:30;
	background:var(--paper); padding:12px 8px; border-block:1px solid var(--line);
}
.menu-nav a{
	font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2);
	padding:8px 14px; border:1px solid transparent; transition:all .2s;
}
.menu-nav a:hover{border-color:var(--line); color:var(--brand)}

.menu-group{margin-bottom:clamp(40px,5vw,64px)}
.menu-group__head{display:flex; align-items:baseline; gap:16px; margin-bottom:24px}
.menu-group__head h3{margin:0; white-space:nowrap}
.menu-group__head::after{content:""; flex:1; height:1px; background:var(--line)}

.dish{
	display:grid; grid-template-columns:34px 1fr auto; gap:14px; align-items:baseline;
	padding:13px 0; border-bottom:1px dotted var(--line);
}
.dish:last-child{border-bottom:0}
.dish__no{font-family:var(--serif); font-size:1rem; color:var(--gold); font-weight:600}
.dish__name{font-weight:600; color:var(--ink); font-size:1.02rem}
.dish__name em{font-style:italic; font-weight:500}
.dish__desc{display:block; font-weight:400; color:var(--ink-3); font-size:.87rem; margin-top:2px}
.dish__gram{font-weight:400; color:var(--ink-3); font-size:.82rem}
.dish__price{font-family:var(--serif); font-size:1.2rem; font-weight:600; color:var(--brand); white-space:nowrap}

.note{
	background:var(--sand); border-left:3px solid var(--gold); padding:16px 20px;
	font-size:.9rem; color:var(--ink-2);
}

/* --- Opinie -------------------------------------------------------------- */
.quote{
	background:#fff; border:1px solid var(--line); padding:32px 30px; position:relative;
	box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:16px;
}
.quote::before{
	content:"\201D"; position:absolute; top:2px; left:22px; font-family:var(--serif);
	font-size:5rem; color:var(--sand-2); line-height:1; pointer-events:none;
}
.quote p{position:relative; font-family:var(--serif); font-size:1.18rem; color:var(--ink); font-style:italic; line-height:1.5}
.quote cite{font-style:normal; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-top:auto}
.quote .stars{color:var(--gold); letter-spacing:.2em; font-size:.9rem}
.quote--empty{border-style:dashed; background:transparent; box-shadow:none}
.quote--empty p{color:var(--ink-3); font-size:1rem}

.rating-badge{
	display:inline-flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--line);
	padding:14px 22px; box-shadow:var(--shadow-sm);
}
.rating-badge b{font-family:var(--serif); font-size:2.2rem; color:var(--brand); line-height:1}
.rating-badge span{font-size:.82rem; color:var(--ink-3); line-height:1.35}

/* --- Okolica ------------------------------------------------------------- */
.dist{list-style:none; padding:0; margin:0; display:grid; gap:0}
.dist li{
	display:flex; justify-content:space-between; align-items:baseline; gap:20px;
	padding:14px 0; border-bottom:1px solid var(--line);
}
.dist li:last-child{border-bottom:0}
.dist strong{font-weight:600; color:var(--ink); font-size:1rem}
.dist small{display:block; color:var(--ink-3); font-size:.83rem; font-weight:400}
.dist b{font-family:var(--serif); font-size:1.25rem; color:var(--brand); white-space:nowrap}

/* --- CTA ----------------------------------------------------------------- */
.cta{position:relative; overflow:hidden; text-align:center; color:#fff}
.cta__bg{position:absolute; inset:0}
.cta__bg img{width:100%; height:100%; object-fit:cover}
.cta__bg::after{content:""; position:absolute; inset:0; background:rgba(15,12,9,.72)}
.cta__in{position:relative; z-index:2; padding:clamp(64px,9vw,120px) 0}
.cta h2{color:#fff}
.cta p{color:#e3dbcd; max-width:52ch; margin-inline:auto}
.cta__logo{height:66px; width:auto; margin:0 auto 24px; filter:drop-shadow(0 2px 12px rgba(0,0,0,.5))}

/* --- Kontakt / mapa ------------------------------------------------------ */
.map-frame{
	width:100%; aspect-ratio:16/10; border:1px solid var(--line); background:var(--sand-2);
	display:flex; align-items:center; justify-content:center; text-align:center; padding:24px; color:var(--ink-3);
	box-shadow:var(--shadow-sm);
}
/* Na /kontakt mapa dostaje szerszą kolumnę i wysokość całego wiersza, czyli tyle,
   ile zajmuje lewa lista z danymi. Stąd rezygnacja z proporcji 16/10 - wysokość
   bierze się ze stretcha siatki, a nie z szerokości. */
.split--map{grid-template-columns:minmax(340px,.85fr) minmax(0,1.15fr); gap:clamp(28px,3.6vw,52px); align-items:stretch}
.split--map > *{min-width:0}
.split__map{display:flex; flex-direction:column}
.split__map .map-frame{flex:1 1 auto; aspect-ratio:auto; min-height:420px}
.split__map .map-frame iframe{align-self:stretch; flex:1 1 auto}
.contact-list{list-style:none; padding:0; margin:0; display:grid; gap:22px}
.contact-list li{display:flex; gap:16px; align-items:flex-start}
.contact-list svg{width:22px; height:22px; stroke:var(--brand); fill:none; stroke-width:1.6; flex-shrink:0; margin-top:4px}
.contact-list b{display:block; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); font-weight:600; margin-bottom:2px}
.contact-list a,.contact-list span{font-size:1.05rem; color:var(--ink)}
.contact-list a:hover{color:var(--brand)}

/* --- FAQ ----------------------------------------------------------------- */
.faq details{border-bottom:1px solid var(--line); padding:4px 0}
.faq summary{
	cursor:pointer; list-style:none; padding:18px 40px 18px 0; position:relative;
	font-family:var(--serif); font-size:1.2rem; color:var(--ink); font-weight:600;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
	content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%);
	font-family:var(--sans); font-size:1.5rem; color:var(--brand); font-weight:300; transition:transform .25s;
}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq details > div{padding:0 0 20px; color:var(--ink-3); font-size:.97rem}

/* --- Stopka -------------------------------------------------------------- */
.site-foot{background:var(--ink); color:#a89c8a; padding:clamp(48px,6vw,80px) 0 0; font-size:.92rem}
.site-foot h4{color:#fff; font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; font-family:var(--sans); font-weight:600; margin-bottom:20px}
.site-foot a{color:#ddd3c3}
.site-foot a:hover{color:#fff}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:44px}
.foot-grid ul{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.foot-logo{height:58px; width:auto; margin-bottom:20px}
.foot-social{display:flex; gap:12px; margin-top:18px}
.foot-social a{
	width:42px; height:42px; border:1px solid rgba(255,255,255,.2); border-radius:50%;
	display:flex; align-items:center; justify-content:center; transition:all .2s;
}
.foot-social a:hover{background:#fff; border-color:#fff}
.foot-social svg{width:17px; height:17px; fill:currentColor}
.foot-social a:hover svg{fill:var(--ink)}
.foot-bottom{
	margin-top:clamp(40px,5vw,64px); border-top:1px solid rgba(255,255,255,.12);
	padding:22px 0; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
	font-size:.82rem; color:#8b8073;
}

/* --- Pasek mobilny ------------------------------------------------------- */
.mobar{
	position:fixed; left:0; right:0; bottom:0; z-index:70; display:none;
	background:var(--ink); border-top:1px solid rgba(255,255,255,.12);
	box-shadow:0 -4px 20px rgba(0,0,0,.2);
}
.mobar a{
	flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; padding:11px 4px 12px;
	color:#ddd3c3; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600;
}
.mobar a + a{border-left:1px solid rgba(255,255,255,.12)}
.mobar a.is-primary{background:var(--brand); color:#fff}
.mobar svg{width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.7}

/* --- Baner demo ---------------------------------------------------------- */
.demobar{
	background:#1d3557; color:#dbe4f0; font-size:.8rem; padding:9px 0; text-align:center;
	letter-spacing:.03em;
}
.demobar a{color:#fff; text-decoration:underline; text-underline-offset:3px}
.demobar strong{color:#fff}

/* --- Animacje ------------------------------------------------------------ */
/* Ukrywamy tylko wtedy, gdy JavaScript działa - inaczej treść zawsze jest widoczna. */
.js .reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1)}
.js .reveal.is-in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
	*{animation:none !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
	.js .reveal{opacity:1; transform:none}
}

/* --- Responsywność ------------------------------------------------------- */
@media (max-width:1080px){
	.foot-grid{grid-template-columns:1fr 1fr; gap:36px}
	.resbar__box{grid-template-columns:1fr 1fr; gap:14px}
	.resbar__box .btn{grid-column:1/-1}
}
@media (max-width:980px){
	:root{--head-h:70px}
	.burger{display:block}
	.head-tel{display:none}
	.nav{
		position:fixed; inset:var(--head-h) 0 0 auto; width:min(340px,84vw);
		background:var(--paper); border-left:1px solid var(--line); flex-direction:column;
		align-items:stretch; gap:0; padding:18px; overflow-y:auto;
		transform:translateX(102%); transition:transform .32s cubic-bezier(.2,.7,.3,1);
		box-shadow:var(--shadow-lg); z-index:59;
	}
	.nav.is-open{transform:none}
	.nav a{padding:15px 12px; font-size:.95rem; border-bottom:1px solid var(--line); letter-spacing:.06em}
	.nav a::after{display:none}
	.head-cta .btn{display:none}
	.split{grid-template-columns:1fr}
	.split--map{grid-template-columns:1fr; gap:clamp(32px,5vw,72px)}
	.split__map .map-frame{flex:0 0 auto; aspect-ratio:16/10; min-height:0}
	.split--rev .split__media{order:0}
	.split__media--stack{padding:0}
	.split__media--stack .split__img2{display:none}
	.badge-round{width:86px; height:86px; top:-14px; right:-8px}
	.mobar{display:flex}
	body{padding-bottom:68px}
	.menu-nav{top:calc(var(--head-h) + 2px)}
}
@media (max-width:680px){
	body{font-size:16px}
	/* Mocniejsze przyciemnienie - na wąskim ekranie tekst wchodzi na jasną część zdjęcia. */
	.hero__media::after{
		background:linear-gradient(180deg, rgba(10,8,6,.58) 0%, rgba(10,8,6,.48) 35%, rgba(10,8,6,.86) 100%);
	}
	.topbar__meta .hide-sm{display:none}
	.resbar{margin-top:-20px}
	.resbar__box{grid-template-columns:1fr; padding:20px}
	.perk{border-right:0; border-bottom:1px solid rgba(255,255,255,.08)}
	.foot-grid{grid-template-columns:1fr; gap:32px}
	.gal{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px}
	.gal a.tall{grid-row:auto; aspect-ratio:4/3}
	.dish{grid-template-columns:28px 1fr auto; gap:10px}
	.lb__nav{width:44px; height:44px}
	.lb__nav--prev{left:8px}
	.lb__nav--next{right:8px}
}

/* --- Wydruk -------------------------------------------------------------- */
@media print{
	.site-head,.topbar,.mobar,.demobar,.site-foot,.hero__actions,.resbar,.menu-nav,
	.cookie,.skip,.lang{display:none !important}
	body{background:#fff; font-size:11pt}
	.section{padding:12px 0}
}

/* ==========================================================================
   Elementy dodane przy wdrożeniu rekomendacji
   ========================================================================== */

/* --- Odnośnik pomijający nawigację (dostępność) -------------------------- */
.skip{
	position:absolute; left:-9999px; top:0; z-index:300;
	background:var(--brand); color:#fff; padding:14px 24px; font-size:.86rem;
	font-weight:600; letter-spacing:.08em;
}
.skip:focus{left:0; color:#fff}

/* --- Przełącznik języka -------------------------------------------------- */
.lang{display:flex; align-items:center; gap:2px}
.lang a{
	padding:3px 8px; font-size:.74rem; letter-spacing:.1em; font-weight:600;
	color:#a89c8a; border-radius:2px;
}
.lang a:hover{color:#fff}
.lang a[aria-current="true"]{background:rgba(255,255,255,.14); color:#fff}
.lang span{color:#5c5348; font-size:.7rem}

/* --- Blok rezerwacji bezpośredniej --------------------------------------- */
.book{
	background:#fff; border:1px solid var(--line); border-top:3px solid var(--brand);
	box-shadow:var(--shadow-lg); padding:clamp(26px,4vw,44px);
	display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(26px,4vw,48px);
}
.book__main{display:flex; flex-direction:column; gap:18px}
.book__tel{
	display:inline-flex; align-items:center; gap:16px; text-decoration:none;
	padding:18px 24px; background:var(--brand); color:#fff; box-shadow:var(--shadow-sm);
	transition:background .2s, transform .2s, box-shadow .2s;
}
.book__tel:hover{background:var(--brand-dark); color:#fff; transform:translateY(-2px); box-shadow:var(--shadow-md)}
.book__tel svg{width:32px; height:32px; stroke:currentColor; fill:none; stroke-width:1.5; flex-shrink:0}
.book__tel small{display:block; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; opacity:.85}
.book__tel b{display:block; font-family:var(--serif); font-size:clamp(1.7rem,3.4vw,2.3rem); font-weight:600; line-height:1.1; white-space:nowrap}
.book__alt{display:flex; flex-direction:column; gap:12px}
.book__hours{
	display:flex; align-items:center; gap:10px; font-size:.9rem; color:var(--ink-3);
	padding-top:4px;
}
.book__hours svg{width:17px; height:17px; stroke:var(--brand); fill:none; stroke-width:1.7; flex-shrink:0}
/* Adres do przepisania - u części Gości mailto: nie otwiera niczego. */
.mail-fallback{
	font-size:.86rem; color:var(--ink-3); margin:0;
	padding-top:10px; border-top:1px dashed var(--line);
}
.mail-fallback a{color:var(--ink); border-bottom:1px solid var(--line)}
.mail-fallback a:hover{color:var(--brand); border-color:var(--brand)}
.book__side{border-left:1px solid var(--line); padding-left:clamp(22px,3vw,40px)}
.book__side h4{margin:0 0 14px}
.book__list{list-style:none; padding:0; margin:0 0 22px; display:grid; gap:11px}
.book__list li{display:flex; gap:11px; align-items:flex-start; font-size:.93rem; color:var(--ink-3)}
.book__list svg{width:17px; height:17px; stroke:var(--brand); fill:none; stroke-width:1.8; flex-shrink:0; margin-top:4px}
.book--tight{box-shadow:var(--shadow-md)}

/* --- Aktualności --------------------------------------------------------- */
.news{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:26px}
.news__item{
	background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm);
	display:flex; flex-direction:column; overflow:hidden;
	transition:transform .3s, box-shadow .3s;
}
.news__item:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
.news__media{aspect-ratio:16/10; overflow:hidden; background:var(--sand-2)}
.news__media img{width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.news__item:hover .news__media img{transform:scale(1.05)}
.news__body{padding:22px 24px 26px; display:flex; flex-direction:column; gap:10px; flex:1}
.news__date{
	font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); font-weight:600;
}
.news__body h3{margin:0; font-size:1.28rem}
.news__body p{font-size:.93rem; color:var(--ink-3); margin:0}
.news__tag{
	align-self:flex-start; margin-top:auto; padding-top:12px; font-size:.74rem;
	letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--brand);
}

/* --- Baner zgody na cookies ---------------------------------------------- */
.cookie{
	position:fixed; left:0; right:0; bottom:0; z-index:150; background:var(--ink);
	color:#cfc6b7; border-top:2px solid var(--brand); box-shadow:0 -8px 40px rgba(0,0,0,.35);
	transform:translateY(110%); transition:transform .4s cubic-bezier(.2,.7,.3,1);
	max-height:100vh; overflow-y:auto;
}
.cookie.is-open{transform:none}
.cookie__in{display:flex; gap:clamp(20px,3vw,44px); align-items:flex-start; padding:24px 0; flex-wrap:wrap}
.cookie__txt{flex:1 1 380px; font-size:.9rem; line-height:1.6}
.cookie__txt b{color:#fff; display:block; margin-bottom:6px; font-size:1rem}
.cookie__txt a{color:#e3dbcd; text-decoration:underline; text-underline-offset:3px}
.cookie__btns{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.cookie__btns .btn{padding:13px 24px}
.cookie__link{
	background:none; border:0; color:#a89c8a; font-size:.78rem; letter-spacing:.1em;
	text-transform:uppercase; font-weight:600; cursor:pointer; padding:13px 6px; text-decoration:underline;
	text-underline-offset:3px;
}
.cookie__link:hover{color:#fff}
.cookie__prefs{
	flex:1 1 100%; border-top:1px solid rgba(255,255,255,.14); margin-top:6px; padding-top:20px;
	display:grid; gap:14px;
}
.cookie__prefs[hidden]{display:none}
.cookie__row{display:flex; gap:14px; align-items:flex-start; font-size:.88rem}
.cookie__row input{width:19px; height:19px; margin-top:3px; flex-shrink:0; accent-color:var(--brand)}
.cookie__row b{color:#fff; display:block}
.cookie__row small{color:#8b8073}

/* --- Osadzenia zewnętrzne za zgodą --------------------------------------- */
.embed-lock{
	display:flex; flex-direction:column; align-items:center; justify-content:center;
	text-align:center; gap:14px; padding:28px; background:var(--sand-2); color:var(--ink-3);
	min-height:220px;
}
.embed-lock svg{width:34px; height:34px; stroke:var(--brand); fill:none; stroke-width:1.4}

/* --- Karta językowa (podstrony DE/EN) ------------------------------------ */
.card-lang{
	background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm);
	padding:clamp(22px,3vw,34px); display:grid; gap:12px;
}
.card-lang h3{margin:0}
.price-table{width:100%; border-collapse:collapse; font-size:.96rem}
.price-table th,.price-table td{text-align:left; padding:12px 10px; border-bottom:1px solid var(--line)}
.price-table th{font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:600}
.price-table td:last-child,.price-table th:last-child{text-align:right; white-space:nowrap}
.price-table b{font-family:var(--serif); font-size:1.1rem; color:var(--brand)}

@media (max-width:900px){
	.book{grid-template-columns:1fr; gap:26px}
	.book__side{border-left:0; border-top:1px solid var(--line); padding-left:0; padding-top:26px}
}
@media (max-width:980px){
	.cookie{bottom:68px}
}
@media (max-width:680px){
	.cookie__btns{width:100%; flex-direction:column; align-items:stretch}
	.cookie__btns .btn{width:100%}
	.cookie__link{align-self:center; padding:10px 6px}
	.book__tel{padding:16px 18px; gap:12px}
}