/* ==========================================================================
   Narrative — the destination header, and any centred text band.

   Re-measured off the live Overviews at 1440, 810 and 390, 2026-09-24, with
   Kodungallur's version as the standard where the two differ (user; see
   Centred: an 840px column (the full column below
   desktop) holding the heading and its paragraphs 40 apart, paragraphs 10
   apart; then the button, then the contacts, 40 apart; the ratings 50
   below. Layout only — colour from role tokens, type from role classes.
   ========================================================================== */

.vv-band--r-narrative {
  /* One alignment per band: the heading sets it and everything under
     it (paragraphs, button, contacts, stats, ratings) follows. */
  --vv-r-narrative-justify: flex-start;
  text-align: left;
}

.vv-band--r-narrative .vv-band__inner {
  display: flex;
  flex-direction: column;
  align-items: var(--vv-r-narrative-justify);
  gap: var(--vv-head-content-gap);
}

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

.vv-r-narrative__text {
  --vv-r-narrative-text-gap: var(--vv-gap-40);
  display: flex;
  flex-direction: column;
  gap: var(--vv-r-narrative-text-gap);
  width: 100%;
  max-width: var(--vv-r-narrative-measure);
}

.vv-r-narrative__paras {
  display: flex;
  flex-direction: column;
  gap: var(--vv-gap-10);
  /* the heading to its text is the section heading gap, whatever the text's own gap */
  margin-block-start: calc(var(--vv-head-text-gap) - var(--vv-r-narrative-text-gap));
}

/* Under a stacked hero the title block above already ends 40 short of
   it, so the band takes no top padding of its own. */
.vv-r-hero--stacked + .vv-band--r-narrative { padding-block-start: var(--vv-header-next-pad-top); }

/* One alignment per band, from the editor's Header layout: centred by
   default, left when the field says stacked-left. Everything under the
   heading follows. */
.vv-band--r-narrative.vv-r-narrative--centre {
  --vv-r-narrative-justify: center;
  text-align: center;
}

/* The live destination headers set the heading gold. The preset's own colour
   is the dark neutral, so this is an instance choice, switchable by field. */
.vv-r-narrative__heading--highlight { color: var(--vv-color-text-emphasised); }   /* section headings are never gold (user, 2026-10-10); the option stays so saved pages load */
.vv-r-narrative__heading--default { color: var(--vv-color-text-emphasised); }

/* ---------- Action and contacts ---------- */

.vv-r-narrative__action { margin-block-start: calc(var(--vv-head-action-gap) - var(--vv-head-content-gap)); display: flex; flex-wrap: wrap; justify-content: var(--vv-r-narrative-justify); gap: var(--vv-gap-20); }   /* flex: no line-box strut; gap for the enquiry pair */

/* The contact row 25 under the title and description (user, 2026-10-07). */
.vv-r-narrative__text + .vv-r-narrative__comms { margin-block-start: calc(var(--vv-gap-25) - var(--vv-head-content-gap)); }

/* Phone and WhatsApp as a pair, then email, 25 apart: one row on desktop,
   the pair over the email on a tablet, one per line on a phone. */
.vv-r-narrative__comms,
.vv-r-narrative__pair {
  display: flex;
  justify-content: var(--vv-r-narrative-justify);
  align-items: center;
  gap: var(--vv-gap-25);
}

.vv-r-narrative__comm {
  display: inline-flex;
  align-items: center;
  gap: var(--vv-gap-10);                /* icon to label */
  text-decoration: none;
}

.vv-r-narrative__comm-icon {
  flex: none;
  width: 20px;                          /* measured */
  height: 20px;
}

/* ---------- Ratings ----------
   The block itself is a primitive (vv-primitives.css); the band only places
   it, 50 under the contacts. */

.vv-r-narrative__ratings { margin-block-start: var(--vv-gap-10); align-self: var(--vv-r-narrative-justify); }

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

:root { --vv-r-narrative-measure: var(--vv-measure-800); }

@media (max-width: 1200.98px) {
  :root { --vv-r-narrative-measure: 100%; }
  .vv-r-narrative__comms { flex-direction: column; align-items: var(--vv-r-narrative-justify); }   /* stacked: on the heading's edge */
}

@media (max-width: 809.98px) {
  .vv-r-narrative__pair { flex-direction: column; align-items: var(--vv-r-narrative-justify); }
}

/* ---------- Intro (the homepage) ----------
   Measured 2026-09-24: a gold label 20 over large paragraphs 20 apart in an
   800 column, the navy button 28 below, the whole centred in a band 720 tall
   (810 on a phone). */
.vv-r-narrative--intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  min-height: 720px;
}
/* The band centres its content vertically; the inner column keeps its full
   width rather than shrinking to its content inside the flex band. */
.vv-r-narrative--intro .vv-band__inner { gap: var(--vv-gap-50); width: 100%; }   /* text to button: 50 (user, 2026-10-17) */
/* The 50 is already the button's gap: drop the header's correction, which
   assumes a 50 gap and would pull the button 20 up into it. */
.vv-r-narrative--intro .vv-r-narrative__action { margin-block-start: 0; }
.vv-r-narrative--intro .vv-r-narrative__text {
  --vv-r-narrative-text-gap: var(--vv-gap-30);   /* the <h1> label to its paragraph: 30 (user, 2026-10-17) */
  max-width: var(--vv-measure-800);
}
.vv-r-narrative--intro .vv-r-narrative__paras { gap: var(--vv-gap-20); margin-block-start: 0; }   /* the label's 20 stays: no heading here */

/* Live the column is the band less 100 a side on a tablet (610) and 30 a
   side on a phone (330). Kept as the text's measure, so the lines break
   where live's do, inside the normalised gutter (#5). */
@media (max-width: 1200.98px) and (min-width: 810px) {
  .vv-r-narrative--intro .vv-r-narrative__text { max-width: var(--vv-measure-660); }
}
/* On a phone the text fills the band's gutter at any width: no fixed 330
   column, no fixed band height (user, 2026-11-11). */
@media (max-width: 809.98px) {
  .vv-r-narrative--intro { min-height: 0; }
  .vv-r-narrative--intro .vv-r-narrative__text { max-width: 100%; }
}
/* Stacked over the band under it (Home, over the gallery strip; user,
   2026-10-17): the text alone, at its own height. More room above it than
   the section gap, the section gap plus 50, so the welcome reads as the
   page's opening statement (user, 2026-10-17; design-principles.md §4). */
.vv-band--r-narrative.vv-r-narrative--intro.vv-band--space-stack { min-height: 0; padding-block-start: calc(var(--vv-section-y) + var(--vv-gap-50)); }

/* ==========================================================================
   Title layout — the band under an Accommodations hub's hero. Measured off
   both hubs 2026-09-25, Kodungallur's as the standard (#31): the label 20
   over the <h1>, centred in a 660 column. The page-title band of the shell:
   80 above and below on every page.
   ========================================================================== */

.vv-band--r-narrative.vv-r-narrative--title { padding-block: var(--vv-section-y-compact); }

/* First on the page (Journal, Awards: no hero above): the header and its
   sub-nav are fixed, so the band clears them by --vv-shell-top, then takes
   its own 80. Its ground is the page's white. */
.vv-page > .vv-r-narrative--title:first-child { padding-block-start: calc(var(--vv-shell-top) + var(--vv-section-y-compact)); }

.vv-r-narrative--title .vv-r-narrative__text {
  --vv-r-narrative-text-gap: var(--vv-gap-20);
  max-width: var(--vv-measure-660);
}
/* The baseline pages' optional intro sits in the same 20 rhythm; the light
   button 30 under it, as the split's action sits under its text. */
.vv-r-narrative--title .vv-r-narrative__action { display: flex; margin-block-start: var(--vv-gap-10); }

/* ==========================================================================
   Room layout — a room page's title band. Measured off Heritage Rooms and
   the Private Pool Villa at 1440 / 810 / 390, 2026-09-25, Kodungallur's as
   the standard (#33): 80 above and below; a 740 column; the <h1> 25 over
   its description (the paragraphs, or a subtitle over them), paragraphs 10 apart; Book this
   room 50 below, the contacts 40 below that, the stats 50 below them.
   ========================================================================== */

.vv-band--r-narrative.vv-r-narrative--room { padding-block: var(--vv-section-y-compact); }
.vv-r-narrative--room .vv-band__inner { gap: 0; }

.vv-r-narrative--room .vv-r-narrative__text {
  --vv-r-narrative-text-gap: var(--vv-gap-15);
  max-width: var(--vv-measure-800);
}
.vv-r-narrative__subtitle { margin-block: calc(var(--vv-head-text-gap) - var(--vv-r-narrative-text-gap)) var(--vv-gap-5); }   /* the heading's description: 25 under the <h1> */
.vv-r-narrative--room .vv-r-narrative__action { margin-top: var(--vv-gap-50); }
.vv-r-narrative--room .vv-r-narrative__comms { margin-top: var(--vv-gap-40); }

/* The stats (.vv-stats, vv-primitives.css): 50 under what is above them,
   aligned as the text. */
.vv-r-narrative--room .vv-stats { margin-top: var(--vv-gap-50); --vv-stats-align: var(--vv-r-narrative-justify); }
.vv-r-narrative__text > .vv-stats { margin-top: var(--vv-gap-5); }   /* `stats: top` (an offer's duration): under the title, over the paragraphs */

/* ==========================================================================
   Statement layout — the Private Pool Villa's gold line (measured
   2026-09-25): centred in an 800 column. A standalone paragraph band is
   always centred, whatever the Header layout field says (user, 2026-10-11).
   ========================================================================== */

.vv-band--r-narrative.vv-r-narrative--statement {
  --vv-r-narrative-justify: center;
  text-align: center;
}
.vv-r-narrative__statement {
  max-width: var(--vv-measure-800);
}
/* Lake View Rooms (measured 2026-09-28): a plain grey paragraph under the
   gold line, 20px under it, centred in the same column. */
.vv-r-narrative__statement-body {
  max-width: var(--vv-measure-800);
  margin-top: var(--vv-gap-20);
}
.vv-r-narrative__statement-body + .vv-r-narrative__statement-body { margin-top: var(--vv-gap-10); }

/* ==========================================================================
   Section layout — a Culinary property section's head (measured
   2026-09-25, #34): the name, a gold label 25 under it, a grey lead 25 under
   that, centred in an 800 column.
   ========================================================================== */

.vv-r-narrative--section .vv-r-narrative__text {
  --vv-r-narrative-text-gap: var(--vv-head-text-gap);   /* heading, label and lead 10 apart (user, 2026-10-07) */
  max-width: var(--vv-measure-800);
}

/* A narrative joined to the form band below it (global Contact) sits in the
   form's own 800 column, so the two share a left edge. */
.vv-band--r-narrative:has(+ .vv-r-form--joined) .vv-band__inner { max-width: var(--vv-measure-800); margin-inline: auto; }

/* Home's <h1> breaks evenly, never leaving "Nadu" alone on a line (user, 2026-10-10). */
h1.vv-r-narrative__eyebrow { text-wrap: balance; }

/* Text colours that differ from their role's default (type v5). */
.vv-r-narrative__label,
.vv-r-narrative__eyebrow--highlight,
.vv-r-narrative__statement { color: var(--vv-color-text-highlight); }