/* ============================================================
   luxury-cruising.css — page-specific styles.
   Chrome/type/two-col/content/section-head/hotel-band/ready all come from
   /site.css. Here: the taller hero, the cruise widget embed slot, and this
   page's section rhythm (all values measured off the mockup).
   ============================================================ */

/* hero is taller than the default 840 (982px to the caption in the comp) */
.lc-hero { height: 982px; }

/* intro section: "Cruise" head + two-col + the Find-a-cruise widget band */
.lc-intro { padding: 158px 0 161px; }
.lc-intro .section-head { margin-bottom: 64px; }
.lc-intro .section-icon { height: 60px; }
.lc-widget-band { margin-top: 10px; border-radius: 24px; padding: 24px; }

/* this comp runs its two-cols and widget on a 1232px sub-grid with 40px gaps
   (the shared .two-col is fluid at the 1272 container) */
.lc-intro .two-col, .lc-sec .two-col, .travel .two-col, .lc-widget-band {
  max-width: 1232px; margin-left: auto; margin-right: auto;
}
.lc-intro .two-col, .lc-sec .two-col, .travel .two-col { gap: 40px; align-items: center; } /* copy centres beside its photo */
/* comp media is 595x719 (shared default is 600:719); the .travel tab sections went
   square in R4-IMG-03 (rule in site.css) so they're no longer in this group */
.lc-intro .media img, .lc-sec .media img { aspect-ratio: 595 / 719; }
/* label | text on row 1; the button gets its own row, right-aligned; the embed
   spans the full band (matches the comp: para runs the full width, button below) */
.lc-widget-band { grid-template-columns: 126px 1fr; gap: 18px 28px; }
/* this band's copy is a step larger than the WWD hotel band's */
.lc-widget-band .hotel-text { font-size: 16px; line-height: 23px; max-width: none; }
.lc-widget-band .btn-outline-light { grid-column: 2; justify-self: end; align-self: start; }

/* the booking-tool embed slot spans the whole band under label/text/button */
.lc-widget-embed {
  grid-column: 1 / -1;
  height: 452px;
  background: #d9d9d9;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; letter-spacing: -0.02em; color: var(--ink);
}

/* alternating story sections (sand / white / sand) */
.lc-sec { padding: 48px 0 40px; }
.lc-sec.bg-white { padding: 132px 0 97px; }
.lc-sec .section-head { margin-bottom: 32px; }

/* TAB NAV: shared component now lives in site.css (CAMP-02) */
/* tabbed: only the active panel shows (all panels white) */
.travel { padding: 66px 0 72px; display: none; }
.travel.is-active { display: block; }

/* R2-LC-02 — the "Ideal for…" line above each panel's body is bold body copy,
   not a heading (client, round 2). Body size/leading, weight 700, and it takes
   its colour + 560px measure from the shared `.content p` so it reads as the
   first line of the copy. Margin stays at the old `.content .sub` 28px so the
   gap down to the body/"Read more" is unchanged. `.content .lc-sub-body` (0,2,0)
   is deliberately specific enough to beat `.content p`'s 24px bottom margin.
   Only the .travel tab panels change — .lc-intro's and .lc-sec's h3.sub stay. */
.content .lc-sub-body {
  font-size: 16px; line-height: 24px; font-weight: 700;
  margin-bottom: 28px;
}

/* panel copy longer than two paragraphs collapses behind "Read more" —
   controller.js drives the max-height + aria state; the motion is CSS-owned
   and stands down with prefers-reduced-motion */
.lc-expand { position: relative; overflow: hidden; max-height: 240px; }
.lc-expand:not(.is-open)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 72px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--white));
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .lc-expand { transition: max-height .45s cubic-bezier(.22, .61, .36, 1); }
}
.lc-expand-btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; margin: 2px 0 6px;
}

/* closing centred section */
.lc-closing { padding: 120px 0 94px; text-align: center; }
.lc-closing .serif-title { margin-bottom: 24px; }
.lc-closing-sub {
  font-family: var(--sans); font-weight: 400;
  font-size: 32px; line-height: 40px; letter-spacing: -0.03em;
  color: var(--ink); max-width: 820px; margin: 0 auto 44px;
}
.lc-closing p:not(.lc-closing-sub) { color: var(--ink-soft); max-width: 800px; margin: 0 auto 24px; }
.lc-closing-btn { margin-top: 36px; }

/* this comp's ready photo is square (the shared band's default is 600:494) */
.ready.band-navy .ready-media img { aspect-ratio: 1 / 1; }

/* Tab nav: once the row no longer fits, stop wrapping and scroll horizontally
   instead — one row, swipe/scroll to reach the rest (mirrors what-we-do.css) */

@media (max-width: 900px) {
  .lc-hero { height: 640px; }
  .lc-intro { padding: 80px 0 80px; }
  .lc-widget-band { margin-top: 56px; }
  .lc-widget-embed { height: 360px; }
  .lc-sec { padding: 44px 0 52px; }
  .lc-closing { padding: 72px 0 80px; }
  .lc-closing-sub { font-size: 24px; line-height: 30px; }
}

/* ---- sheet-driven sections: destination tiles + single-column bands ---- */
.lc-where { padding: 96px 0 90px; text-align: center; }
.lc-where .serif-title { margin-bottom: 18px; }
.lc-where-sub { font-size: 24px; line-height: 32px; letter-spacing: -0.03em; color: var(--ink); max-width: 980px; margin: 0 auto 44px; }
.lc-tiles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: 1232px; margin: 0 auto; text-align: center; }
.lc-tile img { width: 100%; aspect-ratio: 384 / 252; object-fit: cover; display: block; }
.lc-tile-body { background: var(--water); padding: 26px 22px 30px; height: calc(100% - 252px); display: flex; flex-direction: column; }
.lc-tile-cta { margin-top: auto; align-self: center; padding-top: 16px; font-size: 15px; }
.lc-tile-title { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 6px; }
.lc-tile-tag { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 12px; }
.lc-tile-desc { font-size: 15px; line-height: 24px; color: var(--ink-soft); }

/* ---- LC-02: "Where Will You Go?" pager (>900px) ----
   controller.js re-presents the nine tiles as pages of three: the first three
   stay visible and the rest rotate through on the partner-logo pager's cadence
   (auto-advance, hover pause, off-screen pause). Under the tiles sits a
   controls row — the house round-navy prev/next arrows flanking the dots
   (rework2) — for manual paging. It only builds when motion is allowed —
   reduced-motion / ?nomotion / no-JS visitors keep the plain grid above.
   NB the .reveal rides .lc-tiles-frame (the plain wrapper), NOT the grid:
   a transform on the grid kills the ≤900px iOS scroll-snap swipe below. */
.lc-tiles-grid.is-pager { display: block; }
.lc-tiles-page { display: none; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.lc-tiles-page.is-active { display: grid; }
.lc-tiles-ctrls { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 32px; }
.lc-tiles-dots { display: flex; justify-content: center; align-items: center; gap: 10px; }
.lc-tiles-dot {
  width: 10px; height: 10px; border-radius: 50%; padding: 0;
  background: color-mix(in srgb, var(--navy) 25%, transparent);
  transition: background .25s ease, scale .25s ease;
}
.lc-tiles-dot.is-active { background: var(--navy); scale: 1.2; }
.lc-tiles-dot:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
/* round-navy arrow buttons: shared .carousel-controls/.ctrl-arrow rules live in site.css */

.lc-single { padding: 84px 0; text-align: center; }
.lc-single .serif-title { margin-bottom: 22px; }
.lc-single p { color: var(--ink-soft); max-width: 900px; margin: 0 auto 20px; }

.lc-single-btn { margin-top: 32px; }
@media (max-width: 900px) {
  /* LC-02: the tile grid becomes a native scroll-snap swipe row of all nine
     (like the inspiration page's dest-grid) — controller.js tears the desktop
     pager down at this width, so the swipe is pure CSS with the platform's
     own momentum. Row bleeds to the viewport edges, cards snap to centre. */
  .lc-tiles-grid {
    display: flex; gap: 16px;
    max-width: none;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;                                /* Firefox */
    margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter);
  }
  .lc-tiles-grid::-webkit-scrollbar { display: none; }    /* WebKit */
  .lc-tile { flex: 0 0 min(86%, 420px); scroll-snap-align: center; }
  .lc-tile-body { height: auto; }
  /* belt-and-braces: if the desktop pager DOM is ever present at this width
     (a missed matchMedia change mid-rotation), neutralise it in pure CSS —
     pages dissolve so every tile is a flex item of the swipe row again, and
     the desktop arrows/dots hide. Harmless when the JS teardown has run. */
  .lc-tiles-grid.is-pager { display: flex; }
  .lc-tiles-page, .lc-tiles-page.is-active { display: contents; }
  .lc-tiles-ctrls { display: none; }
  .lc-where { padding: 64px 0 60px; }
  .lc-where-sub { font-size: 19px; line-height: 27px; }
  .lc-single { padding: 56px 0; }
}

/* ============================================================
   GLOB-03 — MOBILE SECTION RHYTHM (luxury cruising gaps the existing
   ≤900px block missed). `.lc-sec.bg-white` (0,2,0) out-specifies the
   ≤900 `.lc-sec` override (0,1,0), so that band kept its desktop 132px
   top padding on phones; the mirrored `.travel` tab panels had no mobile
   rule at all (sync with what-we-do.css). Additive only.
   ============================================================ */
@media (max-width: 900px) {
  .lc-sec.bg-white { padding: 44px 0 52px; }   /* joins the existing .lc-sec mobile rhythm */
  .travel { padding: 48px 0 56px; }            /* mirrored from what-we-do.css — keep in sync */
}