/* ============================================================
   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, .lc-widget-band {
  max-width: 1232px; margin-left: auto; margin-right: auto;
}
.lc-intro .two-col, .lc-sec .two-col { gap: 40px; }
/* comp media is 595x719 (shared default is 600:719) */
.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; }

/* 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; }

@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); }
.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-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; }
@media (max-width: 900px) {
  .lc-tiles-grid { grid-template-columns: 1fr; max-width: 480px; }
  .lc-tile-body { height: auto; }
  .lc-where { padding: 64px 0 60px; }
  .lc-where-sub { font-size: 19px; line-height: 27px; }
  .lc-single { padding: 56px 0; }
}