/* ==========================================================================
   Tiles — a text band with an optional row of linked, captioned photographs.

   Measured off the live Overviews at 1440, 810 and 390, 2026-09-24:
   Kodungallur's "Dining and Open Spaces", and Alleppey's "Dining & Wellness"
   (no tiles). Head and tiles stack 50px apart; the action closes the head. The head is an 800px
   left-aligned column (the full column below desktop): heading, then text
   blocks and paragraphs all 10px apart. Tiles are 588px (the card rule; live 450)
   tall and 40px apart, sharing the row from 1201; below that the row is the
   shared rail (vv-primitives.css): two across on a tablet, one on a phone
   (user, 2026-10-13).
   ========================================================================== */

.vv-band--r-tiles .vv-band__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;             /* a left-aligned band: every child, button included, starts on the left edge */
  gap: var(--vv-section-head-gap);
}

/* ---------- Head ---------- */

.vv-r-tiles__head {
  display: flex;
  flex-direction: column;
  gap: var(--vv-head-text-gap);        /* heading, then each text block, 10 apart (user, 2026-10-10: was 50) */
  width: var(--vv-r-tiles-measure);
  align-self: flex-start;              /* on the tile row's left edge */
  overflow: clip;                      /* as live */
}

.vv-r-tiles__heading { color: var(--vv-color-text-emphasised); }   /* one heading colour (design-principles §5) */

.vv-r-tiles__block {
  display: flex;
  flex-direction: column;
  gap: var(--vv-gap-10);
  overflow: clip;                      /* as live */
}

/* ---------- Tiles ---------- */

.vv-r-tiles__rows { width: 100%; }

.vv-r-tiles__row { gap: var(--vv-grid-gap); }

.vv-r-tiles__tile {
  position: relative;
  flex: 1 1 0;
  width: var(--vv-r-tiles-tile-w);
  height: var(--vv-card-media-h);      /* a single photograph: 588, the card rule (user, 2026-09-25; live 450) */
  overflow: clip;
}

.vv-r-tiles__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The whole tile is the link. Its caption sits bottom-left, 20px in, over a
   gradient from clear at mid-height to 60% black at the foot, so white
   text holds on a bright photograph (user, 2026-11-11; was clear to 20%). */
.vv-r-tiles__link {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: var(--vv-gap-10);
  height: 100%;
  padding: var(--vv-gap-20);
  background-image: linear-gradient(transparent 50%, var(--vv-color-image-wash-foot));
  text-decoration: none;
}

.vv-r-tiles__link:focus-visible {
  outline: 2px solid var(--vv-color-focus);
  outline-offset: -2px;
}

/* ---------- Action ---------- */

/* A flex box, so the inline-flex button brings no line-box strut. */
.vv-r-tiles__action { display: flex; }
.vv-r-tiles__head > .vv-r-tiles__action { margin-top: calc(var(--vv-gap-25) - var(--vv-head-text-gap)); }   /* closes the head, 25 under the text (user, 2026-10-08) */

/* ---------- Breakpoints ----------
   Viewport queries at Framer's cuts, per docs/components.md. */

:root {
  --vv-r-tiles-measure: var(--vv-measure-800);
  --vv-r-tiles-tile-w: auto;
}

/* Below desktop the tiles keep a width of their own and the rail scrolls. */
@media (max-width: 1200.98px) {
  :root {
    --vv-r-tiles-measure: 100%;
    --vv-r-tiles-tile-w: calc((100% - var(--vv-grid-gap)) / 2);   /* two across */
  }
  .vv-r-tiles__tile { flex: none; }
}

@media (max-width: 809.98px) {
  :root { --vv-r-tiles-tile-w: 100%; }                             /* one across */
  .vv-r-tiles__tile { height: var(--vv-card-media-h-md); }         /* 400, the card tier on a phone (user, 2026-10-13) */
}
.vv-r-tiles__eyebrow,
.vv-r-tiles__title { color: var(--vv-color-text-on-image); }   /* over the photograph (type v5: colour by component) */