/* =============================================================
   RAYC inner-page (SEO silo) components.

   Tokens and shared furniture (.rayc-eyebrow, .rayc-title, .rayc-navbtn)
   come from tokens.css / sections.css — this file only adds patterns
   specific to standalone content pages (breadcrumb hero, direct-answer
   panel, numbered steps, cross-link cards) that the homepage has no use
   for. First page built on this file: template-parts/page-raja-ampat-yacht.php
   (Silo 1 pillar). Every class here is meant to be reused by the rest of
   that silo, not page-specific.
   ============================================================= */

/* -------------------------------------------------------------
   Page hero — breadcrumb + eyebrow pill + H1

   Deliberately NOT a copy of the homepage hero (that one stays untouched,
   full-bleed photography, per the "hero is the reference, never edited"
   rule). This is the calmer, repeatable version every inner page opens
   with: --rayc-panel band (same "frame" tone as the footer — signals
   "you've left the homepage"), optional background image at low opacity
   instead of a dominant photo, breadcrumb trail, then title.
   ------------------------------------------------------------- */
.rayc-page-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(6rem, 14vw, 9rem) var(--rayc-gutter) clamp(3rem, 6vw, 4.5rem);
  background: var(--rayc-panel);
  border-bottom: 1px solid var(--rayc-line);
}
.rayc-page-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Full opacity — the homepage's own hero (.rayc-hero__img) never dims
     the photo either; legibility is the veil's job below, not this. The
     0.22 this originally shipped with, stacked on top of an already-heavy
     veil, made the photo nearly invisible. */
}
.rayc-page-hero__veil {
  position: absolute;
  inset: 0;
  /* Concentrated where the text actually sits (left, and the top/bottom
     edges blending into --rayc-panel) rather than a uniform wash over the
     whole photo — same left-to-right logic as the homepage hero's own
     veil, just simplified to two gradients instead of a radial + linear
     stack, since this hero has no centred content to protect. */
  background:
    linear-gradient(90deg,
      var(--rayc-panel) 0%,
      rgba(15, 24, 33, 0.82) 25%,
      rgba(15, 24, 33, 0.4) 50%,
      rgba(15, 24, 33, 0.1) 70%,
      transparent 100%),
    linear-gradient(180deg,
      var(--rayc-panel) 0%,
      transparent 18%,
      transparent 82%,
      var(--rayc-panel) 100%);
}
.rayc-page-hero__inner {
  position: relative;
  max-width: 52rem;
}

.rayc-page-hero__crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 clamp(1.4rem, 2.4vw, 1.9rem);
  font-family: 'Jost', sans-serif;
  font-size: 0.8rem;
  color: var(--rayc-text-dim);
}
.rayc-page-hero__crumbs a {
  color: var(--rayc-text-dim);
  text-decoration: none;
  transition: color var(--rayc-ease);
}
.rayc-page-hero__crumbs a:hover { color: var(--rayc-gold-lt); }
.rayc-page-hero__crumbs i { font-size: 0.7rem; color: var(--rayc-line); }
.rayc-page-hero__crumbs span[aria-current] { color: var(--rayc-text); }

.rayc-page-hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--rayc-line);
  border-radius: var(--rayc-pill);
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rayc-gold);
}
.rayc-page-hero__pill i { font-size: 0.85rem; }

.rayc-page-hero__title {
  margin: clamp(1rem, 1.8vw, 1.4rem) 0 0;
  font-family: 'Domine', Georgia, serif;
  font-weight: 500;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: 0.01em;
  color: var(--rayc-ivory);
}

/* -------------------------------------------------------------
   Direct-answer panel

   A single-paragraph, front-loaded answer to "what is this page about" —
   written for both the human skimming and an AI/search snippet parsing
   the first substantial block of text. Paired with an image in a 5fr/7fr
   split (the same ratio About/Coverage/Process/Form use on the homepage):
   a bare panel with a hard max-width and nothing beside it left a large
   dead gap on wide viewports, the same bug the FAQ section hit and was
   fixed for earlier — pairing it with media is the fix here rather than
   just widening the panel, and it's also why every page in this silo
   needs its own image, not just the hero and the closing CTA.
   ------------------------------------------------------------- */
.rayc-answer {
  padding: var(--rayc-section) var(--rayc-gutter) 0;
  background: var(--rayc-surface);
}
.rayc-answer__layout {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
}
@media (min-width: 768px) {
  .rayc-answer__layout { grid-template-columns: 5fr 7fr; align-items: stretch; }
}
.rayc-answer__media {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--rayc-radius-lg);
  border: 1px solid var(--rayc-line);
  background: var(--rayc-raised);
  /* 16/10, not the taller 4/5 this shipped with — the photo here is a
     wide seascape (boat + harbour), and on a narrow mobile viewport a
     4/5 portrait crop stretched the section to nearly a full screen of
     just the image before any text appeared. Matches .rayc-why__media's
     own landscape ratio for the same kind of photo. */
  aspect-ratio: 16 / 10;
}
/* Above 768px the figure is a grid item with the default min-height:auto,
   so a PORTRAIT source sets its own box from the image's intrinsic ratio
   and drives the whole row — an 882x1176 photo in this 529px column came
   out 704px tall against 529px of text, leaving 176px of dead space under
   the panel. Every answer photo on this site is landscape for that reason.
   If a portrait one is ever wanted here, add min-height:0 alongside it. */
@media (min-width: 768px) { .rayc-answer__media { aspect-ratio: auto; height: 100%; min-height: 22rem; } }
.rayc-answer__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rayc-answer__panel {
  padding: clamp(1.75rem, 3vw, 2.75rem);
  border: 1px solid var(--rayc-line);
  border-radius: var(--rayc-radius-lg);
  background: var(--rayc-raised);
}
.rayc-answer__kicker {
  margin: 0;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rayc-gold);
}
.rayc-answer__title {
  margin: 0.7rem 0 0;
  font-family: 'Domine', Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  line-height: 1.3;
  color: var(--rayc-ivory);
}
.rayc-answer__body {
  margin: clamp(1rem, 1.8vw, 1.4rem) 0 0;
  font-family: 'Jost', sans-serif;
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  line-height: 1.8;
  color: var(--rayc-text);
}
.rayc-answer__body strong { color: var(--rayc-ivory); font-weight: 600; }
.rayc-answer__sub {
  margin: clamp(0.9rem, 1.5vw, 1.2rem) 0 0;
  padding-top: clamp(0.9rem, 1.5vw, 1.2rem);
  border-top: 1px solid var(--rayc-line-soft);
  font-family: 'Jost', sans-serif;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--rayc-text-dim);
}
/* Lead-in under a title (rate range page): sits right below the h2, so the
   hairline divider of the base .rayc-answer__sub reads as a caption gap. */
.rayc-answer__sub--lead {
  margin-top: 0.5rem;
  padding-top: 0;
  border-top: 0;
}

/* -------------------------------------------------------------
   .rayc-answer--locator — the Silo 5 (Destinations & Geography)
   treatment of the answer block.

   The base 5fr/7fr photo-left layout is used by 47 templates across the
   other silos and stays untouched; this modifier only reaches the two
   pages that opt in. Three things change.

   The photo moves to the right and the text leads, so the silo reads
   differently at a glance from the one before it.

   The photo also stops stretching to fill the row. The base pins it to
   height:100% against the panel, which on a short paragraph produced a
   very tall crop beside a half-empty card — and these are aerials, so a
   tall crop is mostly open water with the islands cropped out. A fixed
   4/3 lets the image keep its subject and lets the row size to the text.

   Then a gazetteer strip runs the full width beneath both — where it
   is, how far, when. Same hairline-divided language as
   .rayc-hairline-grid, because it is doing the same job: a legend under
   a plate. It answers "where am I looking at" before the reader has
   scrolled as far as the journey chain.
   ------------------------------------------------------------- */
@media (min-width: 768px) {
  .rayc-answer--locator .rayc-answer__layout {
    grid-template-columns: 7fr 5fr;
    align-items: start;
  }
  /* Source order keeps the photo first so it still leads on mobile,
     where every other page in the theme opens its answer with the image. */
  .rayc-answer--locator .rayc-answer__media { order: 2; }
  .rayc-answer--locator .rayc-answer__panel { order: 1; }
  .rayc-answer--locator .rayc-answer__media {
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
}

.rayc-answer__facts {
  /* No margin: the strip is a grid item of __layout, so the layout's own
     gap already separates it. A margin here stacked on top of that and
     left ~88px of dead air under the panel at 1440. */
  margin: 0;
  padding: 0;
  display: grid;
  border: 1px solid var(--rayc-line);
  border-radius: var(--rayc-radius-lg);
  background: var(--rayc-raised);
  overflow: hidden;
}
@media (min-width: 768px) {
  .rayc-answer--locator .rayc-answer__facts {
    grid-column: 1 / -1;
    order: 3;
    grid-template-columns: repeat(4, 1fr);
  }
}
.rayc-answer__fact {
  padding: clamp(1.1rem, 2vw, 1.5rem) clamp(1.1rem, 2vw, 1.6rem);
  border-top: 1px solid var(--rayc-line-soft);
}
.rayc-answer__fact:first-child { border-top: 0; }
@media (min-width: 768px) {
  .rayc-answer--locator .rayc-answer__fact {
    border-top: 0;
    border-left: 1px solid var(--rayc-line-soft);
  }
  .rayc-answer--locator .rayc-answer__fact:first-child { border-left: 0; }
}
.rayc-answer__fact-label {
  margin: 0;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rayc-gold);
}
.rayc-answer__fact-value {
  /* dd carries a UA margin-inline-start of 40px — reset, not overridden. */
  margin: 0.5rem 0 0;
  font-family: 'Jost', sans-serif;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--rayc-text);
}
.rayc-answer__fact-value b {
  font-weight: 600;
  color: var(--rayc-ivory);
}

/* -------------------------------------------------------------
   Section furniture shared by every block below — centred head, unlike
   the homepage's left-aligned convention. Inner pages read as a stacked
   Q&A/reference document rather than a single narrative scroll, so a
   centred head per block (echoing the FAQ/Sisters treatment) suits the
   format better than forcing the homepage's asymmetric layouts onto
   content that has no natural media pairing.
   ------------------------------------------------------------- */
.rayc-page-block {
  padding: var(--rayc-section) var(--rayc-gutter);
  background: var(--rayc-surface);
}
.rayc-page-block__head {
  max-width: 42rem;
  margin: 0 auto;
  text-align: center;
}
.rayc-page-block__head .rayc-eyebrow,
.rayc-page-block__head .rayc-title { text-align: center; }
.rayc-page-block__intro {
  margin: clamp(0.9rem, 1.5vw, 1.2rem) 0 0;
  font-family: 'Jost', sans-serif;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--rayc-text-dim);
}
.rayc-page-block__body {
  margin-top: clamp(2.2rem, 4vw, 3.25rem);
}

/* -------------------------------------------------------------
   Reasons / Ground service — bare-icon card grid.
   Same family as .rayc-difference (icon, no tinted box), 2-up here
   rather than the homepage's 5-across since these carry longer copy.
   ------------------------------------------------------------- */
.rayc-cardgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 2.4vw, 1.75rem);
}
@media (min-width: 640px) {
  .rayc-cardgrid--2 { grid-template-columns: repeat(2, 1fr); }
  .rayc-cardgrid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .rayc-cardgrid--3 { grid-template-columns: repeat(3, 1fr); }
}

.rayc-card {
  padding: clamp(1.5rem, 2.6vw, 2rem);
  border: 1px solid var(--rayc-line);
  border-radius: var(--rayc-radius);
  background: var(--rayc-raised);
  transition: border-color var(--rayc-ease);
}
.rayc-card:hover { border-color: var(--rayc-gold); }
.rayc-card__icon {
  display: block;
  margin-bottom: clamp(0.9rem, 1.5vw, 1.2rem);
  font-size: 1.4rem;
  color: var(--rayc-gold);
}
.rayc-card__title {
  margin: 0;
  font-family: 'Domine', Georgia, serif;
  font-weight: 500;
  font-size: 1.1rem;
  line-height: 1.3;
  color: var(--rayc-ivory);
}
.rayc-card__desc {
  margin: 0.6rem 0 0;
  font-family: 'Jost', sans-serif;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--rayc-text-dim);
}
.rayc-card__value {
  margin: 0.55rem 0 0;
  font-family: 'Domine', Georgia, serif;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--rayc-ivory);
  overflow-wrap: anywhere;
}
.rayc-card__value a { color: var(--rayc-gold); text-decoration: none; }
.rayc-card__value a:hover { text-decoration: underline; }

/* Media variant — an explicit modifier (not :has()) applied in the
   template only when a card actually has an image (Regions, Tiers,
   Guides), so plain icon cards (Reasons, Ground Service) are untouched.
   Image sits flush at the top, full width, card padding moves to a
   .rayc-card__body wrapper below it. */
.rayc-card--media { padding: 0; overflow: hidden; }
.rayc-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--rayc-panel);
}
.rayc-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.rayc-card:hover .rayc-card__media img { transform: scale(1.05); }
.rayc-card__body { padding: clamp(1.5rem, 2.6vw, 2rem); }

/* -------------------------------------------------------------
   Regions — like .rayc-card but with a tag pill, a window label, and a
   dot-marker site list (same ::before dot as .rayc-coverage__tagrow).
   ------------------------------------------------------------- */
.rayc-region__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: clamp(1.1rem, 1.8vw, 1.5rem);
}
.rayc-region__icon {
  font-size: 1.4rem;
  color: var(--rayc-gold);
}
.rayc-region__tag {
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--rayc-line);
  border-radius: var(--rayc-pill);
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rayc-gold);
}
.rayc-region__name {
  margin: 0;
  font-family: 'Domine', Georgia, serif;
  font-weight: 500;
  font-size: 1.4rem;
  color: var(--rayc-ivory);
}
.rayc-region__window {
  margin: 0.3rem 0 0;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rayc-gold);
}
.rayc-region__detail {
  margin: clamp(0.9rem, 1.5vw, 1.2rem) 0 0;
  font-family: 'Jost', sans-serif;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--rayc-text-dim);
}
.rayc-region__sites-label {
  margin: clamp(1.2rem, 2vw, 1.5rem) 0 0.8rem;
  padding-top: clamp(1.1rem, 1.8vw, 1.4rem);
  border-top: 1px solid var(--rayc-line-soft);
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rayc-text-dim);
}
.rayc-region__sites {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.rayc-region__sites li {
  position: relative;
  padding-left: 1.1rem;
  font-family: 'Jost', sans-serif;
  font-size: 0.86rem;
  color: var(--rayc-text);
}
.rayc-region__sites li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rayc-gold);
}

/* -------------------------------------------------------------
   Vessel tiers — photo plate.

   Rebuilt to match the homepage's own Services cards (.rayc-service in
   sections.css) on request — a tall portrait photo with the copy living
   on the image itself behind a scrim, rather than a photo-then-padded-
   body split. Replicated as its own class family here instead of reusing
   .rayc-service__* directly: pages.css exists specifically so inner-page
   components don't couple to homepage-only CSS that might change for
   homepage-only reasons, even when the visual result is meant to match.
   The one addition Services never needed — a price line — sits under the
   title inside the same overlay.
   ------------------------------------------------------------- */
.rayc-tier-plate {
  /* display:block + no underline: this component started as an <article>
     (Tiers, not clickable) but is also reused as an <a> (Fleet examples,
     clickable through to the vessel's own page) — <a> defaults to inline,
     which breaks aspect-ratio/position:relative sizing silently. */
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border-radius: var(--rayc-radius);
  border: 1px solid var(--rayc-line);
  background: var(--rayc-raised);
  text-decoration: none;
  transition: border-color var(--rayc-ease);
}
.rayc-tier-plate:hover { border-color: var(--rayc-gold); }
.rayc-tier-plate__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}
.rayc-tier-plate:hover .rayc-tier-plate__img { transform: scale(1.05); }
/* Deep enough that the copy holds up over whatever photo is in place —
   same reasoning and same gradient stops as .rayc-service__media::after. */
.rayc-tier-plate::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
              rgba(15, 24, 33, 0.95) 0%,
              rgba(15, 24, 33, 0.82) 26%,
              rgba(15, 24, 33, 0.38) 52%,
              rgba(15, 24, 33, 0.04) 78%);
}
.rayc-tier-plate__icon {
  position: absolute;
  z-index: 2;
  top: clamp(1rem, 1.7vw, 1.5rem);
  left: clamp(1.1rem, 1.8vw, 1.6rem);
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  color: var(--rayc-gold);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}
.rayc-tier-plate__body {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(1.1rem, 1.8vw, 1.6rem);
}
.rayc-tier-plate__title {
  margin: 0;
  font-family: 'Domine', Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  line-height: 1.25;
  color: var(--rayc-ivory);
}
.rayc-tier-plate__rate {
  margin: 0.5rem 0 0;
  font-family: 'Domine', Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  color: var(--rayc-gold-lt);
}
.rayc-tier-plate__unit {
  margin: 0.15rem 0 0;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(233, 232, 230, 0.6);
}
.rayc-tier-plate__desc {
  margin: 0.6rem 0 0;
  font-family: 'Jost', sans-serif;
  font-size: clamp(0.8rem, 0.95vw, 0.88rem);
  line-height: 1.6;
  color: rgba(233, 232, 230, 0.78);
  /* Clamped, same reasoning as .rayc-service__desc: descriptions run to
     different lengths and the plates need to stay the same height. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rayc-page-block__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: clamp(1.75rem, 3vw, 2.25rem);
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--rayc-gold);
  text-decoration: none;
  transition: color var(--rayc-ease);
}
.rayc-page-block__link:hover { color: var(--rayc-gold-lt); }
.rayc-page-block__link i { font-size: 0.85rem; transition: transform var(--rayc-ease); }
.rayc-page-block__link:hover i { transform: translateX(3px); }
.rayc-page-block__link-wrap { text-align: center; }

/* -------------------------------------------------------------
   Steps — numbered list, same ghost-numeral idiom as .rayc-process but
   its own class family so any inner page can use it without depending
   on homepage-only CSS.
   ------------------------------------------------------------- */
.rayc-steps {
  max-width: 46rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.rayc-steps__item {
  display: flex;
  gap: clamp(1.1rem, 2vw, 1.6rem);
  padding: clamp(1.3rem, 2.2vw, 1.9rem) 0;
  border-top: 1px solid var(--rayc-line);
}
.rayc-steps__item:first-child { border-top: 0; padding-top: 0; }
.rayc-steps__num {
  flex-shrink: 0;
  font-family: 'Domine', Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  line-height: 1.5;
  color: var(--rayc-gold);
  opacity: 0.6;
}
.rayc-steps__title {
  margin: 0;
  font-family: 'Domine', Georgia, serif;
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--rayc-ivory);
}
.rayc-steps__desc {
  margin: 0.4rem 0 0;
  font-family: 'Jost', sans-serif;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--rayc-text-dim);
}
.rayc-steps__window {
  margin: 0.35rem 0 0;
  font-family: 'Jost', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rayc-gold);
}

/* -------------------------------------------------------------
   Itinerary preview — day badge + title/desc, same list rhythm as
   .rayc-steps but with a fixed-width label instead of a bare numeral.
   ------------------------------------------------------------- */
.rayc-itin {
  max-width: 46rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.rayc-itin__item {
  display: flex;
  gap: clamp(1.1rem, 2vw, 1.5rem);
  padding: clamp(1.1rem, 1.8vw, 1.5rem);
  border: 1px solid var(--rayc-line);
  border-radius: var(--rayc-radius);
  background: var(--rayc-raised);
}
.rayc-itin__day {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 2.6rem;
  padding: 0 0.9rem;
  border: 1px solid var(--rayc-line);
  border-radius: var(--rayc-radius-sm);
  font-family: 'Domine', Georgia, serif;
  font-weight: 500;
  font-size: 0.82rem;
  white-space: nowrap;
  color: var(--rayc-gold);
}
.rayc-itin__title {
  margin: 0;
  font-family: 'Domine', Georgia, serif;
  font-weight: 500;
  font-size: 1rem;
  color: var(--rayc-ivory);
}
.rayc-itin__desc {
  margin: 0.3rem 0 0;
  font-family: 'Jost', sans-serif;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--rayc-text-dim);
}

/* -------------------------------------------------------------
   Related guides — arrow-link cards cross-linking to other pages in (or
   near) this silo. Same restrained link language as .rayc-sisters__link,
   framed as a bordered card since there are more of these (5) sitting in
   a denser grid.
   ------------------------------------------------------------- */
.rayc-guide {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--rayc-line);
  border-radius: var(--rayc-radius);
  background: var(--rayc-raised);
  text-decoration: none;
  transition: border-color var(--rayc-ease), transform var(--rayc-ease);
}
.rayc-guide:hover { border-color: var(--rayc-gold); transform: translateY(var(--rayc-lift)); }
.rayc-guide__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--rayc-panel);
  /* .rayc-guide is a column flex container, so this figure is a flex item
     with the default min-height:auto — which is its min-content height,
     i.e. the image's own intrinsic height. Any photo taller than 16:10
     therefore beat the aspect-ratio and set its own box: a 4:3 source
     rendered 302px where a 16:10 sibling rendered 251px, so the card
     tops lined up and the photo bottoms did not. Same class of bug as
     grid's min-width:auto. */
  min-height: 0;
}
.rayc-guide__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.rayc-guide:hover .rayc-guide__media img { transform: scale(1.05); }
.rayc-guide__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: clamp(1.3rem, 2.2vw, 1.6rem);
}
.rayc-guide__tag {
  margin: 0;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rayc-gold);
}
.rayc-guide__title {
  margin: 0.4rem 0 0;
  font-family: 'Domine', Georgia, serif;
  font-weight: 500;
  font-size: 0.98rem;
  line-height: 1.3;
  color: var(--rayc-ivory);
}
.rayc-guide__desc {
  margin: 0.5rem 0 0;
  flex: 1;
  font-family: 'Jost', sans-serif;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--rayc-text-dim);
}
.rayc-guide__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.9rem;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rayc-gold);
}

/* -------------------------------------------------------------
   Final CTA — closing panel, WhatsApp/Email pair matching the site's
   established button language (gold-bright fill + outline pair).
   ------------------------------------------------------------- */
.rayc-page-cta {
  padding: var(--rayc-section) var(--rayc-gutter);
  background: var(--rayc-panel);
  border-top: 1px solid var(--rayc-line);
}
.rayc-page-cta--img { position: relative; overflow: hidden; border-top: 0; }
.rayc-page-cta__img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rayc-page-cta__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(rgba(15, 24, 33, 0.6), rgba(15, 24, 33, 0.6));
}
.rayc-page-cta--img .rayc-page-cta__inner { position: relative; z-index: 2; }
.rayc-page-cta__inner {
  max-width: 40rem;
  margin: 0 auto;
  text-align: center;
}
.rayc-page-cta__body {
  margin: clamp(0.9rem, 1.5vw, 1.2rem) 0 0;
  font-family: 'Jost', sans-serif;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--rayc-text-dim);
}
.rayc-page-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: clamp(1.6rem, 2.6vw, 2rem);
}
.rayc-page-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.6rem;
  border-radius: var(--rayc-pill);
  font-family: 'Jost', sans-serif;
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
  transition: background var(--rayc-ease), color var(--rayc-ease), transform var(--rayc-ease);
}
.rayc-page-cta__btn--fill {
  background: var(--rayc-gold-bright);
  color: var(--rayc-ink);
  border: 1px solid var(--rayc-gold-bright);
}
.rayc-page-cta__btn--fill:hover { background: var(--rayc-gold-lt); transform: translateY(var(--rayc-lift)); }
.rayc-page-cta__btn--outline {
  background: transparent;
  color: var(--rayc-gold);
  border: 1px solid var(--rayc-gold);
}
.rayc-page-cta__btn--outline:hover { background: var(--rayc-gold); color: var(--rayc-ink); }
.rayc-page-cta__btn i { color: inherit; }

/* -------------------------------------------------------------
   Swiper blocks — Regions / Tiers / Guides

   Added after the first pass shipped every card section as the same
   static bordered grid, five times down one page — exactly the
   generic-template monotony this whole project has repeatedly corrected
   on the homepage (Services, Fleet, Reviews all carousel; Destinations
   is mobile-only carousel + desktop bento). Any inner-page section with
   real photos now runs the same house swiper pattern instead: nav
   buttons in the header, gold progress bar, fractional slidesPerView so
   the partial next slide signals "this scrolls." Icon-only sections
   (Reasons, Ground Service — nothing to photograph) get a different,
   non-card treatment below instead, so the page reads as more than one
   idiom repeated.

   Unlike .rayc-page-block__head (centred, the rest of this page's
   convention), a swiper section's head goes back to the homepage's
   left-aligned title + nav-on-the-right layout — nav controls only make
   sense beside a left-anchored title, and every swiper section on the
   homepage already established that pairing.
   ------------------------------------------------------------- */
.rayc-block-swiper__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--rayc-gap);
  max-width: none;
  text-align: left;
}
.rayc-block-swiper__head .rayc-eyebrow,
.rayc-block-swiper__head .rayc-title { text-align: left; }
.rayc-block-swiper__nav {
  display: none;
  flex-shrink: 0;
  gap: 0.6rem;
}
@media (min-width: 640px) { .rayc-block-swiper__nav { display: flex; } }

.rayc-block-swiper {
  margin-top: clamp(2.2rem, 4vw, 3.75rem);
}
.rayc-block-swiper .swiper-wrapper { align-items: stretch; }
.rayc-block-swiper .rayc-card,
.rayc-block-swiper .rayc-guide { height: 100%; }

.rayc-block-swiper__progress {
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  height: 1px;
  margin-top: clamp(1.6rem, 2.6vw, 2.4rem);
  background: var(--rayc-line);
}
.rayc-block-swiper__progress .swiper-pagination-progressbar-fill {
  background: var(--rayc-gold);
}

/* -------------------------------------------------------------
   Hairline bands — Reasons / Ground Service

   Same rule-and-hairline family as .rayc-stats / .rayc-about__creds-grid
   on the homepage (bare icon, no card border) — the icon-only inner-page
   sections use this instead of another bordered card grid, so
   "has a photo" and "icon only" read as two different systems rather
   than one grid style with the image sometimes missing.
   ------------------------------------------------------------- */
.rayc-hairline-grid {
  display: grid;
  grid-template-columns: 1fr;
  margin: clamp(2.2rem, 4vw, 3.75rem) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rayc-line);
  border-bottom: 1px solid var(--rayc-line);
}
.rayc-hairline-grid__cell {
  padding: clamp(1.5rem, 2.4vw, 2rem) clamp(0.4rem, 1vw, 0.75rem);
  text-align: center;
  border-top: 1px solid var(--rayc-line-soft);
}
.rayc-hairline-grid__cell:first-child { border-top: 0; }

/* 4 items: 1 → 2 → 4 columns (same divisor logic as .rayc-stats). */
@media (min-width: 640px) {
  .rayc-hairline-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .rayc-hairline-grid--4 .rayc-hairline-grid__cell {
    border-top: 0;
    border-left: 1px solid var(--rayc-line-soft);
  }
  .rayc-hairline-grid--4 .rayc-hairline-grid__cell:nth-child(2n + 1) { border-left: 0; }
  .rayc-hairline-grid--4 .rayc-hairline-grid__cell:nth-child(n + 3) { border-top: 1px solid var(--rayc-line-soft); }
}
@media (min-width: 1024px) {
  .rayc-hairline-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .rayc-hairline-grid--4 .rayc-hairline-grid__cell { border-top: 0 !important; }
  .rayc-hairline-grid--4 .rayc-hairline-grid__cell:nth-child(2n + 1) { border-left: 1px solid var(--rayc-line-soft); }
  .rayc-hairline-grid--4 .rayc-hairline-grid__cell:nth-child(4n + 1) { border-left: 0; }
}

/* 6 items: 1 → 2 → 3 → 6 columns (same divisor logic as .rayc-about__creds-grid). */
@media (min-width: 640px) {
  .rayc-hairline-grid--6 { grid-template-columns: repeat(2, 1fr); }
  .rayc-hairline-grid--6 .rayc-hairline-grid__cell {
    border-top: 0;
    border-left: 1px solid var(--rayc-line-soft);
  }
  .rayc-hairline-grid--6 .rayc-hairline-grid__cell:nth-child(2n + 1) { border-left: 0; }
  .rayc-hairline-grid--6 .rayc-hairline-grid__cell:nth-child(n + 3) { border-top: 1px solid var(--rayc-line-soft); }
}
@media (min-width: 768px) {
  .rayc-hairline-grid--6 { grid-template-columns: repeat(3, 1fr); }
  .rayc-hairline-grid--6 .rayc-hairline-grid__cell { border-top: 0 !important; }
  .rayc-hairline-grid--6 .rayc-hairline-grid__cell:nth-child(2n + 1) { border-left: 1px solid var(--rayc-line-soft); }
  .rayc-hairline-grid--6 .rayc-hairline-grid__cell:nth-child(3n + 1) { border-left: 0; }
  .rayc-hairline-grid--6 .rayc-hairline-grid__cell:nth-child(n + 4) { border-top: 1px solid var(--rayc-line-soft) !important; }
}
@media (min-width: 1024px) {
  .rayc-hairline-grid--6 { grid-template-columns: repeat(6, 1fr); }
  .rayc-hairline-grid--6 .rayc-hairline-grid__cell { border-top: 0 !important; }
  .rayc-hairline-grid--6 .rayc-hairline-grid__cell:nth-child(3n + 1) { border-left: 1px solid var(--rayc-line-soft); }
  .rayc-hairline-grid--6 .rayc-hairline-grid__cell:nth-child(6n + 1) { border-left: 0; }
}

.rayc-hairline-grid__icon {
  display: block;
  margin: 0 auto clamp(0.9rem, 1.5vw, 1.2rem);
  font-size: 1.4rem;
  color: var(--rayc-gold);
}
.rayc-hairline-grid__title {
  margin: 0;
  font-family: 'Domine', Georgia, serif;
  font-weight: 500;
  font-size: 1.02rem;
  line-height: 1.3;
  color: var(--rayc-ivory);
}
.rayc-hairline-grid__desc {
  margin: 0.55rem 0 0;
  font-family: 'Jost', sans-serif;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--rayc-text-dim);
}
/* Fleet-by-type cells: the count reads as a gold chip after the type name,
   and the example-vessel line sits dimmed below the note. */
.rayc-hairline-grid__count {
  color: var(--rayc-gold);
  font-size: 0.8em;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.rayc-hairline-grid__examples {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--rayc-text-dim);
  opacity: 0.85;
}

/* -------------------------------------------------------------
   Comparison table — "Private Charter vs Shared Cruise" and similar.

   No red/green: the token system deliberately keeps gold as the only
   chromatic note on this site (see the tokens.css comment on why body
   text stays near-neutral even though most comparison-table patterns
   reach for red/green by reflex). Differentiated by icon shape and
   weight instead — a gold check for the "this page's" column, a dim
   minus for the alternative — plus the "private" column getting a
   subtle gold-tinted background so it still reads as the winner at a
   glance without introducing a second hue.
   ------------------------------------------------------------- */
.rayc-compare {
  max-width: 46rem;
  margin: clamp(2.2rem, 4vw, 3.75rem) auto 0;
  border: 1px solid var(--rayc-line);
  border-radius: var(--rayc-radius-lg);
  overflow: hidden;
}
.rayc-compare__head {
  display: none;
}
@media (min-width: 640px) {
  .rayc-compare__head {
    display: grid;
    grid-template-columns: 1fr 1.3fr 1.3fr;
    border-bottom: 1px solid var(--rayc-line);
  }
  .rayc-compare__head span {
    padding: 0.9rem 1.2rem;
    font-family: 'Jost', sans-serif;
    font-weight: 500;
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--rayc-text-dim);
  }
  .rayc-compare__head span:nth-child(2) { color: var(--rayc-gold); background: var(--rayc-line-soft); }
}
.rayc-compare__row {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--rayc-line-soft);
}
.rayc-compare__row:first-child { border-top: 0; }
@media (min-width: 640px) {
  .rayc-compare__row { grid-template-columns: 1fr 1.3fr 1.3fr; }
}
.rayc-compare__feature {
  padding: 1rem 1.2rem 0.4rem;
  font-family: 'Domine', Georgia, serif;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--rayc-ivory);
}
@media (min-width: 640px) { .rayc-compare__feature { padding: 1rem 1.2rem; } }
.rayc-compare__cell {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.35rem 1.2rem 0.9rem;
  font-family: 'Jost', sans-serif;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--rayc-text-dim);
}
@media (min-width: 640px) {
  .rayc-compare__cell { padding: 1rem 1.2rem; }
  .rayc-compare__cell--yes { background: var(--rayc-line-soft); }
}
.rayc-compare__cell i { flex-shrink: 0; margin-top: 0.2em; font-size: 0.9em; }
.rayc-compare__cell--yes { color: var(--rayc-text); }
.rayc-compare__cell--yes i { color: var(--rayc-gold); }
.rayc-compare__cell--no i { color: var(--rayc-text-dim); opacity: 0.6; }
/* Below 640px __head is display:none and the row collapses to one column, so
   the two cells stack with nothing saying which is which. Where the columns
   are two named options rather than a yes/no pair, the template supplies
   data-col and the label appears on mobile only. Attribute-gated so the
   existing check/minus tables, which need no label, are untouched. */
@media (max-width: 639.98px) {
  .rayc-compare__cell[data-col]::before {
    content: attr(data-col);
    flex-shrink: 0;
    min-width: 5.5rem;
    font-family: 'Jost', sans-serif;
    font-weight: 500;
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.9;
    color: var(--rayc-gold);
  }
}

/* -------------------------------------------------------------
   FAQ list — static Q&A, no accordion. A handful of questions on a
   spoke page don't need the tab-switching machinery
   bcc_render_faq_tabs() brings for the site-wide FAQ pages; this is
   just a quiet, readable list in the same hairline rhythm as .rayc-steps.
   ------------------------------------------------------------- */
.rayc-faq-list {
  max-width: 46rem;
  margin: clamp(2.2rem, 4vw, 3.75rem) auto 0;
  display: flex;
  flex-direction: column;
}
.rayc-faq-list__item {
  padding: clamp(1.3rem, 2.2vw, 1.75rem) 0;
  border-top: 1px solid var(--rayc-line);
}
.rayc-faq-list__item:first-child { border-top: 0; padding-top: 0; }
.rayc-faq-list__q {
  margin: 0;
  font-family: 'Domine', Georgia, serif;
  font-weight: 500;
  font-size: 1.02rem;
  line-height: 1.35;
  color: var(--rayc-ivory);
}
.rayc-faq-list__a {
  margin: 0.5rem 0 0;
  font-family: 'Jost', sans-serif;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--rayc-text-dim);
}

/* =============================================================
   Vessel spec sheet — Silo 3 individual vessel pages (LAMIMA first).

   The first pass at vessel pages compressed everything into the same
   hero/answer/stats/4-card-highlights shape the charter-type pages
   already use — accurate, but it reads as the same template reused with
   different words rather than a genuine spec sheet for ONE named yacht.
   These four families exist so a vessel page can show real depth: a full
   key/value spec table, named individual cabins, a categorised equipment
   inventory, and an inclusions checklist — the shape a real yacht-charter
   listing actually takes.
   ============================================================= */

/* Spec table — key/value rows, same bordered-panel language as
   .rayc-compare but a single value column instead of two comparison
   columns. */
.rayc-spec-table {
  max-width: 46rem;
  margin: clamp(2.2rem, 4vw, 3.75rem) auto 0;
  border: 1px solid var(--rayc-line);
  border-radius: var(--rayc-radius-lg);
  overflow: hidden;
}
.rayc-spec-table__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--rayc-line-soft);
}
.rayc-spec-table__row:first-child { border-top: 0; }
.rayc-spec-table__label {
  padding: 0.9rem 1.2rem;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rayc-text-dim);
  background: var(--rayc-raised);
}
.rayc-spec-table__value {
  padding: 0.9rem 1.2rem;
  font-family: 'Domine', Georgia, serif;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--rayc-ivory);
}

/* Cabin grid — named cabin cards. No per-cabin photo asset exists for
   any vessel yet, so these stay bare (icon + name + configuration),
   same restrained language as .rayc-card rather than forcing an image
   that doesn't exist. */
.rayc-cabin-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(2.2rem, 4vw, 3.75rem);
}
@media (min-width: 640px) { .rayc-cabin-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .rayc-cabin-grid { grid-template-columns: repeat(3, 1fr); } }
.rayc-cabin-card {
  padding: clamp(1.25rem, 2vw, 1.5rem);
  border: 1px solid var(--rayc-line);
  border-radius: var(--rayc-radius);
  background: var(--rayc-raised);
  transition: border-color var(--rayc-ease);
}
.rayc-cabin-card:hover { border-color: var(--rayc-gold); }
.rayc-cabin-card__icon {
  display: block;
  margin-bottom: 0.8rem;
  font-size: 1.3rem;
  color: var(--rayc-gold);
}
.rayc-cabin-card__name {
  margin: 0;
  font-family: 'Domine', Georgia, serif;
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--rayc-ivory);
}
.rayc-cabin-card__config {
  margin: 0.4rem 0 0;
  font-family: 'Jost', sans-serif;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--rayc-text-dim);
}

/* Media variant — used only for the cabins a real per-cabin photo
   actually exists for (explicit modifier, not :has(), same rule as
   .rayc-card--media elsewhere in this file: cabins with no matching
   photo stay bare rather than borrowing a mismatched image). */
.rayc-cabin-card--media { padding: 0; overflow: hidden; }
.rayc-cabin-card--media .rayc-cabin-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--rayc-panel);
}
.rayc-cabin-card--media .rayc-cabin-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.rayc-cabin-card--media:hover .rayc-cabin-card__media img { transform: scale(1.05); }
.rayc-cabin-card--media .rayc-cabin-card__body { padding: clamp(1.25rem, 2vw, 1.5rem); }
.rayc-cabin-card--media .rayc-cabin-card__icon { display: none; }

/* Inside a swiper the cards must fill the slide so all seven line up,
   regardless of whether a given cabin has a photo (one doesn't) or how
   long its configuration string wraps. Same height:100% treatment
   .rayc-block-swiper already applies to .rayc-card/.rayc-guide. */
/* The slide itself must be a flex container: .swiper-wrapper's
   align-items:stretch gives every <li> the tallest slide's height, but
   height:100% on the card resolves against an auto-height parent and
   collapses (the photo-less Crab card measured 156px against its
   siblings' 424px). Making the slide flex lets the card stretch to fill
   it instead. */
.rayc-cabins__swiper .swiper-slide { display: flex; height: auto; }
.rayc-cabins__swiper .swiper-slide > .rayc-cabin-card { width: 100%; }

.rayc-block-swiper .rayc-cabin-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.rayc-block-swiper .rayc-cabin-card--media .rayc-cabin-card__media { flex-shrink: 0; }
.rayc-block-swiper .rayc-cabin-card--media .rayc-cabin-card__body { flex: 1; }

/* A cabin with no photo (Crab — no distinct image exists for it) would
   otherwise sit as text pinned to the top of a full-height card, reading
   as broken rather than deliberate. Centring it makes the absence look
   like a choice, which it is. */
.rayc-block-swiper .rayc-cabin-card:not(.rayc-cabin-card--media) {
  justify-content: center;
  text-align: center;
}
.rayc-block-swiper .rayc-cabin-card:not(.rayc-cabin-card--media) .rayc-cabin-card__icon {
  margin-inline: auto;
}

/* -------------------------------------------------------------
   Gallery grid — a real, uneven set of lifestyle/facility photos
   (deliberately not a fixed 3xN grid — real photo sets rarely divide
   evenly, so this uses a simple flex-wrap of near-equal tiles rather
   than forcing a perfect grid that would need placeholder tiles).
   ------------------------------------------------------------- */
.rayc-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.75rem, 1.6vw, 1.1rem);
  margin-top: clamp(2.2rem, 4vw, 3.75rem);
}
@media (min-width: 768px) { .rayc-gallery-grid { grid-template-columns: repeat(4, 1fr); } }
/* 4 columns strands a lone tile whenever the set leaves a remainder of 1
   (Prana's 9 photos render 4/4/1, a single tile beside three tiles' worth
   of dead space). The template picks 3 columns for those sets instead, so
   9 becomes a clean 3/3/3. Lamima's 16 stays on the 4-up track. */
@media (min-width: 768px) { .rayc-gallery-grid--3up { grid-template-columns: repeat(3, 1fr); } }
/* …and 10 photos end 4/4/2, leaving two empty slots. A 5-up track divides
   them exactly (Alila Purnama). Tiles land around 235px at 1440px, still
   comfortably larger than the mobile 2-up. */
@media (min-width: 768px) { .rayc-gallery-grid--5up { grid-template-columns: repeat(5, 1fr); } }
.rayc-gallery-grid__item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--rayc-radius);
  background: var(--rayc-panel);
}
.rayc-gallery-grid__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.rayc-gallery-grid__item:hover img { transform: scale(1.06); }

/* The tiles are PhotoSwipe triggers (<a> elements), so they need to look
   openable rather than like decorative photos: zoom cursor, a gold
   hairline on hover matching every other interactive card on this site,
   and a magnifier that fades in. */
.rayc-gallery-grid__item {
  display: block;
  cursor: zoom-in;
  border: 1px solid transparent;
  transition: border-color var(--rayc-ease);
}
.rayc-gallery-grid__item:hover { border-color: var(--rayc-gold); }
/* Real <i class="ti ti-zoom-in"> element rather than a ::after content
   codepoint: hooks/init-tabler-icon.php loads the webfont from CDN at
   @latest (unpinned), so a hardcoded codepoint could silently become the
   wrong glyph on a version bump. Class names resolve through the font's
   own CSS whatever the version — and it matches how every other icon in
   this theme is written. */
.rayc-gallery-grid__zoom {
  position: absolute;
  right: 0.6rem;
  bottom: 0.5rem;
  z-index: 2;
  font-size: 1rem;
  line-height: 1;
  color: var(--rayc-ivory);
  opacity: 0;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
  transition: opacity var(--rayc-ease);
  pointer-events: none;
}
.rayc-gallery-grid__item:hover .rayc-gallery-grid__zoom,
.rayc-gallery-grid__item:focus-visible .rayc-gallery-grid__zoom { opacity: 1; }

/* Caption inside the PhotoSwipe overlay — plain text bar along the
   bottom, no panel, so it doesn't compete with the photo. */
.rayc-pswp-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom));
  text-align: center;
  font-family: 'Jost', sans-serif;
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(244, 239, 227, 0.92);
  background: linear-gradient(to top, rgba(15, 24, 33, 0.85), transparent);
  pointer-events: none;
}

/* -------------------------------------------------------------
   Vessel badges — class / status / destination, sitting under the
   hero title. Same pill language as .rayc-page-hero__pill but as a
   labelled key/value row rather than a single tag.
   ------------------------------------------------------------- */
.rayc-vessel-badges {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(1.5rem, 2.5vw, 2rem);
}
.rayc-vessel-badges__item { display: flex; flex-direction: column; gap: 0.3rem; }
.rayc-vessel-badges__label {
  margin: 0;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rayc-text-dim);
}
.rayc-vessel-badges__value {
  margin: 0;
  font-family: 'Domine', Georgia, serif;
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--rayc-gold);
}

/* -------------------------------------------------------------
   Charter price cards — one per rate year. Gold-bright numerals,
   the same "this is the headline figure" treatment .rayc-stats uses.
   ------------------------------------------------------------- */
.rayc-price-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
  max-width: 46rem;
  margin: clamp(2.2rem, 4vw, 3.75rem) auto 0;
}
@media (min-width: 640px) { .rayc-price-cards { grid-template-columns: repeat(2, 1fr); } }
/* Vessels that publish a single season rate (Prana) would otherwise leave
   one card filling half a 46rem row with dead space beside it — the same
   unbounded-block problem already fixed on the FAQ, Answer, Equipment and
   Getting-There blocks. Narrow the track instead of stretching the card,
   so the figure keeps its proportions. */
.rayc-price-cards--single { max-width: 24rem; }
@media (min-width: 640px) { .rayc-price-cards--single { grid-template-columns: 1fr; } }
/* Three seasons (Kudanil publishes 2026/2027/2028) hit the same problem from
   the other side: the 2-up track strands the third card on its own row. */
.rayc-price-cards--triple { max-width: 60rem; }
@media (min-width: 640px) { .rayc-price-cards--triple { grid-template-columns: repeat(3, 1fr); } }
.rayc-price-card {
  padding: clamp(1.5rem, 2.6vw, 2rem);
  border: 1px solid var(--rayc-line);
  border-radius: var(--rayc-radius-lg);
  background: var(--rayc-raised);
  text-align: center;
}
.rayc-price-card__year {
  margin: 0;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rayc-text-dim);
}
.rayc-price-card__amount {
  margin: 0.6rem 0 0;
  font-family: 'Domine', Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  line-height: 1.1;
  color: var(--rayc-gold-bright);
}
.rayc-price-card__unit {
  margin: 0.45rem 0 0;
  font-family: 'Jost', sans-serif;
  font-size: 0.82rem;
  color: var(--rayc-text-dim);
}
.rayc-price-note {
  max-width: 46rem;
  margin: clamp(1rem, 1.8vw, 1.4rem) auto 0;
  text-align: center;
  font-family: 'Jost', sans-serif;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--rayc-text-dim);
}

/* -------------------------------------------------------------
   Chip list — short packing-list style items. Deliberately lighter
   than .rayc-incl-list (no check/minus semantics, these are just
   reminders), so they read as a quick glanceable set.
   ------------------------------------------------------------- */
.rayc-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  max-width: 52rem;
  margin: clamp(2.2rem, 4vw, 3.75rem) auto 0;
}
.rayc-chip-list__item {
  padding: 0.5rem 1rem;
  border: 1px solid var(--rayc-line);
  border-radius: var(--rayc-pill);
  font-family: 'Jost', sans-serif;
  font-size: 0.85rem;
  color: var(--rayc-text);
  background: var(--rayc-raised);
}

/* -------------------------------------------------------------
   Info columns — flight routes / airlines / hotels. Same dot-marker
   list idiom as .rayc-equip-group, reused rather than reinvented.
   ------------------------------------------------------------- */
.rayc-info-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 3vw, 2.5rem);
  /* Capped and centred like every other content block on this page
     (.rayc-spec-table and .rayc-incl-list at 46rem, .rayc-chip-list at
     52rem). Left uncapped these three short lists stretched the full
     gutter-to-gutter width — fine at 1440px, but on a ~1900px screen
     the columns drift far apart with the centred heading stranded above
     them, which is what made the section read as broken. */
  max-width: 58rem;
  margin: clamp(2.2rem, 4vw, 3.75rem) auto 0;
}
@media (min-width: 768px) { .rayc-info-cols { grid-template-columns: repeat(3, 1fr); } }

/* Equipment groups — categorised dot-marker lists, reusing the exact
   .rayc-region__sites idiom (bare list, gold dot marker) rather than
   inventing a new list style for the same "short factual items" shape. */
.rayc-equip-groups {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 3vw, 2.5rem);
  /* Same cap-and-centre as .rayc-info-cols below — see the note there
     for why these two needed it and the other blocks on this page
     already had it. */
  max-width: 58rem;
  margin: clamp(2.2rem, 4vw, 3.75rem) auto 0;
}
@media (min-width: 768px) { .rayc-equip-groups { grid-template-columns: repeat(3, 1fr); } }
.rayc-equip-group__title {
  margin: 0 0 0.9rem;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rayc-gold);
}
.rayc-equip-group__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.rayc-equip-group__list li {
  position: relative;
  padding-left: 1.1rem;
  font-family: 'Jost', sans-serif;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--rayc-text);
}
.rayc-equip-group__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rayc-gold);
}

/* Inclusions checklist — same check/minus icon language as
   .rayc-compare's cells, single column since this isn't a comparison,
   just what's covered and what isn't. */
.rayc-incl-list {
  max-width: 46rem;
  margin: clamp(2.2rem, 4vw, 3.75rem) auto 0;
  display: flex;
  flex-direction: column;
}
.rayc-incl-list__item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--rayc-line-soft);
  font-family: 'Jost', sans-serif;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--rayc-text);
}
.rayc-incl-list__item:first-child { border-top: 0; }
.rayc-incl-list__item i { flex-shrink: 0; margin-top: 0.2em; font-size: 0.95em; }
.rayc-incl-list__item--yes i { color: var(--rayc-gold); }
.rayc-incl-list__item--no { color: var(--rayc-text-dim); }
.rayc-incl-list__item--no i { color: var(--rayc-text-dim); opacity: 0.6; }

/* =============================================================
   Silo 2 (Charter Types by Traveler) — distinct layout rhythm.

   Silo 1 reads as a stacked reference document: centred block heads,
   an icon grid for Reasons, a card grid for Fleet. Silo 2 covers people
   (family / group / honeymoon) rather than vessel specs, so it borrows an
   editorial-feature rhythm instead — left-anchored heads, a numbered
   narrative for Reasons (reusing .rayc-steps, not new CSS), and an
   alternating photo-led "spotlight" row for Fleet in place of the tier
   grid. Same tokens/type scale as Silo 1 throughout (still one brand);
   only the arrangement changes. Swiper sections (Guides) are untouched
   on purpose.
   ============================================================= */

/* Left-anchored block head, used everywhere in Silo 2 except swiper
   sections (which already default to left-aligned via
   .rayc-block-swiper__head) and the closing CTA (kept centred site-wide). */
.rayc-page-block__head--left {
  max-width: 34rem;
  margin: 0;
  text-align: left;
}
.rayc-page-block__head--left .rayc-eyebrow,
.rayc-page-block__head--left .rayc-title { text-align: left; }

/* .rayc-steps / .rayc-compare / .rayc-faq-list all keep a max-width with
   auto side-margins so they self-centre under Silo 1's centred heads.
   Once the head above them goes left-aligned instead, that same
   auto-centering pulls the content sideways into the middle of a much
   wider section, stranding it away from the title with a lopsided gap —
   this resets it to flush-left so both head and content share one edge. */
.rayc-page-block__head--left + .rayc-steps,
.rayc-page-block__head--left + .rayc-compare,
.rayc-page-block__head--left + .rayc-faq-list {
  margin-left: 0;
  margin-right: 0;
}

/* That fix only solved the misalignment — the content still caps at
   46rem while the section spans the full page, so everything past that
   width sat empty. Same "narrow panel, nothing beside it" dead-space
   bug this project has already hit on Answer and FAQ, just relocated.
   Fix here is the same idea: pair it with something, not just widen the
   panel — the label becomes a sticky left rail and the content fills
   the remaining width beside it, instead of one narrow stacked column
   floating in a much wider section. */
@media (min-width: 900px) {
  .rayc-page-block--split {
    display: grid;
    grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
  }
  .rayc-page-block--split .rayc-page-block__head--left {
    max-width: none;
    position: sticky;
    top: 7rem;
  }
  /* Full section width, same envelope as every other block on this page
     (.rayc-hairline-grid, .rayc-cardgrid, .rayc-spotlight-list all run
     gutter-to-gutter, no artificial cap-and-centre) — the content column
     fills the remaining 1fr beside the rail instead of staying pinned to
     a fixed reading width. .rayc-compare's own proportional columns
     (1fr 1.3fr 1.3fr) already stretch cleanly at any width, but a single
     column of prose (.rayc-steps/.rayc-faq-list) would just turn into
     uncomfortably long lines at that width, so those two switch to a
     2-up grid here — same "don't leave one column stretched full width,
     split it" logic .rayc-hairline-grid already uses. */
  .rayc-page-block--split .rayc-steps,
  .rayc-page-block--split .rayc-compare,
  .rayc-page-block--split .rayc-faq-list {
    max-width: none;
  }
  .rayc-page-block--split .rayc-steps,
  .rayc-page-block--split .rayc-faq-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: clamp(2rem, 3vw, 3rem);
  }
  .rayc-page-block--split .rayc-steps .rayc-steps__item:nth-child(-n + 2),
  .rayc-page-block--split .rayc-faq-list .rayc-faq-list__item:nth-child(-n + 2) {
    border-top: 0;
    padding-top: 0;
  }
  .rayc-page-block--split .rayc-steps .rayc-steps__item:nth-child(n + 3) {
    border-top: 1px solid var(--rayc-line);
  }
  .rayc-page-block--split .rayc-faq-list .rayc-faq-list__item:nth-child(n + 3) {
    border-top: 1px solid var(--rayc-line);
  }
}

/* Answer section, reversed: panel first (wide) then media (narrow) on
   desktop — the mirror image of Silo 1's media-then-panel order, so the
   two silos don't read as the exact same block moved between pages. */
@media (min-width: 768px) {
  .rayc-answer__layout--flip { grid-template-columns: 7fr 5fr; }
  .rayc-answer__layout--flip .rayc-answer__panel { order: 1; }
  .rayc-answer__layout--flip .rayc-answer__media { order: 2; }
}

/* -------------------------------------------------------------
   Spotlight — alternating photo-and-copy row, replacing the Fleet tier
   grid for this silo. A grid of identical cards suits vessel specs; a
   family/group/honeymoon fleet pick reads better as a short editorial
   feature per vessel, one full-width row at a time, image swapping
   sides down the list so the eye doesn't fall into a straight column.
   ------------------------------------------------------------- */
.rayc-spotlight-list {
  margin: clamp(2.2rem, 4vw, 3.75rem) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 2.8vw, 2.25rem);
}
.rayc-spotlight {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 2.4vw, 2rem);
  align-items: center;
  padding: clamp(1.1rem, 2vw, 1.5rem);
  border: 1px solid var(--rayc-line);
  border-radius: var(--rayc-radius-lg);
  background: var(--rayc-raised);
  text-decoration: none;
  transition: border-color var(--rayc-ease);
}
.rayc-spotlight:hover { border-color: var(--rayc-gold); }
@media (min-width: 768px) {
  .rayc-spotlight { grid-template-columns: 5fr 7fr; }
  .rayc-spotlight-list li:nth-child(even) .rayc-spotlight__media { order: 2; }
  .rayc-spotlight-list li:nth-child(even) .rayc-spotlight__body { order: 1; }
}
.rayc-spotlight__media {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: var(--rayc-radius);
  background: var(--rayc-panel);
  aspect-ratio: 4 / 3;
}
.rayc-spotlight__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.rayc-spotlight:hover .rayc-spotlight__media img { transform: scale(1.05); }
.rayc-spotlight__body { padding: clamp(0.5rem, 1vw, 0.75rem) clamp(0.25rem, 1vw, 1rem); }
.rayc-spotlight__icon {
  display: block;
  margin-bottom: 0.7rem;
  font-size: 1.25rem;
  color: var(--rayc-gold);
}
.rayc-spotlight__title {
  margin: 0;
  font-family: 'Domine', Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  line-height: 1.3;
  color: var(--rayc-ivory);
}
.rayc-spotlight__spec {
  margin: 0.4rem 0 0;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rayc-gold-lt);
}
.rayc-spotlight__desc {
  margin: 0.8rem 0 0;
  font-family: 'Jost', sans-serif;
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--rayc-text-dim);
}
.rayc-spotlight__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rayc-gold);
}
.rayc-spotlight__more i { font-size: 0.8rem; transition: transform var(--rayc-ease); }
.rayc-spotlight:hover .rayc-spotlight__more i { transform: translateX(3px); }

/* -------------------------------------------------------------
   Editor tables in long-form content

   The wrapper is added server-side by hooks/init-content-table-scroll.php.
   `min-width` on the table is the part that does the work: without it the
   table shrink-to-fits the wrapper and the columns crush instead of
   scrolling, which is the failure mode a CSS-only fix runs into.
   ------------------------------------------------------------- */
.rayc-tablewrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.rayc-tablewrap > table {
  min-width: 32rem;
  width: 100%;
}
@media (min-width: 640px) {
  .rayc-tablewrap > table { min-width: 0; }
}

/* -------------------------------------------------------------
   Blog intro stat cards

   Three cards at 320px leave 88px each, and 40px of that is padding —
   "Concierge" cannot fit in the 48px left over, so the grid track grew
   past the container and the whole /blog/ document scrolled 37px at
   320px and 19px at 375px. Grid items take their content as their
   automatic minimum size, so no amount of shrinking fixes it; the cards
   have to stop sharing a row. Three-up returns at 480px, where each card
   gets enough width for the word.
   ------------------------------------------------------------- */
@media (max-width: 479.98px) {
  .rayc-blog-stats { grid-template-columns: 1fr; }
}
.rayc-blog-stats > * { min-width: 0; }

/* =============================================================
   SILO 4 — Diving & Marine Life
   =============================================================
   Silos 1–3 are product silos: they answer "what am I buying", so
   their shapes are a 2-column compare table, price tiers, editorial
   spotlight rows and a vessel spec sheet. Silo 4 is the first
   reference silo — "what will I see, where, and what do I need to be
   able to do it" — and its data does not fit any of those. The
   diving pillar's own content already carries a 12-row table of
   Site / Location / Depth / Currents / Key species; .rayc-compare is
   hard-built for exactly two columns and .rayc-cardgrid--3 would
   dissolve those attributes into prose.

   These three components carry that data. Everything else on the
   Silo 4 pages reuses the existing families unchanged, and the head
   stays centred (Silo 1's convention) rather than borrowing Silo 2's
   sticky left rail — that rail is built for narrative prose and
   would make the two silos hard to tell apart.
   ------------------------------------------------------------- */

/* ---------- Dive-site index ----------
   Reference density, not card density: hairline rows in the same
   rhythm as .rayc-steps, so a dozen sites stay scannable where a
   dozen bordered cards would not. The numeral reuses the ghost-
   numeral idiom from .rayc-steps__num; the region pill and the
   metric chips reuse .rayc-region__tag and .rayc-chip-list__item
   respectively, restated here so the component does not depend on
   another section's markup being present. */
.rayc-sitelist {
  max-width: 62rem;
  margin: clamp(2.2rem, 4vw, 3.75rem) auto 0;
  padding: 0;
  list-style: none;
}
.rayc-site {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem clamp(1rem, 2vw, 1.5rem);
  padding: clamp(1.2rem, 2.2vw, 1.7rem) 0;
  border-top: 1px solid var(--rayc-line);
}
.rayc-site:first-child { border-top: 0; padding-top: 0; }
.rayc-site__index {
  grid-row: 1 / span 2;
  font-family: 'Domine', Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.4;
  color: var(--rayc-gold);
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
}
.rayc-site__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.9rem;
}
.rayc-site__name {
  margin: 0;
  font-family: 'Domine', Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.02rem, 1.4vw, 1.15rem);
  line-height: 1.3;
  color: var(--rayc-ivory);
}
.rayc-site__region {
  padding: 0.2rem 0.62rem;
  border: 1px solid var(--rayc-line);
  border-radius: var(--rayc-pill);
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--rayc-gold);
  white-space: nowrap;
}
.rayc-site__metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-left: auto;
}
.rayc-site__metric {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.24rem 0.6rem;
  border: 1px solid var(--rayc-line-soft);
  border-radius: var(--rayc-pill);
  background: var(--rayc-raised);
  font-family: 'Jost', sans-serif;
  font-size: 0.72rem;
  line-height: 1;
  color: var(--rayc-text-dim);
  white-space: nowrap;
}
.rayc-site__metric i { font-size: 0.82rem; color: var(--rayc-gold); opacity: 0.75; }
.rayc-site__detail {
  margin: 0;
  font-family: 'Jost', sans-serif;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--rayc-text-dim);
}
/* Below 640px the metrics can no longer sit on the title's right without
   crushing the name, so the whole row becomes a single stacked column and
   the numeral rejoins the flow rather than spanning two rows. */
@media (max-width: 639.98px) {
  .rayc-site { grid-template-columns: 1fr; }
  .rayc-site__index { grid-row: auto; font-size: 0.95rem; }
  .rayc-site__metrics { margin-left: 0; }
}

/* ---------- Season & conditions strip ----------
   A month axis, which nothing else on the site has. Intensity is
   carried entirely by --rayc-gold opacity so no new colour enters the
   palette — the same restraint the tokens have held throughout. The
   grid is 12 equal columns and would crush below ~640px, so it
   scrolls inside its own box there, the same treatment
   .rayc-tablewrap gives editor tables. */
.rayc-seasonbar {
  max-width: 62rem;
  margin: clamp(2.2rem, 4vw, 3.75rem) auto 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.rayc-seasonbar__inner { min-width: 34rem; }
.rayc-seasonbar__scale,
.rayc-seasonbar__row {
  display: grid;
  grid-template-columns: minmax(7.5rem, 9rem) repeat(12, 1fr);
  align-items: center;
  gap: 0 0.25rem;
}
.rayc-seasonbar__scale {
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--rayc-line);
}
.rayc-seasonbar__scale span {
  font-family: 'Jost', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--rayc-text-dim);
}
.rayc-seasonbar__scale span:first-child { text-align: left; letter-spacing: 0.16em; }
.rayc-seasonbar__row { padding: 0.7rem 0; border-top: 1px solid var(--rayc-line-soft); }
.rayc-seasonbar__row:first-of-type { border-top: 0; }
.rayc-seasonbar__label {
  font-family: 'Jost', sans-serif;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--rayc-text);
  padding-right: 0.75rem;
}
.rayc-seasonbar__cell {
  height: 0.5rem;
  border-radius: var(--rayc-pill);
  background: var(--rayc-gold);
  opacity: 0.1;
}
.rayc-seasonbar__cell--low  { opacity: 0.12; }
.rayc-seasonbar__cell--good { opacity: 0.42; }
.rayc-seasonbar__cell--peak { opacity: 1; }
.rayc-seasonbar__key {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.1rem;
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rayc-line);
}
.rayc-seasonbar__key span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: 'Jost', sans-serif;
  font-size: 0.72rem;
  color: var(--rayc-text-dim);
}
.rayc-seasonbar__key i {
  width: 1.4rem;
  height: 0.42rem;
  border-radius: var(--rayc-pill);
  background: var(--rayc-gold);
}

/* ---------- 4-up card grid ----------
   .rayc-cardgrid stopped at --3. The marine-life catalogue is a
   field-guide plate set, which wants to be denser than a 3-up
   product grid. Same column progression logic as
   .rayc-hairline-grid--4 (1 → 2 → 4, no remainder at any step). */
.rayc-cardgrid--4 { grid-template-columns: 1fr; }
@media (min-width: 640px)  { .rayc-cardgrid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .rayc-cardgrid--4 { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Mobile-only carousel: grid above 640px ----------
   Used by the Silo 4 marine-life plates and the Silo 5 zone and village
   cards. Four full-width cards stacked below 640px made one section
   scroll a long way, so it becomes a swiper there and only there —
   initMobileSwipers() creates and destroys each instance on that same
   breakpoint, and a page may carry more than one.

   .rayc-mobile-swiper__grid is the grid AND the swiper-wrapper. Both displays are
   declared explicitly rather than leaving swiper.css's own
   `.swiper-wrapper { display: flex }` to win below 640px: pages.css does
   load after swiper.css today, but a one-class-vs-one-class tie decided by
   enqueue order is a silent breakage waiting for someone to reorder the
   stylesheets. The two-class selector settles it outright.

   Above the breakpoint the swiper is destroyed, so `.swiper` container
   styling has to be neutralised too — its `overflow: hidden` would
   otherwise clip the cards' hover lift. */
.rayc-mobile-swiper .rayc-mobile-swiper__grid {
  display: flex;
  gap: 0;                       /* Swiper owns the spacing via spaceBetween */
}
.rayc-mobile-swiper .rayc-card { height: 100%; }

@media (min-width: 640px) {
  .rayc-mobile-swiper { overflow: visible; }
  .rayc-mobile-swiper .rayc-mobile-swiper__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1.25rem, 2.4vw, 1.75rem);
  }
  .rayc-mobile-swiper__progress { display: none; }
}
/* Column count is per section, not baked into the family. The base is 2-up
   because the zone cards each carry a site list that needs the width; the
   marine-life plates go 4-up, and a 3-item set gets its own modifier so it
   fills one row instead of leaving an orphan on a second. */
@media (min-width: 1024px) {
  .rayc-mobile-swiper--3 .rayc-mobile-swiper__grid { grid-template-columns: repeat(3, 1fr); }
  .rayc-mobile-swiper--4 .rayc-mobile-swiper__grid { grid-template-columns: repeat(4, 1fr); }
}

/* =============================================================
   SILO 5 — Destinations & Geography
   =============================================================
   Silo 4 answers "what will I see" and its shapes are a flat index
   and a calendar. Silo 5 answers "where is it and how do I get
   there" — grouping and sequence, which nothing else on the site
   expresses. The content is already in that shape: the map page
   carries a Route / Ferry / Speedboat table and the villages page a
   Distance-from-Waisai table.

   Only one new component is needed. Zones reuse .rayc-region (icon,
   tag pill, name, season window, dot-marker site list — built for
   Silo 1's regions, and a geographic zone is the same object), and
   the destination index reuses .rayc-sitelist from Silo 4.
   ------------------------------------------------------------- */

/* ---------- Journey chain ----------
   Sequential legs joined by a vertical rule, each carrying a mode, a
   from-to line and duration/distance chips. .rayc-itin is the closest
   existing family but its day badge reads as an itinerary and it has
   nowhere to put a mode or a distance.

   The connecting rule is drawn on the marker column rather than as a
   border on the item, so it stops cleanly at the last leg instead of
   trailing past it. */
.rayc-journey {
  max-width: 52rem;
  margin: clamp(2.2rem, 4vw, 3.75rem) auto 0;
  padding: 0;
  list-style: none;
}
.rayc-journey__leg {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 clamp(1rem, 2vw, 1.5rem);
  padding-bottom: clamp(1.6rem, 2.8vw, 2.4rem);
}
.rayc-journey__leg:last-child { padding-bottom: 0; }
.rayc-journey__marker {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--rayc-line);
  border-radius: 50%;
  background: var(--rayc-raised);
  color: var(--rayc-gold);
  font-size: 1.05rem;
}
/* The rule runs from the bottom of one marker to the top of the next.
   Suppressed on the final leg so the chain ends rather than dangles. */
.rayc-journey__leg:not(:last-child) .rayc-journey__marker::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  width: 1px;
  height: calc(100% + clamp(1.6rem, 2.8vw, 2.4rem));
  background: var(--rayc-line);
  transform: translateX(-50%);
}
.rayc-journey__body { padding-top: 0.3rem; }
.rayc-journey__route {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.55rem;
  margin: 0;
  font-family: 'Domine', Georgia, serif;
  font-weight: 500;
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  line-height: 1.35;
  color: var(--rayc-ivory);
}
.rayc-journey__arrow { color: var(--rayc-gold); opacity: 0.7; font-size: 0.9em; }
.rayc-journey__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.6rem;
}
.rayc-journey__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.24rem 0.62rem;
  border: 1px solid var(--rayc-line-soft);
  border-radius: var(--rayc-pill);
  background: var(--rayc-raised);
  font-family: 'Jost', sans-serif;
  font-size: 0.72rem;
  line-height: 1;
  color: var(--rayc-text-dim);
  white-space: nowrap;
}
.rayc-journey__chip i { font-size: 0.82rem; color: var(--rayc-gold); opacity: 0.75; }
.rayc-journey__desc {
  margin: 0.6rem 0 0;
  font-family: 'Jost', sans-serif;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--rayc-text-dim);
}
@media (max-width: 479.98px) {
  .rayc-journey__marker { width: 2.1rem; height: 2.1rem; font-size: 0.92rem; }
}

/* -------------------------------------------------------------
   Silo 6 (Itineraries & Trip Planning) — the two components that
   give this silo its own shape.

   Silo 5 answers "where is it and how far" — space, and its shapes
   are a journey chain and a distance table. Silo 6 answers "how many
   nights, and what happens on which day" — time and sequence. Nothing
   on this site expressed a day: .rayc-journey is the legs of ARRIVAL,
   one-off with no repetition, and .rayc-itin is a day badge plus prose
   with no route and no activity data.
   ------------------------------------------------------------- */

/* .rayc-daystrip — a compact ribbon of numbered days under the opening
   paragraph. It is the table of contents and the silo's signature in one:
   a <nav> of anchors into the day plan below. On the pillar the same
   markup carries night counts (4 · 7 · 10 · 11 · 14) instead of days, and
   items with no page behind them render as <span> rather than <a>.

   The connecting rule is drawn per item rather than once across the
   container: the strip scrolls horizontally, and a single absolutely
   positioned rule would only span the visible box, not the scroll width. */
.rayc-daystrip {
  display: flex;
  margin: clamp(1.25rem, 2.5vw, 2rem) 0 0;
  padding: 0 0 0.4rem;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.rayc-daystrip__item {
  position: relative;
  flex: 1 0 auto;
  min-width: 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0.4rem 0;
  text-align: center;
  text-decoration: none;
}
/* The rule sits at the vertical centre of the circle; the first and last
   items draw only their inner half so the chain ends rather than dangles. */
.rayc-daystrip__item::before {
  content: '';
  position: absolute;
  top: 1.35rem;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--rayc-line);
}
.rayc-daystrip__item:first-child::before { left: 50%; }
.rayc-daystrip__item:last-child::before { right: 50%; }
.rayc-daystrip__num {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  border: 1px solid var(--rayc-line);
  border-radius: 50%;
  background: var(--rayc-surface);
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 0.82rem;
  line-height: 1;
  color: var(--rayc-ivory);
  transition: border-color var(--rayc-ease), background var(--rayc-ease), color var(--rayc-ease);
}
.rayc-daystrip__label {
  margin: 0;
  font-family: 'Jost', sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  line-height: 1.35;
  color: var(--rayc-text-dim);
}
a.rayc-daystrip__item:hover .rayc-daystrip__num,
a.rayc-daystrip__item:focus-visible .rayc-daystrip__num {
  border-color: var(--rayc-gold);
  color: var(--rayc-gold);
}
a.rayc-daystrip__item:hover .rayc-daystrip__label { color: var(--rayc-text); }
/* Items with no page behind them stay legible but read as inert. */
span.rayc-daystrip__item .rayc-daystrip__num { color: var(--rayc-text-dim); }

/* .rayc-dayplan — the spine of every itinerary page. One row per day: the
   day number on a connected rule (the .rayc-journey marker idiom, reused
   deliberately so the two read as the same family), a from-to route line,
   activity chips, and the day's highlight.

   The chips are the point. A reader choosing between seven nights and
   eleven is counting dive days, and a paragraph does not let them do that
   at a glance. */
.rayc-dayplan {
  max-width: 52rem;
  margin: clamp(2.2rem, 4vw, 3.75rem) auto 0;
  padding: 0;
  list-style: none;
  counter-reset: rayc-day;
}
.rayc-dayplan__day {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 clamp(1rem, 2vw, 1.5rem);
  padding-bottom: clamp(1.6rem, 2.8vw, 2.4rem);
  /* Anchored from the daystrip, so the heading must clear the sticky header. */
  scroll-margin-top: 6rem;
}
.rayc-dayplan__day:last-child { padding-bottom: 0; }
.rayc-dayplan__num {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--rayc-line);
  /* Square-cornered, unlike .rayc-journey__marker's circle — a day is a
     block of time, a leg is a point on a route. */
  border-radius: var(--rayc-radius);
  background: var(--rayc-raised);
  font-family: 'Jost', sans-serif;
  line-height: 1;
}
.rayc-dayplan__num b {
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--rayc-gold);
}
.rayc-dayplan__num span {
  margin-top: 0.15rem;
  font-size: 0.54rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rayc-text-dim);
}
.rayc-dayplan__day:not(:last-child) .rayc-dayplan__num::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  width: 1px;
  height: calc(100% + clamp(1.6rem, 2.8vw, 2.4rem));
  background: var(--rayc-line);
  transform: translateX(-50%);
}
.rayc-dayplan__body { padding-top: 0.35rem; }
.rayc-dayplan__route {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.55rem;
  margin: 0;
  font-family: 'Domine', Georgia, serif;
  font-weight: 500;
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  line-height: 1.35;
  color: var(--rayc-ivory);
}
.rayc-dayplan__arrow { color: var(--rayc-gold); opacity: 0.7; font-size: 0.9em; }
.rayc-dayplan__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.65rem 0 0;
  padding: 0;
  list-style: none;
}
.rayc-dayplan__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.24rem 0.62rem;
  border: 1px solid var(--rayc-line-soft);
  border-radius: var(--rayc-pill);
  background: var(--rayc-raised);
  font-family: 'Jost', sans-serif;
  font-size: 0.72rem;
  line-height: 1;
  color: var(--rayc-text-dim);
  white-space: nowrap;
}
.rayc-dayplan__chip i { font-size: 0.82rem; color: var(--rayc-gold); opacity: 0.75; }
/* A passage day is time spent moving, not diving — dimmed so a reader
   counting dive days can discount it without reading the label. */
.rayc-dayplan__chip--passage { opacity: 0.62; }
.rayc-dayplan__detail {
  margin: 0.65rem 0 0;
  font-family: 'Jost', sans-serif;
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--rayc-text-dim);
}
@media (max-width: 479.98px) {
  .rayc-dayplan__num { width: 2.6rem; height: 2.6rem; }
  .rayc-dayplan__num b { font-size: 0.94rem; }
  .rayc-daystrip__item { min-width: 4.4rem; }
}

/* -------------------------------------------------------------
   Silo 7 (Cost / Booking / Trust & Comparison) — the decision-ledger
   identity: numbers first, prices as tabulated rows rather than prose.

   Two new components live here:
   - .rayc-stat-bank: the n/l/sub stat idiom at bigger scale, used where a
     reader is comparing rates before reading anything.
   - .rayc-ledger: tabulated rows. One base row pattern with two layouts —
     default (icon + title + snippet, the line-item explanation list) and
     --pair (label left, figure right, the budget rows). --matrix turns the
     whole thing into the per-tier budget cards.
   .rayc-callout is a plain bordered panel (hidden costs), .rayc-card--link
   is the existing .rayc-card pressed into service as a cross-link with a
   hover arrow. Everything else on the six Silo 7 pages reuses components
   defined above or in sections.css.
   ------------------------------------------------------------- */
.rayc-stat-bank {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--rayc-line);
  border-radius: var(--rayc-radius-lg);
  background: var(--rayc-raised);
  overflow: hidden;
}
.rayc-stat-bank__item {
  padding: clamp(1.4rem, 2.4vw, 2rem);
  border-top: 1px solid var(--rayc-line-soft);
}
.rayc-stat-bank__item:first-child { border-top: 0; }
@media (min-width: 768px) {
  .rayc-stat-bank { grid-template-columns: repeat(3, 1fr); }
  .rayc-stat-bank--2 { grid-template-columns: repeat(2, 1fr); }
  .rayc-stat-bank--3 { grid-template-columns: repeat(3, 1fr); }
  .rayc-stat-bank--4 { grid-template-columns: repeat(4, 1fr); }
  .rayc-stat-bank__item {
    border-top: 0;
    border-left: 1px solid var(--rayc-line-soft);
  }
  .rayc-stat-bank__item:first-child { border-left: 0; }
}
.rayc-stat-bank__n {
  margin: 0;
  font-family: 'Domine', Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  line-height: 1.15;
  color: var(--rayc-gold);
}
.rayc-stat-bank__l {
  margin: 0.55rem 0 0;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--rayc-ivory);
}
.rayc-stat-bank__sub {
  margin: 0.3rem 0 0;
  font-family: 'Jost', sans-serif;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--rayc-text-dim);
}

.rayc-ledger {
  margin: 0 auto;
  padding: 0;
  list-style: none;
  /* Same reading-width constraint as .rayc-steps/.rayc-itin: without it the
     rows stretch across the full block on wide viewports and the copy hangs
     left with dead space to the right. */
  max-width: 46rem;
}
.rayc-ledger__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(0.9rem, 1.6vw, 1.2rem);
  align-items: start;
  padding: clamp(1.1rem, 1.9vw, 1.5rem) 0;
  border-top: 1px solid var(--rayc-line-soft);
}
.rayc-ledger__row:first-child { border-top: 0; padding-top: 0; }
.rayc-ledger__row:last-child { padding-bottom: 0; }
.rayc-ledger__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--rayc-line-soft);
  border-radius: var(--rayc-radius-sm);
  background: var(--rayc-surface);
  font-size: 1.15rem;
  color: var(--rayc-gold);
}
.rayc-ledger__title {
  margin: 0;
  font-family: 'Domine', Georgia, serif;
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--rayc-ivory);
}
.rayc-ledger__snippet,
.rayc-ledger__body {
  margin: 0.4rem 0 0;
  font-family: 'Jost', sans-serif;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--rayc-text-dim);
}
.rayc-ledger__row--pair {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.55rem 0;
}
.rayc-ledger__label {
  font-family: 'Jost', sans-serif;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--rayc-text-dim);
}
.rayc-ledger__value {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--rayc-ivory);
  white-space: nowrap;
}

.rayc-ledger--matrix {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 2.4vw, 1.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .rayc-ledger--matrix { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .rayc-ledger--matrix { grid-template-columns: repeat(3, 1fr); }
}
.rayc-ledger__card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  border: 1px solid var(--rayc-line);
  border-radius: var(--rayc-radius);
  background: var(--rayc-raised);
}
.rayc-ledger__card--em {
  border-color: var(--rayc-gold);
  box-shadow: 0 0 0 1px var(--rayc-gold);
}
.rayc-ledger__card-media {
  margin: calc(-1 * clamp(1.4rem, 2.4vw, 1.9rem)) calc(-1 * clamp(1.4rem, 2.4vw, 1.9rem)) clamp(1.1rem, 1.8vw, 1.4rem);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--rayc-radius) var(--rayc-radius) 0 0;
}
.rayc-ledger__card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rayc-ledger__card-meta {
  margin: 0;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rayc-gold);
}
.rayc-ledger__card-title {
  margin: 0.35rem 0 0;
  font-family: 'Domine', Georgia, serif;
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.25;
  color: var(--rayc-ivory);
}
.rayc-ledger__card-rows {
  margin: clamp(0.9rem, 1.6vw, 1.25rem) 0 0;
}
.rayc-ledger__card-rows .rayc-ledger__row { padding: 0.55rem 0; }
.rayc-ledger__card-total {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: auto;
  padding-top: clamp(1rem, 1.7vw, 1.3rem);
  border-top: 1px solid var(--rayc-line);
}
.rayc-ledger__card-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.rayc-ledger__card-total-label {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rayc-text-dim);
}
.rayc-ledger__card-total-value {
  font-family: 'Domine', Georgia, serif;
  font-weight: 500;
  font-size: 1.6rem;
  color: var(--rayc-ivory);
}
.rayc-ledger__card-pax-label {
  font-family: 'Jost', sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rayc-text-dim);
}
.rayc-ledger__card-pax-value {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--rayc-gold);
}
.rayc-ledger__card-note {
  margin: 0.9rem 0 0;
  font-family: 'Jost', sans-serif;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--rayc-text-dim);
}

.rayc-callout {
  max-width: 44rem;
  margin-inline: auto;
  padding: clamp(1.5rem, 2.6vw, 2.2rem);
  border: 1px solid var(--rayc-line);
  border-radius: var(--rayc-radius-lg);
  background: var(--rayc-raised);
}
.rayc-callout__head {
  display: flex;
  align-items: flex-start;
  gap: clamp(0.9rem, 1.6vw, 1.25rem);
}
.rayc-callout__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.9rem;
  height: 2.9rem;
  flex: none;
  border: 1px solid var(--rayc-line-soft);
  border-radius: var(--rayc-radius-sm);
  background: var(--rayc-surface);
  font-size: 1.3rem;
  color: var(--rayc-gold);
}
.rayc-callout__kicker {
  margin: 0;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rayc-gold);
}
.rayc-callout__title {
  margin: 0.3rem 0 0;
  font-family: 'Domine', Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.3;
  color: var(--rayc-ivory);
}
.rayc-callout__list {
  margin: clamp(1.1rem, 1.9vw, 1.5rem) 0 0;
  padding: 0;
  list-style: none;
}
.rayc-callout__item {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--rayc-line-soft);
  font-family: 'Jost', sans-serif;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--rayc-text);
}
.rayc-callout__item:first-child { border-top: 0; }
.rayc-callout__item i { font-size: 0.6rem; color: var(--rayc-gold); flex: none; }
.rayc-callout__outro {
  margin: clamp(1.1rem, 1.9vw, 1.5rem) 0 0;
  padding-top: clamp(1rem, 1.7vw, 1.3rem);
  border-top: 1px solid var(--rayc-line);
  font-family: 'Jost', sans-serif;
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--rayc-text-dim);
}

.rayc-card--link {
  display: block;
  text-decoration: none;
}
.rayc-card--link:hover .rayc-card__title { color: var(--rayc-gold-lt); }
.rayc-card__tag {
  margin: 0 0 0.45rem;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rayc-gold);
}
.rayc-card__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.8rem;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 0.82rem;
  color: var(--rayc-gold);
}
.rayc-card__more i { font-size: 0.8rem; transition: transform var(--rayc-ease); }
.rayc-card--link:hover .rayc-card__more i { transform: translateX(3px); }

/* Solo answer variant: no paired media (cost page has no honest photo that
   is not already the hero), so the panel takes the full layout width. */
.rayc-answer--solo .rayc-answer__layout { grid-template-columns: 1fr; }
.rayc-answer--solo .rayc-answer__panel { padding-top: 0; }

/* Visually hidden, still read aloud. This theme had no such utility — the
   WordPress default .screen-reader-text is not defined anywhere in it — so
   anything relying on one would have rendered its label on screen. Named
   with the project prefix like every other class here. */
.rayc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The day strip is its own scroll container, but .rayc-answer__panel is a
   grid item with the default min-width:auto — so the panel grew to the
   strip's combined item width and pushed the whole page sideways (118px at
   320px). The panel only has to be allowed to be narrower than its content;
   the strip then scrolls inside it as intended. Scoped to the pages that
   opt in so the other 49 templates using .rayc-answer are untouched. */
.rayc-answer--daystrip .rayc-answer__panel { min-width: 0; }

/* -------------------------------------------------------------
   SILO 7 batch 3 — FAQ pair ("Ask the Operator" / "Plan the Trip")

   The two FAQ pages get their own identity, deliberately lighter than
   the decision-ledger pages: a compact hero instead of a full-screen
   one, then the questions themselves — tabs on the charter FAQ,
   native accordions on the general FAQ. Nothing here depends on
   swiper.css or app.js; the tabs are radio inputs (keyboard-usable,
   no JS) and the accordions are <details>.
   ------------------------------------------------------------- */

/* ---------- Compact FAQ hero ---------- */
.rayc-faq-hero {
  background: var(--rayc-ink);
  border-bottom: 1px solid var(--rayc-line);
  padding: clamp(3rem, 6vw, 5rem) 0;
}
.rayc-faq-hero__inner {
  max-width: 52rem;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
}
.rayc-faq-hero__crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Jost', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rayc-text-dim);
}
.rayc-faq-hero__crumbs a { color: var(--rayc-text-dim); }
.rayc-faq-hero__crumbs a:hover { color: var(--rayc-gold); }
.rayc-faq-hero__crumbs i { font-size: 0.9em; opacity: 0.6; }
.rayc-faq-hero__crumbs span { color: var(--rayc-ivory); }
.rayc-faq-hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: clamp(1.4rem, 2.4vw, 2rem);
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rayc-gold);
}
.rayc-faq-hero__title {
  margin: 0.7rem 0 0;
  max-width: 44rem;
  font-family: 'Domine', Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.25;
  color: var(--rayc-ivory);
}
.rayc-faq-hero__intro {
  margin: clamp(1rem, 1.8vw, 1.4rem) 0 0;
  max-width: 46rem;
  font-family: 'Jost', sans-serif;
  font-size: clamp(0.98rem, 1.15vw, 1.06rem);
  line-height: 1.75;
  color: var(--rayc-text);
}
.rayc-faq-hero__intro a { color: var(--rayc-gold); }

/* ---------- CSS-only tabs (FAQ pages) ---------- */
.rayc-faq-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  border-bottom: 1px solid var(--rayc-line);
}
.rayc-faq-tabs__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.rayc-faq-tabs__label {
  order: 1;
  padding: clamp(0.8rem, 1.2vw, 1rem) clamp(1rem, 2vw, 1.6rem);
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--rayc-text-dim);
  transition: color var(--rayc-ease), border-color var(--rayc-ease);
}
.rayc-faq-tabs__label:hover { color: var(--rayc-ivory); }
.rayc-faq-tabs__input:focus-visible + .rayc-faq-tabs__label {
  outline: 2px solid var(--rayc-gold);
  outline-offset: -2px;
}
.rayc-faq-tabs__input:checked + .rayc-faq-tabs__label {
  color: var(--rayc-gold);
  border-bottom-color: var(--rayc-gold);
}
.rayc-faq-tabs__panel { display: none; order: 2; flex: 1 0 100%; }
.rayc-faq-tabs__panel-inner { padding: clamp(1.4rem, 2.6vw, 2.4rem) 0 0; }
.rayc-faq-tabs__input:checked + .rayc-faq-tabs__label + .rayc-faq-tabs__panel {
  display: block;
}

/* ---------- Accordion items inside a tab panel ---------- */
.rayc-faq-accordion {
  border-top: 1px solid var(--rayc-line);
}
.rayc-faq-accordion:first-of-type { border-top: 0; }
.rayc-faq-accordion__q {
  list-style: none;
  margin: 0;
  padding: clamp(1rem, 1.6vw, 1.3rem) clamp(1rem, 2vw, 1.5rem) clamp(1rem, 1.6vw, 1.3rem) 0;
  cursor: pointer;
  font-family: 'Domine', Georgia, serif;
  font-weight: 500;
  font-size: clamp(0.98rem, 1.3vw, 1.08rem);
  line-height: 1.4;
  color: var(--rayc-ivory);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  transition: color var(--rayc-ease);
}
.rayc-faq-accordion__q::-webkit-details-marker { display: none; }
.rayc-faq-accordion__q::after {
  content: '\ea5f';
  font-family: 'tabler-icons' !important;
  font-size: 1.05em;
  flex-shrink: 0;
  color: var(--rayc-gold);
  transition: transform var(--rayc-ease);
}
.rayc-faq-accordion[open] .rayc-faq-accordion__q::after { transform: rotate(180deg); }
.rayc-faq-accordion__q:hover { color: var(--rayc-gold); }
.rayc-faq-accordion__a {
  margin: 0;
  padding: 0 clamp(1rem, 2vw, 1.5rem) clamp(1.1rem, 1.8vw, 1.5rem) 0;
  font-family: 'Jost', sans-serif;
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--rayc-text);
}