/* Wild Vibes — stays.html + gallery.html only.
   Loaded AFTER pages.css. Everything here is a layout adjustment that the
   shared system does not cover: a seven-column tariff table, and filter bars
   with more than one row of buttons. No new colours, no new type. */

/* ================================================================== */
/* 1. Filter bars with several rows                                    */
/* ================================================================== */

/* pages.css lays the bar out as one wrapping flex line, which interleaves
   labels and buttons once there is more than one group. A two-column grid
   keeps "Property  [ … ]" on its own row at every width. */
body[data-page="stays"] .filter-bar,
body[data-page="gallery"] .filter-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--sp-4);
  row-gap: var(--sp-3);
}
body[data-page="stays"] .filter-bar__count,
body[data-page="gallery"] .filter-bar__count {
  grid-column: 1 / -1;
  margin-left: 0;
}

/* On a phone the subject row is long enough to swallow the screen, and the
   bar is sticky. Let each group scroll sideways inside itself instead. */
@media (max-width: 779px) {
  body[data-page="stays"] .filter-bar__group,
  body[data-page="gallery"] .filter-bar__group {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-block: 2px;
    -webkit-overflow-scrolling: touch;
  }
  body[data-page="stays"] .filter-bar__group::-webkit-scrollbar,
  body[data-page="gallery"] .filter-bar__group::-webkit-scrollbar { display: none; }

  body[data-page="stays"] .filter-bar,
  body[data-page="gallery"] .filter-bar {
    column-gap: var(--sp-3);
    row-gap: var(--sp-2);
  }
}

/* ================================================================== */
/* 2. The seven-column comparison table                                */
/* ================================================================== */

/* Property and Stay read as labels, not figures, so they stay left-aligned
   while every money column keeps the shared right alignment. */
body[data-page="stays"] .rate-table { min-width: 47rem; }
body[data-page="stays"] .rate-table thead th:nth-child(2),
body[data-page="stays"] .rate-table thead th:nth-child(3),
body[data-page="stays"] .rate-table tbody td:first-child,
body[data-page="stays"] .rate-table tbody td:nth-child(3) { text-align: left; }

body[data-page="stays"] .rate-table__prop {
  color: var(--ctx-muted);
  white-space: nowrap;
  width: 1%;
}
body[data-page="stays"] .rate-table tbody th { white-space: nowrap; }

/* On a phone the money columns scroll out to the right, so the cabin name
   pins to the left edge once it would leave the screen — otherwise a row of
   figures belongs to nothing. */
@media (max-width: 779px) {
  body[data-page="stays"] .rate-table { min-width: 42rem; }
  body[data-page="stays"] .rate-table thead th:nth-child(2),
  body[data-page="stays"] .rate-table tbody th {
    position: sticky;
    left: 0;
    z-index: 2;
    box-shadow: 1px 0 0 var(--ctx-line);
  }
  body[data-page="stays"] .rate-table thead th:nth-child(2) { background: var(--wv-lime); }
  body[data-page="stays"] .rate-table tbody th { background: var(--ctx-card); }
  body[data-page="stays"] .rate-table tbody tr:nth-child(even) th { background: var(--ctx-card-2); }
}
body[data-page="stays"] .rate-table tbody th a {
  color: inherit;
  text-decoration-color: var(--wv-lime-deep);
  text-underline-offset: 3px;
}

/* The scroll container is focusable, so it needs the sitewide ring and a
   hint that there is more table to the right. */
body[data-page="stays"] .rate-wrap { scroll-padding-inline: var(--sp-4); }
body[data-page="stays"] .rate-wrap:focus-visible { outline-offset: 2px; }

/* ================================================================== */
/* 3. Lightbox — a closed <dialog> must not sit over the page          */
/* ================================================================== */

.lightbox:not([open]) { pointer-events: none; }
.lightbox[open] { pointer-events: auto; }
.lightbox__nav[hidden] { display: none; }

/* picture() wraps the photo, so the wrapper is the grid item and the img's
   own `max-height: 100%` has no definite box to resolve against — a portrait
   photo then ran straight under the caption. Stretch the wrapper, and let
   gallery.js write the measured height into --lb-fit. */
.lightbox__fig picture {
  display: grid;
  place-items: center;
  align-self: stretch;
  justify-self: stretch;
  min-width: 0;
  min-height: 0;
}
.lightbox__fig .lightbox__img { max-height: var(--lb-fit, 70vh); }

/* components.css sets `grid-template-rows: auto 1fr auto`; a bare 1fr keeps
   an automatic minimum, so a tall photo grows the row instead of shrinking
   to fit and pushes the caption under itself. */
.lightbox { grid-template-rows: auto minmax(0, 1fr) auto; }


/* Property group headings. In default order the list runs Ooty then Wayanad,
   so a heading per property makes the two same-named A Frame Cabins legible
   as what they are: one in each forest, at different rates. */
.stay-group {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
  margin: var(--sp-4) 0 calc(var(--sp-2) * -1);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--ctx-line);
}
.stay-group:first-child { margin-top: 0; }
.stay-group__name {
  font-size: 1.12rem;
  font-weight: var(--fw-display);
  color: var(--ctx-head);
}
.stay-group__meta {
  font-size: 0.84rem;
  font-weight: var(--fw-regular);
  color: var(--ctx-muted);
}

/* The hero already says what this page is; the second heading only repeated
   it, so it is kept for the accessibility tree and hidden visually. */
body[data-page="stays"] .sec__head--tight { margin-bottom: var(--sp-4); }
body[data-page="stays"] .sec__head--tight .sec__lede { margin-top: 0; }