/* ============================================================
   campaign.css — /lp/ campaign landing page ("The New Era of Exploration").
   Chrome/type/two-col/content/form come from /site.css. New here: anchor tabs,
   navy story bands, destination carousel row, partner/voyage/expert card grids,
   logo rows, and the navy enquiry form treatment. The What-Travellers-Say slider
   is the shared .testimonial.t-tiles component (site.css) — no rules here.
   ============================================================ */

.cp-hero { height: 982px; }

/* ---- anchor tabs under the hero: the shared .tabnav (site.css, CAMP-02).
   data-tabs="anchors" — clicks scroll to sections, the pill follows scroll.
   Anchored sections clear the sticky header on arrival. ---- */
#where-to-go, #voyages, #our-partners, #meet-the-experts, #enquire { scroll-margin-top: 96px; }

/* the campaign runs the shared logo strip directly under the tabs */
.tabnav + .logos { padding: 56px 0 44px; }

/* ---- recurring centred section head (serif + 24px sub + small intro) ---- */
.cp-head { text-align: center; }
.cp-head .serif-title { margin-bottom: 18px; }
.cp-sub {
  font-size: 24px; line-height: 30px; letter-spacing: -0.03em;
  color: var(--ink); margin-bottom: 18px;
}
.cp-intro { font-size: 15px; line-height: 23px; color: var(--ink-soft); max-width: 1220px; margin: 0 auto 44px; }

/* ---- A New Era of Travel ---- */
.cp-newera { padding: 146px 0 126px; }
.cp-newera .two-col { max-width: 1232px; margin: 0 auto; gap: 40px; }
.cp-newera .media img { aspect-ratio: 596 / 745; }
.cp-h2-left { margin-bottom: 34px; }
.cp-lead-bold { font-weight: 700; color: var(--ink); margin-bottom: 26px; }
.cp-newera .content { padding-top: 90px; }

/* ---- navy story bands (Collection / Guide / Is This For You) ---- */
.cp-collection, .cp-guide, .cp-isthis { padding: 68px 0; color: var(--white); }
.cp-collection { padding-bottom: 44px; }
/* GLOB-02: band statements ride the global .serif-title (54/64, mobile 36/44) — the old
   page-scoped 56/66 would now sit ABOVE the section heads it was originally cut under. */
.cp-band-text .serif-title { color: #c9d6e2; margin-bottom: 26px; }
.cp-band-text h3 { font-size: 24px; line-height: 32px; font-weight: 500; letter-spacing: -0.03em; margin-bottom: 20px; }
.cp-band-text p { font-size: 15px; line-height: 23px; color: rgba(255,255,255,.92); margin-bottom: 28px; max-width: 560px; }
.cp-collection-grid, .cp-guide-grid, .cp-isthis-grid { max-width: 1232px; margin: 0 auto; gap: 40px; align-items: center; }
.cp-collection .media img { aspect-ratio: 596 / 540; }
.cp-isthis .media img { aspect-ratio: 572 / 500; }
.cp-guide .media img { aspect-ratio: 572 / 500; }

.pill-white {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 16.5px; font-weight: 500; letter-spacing: -0.03em;   /* GLOB-02: tracks the pill CTAs */
  border-radius: 999px; padding: 13px 28px; white-space: nowrap;
  background: var(--white); color: var(--navy);
}

/* ---- Where Will You Go ---- */
.cp-where { padding: 100px 0 96px; }
.cp-where-sub { font-size: 24px; line-height: 34px; letter-spacing: -0.03em; color: var(--ink); max-width: 1160px; margin: 0 auto 30px; }
/* Where-will-you-go: a real carousel (CAMP-04). Plain scroll-snap track (never
   transform the scroller - iOS), shared navy arrows flanking teal dots (house
   pattern, correct orientation via .ctrl-next's flip); nav hides when all cards fit. */
.cpw-track {
  display: flex; gap: 40px; max-width: 1232px; margin: 0 auto;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  touch-action: pan-x; overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cpw-track::-webkit-scrollbar { display: none; }
.cpw-card { flex: 0 0 calc((100% - 80px) / 3); scroll-snap-align: start; position: relative; margin: 0; }
.cpw-card img { width: 100%; aspect-ratio: 384 / 258; object-fit: cover; display: block; }
/* editable card wording, overlaid in the design's typography (renders only when set) */
.cpw-overlay {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  text-align: center; padding: 18px; color: var(--white);
  background: rgba(0, 0, 0, .18);
}
.cpw-title { font-weight: 700; font-size: 20px; letter-spacing: .02em; text-transform: uppercase; }
.cpw-sub { font-size: 19px; line-height: 25px; }
.cpw-nav { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 42px; }
.cpw-nav.is-static { display: none; }   /* three-or-fewer cards fit the row - no controls */
.cp-dots { display: flex; justify-content: center; gap: 12px; }
.cp-dots button {
  width: 12px; height: 12px; border-radius: 999px;
  border: 1.5px solid var(--teal); background: none; padding: 0;
}
.cp-dots button.on { background: var(--teal); }

/* ---- Featured Expedition Partners ---- */
.cp-partners { padding: 40px 0 90px; }
.cp-partner-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 44px; max-width: 1232px; margin: 0 auto; text-align: center; }
.cp-plogo { height: 88px; display: flex; align-items: center; justify-content: center; margin-bottom: 26px; }
.cp-plogo img { max-height: 88px; max-width: 100%; object-fit: contain; }
.cp-ptag { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 12px; }
.cp-ptitle { font-size: 19px; line-height: 27px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 14px; }
.cp-pdesc { font-size: 15px; line-height: 24px; color: var(--ink-soft); margin-bottom: 22px; }
.cp-offer-tag { font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--woodfire); margin-bottom: 10px; }
.cp-offer { font-size: 17px; line-height: 28px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }

/* ---- Row-gated card grids (CAMP-05/06/07) ---- */
/* A [data-rowmore] grid opens at ONE row; the .cp-loadmore pill under it reveals a
   row per click (controller.js sizes rows off the live grid columns and hides the
   pill when everything shows). Buttons ship [hidden], so no-JS renders every row,
   button-less; .rowmore-hidden exists only while JS gates rows. */
.rowmore-hidden { display: none; }
.cp-loadmore { display: flex; margin: 64px auto 0; }      /* block-level pill, centred; design's 64px gap over the button (partners) */
.cp-loadmore[hidden] { display: none; }                   /* the display above would otherwise beat the UA [hidden] rule */
@media (prefers-reduced-motion: no-preference) {
  .rowmore-in { animation: tc-rowmore-in .5s ease both; } /* newly revealed rows fade in */
}
@keyframes tc-rowmore-in { from { opacity: 0; } }

/* ---- Featured Voyages / Norway ---- */
.cp-voyages { padding: 84px 0 40px; }
.cp-norway { padding: 60px 0 40px; }
.cp-voyage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: 1232px; margin: 0 auto; }
.cp-voyage img { width: 100%; aspect-ratio: 384 / 252; object-fit: cover; display: block; }
.cp-vbody { background: var(--water); padding: 28px 24px 34px; text-align: center; }
.cp-vbrand { font-size: 15px; color: var(--ink); margin-bottom: 10px; }
.cp-vtitle { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 8px; }
.cp-vdate { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 14px; }
.cp-vdesc { font-size: 15px; line-height: 24px; color: var(--ink-soft); margin-bottom: 20px; }
.cp-voyage .cp-offer { font-size: 16px; line-height: 27px; margin-bottom: 22px; }
.cp-voyages .cp-loadmore { margin-top: 40px; }   /* voyage trios sit tighter over their Load-more pill than the partners row */

/* ---- Is This For You ---- */
.cp-quoteline { font-weight: 700; font-size: 16px; line-height: 24px; color: var(--white); margin-bottom: 22px; max-width: 620px; }

/* ---- Your Exploration Specialists ---- */
.cp-experts { padding: 100px 0 90px; }
.cp-expert-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 44px; max-width: 1232px; margin: 0 auto; }
.cp-ename { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 6px; }
.cp-eyears { font-size: 15px; color: var(--ink-soft); margin-bottom: 16px; }
.cp-expert img { width: 100%; aspect-ratio: 278 / 172; object-fit: cover; margin-bottom: 18px; }
.cp-emeta { display: grid; grid-template-columns: 96px 1fr; gap: 10px 12px; font-size: 12px; line-height: 17px; }
.cp-emeta .k { color: var(--ink); }
.cp-emeta .v { font-weight: 700; color: var(--ink); }

/* What Travellers Say is the shared testimonial slider (.testimonial.t-tiles) —
   ALL of its styling lives in site.css. Zero page-level t-* rules here (CAMP-09). */

/* ---- Why Travellers Choose Us ---- */
.cp-why { padding: 60px 0 100px; }
.cp-why-intro { max-width: 1220px; }
.cp-why-logos {
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
  max-width: 1340px; margin: 24px auto 0;
}
.cp-why-logos img { height: 96px; width: auto; object-fit: contain; }

/* ---- Start Your Journey (navy enquiry form) ---- */
.cp-enquire { padding: 96px 0 110px; color: var(--white); }
.cp-enquire .serif-title { color: #c9d6e2; }
.cp-enquire .cp-sub { color: var(--white); }
.cp-enquire .cp-intro { color: rgba(255,255,255,.88); margin-bottom: 56px; }
.cp-form { max-width: 806px; margin: 0 auto; }
.cp-form .field label { color: var(--white); }

@media (max-width: 900px) {
  .cp-hero { height: 640px; }
  .cp-newera { padding: 64px 0 70px; }
  .cp-newera .content { padding-top: 0; }
  .cp-voyage-grid { grid-template-columns: 1fr; max-width: 480px; }
  /* where-cards become the house swipe row: one card + a peek, arrows hand over to touch */
  .cpw-track { gap: 16px; margin: 0 calc(50% - 50vw); padding: 0 24px; }
  .cpw-card { flex: 0 0 88%; scroll-snap-align: center; }
  .cpw-nav .ctrl-arrow { display: none; }
  .cp-partner-grid, .cp-expert-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .cp-loadmore { margin-top: 40px; }   /* mobile rhythm: tighter gap over the Load-more pill */
  .cp-why-logos { flex-wrap: wrap; justify-content: center; }
  .cp-why-logos img { height: 64px; }
}
@media (max-width: 560px) {
  .cp-partner-grid, .cp-expert-grid { grid-template-columns: 1fr; }
}

/* the navy pill sits on a water-coloured card — its water sweep would dissolve
   into the background, so a navy ring keeps the edge (outline: no layout shift,
   paints above the sweep panel; colour arrives timed to the panel) */
.cp-vbody .pill-navy {
  outline: 1.5px solid transparent; outline-offset: -1.5px;
  transition: background .3s ease, color .35s ease, border-color .3s ease,
              box-shadow .35s ease, opacity .2s ease, outline-color .25s ease .15s;
}
.cp-vbody .pill-navy:hover { outline-color: var(--navy); }

/* GLOB-03 follow-up: the campaign LP wasn't in the audited page list — same
   mobile rhythm as everywhere else (standard 56-64, bands 48). */
@media (max-width: 900px) {
  .cp-where { padding: 64px 0; }
  .cp-experts { padding: 64px 0 56px; }
  .cp-enquire { padding: 56px 0 64px; }
}