/* ============================================================
   venturenorth.com.au — Mobile Overrides (Dash, Apr 2026)
   Quote #600. Loaded AFTER main.<hash>.css. Mobile-only.
   Breakpoint matches existing site: 320–599px.

   Specificity rules:
   - Most existing rules use `.js .selector` (specificity 0,2,0)
   - Site shell rules like .labelled_nav__top_bar use
     `.js body.labelled_nav .selector` (0,3,1) — match this
     prefix to win cascade ties without !important.

   Per-template scoping: body class is identical site-wide
   (`labelled_nav`), so we scope via unique structural
   selectors that only exist on each template:
     - homepage:    .tour_grid, .wrap.awards
     - tour archive: .wrap.tour_listing
     - tour detail: .tour_dates__day_container
     - region:      .two_col_sidebar:not(.blog)
     - blog post:   .two_col_sidebar.blog--article
     - team:        .team_list

   CARP design principles guide the changes:
     C — Contrast: stronger text-on-image legibility
     A — Alignment: consistent baselines on cards & CTAs
     R — Repetition: unified button styling
     P — Proximity: tight gaps within groups, breathing room between
   ============================================================ */

@media screen and (min-width: 320px) and (max-width: 599px) {

  /* ============================================================
     GLOBAL — Top bar layout + icon visibility
     ============================================================ */

  /* Top bar layout: logo LEFT, phone + menu paired RIGHT.
     Visual goals (CARP):
       - Repetition: logo / phone / menu should share visual rhythm,
         not three different weights
       - Alignment: all three vertically centered cleanly inside 56px
       - Proximity: phone and menu live as a paired right-side cluster;
         logo lives alone on the left
       - Contrast: all three items white-on-dark-green, equal visual weight

     The DOM is <section><ul.contact><a.logo><a#nav-toggle></section>.
     Flex with `order` reorders visually without touching markup.

     Force everything to 44px height target boxes so all three items
     match. Override existing height: 60px on .labelled_nav__contact and
     existing position:absolute on #nav-toggle. */

  .js body.labelled_nav .labelled_nav__top_bar {
    background-color: #1f2a24;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    height: 56px;
  }
  .js body.labelled_nav .labelled_nav__top_bar > section {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 56px;
    padding: 0 12px;
    gap: 0;
    box-sizing: border-box;
  }

  /* Logo — leftmost, smaller so it doesn't dominate the bar */
  .js body.labelled_nav .labelled_nav__top_bar .logo {
    order: 0;
    margin: 0;
    padding: 0;
    height: 56px;
    display: inline-flex;
    align-items: center;
  }
  .js body.labelled_nav .labelled_nav__top_bar .logo img {
    height: 30px;
    width: auto;
    display: block;
  }

  /* Phone link — single 44x44 icon button, paired with menu on the right.
     Override existing `.labelled_nav__contact { height: 60px }` and
     `background-color: cream` on the inner link. */
  .js body.labelled_nav .labelled_nav__top_bar .labelled_nav__contact,
  .js body.labelled_nav .labelled_nav__top_bar .labelled_nav__contact li {
    order: 1;
    margin: 0;
    padding: 0;
    height: 56px;
    display: inline-flex;
    align-items: center;
    list-style: none;
    float: none;
    line-height: 1;
  }
  .js body.labelled_nav .labelled_nav__top_bar .labelled_nav__contact {
    margin-left: auto;
  }
  .js body.labelled_nav .labelled_nav__top_bar .labelled_nav__phone {
    color: transparent;
    background-color: transparent;
    font-size: 0;
    padding: 0;
    text-decoration: none;
    line-height: 1;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
  }
  /* Align the icon-font ::before pseudo within its span using flex centering.
     The venture-north font's phone glyph sits in the upper portion of its
     character cell, so we need to constrain the cell to the glyph height
     (line-height: 1) and use flex on the parent span so align-items
     centers the pseudo's actual rendered box, not just its line-box. */
  .js body.labelled_nav .labelled_nav__top_bar .labelled_nav__phone .icon-phone {
    color: #fef2ed;
    font-size: 22px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
  }
  .js body.labelled_nav .labelled_nav__top_bar .labelled_nav__phone .icon-phone::before {
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
    align-self: center;
  }

  /* Menu — rightmost, same 44x44 visual rhythm as the phone, with
     "Menu" label tucked next to the hamburger icon for clarity.
     Reset existing position:absolute + drop the white border box.
     Padding is symmetric (4px each side) so the hamburger and Menu text
     are visually balanced inside the click target. */
  .js body.labelled_nav .labelled_nav__top_bar #nav-toggle {
    order: 2;
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    margin: 0;
    padding: 0 4px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    background-color: transparent;
    border: 0;
    border-radius: 4px;
    text-decoration: none;
  }
  /* Existing CSS sets `.menu_outline { margin: 10px 0 0 10px; padding: 0 7px 0 25px; border: 1px solid }`
     — that pushes the inner content down and right, breaking vertical alignment with
     the logo and phone. Zero margin/padding/border so the inner items flex-center
     cleanly within the 44px-tall #nav-toggle. */
  .js body.labelled_nav .labelled_nav__top_bar #nav-toggle .menu_outline {
    color: #fef2ed;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1;
    margin: 0;
    padding: 0;
    height: auto;
    border: 0;
    background: transparent;
    vertical-align: middle;
  }
  /* Existing CSS sets `.icon-menu { position: absolute; top: 8px }` which
     pulls the icon out of flex flow and pins it below the "Menu" text.
     Force position:static so it sits inline next to the text label. */
  .js body.labelled_nav .labelled_nav__top_bar #nav-toggle .icon-menu {
    color: #fef2ed;
    font-size: 22px;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
    position: static;
    top: auto;
    left: auto;
  }


  /* ============================================================
     GLOBAL — Off-canvas nav drawer: open from the RIGHT (not left)
     ============================================================
     The site uses responsiveNav with `animate: false`, meaning JS only
     toggles the `body.nav-open` class — the slide animation is pure CSS.

     Existing rules (in main.<hash>.css, all inside the same mobile @media):
       .js body.labelled_nav #primary-nav            { left: -60%; }
       .js.csstransforms3d body.labelled_nav.nav-open #primary-nav
                                                     { transform: translate3d(100%, 0, 0); }
       .js.no-csstransforms3d body.labelled_nav.nav-open #primary-nav
                                                     { left: 0; }

     We mirror to the right: closed state sits off-canvas right, open state
     transforms LEFT (-100%) to slide into view from the right edge.
     Specificity matches the existing rules exactly so source order
     (override file loads after main.css) wins the cascade. */
  .js body.labelled_nav #primary-nav {
    left: auto;
    right: -60%;
  }
  .js.csstransforms3d body.labelled_nav.nav-open #primary-nav {
    transform: translate3d(-100%, 0, 0);
  }
  .js.no-csstransforms3d body.labelled_nav.nav-open #primary-nav {
    left: auto;
    right: 0;
  }


  /* ============================================================
     GLOBAL — Top bar shrink-on-scroll (CSS scroll-driven animation)
     ============================================================
     At the top of the page the bar is 112px tall with a 60px logo
     (twice the scrolled state) — gives more visual presence on landing.
     As the user scrolls past 80px, it interpolates down to the standard
     56px bar / 30px logo.

     Pure CSS via animation-timeline: scroll() — no JS required.
     Wrapped in @supports so older browsers fall back to the static 56px bar. */

  @supports (animation-timeline: scroll()) {
    .js body.labelled_nav .labelled_nav__top_bar {
      animation: vnTopBarShrink linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 80px;
    }
    .js body.labelled_nav .labelled_nav__top_bar > section {
      animation: vnTopBarSectionShrink linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 80px;
    }
    .js body.labelled_nav .labelled_nav__top_bar .logo {
      animation: vnLogoBoxShrink linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 80px;
    }
    .js body.labelled_nav .labelled_nav__top_bar .logo img {
      animation: vnLogoImgShrink linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 80px;
    }
    /* Hero needs more top padding when bar is taller, so content isn't
       hidden under the expanded bar. Animate padding in lock-step. */
    .js .top_block {
      animation: vnHeroPaddingShrink linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 80px;
    }
    /* Off-canvas drawer top edge follows the top bar height so the menu
       isn't cut off when the bar is in its expanded state. Same scroll
       range and easing as the bar shrink, so they move in lock-step. */
    .js body.labelled_nav #primary-nav {
      animation: vnDrawerTopShrink linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 80px;
    }
  }


  /* NOTE: No global .btn overrides. The site's existing button styles are
     fine — earlier global .btn rules inflated padding/size on every
     button across the entire site. Only override buttons where explicitly
     needed (e.g. the fixed tour-detail CTA). */


  /* ============================================================
     HOMEPAGE — scoped via .tour_grid + .wrap.awards
     ============================================================ */

  /* Collapse the header CTA wrap so it takes no space, but children
     remain visible if present on other templates. */
  .js .header_cta__wrap {
    height: 0;
    padding: 0;
    margin: 0;
    border: 0;
    overflow: visible;
  }

  /* H1. Hero: shrink heading, clip wall-of-text, raise contrast (CARP: Contrast).
     The hero image is a vibe/atmosphere background, not content the user
     needs to study — so tighten vertical padding around the H1 to half.
     Visual centering: zero out h1's bottom margin and equalise the wrapper
     padding-top/bottom so the h1 sits visually centered in its breathing room. */
  .js .top_block .main_heading {
    font-size: 1.85em;
    line-height: 1.18;
    text-shadow: 0 2px 12px rgba(0,0,0,0.55);
    margin: 0;
  }
  .js .top_block .main_heading__wrapper {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
  }
  .js .top_block .intro_text p:nth-of-type(n+2) {
    display: none;
  }
  .js .top_block .intro_text p:first-of-type {
    font-size: 0.95em;
    line-height: 1.4;
  }

  /* H2. Awards row — all 6 across in a single row on mobile.
     Structure: .wrap.awards > section > article.awards__item > img */
  .js .wrap.awards > section {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: nowrap;
    padding: 0;
    gap: 4px;
  }
  .js .wrap.awards {
    margin-bottom: 1rem;
  }
  .js .wrap.awards .awards__item {
    flex: 1 1 0;
    min-width: 0;
  }
  .js .wrap.awards .awards__item img {
    width: 100%;
    height: auto !important;
    display: block;
  }

  /* H3. Tour cards → horizontal swipe carousel.
         Pure CSS scroll-snap. Works in every mobile browser since 2018.
         CARP: Proximity (cards close together within carousel),
         Alignment (all cards share consistent dimensions). */
  .js .tour_grid > section,
  .js .tour_grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding: 0 14px 1.25em;
    scrollbar-width: none;
    scroll-padding-left: 14px;
  }
  .js .tour_grid::-webkit-scrollbar { display: none; }
  .js .tour_grid > section > .tour_grid__item,
  .js .tour_grid > .tour_grid__item {
    flex: 0 0 82%;
    scroll-snap-align: start;
    margin-right: 0;
    display: flex;
    flex-direction: column;
  }
  /* Card images: wide landscape ratio (3:1) for a strong visual band
     across the top of each card (CARP: Repetition + Proximity) */
  .js .tour_grid__item img {
    aspect-ratio: 3;
    object-fit: cover;
    width: 100%;
    height: auto;
    display: block;
  }
  /* Tighten the H2 in each card so titles wrap less while keeping
     the visual hierarchy (still bigger than body text). */
  .js .tour_grid__item h2,
  .js .tour_grid__header h2 {
    font-size: 1.05em;
    line-height: 1.2;
    margin: 0 0 0.4em 0;
  }
  /* Card body row: description on the LEFT, View Tour button on the RIGHT.
     Reduces vertical card height significantly and gives a horizontal
     read-then-act flow. CARP: Proximity (description and CTA grouped). */
  .js .tour_grid__item .tour_grid__white_bg {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 0.75em;
  }
  .js .tour_grid__item .tour_grid__content_wrapper {
    flex: 1 1 auto;
    min-width: 0;
  }
  .js .tour_grid__item .tour_grid__summary {
    margin: 0;
    padding: 0;
    max-height: 8.2rem;
    overflow: hidden;
    position: relative;
    transition: max-height 0.4s ease;
  }
  .js .tour_grid__item .tour_grid__summary:focus {
    max-height: 40rem;
    outline: none;
    transition: max-height 0.4s ease;
  }
  .js .tour_grid__item .tour_grid__summary:focus::after {
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .js .tour_grid__item .tour_grid__summary::after {
    content: "Read More";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2.2em;
    background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1) 60%);
    display: flex;
    align-items: flex-end;
    font-size: 0.85em;
    color: #e97c1f;
    font-weight: 600;
    pointer-events: none;
  }
  .js .tour_grid__item .tour_grid__white_bg > .btn,
  .js .tour_grid__item .tour_grid__white_bg > a[class*="btn"] {
    flex: 0 0 auto;
    margin: 0;
    padding: 0 1rem;
    align-self: center;
    white-space: nowrap;
  }
  /* Subtle visual cue that there's more to the right — "Swipe to see more →"
     hint appended via pseudo-element on the parent wrap section.
     We can't reliably add this without a stable parent, so this is a
     best-effort hint via a faint right-edge fade on the carousel. */
  .js .tour_grid {
    mask-image: linear-gradient(to right, black 90%, rgba(0,0,0,0.4) 100%);
    -webkit-mask-image: linear-gradient(to right, black 90%, rgba(0,0,0,0.4) 100%);
  }

  /* H4. Reduce testimonials to first two on mobile */
  .js .testimonial:nth-of-type(n+3) {
    display: none;
  }
  /* NOTE: Removed the generic `.wrap + .wrap` spacing rule that was
     indiscriminately tightening ALL section gaps across the site.
     Let the original site spacing stand — only override specific
     sections where the spacing is demonstrably too large. */


  /* Reduce H2 size so it sits clearly below H1 (~29.6px) and above
     any H3. On mobile the original H2 at 28px is too close to H1
     and wraps excessively. Scoped to .wrap content — footer headings
     keep their own specific rules. */
  .js .wrap h2 {
    font-size: 1.4em;
    line-height: 1.25;
  }


  /* Stronger text-shadow for readability on tour_listing photo backgrounds */
  .js .wrap.tour_listing,
  .js .wrap.tour_listing h2,
  .js .wrap.tour_listing p,
  .js .wrap.tour_listing li,
  .js .wrap.tour_listing .tour_listing__dot_points::before {
    text-shadow: 0px 0px 10px black;
  }
  /* Buttons don't need a text-shadow — clear the inherited one */
  .js .wrap.tour_listing .btn,
  .js .wrap.tour_listing a[class*="btn"] {
    text-shadow: none;
  }


  /* ============================================================
     TOUR ARCHIVE — expandable blurb pattern
     Same truncation + "Read More" + tap-to-focus expand as the homepage
     tour cards, adapted for the dark photo background.

     Requires markup: <p class="tour_listing__blurb needsclick" tabindex="0">
     (needsclick excludes the element from FastClick so single tap focus
     works; tabindex="0" makes the <p> focusable.)
     ============================================================ */
  /* Clip the blurb to 5 lines via explicit max-height (line-height 28px × 5 = 140px).
     Hard max-height + overflow:hidden clips text cleanly with no ellipsis. */
  .js .wrap.tour_listing .tour_listing__blurb {
    max-height: 4rem;
    overflow: hidden;
    transition: max-height 0.4s ease;
  }
  .js .wrap.tour_listing .tour_listing__blurb:focus {
    max-height: 40rem;
    outline: none;
  }
  /* "Read More" lives as a pseudo on the NEXT sibling (the dot_points <ul>),
     so it sits cleanly between the clipped blurb and the metadata list —
     no overlap with the truncated text, no gradient over the photo. */
  .js .wrap.tour_listing .tour_listing__blurb + .tour_listing__dot_points::before {
    content: "Read More";
    display: block;
    font-size: 0.9em;
    color: #e97c1f;
    font-weight: 600;
    margin: 0 0 0.75em;
  }
  /* When the blurb has focus (expanded), hide the "Read More" affordance */
  .js .wrap.tour_listing .tour_listing__blurb:focus + .tour_listing__dot_points::before {
    display: none;
  }

  /* Tighten metadata rows (price, people, dates, departs) to reduce
     vertical space per listing. Also scale the icons down to match the
     tighter text row height. */
  .js .wrap.tour_listing .tour_listing__dot_points {
    margin: 0.5em 0 0.75em;
    padding: 0;
  }
  .js .wrap.tour_listing .tour_listing__dot_points li {
    padding-top: 0;
    padding-left: 26px;
    margin-bottom: 0;
    line-height: 1.4;
    font-size: 0.95em;
    position: relative;
  }
  .js .wrap.tour_listing .tour_listing__dot_points li + li {
    margin-top: 0.35em;
  }
  .js .wrap.tour_listing .tour_listing__dot_points li [class^="icon-"] {
    font-size: 16px;
    line-height: 1;
    top: 2px;
  }

  /* Side-by-side CTAs on mobile — cuts ~100px per listing of vertical space */
  .js .wrap.tour_listing .tour_listing__cta {
    display: flex;
    flex-direction: row;
    gap: 8px;
  }
  .js .wrap.tour_listing .tour_listing__cta .btn,
  .js .wrap.tour_listing .tour_listing__cta a[class*="btn"] {
    flex: 1 1 0;
    min-width: 0;
    height: 50px;
    padding: 0 0.5em;
    white-space: nowrap;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
  }


  /* ============================================================
     INDIVIDUAL TOUR — scoped via .tour_dates__day_container
     ============================================================ */

  /* TD1. Always-visible bottom Book CTA — pin ONLY the "Book this tour"
     button, not the whole booking panel.
     `.tour_dates__cta_wrap` is the entire booking section (heading + paragraph
     + button + price + download link, ~450px tall). Pinning that covers half
     the viewport. Pin only the `.btn--tall` inside it.
     Must use `position: fixed` (not sticky) because `#outer-wrap` has
     `overflow: hidden` for the off-canvas drawer, which kills sticky.
     Selector chain only matches on individual tour detail pages. */
  .js .tour_dates__cta_wrap .btn--tall {
    position: fixed;
    bottom: 12px;
    left: 14px;
    right: 14px;
    width: auto;
    z-index: 50;
    margin: 0;
    background-color: #e97c1f;
    color: #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
    text-align: center;
  }
  /* Reserve bottom space so the last bit of page content isn't hidden under
     the fixed button. Use :has() to scope to tour detail pages only. */
  .js body.labelled_nav:has(.tour_dates__cta_wrap .btn--tall) #inner-wrap {
    padding-bottom: 80px;
  }

  /* TD2. Hide duplicated top sub-menu (bottom version is enough) */
  .js .tour_dates__sub_menu--top {
    display: none;
  }

  /* TD3. Tighten Day N sections so itinerary scans faster (CARP: Proximity) */
  .js .tour_dates__day_container > * + * {
    margin-top: 1em;
  }
  /* NOTE: Removed h2/h3/p styling overrides that changed the Day heading
     from brand-orange to dark green, uppercased "Highlights", and shrunk
     body text. Original styling retained — the brand's orange Day headings
     are intentional and should not be overridden. */


  /* ============================================================
     REGION / BLOG / TEAM — no overrides. Original styling retained.
     Earlier overrides added padding, font-size, and layout changes
     that were made without visual feedback. Reverted to let the
     original mobile styles stand. These can be revisited with
     visual-first iteration if improvements are needed.
     ============================================================ */


  /* ============================================================
     FOOTER — leave original styling intact. Earlier overrides added
     uppercase letter-spacing and tightened padding which didn't
     match the brand's warm natural voice. Reverted.
     ============================================================ */

}

/* ============================================================
   Keyframes for top-bar shrink-on-scroll
   (must live outside @media — keyframes are global definitions)
   ============================================================ */
@keyframes vnTopBarShrink {
  from { height: 112px; }
  to   { height: 56px; }
}
@keyframes vnTopBarSectionShrink {
  from { height: 112px; }
  to   { height: 56px; }
}
@keyframes vnLogoBoxShrink {
  from { height: 112px; }
  to   { height: 56px; }
}
@keyframes vnLogoImgShrink {
  from { height: 60px; }
  to   { height: 30px; }
}
@keyframes vnHeroPaddingShrink {
  from { padding-top: 4em; }
  to   { padding-top: 2em; }
}
@keyframes vnDrawerTopShrink {
  from { top: 112px; }
  to   { top: 56px; }
}