/* ==========================================================================
   Hero — the opening band on every page.

   Geometry measured off the live site at 1440 / 810 / 390, 2026-09-23.
   Layout and box metrics only: colour comes from role tokens, type from role
   classes (docs/design-system/).
   ========================================================================== */

.vv-band--r-hero {
  /* Full bleed: the band owns its own insets, so the shared gutter is off.
     The clearance above the photograph is the band's PADDING, not a margin on
     the media — a margin collapses out of the band and the band then measures
     only as tall as the photograph, which also shortens the scrim. */
  padding: var(--vv-shell-top) 0 0;
  /* The page ground, as Kodungallur's (Alleppey's is the dark hero ground).
     It shows only above the photograph. */
  background-color: transparent;
  overflow: clip;                       /* matches the live band */
  isolation: isolate;                   /* keeps the scrim off later bands */
}

/* ---------- Media ---------- */

.vv-r-hero__media {
  /* One height on every page: 70vh on desktop, 65vh below (--vv-hero-h,
     vv-tokens.css). */
  height: var(--vv-hero-h);
}

.vv-r-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* A flat 20% black wash over the whole band, the live site's own value. It
   sits above the photograph and below the text. */
.vv-r-hero__scrim {
  position: absolute;
  inset: 0;
  background-color: var(--vv-color-image-wash);
  pointer-events: none;
}

/* ---------- Text ---------- */

.vv-r-hero__text {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Centred. The box is inset 100px each side and the glyphs sit centred
     within it — a box-geometry check passes either way, which is how this
     shipped left-aligned the first time. */
  text-align: center;
  gap: var(--vv-gap-20);
  /* Measured: 100px from the side, 50px from the band foot — not a uniform
     inset. The 20px gap between the label and the title is --vv-gap-20. */
  padding: 0 var(--vv-r-hero-inset) var(--vv-r-hero-inset-bottom);
}

.vv-r-hero__title { color: var(--vv-color-text-on-image); }
.vv-r-hero__intro {
  color: var(--vv-color-text-on-image);
  max-width: var(--vv-measure-800);
}

.vv-r-hero__action { margin-top: var(--vv-gap-20); }
.vv-r-hero__action { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--vv-gap-20); }   /* the enquiry pair */

/* ---------- Variants ---------- */

/* The full variant (Culinary), measured 2026-09-25: the photograph at 70%
   over the dark hero ground, no wash; the label 20 over the <h1>, in a 660
   column 40 from the foot; the shell's hero height. */
.vv-r-hero--full { background-color: var(--vv-color-background-hero); }
.vv-r-hero--full .vv-r-hero__media { opacity: 0.7; }
.vv-r-hero--full .vv-r-hero__text {
  justify-content: flex-end;
  inset: 0;
  padding: 0 var(--vv-gutter) var(--vv-gap-40);
}
.vv-r-hero--full .vv-r-hero__text > * { max-width: var(--vv-measure-660); }

/* The stacked variant (pilot): the photograph at 80vh with no
   wash, and the title block below it in the page's own flow, in text colours
   for the page ground. */
.vv-r-hero--stacked { --vv-hero-h: var(--vv-header-media-h); }
.vv-r-hero--stacked .vv-r-hero__text {
  position: static;
  gap: var(--vv-header-text-gap);
  padding: var(--vv-header-pad-y) var(--vv-header-inset);
  max-width: 100%;
}
/* The flex gap is the 10 between title and line; every other step adds to it
   (Figma 980:397, user 2026-10-11): label 20 over the title, button 30 under
   the line, the contact row 30 under the button, the ratings 50 under that. */
.vv-r-hero--stacked .vv-r-hero__label { margin-bottom: calc(var(--vv-header-gap) - var(--vv-header-text-gap)); }
.vv-r-hero--stacked .vv-r-hero__intro + .vv-r-hero__intro:not(.vv-more__teaser) { margin-top: calc(var(--vv-header-gap) - var(--vv-header-text-gap)); }
.vv-r-hero--stacked .vv-r-hero__action { margin-top: calc(var(--vv-header-action-gap) - var(--vv-header-text-gap)); }
/* Contacts and ratings are part of the hero: no band, no padding of their own. */
.vv-r-hero--stacked .vv-r-hero__comms,
.vv-r-hero--stacked .vv-r-hero__stats { margin-top: calc(var(--vv-header-group-gap) - var(--vv-header-text-gap)); }
.vv-r-hero--stacked .vv-r-hero__ratings { margin-top: calc(var(--vv-header-ratings-gap) - var(--vv-header-text-gap)); }
/* A room's or an experience's subtitle and stats (vv_stats()): the
   subtitle and a duration (`stats: top`) take the flex gap like the rest of
   the block. */
.vv-r-hero__comms,
.vv-r-hero__pair {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--vv-gap-25);
}
/* The contact block takes the text column's full width, so the email gets the
   whole line before it breaks after its @ (it shrank to WhatsApp's width). */
.vv-r-hero__comms { align-self: stretch; }
/* Phone and WhatsApp share a line wherever it is wide enough, and wrap
   centred, 25 apart, where it is not (user, 2026-11-11). */
.vv-r-hero__pair { flex-wrap: wrap; }
.vv-r-hero__comm { display: inline-flex; align-items: center; gap: var(--vv-gap-10); text-decoration: none; }
.vv-r-hero__comm-icon { flex: none; width: 20px; height: 20px; }
/* Tablet and phone: the pair over the email, 25 apart (design-principles §3). */
@media (max-width: 1200.98px) { .vv-r-hero__comms { flex-direction: column; } }
.vv-r-hero--plain .vv-r-hero__text { padding-bottom: var(--vv-gap-100); }   /* a title section with no photograph */
/* That 100 is the whole gap to the content: the next band (on the same
   ground) adds none, so the title sits as far from the content as from the
   bars above it (user, 2026-10-18; it was 200). */
.vv-r-hero--plain + .vv-band { padding-block-start: 0; }
.vv-r-hero--stacked .vv-r-hero__text:empty { display: none; }   /* the hubs' photograph-only hero */
.vv-r-hero--stacked .vv-r-hero__title { color: var(--vv-color-text-emphasised); }
.vv-r-hero--stacked .vv-r-hero__intro { color: var(--vv-color-text-default); }
/* A room's subtitle in the hero takes the description's colour, not the
   room-subtitle role's subtle grey (user, 2026-10-07). */
.vv-r-hero--stacked .vv-r-hero__subtitle { color: var(--vv-color-text-default); }
/* A room's stats in the hero stay one row of three on the phone, where the
   primitive stacks them, so the hero stays short (user, 2026-10-07). */
@media (max-width: 809.98px) {
  .vv-r-hero--stacked .vv-stats {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    max-width: var(--vv-measure-480);
  }
  .vv-r-hero--stacked .vv-stats__stat { flex: 1 1 0; text-align: center; }
}

/* ---------- Breakpoints ----------
   Viewport queries at Framer's own cuts, not container queries: the live
   layout switches on viewport width (docs/components.md §4). */

:root {
  /* Re-measured 2026-09-24 on both Overviews, Kodungallur's as the standard
     (#23): the text 100 from the sides and the foot on desktop. */
  --vv-r-hero-inset: var(--vv-gap-100);
  --vv-r-hero-inset-bottom: var(--vv-gap-100);
}

/* Clearance and height come from the shell tokens at every width; only the
   text insets step here. */
@media (max-width: 1200.98px) and (min-width: 810px) {
  :root { --vv-r-hero-inset: var(--vv-gap-100); --vv-r-hero-inset-bottom: var(--vv-gap-50); }
}

@media (max-width: 809.98px) {
  /* The phone gutter, as every band (user, 2026-11-11; was a measured 30). */
  :root { --vv-r-hero-inset: var(--vv-gutter); --vv-r-hero-inset-bottom: var(--vv-gap-50); }
}

/* ==========================================================================
   Slideshow — the homepage (layout "slides"). Measured off the live
   homepage 2026-09-24 at 1440 / 810 / 390.
   ========================================================================== */

.vv-r-hero--slides {
  --vv-slides-h: var(--vv-hero-h);            /* the viewport, vv-primitives.css */
  padding-top: var(--vv-shell-top);
  background-color: var(--vv-color-background-highlight);
}
/* The track, slides and controls are the shared slideshow (.vv-slides in
   vv-primitives.css, js/vv-slides.js). */

.vv-r-hero--slides .vv-r-hero__media {
  position: absolute;
  inset: 0;
  height: auto;
  opacity: 0.7;                               /* live: the photograph at 70% over black */
}
.vv-r-hero__shade {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(transparent, var(--vv-color-image-shade));
  pointer-events: none;
}

/* The text: 85% wide, centred, 25 apart, its block centred in the slide. */
.vv-r-hero__copy {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vv-r-hero__copy-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--vv-gap-25);
  width: 85%;
  padding-block: var(--vv-gap-100);
  text-align: center;
}
.vv-r-hero__copy-inner > * { width: 100%; }
.vv-r-hero__slide-action { width: auto; }
.vv-r-hero__slide-action .vv-button--secondary { --vv-button-bg: var(--vv-cta-secondary-bg-on-image); }   /* over the photograph: white fill */

/* On a phone the arrows stay at mid-height but move out to 10 from the
   edge, and the text narrows to run between them, 10 clear of each (user,
   2026-10-16). */
@media (max-width: 809.98px) {
  .vv-r-hero--slides .vv-slides { --vv-slides-arrow-inset: var(--vv-gap-10); }
  .vv-r-hero--slides .vv-r-hero__copy-inner {
    width: calc(100% - 2 * (var(--vv-gap-10) + var(--vv-slides-arrow) + var(--vv-gap-10)));
  }
}

/* ==========================================================================
   Gallery — the room pages (layout "gallery"): photographs alone at the
   shell's hero height, under the shell clearance; the shared slideshow's
   gallery controls.
   ========================================================================== */

.vv-r-hero--gallery {
  --vv-slides-h: var(--vv-hero-h);
  padding: var(--vv-shell-top) 0 0;
}

/* Text colours that differ from their role's default (type v5). Over a
   photograph the label, slide titles and lines are white; on the stacked
   hero's page ground the label is the body colour. */
.vv-r-hero__label,
.vv-r-hero__slide-title,
.vv-r-hero__line > p { color: var(--vv-color-text-on-image); }
.vv-r-hero--stacked .vv-r-hero__label { color: var(--vv-color-text-default); }