/* R10-CAMP-01 · Voyages ("In the Spotlight"): the Classic voyage card (.cp-vbody type,
   campaign.css) in the shared .cpw carousel - 4 up on desktop, 3 on small laptops,
   2 + a peek on tablets, 1 + a peek on phones. Everything is scoped under .cb-voyages
   so the destination-card rules (3 up, 384/258 photos, centred 88% phone cards)
   never reach these cards. */

.cb-voyages { padding: 84px 0 96px; }
.cb-voyages .cp-head { margin-bottom: 44px; }
.cb-voyages .cp-head > :last-child { margin-bottom: 0; }

/* the bottom padding keeps the pills' hover shadow and focus ring inside the
   track's clip; tall cards must still let a vertical swipe scroll the page, and
   pinch-zoom must keep working (campaign.css's pan-x blocks both) */
.cb-voyages .cpw-track { gap: 32px; padding-bottom: 16px; touch-action: manipulation; }
.cb-voyages .cpw-nav { margin-top: 26px; }
.cb-voyages .cpw-card {
  flex: 0 0 calc((100% - 96px) / 4);
  min-width: 0;                /* long words / labels wrap instead of widening the card */
  overflow-wrap: anywhere;
  scroll-snap-align: start;
  display: flex; flex-direction: column;
}
/* fewer cards than fit: centre the row (auto margins collapse to 0 once it scrolls) */
.cb-voyages .cpw-card:first-child { margin-left: auto; }
.cb-voyages .cpw-card:last-child { margin-right: auto; }

/* logo + route float above the card on the section background; the card is the house
   light-blue voyage card (Classic .cp-voyage look) opening on the photo, with the date chip
   on its bottom edge, then price, EXCLUSIVE OFFER pill, savings lines */
.cb-vhead { padding: 0 8px 14px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.cb-vpanel {
  flex: 1 1 auto; display: flex; flex-direction: column;
  background: var(--water); color: var(--ink); text-align: center;
  border-radius: var(--cb-card-radius, 8px); overflow: hidden;
}
/* fixed logo box + one-line title box, so every card's photo starts on the same line (a title that wraps pushes its own photo down) */
.cb-voyages .cb-vlogo-img {
  width: auto; height: 40px; max-width: 70%;
  aspect-ratio: auto; object-fit: contain;
}
.cb-vbrand {
  min-height: 40px; display: flex; align-items: center;
  font-size: 13px; line-height: 18px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--navy);
}
.cb-vbrand-gap { display: block; height: 40px; }
.cb-vtitle-gap { display: block; height: 25px; }   /* no route on this card, one on another: one title line */
.cb-voyages .cb-vtitle { min-height: 25px; display: flex; align-items: center; justify-content: center; font-size: 19px; line-height: 25px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin: 0; }
.cb-vmedia { position: relative; }
.cb-vmedia.has-date { margin-bottom: 20px; }
.cb-voyages .cb-vimg { width: 100%; aspect-ratio: 384 / 252; object-fit: cover; display: block; }
.cb-vimg-empty { background: #d3dee8; }
.cb-vdate {
  position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%);
  max-width: calc(100% - 28px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 5px 14px; border-radius: 999px;
  background: var(--white); color: var(--navy);
  box-shadow: 0 1px 4px rgba(26, 26, 26, .12);
  font-size: 13px; line-height: 18px; font-weight: 600;
}
/* no photo on any card: the card opens on its text, the date a plain pill at the top */
.cb-vpanel.no-media { padding-top: 12px; }
.cb-vdate.is-plain { position: static; transform: none; align-self: center; margin: 8px 0 0; box-shadow: none; }
.cb-vbody { flex: 1 1 auto; padding: 12px 22px 14px; }
.cb-vprice { font-size: 17px; line-height: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin: 0; }
.cb-vdesc { font-size: 15px; line-height: 24px; color: var(--ink-soft); margin: 10px 0 0; }
.cb-vdesc:first-child { margin-top: 0; }   /* no price above it */
/* EXCLUSIVE OFFER: a white pill with red text (Pete's DevTools values, 28 Sep) */
.cb-voffer-tag {
  align-self: center; max-width: calc(100% - 28px); margin: auto 0 0;   /* auto: stays level with its neighbours when a card has no price */
  padding: 4px min(44px, 11%); white-space: nowrap;   /* 44px sides on wide cards, less on the 4-up / phone cards: one line */
  border: 1.5px solid var(--white); border-radius: 999px; background: var(--white);
  font-size: 18px; line-height: 22px; font-weight: 600; letter-spacing: .04em;
  color: var(--woodfire); text-transform: uppercase;
}
/* auto: with the pill cleared, the offer lines take its place at the foot of the card */
.cb-voffer { margin: auto 0 0; padding: 12px 22px 30px; font-size: 16px; line-height: 27px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.cb-voffer-tag + .cb-voffer { margin-top: 0; }

/* the Enquire pill under each card; a long custom label wraps inside the card */
.cb-vcta { display: flex; justify-content: center; margin-top: 20px; }
.cb-vcta .pill-navy { max-width: 100%; white-space: normal; text-align: center; justify-content: center; }

/* ---- section backgrounds (Background option: white, sand, light blue; no navy, the
   cruise-line logos are dark). White is the look above; sand needs nothing. ----
   light blue: the light-blue card turns white, and the white date chip and offer pill turn
   light blue so they keep their shape on it */
.cb-voyages.cb-bg-water .cb-vpanel { background: var(--white); }
.cb-voyages.cb-bg-water .cb-vdate { background: var(--water); }
.cb-voyages.cb-bg-water .cb-voffer-tag { background: var(--water); border-color: var(--water); }
/* the Enquire pill's light-blue hover sweep would melt into the section: a navy ring keeps
   its edge (as .cb-offer .pill-navy on the light-blue offer cards) */
.cb-voyages.cb-bg-water .cb-vcta .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-voyages.cb-bg-water .cb-vcta .pill-navy:hover { outline-color: var(--navy); }
.cb-voyages.cb-bg-water .cb-vcta .pill-navy:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

@media (max-width: 1200px) {
  .cb-voyages .cpw-card { flex-basis: calc((100% - 64px) / 3); }
}
@media (max-width: 900px) {
  .cb-voyages { padding: 64px 0; }
  .cb-voyages .cp-head { margin-bottom: 32px; }
  /* full-bleed swipe row (campaign.css) lined up with the page gutter */
  .cb-voyages .cpw-track {
    gap: 16px; padding: 0 var(--gutter) 16px;
    scroll-padding-inline: var(--gutter);
  }
  .cb-voyages .cpw-card { flex: 0 0 calc((100% - 32px) / 2.2); scroll-snap-align: start; }
  .cb-voyages .cpw-nav { margin-top: 16px; }
  .cb-voyages .cpw-nav .ctrl-arrow { display: block; }
}
@media (max-width: 600px) {
  .cb-voyages .cpw-card { flex-basis: calc((100% - 16px) / 1.2); }
  .cb-voyages .cpw-nav .ctrl-arrow { display: none; }
  .cb-vhead { padding: 0 6px 12px; }
}

/* Card image shape (section option): Portrait for tall designed cards, Original = uncropped */
.cb-voyages.cb-vshape-portrait .cb-vimg { aspect-ratio: 4 / 5; }
.cb-voyages.cb-vshape-original .cb-vimg { aspect-ratio: auto; height: auto; object-fit: contain; }
.cb-voyages.cb-vshape-original .cb-vimg-empty { aspect-ratio: 4 / 5; }

/* a card with only an image (no date, price, text or offer): no light-blue box, so shorter
   images in a row of Original-shape artwork don't leave a strip of it showing underneath */
.cb-voyages .cb-vpanel.img-only,
.cb-voyages.cb-bg-water .cb-vpanel.img-only { background: transparent; }