/* ==========================================================================
   List grid — the room pages' diamond-bulleted lists. Measured off Heritage
   Rooms and the Private Pool Villa at 1440 / 810 / 390, 2026-09-25, with
   Kodungallur's as the standard where they drift (#33). Layout only: type
   from role classes, colour from role tokens.
   ========================================================================== */

.vv-r-list-grid__body {
  display: flex;
  flex-direction: column;
  gap: var(--vv-section-head-gap);
}
/* An optional line under the heading, pulled up to 15 from it (an
   experience's "Your package includes … one of the following:", #77). */
.vv-r-list-grid__intro { margin: calc(var(--vv-head-text-gap) - var(--vv-section-head-gap)) 0 0; max-width: var(--vv-measure-800); }   /* the 800 text column (§4) */
.vv-r-list-grid__group > p { margin: 0; }
/* The footnote under the lists keeps the same 800 text column (§4). */
.vv-r-list-grid__note { max-width: var(--vv-measure-800); }

/* ---------- Specs: short lines, row by row ----------
   3 or 4 columns, columns and rows 50 apart (user, 2026-10-07); the bullet 8
   from the text and level with the middle of its line. */
.vv-r-list-grid__specs {
  display: grid;
  grid-template-columns: repeat(var(--vv-r-list-grid-cols, 3), minmax(0, 1fr));
  gap: var(--vv-grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.vv-r-list-grid__specs > li {
  display: flex;
  align-items: flex-start;
  gap: var(--vv-gap-10);
}
.vv-r-list-grid__specs .vv-diamond { height: 25px; }   /* level with the 25px line */

/* ---------- Groups: a heading over each list ----------
   Columns 50 apart; the heading 16 over its list. */
.vv-r-list-grid__groups {
  display: grid;
  grid-template-columns: repeat(var(--vv-r-list-grid-cols, 3), minmax(0, 1fr));
  gap: var(--vv-grid-gap);
  align-items: start;
}
.vv-r-list-grid__group {
  display: flex;
  flex-direction: column;
  gap: var(--vv-gap-15);
}

/* Cards: each group ruled and inset 30 like the job cards (20 on a phone),
   on the band's own ground: a border, never a card ground of its own
   (user, 2026-10-12); a row's cards one height (#81). */
.vv-r-list-grid--cards .vv-r-list-grid__groups { align-items: stretch; }
.vv-r-list-grid--cards .vv-r-list-grid__group {
  padding: var(--vv-gap-30);
  border: 1px solid var(--vv-color-line);
}
/* Trial (About's teams, the only nested ruled cards): within a sub-section
   the heading sits 30 over its cards, and the cards are 30 apart (user,
   2026-10-12, to confirm). */
.vv-band--nested.vv-r-list-grid--cards .vv-r-list-grid__body,
.vv-band--nested.vv-r-list-grid--cards .vv-r-list-grid__groups { gap: var(--vv-gap-30); }

/* ---------- Breakpoints ---------- */

@media (max-width: 1200.98px) {
  .vv-r-list-grid__specs,
  .vv-r-list-grid__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 809.98px) {
  .vv-r-list-grid__specs,
  .vv-r-list-grid__groups { grid-template-columns: minmax(0, 1fr); }
  .vv-r-list-grid--cards .vv-r-list-grid__group { padding: var(--vv-gap-20); }
}

/* An optional button under the lists/note, 30 down; a PDF is a document row
   instead (.vv-doc-list, vv-primitives.css), as far down (Kodungallur Wellness's brochure).
   The row is 30 under the last line: the body's head gap sits between them
   already, so its margin takes that back, as the intro does (user, 2026-11-11).
   The button keeps the head gap plus 30 (Sriperumbudur's "Contact us"). */
.vv-r-list-grid__action { display: flex; margin-top: var(--vv-gap-30); }
.vv-r-list-grid__docs { margin-top: calc(var(--vv-gap-30) - var(--vv-section-head-gap)); }

/* A line's stroke icon in place of the diamond: 24, level with the line. */
.vv-r-list-grid__icon { flex: none; width: 24px; height: 24px; color: var(--vv-color-element-highlight); }
.vv-r-list-grid__group .vv-dlist > li { align-items: center; gap: var(--vv-gap-15); }

/* Addresses (global Contact): heading, address sentence, phone with its icon
   and a Get Directions link after it; no bullets, a 2x2 grid on desktop. The
   address balances its lines and the card keeps 50 clear on its right, so a
   long address wraps evenly instead of leaving a stray last word. */
.vv-r-list-grid__groups:has(.vv-r-list-grid__row) .vv-r-list-grid__group { padding-inline-end: var(--vv-gap-50); }
.vv-r-list-grid__groups:has(.vv-r-list-grid__row) .vv-r-list-grid__group > p:not(.vv-r-list-grid__row) { text-wrap: balance; }
.vv-r-list-grid__row { margin: 0; }
.vv-r-list-grid__row .vv-r-list-grid__icon { flex: none; width: 16px; height: 16px; color: inherit; }
.vv-r-list-grid__heading { align-self: flex-start; }