/* ============================================================
   what-we-do.css — WHAT WE DO page-specific section styles.
   Shared chrome (nav, footer, buttons, tokens, type) lives in /site.css.
   ============================================================ */

/* Shared primitives (.bg-white/.bg-sand, .serif-title, .dot, .ext, .caption,
   .btn-outline*, .band-navy) now live in site.css so every page shares them. */

/* ---- HERO is shared in site.css (.hero/.hero-bg/.hero-content/.hero-btns/.hero-caption) ---- */
/* GLOB-02: the old page-scoped 56px hero h1 (cut down from the 80px token after client
   feedback) is gone — the global token is now 64px, close enough that this page rides it. */

/* ---- TAB NAV: shared component now lives in site.css (CAMP-02) ---- */

/* ---- TRAVEL SECTIONS (two-column) — tabbed: only the active panel shows ---- */
.travel { padding: 66px 0 72px; display: none; }
.travel.is-active { display: block; }
#immersive .section-icon { height: 78px; }
#cruise   .section-icon { height: 60px; }
#family   .section-icon { height: 104px; margin-top: 10px; }
#wellness .section-icon { height: 64px; }
#adventure .section-icon { height: 66px; }
#business .section-icon { height: 70px; }

/* .two-col + .media (and the .ready band) are shared in site.css */



/* ---- WHY TRAVELLERS CHOOSE US ---- */
.why-choose { padding: 70px 0 80px; text-align: center; }
.why-choose .serif-title { margin-bottom: 28px; }
.why-lead {
  font-family: var(--sans); font-weight: 400;
  font-size: 28px; line-height: 36px; letter-spacing: -0.03em;
  color: var(--ink); max-width: 720px; margin: 0 auto 28px;
}
.why-body { color: var(--ink-soft); max-width: 880px; margin: 0 auto 18px; }
.why-choose .btn-outline { margin-top: 22px; }

/* ---- TESTIMONIAL: fully shared t-tiles styles in site.css — no overrides here,
   the slider must render identically to the home one (client QA). ---- */

/* ---- FEATURE band (full-width container image) — REMOVED, R2-WWD-01 ----
   R2-WWD-01 removed this band: its full-bleed Langkawi photo became the Virtuoso
   video and moved down into .agent-grid, and the heading took the lead slot.
   The old rules (.feature-image padding 28/64, img aspect-ratio 1232/670) are gone
   with the markup — restore both together if the swap gets bounced. */

/* ---- WHY USE A VIRTUOSO TRAVEL ADVISOR ---- */
/* Lead heading now sits where the feature image did, so this band absorbs that
   band's top padding (was 72 here + 28 there above a 64 bottom). */
.why-agent { padding: 48px 0 100px; }
.agent-head { margin-bottom: 40px; }
.agent-grid { gap: 64px; align-items: start; }
.agent-body p { color: var(--ink-soft); margin-bottom: 20px; max-width: 540px; }
.agent-body .pill-navy { margin-top: 8px; }

/* Virtuoso film — 16:9 frame, matches the .t-video panel in site.css.
   (Column ORDER is markup order, not CSS: keeps the a11y/DOM order honest.) */
.agent-video {
  position: relative; aspect-ratio: 16 / 9;
  background: var(--navy); border-radius: 20px; overflow: hidden;
}
.agent-video iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
}

/* ---- READY band is shared in site.css ---- */

/* ---- RESPONSIVE (What We Do sections) ---- */
/* Tab nav: once the row no longer fits (natural width ~930px), stop wrapping and
   scroll horizontally instead — one row, swipe/scroll to reach the rest. */

@media (max-width: 900px) {
  /* mobile .serif-title size now comes from site.css (36/44, GLOB-02) */
  .agent-grid { grid-template-columns: 1fr; gap: 32px; }
  .agent-head { margin-bottom: 24px; }
  .hotel-band { grid-template-columns: 1fr; gap: 18px; }
  .why-lead { font-size: 24px; line-height: 30px; }
}
@media (max-width: 560px) {
  .content .sub { font-size: 24px; line-height: 30px; }
}

/* sheet-driven intro paragraphs between the hero and the journey tabs */
.wwd-intro { padding: 56px 0 8px; }
.wwd-intro-body { max-width: 980px; margin: 0 auto; text-align: center; }
.wwd-intro-body p { color: var(--ink-soft); margin-bottom: 18px; }

/* ============================================================
   GLOB-03 — MOBILE SECTION RHYTHM (what we do).
   The section bands here had no phone-scale padding override (the
   testimonial's 116px bottom and why-agent's 100px bottom read as holes on
   phones). One rhythm ≤900px: standard sections 56-64px, tab panels 48px
   under their tab bar. Additive only — desktop rules untouched.
   (.travel is mirrored in luxury-cruising.css and who-we-are.css — keep the three in sync.)
   ============================================================ */
@media (max-width: 900px) {
  .wwd-intro { padding: 48px 0 8px; }
  .travel { padding: 48px 0 56px; }
  .why-choose { padding: 56px 0 64px; }
  .why-agent { padding: 40px 0 64px; }
}