/* ============================================================
   DESTINATION (PORT) PAGE  — editorial blocks that wrap the tour grid
   Scoped under .destination-page. Reuses the site tokens and the exact
   conventions established on Groups / Partners:
     - Urbanist display headings, Work Sans body
     - --blue-* palette; white/gray section rhythm; navy for hero/CTA
     - gold accent reserved for navy sections only
     - shared eyebrow treatment (Work Sans 700 / 13px / .14em / blue-70)
     - card text: navy title + gray body, same sizes as the other pages
   ============================================================ */

.destination-page {
  /* Same gold as Partners/Groups; used only on navy grounds here. */
  --dp-gold: #C8A14B;
  --dp-gold-soft: #E4C878;
  /* Solid light blue-gray for secondary text on navy (no opacity washes). */
  --dp-navy-muted: #C9D1E6;
}

/* Shared eyebrow — identical to .pp-eyebrow / .gp-section-label. */
/* display:block — the global .h3/.h4 classes are inline-block, so an
   inline-block eyebrow would sit on the same line as the heading. */
.destination-page .dp-eyebrow {
  font-family: "Work Sans";
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-70);
  margin-bottom: 10px;
  display: block;
}
.destination-page .dp-eyebrow--gold { color: var(--dp-gold); }

/* ============================================================
   HERO — compact navy header (same scrim family as Partners)
   ============================================================ */
.destination-page .dp-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--blue-90) 0%, #1d2846 55%, var(--blue-80) 135%);
}
.destination-page .dp-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 1;
}
/* Same directional scrim recipe as Partners' .pp-hero::after (identical
   navy rgb + stops) — the photo stays at full brightness and the scrim
   alone carries the contrast, rather than pre-dimming the image with a
   flat opacity. Both heroes have left-aligned text, so the same
   left-heavy-to-clear direction applies here too. */
.destination-page .dp-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(29, 40, 70, 0.92) 0%,
    rgba(29, 40, 70, 0.88) 30%,
    rgba(29, 40, 70, 0.7) 48%,
    rgba(29, 40, 70, 0.4) 64%,
    rgba(29, 40, 70, 0.12) 82%,
    rgba(29, 40, 70, 0) 95%);
}
.destination-page .dp-hero-content {
  position: relative;
  z-index: 2;
  padding: clamp(32px, 5vw, 56px) 5% clamp(40px, 6vw, 64px);
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}
.destination-page .dp-hero-inner { max-width: 820px; }

/* Navy breadcrumb */
.destination-page .dp-breadcrumb {
  font-family: "Work Sans";
  font-size: 13px;
  color: var(--dp-navy-muted);
  margin-bottom: 18px;
}
.destination-page .dp-breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0;
}
.destination-page .dp-breadcrumb a { color: rgba(255, 255, 255, 0.85); text-decoration: none; }
.destination-page .dp-breadcrumb a:hover { color: var(--dp-gold-soft); }
.destination-page .dp-breadcrumb li::after {
  content: "/";
  margin-left: 8px;
  color: rgba(255, 255, 255, 0.4);
}
.destination-page .dp-breadcrumb li:last-child { color: var(--light-00); }
.destination-page .dp-breadcrumb li:last-child::after { content: ""; }

.destination-page .dp-hero h1 {
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
  color: var(--light-00);
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  max-width: 18ch;
}
.destination-page .dp-hero-sub {
  font-family: "Work Sans";
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.55;
  color: var(--dp-navy-muted);
  margin-top: 14px;
  max-width: 62ch;
}

/* Trust chips */
.destination-page .dp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.destination-page .dp-chip {
  font-family: "Work Sans";
  font-size: 13px;
  font-weight: 500;
  color: var(--light-00);
  padding: 7px 15px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 100px;
}
button.destination-page .dp-chip,
.destination-page button.dp-chip { cursor: pointer; }
.destination-page button.dp-chip:hover {
  border-color: var(--dp-gold-soft);
  color: var(--dp-gold-soft);
}

/* ============================================================
   SECTION SHELLS — white / gray rhythm (same as Partners)
   ============================================================ */
.destination-page .dp-section { padding: clamp(48px, 7vw, 80px) 0; }
.destination-page .dp-section--gray { background-color: var(--light-10); }
.destination-page .dp-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 5%;
  width: 100%;
}
.destination-page .dp-section-head { max-width: 720px; margin-bottom: 32px; }
/* Headings carry the global .h3 class (inline-block); force block so they
   always start on their own line under the eyebrow. */
.destination-page .dp-section-head h2,
.destination-page .dp-intro h2,
.destination-page .dp-package h2,
.destination-page .dp-groups-cta h2 { display: block; }
.destination-page .dp-section-head h2 {
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
  color: var(--blue-90);
  line-height: 1.2;
}

/* ============================================================
   QUICK PORT FACTS — flowing meta strip (the signature element)
   Same multi-column + column-rule technique as Travel Tips / Things
   To Do: each fact sizes to its own content and stacks top-to-bottom
   within its column, so a long value (Cruise Pier) never stretches its
   row-neighbors' boxes to match — the bug the old 3-col grid had,
   where short values (e.g. "English") sat in a box a third empty.
   column-rule also avoids the "orphaned divider" flexbox/grid borders
   get on the first item of a wrapped row.
   ============================================================ */
.destination-page .dp-facts {
  columns: 3;
  column-gap: 40px;
  column-rule: 1px solid var(--light-15);
}
.destination-page .dp-fact {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  padding-right: 16px;
  padding-bottom: 24px;
}
.destination-page .dp-fact-label {
  font-family: "Work Sans";
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--blue-70);
  margin-bottom: 6px;
}
.destination-page .dp-fact-value {
  font-family: "Work Sans";
  font-size: 15px;
  font-weight: 500;
  color: var(--blue-90);
  line-height: 1.4;
}

/* ============================================================
   DESTINATION INTRO — prose
   ============================================================ */
.destination-page .dp-intro { max-width: 760px; }
.destination-page .dp-intro h2 {
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
  color: var(--blue-90);
  font-size: clamp(22px, 2.5vw, 30px);
  line-height: 1.2;
  margin-bottom: 18px;
}
.destination-page .dp-intro p {
  font-family: "Work Sans";
  font-size: 16px;
  color: var(--dark-70);
  line-height: 1.7;
  margin: 0 0 14px;
}
.destination-page .dp-intro p:last-child { margin-bottom: 0; }

/* ============================================================
   TOP THINGS TO DO — a numbered, curated list (not a feature grid).
   "Top" implies editorial rank, so the number is honest, not decor —
   but the number alone doesn't fix genericness, so #1 (the port's
   signature attraction, per its own copy) gets a real featured
   treatment with a media slot; 02+ fall into a compact numbered list
   using the same two-column/divider technique as Travel Tips.
   ============================================================ */
.destination-page .dp-thing-num {
  flex: none;
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
  color: var(--blue-70);
}

/* --- Featured (#1) --- */
/* No photo asset — rather than a photo-shaped placeholder standing in for
   the missing image, the rank number itself sits directly on the page as
   large display type, top-aligned with the headline. Its size and weight
   alone carry the "featured" distinction from the 02+ list below. */
.destination-page .dp-thing-featured {
  display: flex;
  align-items: flex-start;
  gap: 48px;
  margin-bottom: 8px;
}
.destination-page .dp-thing-featured-num {
  flex: none;
  font-family: "Urbanist", sans-serif;
  font-weight: 800;
  font-size: clamp(72px, 8vw, 120px);
  line-height: 0.85;
  color: var(--blue-70);
}
.destination-page .dp-thing-featured-copy {
  flex: 1;
  min-width: 0;
  padding-bottom: 6px;
}
.destination-page .dp-thing-featured-copy h3 {
  font-family: "Urbanist", sans-serif;
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
  color: var(--blue-90);
  line-height: 1.2;
  margin-bottom: 12px;
}
.destination-page .dp-thing-featured-copy p {
  font-family: "Work Sans";
  font-size: 16px;
  color: var(--dark-70);
  line-height: 1.65;
  margin: 0;
  max-width: 46ch;
}

/* --- Compact numbered list (#2+), same column technique as Travel Tips --- */
.destination-page .dp-things-list {
  columns: 2;
  column-gap: 48px;
  column-rule: 1px solid var(--light-15);
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--light-15);
}
.destination-page .dp-thing {
  display: flex;
  gap: 14px;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  padding: 16px 0;
  border-bottom: 1px solid var(--light-15);
}
.destination-page .dp-thing:first-child { padding-top: 0; }
.destination-page .dp-thing:last-child { border-bottom: none; }
.destination-page .dp-thing .dp-thing-num {
  font-size: 15px;
  min-width: 24px;
}
.destination-page .dp-thing-copy { min-width: 0; }
.destination-page .dp-thing-copy h3 {
  font-family: "Work Sans";
  font-size: 15.5px;
  font-weight: 700;
  color: var(--blue-90);
  line-height: 1.3;
  margin-bottom: 4px;
}
.destination-page .dp-thing-copy p {
  font-family: "Work Sans";
  font-size: 14px;
  color: var(--dark-70);
  line-height: 1.6;
  margin: 0;
}

/* ============================================================
   MULTI-PORT PACKAGE CALLOUT — navy gradient card (gold eyebrow
   allowed here — the card itself is a navy ground). Differentiated
   from Groups Cross-sell (a full-bleed photo invitation) by the flat
   navy ground rather than photography.

   The route rail that used to sit alongside the copy — bundled ports
   stacked and joined by a dashed line — is gone along with its markup:
   nothing knew which ports a package actually covers, so the rail was
   filled with whichever ports the region grid returned and read as an
   itinerary the package didn't promise. The copy column now owns the
   full card width.
   ============================================================ */
.destination-page .dp-package {
  display: flex;
  align-items: stretch;
  gap: clamp(28px, 4vw, 56px);
  background: linear-gradient(135deg, var(--blue-90) 0%, var(--blue-80) 100%);
  border-radius: 20px;
  padding: clamp(28px, 4vw, 44px);
  color: var(--light-00);
}
.destination-page .dp-package-copy { flex: 1 1 auto; max-width: 760px; min-width: 0; }
.destination-page .dp-package .dp-eyebrow { color: var(--dp-gold); }
.destination-page .dp-package h2 {
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
  color: var(--light-00);
  line-height: 1.2;
  margin-bottom: 14px;
}
.destination-page .dp-package p {
  font-family: "Work Sans";
  font-size: 16px;
  color: var(--dp-navy-muted);
  line-height: 1.6;
  max-width: 620px;
  margin: 0 0 22px;
}
/* ============================================================
   GROUPS CROSS-SELL — same navy-card treatment as the package
   callout (the light blue-05 card read as too close to the FAQ/CTA
   chrome elsewhere; the photo card reads more like a real invitation).
   A cruise-group photo stands in for the navy flat fill, with the same
   directional scrim recipe as the hero (rgba(29,40,70,...), left-heavy
   to clear) so left-aligned text stays readable against the image.
   ============================================================ */
.destination-page .dp-groups-cta {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(100deg,
      rgba(29, 40, 70, 0.93) 0%,
      rgba(29, 40, 70, 0.88) 32%,
      rgba(29, 40, 70, 0.68) 52%,
      rgba(29, 40, 70, 0.38) 70%,
      rgba(29, 40, 70, 0.14) 88%,
      rgba(29, 40, 70, 0) 100%),
    url('/content/new/images/gt-card-2.png');
  background-size: cover;
  background-position: center;
  border-radius: 20px;
  padding: clamp(28px, 4vw, 44px);
  color: var(--light-00);
}
.destination-page .dp-groups-cta .dp-eyebrow { color: var(--dp-gold); }
.destination-page .dp-groups-cta h2 {
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
  color: var(--light-00);
  line-height: 1.2;
  margin-bottom: 14px;
}
.destination-page .dp-groups-cta p {
  font-family: "Work Sans";
  font-size: 16px;
  color: var(--dp-navy-muted);
  line-height: 1.6;
  max-width: 620px;
  margin: 0 0 22px;
}

/* ============================================================
   TRAVEL TIPS — a flat, two-column reference list (no card chrome).
   Deliberately distinct from the Things To Do cards above it: this is
   scannable local knowledge, not editorial content, so it reads like a
   field-notes sheet — CSS multi-column flow with a rule between
   columns, lead-in bold phrase instead of a separate heading.
   ============================================================ */
.destination-page .dp-tips {
  columns: 2;
  column-gap: 48px;
  column-rule: 1px solid var(--light-15);
  margin-top: 8px;
}
.destination-page .dp-tip {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0;
  padding: 18px 0;
  border-bottom: 1px solid var(--light-15);
  font-family: "Work Sans";
  font-size: 15px;
  color: var(--dark-70);
  line-height: 1.65;
}
.destination-page .dp-tip:first-child { padding-top: 0; }
.destination-page .dp-tip:last-child { border-bottom: none; }
.destination-page .dp-tip strong {
  color: var(--blue-90);
  font-weight: 700;
}

/* ============================================================
   FAQ — reuses shared _FAQ.cshtml (.hfq-*); white here to keep rhythm
   ============================================================ */
.destination-page .hfq-container-mod { background-color: var(--light-00); }

/* ============================================================
   NEARBY PORTS — Home's "Popular Cruise Destinations" pill (.hpd-tag)
   scaled up. Home's version is sized for a ~20-tag cloud; with only
   4-5 ports here that same size reads as sparse against the section's
   width. Same shape/colors, just sized to read as real navigation
   buttons — plus a chevron, since each one now carries enough weight
   to make "go to this port" explicit.
   ============================================================ */
.destination-page .dp-nearby-intro {
  font-family: "Work Sans";
  font-size: 16px;
  color: var(--dark-70);
  line-height: 1.6;
  max-width: 620px;
  margin: 0 0 24px;
}
.destination-page .dp-nearby {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.destination-page .dp-port {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: var(--blue-05);
  color: var(--blue-80);
  padding: 16px 28px;
  border-radius: 100px;
  font-family: "Work Sans";
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.destination-page .dp-port svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.destination-page .dp-port:hover {
  background-color: var(--blue-40);
  color: var(--light-00);
}
.destination-page .dp-port:hover svg { transform: translateX(2px); }

/* ============================================================
   REGION PAGE ADDITIONS — the .destination-page scope is shared by the
   port page (MinimalTripListing) and the region/zone page (Region);
   these components are used only by the region page.
   ============================================================ */

/* Section lede — one intro line inside a section-head, under the title. */
.destination-page .dp-lede {
  font-family: "Work Sans";
  font-size: 16px;
  color: var(--dark-70);
  line-height: 1.6;
  margin: 12px 0 0;
}

/* Ports grid — the region page's core content. Full-bleed photo with the port
   name laid over a veil at the bottom; the editorial tagline is folded away and
   unfolds on hover. At rest this is deliberately identical to the original
   region-page card (230px tall, 8px radius, the same 130px veil) — the tagline
   is what the hover buys you, so browsing the grid stays photographic.

   Column width is 310px on purpose, NOT the 230px this grid used to have:
   taglines are authored at 64-80 characters, and at 13.5px an 80-character line
   needs a 310px card to fit in two lines. At 230px it wraps to three and the
   clamp would cut the end off almost every one of them. */
.destination-page .dp-ports {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 20px;
}
.destination-page .dp-port-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 230px;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.22s ease;
}
.destination-page .dp-port-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(41, 51, 88, 0.16);
}
.destination-page .dp-port-card-media {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1;
  background-color: var(--light-15);
  background-size: cover;
  background-position: center;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.destination-page .dp-port-card:hover .dp-port-card-media { transform: scale(1.055); }
/* The veil: 130px at rest (the original), full height once the tagline is out. */
.destination-page .dp-port-card::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 130px;
  z-index: 2;
  background: linear-gradient(180deg, #00000000, #170f2db8);
  transition: height 0.32s ease, background 0.32s ease;
}
.destination-page .dp-port-card:hover::after,
.destination-page .dp-port-card:focus-visible::after {
  height: 100%;
  background: linear-gradient(180deg, rgba(23, 15, 45, 0.15) 0%, rgba(23, 15, 45, 0.72) 45%, rgba(23, 15, 45, 0.96) 100%);
}
.destination-page .dp-port-card-body {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 14px 18px 16px;
}
.destination-page .dp-port-card-name {
  font-family: "Work Sans";
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--light-00);
  line-height: 1.25;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}
/* Rule + tagline share one collapsing container, so the name never shifts at
   rest and the whole block animates with a single transition. */
.destination-page .dp-port-card-reveal {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.32s ease, opacity 0.26s ease 0.04s, margin-top 0.32s ease;
}
.destination-page .dp-port-card:hover .dp-port-card-reveal,
.destination-page .dp-port-card:focus-visible .dp-port-card-reveal {
  max-height: 180px;
  opacity: 1;
  margin-top: 10px;
}
.destination-page .dp-port-card-rule {
  height: 1px;
  width: 34px;
  background: rgba(255, 255, 255, 0.55);
  margin-bottom: 10px;
}
/* Two lines are reserved even when the tagline fits in one, so every card in the
   grid ends up exactly the same height. The clamp is the safety net, not the
   mechanism — see the 310px note above. */
.destination-page .dp-port-card-blurb {
  font-family: "Work Sans";
  font-size: 13.5px;
  color: #e2e7f2;
  line-height: 1.5;
  min-height: 3em;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
/* Touch: there is no hover, so the tagline is always out. With the veil
   permanently on, the hover gradient swallows the photo — ease it off. */
@media (hover: none) {
  .destination-page .dp-port-card::after {
    height: 100%;
    background: linear-gradient(180deg, rgba(23, 15, 45, 0) 0%, rgba(23, 15, 45, 0.42) 48%, rgba(23, 15, 45, 0.8) 100%);
  }
  .destination-page .dp-port-card-reveal {
    max-height: 180px;
    opacity: 1;
    margin-top: 10px;
  }
}

/* Labeled card grid — best-time months only. Months have nothing honest
   to photograph, so they stay text-only, same treatment as the port cards. */
.destination-page .dp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 8px;
}
.destination-page .dp-grid-card {
  background-color: var(--light-00);
  border: 1px solid var(--light-15);
  border-radius: 12px;
  padding: 26px 24px;
}
.destination-page .dp-grid-card h3 {
  font-family: "Work Sans";
  font-size: 17px;
  font-weight: 700;
  color: var(--blue-90);
  line-height: 1.3;
  margin-bottom: 8px;
}
.destination-page .dp-grid-card p {
  font-family: "Work Sans";
  font-size: 14.5px;
  color: var(--dark-70);
  line-height: 1.6;
  margin: 0;
}

/* Signature experiences — text-only by design (this content never has
   photography behind it, unlike the port cards above). Differentiated from
   Best Time to Cruise's plain fact cards by scale, not decoration: a
   thin top accent rule and an editorial, intro-sized heading instead of a
   small card title, so each experience reads as a feature, not a fact. */
.destination-page .dp-experiences {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 8px;
}
.destination-page .dp-experience-card {
  position: relative;
  background-color: var(--light-00);
  border: 1px solid var(--light-15);
  border-radius: 14px;
  padding: 30px 26px 28px;
}
.destination-page .dp-experience-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 26px;
  width: 36px;
  height: 3px;
  background: var(--blue-70);
  border-radius: 0 0 2px 2px;
}
.destination-page .dp-experience-card h3 {
  font-family: "Urbanist", sans-serif;
  font-size: clamp(21px, 2.2vw, 25px);
  font-weight: 700;
  color: var(--blue-90);
  line-height: 1.25;
  margin: 14px 0 10px;
}
.destination-page .dp-experience-card p {
  font-family: "Work Sans";
  font-size: 15px;
  color: var(--dark-70);
  line-height: 1.65;
  margin: 0;
}

/* ============================================================
   BOOK EARLY — a calm editorial statement, not a countdown. An earlier
   version visualized the booking window as a highlighted segment on a
   timeline; that reads as a hard cutoff ("miss it and you're out of
   luck"), which fights the reassurance in the body copy below it. The
   window months now live inside the headline sentence as emphasis, not
   as a boundary — no axis, no segment, nothing to imply a deadline.
   Light ground (not the navy used by Package/Groups-cta) on purpose:
   those two are conversion CTAs, this is a reassurance note, and the
   tonal shift says so before a word is read.
   ============================================================ */
.destination-page .dp-runway {
  margin-top: 28px;
  background-color: var(--blue-05);
  border-radius: 20px;
  padding: clamp(36px, 5vw, 56px) clamp(36px, 5vw, 64px);
}
.destination-page .dp-runway .dp-eyebrow { color: var(--blue-70); }
.destination-page .dp-runway h4 {
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.35;
  color: var(--blue-90);
  margin: 0;
  max-width: 40ch;
}
.destination-page .dp-runway-num { color: var(--blue-70); }
.destination-page .dp-runway p {
  margin: 24px 0 0;
  max-width: 62ch;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--dark-70);
}
.destination-page .dp-runway p strong { color: var(--blue-90); font-weight: 700; }
.destination-page .dp-runway-cta { margin-top: 24px; }

/* Jumps back up to the ports grid this card sits below. Scoped to this page
   only (destination-page.css loads on the region/port pages) and disabled
   when the visitor prefers reduced motion. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Cruise-line chips — static (non-link) labels. Smaller than the
   related-region navigation pills; matches Home's compact tag size. */
.destination-page .dp-line-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.destination-page .dp-line-chip {
  font-family: "Work Sans";
  font-size: 13px;
  font-weight: 600;
  color: var(--blue-80);
  background-color: var(--blue-05);
  padding: 8px 18px;
  border-radius: 100px;
  white-space: nowrap;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media screen and (max-width: 1024px) {
  .destination-page .dp-facts { columns: 2; }
}

@media screen and (max-width: 768px) {
  .destination-page .dp-thing-featured { flex-direction: column; align-items: flex-start; gap: 0; }
  .destination-page .dp-thing-featured-num { font-size: clamp(64px, 22vw, 84px); margin-bottom: 4px; }
  .destination-page .dp-things-list { columns: 1; }
  .destination-page .dp-package { flex-direction: column; align-items: stretch; }
}

@media screen and (max-width: 640px) {
  .destination-page .dp-facts { columns: 1; }
  .destination-page .dp-tips { columns: 1; }
  .destination-page .dp-experiences { grid-template-columns: 1fr; }
}