/* ==========================================================================
   Hostel Kosy — Design System
   Adapted from DESIGN.md ("Raus" — warm journal on cream paper) for a small
   hostel in the centre of Rijeka. Cream canvas kept; the accent palette is
   sampled from the hostel's own walls (teal dorm, orange dorm, lilac room).
   Colour is wayfinding, never decoration. No shadows, ever. Nothing centred.
   ========================================================================== */

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4 { overflow-wrap: break-word; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
/* Author display values beat the UA rule for [hidden]; restore it. */
[hidden] { display: none !important; }

/* --- Tokens --------------------------------------------------------------- */
:root {
  /* Colours */
  --charcoal:  #23212c;
  --paper:     #f7f0e1;
  --paper-2:   #f1e7d3;   /* cream-on-cream layer — our only "elevation" */
  --snow:      #ffffff;

  /* Sampled from the hostel's own walls. See DESIGN-HOSTEL-KOSY.md §2.1 */
  --teal:      #05666a;   /* six-bed dorm  */
  --teal-ink:  #04585c;   /* darkened for text — 7.25:1 on paper */
  --orange:    #e8753c;   /* eight-bed dorm */
  --lilac:     #a28ac0;   /* triple private room */

  --marigold:  #fcbd1c;
  --sky:       #a6dfff;
  --ember:     #dd5000;

  --rule:      rgba(35, 33, 44, .14);
  --rule-firm: rgba(35, 33, 44, .30);
  --muted:     rgba(35, 33, 44, .58);

  /* Type */
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --w-light: 300;
  --w-reg: 400;

  --t-caption:  12px;
  --t-body-sm:  14px;
  --t-body:     16px;
  --t-sub:      clamp(16px, 1.2vw + 13px, 18px);
  --t-h-sm:     clamp(19px, 1.1vw + 16px, 22px);
  --t-h:        clamp(22px, 1.8vw + 16px, 28px);
  --t-h-lg:     clamp(26px, 3vw + 16px, 36px);
  --t-display:  clamp(29px, 3.6vw + 16px, 40px);
  /* Extension beyond DESIGN.md's 40px cap: a photo-led hero needs a larger
     display size. The voice is preserved — weight 300, tracking -.022em, lh .95 */
  --t-hero:     clamp(36px, 6vw + 12px, 74px);

  /* Spacing */
  --s-4: 4px;   --s-6: 6px;   --s-8: 8px;   --s-12: 12px; --s-16: 16px;
  --s-20: 20px; --s-24: 24px; --s-32: 32px; --s-40: 40px; --s-48: 48px;
  --s-64: 64px; --s-96: 96px; --s-120: 120px;

  /* Radius */
  --r-chip: 12px;
  --r-card: 20px;
  --r-hero: 40px;
  --r-pill: 99px;

  /* Layout */
  --page: 1280px;
  --gutter: clamp(20px, 5vw, 48px);
  /* Half of the 80–120px section rhythm — two adjacent bands make the gap. */
  --band: clamp(40px, 4.5vw, 62px);
}

/* --- Base ----------------------------------------------------------------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--paper);
  color: var(--charcoal);
  font-family: var(--font);
  font-weight: var(--w-light);
  font-size: var(--t-body);
  line-height: 1.5;
  letter-spacing: -.008em;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-weight: var(--w-light);
  line-height: 1;
  letter-spacing: -.022em;
  text-wrap: balance;
}
h1 { font-size: var(--t-hero); line-height: .95; }
h2 { font-size: var(--t-display); line-height: .98; }
h3 { font-size: var(--t-h); line-height: 1.07; }
h4 { font-size: var(--t-h-sm); line-height: 1.15; }

::selection { background: var(--marigold); color: var(--charcoal); }

:focus-visible { outline: 2px solid var(--teal-ink); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: var(--page); margin-inline: auto; padding-inline: var(--gutter); }
.band { padding-block: var(--band); }
[id] { scroll-margin-top: 90px; }

.skip {
  position: absolute; left: var(--s-16); top: -120px; z-index: 999;
  background: var(--charcoal); color: var(--snow);
  padding: 12px 20px; border-radius: var(--r-card);
  font-size: var(--t-body-sm); text-decoration: none;
}
.skip:focus { top: var(--s-16); }

.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Shared type roles ---------------------------------------------------- */
.meta {
  font-size: var(--t-caption); font-weight: var(--w-reg);
  letter-spacing: .1em; text-transform: uppercase; line-height: 1.18;
}
.meta--teal { color: var(--teal-ink); }
.meta--muted { color: var(--muted); }
.lede { font-size: var(--t-sub); line-height: 1.45; max-width: 58ch; }
.muted { color: var(--muted); }
.small { font-size: var(--t-body-sm); line-height: 1.45; }
.nowrap { white-space: nowrap; }

.section-head { display: grid; gap: var(--s-16); margin-bottom: clamp(32px, 5vw, 56px); }
.section-head h2 { max-width: 22ch; }
.section-head .lede { max-width: 56ch; }

.rule { height: 1px; background: var(--rule); border: 0; }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-8);
  padding: 14px 24px; border-radius: var(--r-card);
  font-size: var(--t-body); font-weight: var(--w-reg); letter-spacing: -.01em;
  text-decoration: none; cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn--fill { background: var(--charcoal); color: var(--snow); }
.btn--fill:hover { background: #34313f; }
.btn--ghost { border: 1px solid var(--rule-firm); }
.btn--ghost:hover { border-color: var(--charcoal); background: var(--paper-2); }
.btn--pill { border-radius: var(--r-pill); padding: 11px 20px; font-size: var(--t-body-sm); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-12); }

.arrow { transition: transform .2s ease; }
.btn:hover .arrow, .tlink:hover .arrow { transform: translateX(3px); }

.tlink {
  color: var(--teal-ink); text-decoration: none;
  border-bottom: 1px solid rgba(4, 88, 92, .34); padding-bottom: 1px;
  display: inline-flex; align-items: baseline; gap: 6px;
}
.tlink:hover { border-bottom-color: var(--teal-ink); }

/* --- Announcement bar ----------------------------------------------------- */
.announce { background: var(--sky); font-size: var(--t-body-sm); font-weight: var(--w-reg); position: relative; }
.announce__in {
  max-width: var(--page); margin-inline: auto;
  padding: 11px calc(var(--gutter) + 28px) 11px var(--gutter);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--s-8); text-align: center; line-height: 1.35;
}
.announce__in a { color: var(--charcoal); text-decoration: none; border-bottom: 1px solid rgba(35,33,44,.4); }
.announce__in a:hover { border-bottom-color: var(--charcoal); }
.announce__x {
  position: absolute; right: max(10px, calc(var(--gutter) - 14px)); top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--r-pill); color: var(--charcoal);
}
.announce__x:hover { background: rgba(35,33,44,.09); }

/* --- Header --------------------------------------------------------------- */
.hdr { background: var(--paper); position: sticky; top: 0; z-index: 70; }
.hdr::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: var(--rule); opacity: 0; transition: opacity .2s ease; }
.hdr.is-stuck::after { opacity: 1; }
.hdr__in { display: flex; align-items: center; justify-content: space-between; gap: var(--s-20); padding-block: var(--s-16); }

.brand { display: flex; flex-direction: column; text-decoration: none; line-height: 1; }
.brand__name { font-size: clamp(23px, 2.1vw + 14px, 30px); color: var(--teal-ink); letter-spacing: -.03em; }
.brand__sub { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: 6px; font-weight: var(--w-reg); }

.nav { display: flex; align-items: center; gap: var(--s-20); }
.nav__list { display: flex; align-items: center; gap: var(--s-20); list-style: none; padding: 0; margin: 0; }
.nav__list a { font-size: var(--t-body); font-weight: var(--w-reg); text-decoration: none; padding-block: 4px; border-bottom: 1px solid transparent; }
.nav__list a:hover { border-bottom-color: var(--charcoal); }

.lang { position: relative; }
.lang__btn {
  display: inline-flex; align-items: center; gap: var(--s-6);
  border: 1px solid var(--rule-firm); border-radius: var(--r-pill);
  padding: 9px 15px; font-size: var(--t-body-sm); font-weight: var(--w-reg);
}
.lang__btn:hover { border-color: var(--charcoal); }
.lang__menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 90;
  background: var(--snow); border-radius: var(--r-chip); padding: 6px;
  min-width: 156px; list-style: none; margin: 0;
  border: 1px solid var(--rule);
}
.lang__menu li { margin: 0; }
.lang__menu button {
  display: flex; width: 100%; align-items: center; gap: var(--s-8);
  padding: 9px 12px; border-radius: 9px; font-size: var(--t-body-sm); text-align: left;
}
.lang__menu button:hover { background: var(--paper); }
.lang__menu button[aria-current="true"] { color: var(--teal-ink); }
.lang__code { font-weight: var(--w-reg); letter-spacing: .06em; }

.burger { display: none; width: 44px; height: 44px; place-items: center; border-radius: var(--r-pill); border: 1px solid var(--rule-firm); }

/* --- Hero ----------------------------------------------------------------- */
.hero { padding-top: clamp(20px, 3.4vw, 48px); padding-bottom: clamp(40px, 6vw, 88px); }
.hero__head { display: grid; gap: var(--s-20); margin-bottom: clamp(28px, 4vw, 48px); }
.hero h1 { max-width: 15ch; }
.hero__lede { max-width: 46ch; }

/* Asymmetric pair — DESIGN.md: photography sits beside copy, never beneath it */
.hero__pair { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(16px, 2.4vw, 32px); }
.hero__shot { border-radius: var(--r-hero); overflow: hidden; background: var(--paper-2); }
.hero__shot img { width: 100%; height: 100%; object-fit: cover; }
.hero__shot--tall { aspect-ratio: 4 / 5; }
.hero__shot--short { aspect-ratio: 3 / 4; margin-top: clamp(28px, 6vw, 92px); }
/* Korzo runs away from the camera; hold the frame low so the street, not the sky, fills it. */
.hero__shot--tall img { object-position: 50% 62%; }

/* Marigold enquiry bar — the single visual exclamation point */
.searchbar {
  background: var(--marigold); border-radius: var(--r-hero);
  margin-top: clamp(20px, 3vw, 36px);
  padding: var(--s-20) var(--s-24);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: center; gap: var(--s-8);
}
.field { padding-inline: var(--s-20); border-left: 1px solid rgba(35,33,44,.28); display: grid; gap: 7px; min-width: 0; }
.field:first-child { border-left: 0; padding-left: var(--s-8); }
.field__label { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: var(--w-reg); }
.field__row { display: flex; align-items: center; gap: var(--s-8); min-width: 0; }
.field input, .field select {
  background: none; border: 0; border-bottom: 1px solid rgba(35,33,44,.34);
  padding: 3px 0; font-size: var(--t-body); font-weight: var(--w-light);
  width: 100%; min-width: 0; border-radius: 0; appearance: none;
}
.field input:focus, .field select:focus { outline: none; border-bottom-color: var(--charcoal); border-bottom-width: 2px; padding-bottom: 2px; }
.field input::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
.field select { cursor: pointer; padding-right: 18px; }
.field--sel { position: relative; }
.field--sel::after {
  content: ""; position: absolute; right: 2px; bottom: 12px; pointer-events: none;
  width: 8px; height: 8px; border-right: 1px solid var(--charcoal); border-bottom: 1px solid var(--charcoal);
  transform: rotate(45deg) translate(-2px, -2px);
}
.searchbar .btn { white-space: nowrap; }

/* --- Location facts strip ------------------------------------------------- */
.facts { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.facts__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.fact { padding: clamp(24px, 3.2vw, 40px) var(--s-24) clamp(24px, 3.2vw, 40px) clamp(16px, 2.4vw, 32px); border-left: 1px solid var(--rule); }
.fact:first-child { border-left: 0; padding-left: 0; }
.fact__n { font-size: var(--t-h-lg); line-height: 1; letter-spacing: -.03em; display: block; }
.fact__t { margin-top: var(--s-12); font-size: var(--t-body-sm); color: var(--muted); line-height: 1.4; }

/* --- Editorial two-column split ------------------------------------------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.split--flip { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.split__body { display: grid; gap: var(--s-20); }
.split__body p { max-width: 54ch; }

.figure { display: grid; gap: var(--s-16); }
.figure img { border-radius: var(--r-card); width: 100%; }
.figure--hero img { border-radius: var(--r-hero); }
.figure--tall img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
.figure figcaption { font-size: var(--t-body-sm); color: var(--muted); line-height: 1.4; max-width: 40ch; }
.figure--offset { margin-top: clamp(24px, 5vw, 64px); }

/* --- Rooms ---------------------------------------------------------------- */
.rooms { display: grid; gap: clamp(56px, 8vw, 104px); }

.room { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.28fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.room__body { display: grid; gap: var(--s-20); align-content: start; }
.room__body p { max-width: 46ch; }

/* Colour is wayfinding: each room carries its own wall colour as a surface. */
.room__tag { display: inline-flex; align-items: center; gap: var(--s-8); }
.room__swatch { width: 34px; height: 14px; border-radius: 7px; background: var(--room, var(--teal)); flex: none; }

.room__facts { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.room__facts li { display: flex; gap: var(--s-16); padding-block: 11px; border-top: 1px solid var(--rule); font-size: var(--t-body-sm); }
.room__facts li:last-child { border-bottom: 1px solid var(--rule); }
.room__facts dt, .room__facts b { font-weight: var(--w-reg); min-width: 8.5em; flex: none; }
.room__facts span { color: var(--muted); }

/* Gallery: one tall frame sets the height, two stacked frames fill beside it. */
.room__shots { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s-16); }
.room__shots figure { display: grid; gap: var(--s-16); min-width: 0; }
.room__shots img { border-radius: var(--r-card); width: 100%; height: 100%; object-fit: cover; }
.room__main { aspect-ratio: 3 / 4; }
.room__main img { aspect-ratio: 3 / 4; }
.room__stack { display: grid; grid-template-rows: 1fr 1fr; gap: var(--s-16); }
.room__stack img { aspect-ratio: 3 / 2.06; }

/* --- Included ------------------------------------------------------------- */
.amen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(24px, 4vw, 56px); list-style: none; padding: 0; margin: 0; }
.amen li { padding-block: 15px; border-top: 1px solid var(--rule); display: flex; gap: var(--s-12); align-items: baseline; font-size: var(--t-body-sm); }
.amen li::before { content: ""; width: 5px; height: 5px; border-radius: 99px; background: var(--charcoal); flex: none; transform: translateY(-3px); }

/* --- Gallery -------------------------------------------------------------- */
/* Fixed row height + dense packing: tall items span two rows and every cell
   is filled edge to edge, so a chip never floats over empty canvas. */
.gal { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(150px, 15vw, 208px); grid-auto-flow: dense; gap: var(--s-16); }
.gal__item { border-radius: var(--r-card); overflow: hidden; background: var(--paper-2); position: relative; padding: 0; cursor: zoom-in; }
.gal__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.gal__item:hover img { transform: scale(1.035); }
.gal__item--tall { grid-row: span 2; }
/* The tag chip carries the room colour into the gallery. */
.gal__chip {
  position: absolute; left: 12px; bottom: 12px;
  background: var(--snow); border-radius: var(--r-chip);
  padding: 6px 11px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-weight: var(--w-reg);
  display: inline-flex; align-items: center; gap: 7px;
}
.gal__chip::before { content: ""; width: 9px; height: 9px; border-radius: 99px; background: var(--room, var(--teal)); flex: none; }

/* --- Location ------------------------------------------------------------- */
.loc { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.map { border-radius: var(--r-hero); overflow: hidden; background: var(--paper-2); border: 0; }
.map iframe { display: block; width: 100%; height: clamp(300px, 40vw, 460px); border: 0; }
.dist { list-style: none; padding: 0; margin: 0; }
.dist li { display: flex; justify-content: space-between; gap: var(--s-16); padding-block: 12px; border-top: 1px solid var(--rule); font-size: var(--t-body-sm); }
.dist li:last-child { border-bottom: 1px solid var(--rule); }
.dist b { font-weight: var(--w-reg); }
.dist span { color: var(--muted); text-align: right; white-space: nowrap; }

.directions { background: var(--paper-2); border-radius: var(--r-card); padding: clamp(20px, 2.6vw, 28px); display: grid; gap: var(--s-12); }
.directions p { max-width: 60ch; font-size: var(--t-body-sm); line-height: 1.55; }

/* --- Nearby cards --------------------------------------------------------- */
.near { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-20); }
.ncard { border-radius: var(--r-card); overflow: hidden; position: relative; background: var(--paper-2); aspect-ratio: 3 / 4; }
.ncard img { width: 100%; height: 100%; object-fit: cover; }
.ncard__panel {
  position: absolute; left: 10px; right: 10px; bottom: 10px;
  background: var(--snow); border-radius: var(--r-chip); padding: var(--s-16);
  display: grid; gap: 6px;
}
.ncard__panel h3 { font-size: var(--t-h-sm); }
.ncard__panel .small { color: var(--muted); }

/* --- Booking / contact ---------------------------------------------------- */
.book { background: var(--snow); border-radius: var(--r-hero); padding: clamp(24px, 4vw, 56px); }
.book__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.book__side { display: grid; gap: var(--s-24); align-content: start; }
.contact-list { display: grid; gap: var(--s-4); list-style: none; padding: 0; margin: 0; }
.contact-list a { text-decoration: none; border-bottom: 1px solid var(--rule-firm); }
.contact-list a:hover { border-bottom-color: var(--charcoal); }
.contact-list li { padding-block: 3px; }

.form { display: grid; gap: var(--s-20); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-20); }
.form label { display: grid; gap: 7px; font-size: var(--t-body-sm); font-weight: var(--w-reg); min-width: 0; }
.form input, .form select, .form textarea {
  background: none; border: 0; border-bottom: 1px solid var(--rule-firm);
  padding: 9px 0; font-size: var(--t-body); font-weight: var(--w-light);
  border-radius: 0; appearance: none; width: 100%; min-width: 0;
}
.form select { cursor: pointer; }
.form textarea { resize: vertical; min-height: 88px; line-height: 1.5; }
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none; border-bottom-color: var(--charcoal); border-bottom-width: 2px; padding-bottom: 8px;
}
.form input[aria-invalid="true"], .form textarea[aria-invalid="true"] { border-bottom-color: var(--ember); }
.form__err { color: var(--ember); font-size: var(--t-caption); min-height: 1em; }
.form__note { font-size: var(--t-caption); color: var(--muted); line-height: 1.45; max-width: 52ch; }

/* --- Practical info ------------------------------------------------------- */
.info { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(32px, 5vw, 72px); }
.info__item { padding-block: var(--s-24); border-top: 1px solid var(--rule); display: grid; gap: var(--s-8); align-content: start; }
.info__item h3 { font-size: var(--t-h-sm); }
.info__item p { font-size: var(--t-body-sm); color: var(--muted); max-width: 44ch; line-height: 1.5; }

/* --- Footer --------------------------------------------------------------- */
.ftr { border-top: 1px solid var(--rule); }
.ftr__in { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); padding-block: clamp(40px, 5vw, 64px) var(--s-32); }
.ftr h2 { font-size: clamp(23px, 2.1vw + 14px, 30px); color: var(--teal-ink); letter-spacing: -.03em; }
.ftr__col { display: grid; gap: var(--s-12); align-content: start; }
.ftr__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-8); }
.ftr__col a { text-decoration: none; font-size: var(--t-body-sm); border-bottom: 1px solid transparent; }
.ftr__col a:hover { border-bottom-color: var(--charcoal); }
.ftr__base { padding-block: var(--s-20) var(--s-40); border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: var(--s-16) var(--s-32); justify-content: space-between; }
.ftr__base p, .ftr__base a { font-size: var(--t-caption); color: var(--muted); line-height: 1.5; }
.ftr__base a { text-decoration: underline; text-underline-offset: 2px; }
.credits { max-width: 74ch; }

/* --- Lightbox ------------------------------------------------------------- */
.lb { position: fixed; inset: 0; z-index: 200; background: rgba(35,33,44,.94); display: none; place-items: center; padding: clamp(16px, 4vw, 48px); }
.lb.is-open { display: grid; }
.lb img { max-width: 100%; max-height: 82vh; border-radius: var(--r-card); object-fit: contain; }
.lb__cap { color: rgba(255,255,255,.75); font-size: var(--t-body-sm); margin-top: var(--s-16); text-align: center; }
.lb__btn {
  position: absolute; width: 48px; height: 48px; display: grid; place-items: center;
  color: var(--snow); border-radius: var(--r-pill); border: 1px solid rgba(255,255,255,.28);
}
.lb__btn:hover { background: rgba(255,255,255,.14); }
.lb__x { top: clamp(12px, 3vw, 28px); right: clamp(12px, 3vw, 28px); }
.lb__prev { left: clamp(8px, 2.4vw, 28px); top: 50%; transform: translateY(-50%); }
.lb__next { right: clamp(8px, 2.4vw, 28px); top: 50%; transform: translateY(-50%); }

/* --- Mobile action bar ---------------------------------------------------- */
.mbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; background: var(--paper); border-top: 1px solid var(--rule); padding: 10px var(--s-16) calc(10px + env(safe-area-inset-bottom)); gap: var(--s-8); }
.mbar .btn { flex: 1; padding: 13px 12px; font-size: var(--t-body-sm); border-radius: var(--r-card); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .gal { grid-template-columns: repeat(3, 1fr); grid-auto-rows: clamp(140px, 17vw, 190px); }
  .near { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 960px) {
  .nav__list, .lang { display: none; }
  .burger { display: grid; }
  .nav.is-open .nav__list {
    display: grid; position: absolute; right: var(--gutter); top: calc(100% + 6px);
    background: var(--snow); border: 1px solid var(--rule); border-radius: var(--r-card);
    padding: var(--s-16); gap: var(--s-12); min-width: 210px; z-index: 95;
  }
  .nav.is-open .lang { display: block; position: absolute; right: var(--gutter); top: calc(100% + 6px); transform: translateY(0); }
  .nav.is-open .lang { display: none; }

  .hero__pair { grid-template-columns: 1fr 1fr; }
  .hero__shot--tall { aspect-ratio: 3 / 4; }
  .hero__shot--short { aspect-ratio: 3 / 4; margin-top: 0; }

  .searchbar { grid-template-columns: 1fr 1fr; gap: var(--s-16); border-radius: var(--r-card); }
  .field { border-left: 0; padding-inline: var(--s-8); }
  .searchbar .btn { grid-column: 1 / -1; width: 100%; }

  .facts__grid { grid-template-columns: repeat(2, 1fr); }
  .fact:nth-child(3) { border-left: 0; padding-left: 0; }
  .fact:nth-child(3), .fact:nth-child(4) { border-top: 1px solid var(--rule); }

  .split, .split--flip, .loc, .book__grid { grid-template-columns: 1fr; }
  .figure--offset { margin-top: 0; }
  .room { grid-template-columns: 1fr; }
  .amen { grid-template-columns: repeat(2, 1fr); }
  .info { grid-template-columns: 1fr; }
  .ftr__in { grid-template-columns: 1fr 1fr; }
  .ftr__brand { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  .hero__pair { grid-template-columns: 1fr; }
  .hero__shot--tall { aspect-ratio: 4 / 3; }
  .hero__shot--short { display: none; }
  .searchbar { grid-template-columns: 1fr; }
  .facts__grid { grid-template-columns: 1fr 1fr; }
  .gal { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(120px, 30vw, 170px); }
  .near { grid-template-columns: 1fr 1fr; }
  .room__shots { grid-template-columns: 1fr; }
  .room__main, .room__main img { aspect-ratio: 4 / 3; }
  .room__stack { grid-template-rows: auto; grid-template-columns: 1fr 1fr; }
  .room__stack img { aspect-ratio: 4 / 3; }
  .form__row { grid-template-columns: 1fr; }
  .amen { grid-template-columns: 1fr; }
  .ftr__in { grid-template-columns: 1fr; }
  .mbar { display: flex; }
  body { padding-bottom: 68px; }
  .announce__in { justify-content: flex-start; text-align: left; }
}

@media (max-width: 420px) {
  .near { grid-template-columns: 1fr; }
  .gal { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 118px; }
  .room__stack { grid-template-columns: 1fr; }
}

/* --- Print ---------------------------------------------------------------- */
@media print {
  .announce, .hdr, .searchbar, .mbar, .lb, .map { display: none !important; }
  body { background: #fff; }
  .book { background: #fff; }
}