/* ==========================================================================
   Card grid — the site's highest-reach component.

   Measured off the live Alleppey and Kodungallur Overviews at 1440, 810 and
   390, 2026-09-24; the two agree on every value. It is a RAIL (the shared
   primitive in vv-primitives.css): 500px cards 40px apart that overflow the
   column rather than divide it, with the live Next/Previous arrows. On a
   phone each card is the column's width, and the rail stays inside the
   gutter.

   Media is a fixed height with the width filling. Cards take the small
   height, 268 (user, 2026-09-23); 588 is there for a large variant. The live
   site renders 360, so ours sit shorter.
   ========================================================================== */

.vv-band--r-card-grid .vv-band__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--vv-section-head-gap);
}

/* ---------- Head ----------
   Left-aligned in an 800px column (the full column below desktop). It
   carries 20px under it, then the band's 50px: the note ends 70px above the
   rail. */

.vv-r-card-grid__head {
  display: flex;
  flex-direction: column;
  gap: var(--vv-head-text-gap);
  width: var(--vv-r-card-grid-measure);
}

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

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

.vv-r-card-grid__rail { width: 100%; }

.vv-r-card-grid__rail .vv-rail__track {
  /* Cards stretch to the tallest one (user, 2026-10-04): photographs share
     one size and the body fills the rest, with the link held at the foot. */
  align-items: stretch;
  gap: var(--vv-grid-gap);
}

/* ---------- Card ---------- */

.vv-r-card-grid__card {
  display: flex;
  flex-direction: column;
  gap: var(--vv-gap-25);
  width: var(--vv-r-card-grid-card-w);
}

.vv-r-card-grid__media {
  height: var(--vv-card-media-h-sm);
  overflow: clip;
}

.vv-r-card-grid--large .vv-r-card-grid__media { height: var(--vv-card-media-h); }
/* Cards with a title, description and CTA: 400 on desktop where they were 268 (user, 2026-10-06). */
@media (min-width: 1201px) {
  .vv-r-card-grid--small .vv-r-card-grid__media { height: var(--vv-card-media-h-md); }
}
/* The Overviews' rooms rail: 4:3 at every width (user, 2026-11-11), landscape
   on a phone as on a desktop; it follows the card's width. Last of the
   --small rules, so it wins over the heights above. */
.vv-r-card-grid--small .vv-r-card-grid__media {
  height: auto;
  aspect-ratio: var(--vv-photo-ratio-wide);
}

.vv-r-card-grid__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* No card ground, so no inset (user, 2026-10-05): the text starts at the
   photograph's edge, 25 under it, with the link 25 under the text. */
.vv-r-card-grid__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--vv-gap-25);
  flex: 1;
}

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

/* An unframed card's body copy keeps 20 clear of its right edge, so the
   lines never run to the photograph's edge (user, 2026-11-11). Every card
   with no ground or border; framed cards keep their own inset. */
:is(.vv-r-card-grid__card, .vv-r-card-grid__gcard, .vv-r-card-grid__dcard, .vv-r-card-grid__vcard,
  .vv-r-card-grid__jcard, .vv-r-card-grid__acard, .vv-r-card-grid__ocard) .vv-role-body {
  padding-inline-end: var(--vv-gap-20);
}

.vv-r-card-grid__paras {
  display: flex;
  flex-direction: column;
  gap: var(--vv-gap-10);
}

/* The card link: .vv-textlink--card (vv-primitives.css). The image does not
   move on hover: the live card has no hover zoom. */
.vv-r-card-grid__action { display: flex; }   /* the link sits 25 under its description, not pinned to the card foot (user, 2026-10-10). flex: no line-box strut round the inline-flex link */

/* The band's link onward closes the head, 25 under the heading or note,
   never under the cards (user, 2026-10-07/08). */
.vv-r-card-grid__more { display: flex; }
.vv-r-card-grid__head > .vv-r-card-grid__more { margin-top: calc(var(--vv-gap-25) - var(--vv-head-text-gap)); }

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

:root {
  --vv-r-card-grid-measure: var(--vv-measure-800);
  --vv-r-card-grid-card-w: 500px;
}

@media (max-width: 1200.98px) {
  :root { --vv-r-card-grid-measure: 100%; }
}

@media (max-width: 809.98px) {
  :root { --vv-r-card-grid-card-w: 100%; }
}

/* ==========================================================================
   Grid layout — the homepage's Destinations (#29). Measured off the live
   homepage 2026-09-24: a centred head (label 10 over the heading, the note
   10 under, in an 892 column), 50 above three 340px columns 40 apart; two
   columns on a tablet, one on a phone. Each card: a photograph 268 tall
   (the card rule, #29), 20 to the name, the location 10 under it, the
   description 10 under that, the text link 16 below. No card ground.
   ========================================================================== */

.vv-r-card-grid__head--center {
  align-items: flex-start;
  width: 100%;
  max-width: var(--vv-measure-800);
  padding-block-end: 0;
  text-align: left;
}
.vv-r-card-grid__heading--default { color: var(--vv-color-text-emphasised); }

.vv-r-card-grid__grid {
  position: relative;               /* the cards' offsetTop, for their scroll-linked scale */
  display: grid;
  /* auto-fit: two cards share the row (Kodungallur Wedding) instead of
     leaving the third column empty; three still fill it. The columns run
     the band's full width so the cards start and end on the head's edges (#96). */
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--vv-grid-gap);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vv-r-card-grid__gcard {
  position: relative;               /* the stretched link's frame */
  display: flex;
  flex-direction: column;
  gap: var(--vv-gap-15);
}
.vv-r-card-grid--grid .vv-r-card-grid__media {
  height: var(--vv-card-media-h-sm);   /* the card rule, 268 at every width (user, 2026-09-25; live 400 / 260) */
  overflow: hidden;
  border-radius: var(--vv-radius-sm);   /* live: 4px on the photograph's frame */
  margin-bottom: var(--vv-gap-5);               /* 20 to the name: 15 from the card, 5 here */
}
@media (min-width: 1201px) {
  .vv-r-card-grid--grid .vv-r-card-grid__media { height: var(--vv-card-media-h-md); }   /* 400 on desktop (user, 2026-10-06) */
}
/* Two cards (the destination choice) have room for the large photograph (user, 2026-10-06). */
.vv-r-card-grid--duo-tall .vv-r-card-grid__media { height: var(--vv-card-media-h); }
.vv-r-card-grid__gbody,
.vv-r-card-grid__gtext {
  display: flex;
  flex-direction: column;
  gap: var(--vv-gap-10);
}
.vv-r-card-grid--grid .vv-r-card-grid__action { display: flex; }
.vv-r-card-grid__gcard > .vv-r-card-grid__action { margin-top: var(--vv-gap-10); }   /* 25 under the description (15 card gap + 10), never pinned to the card foot (user, 2026-10-10) */

/* The whole card answers the one link it holds, without a second link to the
   same page (#29): the name's link (.vv-r-card-grid__jlink) covers the card and
   the action is its label only. Never stretch the text link itself: its
   ::after is the underline. */

@media (max-width: 1200.98px) and (min-width: 810px) {
  .vv-r-card-grid__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 809.98px) {
  .vv-r-card-grid__grid { grid-template-columns: minmax(0, 1fr); }
  /* Live's head is 323 wide on a phone: kept as its measure inside the
     normalised gutter, so the lines break as live's (#5). */
  .vv-r-card-grid__head--center { max-width: var(--vv-measure-330); }
}

/* ==========================================================================
   Panels layout — the homepage's Destinations, a showcase (user,
   2026-10-10, after constancehotels.com). The head on the ground, 50 over
   one photograph across the screen: as tall as the screen under the bars
   on desktop (never under 500), 4:3 on a tablet, 5:8 on a phone, under the
   image wash. Over its middle the names sit in a row, each in a slot 44%
   wide (the full width on a phone), the current one centred and its
   neighbours at half strength; its line and its link directly under it.
   The 1 2 3 counter is centred at the foot. The photographs crossfade; the
   one showing drifts against the scroll. js/sections/r-card-grid.js keeps
   it in step.
   ========================================================================== */

.vv-band--r-card-grid.vv-r-card-grid--panels { overflow-x: clip; }   /* the bleed's 100vw never makes the page scroll sideways */

.vv-r-card-grid__show {
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  height: max(calc(100vh - var(--vv-shell-top)), var(--vv-show-min-h));
  overflow: hidden;
  color: var(--vv-color-text-on-image);
}

.vv-r-card-grid__show-media { position: absolute; inset: 0; }
.vv-r-card-grid__show-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--vv-color-image-wash-strong);
  pointer-events: none;
}
.vv-r-card-grid__show-photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--vv-motion-fade-duration) var(--vv-motion-fade-easing);
}
.vv-r-card-grid__show-photo.is-current { opacity: 1; }
.vv-r-card-grid__show-drift {
  position: absolute;
  inset: calc(-1 * var(--vv-gap-50)) 0;   /* overscan: the drift (at most 48) never shows an edge */
}
.vv-r-card-grid__show-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The names: a sideways scroller over the whole photograph. Padded half a
   slot short of the middle either side, so the first and last can centre. */
.vv-r-card-grid__show-names {
  position: absolute;
  inset: 0;
  display: flex;
  margin: 0;
  padding: 0 calc((100vw - var(--vv-show-name-w)) / 2);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.vv-r-card-grid__show-names::-webkit-scrollbar { display: none; }
.vv-r-card-grid__show-names:focus-visible { outline: 2px solid var(--vv-color-focus); outline-offset: -4px; }
.vv-r-card-grid__show-names.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.vv-r-card-grid__show-names.is-dragging * { pointer-events: none; }

.vv-r-card-grid__show-name {
  flex: none;
  width: var(--vv-show-name-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--vv-gap-20);
  padding-inline: var(--vv-gap-25);
  text-align: center;
  scroll-snap-align: center;
  scroll-snap-stop: always;   /* one name a swipe, as every carousel (user, 2026-10-16) */
  cursor: grab;
  opacity: 0.5;
  transition: opacity var(--vv-motion-fade-duration) var(--vv-motion-fade-easing);
}
.vv-r-card-grid__show-name.is-current { opacity: 1; }
.vv-r-card-grid__show-title { margin: 0; color: var(--vv-color-text-on-image); }
.vv-r-card-grid__show-text { margin: 0; max-width: var(--vv-measure-800); }

/* The link sits under the line; only the current name's shows. Its hover
   is the shared text link's. */
.vv-r-card-grid__show-link {
  display: flex;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--vv-motion-fade-duration) var(--vv-motion-fade-easing), visibility 0s linear var(--vv-motion-fade-duration);
}
.vv-r-card-grid__show-name.is-current .vv-r-card-grid__show-link {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.vv-r-card-grid__show-link .vv-textlink { color: var(--vv-color-text-on-image); }

/* The one small line at the top of the photograph. */
.vv-r-card-grid__show-line {
  position: absolute;
  inset: var(--vv-gap-50) var(--vv-gap-25) auto;
  z-index: 1;
  margin: 0;
  color: var(--vv-color-text-on-image);
  text-align: center;
  pointer-events: none;
}

/* The slideshow's controls, as the hero's (user, 2026-10-17): an arrow either
   side at mid-height, a dot per destination at the foot (vv-primitives.css).
   Over the names row, which covers the photograph. */
.vv-r-card-grid__show .vv-slides__controls { z-index: 1; }

@media (max-width: 1200.98px) and (min-width: 810px) {
  .vv-r-card-grid__show { height: auto; aspect-ratio: 4 / 3; }
}
/* On a phone, as the hero: the arrows 10 from the edge, and the name's text
   runs between them, 10 clear of each (user, 2026-10-17). */
@media (max-width: 809.98px) {
  .vv-r-card-grid__show { height: auto; aspect-ratio: 5 / 8; max-height: 100vh; --vv-show-name-w: 100vw; --vv-slides-arrow-inset: var(--vv-gap-10); }
  .vv-r-card-grid__show-name { padding-inline: calc(var(--vv-gap-10) + var(--vv-slides-arrow) + var(--vv-gap-10)); }
}

/* ==========================================================================
   Duo layout — the homepage's Weddings and Events (#92, user direction
   2026-10-05). Two cards of equal width 40 apart, each the photograph (588,
   the card rule) over a left-aligned label, heading and text link; a phone
   stacks them with the small photograph (268).
   ========================================================================== */

.vv-r-card-grid__duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--vv-grid-gap);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.vv-r-card-grid__dcard {
  position: relative;               /* the stretched link's frame: without it every card's link covers the band */
  display: flex;
  flex-direction: column;
  gap: var(--vv-gap-25);
}
.vv-r-card-grid__dmedia {
  height: var(--vv-card-media-h);
  overflow: hidden;
  border-radius: var(--vv-radius-sm);
}
.vv-r-card-grid__dbody {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--vv-gap-10);
}
.vv-r-card-grid__dtitle { color: var(--vv-color-text-emphasised); margin: 0 0 var(--vv-gap-10); }
.vv-r-card-grid--duo .vv-r-card-grid__action { display: flex; }

@media (max-width: 809.98px) {
  .vv-r-card-grid__duo { grid-template-columns: minmax(0, 1fr); }
  .vv-r-card-grid__dmedia { height: var(--vv-card-media-h-sm); }
}

/* ==========================================================================
   Rows layout — the Accommodations hubs. Measured off both 2026-09-25,
   Kodungallur's as the standard (#31): 40 above the first row (80 on a
   tablet) and nothing under the last; full-width cards 60 apart on the quiet row ground; two
   equal columns 20 apart, the photograph left at every width (Alleppey's
   zigzag is not kept); the text inset 40 top and bottom, 20 at the sides,
   the name 8 over the line; the details link closes the text, the booking
   button 25 under it (user, 2026-10-08). The
   photograph is 588 (the card rule, #7; live 360). On a phone it sits over
   the text, edge to edge, as live's does.
   ========================================================================== */

.vv-band--r-card-grid.vv-r-card-grid--rows.vv-r-card-grid--headless {
  padding-block: 0;   /* the title band's own bottom gap is the one gap */
}

.vv-r-card-grid__rows {
  display: flex;
  flex-direction: column;
  gap: var(--vv-grid-gap);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The redesigned row: the photograph three fifths, the text centred
   on it, 100 in from the photograph and 50 from the edge. */
.vv-r-card-grid__row[hidden] { display: none; }

.vv-r-card-grid__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);   /* half and half: the text column was 2/5, ~370 wide (user, 2026-10-10) */
  align-items: center;
}

.vv-r-card-grid--rows .vv-r-card-grid__media {
  height: var(--vv-card-media-h);
  overflow: hidden;
}

.vv-r-card-grid--rows .vv-r-card-grid__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Several photographs: one to a slide, the rail's arrows over them. */
.vv-r-card-grid__gallery .vv-rail,
.vv-r-card-grid__gallery .vv-rail__track { height: 100%; }
.vv-r-card-grid__gallery .vv-rail__item { width: 100%; height: 100%; scroll-snap-align: start; }

.vv-r-card-grid__rbody {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--vv-gap-25);   /* the booking button 25 under the details link (user, 2026-10-08) */
  padding: var(--vv-gap-40) var(--vv-gutter) var(--vv-gap-40) var(--vv-gap-40);   /* the text takes the half: 40 off the photograph, the gutter at the edge */
  max-width: calc(var(--vv-measure-800) + var(--vv-gap-40) + var(--vv-gutter));   /* text runs to 800 at most */
}

.vv-r-card-grid--rows .vv-r-card-grid__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* the details link underlines its label only */
  gap: var(--vv-head-text-gap);   /* the title group: label, name, its lines and description 10 apart (§4; user, 2026-10-12: was 20) */
}

/* A second paragraph keeps the body's 20; the list (content) and the details
   link sit 25 under the group (§4, the title group; user, 2026-10-12). */
.vv-r-card-grid--rows .vv-r-card-grid__text > p.vv-role-body + p.vv-role-body { margin-top: calc(var(--vv-gap-20) - var(--vv-head-text-gap)); }
.vv-r-card-grid--rows .vv-r-card-grid__text > :is(.vv-r-card-grid__list, .vv-r-card-grid__action) { margin-top: calc(var(--vv-gap-25) - var(--vv-head-text-gap)); }

.vv-r-card-grid__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.vv-r-card-grid__list li::before { content: "– "; }

.vv-r-card-grid__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vv-gap-20);
}

@media (max-width: 1200.98px) {
  .vv-r-card-grid__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .vv-r-card-grid__rbody { padding: var(--vv-gap-40) var(--vv-gutter) var(--vv-gap-40) var(--vv-gap-25); }
}

@media (max-width: 809.98px) {
  .vv-band--r-card-grid.vv-r-card-grid--rows { padding-inline: 0; }
  .vv-r-card-grid--rows .vv-r-card-grid__head { padding-inline: var(--vv-gutter); }
  .vv-r-card-grid--rows .vv-r-card-grid__label,
  .vv-r-card-grid--rows .vv-r-card-grid__vnote,
  .vv-r-card-grid--rows .vv-r-card-grid__vmore { margin-inline: var(--vv-gutter); }   /* the band is edge to edge for the photographs; its words keep the gutter */
  .vv-r-card-grid__row { grid-template-columns: minmax(0, 1fr); }
  .vv-r-card-grid--rows .vv-r-card-grid__media { height: var(--vv-card-media-h-md); }   /* 400 on a phone (user, 2026-10-06) */
  .vv-r-card-grid__rbody {
    padding: var(--vv-gap-30) var(--vv-gutter) 0;
  }
}

/* ==========================================================================
   Stays — the Accommodations hubs (user, 2026-10-11, after
   constancehotels.com; design-principles.md §6). One room to a block, 100
   apart: the photograph the container's width at 588 (400 below desktop, edge
   to edge on a phone), then 40 under it the name across both columns and,
   10 under it, two equal columns 50 apart: the text left, the amenities
   right in two columns of four (25 apart), level with the facts line,
   dot-bulleted (no "View all amenities" link since 2026-10-16, user). Below
   desktop the columns stack, the amenities above the details link and the
   booking button (user, 2026-10-16); a phone lists four, two columns.
   ========================================================================== */

.vv-band--r-card-grid.vv-r-card-grid--stays.vv-r-card-grid--headless { padding-block: 0; }

.vv-r-card-grid__stays {
  display: flex;
  flex-direction: column;
  gap: var(--vv-gap-100);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vv-r-card-grid--stays .vv-r-card-grid__media {
  height: var(--vv-card-media-h);
  overflow: hidden;
}

.vv-r-card-grid--stays .vv-r-card-grid__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vv-r-card-grid__sbody {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--vv-grid-gap);
  row-gap: var(--vv-head-text-gap);   /* the facts and the amenities 10 under the name */
  margin-top: var(--vv-gap-40);
}

.vv-r-card-grid__sname { grid-column: 1 / -1; max-width: var(--vv-measure-800); }

.vv-r-card-grid--stays .vv-r-card-grid__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--vv-gap-20);
  max-width: var(--vv-measure-800);
}

.vv-r-card-grid__facts { margin-block-end: calc(var(--vv-gap-10) - var(--vv-gap-20)); }   /* the specs line sits 10 above the description, not the column's 20 (user, 2026-10-11) */
.vv-r-card-grid--stays .vv-r-card-grid__buttons { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vv-gap-15); margin-top: var(--vv-gap-5); }   /* See Details (secondary) then Book this room (primary) in one row, 15 apart, 25 under the description (user, 2026-11-11) */

.vv-r-card-grid__amenities {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--vv-gap-25);
}

.vv-r-card-grid__alist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: column;
  grid-template-rows: repeat(4, auto);
  column-gap: var(--vv-gap-25);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Dot bullets (user, 2026-10-11): a 4px dot in the text colour, centred on the first line. */
.vv-r-card-grid__alist > li {
  position: relative;
  padding-inline-start: var(--vv-gap-15);
}
.vv-r-card-grid__alist > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: calc(0.5lh - 2px);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: currentColor;
}

@media (max-width: 1200.98px) {
  .vv-r-card-grid--stays .vv-r-card-grid__media { height: var(--vv-card-media-h-md); }
  /* Stacked, the amenities come above the actions (user, 2026-10-16): the
     text column opens into the body's flow, so the actions can follow the list. */
  .vv-r-card-grid__sbody { display: flex; flex-direction: column; align-items: flex-start; gap: var(--vv-gap-20); }
  .vv-r-card-grid--stays .vv-r-card-grid__text { display: contents; }
  .vv-r-card-grid__sname { margin-block-end: calc(var(--vv-head-text-gap) - var(--vv-gap-20)); }   /* the facts stay 10 under the name */
  .vv-r-card-grid__amenities { align-self: stretch; margin-top: var(--vv-gap-5); }   /* 25 under the description, the column's width */
  .vv-r-card-grid--stays .vv-r-card-grid__text > .vv-r-card-grid__buttons { order: 1; }   /* the buttons 25 under the list */
}

@media (max-width: 809.98px) {
  .vv-band--r-card-grid.vv-r-card-grid--stays { padding-inline: 0; }
  .vv-r-card-grid--stays .vv-r-card-grid__head { padding-inline: var(--vv-gutter); }
  /* edge to edge; 400 tall, as the rows (the card tier) */
  .vv-r-card-grid__sbody { margin-top: var(--vv-gap-30); padding-inline: var(--vv-gutter); }
  .vv-r-card-grid__alist { grid-template-rows: repeat(2, auto); }
  .vv-r-card-grid__alist > li:nth-child(n + 5) { display: none; }
  .vv-r-card-grid--stays .vv-r-card-grid__buttons { gap: var(--vv-gap-10); }   /* 10 apart on a phone, so the pair stays one row at 390 (user, 2026-11-11) */
}

/* ==========================================================================
   Venues — a Culinary property section's dining spaces (#34): the label 50 (25 nested)
   over the venues, then the note 50 below. Several venues are cards side by
   side (user, 2026-10-11): three across 50 apart on desktop, a rail of 330
   on a tablet, a column on a phone; a photograph 268 tall, the name 20 under
   it, the description 10 under that. One venue is a row of the rows layout.
   ========================================================================== */

.vv-r-card-grid--venues .vv-band__inner { align-items: stretch; gap: 0; }
.vv-r-card-grid__venues { display: flex; flex-direction: column; gap: var(--vv-section-head-gap); }
/* Nested under the property's group (Culinary), the "Dining Spaces" heading
   sits 25 over its venues: the property's group is 50 above, so the heading
   reads with what it heads (§4, nested bands; user, 2026-10-12). */
.vv-band--nested .vv-r-card-grid__venues { gap: var(--vv-gap-25); }
.vv-r-card-grid__label { margin: 0; max-width: var(--vv-measure-800); }   /* text runs to 800 at most (§2) */

.vv-r-card-grid__vtrack { gap: var(--vv-grid-gap); }
.vv-r-card-grid__vcard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--vv-gap-20);
}
.vv-r-card-grid__vcard .vv-r-card-grid__media { width: 100%; height: var(--vv-card-media-h-sm); overflow: hidden; }
.vv-r-card-grid__vcard .vv-r-card-grid__img { width: 100%; height: 100%; object-fit: cover; }
.vv-r-card-grid__vtext { display: flex; flex-direction: column; gap: var(--vv-head-text-gap); max-width: var(--vv-measure-800); }
.vv-r-card-grid__vcard .vv-r-card-grid__action { margin-top: var(--vv-gap-5); }   /* 25 under the description */

@media (min-width: 1201px) {
  .vv-r-card-grid__vtrack { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
}
@media (max-width: 1200.98px) and (min-width: 810px) {
  .vv-r-card-grid__vcard { width: 330px; scroll-snap-align: start; }
  .vv-r-card-grid__vtrack { scroll-snap-type: x mandatory; }
}
@media (max-width: 809.98px) {
  .vv-r-card-grid__vtrack { flex-direction: column; overflow: visible; }
}

.vv-r-card-grid__vnote {
  max-width: var(--vv-measure-800);
  margin: var(--vv-gap-50) 0 0;
  text-align: left;
}

/* ==========================================================================
   Journal — Culinary's "from jorunal" (measured 2026-09-25, #34): the label,
   its line 25 under it, 50 over three linked cards 50 apart (two on a
   tablet, one on a phone); a photograph 268 tall (the card rule; live 400),
   the title 20 under it. The whole card answers the link.
   ========================================================================== */

.vv-r-card-grid--journal .vv-band__inner { align-items: stretch; gap: var(--vv-section-head-gap); }
.vv-r-card-grid__jhead { display: flex; flex-direction: column; gap: var(--vv-head-text-gap); max-width: var(--vv-measure-800); }
.vv-r-card-grid__journal {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--vv-grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.vv-r-card-grid__jcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--vv-gap-20);
}
.vv-r-card-grid__jcard .vv-r-card-grid__media { height: var(--vv-card-media-h-sm); }
.vv-r-card-grid__jlink { color: inherit; text-decoration: none; }
.vv-r-card-grid__jlink::after { content: ""; position: absolute; inset: 0; z-index: 1; }   /* above the card's other positioned parts (the link label), so the whole card is the link */
/* The card's label has the link's hover while the card is hovered or focused (its own box sits under the stretched link). */
.vv-band--r-card-grid li:has(.vv-r-card-grid__jlink:is(:hover, :focus-visible)) .vv-textlink::after { transform: scaleX(0.7); }

@media (max-width: 1200.98px) {
  .vv-r-card-grid__journal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 809.98px) {
  .vv-r-card-grid__journal { grid-template-columns: minmax(0, 1fr); }
}
.vv-r-card-grid__vmore { display: flex; margin-top: var(--vv-gap-50); }
/* Live centres the journal's head on a tablet only. */
@media (max-width: 1200.98px) and (min-width: 810px) {
  .vv-r-card-grid__jhead { text-align: left; }
}

/* ==========================================================================
   Awards — Awards & Press (measured 2026-09-27, #35). The label centred, 40
   over the awards, 60 apart: two equal columns 50 apart, the certificate
   whole in a 588 box (the card rule; live 294–412 tall in a 500 row), the
   text centred on it. Stacked below desktop, the text 50 under.
   ========================================================================== */

.vv-r-card-grid--awards .vv-band__inner { align-items: stretch; gap: var(--vv-section-head-gap); }
.vv-r-card-grid--awards .vv-r-card-grid__label { text-align: left; }
.vv-r-card-grid__awards { min-width: 0; }
.vv-r-card-grid__atrack { align-items: stretch; }
/* Each award its own white card, as the Packages cards (user, 2026-11-11):
   the cream certificate panel to the card's edges, the text 50 inside on
   desktop (30 on a tablet, 20 on a phone), the arrows outside the card,
   centred in the band's side margin. */
.vv-r-card-grid__award {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--vv-gap-50);
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  background-color: var(--vv-color-background-highlight);   /* a white card has no border (user, 2026-10-18) */
  scroll-snap-align: start;
}
.vv-r-card-grid__awards .vv-rail { --vv-aside: var(--vv-gutter); }
.vv-r-card-grid__awards .vv-rail__controls {
  inset-inline: calc(var(--vv-aside) * -1);
  padding-inline: var(--vv-gap-10);   /* the 30 disc centred in the 50 gutter */
}
.vv-r-card-grid__atext { padding-block: var(--vv-gap-50); padding-inline-start: var(--vv-gap-50); }   /* the text left, 50 in; the certificate panel to the right edge */
.vv-r-card-grid__certificate {
  box-sizing: border-box;
  height: var(--vv-card-media-h);
  padding: var(--vv-gap-50);
  background-color: var(--vv-color-background-feature);   /* the cream ground sits behind the certificate only */
}
.vv-r-card-grid__certificate .vv-r-card-grid__img { width: 100%; height: 100%; object-fit: contain; }
.vv-r-card-grid__atext { display: flex; flex-direction: column; }
.vv-r-card-grid__aname { margin-top: var(--vv-gap-15); }
.vv-r-card-grid__ayear { margin-top: var(--vv-gap-20); }
.vv-r-card-grid__atext > .vv-role-body { margin-top: var(--vv-gap-10); }

/* ==========================================================================
   Press — Awards & Press (measured 2026-09-27, #35). A centred head in an
   800 column (the label, paragraphs 25 under it, 10 apart), 50 over white
   cards, 580 wide and 40 apart, 500 tall, padded 50 / 40: the source, the
   title 40 under it, the summary 30 under that, the link 30 below.
   Stacked below desktop, padded 25 at the sides on a phone.
   ========================================================================== */

.vv-r-card-grid--press .vv-band__inner { gap: var(--vv-section-head-gap); }
.vv-r-card-grid__phead {
  display: flex;
  flex-direction: column;
  gap: var(--vv-head-text-gap);
  max-width: var(--vv-measure-800);
  text-align: left;
}
.vv-r-card-grid__press {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));   /* the cards span the column, their left edge the heading's */
  gap: var(--vv-grid-gap);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.vv-r-card-grid__pcard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
  min-height: 500px;
  padding: var(--vv-gap-50) var(--vv-gap-40);
  background-color: var(--vv-color-background-highlight);   /* a white card has no border (user, 2026-10-18) */
}
.vv-r-card-grid__ptitle { margin-top: var(--vv-gap-40); }
.vv-r-card-grid__ptext { margin-top: var(--vv-gap-30); }
.vv-r-card-grid__plink { margin-top: var(--vv-gap-30); }

@media (max-width: 1200.98px) {
  .vv-r-card-grid__award { grid-template-columns: minmax(0, 1fr); gap: 0; align-items: start; }
  .vv-r-card-grid__atext { padding: var(--vv-gap-30); }
  .vv-r-card-grid__certificate { order: -1; }   /* stacked: the certificate above its text */
  .vv-r-card-grid__certificate { height: var(--vv-card-media-h-sm); padding: var(--vv-gap-20); }
  .vv-r-card-grid__press { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 809.98px) {
  .vv-r-card-grid__atext { padding: var(--vv-gap-20); }
  /* The Packages rail on a phone (user, 2026-11-11): to the screen's edges,
     the next award peeking in 15 along, each settling on the gutter; the
     peek says there is more, so no arrows; the dots, a swipe and the keyboard remain. */
  .vv-r-card-grid__awards { align-self: stretch; width: auto; margin-inline: calc(var(--vv-gutter) * -1); }
  .vv-r-card-grid__awards .vv-rail__track { gap: var(--vv-gap-15); padding-inline: var(--vv-gutter); scroll-padding-inline: var(--vv-gutter); }
  .vv-r-card-grid__award { flex: none; width: calc(100vw - var(--vv-gutter) - var(--vv-gap-50)); }
  .vv-r-card-grid__awards .vv-rail { --vv-aside: 0px; }   /* the controls stay within the screen */
  .vv-r-card-grid__awards .vv-rail__arrow { display: none; }
  .vv-r-card-grid__pcard { padding-inline: var(--vv-gutter); }
}

/* ==========================================================================
   Articles — the Journal's cards (Our Journal, and an article's Related
   Stories), measured off the live hub 2026-09-29: three across 40 apart and
   64 between rows (two on a tablet, one on a phone); a photograph 427 by 400,
   its category 20 under it, the title 10 under that, the byline 10 under
   that. The whole card answers the link.
   ========================================================================== */

.vv-r-card-grid--articles { padding-inline: var(--vv-gutter); }   /* the one gutter, every width (user, 2026-10-12; live ran 40) */
.vv-r-card-grid--articles.vv-band--space-stack { padding-block: var(--vv-section-y); }   /* live: the first row at 310; 100 clear of the newsletter */   /* live: the first row at 310, 36 below where the title band leaves it */
.vv-r-card-grid--articles .vv-band__inner { display: flex; flex-direction: column; gap: var(--vv-section-head-gap); max-width: var(--vv-container); }
.vv-r-card-grid__ahead {
  align-self: stretch;               /* the full width, so the heading and the link sit at opposite edges */
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--vv-gap-20);
}
.vv-r-card-grid__articles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--vv-grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.vv-r-card-grid__acard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--vv-gap-10);
}
.vv-r-card-grid__acard[hidden] { display: none; }
.vv-r-card-grid__amedia {
  height: 400px;                      /* live: 400 at every width */
  margin-bottom: var(--vv-gap-10);   /* 20 under the photograph, with the card's own 10 */
  overflow: hidden;
}
.vv-r-card-grid__amedia .vv-r-card-grid__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vv-r-card-grid__acard :is(p, h2, h3) { margin: 0; }
.vv-r-card-grid__amore { align-self: stretch; width: 100%; display: flex; justify-content: center; }   /* Load More: a text link, centred (user, 2026-10-17) */
.vv-r-card-grid__amore[hidden] { display: none; }

@media (max-width: 1200.98px) {
  .vv-r-card-grid__articles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 809.98px) {
  .vv-r-card-grid__articles { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Jobs layout — the Job Postings hub, measured off the live page 2026-10-03
   (#61). A filter row (Job Location buttons left, Category select right,
   40 apart, centred on each other; the select first on a phone) 40 over
   white cards 20 apart. A card: 30 inset (20 on a phone), the text, then
   Apply now on the right 40 away, centred on the card (under the text on a
   phone). No side inset beyond the band's own gutter.
   ========================================================================== */
.vv-r-card-grid__filters {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--vv-gap-40);
  /* The listings start 20 under the filters, the same as between two
     listings: the band's head gap is taken back (user, 2026-10-18). */
  margin-block-end: calc(var(--vv-gap-20) - var(--vv-section-head-gap));
}
.vv-r-card-grid__filters[hidden] { display: none; }
.vv-r-card-grid__filter {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--vv-gap-15);
}
.vv-r-card-grid__filter--category { margin-inline-start: auto; }   /* stays on the right when the location row is left out */
.vv-r-card-grid__filter p { margin: 0; }
.vv-r-card-grid__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vv-gap-10);
}
.vv-r-card-grid__option {
  height: 40px;
  padding: var(--vv-gap-10);
  border: 0;
  border-radius: var(--vv-radius-sm);
  background-color: var(--vv-color-control-filter);
  text-align: start;
  cursor: pointer;
  transition: background-color var(--vv-motion-hover-duration) var(--vv-motion-hover-easing),
    color var(--vv-motion-hover-duration) var(--vv-motion-hover-easing);
}
.vv-r-card-grid__option[aria-pressed="true"] { background-color: var(--vv-color-control-filter-on); color: var(--vv-color-text-on-emphasised); }
.vv-r-card-grid__select {
  position: relative;
  display: block;
  width: 180px;
  border-radius: var(--vv-radius-sm);
  background-color: var(--vv-color-control-filter);
}
.vv-r-card-grid__select select {
  display: block;
  width: 100%;
  height: 40px;
  padding: 0 var(--vv-gap-40) 0 var(--vv-gap-10);
  border: 0;
  border-radius: var(--vv-radius-sm);
  background: transparent;
  appearance: none;
  cursor: pointer;
}
.vv-r-card-grid__chevron {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 12px;
  margin-block: auto;
  color: var(--vv-color-text-default);
  pointer-events: none;
}

.vv-r-card-grid__jobs {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: var(--vv-gap-20);
  margin: 0;
  padding: 0;
  list-style: none;
}
.vv-r-card-grid__job {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vv-gap-40);
  padding: var(--vv-gap-30);
  background-color: var(--vv-color-background-highlight);   /* a white card has no border (user, 2026-10-18) */
}
.vv-r-card-grid__job[hidden] { display: none; }
.vv-r-card-grid__jtext {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--vv-gap-10);
  min-width: 0;
  max-width: var(--vv-measure-800);   /* text keeps to 800; Apply now stays at the card's right */
}
.vv-r-card-grid__jtext :is(h2, h3, p) { margin: 0; }
.vv-r-card-grid__job .vv-button { flex: none; }
.vv-r-card-grid__posted { display: flex; gap: var(--vv-gap-10); }   /* the date 10 from its label, no dot */
.vv-r-card-grid__posted > :first-child { color: var(--vv-color-text-subtle); }   /* "Posted on", quieter than its date (user, 2026-10-18) */

@media (max-width: 809.98px) {
  .vv-r-card-grid__filters { flex-direction: column; align-items: flex-start; gap: var(--vv-gap-30); }
  .vv-r-card-grid__filter--category { order: -1; margin-inline-start: 0; }
  .vv-r-card-grid__job { flex-direction: column; align-items: flex-start; padding: var(--vv-gap-20); }
}

/* ==========================================================================
   Experiences layout — the Signature Experiences hub (CHR-19), on the
   baseline (#38): the articles card and grid, plus the property and
   duration lines, the description and "Explore Experience". Over the cards,
   Location tabs that stick under the header, then the type chips from the
   jobs row, 40 apart. The text runs 10 apart; the
   link sits 6 further down. On a phone the buttons scroll sideways in one
   line instead of wrapping.
   ========================================================================== */
.vv-r-card-grid--experiences { padding-inline: var(--vv-gutter); }
.vv-r-card-grid--experiences .vv-band__inner { display: flex; flex-direction: column; gap: var(--vv-gap-40); max-width: var(--vv-container); }
.vv-r-card-grid__ehead { display: flex; flex-direction: column; gap: var(--vv-head-text-gap); align-self: flex-start; max-width: var(--vv-measure-800); text-align: start; }   /* left, on the tabs' edge (user, 2026-10-05) */
.vv-r-card-grid__ehead :is(h2, p) { margin: 0; }
.vv-r-card-grid__ehead + * { margin-block-start: calc(var(--vv-head-content-gap) - var(--vv-gap-40)); }   /* the head block to the cards: 50 */
/* The Location tabs or type chips belong to the head (they narrow what it
   heads), so they sit 25 under it, not the head-to-content 50 (user, 2026-11-11). */
.vv-r-card-grid__ehead + :is(.vv-r-card-grid__places, .vv-r-card-grid__results:has(> .vv-r-card-grid__options--experiences:not([hidden]))) {
  margin-block-start: calc(var(--vv-gap-25) - var(--vv-gap-40));
}
/* The Location tabs stick under the fixed site header (its height, and the
   sub-nav's while that is showing, set by the script as --vv-sticky-top),
   on the band's ground over a hairline; the chosen tab is underlined. */
.vv-r-card-grid__places {
  position: sticky;
  top: var(--vv-sticky-top, 0px);
  z-index: 5;
  display: flex;
  align-self: stretch;      /* the hairline runs the column's width; the tabs start on its edge, as the chips and cards */
  gap: var(--vv-gap-20);
  border-block-end: 1px solid var(--vv-color-line);
  background-color: var(--vv-tone-bg);
}
.vv-r-card-grid__places[hidden] { display: none; }
.vv-r-card-grid__place {
  flex: none;
  margin-block-end: -1px;   /* the underline sits on the hairline */
  padding: var(--vv-gap-10);
  border: 0;
  background-color: transparent;
  color: var(--vv-color-text-default);
  border-block-end: 2px solid transparent;
  cursor: pointer;
  transition: border-color var(--vv-motion-hover-duration) var(--vv-motion-hover-easing),
    background-color var(--vv-motion-hover-duration) var(--vv-motion-hover-easing),
    color var(--vv-motion-hover-duration) var(--vv-motion-hover-easing);
}
.vv-r-card-grid__place[aria-selected="true"] { border-block-end-color: var(--vv-color-text-cta); color: var(--vv-color-text-cta); }
/* GeneratePress fills every button on focus and press, which turned the chosen
   tab dark once clicked. The tab keeps the role's own states. */
.vv-r-card-grid__place:is(:focus, :active) { background-color: transparent; color: var(--vv-color-text-default); }
.vv-r-card-grid__place:is(:hover, :focus:hover) { background-color: var(--vv-color-background); color: var(--vv-color-text-default); }
.vv-r-card-grid__place[aria-selected="true"]:is(:focus, :active) { color: var(--vv-color-text-cta); }
.vv-r-card-grid__place:focus-visible { outline: 2px solid var(--vv-color-focus); outline-offset: -2px; }
.vv-r-card-grid__results { display: flex; align-self: stretch; min-width: 0; flex-direction: column; gap: var(--vv-gap-40); }
.vv-r-card-grid__option[hidden] { display: none; }
/* The offer cards (Figma 978:162, user 2026-10-11): two across, 50 apart and
   100 between rows, no card ground; the photograph, then 30 under it the
   name, description and link, 10 apart, the text 25 short of the card's edge. */
.vv-r-card-grid__offers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--vv-gap-100) var(--vv-grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.vv-r-card-grid__ocard { position: relative; display: flex; flex-direction: column; gap: var(--vv-gap-30); }
.vv-r-card-grid__ocard[hidden] { display: none; }
.vv-r-card-grid__omedia { height: var(--vv-card-media-h-md); overflow: hidden; }
.vv-r-card-grid__omedia .vv-r-card-grid__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vv-r-card-grid__obody { display: flex; flex-direction: column; align-items: flex-start; gap: var(--vv-gap-10); }
.vv-r-card-grid__obody :is(p, h2, h3) { margin: 0; }
.vv-r-card-grid__ocard .vv-r-card-grid__link { display: inline-flex; align-items: center; gap: var(--vv-gap-10); }
.vv-r-card-grid__ocard:focus-within { outline: 2px solid var(--vv-color-focus); outline-offset: 4px; }
.vv-r-card-grid__ocard .vv-r-card-grid__jlink:focus-visible { outline: none; }
@media (max-width: 809.98px) {
  .vv-r-card-grid__offers { grid-template-columns: minmax(0, 1fr); gap: var(--vv-grid-gap); }
}
.vv-r-card-grid__ecard .vv-r-card-grid__action { margin-top: var(--vv-gap-15); }   /* 25 under the description (10 text gap + 15), never pinned to the card foot (user, 2026-10-10) */
.vv-r-card-grid__ecard .vv-r-card-grid__link { display: inline-flex; align-items: center; gap: var(--vv-gap-10); }
.vv-r-card-grid__ecard:focus-within { outline: 2px solid var(--vv-color-focus); outline-offset: 4px; }
.vv-r-card-grid__ecard .vv-r-card-grid__jlink:focus-visible { outline: none; }

@media (max-width: 809.98px) {
  .vv-r-card-grid--experiences { padding-inline: var(--vv-gutter); }
  .vv-r-card-grid__options--experiences {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(var(--vv-gutter) * -1);              /* scroll to the screen's edges, the first button on the gutter */
    padding-inline: var(--vv-gutter);
    scrollbar-width: none;
  }
  .vv-r-card-grid__options--experiences .vv-r-card-grid__option { flex: none; }
  .vv-r-card-grid__places {
    gap: var(--vv-gap-10);
    overflow-x: auto;
    margin-inline: calc(var(--vv-gutter) * -1);              /* the tabs scroll to the screen's edges, as the chips */
    padding-inline: var(--vv-gutter);
    scrollbar-width: none;
  }
  /* A row that scrolls sideways says there is more: the band's ground fades
     over the edge where labels are hidden, 50 wide, and goes once that end
     is reached (js/sections/r-card-grid.js sets the attributes; user,
     2026-11-11). The fades are sticky flex items that take no room: the
     negative margin gives back their width and the row's 10 gap. */
  :is(.vv-r-card-grid__places, .vv-r-card-grid__options--experiences)::before,
  :is(.vv-r-card-grid__places, .vv-r-card-grid__options--experiences)::after {
    content: "";
    position: sticky;
    z-index: 1;
    flex: none;
    align-self: stretch;
    width: var(--vv-gap-50);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--vv-motion-toggle-duration) var(--vv-motion-toggle-easing);
  }
  :is(.vv-r-card-grid__places, .vv-r-card-grid__options--experiences)::before {
    inset-inline-start: calc(var(--vv-gutter) * -1);   /* sticky edges sit inside the row's padding: out to the screen's edge */
    margin-inline-end: calc(-1 * (var(--vv-gap-50) + var(--vv-gap-10)));
    background-image: linear-gradient(to right, var(--vv-tone-bg), transparent);
  }
  :is(.vv-r-card-grid__places, .vv-r-card-grid__options--experiences)::after {
    inset-inline-end: calc(var(--vv-gutter) * -1);
    margin-inline-start: calc(-1 * (var(--vv-gap-50) + var(--vv-gap-10)));
    background-image: linear-gradient(to left, var(--vv-tone-bg), transparent);
  }
  [data-vv-more-start]:is(.vv-r-card-grid__places, .vv-r-card-grid__options--experiences)::before,
  [data-vv-more-end]:is(.vv-r-card-grid__places, .vv-r-card-grid__options--experiences)::after { opacity: 1; }
}

/* ==========================================================================
   Packages layout — a property's Packages as experience cards on the shared
   rail: a horizontal carousel, three across the column (two on a tablet, one on a phone), 40 apart, the photograph 400 tall. The
   head sits 50 over it (the heading block to content); its "View all
   packages" link closes the head, 25 under the heading or note.
   ========================================================================== */
.vv-r-card-grid--packages { padding-inline: var(--vv-gutter); }   /* the gutter, 50 / 25 (§4) */
.vv-r-card-grid--packages .vv-band__inner { display: flex; flex-direction: column; gap: var(--vv-section-head-gap); max-width: var(--vv-container); }   /* the head block to the rail: 50 */
.vv-r-card-grid--packages .vv-r-card-grid__heading { color: var(--vv-color-text-emphasised); }
.vv-r-card-grid--packages .vv-r-card-grid__head { width: 100%; }   /* the head starts at the first card's left edge, not the centred 800 measure */
.vv-r-card-grid--packages .vv-r-card-grid__head > * { max-width: var(--vv-measure-800); }   /* its text still keeps to the 800 column (§4) */
.vv-r-card-grid__prail .vv-rail__track { align-items: stretch; gap: var(--vv-grid-gap); }
/* The column the band's content sits in: the container, or the screen less the gutters. */
.vv-r-card-grid--packages { --vv-pcol: min(var(--vv-container), calc(100vw - 2 * var(--vv-gutter))); }
.vv-r-card-grid__prail .vv-r-card-grid__ecard { flex: none; width: calc((var(--vv-pcol) - 2 * var(--vv-grid-gap)) / 3); }   /* three whole cards across the column, the rest scroll in */
/* Each card its own white card; the photograph fills its width and top, the
   text 30 inside (user, 2026-10-14; was 30 round the photograph too). */
.vv-r-card-grid__prail .vv-r-card-grid__ecard { box-sizing: border-box; padding: 0 var(--vv-gap-30) var(--vv-gap-30); background-color: var(--vv-tone-bg); }
.vv-r-card-grid__prail .vv-r-card-grid__amedia { height: var(--vv-card-media-h-package); margin-inline: calc(var(--vv-gap-30) * -1); }   /* 320, its own tier (user, 2026-10-14) */
/* The arrows sit outside the cards, centred in the band's side margin
   (user, 2026-10-13); on a phone the 25 gutter is narrower than the 30
   disc, so they meet the screen's edge and overlap the card by 5. */
.vv-r-card-grid__prail { --vv-pside: var(--vv-gutter); }
.vv-r-card-grid__prail .vv-rail__controls {
  inset-inline: calc(var(--vv-pside) * -1);
  padding-inline: max(0px, calc((var(--vv-pside) - 30px) / 2));
}
/* Two cards or fewer: no overflow, so they start where the heading does. */
@media (min-width: 1201px) {
  .vv-r-card-grid--pfits .vv-r-card-grid__prail { align-self: flex-start; width: auto; margin-inline-start: calc((var(--vv-pcol) - var(--vv-r-card-grid-measure)) / 2); }   /* the band centres its children: pin the rail to the left, then offset it */
}
@media (max-width: 1200.98px) {
  .vv-r-card-grid--packages { --vv-pcol: calc(100vw - 2 * var(--vv-gutter)); }
  .vv-r-card-grid__prail .vv-r-card-grid__ecard { width: calc((var(--vv-pcol) - var(--vv-grid-gap)) / 2); }
}

/* On a phone (user, 2026-11-11): the rail runs to the screen's edges, so a
   card is never cut at the gutter, and the next card peeks in at the
   right (the card the screen less the gutter and 50; 15 apart), so the
   rail reads as one to swipe. The first card starts on the
   gutter and each settles there. The photograph takes the small tier (268),
   so card and dots fit one screen; the text 20 inside. The peeking card
   says there is more, so the arrows go (user, 2026-11-11); the dots, a
   swipe and the keyboard remain. */
@media (max-width: 809.98px) {
  .vv-r-card-grid__prail { --vv-pside: 0px; align-self: stretch; width: auto; margin-inline: calc(var(--vv-gutter) * -1); }
  .vv-r-card-grid__prail .vv-rail__track { gap: var(--vv-gap-15); padding-inline: var(--vv-gutter); scroll-padding-inline: var(--vv-gutter); }   /* 15 apart, so 35 of the next card shows */
  .vv-r-card-grid__prail .vv-r-card-grid__ecard { width: calc(100vw - var(--vv-gutter) - var(--vv-gap-50)); padding: 0 var(--vv-gap-20) var(--vv-gap-30); }
  .vv-r-card-grid__prail .vv-r-card-grid__amedia { height: var(--vv-card-media-h-sm); margin-inline: calc(var(--vv-gap-20) * -1); }
  .vv-r-card-grid__prail .vv-rail__arrow { display: none; }   /* the next card peeks in: no arrows on a phone (user, 2026-11-11) */
}

/* Text colours that differ from their role's default (type v5: a component
   sets a colour only where it differs). */
.vv-r-card-grid__eyebrow,
.vv-r-card-grid__aname,
.vv-r-card-grid__acategory,
.vv-r-card-grid__press h3 { color: var(--vv-color-text-highlight); }
/* Every card, one interaction (user, 2026-10-23): its label (category,
   duration, publication, award) gold, its title the heading colour, turning
   rust on hover. The title's link covers the card, so the whole card turns it. */
.vv-r-card-grid__jlink {
  transition: color var(--vv-motion-hover-duration) var(--vv-motion-hover-easing);
}
.vv-r-card-grid__jlink:is(:hover, :focus-visible) { color: var(--vv-color-text-cta); }
.vv-r-card-grid__plink { color: var(--vv-color-text-link-inline); text-decoration: underline; }
.vv-r-card-grid__show-text { color: var(--vv-color-text-on-image); }

/* ==========================================================================
   Phone photographs (design-principles §6, user 2026-11-11): every card's
   photograph is 4:3 of its column, never taller than 300, so a landscape
   photograph never stands as a tall strip. Last in the file so it wins over
   each layout's own height; the Overviews' edge-to-edge rooms keep their
   own 4:3 (vv-overview-editorial.css), the showcase and certificates theirs.
   ========================================================================== */
@media (max-width: 809.98px) {
  .vv-band--r-card-grid :is(.vv-r-card-grid__media, .vv-r-card-grid__dmedia, .vv-r-card-grid__omedia, .vv-r-card-grid__amedia) {
    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) */
    width: -webkit-fill-available;
    width: stretch;  /* the full column (bleeds included): with an automatic width, the 300 cap would narrow the box to 400 through the ratio and leave a gap at the right on a phone wider than 400 */
  }
}