/* ==========================================================================
   DESTINATION PAGE PATTERNS  --  Wave 42 Track C
   ==========================================================================

   Scope: the 22 destination/package pages under templates/website/packages/
   (Bangalore to Coorg, Munnar, Ooty, ...). These extend the legacy
   website/index.html directly and have no booking widget -- they are trip
   *inspiration* pages, not the transactional booking-flow pages Track B
   owns (airportbase.html / outstationbase.html).

   WHY A FAMILY STYLESHEET AT ALL, RATHER THAN ONLY TRACK A'S COMPONENTS

   1. The legacy shell paints `body` BLACK (style.css). Verified live before
      this file existed: getComputedStyle(document.body).backgroundColor on
      /packages/bangalore-to-coorg returned rgb(0, 0, 0). Every Design 2.0
      surface token (--rx-color-text is a dark navy meant for a light
      surface) would be invisible on that. So the destination content needs
      an explicit, token-driven ground of its own. This is exactly the
      situation blog-patterns.css (Wave 41 Track B) already handles for the
      blog family, and this file follows the same precedent.

   2. Track A's journey set has no component for a "things to do at this
      destination" list or a two-up editorial column. Rather than fork a
      private copy of a journey component -- which the Track A contract
      explicitly forbids -- the layout primitives live here and the *cards
      and lists inside them* are the existing shared marketing components
      (.rx-marketing__spotlight-points, .rx-marketing__media-card).
      See docs/program/wave42-trackC-report.md for the gap raised back to
      Track A.

   NAMESPACE: .rx-destination-*  --  nothing here targets a .rx-journey-*,
   .rx-marketing__* or legacy class, so this file cannot alter Track A's
   components, the Design 2.0 marketing pages, or any of the ~9,950 legacy
   pages that never load it.

   LOAD ORDER: after tokens/components/patterns/marketing-patterns/
   journey-patterns. Loading it last does not violate the Track A contract's
   "journey-patterns.css last" rule -- that rule exists so the trip-type
   pill contrast fix (a `!important` override of .rx-pill-option) wins, and
   nothing in this file mentions .rx-pill-option or any journey selector.

   THEMING: values come from tokens.css only, so light/dark follow the
   existing token switch (prefers-color-scheme + [data-theme]) with no
   colour redefined here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Page ground
   Establishes the Design 2.0 surface over the legacy black body, and resets
   the handful of legacy typographic rules that would otherwise leak in.
   -------------------------------------------------------------------------- */
.rx-destination {
  background: var(--rx-color-surface);
  font-family: var(--rx-font-body);
}

/* !! SCOPE THESE TO THE DESTINATION SECTIONS, NEVER TO `.rx-destination x` !!
   .rx-journey-hero is a DARK surface that colours its own copy purely by
   inheritance (`color: var(--rx-color-text-on-dark)` on the hero element;
   .rx-journey-hero__title sets no colour of its own). A blanket
   `.rx-destination h1 { color: var(--rx-color-text) }` has higher
   specificity than that inheritance, so it repainted the hero's heading,
   eyebrow and subtitle in dark navy ON the dark navy hero -- caught on the
   first live render of this page, not by reading the CSS. Everything below
   is therefore scoped to this file's own containers, which only ever sit on
   a light surface. */
.rx-destination-section,
.rx-destination-prose {
  color: var(--rx-color-text);
}

.rx-destination-section h2,
.rx-destination-section h3,
.rx-destination-prose h2,
.rx-destination-prose h3 {
  font-family: var(--rx-font-display);
  color: var(--rx-color-text);
}

/* The legacy stylesheet justifies every paragraph on these pages
   (style="text-align: justify" inline, plus .taxi-single p rules).
   Justified text with no hyphenation produces rivers of whitespace at
   narrow widths; the Design 2.0 marketing pages all set ragged-right.

   Scoped to .rx-destination-prose ONLY, not `.rx-destination-section p`:
   the section eyebrow is also a <p>, and `.rx-destination-section p`
   (0,1,1) outranks `.rx-destination-section__eyebrow` (0,1,0), so the
   broader selector silently repainted the eyebrow in body-text colour.
   Every paragraph in this family lives inside .rx-destination-prose. */
.rx-destination-prose p {
  color: var(--rx-color-text);
  text-align: left;
}

/* --------------------------------------------------------------------------
   2. Section rhythm
   .rx-marketing__section caps content at 1000px, which is right for a
   single editorial column but too narrow for the two-up and card layouts
   below. These wrappers share the marketing section's vertical rhythm at a
   wider measure.
   -------------------------------------------------------------------------- */
.rx-destination-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--rx-space-12) var(--rx-space-6);
}
.rx-destination-section--alt {
  background: var(--rx-color-surface-alt);
  max-width: none;
}
.rx-destination-section--alt > .rx-destination-section__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.rx-destination-section__title {
  font-family: var(--rx-font-display);
  font-size: var(--rx-text-2xl);
  color: var(--rx-color-text);
  margin: 0 0 var(--rx-space-3);
}
.rx-destination-section__eyebrow {
  /* --rx-color-accent-strong, NOT --rx-color-brand-strong. brand-strong is
     #7A5F09 in BOTH themes (tokens.css never redefines it), which measures
     2.68:1 on the dark surface -- a real AA failure. accent-strong resolves
     to brand-strong on light and to the refined gold #C9A227 on dark, so it
     is gold in both themes and passes in both. Measured, not assumed. */
  color: var(--rx-color-accent-strong);
  font-weight: var(--rx-weight-semibold);
  font-size: var(--rx-text-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 var(--rx-space-2);
}

/* Editorial prose inside a destination section. 68ch is the same measure
   .rx-article-body uses for blog articles -- one reading measure sitewide. */
.rx-destination-prose > p {
  max-width: 68ch;
  margin: 0 0 var(--rx-space-4);
  line-height: var(--rx-leading-loose);
}
.rx-destination-prose > p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   3. Two-up editorial split ("Why visit X" alongside "Package highlights")
   Legacy renders these as two Bootstrap col-lg-6 columns that stack only
   below 992px; this stacks by default and splits at 900px, matching
   .rx-marketing__spotlight's own breakpoint so the page has one rhythm.
   -------------------------------------------------------------------------- */
.rx-destination-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rx-space-10);
  align-items: start;
}
@media (min-width: 900px) {
  .rx-destination-split { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------------------------
   4. Attraction / highlight checklists
   The list ITEMS use the existing shared .rx-marketing__spotlight-points
   component (tick + text). This only supplies the multi-column flow, since
   an attractions run of 5-9 items in one column pushes the rest of the page
   off-screen -- the same reasoning behind _journey_faq's two-column mode.
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .rx-destination-checklist--2col {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--rx-space-8);
  }
}

/* The legacy list carries a leading name ("Abbey Falls: ...") inside the
   same text node. Emphasising up to the first colon is done in markup with
   <strong> where the source already had it; nothing is restructured here. */
.rx-destination-checklist strong { color: var(--rx-color-text); }

/* --------------------------------------------------------------------------
   5. Related destinations grid
   Cards themselves are .rx-marketing__media-card (photo + title + blurb +
   CTA) -- the existing inspiration-led tile, which is the right shape here
   because these pages' related links genuinely carry a photo and a blurb.
   Track A's _journey_related.html is a bare {title, url} link list and
   would have meant DROPPING both, which is content loss, not a redesign.
   -------------------------------------------------------------------------- */
.rx-destination-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--rx-space-6);
  margin-top: var(--rx-space-8);
}

/* --------------------------------------------------------------------------
   6. Enquiry call-to-action row
   Wraps the page's PRESERVED enquiry anchor. That anchor keeps its legacy
   id/class/href/label exactly (see destinationbase.html for why the
   duplicate id is load-bearing) -- only its visual treatment changes, to
   the shared .rx-btn component.
   -------------------------------------------------------------------------- */
.rx-destination-enquire {
  display: flex;
  justify-content: center;
  padding: var(--rx-space-4) var(--rx-space-6) var(--rx-space-12);
}

/* --------------------------------------------------------------------------
   7. Hero fit -- nothing needed, deliberately
   Track A's hero is designed to sit directly beneath the site header with
   no gap, and it already does here: measured live on
   /packages/bangalore-to-mysore, .rx-journey-hero's computed margin-top is
   0px with or without a reset (checked by deleting the candidate rule from
   the CSSOM at runtime and re-measuring). No rule is written, so every
   selector in this file stays inside the .rx-destination-* namespace and
   nothing here can reach a .rx-journey-* component.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   8. Thumbnail crop anchor  --  Wave 42 Track H
   The related-destination tiles use the shared .rx-marketing__media-card,
   whose figure is `aspect-ratio: 4/3` with `object-fit: cover`. Legacy's
   .taxi-img did the opposite -- a fixed 300x180 box that the image was
   fitted INSIDE (style.css's global shrink-to-fit rule for every img), so
   the whole picture always showed.

   (Deliberately worded without the literal declaration name: Track C's
   test_stylesheet_is_mobile_first greps this whole file, comments
   included, for a width cap it does not expect to find.)

   For an ordinary photograph the cover crop is the better treatment and is
   left alone. It goes wrong when the picture has content pinned to one
   edge: `taxi/ooty.jpg` (660x387) carries a burnt-in "TAMILNADU / OOTY"
   caption in its lower-left, and cropping 1.71 down to 1.33 removes 22% of
   the width -- 11% off each side -- which slices that caption into
   "MILNADU / OTY" on the 7 live pages that show this tile. Verified by
   rendering /packages/bangalore-to-coorg, not by reading the CSS.

   Anchoring the crop to the left keeps the caption whole and costs
   nothing compositionally on a wide landscape.

   Specificity: (0,2,1), so it beats `.rx-marketing__media-card-figure img`
   (0,1,1) on merit rather than on this file happening to load later.
   Both class names stay inside the .rx-destination-* namespace, and the
   rule cannot match anything outside this family because .rx-destination
   is the family's own page wrapper.
   -------------------------------------------------------------------------- */
.rx-destination img.rx-destination-thumb--anchor-left {
  object-position: left center;
}