/* Wild Vibes — the two open property pages (ooty.html, wayanad.html).

   Everything here is layout the shared system does not already ship:
   the two-column stay card, its photo picker, and a narrower minimum for
   the two-column rate table so it fits a 390 px phone without scrolling.
   Colours, type and component looks still come from tokens/base/components. */

/* ------------------------------------------------------------------ */
/* 1. Rate table — two columns, so it fits a phone                     */
/* ------------------------------------------------------------------ */

/* components.css sets .rate-table { min-width: 34rem } for the wide
   comparison tables on stays.html. A per-cabin table is only "Nights" and
   "Rate", so it fits inside a card on a 390 px screen; the .rate-wrap is
   still there and still scrolls if a translation ever makes it wider. */
.rate-table--duo { min-width: 17rem; }
.rate-table--duo thead th,
.rate-table--duo tbody th,
.rate-table--duo tbody td,
.rate-table--duo tfoot td { padding-inline: 0.7rem; }
.rate-table--duo thead th:last-child,
.rate-table--duo tbody td { width: 50%; }
.rate-table--duo tbody td strong { font-size: 1.05rem; }
.rate-table--duo .rate-table__gst { white-space: nowrap; }

/* ------------------------------------------------------------------ */
/* 2. Stay card — photos beside the detail on a wide screen            */
/* ------------------------------------------------------------------ */

.stay-card--split + .stay-card--split { margin-top: var(--gap-grid); }

.stay-photos {
  display: grid;
  gap: var(--sp-3);
  align-content: start;
  min-width: 0;
  padding: clamp(1.1rem, 0.85rem + 0.9vw, 1.6rem);
  padding-bottom: 0;
}

.stay-photos__stage {
  box-shadow: none;
  border: 1px solid var(--ctx-line);
}
.stay-photos__stage picture {
  position: absolute;
  inset: 0;
  transition: opacity var(--dur-2) var(--ease-out);
}
.stay-photos__stage picture.is-entering { opacity: 0; }

.stay-photos__thumbs {
  display: flex;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--wv-lime-deep) transparent;
}

.stay-photos__thumb {
  display: block;
  width: 4.75rem;
  aspect-ratio: 4 / 3;
  flex: none;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--ctx-card-2);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out), opacity var(--dur-1) var(--ease-out);
  opacity: 0.72;
}
.stay-photos__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.stay-photos__thumb:hover { opacity: 1; border-color: var(--wv-lime-deep); }
.stay-photos__thumb[aria-pressed="true"] { opacity: 1; border-color: var(--wv-forest); }

@media (min-width: 940px) {
  .stay-card--split {
    display: grid;
    grid-template-columns: minmax(0, 42%) minmax(0, 58%);
    align-items: stretch;
  }
  .stay-photos {
    grid-template-rows: minmax(14rem, 1fr) auto;
    padding-right: 0;
    padding-bottom: clamp(1.1rem, 0.85rem + 0.9vw, 1.6rem);
  }
  .stay-photos__stage { aspect-ratio: auto; height: 100%; }
}

/* base.css carries `ul[class], ol[class] { padding: 0 }`, which is one point
   more specific than `.timeline`, so the component's 2.9rem gutter for the
   dotted rail never lands and the rail runs straight through the text.
   Restore it here at equal weight, from a stylesheet that loads later.
   (`.timeline--two-col` in pages.css is unusable for the same class of
   reason: `.timeline` is display:grid, and column-count does not apply to a
   grid container.) */
ol.timeline,
ul.timeline { padding: var(--sp-2) 0 var(--sp-2) 2.9rem; }

/* The stay list itself. */
.stay-list { display: grid; gap: var(--gap-grid); }

/* Deep links — stays.html#slug and #slug from this page — must clear the
   condensed header when they land. */
body[data-page="ooty"] .stay-anchor,
body[data-page="wayanad"] .stay-anchor {
  scroll-margin-top: calc(var(--head-h-stuck) + var(--sp-5));
}

/* ------------------------------------------------------------------ */
/* 3. Small page-level helpers                                         */
/* ------------------------------------------------------------------ */

/* A doodle is decoration and must never sit on top of the copy. .doodle is
   --z-doodle (1) and a plain .wrap is z-auto, so on a narrow screen a corner
   doodle can paint over a heading. Lift the content one step above it. */
.sec > .wrap,
.hero > .wrap { position: relative; z-index: var(--z-raised); }

/* (picture wrapper display is now handled centrally in components.css) */

/* Café opening hours sitting beside the section heading. */
.hours-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-variant-numeric: tabular-nums;
}
.hours-pill svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
}

/* The four-photo strip that hands off to gallery.html. */
.gallery-strip { display: grid; gap: var(--gap-grid); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 780px) {
  .gallery-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.gallery-strip + .btn-row { margin-top: var(--gap-grid); }

/* A stack of short notes under the house rules. */
.note-stack { display: grid; gap: var(--sp-4); margin-top: var(--gap-grid); }
@media (min-width: 860px) {
  .note-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}