/* R10-CAMP-01 · Cruise styles: small uppercase pill tabs swap one panel at a time
   (heading + text left, image right), the What We Do pattern with its own cb-cs-* classes.
   No JS: every panel shows, stacked, and the pills jump to them. cruise_styles.js adds
   .is-tabs (the pills become ARIA tabs, inactive panels get [hidden]). */

.cb-cruise_styles { padding: 96px 0 104px; }
.cb-cs-head { margin-bottom: 36px; }
.cb-cs-head .serif-title:last-child { margin-bottom: 0; }
.cb-cs-head .cp-intro { max-width: 880px; margin-bottom: 0; }

/* ---- pill tabs ---- */
.cb-cs-tabs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  margin: 0 auto 56px;
}
.cb-cs-tab {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 9px 24px; border-radius: 999px;
  border: 1px solid #cfc7b8; background: transparent; color: var(--ink);
  font-size: 13px; line-height: 20px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  max-width: 100%; text-align: center;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.cb-cs-tab:hover { border-color: var(--navy); color: var(--navy); }
.cb-cs-tab:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.cb-cs-tab[aria-selected="true"],
.cb-cs-tab[aria-selected="true"]:hover { background: var(--navy); border-color: var(--navy); color: var(--white); }

/* ---- panels ---- */
.cb-cs-stage { position: relative; max-width: 1232px; margin: 0 auto; }
/* minmax(0, …) + anywhere: a long URL or word in the text wraps instead of sizing the grid
   track to it and pushing the section past a phone screen */
.cb-cs-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.cb-cs-text { min-width: 0; overflow-wrap: anywhere; }
.cb-cs-panel + .cb-cs-panel { margin-top: 72px; }              /* no-JS: stacked */
.cb-cruise_styles.is-tabs .cb-cs-panel + .cb-cs-panel { margin-top: 0; }
.cb-cs-panel[hidden] { display: none; }                         /* .two-col's display:grid would beat the UA rule */
.cb-cs-panel:focus-visible { outline: 2px solid var(--navy); outline-offset: 8px; }

.cb-cs-heading {
  font-family: var(--serif); font-weight: 400;
  font-size: 40px; line-height: 48px; letter-spacing: -0.02em;
  color: var(--ink); margin-bottom: 24px; max-width: 560px;
}
.cb-cs-body a { text-decoration: underline; text-underline-offset: 2px; }
.cb-cs-body ol { list-style: decimal; padding-left: 22px; margin: 0 0 24px; max-width: 560px; }
.cb-cs-body > :last-child { margin-bottom: 0; }
.cb-cs-body + .btns { margin-top: 32px; }

.cb-cs-media img { aspect-ratio: 3 / 2; }

/* a panel without an image: one centred column */
.cb-cs-panel.cb-cs-noimg { grid-template-columns: minmax(0, 1fr); text-align: center; }
.cb-cs-noimg .cb-cs-heading, .cb-cs-noimg p, .cb-cs-noimg ul, .cb-cs-noimg ol { margin-left: auto; margin-right: auto; }
.cb-cs-noimg ul, .cb-cs-noimg ol { text-align: left; }
.cb-cs-noimg .btns { justify-content: center; }
/* an image with no text: one centred frame */
.cb-cs-panel.cb-cs-onlyimg { grid-template-columns: minmax(0, 1fr); }
.cb-cs-onlyimg .cb-cs-media { width: 100%; max-width: 760px; margin: 0 auto; }

/* ---- the swap: outgoing panel lifts out (absolute) and fades while the incoming one
   fades in; the stage eases between the two heights. Motion-gated: reduced-motion
   visitors get an instant swap (the JS skips these classes too). ---- */
.cb-cs-stage.is-swapping { overflow: hidden; }
.cb-cs-panel.is-leaving { position: absolute; top: 0; left: 0; right: 0; pointer-events: none; }
.cb-cs-panel.is-leaving, .cb-cs-panel.is-entering { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .cb-cs-stage.is-swapping { transition: height .45s cubic-bezier(.22, .61, .36, 1); }
  .cb-cs-panel { transition: opacity .45s ease; }
}

/* ---- image side: Right (default) is the text-left, image-right panel above; Left puts the
   image first. Stacked (tablet/phone) the image already leads, so both sides look the same. ---- */
.cb-cruise_styles.cb-img-left .cb-cs-media { order: -1; }

/* ---- backgrounds (white is the look above) ---- */
/* light blue: the sand tab outline turns thinned navy (it read beige on blue), and the navy
   button, whose hover sweep is light blue too, keeps its edge with a navy ring (the Classic
   voyage cards' treatment, .cp-vbody .pill-navy) */
.cb-cruise_styles.cb-bg-water .cb-cs-tab { border-color: rgba(80, 109, 133, .45); }
.cb-cruise_styles.cb-bg-water .cb-cs-tab:hover,
.cb-cruise_styles.cb-bg-water .cb-cs-tab[aria-selected="true"] { border-color: var(--navy); }
.cb-cruise_styles.cb-bg-water .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;
}
.cb-cruise_styles.cb-bg-water .pill-navy:hover { outline-color: var(--navy); }
/* that ring's transparent outline would also hide the keyboard focus ring: give it back */
.cb-cruise_styles.cb-bg-water .pill-navy:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
/* navy: the Classic navy bands' type (pale title as .cp-enquire / .cp-band-text, white
   heading and copy); the PHP swaps in the light-blue pill and the light caption. The tabs turn
   white outlines and the chosen one a white pill, like the enquiry form's badges. */
.cb-cruise_styles.cb-dark .serif-title { color: #c9d6e2; color: color-mix(in srgb, var(--water) 84%, var(--navy)); }
.cb-cruise_styles.cb-dark .cb-cs-heading { color: var(--white); }
.cb-cruise_styles.cb-dark .cp-intro { color: rgba(255, 255, 255, .88); }
.cb-cruise_styles.cb-dark .cb-cs-body p,
.cb-cruise_styles.cb-dark .cb-cs-body li { color: rgba(255, 255, 255, .92); }
.cb-cruise_styles.cb-dark .cb-cs-body a { color: var(--white); }
.cb-cruise_styles.cb-dark .cb-cs-tab { border-color: rgba(255, 255, 255, .55); color: rgba(255, 255, 255, .92); }
.cb-cruise_styles.cb-dark .cb-cs-tab:hover { border-color: var(--white); color: var(--white); }
.cb-cruise_styles.cb-dark .cb-cs-tab[aria-selected="true"],
.cb-cruise_styles.cb-dark .cb-cs-tab[aria-selected="true"]:hover { background: var(--white); border-color: var(--white); color: var(--navy); }
.cb-cruise_styles.cb-dark .cb-cs-tab:focus-visible,
.cb-cruise_styles.cb-dark .cb-cs-panel:focus-visible { outline-color: var(--white); }
.cb-cruise_styles.cb-dark .pill-water:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }   /* site.css's hover ring blanks it */

@media (max-width: 900px) {
  .cb-cruise_styles { padding: 64px 0; }
  .cb-cs-head { margin-bottom: 28px; }
  .cb-cs-tabs { margin-bottom: 36px; }
  .cb-cs-panel { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .cb-cs-panel + .cb-cs-panel { margin-top: 56px; }
  .cb-cs-media { order: -1; }                                   /* image leads when stacked */
  .cb-cs-heading { font-size: 32px; line-height: 40px; margin-bottom: 18px; }
}
@media (max-width: 560px) {
  .cb-cs-tabs { gap: 8px; }
  .cb-cs-tab { min-height: 36px; padding: 8px 16px; font-size: 12px; letter-spacing: .1em; white-space: normal; }
  .cb-cs-text .pill-navy,
  .cb-cs-text .pill-water { white-space: normal; }              /* full-width CTA: a long label wraps */
}