/* ============================================================
   home.css — HOMEPAGE-specific section styles.
   Shared chrome (nav, footer, buttons, tokens, type) lives in site.css.
   ============================================================ */

/* ---- HERO ---- */
/* Vertical balance: the ~90px header is absolute (transparent) over the hero, so flex-
   centring in the full 840px reads low-slung chrome-wise. padding-top matches the header
   (border-box keeps the hero 840px), so the copy centres in the 750px band the chrome
   doesn't occupy; the relative `top` then lifts it a touch above that geometric centre —
   an optical centre, since the caption strip below adds weight at the bottom. Replaces
   the old `.hero-content { padding-top: 60px }`, which pushed the title DOWN 30px net. */
.hero { position: relative; height: 840px; display: flex; align-items: center; justify-content: center; overflow: hidden; padding-top: 90px; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-content { position: relative; z-index: 2; text-align: center; color: var(--white); top: -24px; }
.hero-content h1 { color: var(--white); margin-bottom: 22px; }
.hero-content p { font-size: 20px; line-height: 28px; margin-bottom: 34px; }
.hero-btns { display: flex; gap: 16px; justify-content: center; }

/* ---- image captions: .img-caption component now lives in site.css (site-wide) ---- */
.hero-caption {
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin: 16px auto 0;
  padding: 0 var(--gutter);
}

/* ---- VIP ---- */
.vip { padding: 96px 0 72px; }
.vip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: start; }
.vip-text h2 { color: var(--black); margin-bottom: 28px; }
.vip-text p { margin-bottom: 24px; max-width: 470px; }
.vip-list { list-style: disc; padding-left: 22px; margin: 0 0 24px; max-width: 470px; }
.vip-list li { margin-bottom: 8px; }
.vip-media img { width: 100%; aspect-ratio: 5 / 6; object-fit: cover; border-radius: 0; }
.vip-media .img-caption { text-align: right; }

/* ---- WE'RE HERE TO HELP ---- */
.help { padding: 64px 0 96px; }
.help h2 { color: var(--black); margin-bottom: 28px; }
.help .lead { margin-bottom: 72px; }
.help-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.help-col { text-align: center; }
.help-icon { width: 56px; height: 56px; object-fit: contain; margin: 0 auto 24px; }
.help-col h3 {
  font-family: var(--sans); font-weight: 600; font-size: 28px; line-height: 36px;
  letter-spacing: -0.03em; margin-bottom: 16px; color: var(--black);
}
.help-col p { color: #2c2c2c; }

/* ---- NAVY BANDS (Need help / Ready) ---- */
.band-navy { background: var(--navy); color: var(--white); }
.band { padding: 56px 0; }
.band-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.band-media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 0; }
.band-text h2 { color: var(--white); margin-bottom: 22px; }
.band-text p { color: rgba(255,255,255,.92); margin-bottom: 30px; max-width: 420px; }

/* ---- JOURNEYS ---- */
.journeys { padding: 88px 0; }
.journeys h2 { color: var(--black); margin-bottom: 24px; }
.journeys .lead { margin-bottom: 64px; }
.journeys-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 80px; margin-bottom: 56px; }
.journey-col { text-align: center; }
.journey-icon { width: 96px; height: 96px; object-fit: contain; margin: 0 auto 20px; }
.journey-col h3 {
  font-family: var(--sans); font-weight: 600; font-size: 28px; line-height: 36px;
  letter-spacing: -0.03em; margin-bottom: 16px; color: var(--black);
}
/* R2-HOME-01: the heading links to its What We Do section. The client noted clickable
   headings as a risk, so the link stays invisible at rest — colour, weight and size are
   the heading's own (site.css: `a { color: inherit; text-decoration: none }`) and only a
   hover/keyboard underline gives it away. */
.journey-col h3 a { color: inherit; text-decoration: none; }
.journey-col h3 a:hover,
.journey-col h3 a:focus-visible {
  text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1.5px;
}
.journey-col p { color: #2c2c2c; max-width: 360px; margin: 0 auto; }

/* ---- OUR LOCATION ---- */
.location { padding: 80px 0; }
.location h2 { color: var(--white); margin-bottom: 28px; }
.location-body { color: rgba(255,255,255,.92); max-width: 1000px; margin: 0 auto 36px; }
.meet-label { font-weight: 700; font-size: 16px; color: var(--white); margin-bottom: 40px; }
.location-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 44px; }
.loc-card { position: relative; border-radius: 0; overflow: hidden; aspect-ratio: 16 / 7; }
.loc-card img { width: 100%; height: 100%; object-fit: cover; }
.loc-label {
  position: absolute; left: 22px; top: 50%; transform: translateY(-50%);
  color: var(--white); font-size: 20px; font-weight: 600; letter-spacing: -0.03em;
}
.loc-arrow { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); }
.loc-arrow img { width: 36px; height: 36px; }

/* Testimonial tile + section styles are shared in site.css (WWD reuses them). */

/* ---- EXPLORE DESTINATIONS ---- */
.explore { padding: 80px 0; }
.explore h2 { color: var(--black); margin-bottom: 56px; }
.explore-viewport { overflow: hidden; }
/* Single-row carousel track (slid by controller.js / GSAP); 3 cards per view. */
.explore-grid { display: flex; gap: 24px; will-change: transform; }
/* Same aspect crop as the /destinations/ grid, so shared imagery of any source size
   renders identically on both surfaces. */
.dest-card { position: relative; border-radius: 0; overflow: hidden; aspect-ratio: 408 / 560; flex: 0 0 calc((100% - 48px) / 3); }
.dest-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dest-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.15) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,.65) 100%);
}
.dest-tag {
  position: absolute; left: 18px; top: 18px; z-index: 2;
  background: var(--dest, var(--teal)); color: var(--white); font-size: 13px; font-weight: 600;
  padding: 7px 18px; border-radius: 999px;
}
.dest-arrow { position: absolute; right: 16px; top: 16px; z-index: 2; }
.dest-arrow img { width: 36px; height: 36px; }
.dest-desc {
  position: absolute; left: 22px; right: 22px; bottom: 22px; z-index: 2;
  color: var(--white); font-size: 14px; line-height: 20px;
}
/* arrow pair styling is the shared .carousel-controls/.ctrl-arrow block (site.css) */
.explore-controls { margin-top: 40px; }

/* ---- GET INSPIRED ---- */
.inspired { padding: 56px 0 88px; }
.inspired h2 { color: var(--black); margin-bottom: 12px; }
.inspired-sub { font-size: 18px; margin-bottom: 26px; }
.inspired .pill-navy { margin-bottom: 56px; }
/* The teaser now renders the shared .post-grid / .post card (site.css) so it matches the
   Travel journal exactly: left-aligned title + the inline external-link icon. */

/* ---- CONTACT FORM (sand band — client feedback HOME-12 rework) ----
   Two columns mirroring the contact page's .get-grid: intro text LEFT (serif
   heading + optional sub paragraph), the full enquiry form RIGHT. The heading
   here is a full sentence (vs the contact page's short "Get in touch"), so the
   serif-title is scoped down to keep the left column proportionate. The fields
   use the shared .field system in site.css (bordered inputs + styled selects —
   the same look as the contact page form), so no input overrides here. */
.contact { padding: 72px 0 80px; }
.contact-grid { display: grid; grid-template-columns: 440px 1fr; gap: 32px; align-items: start; }
.contact-intro .serif-title {
  font-size: 44px; line-height: 54px; margin-bottom: 22px; max-width: 400px;
}
.contact-intro p { color: var(--ink-soft); font-size: 15px; line-height: 23px; max-width: 380px; }
.contact-form { display: flex; flex-direction: column; gap: 22px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.contact-form .pill-navy { align-self: flex-start; margin-top: 6px; }

/* ---- RESPONSIVE (homepage sections) ---- */
@media (max-width: 900px) {
  .vip-grid, .band-grid { grid-template-columns: 1fr; }
  /* contact block stacks like the contact page: intro text above the form */
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .contact-intro .serif-title { font-size: 40px; line-height: 48px; }
  .help-grid, .journeys-grid { grid-template-columns: 1fr 1fr; }
  .dest-card { flex-basis: calc((100% - 24px) / 2); }   /* 2 cards per view */
  /* Virtuoso row + testimonial tile stacking now shared in site.css */
}
@media (max-width: 560px) {
  .help-grid, .journeys-grid, .location-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .dest-card { flex-basis: 86%; }        /* 1 card + a peek, so the swipe is discoverable */
}

/* ---- Mobile: the explore carousel becomes a real swipe track ----
   `.is-swipe` is added by controller.js ≤900px. Native scroll-snap gives the platform's own
   momentum/rubber-band, which a transform-driven track can't; the arrows scroll it instead of
   translating it, and the track's transform is cleared so the two never fight. */
@media (max-width: 900px) {
  .explore.is-swipe .explore-viewport {
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .explore.is-swipe .explore-viewport::-webkit-scrollbar { display: none; }
  .explore.is-swipe .explore-grid { will-change: auto; }
  .explore.is-swipe .dest-card { scroll-snap-align: center; }
}

/* A sub-site shows only its own office card — centre it rather than leaving a gap. */
.location-grid-single { grid-template-columns: minmax(0, 720px); justify-content: center; }

/* ============================================================
   GLOB-03 — MOBILE SECTION RHYTHM (homepage).
   None of the home sections had a phone-scale padding override, so every
   band carried its desktop 56-96px padding — and the stacked .vip/.band
   grids kept their desktop 96/80px column gaps as row gaps (the "space in
   the photo" inside the CTA bands, client QA). One rhythm ≤900px:
   standard sections 56-64px vertical, navy CTA bands 48px, stacked
   photo↔copy gaps 32px (matches site.css's .two-col/.ready-grid), section
   head→content gaps ~40-48px. Additive only — desktop rules untouched.
   ============================================================ */
@media (max-width: 900px) {
  /* hero title area (client QA): padding-top matched the ~90px desktop
     header, but the mobile bar is ~66px — the title sat low in the photo.
     Height and the -24px optical lift stay as designed. */
  .hero { padding-top: 66px; }
  .vip { padding: 64px 0 56px; }
  .vip-grid { gap: 32px; }                 /* stacked: photo sits 32px under the copy, not 96px */
  .help { padding: 56px 0 64px; }
  .help .lead { margin-bottom: 48px; }
  .band { padding: 48px 0; }               /* navy CTA bands (Need help / pre-contact) */
  .band-grid { gap: 32px; }                /* stacked: 80px photo gap → 32px */
  .journeys { padding: 64px 0; }
  .journeys .lead { margin-bottom: 44px; }
  .journeys-grid { gap: 40px; margin-bottom: 40px; }
  .location { padding: 64px 0; }
  .location .meet-label { margin-bottom: 28px; }
  .location-grid { margin-bottom: 36px; }
  .t-virtuoso { margin-bottom: 36px; }
  .explore { padding: 64px 0; }
  .explore h2 { margin-bottom: 36px; }
  .explore-controls { margin-top: 28px; }
  .inspired { padding: 48px 0 64px; }
  .inspired .pill-navy { margin-bottom: 40px; }
  .contact { padding: 56px 0 64px; }
}