/* Chalet Burja · public website (index, meni, rezervacija, zasebnost). Theme: .t-night ("Modra ura").
   Builds on burja.css: semantic tokens only. Raw tokens (--snow-50, --dusk-950) appear only on photographs.
   Mobile first; every block works at 360 px without horizontal scroll. */

.site { --sh-h: 68px; --on-photo: var(--snow-50); --photo-scrim: var(--dusk-950); overflow-x: clip; }
.site [id] { scroll-margin-top: calc(var(--sh-h) + var(--s-4)); }
.site--sub main { padding-top: var(--sh-h); }
.site .lede { max-width: 52ch; }

/* ------------------------------------------------------------------ header */
.sh { position: fixed; inset: 0 0 auto 0; z-index: var(--z-header); background: color-mix(in srgb, var(--bg) 92%, transparent); border-bottom: 1px solid var(--line); transition: background var(--d-2) var(--ease-out), border-color var(--d-2) var(--ease-out); }
@supports (backdrop-filter: blur(8px)) { .sh { background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } }
.sh.is-open { background: var(--bg); }
/* transparent over the hero photo only while the script watches the scroll position; without JS the bar keeps its background */
.js .sh--over:not(.is-open) { background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.sh__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--s-4); max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); min-height: var(--sh-h); }
.sh__brand { display: inline-flex; align-items: center; gap: var(--s-3); min-height: 44px; text-decoration: none; color: var(--text); min-width: 0; }
.sh__brand img { width: 44px; height: 44px; flex: none; }
.sh__word { font-family: var(--font-display); font-size: 1.3rem; line-height: 1; letter-spacing: .01em; white-space: nowrap; }
.sh__tools { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; }
.sh__menu { width: 44px; height: 44px; display: inline-grid; place-content: center; gap: 7px; border-radius: var(--r-2); color: var(--text); }
.sh__menu span { display: block; width: 22px; height: 2px; background: currentColor; transition: transform var(--d-2) var(--ease-out); }
.sh__menu[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
.sh__menu[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }
.sh__nav { order: 3; width: 100%; }
.sh__nav ul { display: flex; gap: var(--s-1) var(--s-5); overflow-x: auto; padding-bottom: var(--s-2); scrollbar-width: none; }
.sh__nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-sm); font-weight: 600; text-decoration: none; white-space: nowrap; color: var(--text); }
.sh__nav a:hover, .sh__nav a[aria-current="page"] { color: var(--accent-text); }
/* with JS the links fold into a panel behind the menu button on small screens */
/* without JS the link row stays in the fixed header, so the header is one row taller below 1080 px */
html:not(.js) .site { --sh-h: 120px; }
.js .sh__nav { display: none; }
.js .sh.is-open .sh__nav { display: block; border-top: 1px solid var(--line); padding-block: var(--s-3) var(--s-5); }
.js .sh.is-open .sh__nav ul { display: grid; gap: 0; overflow: visible; padding: 0; }
.js .sh.is-open .sh__nav a { width: 100%; min-height: 48px; font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; }
/* brand word + language links + booking button + menu button need about 520 px in Slovenian ("Rezervirajte"):
   below 600 px the word goes first, below 480 px the button too, so the bar never wraps into a second row */
@media (max-width: 599px) { .sh__word { display: none; } }
@media (max-width: 479px) { .sh__cta { display: none; } }
@media (min-width: 1080px) {
  .sh__bar { flex-wrap: nowrap; }
  html:not(.js) .site { --sh-h: 68px; }
  .sh__nav, .js .sh__nav { display: block; order: 1; width: auto; margin-inline: auto; }
  .sh__tools { order: 2; margin-left: 0; }
  .sh__nav ul { overflow: visible; padding: 0; }
  .sh__menu { display: none; }
}

/* ------------------------------------------------------------------ hero */
.hero { position: relative; display: grid; grid-template-rows: 1fr auto auto; min-height: 100vh; min-height: 100svh; color: var(--on-photo); isolation: isolate; }
/* phones: the photo fills the first screen (title, chalet, buttons); the intro line and the conditions follow on the page colour */
.hero { --hero-photo-h: 86vh; --hero-end: var(--bg); background: var(--bg); }
@supports (height: 1svh) { .hero { --hero-photo-h: 86svh; } }
.hero__media, .hero__wind, .hero__shade { position: absolute; inset: 0 0 auto 0; width: 100%; height: var(--hero-photo-h); }
.hero__media { z-index: 0; background: var(--surface); }
.hero__media picture { display: block; width: 100%; height: 100%; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.hero__wind { z-index: 2; pointer-events: none; }
.hero__inner, .hero__intro, .hero__strip { position: relative; z-index: 3; }
.hero__shade { z-index: 1; background:
  linear-gradient(180deg, color-mix(in srgb, var(--photo-scrim) 62%, transparent) 0%, color-mix(in srgb, var(--photo-scrim) 8%, transparent) 26%, color-mix(in srgb, var(--photo-scrim) 30%, transparent) 60%, var(--hero-end) 100%); }
.hero__inner { display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-8); min-height: var(--hero-photo-h); padding-top: calc(var(--sh-h) + var(--s-5)); padding-bottom: var(--s-5); }
.hero__badge { display: inline-block; margin-bottom: var(--s-4); padding: 6px 12px; border: 1px solid var(--accent); border-radius: var(--r-pill); color: var(--accent); font-size: var(--fs-micro); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; background: color-mix(in srgb, var(--photo-scrim) 55%, transparent); }
.hero__title { font-size: clamp(3.1rem, 2rem + 6.2vw, 7.5rem); line-height: .92; letter-spacing: -.025em; overflow-wrap: anywhere; text-shadow: 0 2px 30px color-mix(in srgb, var(--photo-scrim) 60%, transparent); }
.hero__motto { text-shadow: 0 1px 14px color-mix(in srgb, var(--photo-scrim) 70%, transparent); margin-top: var(--s-3); font-family: var(--font-display); font-style: italic; font-size: clamp(1.25rem, 1rem + 1.4vw, 2rem); color: var(--accent); }
.hero__intro { padding-block: var(--s-2) var(--s-5); }
.hero__lede { max-width: 44ch; font-size: var(--fs-lede); line-height: 1.5; text-wrap: pretty; text-shadow: 0 1px 16px color-mix(in srgb, var(--photo-scrim) 80%, transparent); }
.hero__btn { flex: 1 1 auto; }
.hero__ghost { color: var(--on-photo); }
.hero__strip { border-top: 1px solid color-mix(in srgb, var(--on-photo) 22%, transparent); }
.hero__strip-in { display: grid; gap: var(--s-3) var(--s-6); padding-block: var(--s-4); }
.cond--head { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-micro); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.cond__alt { font-family: var(--font-mono); letter-spacing: 0; text-transform: none; opacity: .8; }
.cond-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: var(--s-3) var(--s-5); }
.cond dt { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.cond dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: var(--fs-sm); }
.cond__big { font-weight: 600; font-size: 1.0625rem; }
.cond__sub { font-size: var(--fs-xs); opacity: .8; }
.cond__arrow { display: inline-grid; align-self: center; transform: rotate(var(--deg, 0deg)); }
.cond--gondola .cond__big { color: var(--accent); }
.hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); font-size: var(--fs-xs); }
.hero__pause { min-height: 32px; padding: 0 2px; font-size: var(--fs-xs); text-decoration: underline; text-underline-offset: .2em; color: var(--on-photo); opacity: .85; }
.hero__pause:hover { opacity: 1; }
.hero__note { opacity: .7; }
@media (min-width: 900px) {
  .hero { grid-template-rows: 1fr auto; --hero-photo-h: 100%; --hero-end: color-mix(in srgb, var(--photo-scrim) 94%, transparent); }
  .hero__strip { background: color-mix(in srgb, var(--photo-scrim) 45%, transparent); }
  .hero__inner { grid-area: 1 / 1; min-height: 0; padding-top: calc(var(--sh-h) + var(--s-8)); padding-bottom: var(--s-7); }
  .hero__intro { grid-area: 1 / 1; align-self: end; padding-block: 0 var(--s-7); background: none; pointer-events: none; }
  .hero__intro .container { display: flex; justify-content: flex-end; }
  .hero__lede { max-width: 38ch; }
  .hero__strip { grid-row: 2; }
  .hero__btn { flex: none; --btn-h: 58px; padding-inline: var(--s-6); }
  .hero__strip-in { grid-template-columns: auto 1fr; align-items: center; }
  .hero__meta { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------------ chapters: shared */
.chapter h2 { max-width: 16ch; }
.chapter .media { border-radius: var(--r-1); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); gap: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.facts__big { font-family: var(--font-display); font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem); line-height: 1.05; color: var(--accent-text); }
.facts dd { margin-top: 4px; font-size: var(--fs-sm); color: var(--text-2); }

/* koča */
.koca { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.koca__text, .koca__a { grid-column: 1 / -1; }
.koca__a { aspect-ratio: 3 / 2; margin-top: var(--s-5); }
.koca__b, .koca__c { aspect-ratio: 4 / 5; }
@media (min-width: 900px) {
  .koca { grid-template-columns: repeat(12, 1fr); gap: var(--s-6); }
  .koca__text { grid-column: 1 / 6; grid-row: 1; align-self: center; }
  .koca__a { grid-column: 7 / 13; grid-row: 1; margin-top: 0; }
  .koca__b { grid-column: 2 / 5; grid-row: 2; }
  .koca__c { grid-column: 7 / 10; grid-row: 2; margin-top: var(--s-8); }
}

/* rooms */
.room-photos { margin-bottom: var(--s-7); }
.room-photos__row { display: grid; grid-auto-flow: column; grid-auto-columns: min(72%, 300px); gap: var(--s-3); overflow-x: auto; scroll-snap-type: x proximity; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); padding-bottom: var(--s-2); scrollbar-width: thin; }
.room-photos__row .media { aspect-ratio: 4 / 5; scroll-snap-align: start; border-radius: var(--r-1); }
.room-photos figcaption { margin-top: var(--s-2); }
@media (min-width: 900px) {
  .room-photos__row { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; margin-inline: 0; padding-inline: 0; gap: var(--s-4); }
}
.rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: var(--s-4); }
.room, .bk-room { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-2); min-width: 0; }
.room__photo { aspect-ratio: 3 / 2; margin: calc(var(--s-5) * -1) calc(var(--s-5) * -1) var(--s-2); border-radius: var(--r-2) var(--r-2) 0 0; }
.room__num { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .08em; color: var(--accent-text); }
.room__name { font-size: clamp(1.5rem, 1.3rem + .8vw, 1.9rem); line-height: 1.1; overflow-wrap: anywhere; }
.room__desc { font-family: var(--font-display); font-style: italic; font-size: 1.0625rem; line-height: 1.4; color: var(--text-2); }
.room__facts { display: grid; gap: 4px; font-size: var(--fs-sm); color: var(--text-2); }
.room__facts li { display: flex; gap: var(--s-2); }
.room__facts li::before { content: ""; flex: none; width: 5px; height: 5px; margin-top: .62em; border-radius: 50%; background: var(--line-strong); }
.room__book { align-self: flex-start; margin-top: auto; color: var(--link); }
.rooms-legend { margin-top: var(--s-5); max-width: 70ch; }

/* restaurant, menu preview, terrace */
.chapter--rest { padding-bottom: 0; }
.rest__wide { aspect-ratio: 4 / 3; border-radius: 0 !important; }
.rest { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); padding-block: var(--s-8); }
.rest__text { grid-column: 1 / -1; margin-bottom: var(--s-4); }
.rest__a, .rest__b { aspect-ratio: 4 / 5; }
@media (min-width: 700px) { .rest__wide { aspect-ratio: 21 / 9; } }
@media (min-width: 900px) {
  .rest { grid-template-columns: repeat(12, 1fr); gap: var(--s-6); padding-block: var(--section); align-items: start; }
  .rest__text { grid-column: 1 / 7; margin-bottom: 0; align-self: center; }
  .rest__a { grid-column: 7 / 11; }
  .rest__b { grid-column: 11 / 13; margin-top: var(--s-9); }
}
.hours { max-width: 420px; }
.hours h3 { margin-bottom: var(--s-2); }
.hours__list li { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-2) var(--s-4); padding-block: var(--s-3); border-bottom: 1px solid var(--line); }
.hours__time { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-2); }
.hours__open { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-micro); font-weight: 600; color: var(--ok); }
.hours__list--row { display: flex; flex-wrap: wrap; gap: 0 var(--s-6); margin-bottom: var(--s-6); }
.hours__list--row li { border-bottom: 0; }
.menu-preview { padding-bottom: var(--s-8); }
.menu-preview__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-3) var(--s-5); margin-bottom: var(--s-5); padding-top: var(--s-6); border-top: 1px solid var(--line); }
.terrace { position: relative; display: grid; color: var(--on-photo); }
.terrace__img { grid-area: 1 / 1; aspect-ratio: 4 / 5; border-radius: 0 !important; }
.terrace__img::after { background: linear-gradient(180deg, color-mix(in srgb, var(--photo-scrim) 0%, transparent) 30%, color-mix(in srgb, var(--photo-scrim) 88%, transparent)); }
.terrace__text { grid-area: 1 / 1; align-self: end; z-index: 1; padding-bottom: var(--s-7); display: grid; gap: var(--s-3); }
.terrace__text .lede { color: var(--on-photo); }
@media (min-width: 700px) { .terrace__img { aspect-ratio: 16 / 9; max-height: 86vh; width: 100%; } }

/* dishes (home preview and /meni) */
.dishes { display: grid; gap: 0 var(--s-7); }
.dish { padding-block: var(--s-4); border-bottom: 1px solid var(--line); min-width: 0; }
.dish--photo { display: grid; grid-template-columns: 72px 1fr; column-gap: var(--s-4); }
.dish--photo > :not(.dish__img) { grid-column: 2; }
.dish__img { grid-row: 1 / span 3; width: 72px; aspect-ratio: 4 / 5; border-radius: var(--r-1); }
.dish__top { display: flex; align-items: baseline; gap: var(--s-2); }
.dish__name { font-family: var(--font-sans); font-size: 1.0625rem; font-weight: 600; line-height: 1.3; letter-spacing: 0; min-width: 0; overflow-wrap: anywhere; }
.dish__lead { flex: 1; min-width: 12px; border-bottom: 1px dotted var(--line-strong); transform: translateY(-4px); }
.dish__price { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text); }
.dish__desc { margin-top: 4px; font-size: var(--fs-sm); color: var(--text-2); max-width: 60ch; }
.dish__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-top: var(--s-2); }
.dish__when { font-size: var(--fs-micro); color: var(--text-3); }
@media (min-width: 900px) { .dishes--preview { grid-template-columns: 1fr 1fr; } }

/* winter */
.zima { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.zima__text, .zima__a { grid-column: 1 / -1; }
.zima__a { aspect-ratio: 16 / 9; margin-top: var(--s-5); }
.zima__b, .zima__c { aspect-ratio: 4 / 5; }
.zima__season { display: inline-block; padding: var(--s-3) var(--s-4); border-left: 2px solid var(--accent); background: var(--surface); font-weight: 600; }
/* Today on Vogel: live status of the ski resort (home.js, `vogel` endpoint). Hidden until there is data. */
.zima__live { grid-column: 1 / -1; min-width: 0; }
.vogel { display: grid; gap: var(--s-5); margin-top: var(--s-7); padding-top: var(--s-6); border-top: 1px solid var(--line); }
.vogel__head { display: grid; gap: var(--s-2); }
.vogel__lead { font-size: var(--fs-lede); line-height: 1.4; color: var(--text-2); }
.vogel__figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-4); }
.vogel__figs > div { display: grid; gap: 6px; align-content: start; min-width: 0; }
.vogel__figs dt { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.vogel__figs dd { margin: 0; min-width: 0; }
.vogel__num { display: block; font-family: var(--font-mono); font-size: clamp(1.2rem, 1rem + 1vw, 1.7rem); line-height: 1.15; letter-spacing: -.02em; color: var(--accent-text); overflow-wrap: anywhere; }
.vogel__sub { display: block; margin-top: 4px; font-size: var(--fs-xs); color: var(--text-2); overflow-wrap: anywhere; }
.vogel__hrs { display: grid; gap: 4px; }
.vogel__hr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-2); }
.vogel__hr-l { font-size: var(--fs-xs); color: var(--text-2); }
.vogel__hr-t { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--accent-text); white-space: nowrap; }
.vogel__lists { display: grid; align-items: start; border-bottom: 1px solid var(--line); }
.vg-more { border-top: 1px solid var(--line); min-width: 0; }
.vg-more__sum { display: flex; align-items: center; gap: var(--s-3); min-height: 48px; cursor: pointer; font-weight: 600; list-style: none; }
.vg-more__sum::-webkit-details-marker { display: none; }
.vg-more__sum::after { content: ""; flex: none; width: 8px; height: 8px; margin: 0 4px 4px var(--s-2); border-right: 1.5px solid var(--text-2); border-bottom: 1.5px solid var(--text-2); transform: rotate(45deg); transition: transform var(--d-2, .2s) ease; }
.vg-more[open] > .vg-more__sum::after { transform: rotate(225deg); margin-bottom: -4px; }
.vg-more__tally { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 400; color: var(--text-2); white-space: nowrap; }
.vg-list { margin: 0; padding: 0 0 var(--s-3); list-style: none; }
.vg-row { display: grid; grid-template-columns: 2.4ch minmax(0, 1fr) auto; grid-template-areas: "n name st" "n name x"; align-items: baseline; gap: 2px var(--s-3); padding: var(--s-2) 0; border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); font-size: var(--fs-sm); }
.vg-row__n { grid-area: n; text-align: right; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-3); }
.vg-row__name { grid-area: name; overflow-wrap: anywhere; }
.vg-row__note { color: var(--text-3); }
.vg-row__st { grid-area: st; justify-self: end; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-2); white-space: nowrap; }
.vg-row__st--open { color: var(--text); }
.vg-row__x { grid-area: x; justify-self: end; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-2); white-space: nowrap; }
/* the state is carried by the word; the dot repeats it by shape as well as colour: filled, ring, dashed ring */
.vg-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--text-3); }
.vg-row__st--open .vg-dot { border-color: var(--ok); background: var(--ok); }
.vg-row__st--unknown .vg-dot { border-style: dashed; }
.vogel__src { font-size: var(--fs-xs); color: var(--text-3); }
@media (min-width: 560px) {
  .vg-row { grid-template-columns: 2.4ch minmax(0, 1fr) 7rem 6.5rem; grid-template-areas: "n name st x"; }
  .vg-row__st { justify-self: start; }
}
@media (min-width: 700px) { .vogel__figs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6); } }
@media (min-width: 1100px) { .vogel__lists { grid-template-columns: 1fr 1fr; column-gap: var(--s-7); } }
@media (prefers-reduced-motion: reduce) { .vg-more__sum::after { transition: none; } }
@media (min-width: 900px) {
  .zima { grid-template-columns: repeat(12, 1fr); gap: var(--s-6); }
  .zima__a { grid-column: 1 / 8; grid-row: 1; margin-top: 0; }
  .zima__text { grid-column: 9 / 13; grid-row: 1; align-self: center; }
  .zima__b { grid-column: 5 / 8; grid-row: 2; }
  .zima__c { grid-column: 9 / 12; grid-row: 2; margin-top: var(--s-8); }
}

/* getting here */
.route { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.route__text { grid-column: 1 / -1; }
.route__a, .route__b { aspect-ratio: 3 / 4; }
.route__steps { display: grid; gap: var(--s-5); }
.route__steps li { display: grid; grid-template-columns: 40px 1fr; gap: var(--s-4); align-items: start; }
.route__steps p { margin-top: 4px; max-width: 56ch; }
.route__n { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--accent); border-radius: 50%; font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--accent-text); }
.route__live { display: grid; justify-items: start; gap: var(--s-4); margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.route__today { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-3); font-weight: 600; }
@media (min-width: 900px) {
  .route { grid-template-columns: repeat(12, 1fr); gap: var(--s-6); align-items: start; }
  .route__text { grid-column: 1 / 7; }
  .route__a { grid-column: 8 / 11; }
  .route__b { grid-column: 11 / 13; margin-top: var(--s-9); }
}

/* closing call */
.final { position: relative; display: grid; min-height: min(80vh, 720px); color: var(--on-photo); }
.final__img { position: absolute; inset: 0; }
.final__img::after { background: linear-gradient(180deg, color-mix(in srgb, var(--photo-scrim) 25%, transparent), color-mix(in srgb, var(--photo-scrim) 88%, transparent)); }
.final__in { position: relative; align-self: end; z-index: 1; display: grid; justify-items: start; gap: var(--s-4); padding-block: var(--s-8); }
.final__in h2 { max-width: 18ch; }
.final__in .lede { color: var(--on-photo); }

/* contact */
.contact__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: var(--s-7) var(--s-6); }
.contact__list > div { display: grid; align-content: start; gap: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.contact__big { font-family: var(--font-display); font-size: clamp(1.5rem, 1.3rem + 1vw, 2.1rem); line-height: 1.15; text-decoration: none; overflow-wrap: anywhere; }
.contact__big:hover, .contact__line:hover { color: var(--accent-text); }
.contact__line { display: inline-flex; align-items: center; min-height: 32px; color: var(--link); overflow-wrap: anywhere; }
.contact__addr { font-style: normal; line-height: 1.6; color: var(--text-2); }

/* ------------------------------------------------------------------ footer */
.sf { background: var(--surface); border-top: 1px solid var(--line); padding-block: var(--s-8) var(--s-6); }
.sf__in { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: var(--s-7) var(--s-6); }
.sf__brand img { width: 88px; height: 88px; }
.sf__motto { margin-top: var(--s-3); font-family: var(--font-display); font-style: italic; font-size: 1.2rem; color: var(--text-2); }
.sf__col ul { display: grid; gap: 2px; margin-top: var(--s-3); }
.sf__col li a { display: inline-flex; align-items: center; min-height: 36px; text-decoration: none; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.sf__col a:hover { color: var(--accent-text); }
.sf__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-5); margin-top: var(--s-7); padding-top: var(--s-4); border-top: 1px solid var(--line); color: var(--text-3); }
.sf__team { color: var(--text-3); text-decoration: none; }
.sf__team:hover { color: var(--text); text-decoration: underline; }

/* ------------------------------------------------------------------ sub pages (meni, rezervacija, zasebnost) */
.sub-head { position: relative; display: grid; min-height: clamp(300px, 46vh, 460px); color: var(--on-photo); }
.sub-head__img { position: absolute; inset: 0; }
.sub-head__img::after { background: linear-gradient(180deg, color-mix(in srgb, var(--photo-scrim) 35%, transparent), color-mix(in srgb, var(--photo-scrim) 90%, transparent)); }
.sub-head__in { position: relative; align-self: end; z-index: 1; display: grid; gap: var(--s-3); padding-block: var(--s-8) var(--s-6); }
.sub-head__in .lede { color: var(--on-photo); }
.help-card { display: grid; gap: var(--s-2); margin-top: var(--s-7); padding: var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2); }
.help-card__links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); }
.help-card__links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--link); overflow-wrap: anywhere; }

/* /meni */
.menu-app { display: grid; gap: var(--s-5); min-height: 240px; }
.menu-loading { display: grid; gap: var(--s-4); }
.menu-nav { display: flex; gap: var(--s-2); overflow-x: auto; padding-bottom: var(--s-2); scrollbar-width: thin; }
.menu-nav .chip { flex: none; text-decoration: none; }
.menu-filters { display: grid; gap: var(--s-3); padding: var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2); }
.menu-filters__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.menu-filters__label { flex-basis: 100%; font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); }
.chip__n { font-family: var(--font-mono); font-size: 11px; opacity: .8; }
.dish-group { padding-top: var(--s-5); }
.dish-group__h { display: flex; align-items: baseline; gap: var(--s-3); font-size: var(--fs-h3); padding-bottom: var(--s-2); border-bottom: 1px solid var(--line-strong); }
.dish-group__n { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-3); }
.dish-group__empty { padding-block: var(--s-4); }
.legend { display: grid; gap: var(--s-4); margin-top: var(--s-5); padding: var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2); }
.legend__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: var(--s-2) var(--s-4); font-size: var(--fs-sm); color: var(--text-2); }
.legend__list li { display: flex; align-items: center; gap: var(--s-2); }

/* /rezervacija */
/* the form only works with the script; without it the <noscript> notice above gives phone and e-mail */
html:not(.js) .bk-form { display: none; }
.bk-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); align-items: end; padding: var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2); }
.bk-form .field { min-width: 0; }
.bk-form .input, .bk-form .select { width: 100%; min-width: 0; }
.bk-form__ages, .bk-form__go, .bk-form__error { grid-column: 1 / -1; }
.bk-form__ages { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: var(--s-4); }
@media (max-width: 479px) { .bk-form > .field:nth-child(-n+2) { grid-column: 1 / -1; } }
@media (min-width: 900px) {
  .bk-form { grid-template-columns: 1.3fr 1.3fr .8fr .8fr 1.2fr; }
  .bk-form__go { grid-column: auto; grid-row: 1; grid-column-start: 5; }
}
.bk-rooms { display: grid; gap: var(--s-5); margin-top: var(--s-7); }
.bk-rooms__head { display: grid; gap: var(--s-1); }
.bk-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: var(--s-4); }
.bk-room { background: var(--surface); }
/* not bookable for this search: quieter card, but the reason ("too small", "taken") keeps its full contrast (no opacity) */
.bk-room--off { background: transparent; border-style: dashed; }
.bk-room--off .room__name { color: var(--text-2); }
.bk-room--off .room__num { color: var(--text-3); }
.bk-room--on { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.bk-room__foot { display: grid; justify-items: start; gap: var(--s-3); margin-top: auto; padding-top: var(--s-2); }
.bk-room__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-3); }
.bk-frame__box { margin-block: var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; }
.bk-frame__iframe { display: block; width: 100%; height: 900px; border: 0; background: var(--surface); }
.bk-frame__status { margin-top: var(--s-4); }
.bk-frame .notice { margin-top: var(--s-4); }
.bk-frame__head h2:focus { outline: none; }

/* /zasebnost */
.site--plain main { padding-top: calc(var(--sh-h) + var(--s-6)); }
.legal { max-width: 720px; }
.legal h1 { margin-bottom: var(--s-6); }
.legal h2 { margin-top: var(--s-7); margin-bottom: var(--s-2); }
.legal p { color: var(--text-2); max-width: 64ch; overflow-wrap: anywhere; }
.legal p + p, .legal ul + p, .legal p + ul { margin-top: var(--s-3); }
.legal ul { color: var(--text-2); max-width: 64ch; padding-left: 1.2em; list-style: disc; display: grid; gap: var(--s-2); overflow-wrap: anywhere; }
.legal p:last-child { margin-top: var(--s-7); }

@media print {
  .sh, .hero__wind, .hero__pause, .sf__team { display: none !important; }
  .site--sub main, .site--plain main { padding-top: 0; }
}

/* Photo pairs: two large frames that overlap instead of small tiles (owner feedback 12. 11. 2026). */
.koca__b, .rest__a, .zima__b { grid-column: 1 / -1; width: 80%; aspect-ratio: 4 / 5; }
.koca__c, .rest__b, .zima__c { grid-column: 1 / -1; width: 62%; aspect-ratio: 4 / 5; justify-self: end; margin-top: calc(var(--s-9) * -1); position: relative; z-index: 2; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
.route__a { grid-column: 1 / -1; aspect-ratio: 4 / 5; }
@media (min-width: 900px) {
  .koca__b, .rest__a, .zima__b, .koca__c, .rest__b, .zima__c { width: auto; justify-self: stretch; }
  .koca__b { grid-column: 1 / 7; grid-row: 2; }
  .koca__c { grid-column: 6 / 11; grid-row: 2; margin-top: var(--s-10, 6rem); }
  .rest__a { grid-column: 7 / 12; grid-row: 1; }
  .rest__b { grid-column: 10 / 13; grid-row: 1; margin-top: 45%; align-self: start; }
  .zima__b { grid-column: 2 / 8; grid-row: 2; }
  .zima__c { grid-column: 7 / 12; grid-row: 2; margin-top: var(--s-10, 6rem); }
  .route__a { grid-column: 8 / 13; }
}