/* R10-CAMP-01 · Image + text section. A Large image IS the Classic look (.cp-newera white,
   .cp-collection navy, both styled in pages/campaign.css); this file only adds the rich-text
   body, the Small image layout, the image-only / text-only fallbacks and the light-blue
   background's button ring. Sand and light blue are .cp-newera on that colour (ink text
   reads on both as it does on white). */

/* a long URL or word wraps instead of widening the column (break-word would still size the
   grid track to it and push the section past a phone screen) */
.cb-image_text .cb-text { overflow-wrap: anywhere; }

/* rich text body: links read as links, lists keep their markers inside the column */
.cb-image_text .cb-body a { text-decoration: underline; text-underline-offset: 3px; }
.cb-image_text .cb-body ul,
.cb-image_text .cb-body ol { padding-left: 22px; margin: 0 0 24px; max-width: 560px; }
.cb-image_text .cb-body li { margin-bottom: 8px; }
.cb-image_text .cb-body blockquote { border-left: 2px solid currentColor; padding-left: 18px; margin: 0 0 24px; }
.cb-image_text.band-navy .cb-body li { font-size: 15px; line-height: 23px; color: rgba(255,255,255,.92); }

/* Small image (Jolee: "make this image smaller, so this section doesn't take much space"):
   the image takes a third of the row in a landscape frame, the text sits centred beside it,
   and the white version drops the Classic section's tall padding. Side by side down to
   tablet width, stacked on phones. */
.cb-image_text.cb-img-small .media img { aspect-ratio: 4 / 3; }
@media (min-width: 700px) {
  .cb-image_text.cb-img-small .two-col {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 56px; align-items: center;
  }
  .cb-image_text.cb-img-small.cb-img-right .two-col { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  /* image on the right: the text column's spare width goes to the outer edge, so the text sits 56px from its image as on the left */
  .cb-image_text.cb-img-small.cb-img-right .content,
  .cb-image_text.cb-img-small.cb-img-right .cp-band-text { justify-self: end; width: 100%; max-width: 560px; }
  .cb-image_text.cb-img-small .cp-band-text h3 { max-width: 560px; text-wrap: balance; }
  .cb-image_text.cb-img-small .content { padding-top: 0; }
}
@media (min-width: 700px) and (max-width: 900px) {
  .cb-image_text.cb-img-small .two-col { gap: 32px; }
}
@media (min-width: 901px) {
  .cb-image_text.cp-newera.cb-img-small { padding: 96px 0; }
  .cb-jumpnav + .cb-image_text.cp-newera.cb-img-small { padding-top: 56px; }
}

/* image only, or text only: one centred column (outranks the Small grid above) */
.cb-section.cb-image_text.cb-single .two-col { grid-template-columns: minmax(0, 1fr); max-width: 820px; }
.cb-image_text.cb-single .content { padding-top: 0; }
.cb-image_text.cb-img-small.cb-single .media { max-width: 420px; width: 100%; margin: 0 auto; }

/* a long button label wraps inside the column instead of pushing past it (short labels
   never reach the edge, so they stay on one line) */
.cb-image_text .pill-navy,
.cb-image_text .pill-white { white-space: normal; max-width: 100%; text-align: center; justify-content: center; }

/* light blue: the navy pill's hover sweep is light blue too and would melt into the section,
   so a navy ring keeps its edge (the Classic voyage cards' treatment, .cp-vbody .pill-navy) */
.cb-image_text.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-image_text.cb-bg-water .pill-navy:hover { outline-color: var(--navy); }
.cb-image_text.cb-bg-water .pill-navy:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* Medium: the Art of Arrival (navy band) frame on any background. Original: the whole image as
   uploaded, uncropped. Both keep the Large two-column layout. */
.cb-image_text.cb-img-medium .media img { aspect-ratio: 596 / 540; }
.cb-image_text.cb-img-original .media img { aspect-ratio: auto; height: auto; }
.cb-image_text.cb-img-original .two-col { align-items: center; }

/* Video instead of the image: fills the same frame as the image would */
.cb-image_text .cb-it-video { display: block; width: 100%; aspect-ratio: 596 / 745; object-fit: cover; }
.cb-image_text.cp-collection .cb-it-video,
.cb-image_text.cb-img-medium .cb-it-video { aspect-ratio: 596 / 540; }
.cb-image_text.cb-img-small .cb-it-video { aspect-ratio: 4 / 3; }
.cb-image_text.cb-img-original .cb-it-video { aspect-ratio: auto; height: auto; }