/* ============================================================
   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 { font-size: 80px; line-height: 88px; max-width: 880px; margin: 0 auto; }
.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; }
.art-text h2 { font-family: var(--serif); font-weight: 400; font-size: 56px; line-height: 64px; 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) {
  .art-head h1 { font-size: 48px; line-height: 56px; }
  .art-text { max-width: 100%; }
  .art-text h2 { margin-top: 56px; font-size: 38px; line-height: 46px; } /* 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; margin-top: 34px; }
.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; }
}