/* ===========================================================
   Hotel Jean Paul — Components
   =========================================================== */

/* --- Header group: topbar + main header stick together as one unit, so
   the language switcher in the topbar is always reachable while scrolling
   — not just at the very top of the page. In place of the old transparent
   -> solid color animation, the whole group condenses slightly on scroll
   (tighter padding, a touch smaller logo, a deepening shadow) via a single
   scroll-driven custom property — a size/depth cue instead of a color one. */
@property --shrink { syntax: '<number>'; inherits: true; initial-value: 0; }
.site-header-group {
  position: sticky; top: 0; z-index: 100;
  --shrink: 0;
  animation: header-condense 1s linear both;
  animation-timeline: scroll(root);
  animation-range: 0 240px;
  box-shadow: 0 8px 24px rgb(20 35 28 / calc(0.22 * var(--shrink)));
}
@keyframes header-condense { from { --shrink: 0; } to { --shrink: 1; } }

/* --- Header: a permanently dark bar (not a transparent-to-solid scroll
   animation) — the logo asset is a light/white variant with no dark
   counterpart, so a dark header is the one background that always shows
   it correctly. --- */
.site-header {
  position: relative;
  background: var(--color-ink);
  color: var(--color-stone);
}
/* Transparent over the hero at the top of the page, solidifying as
   --shrink (already driven by the condense-on-scroll animation above)
   goes from 0 to 1 — reuses that same scroll signal instead of a second
   animation. Scoped to pages that actually have a hero photo behind the
   header; everywhere else the plain solid background above stays, since
   a transparent header over a light page section would be illegible. */
body:has(.hero) .site-header {
  background: rgb(20 35 28 / var(--shrink));
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  padding-block: calc(0.65rem - (0.25rem * var(--shrink)));
}
.brand { display: flex; align-items: center; gap: 0.6em; }
.brand__logo {
  height: calc(60px - (12px * var(--shrink))); width: auto;
  transition: transform var(--dur-fast) var(--ease-out);
}
/* A small grow on hover — but only near the top of the page. Scaling it
   by (1 - --shrink) tapers the effect to nothing once the header has
   already condensed on scroll, so it never fights that state. */
.brand__logo:hover { transform: scale(calc(1 + 0.08 * (1 - var(--shrink)))); }

/* --- Topbar: contact strip + language switcher, above the main nav. Its
   own solid (slightly darker) fill and compact padding keep it a slim
   utility strip rather than a second full-height nav bar. --- */
.topbar { position: relative; z-index: 101; background: #0E1813; color: rgba(245,242,234,0.82); font-size: var(--fs-small); }
.topbar__inner {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
  padding-block: calc(0.4rem - (0.15rem * var(--shrink))); flex-wrap: wrap;
}
.topbar__contact { display: flex; gap: var(--space-3); flex-wrap: wrap; font-size: 0.78rem; letter-spacing: 0.03em; }
.topbar__contact a:hover { color: var(--color-white); }
/* On narrow phones there isn't room for phone + email + Kontakt on one
   line without wrapping into a stacked, cramped column — keep just the
   phone number (the one action worth a single tap on mobile). */
@media (max-width: 600px) {
  .topbar__contact a:not(:first-child) { display: none; }
  /* The crown mark in the logo sits a few px inset from the image's own
     edge, so the phone number needs a small nudge to line up with it. */
  .topbar__contact { margin-left: 6px; }
}
.main-nav { display: flex; align-items: center; gap: calc(var(--space-5) - (0.5rem * var(--shrink))); }
.main-nav__list {
  display: flex;
  gap: calc(var(--space-4) - (0.4rem * var(--shrink)));
  font-size: calc(0.95rem - (0.1rem * var(--shrink)));
  font-weight: 500; letter-spacing: 0.01em;
}
.main-nav__list a { position: relative; padding-block: 0.3em; }
.main-nav__list a::after {
  content:""; position: absolute; left:0; right:100%; bottom:0; height:1.5px;
  background: currentColor; transition: right var(--dur-med) var(--ease-out);
}
.main-nav__list a:hover::after, .main-nav__list a[aria-current="page"]::after { right: 0; }
.header-actions { display: flex; align-items: center; gap: var(--space-3); }
.lang-switch { display: flex; gap: 0.5em; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; }
.lang-switch a { opacity: 0.55; }
.lang-switch a[aria-current="true"] { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.nav-toggle { display: none; flex-direction: column; gap: 4px; width: 26px; background: none; border: none; padding: 0; color: inherit; }
.nav-toggle span { display:block; height: 2px; background: currentColor; border-radius: 2px; }

/* --- Tablet range: the nav still runs horizontally here (it only
   collapses to the hamburger below 880px), but there isn't enough width
   for full-size logo + 6 links + gaps + Book button without everything
   crowding together. Scale the whole row down a step so it settles into
   the available space instead of visually squeezing. --- */
@media (max-width: 1100px) and (min-width: 881px){
  .container.site-header__inner { padding-inline: var(--space-3); }
  .brand__logo { height: calc(46px - (10px * var(--shrink))); }
  .main-nav { gap: var(--space-3); }
  .main-nav__list { gap: var(--space-3); font-size: 0.85rem; }
  .header-actions .btn { padding: 0.7em 1.2em; font-size: 0.85rem; }
}

@media (max-width: 880px){
  .nav-toggle { display: flex; }
  /* Collapsed by default: hidden entirely (not just its children), so the
     toggle's job is simply to show/hide this one element. When shown, it
     becomes a full-width dropdown panel anchored under the header bar. */
  .main-nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    gap: var(--space-4);
    background: var(--color-ink);
    padding: var(--space-4) var(--container-pad) var(--space-5);
    box-shadow: var(--shadow-md);
  }
  .main-nav.is-open { display: flex; }
  .main-nav__list { flex-direction: column; gap: var(--space-3); }
  .header-actions { width: 100%; }
  .header-actions .btn { width: 100%; justify-content: center; }
}

/* --- Hero --- */
.hero {
  position: relative;
  min-height: clamp(600px, 94vh, 920px);
  display: flex; align-items: center;
  color: var(--color-white);
  overflow: clip;
  /* .site-header-group is sticky, not fixed — it still occupies its own
     space in normal flow, so without this the hero would start right
     after it with nothing behind the header for its transparent phase
     to show through (just the page's own background color). Pull the
     hero up by roughly the header+topbar's combined height at the top
     (un-condensed) state so the photo is actually there to blend into.
     The matching padding-top below cancels this back out for the actual
     content's position, so only the background photo extends upward —
     the heading/buttons don't end up crowding the header. */
  margin-top: -118px;
  padding-top: 118px;
}
.hero__media { position: absolute; inset: 0; z-index: -1; }
/* A slow, continuous Ken Burns zoom keeps the hero photo alive on its own,
   with no interaction required. */
.hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  animation: hero-breathe 24s ease-in-out infinite alternate;
}
@keyframes hero-breathe {
  from { scale: 1.05; }
  to   { scale: 1.15; }
}
.hero__media::after {
  content:""; position: absolute; inset: 0;
  /* Left-to-right, matching the hero content's left-aligned text — plus a
     light top/bottom pass so the header/topbar and scroll cue stay legible
     regardless of which photo is dropped in. */
  background:
    linear-gradient(90deg, rgba(15,25,20,0.62) 0%, rgba(15,25,20,0.32) 42%, rgba(15,25,20,0.08) 68%, rgba(15,25,20,0) 85%),
    linear-gradient(180deg, rgba(20,35,28,0.35) 0%, rgba(20,35,28,0) 18%, rgba(20,35,28,0) 82%, rgba(20,35,28,0.45) 100%);
}
/* Was accidentally inheriting .container's margin-inline:auto while its own
   max-width (in ch, narrower than .container's) won the cascade — a narrow
   box centered in a wide one. Cancel the auto-centering and widen it. */
/* Left un-overridden so this box follows the exact same .container rules
   (max-width + auto centering) as the header/topbar above it — on wide
   screens, overriding margin-inline here shifted the hero text left of
   where the logo and topbar content actually sit. The 64ch cap moves to
   the text elements themselves instead of the outer positioned box.
   Centered as a flex column so eyebrow/heading/subline/buttons all line
   up on the same vertical axis as the centered quickbook bar below. */
.hero__content {
  position: relative; z-index: 1; padding-block: var(--space-6);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.hero__content h1, .hero__content .lead { max-width: 64ch; }
/* Fades the photo's bottom edge into the page's own background color, so
   the hero dissolves into the next section instead of ending on a hard,
   visible seam. */
.hero::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: clamp(50px, 8vh, 100px);
  background: linear-gradient(180deg, transparent 0%, var(--color-stone) 100%);
  pointer-events: none;
}
.hero__eyebrow { color: var(--color-white); }
.hero__eyebrow::before { display: none; }
.hero__actions { display: flex; gap: var(--space-3); margin-top: var(--space-2); flex-wrap: wrap; }
.hero__subline { font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.75rem); }
/* Rotating word: main.js types/deletes between the two words in
   data-words; the cursor itself is pure CSS and blinks regardless. */
.type-rotate { display: inline-flex; align-items: baseline; color: var(--color-brass-soft); font-weight: 600; }
.type-rotate__cursor { margin-left: 2px; width: 2px; height: 1em; background: currentColor; animation: cursor-blink 0.9s step-end infinite; }
@keyframes cursor-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .type-rotate__cursor { display: none; } }
/* The site-wide .btn--primary is ink-green, which would sit almost flush
   against this hero's own green-toned photo/scrim — invert it here so it
   reads as a solid, contrasting call to action against that background. */
.hero__cta { background: var(--color-white); color: var(--color-ink); }
.hero__cta:hover { background: var(--color-ink); color: var(--color-white); }

/* --- Quickbook: a horizontal date-search bar floating over the hero's
   bottom edge, matching the "quick availability" widget pattern used by
   most modern hotel sites. Submits as a real GET request straight to
   booking.html with arrival/departure/lng query params — the same
   contract the Viato CBE widget itself reads to pre-select dates, mirrored
   from the live site's own quickbooker form. --- */
.quickbook {
  position: relative; z-index: 2;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4) var(--space-5);
  margin-top: calc(-1 * var(--space-7));
  max-width: 900px;
  width: 100%;
  box-sizing: border-box;
  margin-inline: auto;
  display: flex; align-items: end; gap: var(--space-4); flex-wrap: wrap;
}
/* min-width: 0 overrides the flex default of min-width: auto, which sizes
   an item to its content's intrinsic width and refuses to shrink below it
   — without this, a field can push wider than the row has room for and
   overflow its parent card instead of wrapping/shrinking (seen on Safari
   iOS in particular, which is stricter about this than most browsers). */
.quickbook__field { display: flex; flex-direction: column; gap: 0.4em; flex: 1 1 150px; min-width: 0; }
.quickbook__field label { font-size: var(--fs-small); font-weight: 600; color: var(--color-ink-soft); }
.quickbook__input-wrap { position: relative; }
.quickbook__field input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--color-line); border-radius: var(--radius-sm);
  padding: 0.7em 2.4em 0.7em 0.9em; font-family: var(--font-body); font-size: var(--fs-body); color: var(--color-ink);
  background: var(--color-stone);
  /* iOS Safari bumps a text input's font below 16px up to 16px on focus
     and zooms the viewport to compensate — pinning font-size to 16px here
     avoids that zoom jump when a field is tapped. */
  font-size: max(var(--fs-body), 16px);
}
.quickbook__icon {
  position: absolute; right: 0.8em; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--color-brass); pointer-events: none;
}
.quickbook__divider { width: 1px; align-self: stretch; background: var(--color-line); }
.quickbook .btn { flex-shrink: 0; }
@media (max-width: 700px) {
  .quickbook { flex-direction: column; align-items: stretch; margin-top: var(--space-4); padding: var(--space-4); }
  .quickbook__field { min-width: 0; }
  .quickbook .btn { width: 100%; justify-content: center; }
  .quickbook__divider { display: none; }
}
.quickbook__field input[readonly] { cursor: pointer; }

/* --- Flatpickr theme override: the browser's native date-picker popup
   can't be restyled at all, so the quickbook fields use Flatpickr
   instead — this retints its default theme with our own tokens rather
   than shipping a whole separate design. --- */
.flatpickr-calendar {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-line);
  font-family: var(--font-body);
}
.flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowTop:after { display: none; }
.flatpickr-months .flatpickr-month { color: var(--color-ink); }
.flatpickr-current-month { font-family: var(--font-display); }
.flatpickr-current-month input.cur-year, .flatpickr-current-month .flatpickr-monthDropdown-months { font-family: var(--font-body); color: var(--color-ink); }
.flatpickr-prev-month, .flatpickr-next-month { color: var(--color-ink); }
.flatpickr-prev-month svg, .flatpickr-next-month svg { fill: var(--color-ink); }
.flatpickr-prev-month:hover svg, .flatpickr-next-month:hover svg { fill: var(--color-brass); }
.flatpickr-weekdays { background: transparent; }
span.flatpickr-weekday { color: var(--color-ink-soft); font-weight: 600; }
.flatpickr-day { border-radius: var(--radius-sm); color: var(--color-ink); }
.flatpickr-day.today { border-color: var(--color-brass); }
.flatpickr-day:hover, .flatpickr-day:focus { background: var(--color-stone-dim); border-color: var(--color-stone-dim); }
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.selected:focus {
  background: var(--color-ink); border-color: var(--color-ink); color: var(--color-white);
}
.flatpickr-day.inRange, .flatpickr-day.inRange:hover { background: var(--color-stone-dim); box-shadow: none; border-color: var(--color-stone-dim); }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--color-line); }
.flatpickr-day.selected.startRange, .flatpickr-day.selected.endRange { background: var(--color-brass); border-color: var(--color-brass); }

/* --- Full-bleed image band: breaks out of the container to edge-to-edge,
   for the real, large lifestyle photography — used between text sections
   instead of small paired thumbnails. --- */
.image-band {
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  height: clamp(360px, 62vh, 720px);
  overflow: clip;
}
.image-band img { width: 100%; height: 100%; object-fit: cover; }
.image-band__caption {
  position: absolute; left: 0; bottom: 0; right: 0;
  padding: var(--space-5) var(--container-pad);
  color: var(--color-white);
  background: linear-gradient(180deg, rgba(20,35,28,0) 0%, rgba(20,35,28,0.55) 100%);
}
.image-band__caption h3 { font-size: var(--fs-h3); text-shadow: 0 1px 10px rgba(0,0,0,0.35); }
.hero__scroll-cue {
  position: absolute; z-index: 1; bottom: var(--space-4); right: var(--container-pad);
  font-size: var(--fs-small); display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  writing-mode: vertical-rl;
}
.hero__scroll-cue::after { content:""; width:1px; height: 48px; background: rgba(255,255,255,0.5); }

/* --- Section rhythm --- */
.section { padding-block: var(--space-7); }
.section--tight { padding-block: var(--space-5); }
.section--dark { background: var(--color-ink); color: var(--color-stone); }
.section--dark .eyebrow { color: var(--color-brass-soft); }
.section--dark .eyebrow::before { background: var(--color-brass-soft); }
.section--dark .lead { color: rgba(245,242,234,0.82); }

/* --- Split feature: a composed image+text unit, not a stacked text block
   and photo. The panel overlaps the image edge (negative margin) and both
   sit above a color-block accent offset behind the photo — real layered
   depth instead of two flat rows. --- */
.split-feature {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  gap: var(--space-6);
}
.split-feature--reverse { grid-template-columns: 1fr 1.15fr; }
.split-feature--reverse .split-feature__media-wrap { grid-column: 2; grid-row: 1; }
.split-feature--reverse .split-feature__panel { grid-column: 1; grid-row: 1; margin-left: 0; margin-right: calc(-1 * var(--space-6)); }
.split-feature__media-wrap { position: relative; }
.split-feature__accent {
  position: absolute; inset: var(--space-4) calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) var(--space-4);
  background: var(--color-brass);
  border-radius: var(--radius-lg);
  z-index: 0;
}
.split-feature__accent--forest { background: var(--color-forest); }
.split-feature__media {
  position: relative; z-index: 1;
  aspect-ratio: 4/5;
  border-radius: var(--radius-lg);
  overflow: clip;
  box-shadow: var(--shadow-lg);
}
.split-feature__panel {
  position: relative; z-index: 2;
  background: var(--color-white);
  color: var(--color-ink);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  margin-left: calc(-1 * var(--space-6));
}
.split-feature--on-dark .split-feature__panel { background: var(--color-ink-soft); color: var(--color-stone); }
.split-feature--on-dark .split-feature__panel .lead { color: rgba(245,242,234,0.82); }
@media (max-width: 880px){
  .split-feature, .split-feature--reverse { grid-template-columns: 1fr; }
  .split-feature--reverse .split-feature__media-wrap, .split-feature--reverse .split-feature__panel { grid-column: 1; }
  .split-feature__panel, .split-feature--reverse .split-feature__panel { margin: calc(-1 * var(--space-5)) var(--space-4) 0; }
}

/* --- Floating card surface: for placing existing light-background cards
   (room-card, etc.) on top of a dark section without restyling their
   internals — the card itself becomes a raised light panel. --- */
.card-surface {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-4);
}

/* --- Feature row: flat, edge-to-edge alternating half-image/half-content
   row (no shadow, no rounded corners, no overlap) — an icon-led spec row
   plus a CTA on the content side. Alternates sides via .feature-row--alt,
   using a direction:rtl flip so column order swaps without a second set
   of rules, then resets direction back to ltr for the actual content. --- */
.feature-row {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 620px;
}
.feature-row--alt { direction: rtl; }
/* Slow ambient zoom on the photo itself, plus a snappier zoom on the
   container when hovered — two different elements/properties so the
   two effects layer instead of fighting over the same `scale`. */
.feature-row__media { position: relative; overflow: clip; transition: transform var(--dur-med) var(--ease-out); }
.feature-row__media:hover { transform: scale(1.04); }
.feature-row__media img {
  width: 100%; height: 100%; object-fit: cover;
  animation: media-breathe 20s ease-in-out infinite alternate;
}
@keyframes media-breathe { from { scale: 1.03; } to { scale: 1.1; } }
.feature-row__content {
  direction: ltr;
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--space-6) var(--container-pad);
  background: var(--color-stone-dim);
}
.feature-row__content--white { background: var(--color-white); }
.feature-row__specs {
  display: flex; gap: var(--space-4); flex-wrap: wrap;
  padding-block: var(--space-3); margin-block: var(--space-3);
  border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line);
}
.feature-row__spec { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: var(--fs-small); color: var(--color-ink-soft); text-align: center; flex: 0 0 auto; min-width: 4.5rem; white-space: nowrap; }
.feature-row__spec svg { width: 22px; height: 22px; color: var(--color-brass); }
@media (max-width: 880px){
  .feature-row, .feature-row--alt { grid-template-columns: 1fr; direction: ltr; min-height: auto; }
  .feature-row__media { aspect-ratio: 4/3; }
  .feature-row__content { padding: var(--space-5) var(--container-pad); }
}

/* --- Centered intro: a full-width, text-only statement — large script
   greeting, an uppercase serif subtitle, a thin gold rule, then a centered
   paragraph. No image, no columns; the copy itself is the composition. --- */
.centered-intro { max-width: 76ch; margin-inline: auto; text-align: center; }
.centered-intro .eyebrow {
  justify-content: center;
  font-size: clamp(3rem, 2.2rem + 4.2vw, 5.5rem);
  margin-bottom: var(--space-3);
}
.centered-intro .eyebrow::before { display: none; }
.centered-intro__subtitle {
  font-size: clamp(1.5rem, 1.3rem + 1vw, 2.1rem); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.centered-intro__divider { width: 72px; height: 1px; background: var(--color-brass); margin: var(--space-5) auto; }
.centered-intro .lead { font-size: 0.9rem; color: var(--color-ink-soft); }

/* --- Service card: a modern icon-led card — tinted icon chip, a lift on
   hover, its own "read more" link — for the three amenity summaries. --- */
.service-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  border: 1px solid var(--color-line);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.service-card__icon {
  width: 52px; height: 52px;
  border-radius: var(--radius-sm);
  background: rgba(169,121,59,0.12);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-3);
  color: var(--color-brass);
}
.service-card__icon svg { width: 24px; height: 24px; }
.service-card h2, .service-card h3 { font-size: 1.15rem; }
.service-card p { margin-top: var(--space-2); color: var(--color-ink-soft); }
.service-card .link-more { margin-top: var(--space-4); }

/* --- FAQ list: simple bordered question/answer rows, paired with a
   matching FAQPage JSON-LD block in each page for AEO/LLM answer-engine
   visibility on the same real content. --- */
.faq-list { display: flex; flex-direction: column; max-width: 70ch; }
.faq-item { padding-block: var(--space-4); border-top: 1px solid var(--color-line); }
.faq-item:first-child { border-top: none; padding-top: 0; }
.faq-item h3 { font-size: 1.05rem; }
.faq-item p { margin-top: var(--space-2); color: var(--color-ink-soft); }

/* --- Numbered feature list: for amenities-style rows, using the display
   face for oversized numerals as a design element rather than plain bullets. --- */
.numbered-feature { display: flex; gap: var(--space-3); align-items: flex-start; }
.numbered-feature__num { font-family: var(--font-display); font-size: 1.8rem; color: var(--color-brass); line-height: 1; }

/* --- Statement band: a full-bleed photo carrying a bold, confident
   headline and one restrained "read more" link — the image-led, low-copy
   counterpart to `.feature-row`, used where the homepage is teasing a
   deeper page rather than explaining everything inline. --- */
.statement-band {
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  min-height: clamp(420px, 62vh, 680px);
  display: flex; align-items: flex-end;
  overflow: clip;
  color: var(--color-white);
}
.statement-band__media { position: absolute; inset: 0; z-index: -1; }
.statement-band__media img { width: 100%; height: 100%; object-fit: cover; }
.statement-band__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,35,28,0.05) 30%, rgba(20,35,28,0.85) 100%);
}
/* Fades the photo's top edge into the section above it, so it flows in
   rather than starting on a hard seam — the entry-side counterpart to the
   hero's own bottom fade. */
.statement-band::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: clamp(80px, 14vh, 160px);
  background: linear-gradient(180deg, var(--color-white) 0%, transparent 100%);
  pointer-events: none;
}
.statement-band__content { position: relative; padding: var(--space-6) var(--container-pad); max-width: 60ch; }
.statement-band h2 { text-shadow: 0 1px 14px rgba(0,0,0,0.35); }
.statement-band .eyebrow { color: var(--color-brass-soft); }
.statement-band .eyebrow::before { background: var(--color-brass-soft); }
.statement-band__tags { display: flex; gap: var(--space-2) var(--space-3); flex-wrap: wrap; margin-top: var(--space-3); font-size: var(--fs-small); color: rgba(245,242,234,0.85); }
.statement-band__tags span:not(:last-child)::after { content: "·"; margin-left: var(--space-3); color: var(--color-brass-soft); }
.statement-band .lead { color: rgba(245,242,234,0.88); margin-top: var(--space-2); }
.statement-band .link-more { margin-top: var(--space-4); }

.grid { display: grid; gap: var(--space-4); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px){ .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

/* --- Contact page: two plain, unboxed halves (info text / map) instead
   of a bordered card next to a shadowed media tile — the split itself
   (generous gap, map bleeding to the container edge) carries the
   structure so no border or box-shadow is needed to separate them. --- */
.contact-split__grid { gap: var(--space-6); align-items: stretch; }
.contact-split__map { min-height: 420px; border-radius: var(--radius-md); overflow: hidden; }
@media (max-width: 620px) {
  .contact-split__map { min-height: 320px; }
}

/* --- Cards --- */
.room-card { display: flex; flex-direction: column; gap: var(--space-3); }
.room-card .media { aspect-ratio: 4/3; }
.room-card .media img:hover { transform: scale(1.05); }
.room-card__specs { display: flex; gap: var(--space-3); font-size: var(--fs-small); color: var(--color-ink-soft); flex-wrap: wrap; }
.room-card__specs span { display: flex; align-items: center; gap: 0.4em; }

.teaser-card { position: relative; border-radius: var(--radius-lg); overflow: clip; aspect-ratio: 3/4; color: var(--color-white); }
.teaser-card .media, .teaser-card img { position: absolute; inset: 0; border-radius: 0; }
.teaser-card__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,35,28,0) 40%, rgba(20,35,28,0.85) 100%); }
.teaser-card__body { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-4); }
.teaser-card__link { display: inline-flex; align-items: center; gap: 0.4em; margin-top: var(--space-2); font-size: var(--fs-small); font-weight: 600; color: var(--color-brass-soft); }

.gallery-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.gallery-strip .media { aspect-ratio: 1; }
@media (max-width: 620px){ .gallery-strip { grid-template-columns: repeat(2, 1fr); } }

/* --- Booking panel: mounts the Viato CRS widget --- */
.booking-panel {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4);
  width: 80vw;
  max-width: 80vw;
  margin-inline: auto;
}
/* The Viato widget's own internal layout (date pickers, guest selector,
   etc.) needs real width to lay out properly — 80vw is fine on desktop,
   but on a phone that's often under 300px and everything inside squeezes
   and wraps badly. Give it almost the full screen instead, matching how
   roomy it looks on the production site. */
@media (max-width: 700px) {
  .booking-panel { width: 96vw; max-width: 96vw; padding: var(--space-3); border-radius: var(--radius-md); }
}
.booking-panel__loading {
  display: flex; align-items: center; justify-content: center;
  min-height: 140px; color: var(--color-ink-soft); font-size: var(--fs-small);
  gap: var(--space-2);
}
/* An author rule setting `display` on this element (above) overrides the
   browser's default `[hidden] { display: none }` at equal specificity —
   so element.hidden = true from main.js was silently doing nothing
   visually. Restore it explicitly. */
.booking-panel__loading[hidden] { display: none; }
.booking-panel__loading::before {
  content:""; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--color-line); border-top-color: var(--color-brass);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Closing CTA band: a bold color close instead of repeating the same
   light/dark bands — a decorative oversized ring gives it some depth. --- */
.cta-band {
  position: relative;
  overflow: clip;
  background: var(--color-forest);
  color: var(--color-white);
  padding-block: var(--space-7);
  text-align: center;
}
.cta-band::before {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 900px; height: 900px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.cta-band__inner { position: relative; max-width: 56ch; margin-inline: auto; }
.cta-band .eyebrow { color: var(--color-brass-soft); }
.cta-band .eyebrow::before { background: var(--color-brass-soft); }
.cta-band .lead { color: rgba(255,255,255,0.9); }

/* --- Footer --- */
.site-footer { background: var(--color-ink); color: rgba(245,242,234,0.85); }
.site-footer .container { padding-block: var(--space-7) var(--space-5); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-5); padding-bottom: var(--space-6); }
@media (max-width: 880px){ .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-grid { grid-template-columns: 1fr; } }
.footer-col h4 { font-family: var(--font-body); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-brass-soft); margin-bottom: var(--space-3); }
.footer-col ul { display: flex; flex-direction: column; gap: var(--space-2); }
.footer-col a:hover { color: var(--color-white); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--color-line-on-dark); font-size: var(--fs-small); }