/* ============================================================
   Curated Trips — Mobile stylesheet
   Applies only under 768px. Inline styles win by default on this
   site, so every rule here targets an inline pattern with
   [style*="..."] + !important. Rule order matters: shorter/more
   general match strings are declared BEFORE longer ones they are
   a substring of, so the later (more specific) rule wins on the
   elements where both match.
   ============================================================ */

/* Hamburger button — hidden on desktop by default (base rule,
   outside the media query), shown only under 768px below. */
#mobile-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  flex: 0 0 auto;
  margin-left: 16px;
}
#mobile-nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: rgb(247, 243, 233);
  border-radius: 1px;
}

/* Mobile nav dropdown panel — hidden on desktop by default (base rule,
   outside the media query, matching #mobile-nav-toggle above). Without
   this, the panel's raw <a> links rendered inline next to Contact on
   any screen wider than 768px, since a bare <div> defaults to
   display:block and anchors default to inline. Only the media query
   below (plus JS toggling the .open class) should ever show it. */
#mobile-nav-panel {
  display: none;
}

@media (max-width: 768px) {

  /* ---------- Page-wide overflow safety net ---------- */
  /* about.html, contact.html, f1-experience.html and index.html each wrap
     their entire page in a top-level <section style="width: 1440px;
     margin: 0 auto;">, unlike the other 42 pages — found by testing all
     46 pages at a real 390px viewport rather than assuming the pilot
     page set still covers every template in use. Belt-and-braces general
     rule (any other fixed-width wrapper introduced later gets caught
     too), plus the specific match.
     Deliberately NOT setting overflow-x:hidden on html/body here: doing
     that (confirmed by testing) collapses document.documentElement's
     scrollHeight down to one viewport height in this browser, which
     silently breaks all scrolling below the first screen — a much worse
     problem than the narrow one it would have guarded against, which
     max-width already covers on its own. */
  body * {
    max-width: 100% !important;
  }
  [style*="width: 1440px"] {
    width: 100% !important;
  }

  /* ---------- Header / nav ---------- */
  /* Matched on the header's fixed positioning signature (present on every
     page) rather than its padding value, since a handful of pages (the
     journal templates) use a slightly different desktop padding
     ("26px 64px" instead of "32px 64px") that a padding-value match would
     have missed. */
  header[style*="position: absolute; top: 0; left: 0; right: 0; z-index: 10;"] {
    padding: 20px 20px !important;
  }

  header nav { display: none !important; }

  /* With nav hidden, nothing is left to flex-grow between the logo and
     the phone/Contact/hamburger cluster, so it would otherwise pack up
     against the logo instead of sitting at the right edge. Pin it right
     and tighten its gap for the extra items now sharing the row. */
  header > div[style*="flex: 0 0 auto; display: flex; align-items: center; gap: 22px"] {
    margin-left: auto !important;
    gap: 10px !important;
  }

  /* Hamburger toggle — hidden on desktop via base CSS, shown here */
  #mobile-nav-toggle {
    display: flex !important;
  }

  /* Mobile nav slide-down panel — closed by default, opened by JS */
  #mobile-nav-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgb(11, 61, 51);
    padding: 12px 24px 28px;
    flex-direction: column;
    gap: 4px;
    z-index: 20;
    box-shadow: 0 12px 24px rgba(0,0,0,0.25);
  }
  #mobile-nav-panel.open { display: flex; }
  #mobile-nav-panel a {
    text-decoration: none;
    color: rgb(247, 243, 233);
    font-size: 16px;
    padding: 14px 4px;
    border-bottom: 1px solid rgba(247, 243, 233, 0.12);
  }
  #mobile-nav-panel a:last-child { border-bottom: none; }

  /* Phone number: kept visible on mobile — tap-to-call is exactly what
     mobile visitors want — just shrunk to fit next to the Contact
     button and hamburger. */
  header a[href^="tel:"] {
    font-size: 12px !important;
    letter-spacing: 0 !important;
  }

  /* Contact BUTTON in header (the orange pill): kept visible too — a
     one-tap path to the enquiry form is worth the header real estate.
     Tightened padding/size so phone + Contact + hamburger all fit on
     one line. Scoped to the button's own inline background so this
     doesn't touch the plain-text "Contact" link inside the mobile nav
     panel, which shares the href. */
  header a[href="contact.html"][style*="background: rgb(201, 138, 46)"] {
    padding: 8px 12px !important;
    font-size: 12px !important;
  }

  /* Both are redundant with the panel's own links once the hamburger
     menu is open, and crowd the dropdown's top edge — hide them only
     while the panel is open. */
  header:has(#mobile-nav-panel.open) a[href^="tel:"],
  header:has(#mobile-nav-panel.open) a[href="contact.html"][style*="background: rgb(201, 138, 46)"] {
    display: none !important;
  }

  /* Logo: slightly smaller on phones */
  header img { height: 34px !important; }

  /* ---------- Hero sections ---------- */
  div[style*="position: relative; width: 100%; height:"] {
    height: 62vh !important;
    min-height: 380px !important;
  }

  div[style*="left: 64px; right: 64px;"] {
    left: 20px !important;
    right: 20px !important;
  }

  div[style*="left: 64px; right: 64px; bottom:"] h1,
  div[style*="left: 64px; right: 64px; bottom:"] p[style*="font-size: 46px"],
  div[style*="left: 64px; right: 64px; bottom:"] p[style*="font-size: 44px"] {
    font-size: 28px !important;
    line-height: 1.25 !important;
  }

  div[style*="left: 64px; right: 64px;"] h1 {
    font-size: 28px !important;
    line-height: 1.25 !important;
  }

  /* about.html styles its hero headline as a <p style="font-size: 44px">
     rather than an <h1> — without this, the generic "p" rule two lines
     down would shrink that headline text down to 14px along with the
     genuine subtitle paragraph. The extra attribute selector gives this
     more specificity than the generic rule, so it wins regardless of
     source order. */
  div[style*="left: 64px; right: 64px;"] p[style*="font-size: 44px"] {
    font-size: 28px !important;
    line-height: 1.25 !important;
  }

  div[style*="left: 64px; right: 64px;"] p {
    font-size: 14px !important;
  }

  /* Hero caption legibility: on a shorter mobile hero the video crop
     shows more sky/structure and less of the darkened lower third, so
     white text can sit directly on a bright background. Force a strong
     text-shadow regardless of what's behind it, and deepen the existing
     bottom-darkening gradient overlay used on the video heroes. */
  div[style*="left: 64px; right: 64px;"] h1,
  div[style*="left: 64px; right: 64px;"] p[style*="font-size: 46px"],
  div[style*="left: 64px; right: 64px;"] p[style*="font-size: 44px"] {
    text-shadow: 0 2px 10px rgba(0,0,0,0.65), 0 1px 3px rgba(0,0,0,0.85) !important;
  }
  div[style*="left: 64px; right: 64px;"] p {
    text-shadow: 0 1px 6px rgba(0,0,0,0.75) !important;
  }
  div[style*="linear-gradient(rgba(11, 61, 51, 0.18) 0%, rgba(11, 61, 51, 0) 18%, rgba(11, 61, 51, 0) 60%, rgba(11, 61, 51, 0.55) 100%)"] {
    background: linear-gradient(180deg, rgba(11,61,51,0.15) 0%, rgba(11,61,51,0.05) 25%, rgba(11,61,51,0.4) 55%, rgba(11,61,51,0.92) 100%) !important;
  }

  /* Homepage hero: the caption sits low (bottom: 90px, set for the
     860px-tall desktop hero) inside a much shorter mobile hero, so with
     3 lines of headline + subtitle + button it was running out of room
     and its top edge crept up into the header — that's what made the
     dark scrim look like it had swallowed the whole hero. Give the
     homepage hero more height, pull the caption in closer to the
     bottom edge, and use a light — not opaque — scrim just for extra
     contrast on top of the gradient/shadow above, not as the primary
     fix. Scoped to the homepage's specific hero (data-dc-tpl PLUS its
     own height/bottom values) rather than data-dc-tpl alone — the site
     reuses the same tpl numbers on other pages for unrelated elements
     (contact.html's form wrapper is also "14", and its own "18";
     f1-experience.html's hero caption is also "18" but at bottom: 80px)
     — matching on data-dc-tpl alone would carry this homepage-only
     sizing onto those unrelated elements once they get the mobile
     treatment too. */
  div[data-dc-tpl="14"][style*="height: 860px"] {
    height: 74vh !important;
    min-height: 480px !important;
  }
  div[data-dc-tpl="18"][style*="bottom: 90px"] {
    bottom: 28px !important;
    background: rgba(6, 22, 18, 0.32) !important;
    border-radius: 10px;
    padding: 14px 16px 18px !important;
  }
  div[data-dc-tpl="18"][style*="bottom: 90px"] p[style*="font-size: 46px"] {
    margin-bottom: 10px !important;
  }
  div[data-dc-tpl="18"][style*="bottom: 90px"] p:not([style*="font-size: 46px"]) {
    margin-bottom: 18px !important;
  }

  /* Built to Watch / Born to Watch / Cricket / F1 Experience hero captions
     — the plain bottom:80px block. Same underlying problem as the
     homepage caption: a fixed 80px-from-bottom anchor, set for a
     700px-tall desktop hero, leaves much less headroom once the hero is
     only 62vh tall on a phone. Because this caption div has no z-index
     while the header has z-index: 10, wherever the two boxes overlap
     the caption renders BEHIND the header instead of just crowding it —
     that's what showed up as hero text "going behind the menu".
     Pulling the anchor in (below) closes most of that gap, but Born to
     Watch's caption also carries a long four-item subtitle that, even
     at the reduced mobile font sizes, wraps to 400px+ of stacked text
     on a 350px-wide phone — taller than the anchor fix alone can make
     room for. So this pairs two changes: pull the anchor closer to the
     bottom edge for every page in this group (60px more clearance,
     plus the same background scrim used on the homepage caption so it
     stays legible near the header's shadow), and give the hero ITSELF
     more height too, on all four pages that share this caption
     pattern — scoped with :has() so only heroes with this specific
     caption shape are affected, not every hero on the site. Built to
     Watch and Cricket's shorter captions already fit fine at 62vh, but
     there's no clean CSS-only way to tell "this page's wrapped text is
     short" from "this page's wrapped text is long" (that depends on
     the actual sentence, not the markup), so all four get the same
     taller, safer hero rather than leaving Born to Watch as a special
     case that breaks again the next time its copy is edited. */
  [style*="left: 64px; right: 64px; bottom: 80px; max-width: 800px"] {
    bottom: 20px !important;
    background: rgba(6, 22, 18, 0.32) !important;
    border-radius: 10px;
    padding: 14px 16px 18px !important;
  }
  div[style*="position: relative; width: 100%; height:"]:has(
    > div[style*="left: 64px; right: 64px; bottom: 80px; max-width: 800px"]
  ) {
    height: 82vh !important;
    min-height: 580px !important;
  }

  /* ---------- Generic section padding overrides ---------- */
  /* Ordered shortest/most-general match first, longest/most-specific last.
     Covers every distinct "...64px..." padding value found across all 46
     pages, not just the 3 pilot pages — the site has a few one-off values
     (a bare "padding: 64px", a "64px 64px 120px" on the contact form
     wrapper, a "60px 64px 0" on the journal banner) that only show up
     once you look at the full page set. */
  [style*="padding: 64px"] { padding: 40px 20px !important; }
  [style*="padding: 0 64px"] { padding-left: 20px !important; padding-right: 20px !important; }
  [style*="padding: 0px 64px 200px"] { padding: 0px 20px 90px !important; }
  [style*="padding: 0 64px 56px"] { padding: 0 20px 32px !important; }
  [style*="padding: 20px 64px 0"] { padding: 16px 20px 0 !important; }
  [style*="padding: 24px 64px 0"] { padding: 16px 20px 0 !important; }
  [style*="padding: 60px 64px 0"] { padding: 32px 20px 0 !important; }
  [style*="padding: 40px 64px"] { padding: 28px 20px !important; }
  [style*="padding: 56px 64px"] { padding: 36px 20px !important; }
  [style*="padding: 64px 64px 48px"] { padding: 40px 20px 32px !important; }
  [style*="padding: 64px 64px 120px"] { padding: 40px 20px 64px !important; }
  [style*="padding: 72px 64px"] { padding: 44px 20px !important; }
  [style*="padding: 80px 64px"] { padding: 48px 20px !important; }
  [style*="padding: 88px 64px"] { padding: 50px 20px !important; }
  [style*="padding: 90px 64px"] { padding: 52px 20px !important; }
  [style*="padding: 90px 64px 100px"] { padding: 52px 20px 56px !important; }
  [style*="padding: 100px 64px"] { padding: 56px 20px !important; }
  [style*="padding: 110px 64px"] { padding: 60px 20px !important; }
  [style*="padding: 120px 64px"] { padding: 64px 20px !important; }

  /* Footer padding uses the same "40px 64px" pattern as one of the rules
     above, which is fine — footer also gets the flex override below. */

  /* ---------- Grids ----------
     minmax(0, 1fr) rather than a bare 1fr — grid items refuse to
     shrink below their content's min-content width by default,
     which was pushing 2-column card rows wider than the viewport. */
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }
  [style*="grid-template-columns: repeat(2, 1fr)"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px !important;
  }
  [style*="grid-template-columns: repeat(auto-fit, minmax(460px, 1fr))"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  /* Homepage "Kinds of Moment" cards (Built to Watch / Born to Watch) live
     in the grid above. Each is a page-builder <image-slot> component that
     pans/zooms its photo using a plain <img> sized with CSS percentages
     (e.g. width: 144.588%, height: 100%) computed for the card's DESKTOP
     aspect ratio, with no object-fit to protect it. The card's height was
     a fixed 620px on every screen size while only its width collapsed to
     one mobile column — so the container's aspect ratio changed sharply
     and, with no object-fit, the image stretched non-uniformly to match
     (this is what showed up on a real phone as a distorted/rotated-looking
     photo). Shorten the card for mobile proportions, and use ::part() to
     reach past the component's shadow DOM and force the image onto the
     same safe object-fit: cover technique every other photo on the site
     already uses — this replaces the pan/zoom crop with a plain centered
     crop at mobile widths, which can only ever look correct, never
     stretched, regardless of the container's aspect ratio. Also covers the
     three smaller "From the Journal" image-slot thumbnails further down
     this page, which had the same latent (if less visible) issue. */
  [style*="height: 620px; overflow: hidden; border-radius: 2px"] {
    height: 340px !important;
  }
  image-slot::part(image) {
    width: 100% !important;
    height: 100% !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
    object-fit: cover !important;
  }
  /* Shrinking these cards to 340px (above) had a side effect on legibility:
     the card's darkening gradient only shades its bottom ~40%, which was
     plenty of coverage when the card was 620px tall and the caption text
     sat low within it. At 340px the same caption text (font sizes
     untouched) now fills most of the card, so the title sits up near the
     TOP of the card — outside the gradient's dark region entirely, right
     on top of whatever the photo looks like there. On a busy/light photo
     (the Built to Watch pit-crew shot) this reads as the white title text
     "getting lost" in the image. journal.html's own 340px cards already
     pair that height with a text-shadow on every caption line for exactly
     this reason (grep the shared gradient string above and compare) —
     apply the same safety net here so legibility never depends on which
     photo happens to be behind the text. */
  [style*="font-size: 32px; color: rgb(247, 243, 233); margin-bottom: 10px"] {
    text-shadow: 0 2px 8px rgba(0,0,0,0.75), 0 1px 3px rgba(0,0,0,0.9) !important;
  }
  [style*="font-size: 15px; color: rgb(230, 252, 130)"] {
    text-shadow: 0 1px 6px rgba(0,0,0,0.7) !important;
  }
  [style*="font-size: 14px; line-height: 1.6; color: rgb(247, 243, 233); opacity: 0.85"] {
    text-shadow: 0 1px 6px rgba(0,0,0,0.6) !important;
  }
  /* Homepage "Built to Watch" / "Born to Watch" countdown mini-cards (the
     JS-rendered #fomo-grid-btw / #fomo-grid-btw2 rows further down this
     page) — same long-place-name overflow as the Thiruvananthapuram fixes
     below, just a third template: this one's copy text is written by a
     shared JS renderRow() function rather than baked into the page HTML,
     so it wasn't caught by the earlier two selectors. Matches on the
     rendered inline style JS assigns to each card's description line. */
  [style*="font-size: 14px; line-height: 1.6; color: rgb(11, 61, 51); opacity: 0.75"] {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
  [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px !important;
  }
  /* journal.html's card grid was hand-authored without spaces around the
     commas — a different literal string than the "repeat(3, 1fr)" used
     everywhere else, so it needs its own selector. */
  [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px !important;
  }
  [style*="grid-template-columns: repeat(5, 1fr)"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
  }
  /* Asymmetric two-column splits (photo+text, bio+portrait, etc.) found
     on about.html, born-to-watch.html and f1-experience.html — same
     single-column treatment as the even 1fr/1fr split above. */
  [style*="grid-template-columns: 0.9fr 1.1fr"],
  [style*="grid-template-columns: 1fr 1.6fr"],
  [style*="grid-template-columns: 1.2fr 0.8fr"],
  [style*="grid-template-columns: 0.8fr 1.2fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
  }
  /* Belt-and-braces: any grid item (card/anchor) that still tries
     to overflow its track gets clamped. */
  [style*="grid-template-columns"] > * {
    min-width: 0 !important;
  }

  /* Destination/race mini-card titles (used ~35 times across cricket.html,
     born-to-watch.html and f1-experience.html's card grids): once a card
     narrows to a mobile grid column, a long one-word place name like
     "Thiruvananthapuram" has nowhere to break by default — normal text
     wrapping only breaks at spaces/hyphens — so it silently overflows the
     card and gets clipped by the card's own overflow:hidden. Letting it
     break mid-word only kicks in for names that don't already fit. */
  [style*="font-size: 15px; color: rgb(247, 243, 233); margin-bottom: 3px"] {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
  /* Same overflow problem, different template: the Flights/Stay/Price
     info-cards used on itinerary pages (e.g. cricket-wi-trivandrum.html)
     also wrap a long place name like "Thiruvananthapuram" in prose text,
     using a different style signature than the mini-card titles above.
     Rather than add one more narrow one-off selector every time this
     surfaces on yet another template, apply the same break behaviour as a
     general safety net on the info-card's text itself. */
  [style*="border: 1px solid rgba(11,61,51,0.15); border-radius: 6px; padding: 24px 22px"] {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }

  /* "Next 6 months" countdown cards (homepage): the icon+badge row is a
     nowrap flex row with a fixed-size icon and a large number ("37 days
     to go"). Once the card shrinks to a mobile grid column, that row's
     combined minimum content width no longer fits and the text bleeds
     past the card edge — even though the badge itself does wrap. Stack
     icon above text instead of fighting the flex-shrink math, and knock
     the number down from a desktop-sized 32px so it wraps comfortably. */
  [style*="display:flex; align-items:center; gap: 14px; margin-bottom: 16px"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  [style*="font-size: 32px; font-weight: 600; color: rgb(201, 138, 46)"] {
    font-size: 22px !important;
  }

  /* ---------- Itinerary layout (F1-style pages with .trip-flex) ---------- */
  .trip-flex {
    display: flex !important;
    flex-direction: column !important;
  }
  .circuit-sidebar {
    order: -1;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 28px !important;
  }
  .day-card-inner {
    display: block !important;
  }
  .day-card-inner img {
    width: 100% !important;
    height: auto !important;
    margin-top: 16px !important;
    flex: none !important;
  }
  /* born-to-watch-antarctica.html doesn't have real day-by-day photos
     yet, so its itinerary cards use a fixed 400x280px placeholder <div>
     (a plain gradient box) in that slot instead of an <img>. The rule
     above only matches actual <img> tags, so this box was keeping its
     hard-coded 400px width and pushing the card past the screen edge —
     this covers the same slot for that placeholder pattern. */
  .day-card-inner > div[style*="flex: 0 0 400px; width: 400px"] {
    width: 100% !important;
    height: 200px !important;
    margin-top: 16px !important;
    flex: none !important;
  }

  /* ---------- Pill-switcher rows ---------- */
  [style*="flex-wrap: wrap"] a,
  [style*="overflow-x: auto"] {
    font-size: 13px !important;
  }

  /* ---------- Utility button rows (Share / Download PDF) ---------- */
  [style*="justify-content: flex-end"] {
    justify-content: center !important;
    flex-wrap: wrap !important;
  }

  /* ---------- Footer ---------- */
  footer {
    flex-direction: column !important;
    gap: 18px !important;
    text-align: center !important;
    padding: 32px 20px !important;
  }
  footer > div[style*="display: flex; gap: 32px"] {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 18px 24px !important;
  }

  /* ---------- Journal article hero captions ----------
     journal-aurora.html, journal-migration.html and journal-winners-
     circle.html use a static-flow caption block (not the absolutely-
     positioned "left: 64px; right: 64px" pattern the other hero
     captions use), so it needs its own sizing rule. journal.html's own
     simple title banner is caught by the h1 catch-all just below. */
  div[style*="position: relative; z-index: 2; padding: 0 64px 56px"] h1 {
    font-size: 26px !important;
    line-height: 1.25 !important;
  }
  div[style*="position: relative; z-index: 2; padding: 0 64px 56px"] p {
    font-size: 14px !important;
  }

  /* ---------- Any remaining large inline headline text ---------- */
  h1[style*="font-size:"],
  p[style*="font-size: 46px"],
  p[style*="font-size: 44px"] {
    font-size: 28px !important;
  }
}

@media (max-width: 420px) {
  div[style*="position: relative; width: 100%; height:"] {
    height: 56vh !important;
    min-height: 340px !important;
  }
}