/* tokens */
/* ==========================================================================
   Design tokens — APPROVED (Phase 1, June 2026).
   Palette and type from Lewis's approved homepage design (Design/approved-design.pdf).
   Two accents over a warm cream ground: terracotta (primary) + sage (secondary/footer).
   Fonts are self-hosted (woff2 in /assets/fonts) — no runtime CDN, no build step.

   Type assignment per the signed-off spec: headings use Source Sans 3, body uses PT Serif.
   Both are SIL OFL (Source Sans 3 © Adobe; PT Serif © ParaType) — see assets/fonts.
   ========================================================================== */

/* --- Self-hosted fonts --------------------------------------------------- */
/* Source Sans 3 — variable woff2 (covers 400–700 on the weight axis), headings + UI. */
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/fonts/source-sans-3-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/fonts/source-sans-3-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* PT Serif — body copy. Regular, bold, and regular-italic. */
@font-face {
  font-family: "PT Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/pt-serif-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "PT Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/pt-serif-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "PT Serif";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/pt-serif-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "PT Serif";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/pt-serif-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "PT Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/pt-serif-400-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "PT Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/pt-serif-400-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* --- Colour (approved) ------------------------------------------------- */
  --color-bg:          #ffffff; /* white ground (design base) */
  --color-surface:     #ffffff; /* cards */
  --color-surface-alt: #f5f4ef; /* warm sand — band accent only */
  --color-text:        #3a3328; /* warm near-black ink */
  --color-muted:       #6b6258; /* warm secondary copy */
  --color-line:        #e7e2d7; /* hairlines / dividers */
  --color-heading:     #8a7c6b; /* warm taupe — light display headings */
  --color-card-sage:   #eaece4; /* very pale sage — room card background */

  /* Terracotta — PRIMARY: hero/booking CTAs, links, "discover more", brush underline */
  --color-accent:      #ba481b;
  --color-accent-ink:  #ffffff;
  --color-accent-deep: #993a14; /* hover/active */

  /* Sage — SECONDARY: "Explore"/"Enquire" buttons and the footer band */
  --color-secondary:     #8a9977;
  --color-secondary-ink: #ffffff;
  --color-secondary-deep:#74835f; /* hover/active */
  --color-footer-bg:     #8a9977;
  --color-footer-ink:    #ffffff;

  --color-active: var(--color-accent); /* active nav highlight */

  /* --- Typography (approved) -------------------------------------------- */
  --font-heading: "Source Sans 3", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --font-body:    "PT Serif", Georgia, "Times New Roman", serif;
  /* Back-compat aliases (older rules referenced --font-serif / --font-sans) */
  --font-serif: var(--font-body);
  --font-sans:  var(--font-heading);
  --font-base-size: 1rem;
  --line-height: 1.65;
  --weight-display: 300; /* light weight for large display headings (design) */

  /* --- Spacing scale ----------------------------------------------------- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;

  /* --- Layout ------------------------------------------------------------ */
  --measure: 64ch;
  /* Layout model: a centred CONTENT RAIL that text + contained rows respect; full-bleed elements
     ignore it and run to the true viewport edge (no outer page cap). --rail-pad is the side
     padding that pulls content onto the rail — full-bleed rows reuse it to align their inner edge. */
  --content-max: 1400px;
  --gutter: clamp(1.25rem, 4vw, 4rem); /* min side padding before the rail kicks in (narrow screens) */
  --rail-pad: max(var(--gutter), calc((100% - var(--content-max)) / 2));
  --container: 1180px;  /* narrow column for prose-only blocks (.container--narrow) */
  --radius: 8px;
  --radius-lg: 18px; /* the larger rounded cards (booking, restaurant, room images) */
  /* "Almost full-bleed" element (e.g. home experience image): full-bleed in size but inset a hair
     from the viewport edge with rounded corners. */
  --bleed-inset: 20px;
  --bleed-radius: 28px;
}

/* ----------------------------------------------------------------------------
   A11y note (flagged for Lewis/Matt): white text on the approved sage #8a9977
   measures ~3.0:1 — meets WCAG AA for large/bold UI text and components, but is
   below 4.5:1 for small body text (e.g. the footer address). If we want strict
   AA on small footer text, drop --color-footer-bg to ~#5f6b48 (~5.7:1). Left at
   the approved sage by default to match the signed-off design.
   ---------------------------------------------------------------------------- */


/* base */
/* ==========================================================================
   Base — global foundation shared by every component (no component-specific rules).
   Reset, typography, layout primitives, buttons/links, accessibility. Reads tokens.css.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { font-size: var(--font-base-size); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: var(--line-height);
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: 1.15;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--space-2);
}

p { margin: 0 0 var(--space-2); }
img, iframe, svg { max-width: 100%; }

a { color: var(--color-accent); }
a:hover { color: var(--color-accent-deep); }

/* Accessibility: skip link + visible focus ---------------------------------- */
.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -3.5rem;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
  transition: top 0.15s ease;
  z-index: 100;
}
.skip-link:focus { top: var(--space-2); }
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Layout primitives — full-width <main>, centred .container, full-width .band
   -------------------------------------------------------------------------- */
/* Full-bleed elements run to the true viewport edge; .container pulls content onto the centred
   1400px rail via symmetric rail padding (no max-width needed). */
main { display: block; width: 100%; overflow-x: clip; }

.container { width: 100%; padding-inline: var(--rail-pad); }
/* Opt-in narrow column for prose-only blocks (e.g. legal/contact copy). */
.container--narrow { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

.band { padding-block: var(--space-6); }
.band--alt { background: var(--color-surface-alt); }

/* Inner pages drop their content straight into a .container under <main>. */
main > .container { padding-block: var(--space-4) var(--space-6); }

/* Display headings — warm taupe, light weight (design). Defined here (after the h1–h4 base)
   so the colour sticks; component CSS that needs a different size still cascades on top. */
.hero__title, .section-title, .page-head h1,
.feature__text h2, .feature-grid__text h2,
.restaurant-feature__card h2, .room-gallery__title,
.content-section h2 {
  color: var(--color-heading);
  font-weight: var(--weight-display);
}

/* Centred section titles (Rooms / Packages / Testimonials) ------------------ */
.section-title {
  text-align: center;
  font-size: clamp(2rem, 1.3rem + 2.2vw, 3rem);
  font-weight: var(--weight-display);
  letter-spacing: 0.01em;
  margin-bottom: var(--space-3);
}
.section-intro {
  max-width: var(--measure);
  margin: 0 auto var(--space-4);
  text-align: center;
  color: var(--color-muted);
}

/* --------------------------------------------------------------------------
   Buttons & inline "more" links
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 0.78em 1.7em;
  border: 1px solid transparent;
  border-radius: 999px; /* pill */
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); }
.btn--primary:hover { background: var(--color-accent-deep); border-color: var(--color-accent-deep); color: #fff; }
.btn--secondary { background: var(--color-secondary); color: var(--color-secondary-ink); border-color: var(--color-secondary); }
.btn--secondary:hover { background: var(--color-secondary-deep); border-color: var(--color-secondary-deep); color: #fff; }
.btn--ghost { background: transparent; color: var(--color-secondary-deep); border-color: var(--color-secondary); }
.btn--ghost:hover { background: var(--color-secondary); color: #fff; }
.btn--pill {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-line);
  border-radius: 999px;
  padding-inline: 2em;
}
.btn--pill:hover { border-color: var(--color-accent); color: var(--color-accent); }

.link-more {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 2px;
}
.link-more:hover { color: var(--color-accent-deep); border-color: var(--color-accent-deep); }

/* Image placeholders (shown until a photo is assigned to a slot) ------------- */
.img-placeholder {
  background: repeating-linear-gradient(45deg, #e9e5d8, #e9e5d8 12px, #e2ded2 12px, #e2ded2 24px);
  border-radius: var(--radius);
}
.img { object-fit: cover; }

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


/* component: booking-bar */
/* BookingBar ---------------------------------------------------------------- */
.booking-bar { position: relative; }

/* Seam straddle: a zero-height anchor sits exactly on the hero/next-band boundary; the card is
   pulled up by half its own height so its centre lands on the seam, whatever the card height.
   The small extra nudge keeps the white form (below the label) sitting on the line. */
.booking-seam { position: relative; height: 0; z-index: 5; }
.booking-seam .booking-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  transform: translateY(calc(-50% - 1.25rem));
}
/* "Book a room" — same as the nav (heading font, light, taupe). */
.booking-bar__label {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 400;
  margin: 0 0 var(--space-2);
  color: var(--color-heading);
}
.booking-bar__form {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  background: var(--color-surface);
  border-radius: 40px;
  padding: var(--space-3) var(--space-3);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.10);
}
/* Thin vertical dividers between the sections. The hidden inputs (portal/lang/rooms/sr) are the
   form's first children, so the first visible field would otherwise get a stray left divider. */
.booking-bar__form > * + * { border-left: 1px solid var(--color-line); }
.booking-bar__form > .field--date:first-of-type { border-left: 0; }

.field { display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; padding: var(--space-3) var(--space-3); }
.field--date { flex: 1 1 200px; }
.field--occ { flex: 0 1 124px; }
.field label, .field__label {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
}
/* Native date input — the no-JS fallback look (room booking-card still uses .field input). */
.field input {
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--color-text);
}

/* Date facade ("26 /June ⌄") — shown only when ui.js enhances the field. */
.bdate__control { position: relative; min-height: 2.8rem; display: flex; align-items: center; }
.field--date .bdate__input { width: 100%; border: 0; border-radius: 0; padding: 0.3rem 0; background: transparent; font-size: 1.05rem; }
.bdate__face { display: none; }
.is-enhanced .bdate__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 2; }
.is-enhanced .bdate__face { display: flex; align-items: baseline; width: 100%; }
.bdate__value { display: inline-flex; align-items: baseline; gap: 0.2rem; }
.bdate__day { font-family: var(--font-heading); font-weight: 400; font-size: 2.6rem; line-height: 1; color: var(--color-text); }
.bdate__mon { font-family: var(--font-heading); font-size: 1.05rem; color: var(--color-text); }
.bdate__chev { width: 1.15rem; height: 1.15rem; color: var(--color-muted); margin-left: auto; align-self: center; flex: none; }

.booking-bar__submit { align-self: center; margin-left: var(--space-3); flex: 0 0 auto; }

/* Guest stepper — circular outline −/＋ around a large number. */
.stepper { display: inline-flex; align-items: center; gap: var(--space-2); }
.stepper__btn { width: 2.1rem; height: 2.1rem; border: 1px solid var(--color-line); border-radius: 999px; background: transparent; color: var(--color-muted); font-size: 1.05rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.stepper__btn:hover { border-color: var(--color-accent); color: var(--color-accent); }
.stepper input[type="number"] { width: 2.2ch; text-align: center; border: 0; background: transparent; padding: 0; font-family: var(--font-heading); font-size: 1.8rem; color: var(--color-text); -moz-appearance: textfield; }
.stepper input[type="number"]::-webkit-outer-spin-button,
.stepper input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Rooms & guests dropdown ---------------------------------------------------- */
.field--rooms { flex: 1 1 210px; position: relative; }
.occ__summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 0.5rem; }
.occ__summary::-webkit-details-marker { display: none; }
.occ__summary-row { display: flex; align-items: center; gap: 0.5rem; }
.occ__summary-text { font-family: var(--font-heading); font-size: 1.25rem; color: var(--color-text); }
.occ__summary .bdate__chev { margin-left: auto; align-self: center; }

.occ__panel { padding-top: var(--space-3); }
.occ.is-enhanced > .occ__panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 320px;
  z-index: 40;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.16);
  padding: var(--space-3);
}
.occ__room + .occ__room { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-line); }
.occ__room-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.occ__room-title { font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem; color: var(--color-text); }
.occ__remove { background: none; border: 0; color: var(--color-accent); font-family: var(--font-heading); font-size: 0.8rem; cursor: pointer; padding: 0; }
.occ__line { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 0.4rem 0; }
.occ__line-label { font-family: var(--font-heading); font-size: 1rem; color: var(--color-text); }
.occ__line .stepper input[type="number"] { font-size: 1.35rem; }
.occ__add { margin-top: var(--space-3); background: none; border: 0; color: var(--color-accent); font-family: var(--font-heading); font-weight: 600; font-size: 0.92rem; cursor: pointer; padding: 0; }

@media (max-width: 720px) {
  /* Hero is stacked on mobile; the card flows normally instead of straddling a seam. */
  .booking-seam { height: auto; }
  .booking-seam .booking-bar { position: static; transform: none; margin-block: var(--space-3); }
  .booking-bar__form { flex-direction: column; align-items: stretch; }
  .booking-bar__form > * + * { border-left: 0; border-top: 1px solid var(--color-line); }
  .booking-bar__submit { margin-left: 0; }
  .occ.is-enhanced > .occ__panel { position: static; min-width: 0; box-shadow: none; border: 0; padding-inline: 0; }
}


/* component: booking-card */
/* BookingCard (room template) ---------------------------------------------- */
.booking-card {
  position: sticky;
  top: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
  display: grid;
  gap: var(--space-3);
}
.booking-card__title { font-size: 1.35rem; font-weight: 400; margin: 0; }
.booking-card__form { display: grid; gap: var(--space-2); }
/* In the vertical card the fields stack full-width (the flex-basis from the hero bar is moot). */
.booking-card__form .field input { width: 100%; }
.booking-card__submit { width: 100%; margin-top: var(--space-1); }


/* component: feature */
/* Feature (split media + prose) -------------------------------------------- */
.feature__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: center; }
.feature--flip .feature__media { order: 2; }
.feature__img { aspect-ratio: 4 / 3; width: 100%; height: 100%; border-radius: var(--radius-lg); }
.feature__media .img-placeholder { aspect-ratio: 4 / 3; width: 100%; border-radius: var(--radius-lg); }
.feature__text h2 { font-size: clamp(1.7rem, 1.1rem + 2vw, 2.4rem); font-weight: var(--weight-display); margin-bottom: var(--space-3); }
.feature__text .link-more { margin-top: var(--space-2); }

/* Full-bleed variant (home "experience"): the image runs to the page edge; the prose is guttered.
   The inner is NOT a .container, so the media column starts at x=0 (left) — or x=max (when flipped). */
.feature--bleed .feature__inner { gap: clamp(2rem, 4vw, 4.5rem); align-items: stretch; }
/* "Almost full-bleed": image is full-bleed in size but inset from the viewport edge with rounded
   corners. The inset goes on the bleed side (left by default, right when flipped). */
.feature--bleed .feature__media { height: 100%; margin-left: var(--bleed-inset); }
.feature--bleed.feature--flip .feature__media { margin-left: 0; margin-right: var(--bleed-inset); }
.feature--bleed .feature__img,
.feature--bleed .feature__media .img-placeholder { aspect-ratio: 4 / 3; height: 100%; width: 100%; border-radius: var(--bleed-radius); }
/* Text sits in the right half but its outer edge respects the rail (so it doesn't run to the
   viewport edge); the image bleeds to the left viewport edge. */
.feature--bleed .feature__text { align-self: center; padding-right: var(--rail-pad); }
.feature--bleed.feature--flip .feature__text { padding-right: 0; padding-left: var(--rail-pad); }

/* The home experience row sits directly under the floating booking bar (which straddles the
   hero/row-2 seam), so give it extra top clearance so the image doesn't crowd the bar. */
.booking-seam + .feature { padding-top: calc(var(--space-6) + 3.5rem); }

@media (max-width: 720px) {
  .feature--bleed .feature__text { padding-inline: var(--gutter); }
  .feature--bleed .feature__img,
  .feature--bleed .feature__media .img-placeholder { aspect-ratio: 16 / 10; }
  /* On mobile the booking bar flows inline (no overlap) — no extra clearance needed. */
  .booking-seam + .feature { padding-top: var(--space-5); }
}

@media (max-width: 720px) {
  .feature__inner { grid-template-columns: 1fr; gap: var(--space-3); }
  .feature--flip .feature__media { order: 0; }
}


/* component: feature-grid */
/* FeatureGrid (prose + 2×2 image grid) ------------------------------------- */
.feature-grid__inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--space-5);
  align-items: center;
}
.feature-grid--flip .feature-grid__media { order: -1; }

.feature-grid__text h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem);
  font-weight: var(--weight-display);
  margin-bottom: var(--space-3);
}

.feature-grid__media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
.feature-grid__img,
.feature-grid__media .img-placeholder {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: 100%;
  border-radius: var(--radius);
}

@media (max-width: 720px) {
  .feature-grid__inner { grid-template-columns: 1fr; gap: var(--space-3); }
  .feature-grid--flip .feature-grid__media { order: 0; }
}


/* component: hero */
/* Hero ---------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--color-bg);
  min-height: clamp(600px, 80vh, 860px);
  display: flex;
  align-items: center;
}

/* Airy, type-led hero: a tall accent photo on the right (bleeds to the top + right viewport
   edges, full height down to the booking-bar seam); the light heading is the focus over white. */
.hero__media { position: absolute; top: 0; right: 0; width: clamp(300px, 40%, 640px); height: 100%; z-index: 0; }
.hero__img { width: 100%; height: 100%; border-radius: 0; aspect-ratio: auto; object-fit: cover; }

.hero .container { position: relative; z-index: 1; width: 100%; }
.hero__text { max-width: 42rem; }

/* Per-line terracotta underline via text-decoration (it wraps with each line, like the design). */
.hero__title {
  font-size: clamp(2.8rem, 1.8rem + 3.6vw, 4.6rem);
  font-weight: var(--weight-display);
  line-height: 1.28;
  margin: 0;
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.26em;
  text-decoration-skip-ink: none;
}
.hero__tagline {
  margin-top: var(--space-4);
  margin-bottom: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  max-width: 40ch;
}

@media (max-width: 900px) {
  .hero__media { width: 40%; }
  .hero__text { max-width: 28rem; }
}

@media (max-width: 720px) {
  .hero { display: block; min-height: 0; }
  .hero__media { position: static; width: 100%; height: auto; }
  .hero__img { aspect-ratio: 16 / 10; height: auto; }
  .hero__text { max-width: none; padding-block: var(--space-4); }
}


/* component: packages */
/* Packages accordion -------------------------------------------------------- */
.package-list { max-width: 920px; margin-inline: auto; display: grid; gap: var(--space-2); }
.package { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius); overflow: hidden; position: relative; }
.package[open] { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06); }

.package__summary { list-style: none; cursor: pointer; padding: var(--space-3) var(--space-5) var(--space-3) var(--space-3); display: flex; flex-direction: column; gap: 0.25rem; }
.package__summary::-webkit-details-marker { display: none; }
.package__summary::after { content: "\203A"; position: absolute; right: var(--space-3); top: var(--space-3); font-size: 1.6rem; line-height: 1; color: var(--color-muted); transform: rotate(90deg); transition: transform 0.15s ease; }
.package[open] .package__summary::after { transform: rotate(-90deg); }
.package__validity { font-family: var(--font-heading); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); }
.package__name { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 600; }

.package__body { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-4); padding: 0 var(--space-3) var(--space-3); align-items: center; }
.package__detail p { margin-bottom: var(--space-1); }
.package__price { font-weight: 700; margin-top: var(--space-2) !important; }
.package__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3) !important; margin-bottom: 0 !important; }
.package__media .img-placeholder, .package__media .img { aspect-ratio: 16 / 10; max-height: 220px; border-radius: var(--radius); width: 100%; }

@media (max-width: 720px) {
  .package__body { grid-template-columns: 1fr; }
}


/* component: restaurant-feature */
/* Restaurant feature (full-bleed photo + overlapping card) ------------------ */
.restaurant-feature { position: relative; min-height: 480px; padding-block: clamp(4rem, 8vw, 7rem); overflow: hidden; display: flex; align-items: center; }
.restaurant-feature__media { position: absolute; inset: 0; z-index: 0; }
.restaurant-feature__img { width: 100%; height: 100%; border-radius: 0; aspect-ratio: auto; }
.restaurant-feature .container { position: relative; z-index: 1; width: 100%; display: flex; justify-content: flex-end; }
.restaurant-feature__card { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-4); max-width: 420px; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.14); }
.restaurant-feature__card h2 { font-size: 1.8rem; font-weight: var(--weight-display); margin-bottom: var(--space-2); }
.restaurant-feature__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-3) 0 0; }

@media (max-width: 720px) {
  .restaurant-feature .container { justify-content: stretch; }
  .restaurant-feature__card { max-width: none; }
}


/* component: reviews */
/* Reviews slider ------------------------------------------------------------ */
.reviews__slider { position: relative; }

.reviews__track {
  display: grid;
  grid-auto-flow: column;
  /* Card width keyed to the rail (~3 across the rail), not the full viewport. */
  grid-auto-columns: calc((min(var(--content-max), 100%) - 2 * var(--space-3)) / 3);
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  /* First card aligns to the rail's left edge; the track scrolls out to the right viewport edge. */
  padding: 0 var(--gutter) 0 var(--rail-pad);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  align-items: stretch;
  scrollbar-width: none;
}
.reviews__track::-webkit-scrollbar { display: none; }
.reviews__item { scroll-snap-align: start; }

.review {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.review blockquote { margin: 0; flex: 1; font-style: italic; color: var(--color-text); }
.review figcaption { margin-top: var(--space-3); font-family: var(--font-heading); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }

.review-media { height: 100%; }
.review-media .img-placeholder, .review-media .img { height: 100%; min-height: 260px; width: 100%; border-radius: var(--radius-lg); }

/* Prev/next controls — revealed by ui.js only when JS is available */
.reviews__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 2.8rem;
  height: 2.8rem;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-accent);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
.reviews__nav:hover { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.reviews__nav--prev { left: calc(var(--rail-pad) - 1.4rem); }
.reviews__nav--next { right: var(--space-2); }
.reviews__nav[disabled] { opacity: 0.35; cursor: default; }
.reviews__nav[disabled]:hover { background: var(--color-surface); color: var(--color-accent); border-color: var(--color-line); }

@media (max-width: 900px) {
  .reviews__track { grid-auto-columns: calc((100% - var(--space-3)) / 2); }
}
@media (max-width: 720px) {
  .reviews__track { grid-auto-columns: 85%; }
  .reviews__nav { display: none; }
}


/* component: room-card */
/* Room grid + card --------------------------------------------------------- */
.room-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(3, 1fr); }

.room-card {
  background: var(--color-card-sage); /* very pale sage */
  border: 1px solid var(--color-line);
  border-radius: 0; /* square corners (design) */
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.room-card__link { text-decoration: none; color: inherit; display: block; }
.room-card__img { aspect-ratio: 3 / 2; width: 100%; border-radius: 0; }
.room-card__name {
  margin: var(--space-4) var(--space-4) 0;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
}
.room-card__meta { margin: var(--space-2) var(--space-4) 0; color: var(--color-muted); font-size: 0.95rem; }
.room-card__price { margin: var(--space-2) var(--space-4) 0; font-weight: 700; }
.room-card__price span { font-weight: 400; color: var(--color-muted); font-size: 0.88rem; }
/* Square button on the rooms section (design: 0–2px radius, not a pill). */
.room-card__cta { align-self: stretch; margin: var(--space-4); margin-top: var(--space-4); border-radius: 2px; }

.home-rooms__more { text-align: center; margin-top: var(--space-4); }

@media (max-width: 900px) { .room-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .room-grid { grid-template-columns: 1fr; } }


/* component: room-detail */
/* Room detail (single room template) --------------------------------------- */
.room-hero {
  aspect-ratio: 2 / 1;
  width: 100%;
  border-radius: var(--radius-lg);
  margin-block: var(--space-3) var(--space-5);
}

.room-body {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  align-items: start;
}
.room-body__details > :first-child { margin-top: 0; }

/* Fact cards — Sleeps/bed and price, sitting beside the intro (june26). */
.room-facts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block: var(--space-4); }
.room-fact {
  flex: 1 1 160px;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.room-fact__icon { width: 1.8rem; height: 1.8rem; color: var(--color-muted); margin-bottom: 0.3rem; }
.room-fact__lead { font-family: var(--font-heading); font-weight: 600; font-size: 1.05rem; }
.room-fact__sub { color: var(--color-muted); font-size: 0.9rem; }
.room-fact__label { font-family: var(--font-heading); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.room-fact__price { font-family: var(--font-heading); font-weight: 700; font-size: 1.4rem; }
.room-fact__price span { font-weight: 400; font-size: 0.85rem; color: var(--color-muted); }

/* Amenities — two columns, each row ruled (the june26 "This room offers" list). columns:2 flows
   top-to-bottom then across, matching the artboard's column ordering. */
.room-offers__title { font-family: var(--font-heading); font-size: 0.95rem; font-weight: 700; margin: var(--space-3) 0 0; }
.amenities { columns: 2; column-gap: var(--space-4); list-style: none; padding: 0; margin: var(--space-2) 0 0; }
.amenities li {
  break-inside: avoid;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--color-line);
  font-family: var(--font-heading);
  font-size: 0.95rem;
}
.amenities__icon { width: 1.4rem; height: 1.4rem; flex: none; object-fit: contain; }

/* Gallery — on the cream band, 2×2 grid. */
.room-gallery__title { font-size: 1.6rem; font-weight: var(--weight-display); margin-bottom: var(--space-3); }
.gallery__grid { display: grid; gap: var(--space-2); grid-template-columns: repeat(2, 1fr); }
.gallery__img, .gallery__grid .img-placeholder { aspect-ratio: 3 / 2; width: 100%; border-radius: var(--radius); }

@media (max-width: 720px) {
  .room-body { grid-template-columns: 1fr; }
  .amenities { columns: 1; }
}


/* component: site-footer */
/* SiteFooter ---------------------------------------------------------------- */
.site-footer { background: var(--color-footer-bg); color: var(--color-footer-ink); }
.site-footer__inner {
  display: grid;
  grid-template-columns: 1.6fr 1.2fr 1fr 1fr;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-5) var(--rail-pad);
}
.site-footer a { color: var(--color-footer-ink); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

.brand--footer__logo { height: 2.6rem; width: auto; display: block; }
.footer-copy { margin: var(--space-2) 0 0; font-size: 0.82rem; opacity: 0.85; }

.footer-col { font-size: 0.9rem; line-height: 1.8; }
.footer-contact address { font-style: normal; }
.footer-legal p { margin: 0; }
.footer-social { list-style: none; margin: 0; padding: 0; }

@media (max-width: 900px) { .site-footer__inner { grid-template-columns: 1fr 1fr; row-gap: var(--space-4); } }
@media (max-width: 720px) { .site-footer__inner { grid-template-columns: 1fr; } }


/* component: site-header */
/* SiteHeader ---------------------------------------------------------------- */
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--rail-pad);
}

.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand__logo { height: 2.4rem; width: auto; display: block; }

.site-nav { margin-left: var(--space-3); }
.site-nav ul { display: flex; flex-wrap: wrap; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.site-nav a { text-decoration: none; color: var(--color-heading); font-family: var(--font-heading); font-size: 1.15rem; }
.site-nav a:hover { color: var(--color-accent); }
.site-nav a[aria-current="page"] { color: var(--color-text); font-weight: 600; }

.site-header__actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }

/* Language switch — a light pill with a raised white "inner pill" on the active language
   (no dividing line, no dark half). */
.lang-switch { display: inline-flex; align-items: center; gap: 2px; border-radius: 999px; padding: 4px; font-family: var(--font-heading); font-size: 0.9rem; background: #ece9e1; }
.lang-switch__opt { padding: 0.32rem 0.95rem; border-radius: 999px; text-decoration: none; color: var(--color-muted); }
.lang-switch__opt.is-current { background: #ffffff; color: var(--color-text); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }
a.lang-switch__opt:hover { color: var(--color-accent); }

/* Nav CTA — sentence case, a touch larger + more padding than the utility pills. Fixed min-width
   so the EN ("Rooms & Suites") and IT ("Camere") labels occupy the same space and the language
   switch beside it doesn't jump position when the language changes. */
.nav-book { text-transform: none; letter-spacing: 0.015em; font-size: 1.05rem; padding: 0.6em 1.7em; min-width: 13rem; }

/* Solid variant (inner pages): opaque bar + hairline */
.site-header--solid { background: var(--color-bg); border-bottom: 1px solid var(--color-line); }

/* Overlay variant (homepage): transparent, floats over the hero photo bleed */
.site-header--overlay {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 30;
  background: transparent;
}

@media (max-width: 720px) {
  /* On small screens the overlay would collide with the stacked hero, so go solid. */
  .site-header--overlay { position: static; background: var(--color-bg); border-bottom: 1px solid var(--color-line); }
  .site-header__inner { flex-wrap: wrap; }
  .site-nav { margin-left: 0; order: 3; flex-basis: 100%; }
  .site-header__actions { margin-left: auto; }
}


/* legacy (pending componentisation) */
/* ==========================================================================
   Legacy holding pen — rows NOT yet extracted into components.
   These keep the page working as we componentise top-to-bottom; peel each block out
   into src/components/<name>/<name>.css as it's rebuilt to spec, and delete it here.
   Currently pending: About split, Rooms grid/card, Restaurant feature, Packages,
   Testimonials, Footer, and the inner-page components.
   ========================================================================== */

/* --- Inner-page components (shared shell — on-brand via tokens, not final) -- */
.page-head { margin-bottom: var(--space-4); }
.page-head h1 {
  display: inline-block;
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem);
  font-weight: var(--weight-display);
  padding-bottom: 0.2em;
  border-bottom: 3px solid var(--color-accent);
}
.page-intro { max-width: var(--measure); color: var(--color-muted); font-size: 1.1rem; }

/* Lead wrapper for pages whose body is full-width bands (About): a centred title block that
   doesn't carry the big bottom padding of `main > .container`, so the first band sits close. */
.page-lead { max-width: var(--container); margin-inline: auto; padding: var(--space-4) var(--space-3) 0; }
.page-lead .page-head { margin-bottom: 0; }

.content-sections { display: grid; gap: var(--space-5); }
.content-section { display: grid; gap: var(--space-3); grid-template-columns: 1fr 1fr; align-items: center; }
.content-section--alt { direction: rtl; }
.content-section--alt > * { direction: ltr; }
.content-section .img-placeholder, .content-section .img { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); width: 100%; }

.sub-nav { position: sticky; top: 0; background: var(--color-bg); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-line); margin-bottom: var(--space-4); z-index: 10; }
.sub-nav ul { display: flex; flex-wrap: wrap; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.sub-nav a { text-decoration: none; font-family: var(--font-heading); font-size: 0.9rem; color: var(--color-text); }
.sub-nav a.is-active { color: var(--color-accent); font-weight: 600; }

.breadcrumb { font-size: 0.9rem; color: var(--color-muted); margin-bottom: var(--space-2); }
.breadcrumb a { text-decoration: none; }

.contact-methods { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-block: var(--space-4); }
.contact-card { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: var(--space-3); }
.contact-card address { font-style: normal; }
.find-us__grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr 1fr; margin-top: var(--space-3); }
.find-us__map { width: 100%; min-height: 320px; border: 0; border-radius: var(--radius-lg); }
.find-us__photo { aspect-ratio: 4 / 3; width: 100%; border-radius: var(--radius-lg); }
.menu-download { margin-top: var(--space-4); }

/* --- Responsive (legacy rows) --------------------------------------------- */
@media (max-width: 720px) {
  .find-us__grid,
  .content-section { grid-template-columns: 1fr; }
  .content-section--alt { direction: ltr; }
}