/* R10-CAMP-01 · Guide download section. Jolee's wireframe boxes the whole block in a thin
   frame: image left, title + short text + Download pill right. Image frame and type scale
   follow the Classic guide band (.cp-guide); on white, so the pill is the navy one.
   The section colour comes from the shared bg-white / bg-sand / bg-water / band-navy classes. */
.cb-guide { padding: 80px 0; }
.cb-guide-box {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center;
  max-width: 1232px; margin: 0 auto; padding: 40px;
  border: 1px solid rgba(80, 109, 133, .45);   /* --navy, thinned */
  border-radius: var(--cb-card-radius, 8px);
}
/* on a coloured background: a white box, no frame; its text keeps the page ink (band-navy
   turns the section's text white) */
.cb-guide:not(.cb-bg-white) .cb-guide-box { background: var(--white); border-color: transparent; color: var(--ink); }
.cb-guide-media img { aspect-ratio: 572 / 500; border-radius: 2px; }   /* the site's image corner (journal, posts) */
.cb-guide-text { overflow-wrap: anywhere; }   /* a long URL or word wraps inside the box */
.cb-guide-text .serif-title { margin-bottom: 22px; }
.cb-guide-text .cb-body { font-size: 15px; line-height: 23px; color: var(--ink-soft); max-width: 560px; }
.cb-guide-text .cb-body p,
.cb-guide-text .cb-body ul,
.cb-guide-text .cb-body ol,
.cb-guide-text .cb-body blockquote { margin-bottom: 20px; }
.cb-guide-text .cb-body ul,
.cb-guide-text .cb-body ol { padding-left: 22px; }
.cb-guide-text .cb-body a { text-decoration: underline; text-underline-offset: 3px; }
.cb-guide-text .btns { margin-top: 12px; }
/* no button: the last line sits on the box padding, not on its own bottom margin */
.cb-guide-text > :last-child,
.cb-guide-text > .cb-body:last-child > :last-child { margin-bottom: 0; }
/* a long label ("Download the Insider's Guide…") wraps instead of running out of the box */
.cb-guide .pill-navy { white-space: normal; max-width: 100%; text-align: center; justify-content: center; }

/* no image: the text centres in a narrower box */
.cb-guide-box.cb-guide-noimg { grid-template-columns: minmax(0, 1fr); max-width: 900px; text-align: center; }
.cb-guide-noimg .cb-body { margin: 0 auto; }
.cb-guide-noimg .btns { justify-content: center; }
/* an image with no text or button: one frame, the box hugging it (572px image + padding) */
.cb-guide-box.cb-guide-onlyimg { grid-template-columns: minmax(0, 1fr); max-width: 652px; }

/* Image side Right: text first on desktop; stacked (900px and under) the image stays on top */
.cb-guide.cb-img-right .cb-guide-media { order: 2; }

@media (max-width: 900px) {
  .cb-guide.cb-img-right .cb-guide-media { order: 0; }
  .cb-guide { padding: 56px 0; }
  .cb-guide-box { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 28px; }
}
@media (max-width: 560px) {
  .cb-guide { padding: 48px 0; }
  .cb-guide-box { padding: 20px; gap: 24px; }
}