/* Content layout: n-split editorial sections, prose, cards, hero */

/* ---------- Split (media + text) sections ---------- */
.split {
  display: grid;
  gap: clamp(var(--space-5), 6vw, var(--space-8));
  align-items: center;
}
/* minmax(0, …) floors: a bare `fr` track takes its minimum from the content's
   min-content size, so one long word or an aspect-ratio frame can push the grid
   wider than .container and give the page a horizontal scrollbar. */
@media (min-width: 56em) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--flip > :first-child { order: 2; }
}

/* ---------- Room cards ---------- */
.room-card__img { aspect-ratio: 3 / 2; }
.room-card__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
  margin-block: var(--space-2) var(--space-3);
}
.room-card__facts span { display: inline-flex; align-items: center; gap: 0.4em; }

/* ---------- Detail page layouts ---------- */
.detail-layout {
  display: grid;
  gap: var(--space-6);
}
@media (min-width: 56em) {
  .detail-layout { grid-template-columns: minmax(0, 1.6fr) minmax(14rem, 1fr); align-items: start; }
}
.spec-list { display: grid; gap: var(--space-3); font-size: var(--text-sm); }
.spec-list > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  border-block-end: 1px solid var(--color-line);
  padding-block-end: var(--space-3);
}
.spec-list dt { color: var(--color-fg-muted); }
.spec-list dd { margin: 0; font-weight: var(--weight-medium); text-align: end; }

/* min(100%, …) is the guard that keeps a fixed track floor from exceeding a
   narrow viewport. Without it, minmax(11rem, 1fr) demands at least 176 px per
   column and the grid overflows its container on a 320 px phone. */
.amenity-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
  gap: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}
.amenity-list li {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-small);
  background: var(--color-surface);
}

/* ---------- Prose (guides, blog) ---------- */
.prose { max-width: 46rem; }
.prose > * + * { margin-block-start: var(--space-4); }
.prose h2 { font-size: var(--text-xl); margin-block: var(--space-6) var(--space-3); }
.prose h3 { font-size: var(--text-md); margin-block: var(--space-5) var(--space-2); }
.prose ul, .prose ol { padding-inline-start: 1.25rem; display: grid; gap: var(--space-2); }
.prose a { color: var(--color-ocean); text-underline-offset: 3px; }
.prose a:hover { color: var(--color-accent); }

/* Pull quote / highlight */
.callout {
  border-inline-start: 3px solid var(--color-accent);
  background: var(--color-accent-soft);
  padding: var(--space-4) var(--space-5);
  border-radius: 0 var(--radius-medium) var(--radius-medium) 0;
  font-size: var(--text-sm);
}
.callout strong { font-family: var(--font-display); }

/* ---------- Facts strip (home) ---------- */
.facts-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
  gap: var(--space-4);
  justify-items: center;
}

/* ---------- FAQ accordion ---------- */
.faq { border-block-end: 1px solid var(--color-line); }
.faq h3 { margin: 0; }
.faq__q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  text-align: start;
  padding: var(--space-4) 0;
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: var(--color-fg);
}
.faq__q:hover { color: var(--color-ocean); }
.faq__icon { flex: none; inline-size: 1.1rem; transition: transform var(--dur-med) var(--ease-out); }
.faq__item[data-open="true"] .faq__icon { transform: rotate(45deg); }
.faq__a { padding-block-end: var(--space-4); max-width: 60ch; color: var(--color-fg-muted); }

/* ---------- Gallery grid & lightbox hooks ---------- */
.gallery-grid {
  columns: 3 16rem;
  column-gap: var(--space-4);
}
.gallery-grid figure {
  break-inside: avoid;
  margin-block-end: var(--space-4);
  border-radius: var(--radius-medium);
  overflow: hidden;
  background: var(--media-gradient);
}
.gallery-grid img { width: 100%; transition: transform var(--dur-slow) var(--ease-out); }
.gallery-grid a:hover img { transform: scale(1.03); }
.gallery-grid figcaption {
  font-size: var(--text-xs);
  color: var(--color-fg-muted);
  padding: var(--space-2) var(--space-3);
}

/* ---------- Forms ---------- */
.form { display: grid; gap: var(--space-4); max-width: 34rem; }
.form label { font-size: var(--text-sm); font-weight: var(--weight-medium); display: grid; gap: var(--space-1); }
.form input, .form textarea, .form select {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-small);
  padding: 0.7em 0.9em;
  background: var(--color-surface);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.form input:focus, .form textarea:focus, .form select:focus { border-color: var(--color-ocean); outline: none; }
.form .form__note { font-size: var(--text-xs); color: var(--color-fg-muted); }

/* ---------- Booking bar (sticky mobile CTA) ---------- */
.book-bar {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--z-nav);
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--color-ink) 92%, transparent);
  backdrop-filter: blur(8px);
  /* The bar is dark, so it must set its own foreground. Without this the
     secondary .btn--ghost ("Call") inherits the page's dark body text —
     `color: inherit` in base.css — and rendered dark-on-dark: a control that
     looked like an empty box, with no visible label at all. */
  color: #f4efe5;
}
/* Every button gets the 44 px touch floor. The bar's own height follows from
   that plus padding, and --book-bar-h (tokens.css) is what the page reserves
   at the bottom so the bar never covers content. */
.book-bar .btn {
  flex: 1;
  min-block-size: 2.75rem;
}
/* The ghost button's border is `currentColor`, which is now the light bar
   colour, so the secondary action reads as a real outlined control rather
   than blending into the bar. */
.book-bar .btn--ghost { border-color: rgb(244 239 229 / 0.45); }
@media (min-width: 56em) { .book-bar { display: none; } }

/* Reserve the bar's height. Padding-block-end on <body> does not work — the
   bar is fixed to the viewport, not to the document flow, so the body's own
   padding is what needs to grow. Every page's last element therefore clears
   the bar by exactly its height. */
body { padding-block-end: var(--book-bar-h); }
/* The drawer is a full-screen overlay, so the reservation must not apply to it. */
.drawer { padding-block-end: var(--space-7); }

/* ---------- CTA banner ---------- */
.cta-banner {
  text-align: center;
  display: grid;
  gap: var(--space-4);
  justify-items: center;
}