/* ==========================================================================
   SwiftFrame Podroom Grill — theme CSS
   Ivan's static design (../podroom-grill/assets/css/style.css, 2026-10-30),
   adapted for WordPress: tokens resolve through the Global Settings palette
   (--sf-color-*), boxed blocks use `.sf-inner` (the section layout contract)
   instead of `.wrap` + `.section`, text fields render as <div><p>…, and the
   WordPress-only parts are at the end (footer bridge, Contact Form 7, admin
   bar, solid header, 404). Keep the rule order of the design when syncing
   changes from the static build. Behaviour: assets/js/main.js.
   Tokens: gold #e3b062 · gold-deep #b07d2c · ink #1c1c1c · black #111 ·
   charcoal #1b1b1b · text #5b534c. Everything in Raleway (self-hosted).
   ========================================================================== */

:root {
  --gold: var(--sf-color-gold, #e3b062);
  --gold-deep: var(--sf-color-gold-deep, #b07d2c);
  --ink: var(--sf-color-ink, #1c1c1c);   /* headings and dark accents: near-black, not brown (owner, 2026-10-30) */
  --black: var(--sf-color-black, #111111);     /* near-black (was umber #231812) */
  --charcoal: var(--sf-color-charcoal, #1b1b1b);  /* very dark grey (was #2e2119) */
  --text: var(--sf-color-text, #5b534c);
  --muted: var(--sf-color-muted, #8b817a);
  --line: var(--sf-color-line, #ebe5de);
  --paper: var(--sf-color-white, #ffffff);
  --soft: var(--sf-color-soft, #f8f4ee);
  --font-display: "Raleway", system-ui, sans-serif;
  --font-body: "Raleway", system-ui, sans-serif;
  --wrap: 1170px;
  --gutter: clamp(20px, 5vw, 48px);
  --section: clamp(72px, 9vw, 120px);
  --notch: 60px;
  --vh: 1vh;   /* corrected for the large-screen zoom below */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-body); font-size: 15px; line-height: 1.75; color: var(--text); background: var(--paper); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease; }   /* every link hover eases */
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, dl, figure, blockquote { margin: 0; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; color: var(--ink); line-height: 1.15; letter-spacing: -0.01em; }
h2 { font-size: clamp(28px, 3.4vw, 42px); }
h3 { font-size: 20px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.section { padding: var(--section) 0; }
.center { text-align: center; }

/* ── Type helpers ── */
.eyebrow { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 17px; line-height: 1.3; color: var(--gold-deep); margin-bottom: 10px; }
.eyebrow--light, .section-head--light .eyebrow, .page-hero .eyebrow { color: var(--gold); }
.section-head { text-align: center; max-width: 720px; margin: 0 auto clamp(36px, 5vw, 56px); }
.section-head-text { margin-top: 18px; color: var(--muted); font-size: 16px; }
.section-head--light h2 { color: #fff; }
.section-head--light .section-head-text { color: rgba(255, 255, 255, 0.78); }
.ornament { display: block; width: 48px; height: 1px; margin: 20px auto 0; background: var(--gold); }   /* thin rule under section titles (replaced the bow-tie glyph 2026-10-30) */
.ornament--small { width: 14px; height: 14px; margin: 14px auto; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 0l1.6 3.2L12 2l-1.2 3.4L14 7l-3.2 1.6L12 12l-3.4-1.2L7 14l-1.6-3.2L2 12l1.2-3.4L0 7l3.2-1.6L2 2l3.4 1.2z' fill='%23e3b062'/%3E%3C/svg%3E") center / contain no-repeat; }
.ornament--left { margin-left: 0; }

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 30px; font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid transparent; cursor: pointer; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.15s ease; }   /* text switches faster than the fill so the two never meet mid-tone */
.btn-sm { min-height: 38px; padding: 0 16px; font-size: 12px; }
.btn-gold { background: var(--gold); border-color: var(--gold); color: var(--black); }
.btn-gold:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: #fff; }
.btn-outline { background: transparent; border-color: var(--gold); color: var(--gold); }
.btn-outline:hover { background: var(--gold); color: var(--black); }
.btn-ghost { background: transparent; border-color: rgba(255, 255, 255, 0.7); color: #fff; }
.btn-ghost:hover { background: #fff; color: var(--ink); }
.btn-dark { background: var(--black); border-color: var(--black); color: #fff; }
.btn-dark:hover { background: var(--gold); border-color: var(--gold); color: var(--black); }
.link-gold { display: inline-block; margin-top: 14px; font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-deep); }
.link-gold:hover { color: var(--ink); }
.band .link-gold { color: var(--gold); }
.band .link-gold:hover { color: #fff; }

/* ── Header ── */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 40; background: transparent; border-bottom: 1px solid rgba(255, 255, 255, 0.14); color: #fff; transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.site-header.is-hidden { transform: translateY(-100%); }
/* once scrolled (and back on screen after a scroll up) the bar is white with a soft shadow; logo and text flip to dark */
.site-header.is-scrolled { background: #fff; color: var(--ink); border-bottom-color: transparent; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); }
.site-header.is-scrolled .brand-logo { height: 50px; }
.brand-logo--dark { display: none; }
.site-header.is-scrolled .brand-logo:not(.brand-logo--dark) { display: none; }
.site-header.is-scrolled .brand-logo--dark { display: block; }
.site-header.is-scrolled .site-nav a { color: var(--ink); }
.site-header.is-scrolled .header-cta { border-color: var(--ink); color: var(--ink); }
.site-header.is-scrolled .header-cta:hover { background: var(--ink); color: #fff; }
.site-header.is-scrolled .nav-toggle span, .site-header.is-scrolled .nav-toggle span::before, .site-header.is-scrolled .nav-toggle span::after { background: var(--ink); }
.site-header.is-scrolled.nav-open .nav-toggle span { background: transparent; }
.topbar { height: 38px; overflow: hidden; border-bottom: 1px solid rgba(255, 255, 255, 0.12); font-size: 12px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.8); transition: height 0.3s ease, opacity 0.3s ease; }
.topbar-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 38px; white-space: nowrap; }
.topbar-group { display: flex; align-items: center; gap: 22px; min-width: 0; }
.topbar a { color: #fff; transition: color 0.2s ease; }
.topbar a:hover { color: var(--gold); }
.topbar .sep { color: var(--gold); }
.site-header.is-scrolled .topbar { height: 0; opacity: 0; border-bottom-color: transparent; }
.header-in { display: flex; align-items: center; gap: 28px; min-height: 86px; }
.brand { display: flex; align-items: center; flex-shrink: 0; margin-right: auto; }
.brand-logo { height: 64px; width: auto; transition: height 0.3s ease; }
.site-nav { display: flex; gap: 28px; font-weight: 400; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.site-nav a { position: relative; padding: 6px 0; color: #fff; }
.site-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1px; background: var(--gold); transition: right 0.2s ease; }
.site-nav a:hover::after, .site-nav a.is-active::after { right: 0; }
.header-cta { border-color: rgba(255, 255, 255, 0.85); color: #fff; font-weight: 500; }
.header-cta:hover { background: #fff; color: var(--ink); }
.nav-toggle { display: none; width: 44px; height: 44px; border: 0; background: none; padding: 0; place-items: center; cursor: pointer; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { display: block; width: 24px; height: 2px; background: #fff; position: relative; transition: transform 0.2s ease; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
.nav-open .nav-toggle span { background: transparent; }
.nav-open .nav-toggle span::before { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle span::after { transform: translateY(-7px) rotate(-45deg); }

/* ── Hero: three interior photos crossfade (Ken Burns) under one static content layer ── */
.hero { position: relative; display: grid; min-height: calc(100 * var(--vh)); background: var(--black); color: #fff; overflow: hidden; isolation: isolate; }
.slides { grid-area: 1 / 1; position: relative; display: grid; will-change: transform; }
.slide { grid-area: 1 / 1; position: relative; opacity: 0; transition: opacity 1.1s ease; overflow: hidden; }
.slide::after { content: ""; position: absolute; inset: -4%; z-index: 0; background: var(--img) center / cover no-repeat; transform: scale(1); }
.slide::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(14, 14, 14, 0.62) 0%, rgba(14, 14, 14, 0.5) 50%, rgba(14, 14, 14, 0.8) 100%); }
.slide.is-active { opacity: 1; }
.slide::after { animation: kenburns 18s ease-in-out infinite alternate; }   /* runs on all slides, so nothing snaps back during the crossfade */
.slide:nth-child(3n+2)::after { animation-name: kenburns-2; }
.slide:nth-child(3n)::after { animation-name: kenburns-3; }
@keyframes kenburns   { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.1) translate(-1.5%, -1%); } }
@keyframes kenburns-2 { from { transform: scale(1.1) translate(1.5%, 0); } to { transform: scale(1) translate(0, 0); } }
@keyframes kenburns-3 { from { transform: scale(1) translate(0, 1%); } to { transform: scale(1.1) translate(1%, -1%); } }
.hero-in { grid-area: 1 / 1; position: relative; z-index: 2; align-self: center; text-align: center; padding: 140px 0 120px; }
.hero-mark { display: grid; justify-items: center; gap: 0; margin: 0 auto; font-family: var(--font-display); font-weight: 700; font-size: clamp(42px, 6.8vw, 88px); line-height: 1.06; letter-spacing: -0.02em; color: #fff; text-shadow: 0 8px 28px rgba(0, 0, 0, 0.5); }
.hero-mark-small, .hero-mark-big { display: block; padding: 0.02em 0.1em; opacity: 0; transform: translateY(14px); }
.hero-mark-small { font-style: italic; font-weight: 400; font-size: 0.5em; letter-spacing: 0; }
.hero-mark-small { transition: opacity 1.1s ease 0.3s, transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s; }
.hero-mark-big { transition: opacity 1.1s ease 0.55s, transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.55s; }
.hero-line { margin: 22px auto 0; max-width: 44ch; font-family: var(--font-body); font-weight: 400; font-size: clamp(14px, 1.2vw, 17px); letter-spacing: 0.03em; line-height: 1.6; color: rgba(255, 255, 255, 0.85); text-wrap: balance; opacity: 0; transform: translateY(10px); transition: opacity 1s ease 1.1s, transform 1s ease 1.1s; }
.hero .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 34px; opacity: 0; transition: opacity 1s ease 1.5s; }
.hero.is-in .hero-mark-small, .hero.is-in .hero-mark-big, .hero.is-in .hero-line, .hero.is-in .actions { opacity: 1; transform: none; }
.scroll-cue { position: absolute; left: 50%; bottom: 70px; z-index: 3; width: 26px; height: 42px; margin-left: -13px; border: 2px solid rgba(255, 255, 255, 0.6); border-radius: 14px; opacity: 0; transition: opacity 1s ease 2s; }
.scroll-cue span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--gold); animation: cue 3s ease-in-out infinite; }
.hero.is-in .scroll-cue { opacity: 1; }
@keyframes cue { 0%, 100% { transform: translateY(0); opacity: 1; } 60% { transform: translateY(14px); opacity: 0; } }

/* ── Welcome features ── */
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; text-align: center; }
.feature-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.feature img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; margin-bottom: 22px; }
.feature h3 { font-size: 18px; margin-bottom: 8px; }
.feature p:last-child { color: var(--muted); font-size: 14px; }

/* ── Story: photo(s) beside text ── */
.story { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.story-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.story-photo--double { display: grid; gap: 14px; }
.story-photo--double img:last-child { aspect-ratio: 16 / 10; }
.story-text h2 { margin-bottom: 16px; }
.story-text p + p, .story-text p + ul, .story-text ul + p { margin-top: 14px; }
.story-text .btn { margin-top: 24px; }
.story-lead { font-size: 17px; color: var(--ink); font-weight: 500; }
.story + .story { margin-top: clamp(56px, 8vw, 110px); }
.story--flip .story-photo { order: 2; }
.section--story { padding-top: 0; }
.check-list { display: grid; gap: 10px; margin: 22px 0; }
.check-list li { position: relative; padding-left: 26px; color: var(--ink); font-weight: 600; }
.check-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 11px; height: 11px; background: var(--gold); }
.band .check-list li { color: #fff; }
.check-list--center { max-width: 420px; margin-inline: auto; }

/* ── Dark photo bands with notch ── */
.band { position: relative; padding: calc(var(--section) + 20px) 0 var(--section); color: #fff; background: var(--black) var(--img) center / cover fixed no-repeat; }
.band::after { content: ""; position: absolute; inset: 0; background: rgba(14, 14, 14, 0.8); }
.band > .wrap { position: relative; z-index: 1; }
.band--specials { --img: url("../img/hall.webp"); }
.band--terasa { --img: url("../img/terrace-square.webp"); }
.band--posao { --img: url("../img/window.webp"); }
.band::before { content: ""; position: absolute; left: 50%; top: -1px; width: var(--notch); height: calc(var(--notch) / 2); transform: translateX(-50%); background: var(--paper); border-radius: 0 0 var(--notch) var(--notch); z-index: 2; }
.band + section { position: relative; }
.band + section::before { content: ""; position: absolute; left: 50%; top: -1px; width: var(--notch); height: calc(var(--notch) / 2); transform: translateX(-50%); background: var(--black); border-radius: 0 0 var(--notch) var(--notch); opacity: 0.86; }
.band .center { margin-top: 44px; }
.band-note { max-width: 720px; margin: 40px auto 0; text-align: center; color: rgba(255, 255, 255, 0.72); }
.band .prose { color: rgba(255, 255, 255, 0.84); }

/* ── Specials card on the band ── */
.card { background: var(--paper); color: var(--text); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); }
.specials-card { max-width: 1000px; margin: 0 auto; padding: clamp(36px, 5vw, 64px) clamp(24px, 5vw, 80px); text-align: center; }
.menu-list--card { text-align: left; }
.card-note { margin-top: 28px; color: var(--muted); font-size: 14px; }

/* ── Info strip (hours, delivery, menu) ── */
.info-strip { background: var(--soft); }
.info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; text-align: center; }
.info-grid h3 { font-size: 20px; margin-bottom: 8px; }
.info-grid p { color: var(--text); }
.info-grid .ornament--small { margin-top: 0; }

/* ── Menu lists: name + description left, price (and reference price) right ── */
.menu-list { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 40px; }
.menu-list li { display: grid; grid-template-columns: 1fr auto; gap: 2px 18px; align-items: baseline; align-content: start; padding-bottom: 12px; border-bottom: 1px dashed var(--line); }
.menu-list h3 { font-size: 16px; letter-spacing: 0.01em; }
.menu-list p { grid-column: 1; color: var(--muted); font-size: 14px; }
.menu-list .price { grid-column: 2; grid-row: 1; font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--gold-deep); text-align: right; white-space: nowrap; line-height: 1.3; }
.menu-list .price-ref { grid-column: 2; grid-row: 2; font-size: 11px; color: var(--muted); text-align: right; white-space: nowrap; line-height: 1.4; }
/* several prices (Velika / Jumbo): columns with a hairline between them, right-aligned as a group (2026-11-05) */
.menu-list .price, .menu-list .price-ref { display: flex; justify-content: flex-end; flex-wrap: wrap; column-gap: 0; }
.menu-list .price--cols > span:not(.price-ref-label) + span { border-left: 1px solid var(--line); margin-left: 12px; padding-left: 12px; }   /* no line right after the date label */
.menu-list .price-ref .price-ref-label { margin-right: 4px; }
.menu-sub { grid-column: 1 / -1; font-size: 18px; color: var(--ink); margin-top: 10px; }
.menu-legend { text-align: center; font-size: 13px; color: var(--muted); margin: -24px 0 36px; }

/* ── Ponuda page: jump links, photo groups, packed columns ── */
.jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; margin: -10px 0 clamp(40px, 6vw, 72px); }
.jump a { padding: 8px 16px; border: 1px solid var(--line); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.jump a:hover { background: var(--black); border-color: var(--black); color: #fff; }
.menu-block + .menu-block { margin-top: clamp(56px, 8vw, 100px); padding-top: clamp(56px, 8vw, 100px); border-top: 1px solid var(--line); }
.menu-group { display: grid; grid-template-columns: 3fr 8fr; gap: clamp(28px, 5vw, 64px); align-items: start; scroll-margin-top: 100px; }
.menu-group--flip { grid-template-columns: 8fr 3fr; }
.menu-group--flip .menu-group-photo { order: 2; }
.menu-group-photo { position: sticky; top: 110px; }
.menu-group-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.menu-group-list h2 { font-size: clamp(24px, 2.6vw, 32px); }
.menu-group-list .ornament { margin: 14px 0 26px; }
.menu-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 64px; }
.menu-cols > section { scroll-margin-top: 100px; }
.menu-cols > section:only-child { grid-column: 1 / -1; }
.menu-cols h2 { font-size: 24px; }
.menu-cols .ornament { margin: 12px 0 20px; }
.menu-cols .menu-list { grid-template-columns: 1fr; gap: 14px; }
.menu-group-list .menu-list { grid-template-columns: 1fr; }

/* ── Gallery ── */
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.gallery-grid figure { overflow: hidden; aspect-ratio: 3 / 2; }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.gallery-grid figure:hover img { transform: scale(1.04); }
.gallery .center { margin-top: 40px; }
.gallery-grid--page { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }

/* ── Subpage hero ── */
.page-hero { position: relative; display: grid; align-items: center; min-height: min(62vh, 560px); padding: 150px 0 64px; color: #fff; background-color: var(--black); background-size: cover; background-position: center; background-repeat: no-repeat; }
.page-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 14, 14, 0.8) 0%, rgba(14, 14, 14, 0.66) 55%, rgba(14, 14, 14, 0.9) 100%); }   /* 2026-11-05: darker for readability */
.page-hero-in { position: relative; z-index: 1; text-align: center; max-width: 760px; margin: 0 auto; }
.page-hero h1 { color: #fff; font-size: clamp(32px, 4.4vw, 54px); margin-top: 4px; }
.page-hero .lead p + p { margin-top: 10px; }
.page-hero .lead { margin: 18px auto 0; max-width: 620px; color: rgba(255, 255, 255, 0.82); font-size: 16px; }
.page-hero .eyebrow { font-size: 20px; }

/* ── Prose (menu intro, privacy statement) ── */
.prose { max-width: 820px; margin: 0 auto clamp(36px, 5vw, 56px); text-align: center; color: var(--text); }
.prose p + p { margin-top: 14px; }
.prose--doc { text-align: left; margin-bottom: 0; }
.prose--doc h2 { font-size: 26px; margin: 40px 0 12px; }
.prose--doc h3 { font-size: 19px; margin: 28px 0 10px; }
.prose--doc ul { list-style: disc; padding-left: 22px; margin: 12px 0; }
.prose--doc li + li { margin-top: 6px; }
.prose--doc hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }
.prose--doc a { color: var(--gold-deep); font-weight: 600; }
.section--cta h2 { margin-bottom: 14px; }
.intro-text p + p { margin-top: 10px; }
.intro-text { text-align: center; max-width: 640px; margin: 0 auto 28px; color: var(--muted); font-size: 16px; }

/* ── Kontakt / Posao ── */
.contact-grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.contact-info h2 { font-size: clamp(26px, 3vw, 36px); }
.contact-info .ornament--left { margin: 16px 0 24px; }
.contact-list div { padding: 12px 0; border-bottom: 1px dashed var(--line); }
.contact-list dt { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 2px; }
.contact-list dd { margin: 0; color: var(--ink); }
.contact-list a:hover { color: var(--gold-deep); }
.contact-form { background: var(--soft); padding: clamp(24px, 4vw, 40px); }
.contact-form .eyebrow { text-align: center; }
.form-intro { text-align: center; color: var(--muted); font-size: 14px; margin-bottom: 6px; }
.res-form { display: grid; gap: 16px; text-align: left; margin-top: 10px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.res-form label { display: grid; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.res-form input, .res-form textarea { width: 100%; font: inherit; font-size: 15px; color: var(--ink); background: #fff; border: 1px solid var(--line); padding: 11px 12px; min-height: 46px; }
.res-form input[type="file"] { padding: 9px 12px; font-size: 14px; }
.res-form input:focus, .res-form textarea:focus { outline: 0; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(227, 176, 98, 0.25); }
.res-form textarea { resize: vertical; }
.res-form .check { display: flex; align-items: flex-start; gap: 10px; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 13px; color: var(--text); }
.res-form .check input { width: auto; min-height: 0; margin-top: 4px; accent-color: var(--gold-deep); }
.res-form .check a { color: var(--gold-deep); font-weight: 700; }
.contact-form .btn { justify-self: start; }
.form-done { margin-top: 12px; color: var(--gold-deep); font-weight: 600; }
.map { position: relative; height: 560px; background: var(--soft); }   /* 2026-11-05: runs straight into the footer (the hours card overlaps its bottom) */
.map iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(0.8); }   /* light map, only slightly muted: any grayscale / invert would also kill Google's red pin */
.legal-line { max-width: 900px; margin: 56px auto 0; text-align: center; font-size: 12px; line-height: 1.7; color: var(--muted); }

/* ── Footer with the hours card bridging in ── */
.site-footer { position: relative; background: var(--charcoal); color: rgba(255, 255, 255, 0.78); }
.footer-grid { display: grid; grid-template-columns: 1fr 360px 1fr; gap: 40px; align-items: start; padding: 90px 0 40px; }
.footer-col { text-align: center; padding-top: 10px; }
.footer-col h3 { font-size: 22px; color: #fff; margin-bottom: 16px; }
.footer-col a:hover { color: var(--gold); }
.footer-col .social { justify-content: center; margin-top: 18px; }
.footer-col .social a { width: 40px; height: 40px; background: rgba(255, 255, 255, 0.08); }
.contact-list .social { margin-top: 6px; }
.contact-list .social a { width: 36px; height: 36px; background: var(--ink); }
.contact-list .social svg { width: 16px; height: 16px; }
.reservation-card { position: relative; margin-top: -170px; background: var(--black); padding: 40px 40px 44px; text-align: center; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35); }
.reservation-card h3 { font-size: 24px; color: #fff; margin-top: 10px; }
.hours { margin: 22px 0 30px; }
.hours div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px dashed rgba(255, 255, 255, 0.18); font-size: 14px; }
.hours dt { color: rgba(255, 255, 255, 0.78); }
.hours dd { margin: 0; color: #fff; }
.footer-social { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 32px; padding: 10px 0 50px; }
.social { display: flex; gap: 12px; }
.social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--black); color: #fff; transition: background-color 0.2s ease, color 0.2s ease; }
.social a:hover { background: var(--gold); color: var(--black); }
.social svg { width: 18px; height: 18px; fill: currentColor; }
.footer-bottom { background: var(--black); padding: 26px 0; text-align: center; font-size: 14px; color: rgba(255, 255, 255, 0.7); }
.footer-bottom a { color: var(--gold); font-weight: 600; }
.footer-bottom .sep { margin: 0 10px; opacity: 0.5; }
.footer-bottom .legal { margin-top: 8px; font-size: 12px; }
.footer-bottom .legal a { color: rgba(255, 255, 255, 0.55); font-weight: 500; }
.footer-bottom .legal a:hover { color: var(--gold); }
.sf-bolt { display: inline-block; width: 12px; height: 12px; margin-right: 4px; vertical-align: -1px; }

/* ── Large screens: the layout is px based, so scale the document up so QHD and
   4K monitors at 100% get the same composition instead of a small centred strip.
   vh is not affected by zoom, hence --vh is divided by the same factor. ── */
@media (min-width: 1800px) { :root { zoom: 1.15; --vh: calc(1vh / 1.15); } }
@media (min-width: 2300px) { :root { zoom: 1.45; --vh: calc(1vh / 1.45); } }
@media (min-width: 3200px) { :root { zoom: 1.9; --vh: calc(1vh / 1.9); } }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .feature-grid, .feature-grid--4 { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .story { grid-template-columns: 1fr; }
  .story-photo--double { grid-template-columns: 1fr 1fr; }
  .reservation-card { order: -1; margin: -150px auto 0; width: min(100%, 420px); }
  .site-footer { margin-top: calc(var(--section) + 40px); }
  .gallery-grid--page { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .menu-group, .menu-group--flip { grid-template-columns: 1fr; }
  .menu-group-photo { position: static; }
  .menu-group-photo img { aspect-ratio: 3 / 2; }
  .contact-grid { grid-template-columns: 1fr; }
  .info-grid { grid-template-columns: 1fr; gap: 36px; }
}
/* the full menu + logo need ~900px: below 960 the menu folds into the burger (tablets included) */
@media (max-width: 960px) {
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; background: var(--black); padding: 8px var(--gutter) 16px; }
  .nav-open.site-header { background: rgba(14, 14, 14, 0.96); }
  .site-nav a { padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
  .is-scrolled.nav-open.site-header, .site-header.is-scrolled .site-nav { background: #fff; }
  .site-header.is-scrolled .site-nav a { border-bottom-color: rgba(0, 0, 0, 0.08); }
  .nav-open .site-nav { display: flex; }
  .nav-toggle { display: grid; }
  .header-in { gap: 14px; }
}
@media (max-width: 760px) {
  /* Ponuda jump links: one swipeable line stuck to the top, below the header whenever the header shows */
  .jump { position: sticky; top: 0; z-index: 30; flex-wrap: nowrap; justify-content: flex-start; gap: 8px; margin: -10px calc(var(--gutter) * -1) 40px; padding: 10px var(--gutter); overflow-x: auto; background: var(--paper); border-bottom: 1px solid var(--line); scrollbar-width: none; transition: top 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .jump::-webkit-scrollbar { display: none; }
  .jump a { flex: none; white-space: nowrap; user-select: none; -webkit-user-drag: none; }
  .jump.is-dragging, .jump.is-dragging a { cursor: grabbing; }
  .jump a.is-active { background: var(--black); border-color: var(--black); color: #fff; }
  body:has(.site-header:not(.is-hidden)) .jump { top: 87px; }
  .menu-group, .menu-cols > section { scroll-margin-top: 165px; }
  .menu-block + .menu-block { padding-top: 0; border-top: 0; }
  .topbar { display: none; }
  .brand-logo, .site-header.is-scrolled .brand-logo { height: 44px; }
  .brand-logo--dark { display: none; }
  .band { background-attachment: scroll; }
  .feature-grid, .feature-grid--4 { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .hero-in { padding: 110px 0 90px; }
  .hero-line { font-size: 14px; margin-top: 16px; }
  .gallery-grid { grid-template-columns: 1fr; gap: 10px; }
  .gallery-grid--page { grid-template-columns: 1fr 1fr; gap: 8px; }
  .page-hero { min-height: 0; padding: 130px 0 48px; }
  .menu-list, .menu-cols { grid-template-columns: 1fr; }
  .story--flip .story-photo { order: 0; }
  .story-photo--double { grid-template-columns: 1fr; }
  .map { height: 440px; }
}
@media (max-width: 420px) {
  .header-cta { padding: 0 10px; font-size: 11px; }
  .menu-list li { grid-template-columns: 1fr; }
  .menu-list .price, .menu-list .price-ref { grid-column: 1; grid-row: auto; text-align: left; justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-mark-small, .hero-mark-big, .hero-line, .hero .actions, .slide, .gallery-grid img { transition: none; }
  .slide::after { animation: none; }
  .hero-mark-small, .hero-mark-big, .hero-line, .hero .actions { opacity: 1; transform: none; }
  .intro { display: none; }
  .band { background-attachment: scroll; }
}

/* ══════════════════════════════════════════════════════════════════════
   Homepage: bold full-bleed sections, scroll reveals and parallax (2026-10-29).
   Everything below is additive; the sub-pages keep the rules above. */

/* ── Reveal on scroll (JS adds .is-visible; without JS everything is visible) ── */
.js [data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity 0.9s ease var(--d, 0s), transform 1s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0s), background-color 0.3s ease, border-color 0.3s ease, color 0.15s ease; }   /* colour props listed too, or a revealed button loses its hover transition */
/* clip reveals wipe the children, not the element itself: Chrome's IntersectionObserver treats a fully clipped target as not intersecting */
.js [data-reveal="clip"] { opacity: 1; transform: none; }
.js [data-reveal="clip"] > * { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s cubic-bezier(0.6, 0, 0.2, 1) var(--d, 0s), transform 1s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.8s ease; }   /* transform + opacity kept so tile hovers still ease after the wipe */
.js [data-reveal="scale"] { transform: scale(1.08); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }
.js [data-reveal="clip"].is-visible > * { clip-path: inset(0 0 0 0); }
.section-head--big h2 { font-size: clamp(34px, 4.8vw, 60px); text-wrap: balance; }

/* ── Full-bleed photo tiles (the four welcome boxes) ── */
.tile { position: relative; display: block; overflow: hidden; background: var(--black); color: #fff; aspect-ratio: 3 / 4; isolation: isolate; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1); will-change: transform; }
.tile::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(14, 14, 14, 0) 35%, rgba(14, 14, 14, 0.55) 70%, rgba(14, 14, 14, 0.92) 100%); transition: opacity 0.6s ease; }
.tile:hover img, .tile:focus-visible img { transform: scale(1.07); }

/* ── Marquee of the menu groups ── */

/* ── Restoran PODROOM grill: sticky photo column ── */
.story-bold { display: grid; grid-template-columns: 1fr 1fr; background: var(--paper); }
.story-visual { position: relative; overflow: hidden; min-height: 420px; }   /* as tall as the text column, not the viewport */
.story-main { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story-copy { align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: clamp(40px, 4.5vw, 64px) clamp(28px, 6vw, 96px); background: #f6f1ec; }   /* soft warm tint behind the text column */
.story-copy > * { max-width: 620px; }
.story-copy h2 { font-size: clamp(34px, 4vw, 54px); margin-bottom: 18px; text-wrap: balance; }
.story-para + .story-para, .story-para p + p, .story-quote + .story-para { margin-top: 16px; }
.story-quote { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; color: var(--ink); margin-bottom: 10px; }
.story-copy .btn { margin-top: 30px; }
.story-copy > div:last-child:not(.story-para) { max-width: none; }

/* ── Ponuda bento ── */
.section--bento .section-head, .gallery .section-head { margin-bottom: clamp(28px, 4vw, 48px); }
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(200px, 24vw, 340px); gap: 0; padding: 0; }   /* 3 x 3, one tile per menu group, no gutters */
.tile--bento { aspect-ratio: auto; }
.tile--bento h3 { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(18px, 2vw, 28px); color: #fff; font-size: clamp(21px, 1.9vw, 28px); line-height: 1.2; transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
/* resting state: photo under a flat black veil with the title; hover fades the veil and the title away and leaves the photo */
.tile--bento::after { background: rgba(14, 14, 14, 0.58); transition: opacity 0.8s ease; }
.tile--bento:hover::after, .tile--bento:focus-visible::after { opacity: 0; }
.tile--bento:hover h3, .tile--bento:focus-visible h3 { opacity: 0; transform: translateY(8px); }
@media (hover: none) { .tile--bento::after { background: linear-gradient(180deg, rgba(14, 14, 14, 0.1), rgba(14, 14, 14, 0.75)); } }
.section--bento { padding-bottom: 0; }   /* the 3 x 3 grid and the gallery run straight into the next band */

/* ── Big-type facts ── */
.facts { background: var(--charcoal); color: #fff; }
.facts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fact { padding: clamp(48px, 6vw, 84px) clamp(20px, 3vw, 40px); text-align: center; border-left: 1px solid rgba(255, 255, 255, 0.1); }
.fact:first-child { border-left: 0; }
.fact-label { display: block; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 18px; color: var(--gold); }
.fact strong { display: block; margin: 10px 0 12px; font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.1; letter-spacing: 0; color: #fff; }
.fact strong.fact-small { font-size: clamp(19px, 1.8vw, 24px); line-height: 1.3; }
.fact strong a:hover { color: var(--gold); }
.fact > span:last-child, .fact a.link-gold { color: rgba(255, 255, 255, 0.7); }
.fact .link-gold { margin-top: 0; color: var(--gold); }

/* ── Ljetna terasa band ── */
.terasa { position: relative; padding: clamp(80px, 10vw, 150px) 0; overflow: hidden; background: var(--black); color: #fff; text-align: center; isolation: isolate; }
.terasa > img { position: absolute; inset: -14% 0; width: 100%; height: 128%; object-fit: cover; z-index: -1; }
.terasa::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(14, 14, 14, 0.6), rgba(14, 14, 14, 0.78)); }
.terasa-in { position: relative; z-index: 1; max-width: 720px; }
.terasa h2 { color: #fff; font-size: clamp(32px, 3.8vw, 52px); line-height: 1.12; }
.terasa-text p + p { margin-top: 12px; }
.terasa-text { margin: 18px auto 0; max-width: 46ch; }
.terasa-text p, .terasa p { margin: 0 auto; max-width: 46ch; font-size: 17px; line-height: 1.7; color: rgba(255, 255, 255, 0.86); text-wrap: balance; }
.terasa .btn { margin-top: 32px; }
.terasa.is-last { padding: calc(clamp(80px, 10vw, 150px) + 150px) 0; }   /* symmetric, so the text sits centred in the band; the footer hours card bridges into the bottom 170px */

/* ── Gallery bento ── */
.gallery-bento { overflow: hidden; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(170px, 18vw, 260px); gap: 0; padding: 0; }
.gallery-bento figure, .gallery-grid figure { cursor: zoom-in; }
.gallery-bento figure { position: relative; overflow: hidden; background: var(--black); }
.gallery-bento figure:first-child { grid-column: span 2; grid-row: span 2; }
.gallery-bento figure:nth-child(2) { grid-column: span 2; }
.gallery-bento img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.6s ease; }
.gallery-bento figure:hover img { transform: scale(1.06); }
/* Galerija page (2026-11-05): the same gapless mosaic, taller rows, a repeating 8-photo pattern
   (one 2×2 + one 2×1 per group) with the big tile alternating left and right, dense-packed. */
.gallery-bento--page { grid-auto-flow: dense; grid-auto-rows: clamp(190px, 21vw, 300px); }
.gallery-bento--page figure:nth-child(2) { grid-column: auto; }
.gallery-bento--page figure:nth-child(8n+1) { grid-column: span 2; grid-row: span 2; }
.gallery-bento--page figure:nth-child(8n+4) { grid-column: span 2; }
.gallery-bento--page figure:nth-child(16n+9) { grid-column: 3 / span 2; }
.gallery-bento--page figure:nth-child(16n+12) { grid-column: 1 / span 2; }
/* no hole at the end of the mosaic, whatever the photo count: the last tiles of an incomplete group stretch */
.gallery-bento--page figure:nth-child(8n+1):last-child { grid-column: 1 / -1; grid-row: span 1; }
.gallery-bento--page figure:nth-child(8n+2):last-child { grid-column: span 2; grid-row: span 2; }
.gallery-bento--page figure:nth-child(8n+2):nth-last-child(2), .gallery-bento--page figure:nth-child(8n+3):last-child { grid-row: span 2; }
.gallery-bento--page figure:nth-child(8n+5):last-child { grid-column: span 4; }
.gallery-bento--page figure:nth-child(8n+6):last-child { grid-column: span 3; }
.gallery-bento--page figure:nth-child(8n+7):last-child { grid-column: span 2; }
.gallery .sf-inner .center { margin-top: clamp(32px, 4vw, 48px); }

/* ---- Features: the four live icon boxes as four hairline columns, photo on top */
.features { padding: clamp(56px, 7vw, 110px) 0; background: var(--charcoal); color: #fff; }
.features-grid { --colpad: clamp(18px, 2.4vw, 36px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-inline: calc(-1 * var(--colpad)); }   /* equal columns, outer photos flush with the wrap */
.feature-col { padding: 0 var(--colpad); border-left: 1px solid rgba(255, 255, 255, 0.12); }
.feature-col:first-child { border-left: 0; }
.feature-photo { aspect-ratio: 4 / 5; overflow: hidden; background: var(--black); }
.feature-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.feature-col:hover .feature-photo img { transform: scale(1.06); }
.feature-col h3 { position: relative; margin: 26px 0 12px; padding-top: 18px; color: #fff; font-size: clamp(21px, 1.6vw, 25px); line-height: 1.2; }
.feature-col h3::before { content: ""; position: absolute; left: 0; top: 0; width: 34px; height: 1px; background: var(--gold); }
.feature-col p { margin: 0; color: rgba(255, 255, 255, 0.74); font-size: 14.5px; line-height: 1.7; }

@media (max-width: 1024px) {
  .site-footer { margin-top: 0; }   /* every page ends in the footer bridge (see the end of the file) */
  .features-grid { grid-template-columns: 1fr 1fr; row-gap: 44px; }
  .feature-col:nth-child(odd) { border-left: 0; }
  .story-bold { grid-template-columns: 1fr; }
  .story-visual { height: 56vh; min-height: 320px; }
  .story-copy { max-width: none; }
  .bento { grid-auto-rows: clamp(150px, 22vw, 240px); }
  .gallery-bento { grid-template-columns: 1fr 1fr; }
  .gallery-bento--page figure:nth-child(16n+9), .gallery-bento--page figure:nth-child(16n+12) { grid-column: span 2; }
  .gallery-bento--page figure:nth-child(n):last-child { grid-column: span 2; }   /* two columns: a stretched last tile spans both */
  .facts-grid { grid-template-columns: 1fr; }
  .fact { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); }
  .fact:first-child { border-top: 0; }
}
@media (max-width: 760px) {
  .bento, .gallery-bento { gap: 0; padding: 0; grid-auto-rows: 150px; }
  .bento { grid-template-columns: 1fr 1fr; gap: 0; padding: 0; }
  .bento .tile--bento:last-child { grid-column: span 2; }
  .story-visual { height: 48vh; }
  .terasa > img { inset: 0; height: 100%; }
  .features-grid { grid-template-columns: 1fr; row-gap: 40px; margin-inline: 0; }
  .feature-col { border-left: 0; padding: 0; }
  .feature-photo { aspect-ratio: 16 / 10; }
}
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-reveal="scale"] { opacity: 1; transform: none; transition: none; }
  .js [data-reveal="clip"] > * { clip-path: none; transition: none; }
  .scroll-cue span { animation: none; }
  .tile img, .gallery-bento img { transition: none; }
}

/* ---- Intro: black curtain with the logo, lifts to reveal the page (every load for now; session-gated later) */
.intro { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--black); color: #fff; animation: intro-lift 0.9s cubic-bezier(0.76, 0, 0.24, 1) 2.7s forwards; }
.intro-in { display: grid; justify-items: center; gap: 22px; animation: intro-out 0.5s ease 2.45s forwards; }
.intro-logo { width: clamp(150px, 20vw, 220px); height: auto; opacity: 0; transform: translateY(16px) scale(0.96); animation: intro-logo 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s forwards; }
.intro-line { display: block; width: 0; height: 1px; background: var(--gold); animation: intro-line 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.75s forwards; }
html.intro-done .intro, html:not(.js) .intro { display: none; }
body.intro-lock { overflow: hidden; }
@keyframes intro-logo { to { opacity: 1; transform: none; } }
@keyframes intro-line { to { width: 120px; } }
@keyframes intro-out { to { opacity: 0; transform: translateY(-24px); } }
@keyframes intro-lift { to { clip-path: inset(0 0 100% 0); visibility: hidden; } }

/* ---- Lightbox (built by main.js for the gallery figures): backdrop, image, arrows, close, counter */
.lightbox { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(14, 14, 14, 0.94); opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0s linear 0.35s; }
.lightbox.is-open { opacity: 1; visibility: visible; transition: opacity 0.35s ease; }
.lightbox img { max-width: min(92vw, 1500px); max-height: 86vh; width: auto; height: auto; object-fit: contain; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); transition: opacity 0.3s ease, transform 0.3s ease; }
.lightbox.is-switching img { opacity: 0; transform: scale(0.985); }
.lightbox button { position: absolute; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%; background: rgba(14, 14, 14, 0.5); color: #fff; cursor: pointer; transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease; }
.lightbox button:hover { background: var(--gold); border-color: var(--gold); color: var(--black); }
.lightbox button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lightbox-prev { left: clamp(10px, 3vw, 40px); top: 50%; transform: translateY(-50%); }
.lightbox-next { right: clamp(10px, 3vw, 40px); top: 50%; transform: translateY(-50%); }
.lightbox-close { top: clamp(10px, 3vw, 28px); right: clamp(10px, 3vw, 28px); }
.lightbox-count { position: absolute; left: 0; right: 0; bottom: clamp(12px, 3vw, 28px); text-align: center; font-size: 12px; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.7); }
body.lightbox-open { overflow: hidden; }
@media (max-width: 760px) { .lightbox button { width: 42px; height: 42px; } .lightbox img { max-width: 94vw; max-height: 78vh; } }


/* ══════════════════════════════════════════════════════════════════════
   WordPress additions
   ══════════════════════════════════════════════════════════════════════ */

/* ── Section contract: boxed blocks put their content in .sf-inner (max-width
   and padding come from the block's scoped <style>, see pg_block_style()). */
.sf-inner { box-sizing: border-box; }
.sf-inner > .section-head:last-child { margin-bottom: 0; }
.wp-block-post-content { margin: 0; }
.wp-block-post-content > * { margin-block: 0; }

/* ── Footer bridge: the footer's hours card rises 170px into the last section,
   so whatever block ends the page gets that much room at its bottom (on its own
   background). The photo CTA band takes it on both sides to stay centred. */
:root { --bridge: 170px; }
.wp-block-post-content > section:last-of-type:not(.terasa):not(.hero) { padding-bottom: var(--bridge); }
.wp-block-post-content > section.terasa:last-of-type { padding: calc(clamp(80px, 10vw, 150px) + 150px) 0; }
.wp-block-post-content > section.contact:last-of-type:has(.map) { padding-bottom: 0; }   /* 2026-11-05: map flush to the footer */
.wp-block-post-content > section.contact:last-of-type > .sf-inner { padding-bottom: calc(var(--section) / 2); }   /* Posao / Kontakt: half the gap under the columns */
/* Posao and Galerija end with HALF the visible gap above the hours card (the card rises 80px into the
   section on desktop, 60px below 1024px; the :not()s only match the generic rule's specificity). */
.wp-block-post-content > section.contact:last-of-type:not(:has(.map)):not(.terasa):not(.hero) { padding-bottom: 125px; }
.wp-block-post-content > section.gallery--page:last-of-type:not(.terasa):not(.hero) { padding-bottom: 0; }   /* Galerija: the mosaic runs straight into the footer, the hours card overlaps its last row */
@media (max-width: 1024px) {
  .wp-block-post-content > section.contact:last-of-type:not(:has(.map)):not(.terasa):not(.hero) { padding-bottom: 115px; }
  .wp-block-post-content > section.gallery--page:last-of-type:not(.terasa):not(.hero) { padding-bottom: 0; }
}
.wp-block-post-content:empty + * , .pg-no-content { margin-top: 0; }

/* ── Rich text inside design slots (fields render as <p> blocks) */
.feature-col p + p, .footer-col p + p, .contact-text p + p, .form-intro p + p, .band-note p + p { margin-top: 10px; }
.contact-text { margin-bottom: 18px; }
.contact-list dd p { margin: 0; }
.footer-col p { margin: 0; }
.legal-line p + p { margin-top: 6px; }
.sf-embed { position: relative; aspect-ratio: 16 / 9; margin: 24px 0; }
.sf-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.prose--doc img { height: auto; margin: 24px 0; }
.prose--doc table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 14px; }
.prose--doc th, .prose--doc td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }

/* ── Menu: the reference-price label is rendered (was a CSS ::before) */
.price-ref-label { margin-right: 2px; }

/* ── Header: WP admin bar, the solid variant (pages without a hero / band) */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } .admin-bar .site-header.is-hidden { transform: translateY(calc(-100% - 46px)); } }
.header-spacer { height: 86px; }
.brand-text { font-weight: 700; font-size: 20px; letter-spacing: 0.04em; text-transform: uppercase; }
@media (max-width: 760px) { .header-spacer { height: 70px; } }

/* ── Contact Form 7 in the design's form box (.res-form look) */
.contact-form .wpcf7 { margin-top: 10px; }
.contact-form .wpcf7-form { display: grid; gap: 16px; text-align: left; }
.contact-form .wpcf7-form > p { margin: 0; }
.contact-form .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form label { display: grid; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.contact-form .wpcf7-form-control-wrap { display: block; }
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"], .contact-form textarea, .contact-form input[type="file"] { width: 100%; font: inherit; font-size: 15px; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--ink); background: #fff; border: 1px solid var(--line); padding: 11px 12px; min-height: 46px; border-radius: 0; }
.contact-form input[type="file"] { padding: 9px 12px; font-size: 14px; }
.contact-form input[type="file"]::file-selector-button { margin-right: 14px; padding: 8px 16px; border: 1px solid var(--ink); background: #fff; color: var(--ink); font: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; }
.contact-form input[type="file"]::file-selector-button:hover { background: var(--ink); color: #fff; }
.contact-form textarea { resize: vertical; height: 140px; }
.contact-form input:focus, .contact-form textarea:focus { outline: 0; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(227, 176, 98, 0.25); }
.contact-form .check, .contact-form .wpcf7-acceptance label { display: flex; align-items: flex-start; gap: 10px; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 13px; color: var(--text); }
.contact-form .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.contact-form .wpcf7-acceptance input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--gold-deep); }
.contact-form .wpcf7-form a { color: var(--gold-deep); font-weight: 700; }
.contact-form input[type="submit"], .contact-form .wpcf7-submit { justify-self: start; display: inline-flex; align-items: center; min-height: 48px; padding: 0 30px; font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid var(--gold); background: var(--gold); color: var(--black); border-radius: 0; cursor: pointer; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.15s ease; }
.contact-form input[type="submit"]:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: #fff; }
.contact-form .wpcf7-spinner { margin: 0 0 0 12px; }
.contact-form .wpcf7-not-valid-tip { margin-top: 4px; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #a8362a; }
.contact-form .wpcf7-response-output { margin: 4px 0 0 !important; padding: 10px 12px !important; font-size: 14px; border-width: 1px !important; }
.contact-form .form-note { font-size: 12px; color: var(--muted); }
@media (max-width: 760px) { .contact-form .field-row { grid-template-columns: 1fr; } }

/* ── 404 (template pattern) */
.page-hero--404 { min-height: calc(100 * var(--vh)); align-items: center; }
.page-hero--404 .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }