/* ==========================================================================
   Media set — Signature Experiences, on both Overviews.

   Measured off the live Alleppey and Kodungallur Overviews at 1440, 810 and
   390, 2026-09-24. Head and rail stack 50px apart; the action closes the head. The head is an
   800px column, left-aligned on the band's left edge (the full column below
   desktop): heading and intro 20px apart, the list 30px under them. The
   rail is the shared primitive (vv-primitives.css) holding 748x588 slides (the card rule; live 500)
   10px apart. Below desktop the two Overviews differ — the slide_fit
   variant: `fixed` keeps 748 on a tablet and runs edge to edge on a phone,
   `fill` fits each slide to the column.

   Band padding is the primary 100px on Kodungallur and the secondary 80px on
   Alleppey — the band's `space` setting, not two components.
   ========================================================================== */

.vv-band--r-media-set .vv-band__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* the parent sets the edge: head, rail and button all start on the left (user, 2026-10-06) */
  gap: var(--vv-gap-50);
}

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

.vv-r-media-set__head {
  display: flex;
  flex-direction: column;
  gap: var(--vv-head-content-gap);
  width: var(--vv-r-media-set-measure);
}

.vv-r-media-set__text {
  display: flex;
  flex-direction: column;
  gap: var(--vv-head-text-gap);
}

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

/* Two columns, row by row, as the live list reads. Every row is as tall as
   the tallest: one item wrapping to two lines makes all the rows 50px, with
   each item sitting at the top of its row (Kodungallur at 1440, every phone
   width). */
.vv-r-media-set__points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  align-items: start;
  gap: var(--vv-r-media-set-row-gap) var(--vv-gap-20);
}

.vv-r-media-set__point {
  display: flex;
  align-items: center;
  gap: var(--vv-gap-10);
}

/* A 10px square turned 45deg in a 20px box: the live bullet, radius 1px, in
   the decorative gold. */
.vv-r-media-set__bullet {
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
}

.vv-r-media-set__bullet::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 1px;
  background-color: var(--vv-color-element-highlight);
  transform: rotate(45deg);
}

/* ---------- Rail ---------- */

.vv-r-media-set__rail { width: 100%; }

.vv-r-media-set__rail .vv-rail__track { gap: var(--vv-gap-10); }

.vv-r-media-set__slide {
  width: var(--vv-r-media-set-slide-w);
  height: var(--vv-card-media-h);      /* a single photograph: 588, the card rule (user, 2026-09-25; live 500) */
}

.vv-r-media-set__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

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

:root {
  --vv-r-media-set-measure: var(--vv-measure-800);
  --vv-r-media-set-slide-w: 748px;
  --vv-r-media-set-row-gap: var(--vv-gap-20);
}

@media (max-width: 1200.98px) {
  :root { --vv-r-media-set-measure: 100%; }
  /* fill (Kodungallur): below desktop each slide is the column's width. */
  .vv-r-media-set--fill .vv-r-media-set__slide { width: 100%; }
}

@media (max-width: 809.98px) {
  :root {
    --vv-r-media-set-slide-w: 100%;
    --vv-r-media-set-row-gap: var(--vv-gap-10);
  }
  .vv-r-media-set__points { grid-template-columns: minmax(0, 1fr); }
  /* fixed (Alleppey): one slide per screen, edge to edge. It no longer runs
     a pixel past each edge as live's rail does: that made the page scroll
     sideways by 1px (user, 2026-11-11: no horizontal scroll). */
  .vv-r-media-set--fixed .vv-r-media-set__rail {
    width: auto;
    align-self: stretch;
    margin-inline: calc(var(--vv-gutter) * -1);
  }
}

/* ==========================================================================
   Room pages — layouts photo and slideshow (measured 2026-09-25): across
   the column, 588 tall at every width (the card rule; live 500 / 520, and
   282 / 320 on a phone). The slideshow is the shared one's gallery.
   ========================================================================== */

.vv-r-media-set__single { width: 100%; }
.vv-r-media-set--photo .vv-r-media-set__img {
  display: block;
  width: 100%;
  height: var(--vv-card-media-h);
  object-fit: cover;
}
.vv-r-media-set--slideshow .vv-slides { --vv-slides-h: var(--vv-card-media-h); }

/* Two photographs side by side, 50 apart (Premier Rooms, measured 2026-09-28:
   live runs them at an odd off-centre width — a Framer artefact from a
   dropped third slot — so ours takes the room layout's own 625/50/625
   math instead, per the normalised container (#6). */
.vv-r-media-set__duo {
  display: flex;
  gap: var(--vv-gap-50);
}
.vv-r-media-set__duo-item {
  flex: 1 1 0;
  min-width: 0;
  height: var(--vv-card-media-h);
  overflow: clip;
}
.vv-r-media-set__duo-item .vv-r-media-set__img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 809.98px) {
  .vv-r-media-set__duo { flex-direction: column; }
  .vv-r-media-set__duo-item { height: var(--vv-card-media-h); }
}

/* ==========================================================================
   Banner — Culinary's "Discover Dining Across Our Villages" (measured
   2026-09-25): a photograph across the page, 480 tall (400 below desktop),
   the heading centred on it in a 740 column. No wash, as live.
   ========================================================================== */

.vv-band--r-media-set.vv-r-media-set--banner { padding-inline: 0; }
.vv-r-media-set--banner .vv-band__inner { max-width: none; }
.vv-r-media-set__banner {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 480px;
  overflow: clip;
}
.vv-r-media-set__banner .vv-r-media-set__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vv-r-media-set__banner-title {
  position: relative;
  max-width: var(--vv-measure-800);
  padding-inline: var(--vv-gutter);
  text-align: center;
}
@media (max-width: 1200.98px) {
  .vv-r-media-set__banner { height: 400px; }
}
.vv-r-media-set__banner-title { color: var(--vv-color-text-on-image); }   /* over its photograph (type v5: colour by component) */

/* ==========================================================================
   Phone photographs (design-principles §6, user 2026-11-11): 4:3 of the
   column, never taller than 300. In a band with a head, the photographs come
   straight after the heading and its description, then the list and the
   button: the head opens into the band's flow (50 apart, the head-to-content
   gap) and the rail moves up. The banner keeps its height: its heading sits
   on the photograph.
   ========================================================================== */
@media (max-width: 809.98px) {
  .vv-band--r-media-set :is(.vv-r-media-set__slide, .vv-r-media-set__duo-item),
  .vv-band--r-media-set.vv-r-media-set--photo .vv-r-media-set__img {
    height: auto;
    aspect-ratio: var(--vv-photo-ratio-wide);
    max-height: var(--vv-photo-max-h-phone);
    min-height: 0;   /* a portrait photograph must not stretch the 4:3 box (aspect-ratio's automatic minimum) */
  }
  .vv-band--r-media-set.vv-r-media-set--slideshow .vv-slides {
    --vv-slides-h: min(calc((100vw - 2 * var(--vv-gutter)) * 3 / 4), var(--vv-photo-max-h-phone));
  }
  .vv-band--r-media-set .vv-r-media-set__head { display: contents; }
  .vv-band--r-media-set :is(.vv-r-media-set__text, .vv-r-media-set__points) { align-self: stretch; }
  /* One column: each item as tall as its own lines, 20 apart, so a two-line
     item no longer leaves uneven gaps around it (user, 2026-11-11; equal
     1fr rows were measured off live). */
  .vv-band--r-media-set .vv-r-media-set__points { grid-auto-rows: auto; row-gap: var(--vv-gap-20); }
  .vv-band--r-media-set .vv-r-media-set__rail { order: 1; }
  .vv-band--r-media-set :is(.vv-r-media-set__points, .vv-r-media-set__head > .vv-r-media-set__action) { order: 2; }
}