/* ============================================================
   post.css — TRAVEL JOURNAL ARTICLE (post) page-specific styles.
   Shared chrome + post-cards + primitives in /site.css.
   ============================================================ */

/* ---- ARTICLE HEAD ---- */
.art-head { padding: 130px 0 34px; text-align: center; }
.art-head h1 { max-width: 880px; margin: 0 auto; }   /* GLOB-02: size rides the h1 token (was a verbatim 80/88 restatement) */
.art-banner img { width: 100%; height: 640px; object-fit: cover; display: block; }
.art-cap {
  max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto;
  padding: 10px var(--pad) 0; font-size: 12px; line-height: 16px; color: var(--cap);
}
.art-cap .dot { color: var(--teal); }

/* ---- ARTICLE BODY ---- */
.article { padding: 48px 0 100px; }
.art-text { max-width: 808px; margin: 0 auto; }
/* GLOB-02: size rides the h2 token (54/64) — the page's 56/64 was cut under the old
   80px article h1 and would now sit within 8px of it. */
.art-text h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em; color: var(--ink); margin: 108px 0 24px; }
/* the imported posts also carry h3/h4 titles (the design template only used h2) */
.art-text h3 { font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 42px; letter-spacing: -0.02em; color: var(--ink); margin: 56px 0 18px; }
.art-text h4 { font-family: var(--sans); font-weight: 700; font-size: 17px; line-height: 25px; color: var(--ink); margin: 40px 0 14px; }
.art-text .bold { font-weight: 700; font-size: 15px; color: var(--ink); margin-bottom: 16px; }
.art-text p { color: var(--ink-soft); font-size: 15px; line-height: 26px; margin-bottom: 16px; }
/* classic-editor image rows: two inline imgs in one <p> — the global img reset
   (display:block) stacked them; restore the row like the live site */
.art-text p > img { display: inline-block; vertical-align: top; margin: 6px 10px 8px 0; }
/* classic alignments */
.art-text img.aligncenter, .art-text .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.art-text img.alignleft { float: left; margin: 6px 18px 10px 0; }
/* lists (the global reset strips markers' indent) */
.art-text ul, .art-text ol { padding-left: 22px; margin-bottom: 16px; }
.art-text li { color: var(--ink-soft); font-size: 15px; line-height: 26px; margin-bottom: 6px; }
/* embeds (YouTube) */
.art-text .wp-block-embed { margin: 30px 0; }
.art-text .wp-block-embed iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 2px; }
/* imported buttons read as CTA links — strip the core button chrome (WP's
   global-styles inline CSS paints .wp-element-button) so art-link shows through */
.art-text a.wp-block-button__link {
  /* !important: WP's preset colour classes (has-x-color) are themselves !important */
  background: none !important; color: var(--navy) !important;
  padding: 0 !important; border: 0; border-radius: 0;
  font-size: 15px; text-decoration: none;
}
.art-text .wp-block-buttons, .art-text .wp-block-button { margin: 8px 0 16px; }
/* the live site's dark buttons wrapped their label in a white <mark> — on our
   white article column that's invisible; inherit the link colour instead
   (WP's preset .has-white-color is itself !important) */
.art-text mark.has-white-color { color: inherit !important; background: none !important; }
/* a columns wrapper left empty (e.g. its lead image was the banner dup) is dead space */
.art-text .wp-block-columns:not(:has(.wp-block-column > *)) { display: none; }

/* full-width media rows */
.art-media { margin: 60px 0 16px; }
.art-row { display: grid; gap: 24px; }
.art-row.cols-2 { grid-template-columns: 1fr 1fr; }
.art-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.art-row figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.art-row.cols-2 figure img { aspect-ratio: 3 / 2; }
.art-row figcaption { margin-top: 10px; font-size: 12px; line-height: 16px; color: var(--cap); }
.art-row figcaption .dot { color: var(--teal); }
.art-single img { width: 100%; aspect-ratio: 1232 / 770; object-fit: cover; display: block; }
.art-single figcaption { margin-top: 10px; font-size: 12px; line-height: 16px; color: var(--cap); }

/* ---- CRUISE LIST ---- */
.cruise-item { display: grid; grid-template-columns: 420px 1fr; gap: 48px; align-items: center; margin-bottom: 64px; }
.cruise-item img { width: 100%; aspect-ratio: 380 / 256; object-fit: cover; }
.cruise-name { font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 42px; color: var(--ink); margin-bottom: 10px; }
.cruise-meta { font-size: 13px; color: var(--ink); font-weight: 600; margin-bottom: 6px; }
.cruise-ship { font-size: 13px; color: var(--cap); margin-bottom: 16px; }
.cruise-item p { color: var(--ink-soft); font-size: 15px; line-height: 24px; }

/* ---- PLAN box ---- */
.plan-box { max-width: 808px; margin: 30px auto 0; background: var(--sand); border-radius: 12px; padding: 38px 44px; }
.plan-box .bold { font-weight: 700; font-size: 15px; color: var(--ink); margin-bottom: 16px; }
.plan-box p { color: var(--ink-soft); font-size: 15px; line-height: 25px; margin-bottom: 18px; }
.plan-box .pill-navy { margin-top: 6px; }

/* ---- SPEAK CTA ---- */
.speak { padding: 110px 0 120px; text-align: center; }
.speak h2 { font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 48px; color: var(--ink); margin-bottom: 30px; }
.speak-phones { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 18px; }
.phone-pill {
  display: inline-flex; align-items: center;
  border: 1px solid #c6d0d8; border-radius: 999px; padding: 14px 26px;
  font-size: 15px; color: var(--navy);
  position: relative; overflow: hidden; isolation: isolate;
  transition: color .35s ease, border-color .3s ease, box-shadow .35s ease;
}
/* the house CTA sweep, in the band's own key: navy panel wipes across, label
   flips white, soft shadow blooms — the whole pill is the tel: link */
.phone-pill::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--navy);
  transform: translateX(-115%) skewX(-12deg);
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
@media (hover: hover) and (pointer: fine) {
  .phone-pill:hover { color: var(--white); border-color: var(--navy); box-shadow: 0 14px 26px -16px rgba(20, 36, 50, .5); }
  .phone-pill:hover::before { transform: translateX(0) skewX(0); }
}
/* as the sweep lands, an underline wipes in under the label, holds a beat,
   then exits to the right — one pass per hover */
.phone-pill::after {
  content: ""; position: absolute; left: 26px; right: 26px; bottom: 12px; height: 1.5px;
  background: currentColor; opacity: .9; pointer-events: none;
  transform: scaleX(0); transform-origin: left center;
}
@media (hover: hover) and (pointer: fine) {
  .phone-pill:hover::after { animation: tc-pill-underline .85s cubic-bezier(.22, .61, .36, 1) forwards; }
}
@keyframes tc-pill-underline {
  0% { transform: scaleX(0); transform-origin: left center; }
  45% { transform: scaleX(1); transform-origin: left center; }
  58% { transform: scaleX(1); transform-origin: right center; }
  100% { transform: scaleX(0); transform-origin: right center; }
}
@media (prefers-reduced-motion: reduce) { .phone-pill::before { transition: none; } .phone-pill:hover::after { animation: none; } }
.speak-email { font-size: 14px; color: var(--ink-soft); }
.speak-email a { color: var(--navy); text-decoration: none; position: relative; }
.speak-email a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: right center;
  transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}
@media (hover: hover) and (pointer: fine) {
  .speak-email a:hover::after { transform: scaleX(1); transform-origin: left center; }
}

/* ---- GET INSPIRED (water band, shared .post cards) ---- */
.inspired { background: var(--water); padding: 76px 0 90px; text-align: center; }
.inspired .serif-title { margin-bottom: 14px; }
.inspired .insp-sub { color: var(--ink-soft); font-size: 17px; margin-bottom: 24px; }
.inspired .pill-navy { margin-bottom: 48px; }
/* the pill's water sweep lands on the band's own water — the ring keeps its edge
   (same convention as .band-navy .pill-water in site.css) */
.inspired .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;
}
.inspired .pill-navy:hover { outline-color: var(--navy); }
.inspired .post-grid { text-align: left; }

/* ---- Imported live-site article markup ----
   Genesis spacer/divider blocks arrive without their plugin CSS, so the bare
   <hr> painted as a box; on the live site they read as pure whitespace — keep
   that (the inline height on the hr is the intended gap). */
.art-text .wp-block-genesis-blocks-gb-spacer hr,
.art-text .gb-block-spacer hr { border: 0; background: none; margin: 0; }

/* Block galleries: the journal treatment — two-up grid, caption on the image
   over the house gradient (the live site's layout, our styling). */
.art-text .wp-block-gallery {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 34px 0;
}
.art-text .wp-block-gallery.columns-1 { grid-template-columns: 1fr; }
.art-text .wp-block-gallery.columns-3 { grid-template-columns: repeat(3, 1fr); }
.art-text .wp-block-gallery .wp-block-image {
  position: relative; margin: 0; overflow: hidden; border-radius: 2px;
}
/* a one-image "gallery" is really a full-width figure */
.art-text .wp-block-gallery .wp-block-image:only-of-type { grid-column: 1 / -1; }
.art-text .wp-block-gallery .wp-block-image img {
  width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block;
}
.art-text .wp-block-gallery .wp-block-image figcaption {
  position: absolute; inset: auto 0 0 0; padding: 46px 18px 14px; margin: 0;
  background: linear-gradient(180deg, rgba(15, 15, 15, 0) 0%, rgba(15, 15, 15, .78) 100%);
  color: var(--white); font-size: 14px; line-height: 20px; text-align: center;
}
.art-text .wp-block-gallery > figcaption {
  grid-column: 1 / -1; color: var(--ink-soft); font-size: 14px; text-align: left;
}
@media (max-width: 640px) {
  .art-text .wp-block-gallery,
  .art-text .wp-block-gallery.columns-3 { grid-template-columns: 1fr; }
}

/* Standalone article images: the global reset strips the default figure
   margins, leaving copy glued to the photo. (Gallery tiles override to 0.) */
.art-text figure.wp-block-image { margin: 30px 0 22px; }
.art-text figure.wp-block-image img { width: 100%; height: auto; display: block; border-radius: 2px; }
.art-text figure.wp-block-image figcaption { margin-top: 10px; font-size: 12px; line-height: 16px; color: var(--cap); }

/* Core columns (no core CSS loaded): honour the row layout the live site shows.
   The live import's columns carry no is-stacked-on-mobile, so they stay side by
   side at every width — matching production. */
.art-text .wp-block-columns { display: flex; flex-wrap: nowrap; gap: 24px; align-items: flex-start; margin: 30px 0 22px; } /* nowrap: WP global styles wrap 50%+50%+gap */
.art-text .wp-block-columns .wp-block-column { flex: 1; min-width: 0; }
.art-text .wp-block-column figure.wp-block-image { margin: 0; }

/* Standalone link paragraphs ("Discover more") read as proper links */
.art-text a.art-link { color: var(--navy); font-weight: 500; position: relative; text-decoration: none; }
.art-text a.art-link u, .art-text a.art-link strong { text-decoration: none; } /* the import underlines via literal <u> */
/* the nav's wipe-through underline: in from the left on hover, out to the right */
.art-text a.art-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: right center;
  transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}
@media (hover: hover) and (pointer: fine) {
  .art-text a.art-link:hover::after { transform: scaleX(1); transform-origin: left center; }
}
.art-text a.art-link::before {
  content: ""; display: inline-block; width: 11px; height: 11px; margin-right: 6px;
  background-color: currentColor; vertical-align: -1px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6.80625 0.464063C6.92344 0.182813 7.19766 0 7.5 0H11.25C11.6648 0 12 0.335156 12 0.75V4.5C12 4.80234 11.8172 5.07656 11.5359 5.19375C11.2547 5.31094 10.9336 5.24531 10.718 5.03203L9.375 3.68672L5.77969 7.27969C5.48672 7.57266 5.01094 7.57266 4.71797 7.27969C4.425 6.98672 4.425 6.51094 4.71797 6.21797L8.31328 2.625L6.97031 1.27969C6.75469 1.06406 6.69141 0.742969 6.80859 0.461719L6.80625 0.464063ZM0 4.125C0 3.08906 0.839062 2.25 1.875 2.25H3.75C4.16484 2.25 4.5 2.58516 4.5 3C4.5 3.41484 4.16484 3.75 3.75 3.75H1.875C1.66875 3.75 1.5 3.91875 1.5 4.125V10.125C1.5 10.3313 1.66875 10.5 1.875 10.5H7.875C8.08125 10.5 8.25 10.3313 8.25 10.125V8.25C8.25 7.83516 8.58516 7.5 9 7.5C9.41484 7.5 9.75 7.83516 9.75 8.25V10.125C9.75 11.1609 8.91094 12 7.875 12H1.875C0.839062 12 0 11.1609 0 10.125V4.125Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6.80625 0.464063C6.92344 0.182813 7.19766 0 7.5 0H11.25C11.6648 0 12 0.335156 12 0.75V4.5C12 4.80234 11.8172 5.07656 11.5359 5.19375C11.2547 5.31094 10.9336 5.24531 10.718 5.03203L9.375 3.68672L5.77969 7.27969C5.48672 7.57266 5.01094 7.57266 4.71797 7.27969C4.425 6.98672 4.425 6.51094 4.71797 6.21797L8.31328 2.625L6.97031 1.27969C6.75469 1.06406 6.69141 0.742969 6.80859 0.461719L6.80625 0.464063ZM0 4.125C0 3.08906 0.839062 2.25 1.875 2.25H3.75C4.16484 2.25 4.5 2.58516 4.5 3C4.5 3.41484 4.16484 3.75 3.75 3.75H1.875C1.66875 3.75 1.5 3.91875 1.5 4.125V10.125C1.5 10.3313 1.66875 10.5 1.875 10.5H7.875C8.08125 10.5 8.25 10.3313 8.25 10.125V8.25C8.25 7.83516 8.58516 7.5 9 7.5C9.41484 7.5 9.75 7.83516 9.75 8.25V10.125C9.75 11.1609 8.91094 12 7.875 12H1.875C0.839062 12 0 11.1609 0 10.125V4.125Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Media & text rows (core block, arrives without core's CSS): media beside the
   copy as on the live site, stacking with a gap on phones. */
.art-text .wp-block-media-text {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px;
  align-items: center; margin: 34px 0;
  /* the prose column stays 808px (the design), but 388px halves read squished —
     these rows break out to the live site's media scale, centred on the column */
  width: min(1080px, 92vw);
  position: relative; left: 50%; transform: translateX(-50%);
}
.art-text .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media { order: 2; }
.art-text .wp-block-media-text__media { margin: 0; }
.art-text .wp-block-media-text__media img { width: 100%; height: auto; display: block; border-radius: 2px; }
.art-text .wp-block-media-text__content > :first-child { margin-top: 0; }
.art-text .wp-block-media-text__content > :last-child { margin-bottom: 0; }
@media (max-width: 640px) {
  .art-text .wp-block-media-text { grid-template-columns: 1fr; }
  .art-text .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media { order: 0; }
  .art-text .wp-block-media-text__content { margin-top: 16px; }
}

@media (max-width: 900px) {
  /* GLOB-02: head h1 + body h2 sizes ride the mobile tokens (44/52, 36/44) */
  .art-text { max-width: 100%; }
  .art-text h2 { margin-top: 56px; } /* the desktop 108px band reads as a hole on phones */
  .art-text h3 { margin-top: 40px; }
  .art-row.cols-2, .art-row.cols-3 { grid-template-columns: 1fr; }
  .cruise-item { grid-template-columns: 1fr; gap: 20px; }
}

/* ============================================================
   DESTINATION SINGLES — brand-coloured sections (--dest/--dest-pale
   set inline per destination from tc_destination_palette()).
   ============================================================ */
.dest-tint { color: var(--dest); }
/* the shared .inspired block is water-tinted on journal posts; white here */
.single-destination .inspired { background: var(--white); }
/* the page hero's CTA wears the destination colour too */
.single-destination .page-hero .pill-navy { background: var(--dest, var(--navy)); }

/* Our Top Picks: auto-advancing carousel of advisor slides, centred head */
.dest-picks { padding: 84px 0 60px; }
.dest-picks > .container > .serif-title { font-size: 54px; line-height: 62px; text-align: center; }
.dest-picks-sub { color: var(--ink-soft); font-size: 17px; line-height: 25px; max-width: 560px; margin: 14px auto 10px; text-align: center; }
.dpick-carousel { position: relative; margin-top: 46px; }
.dpick-slide { display: none; }
.dpick-slide.is-active { display: block; }
.dpick-dots { display: flex; justify-content: center; gap: 10px; }
/* one row: tinted arrow · dots · tinted arrow (the cruise-cards pattern, wearing
   the destination palette) */
.dpick-nav { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 34px; }
.ctrl-tint {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--dest, var(--navy)); position: relative; flex: none;
  transition: opacity .2s ease;
}
.ctrl-tint::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 10px; height: 10px;
  border-left: 2px solid var(--white); border-bottom: 2px solid var(--white);
  transform: translate(-40%, -50%) rotate(45deg);
}
.ctrl-tint-next::before { transform: translate(-60%, -50%) rotate(-135deg); }
.ctrl-tint:focus-visible { outline: 2px solid var(--dest, var(--navy)); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .ctrl-tint { transition: opacity .2s ease, scale .25s ease; }
  .ctrl-tint:hover { scale: 1.12; }
}
/* phones: the track becomes a native scroll-snap swipe row (all slides visible);
   arrows are desktop-only, dots stay and sync to the swipe */
@media (max-width: 900px) {
  .dpick-nav .ctrl-tint { display: none; }
  .dpick-track {
    display: flex; gap: 16px;
    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;
    margin: 0 calc(50% - 50vw); padding: 0 24px;   /* full-bleed gutter */
  }
  .dpick-track::-webkit-scrollbar { display: none; }
  .dpick-slide { display: block; flex: 0 0 88%; scroll-snap-align: center; }
  .dpick.two-col { grid-template-columns: 1fr; gap: 20px; }
  .dpick .media { order: -1; }
}
.dpick-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: color-mix(in srgb, var(--dest) 25%, transparent);
  transition: background .25s ease, scale .25s ease;
}
.dpick-dot.is-active { background: var(--dest); scale: 1.2; }
.dpick { align-items: center; gap: 64px; }
.dpick-text h3 { font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 42px; letter-spacing: -0.02em; margin-bottom: 12px; }
.dpick-sub { font-weight: 700; font-size: 15px; line-height: 22px; color: var(--ink); margin-bottom: 12px; }
.dpick-body { font-size: 16px; line-height: 25px; color: var(--ink-soft); }
.dpick .media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; border-radius: 2px; }
/* shared .reverse targets .content; our text columns have their own classes */
.ddisc.reverse .media { order: -1; }
@media (max-width: 900px) { .ddisc.reverse .media { order: 0; } }

/* Discover rows: text/image, then image/text */
.ddisc { margin-top: 46px; align-items: center; gap: 64px; }
.ddisc-text p { font-size: 16px; line-height: 25px; color: var(--ink); margin-bottom: 16px; }
.ddisc .media img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; display: block; border-radius: 2px; }

/* Discover band on the pale tint */
.dest-discover { background: var(--dest-pale); padding: 84px 0; margin-top: 50px; }
.dest-discover .serif-title { font-size: 54px; line-height: 62px; }

/* Pre-footer CTA: pale wash, colour-tinted heading + button (prod pattern) */
.ready.dest-cta { background: var(--dest-pale); }
.dest-cta .ready-text .serif-title { color: var(--dest); }
.dest-cta .ready-text p { color: var(--ink); }
.dest-cta .caption { color: var(--ink-soft); }
.pill-navy.dest-btn { background: var(--dest); }

/* Pre-footer Sign Up on the full-strength colour */
.dest-news { background: var(--dest); padding: 72px 0; }
.dest-news .news-row { padding-bottom: 0; }
.dest-news .serif-title { color: var(--white); font-size: 54px; line-height: 62px; margin-bottom: 10px; }
.dest-news-sub { color: rgba(255, 255, 255, .88); font-size: 16px; line-height: 24px; }
.dest-news .news-form input { background: var(--white); }
.pill-navy.dest-news-btn { background: var(--white); color: var(--dest); }
.dest-news-thanks { color: var(--white); font-size: 18px; }

/* CTA hovers sweep to the destination's own pale tint, not the site-wide water */
.single-destination .page-hero .pill-navy::before,
.pill-navy.dest-btn::before,
.pill-navy.dest-news-btn::before { background: var(--dest-pale); }
.single-destination .page-hero .pill-navy:hover,
.pill-navy.dest-btn:hover,
.pill-navy.dest-news-btn:hover { color: var(--dest); }
/* on light backgrounds the pale sweep would melt into the page — the band-ring
   convention (see .band-navy .pill-water in site.css) in the destination colour */
.single-destination .page-hero .pill-navy,
.pill-navy.dest-btn {
  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;
}
.single-destination .page-hero .pill-navy:hover,
.pill-navy.dest-btn:hover { outline-color: var(--dest); }

/* the footer's own black newsletter row would double up here — this page has its own */
.single-destination .footer .news-row { display: none; }

@media (max-width: 900px) {
  .dest-picks > .container > .serif-title, .dest-discover .serif-title, .dest-news .serif-title { font-size: 38px; line-height: 46px; }
  .dpick, .ddisc { gap: 28px; }
  .ddisc { margin-top: 36px; }
  .dest-discover-body { columns: 1; }
  .dest-discover { padding: 60px 0; }
}

/* ============================================================
   GLOB-03 — MOBILE SECTION RHYTHM (article + destination singles).
   The article bands had no phone-scale padding override (the speak CTA's
   110/120px and the head's 130px top — sized for the ~130px desktop
   header vs the ~66px mobile bar — carried onto phones). One rhythm
   ≤900px: standard sections 56-64px, title band 116px top (matches the
   events page-title precedent). Additive only — desktop rules untouched.
   ============================================================ */
@media (max-width: 900px) {
  .art-head { padding: 116px 0 26px; }
  .article { padding: 40px 0 64px; }
  .speak { padding: 64px 0 72px; }
  .inspired { padding: 56px 0 64px; }
  /* destination singles */
  .dest-picks { padding: 64px 0 48px; }
  /* kill the double-gap: 50px margin stacked on the previous band's bottom padding */
  .dest-discover { margin-top: 24px; }
  .dest-news { padding: 56px 0; }
}

/* ============================================================
   R2-DEST-01 — DESTINATION BANNER CROP.
   site.css renders `.banner img { width: 100%; height: auto }`, so each
   destination inherited its own file's aspect ratio. Europe / Africa &
   The Middle East / Antarctica ship the design's 1440x481 (2.99:1), but
   The Americas (1920x1080), Asia & The Pacific (1600x900) and Australia
   (2560x1700) are 1.78-1.51:1 and towered over them — 720px tall on a
   1280px viewport against Europe's 428px. Cap the band to the design
   ratio and let object-fit crop, so any future upload lands the same
   height whatever its native shape. Scoped to the destination single so
   the journal (.art-banner) and the .banner on contact / pricing /
   terms / privacy are untouched. No phone override: at 390px this is a
   130px strip, which is exactly what Europe already renders there —
   easing the ratio would move a page the client did not raise.
   ============================================================ */
body.single-destination .banner img {
  aspect-ratio: 1440 / 481;
  height: auto;
  object-fit: cover;
  object-position: center;
}