/* ==========================================================================
   AMGB mobile polish v4, additions on top of mobile-v3.css
   --------------------------------------------------------------------------
   Loaded AFTER mobile-v3.css. Author 2026-05-28 (Round 2 mobile polish loop).

   ROOT CAUSE addressed
     v3 rule 7 — the global `a[href^="tel:"], a[href^="mailto:"]` selector
     under @media (max-width: 1023px) — was matching the desktop pill CTA
     in the sticky header (`.amgb-header__cta`, which is a literal
     `<a href="tel:0411108170">`). That forced the gold pill into the
     `display: inline-flex` + `min-height: 44px` shape from v3 even on
     tablet/mobile where chrome.css had it pre-sized differently. The pill
     would stretch awkwardly or sit at the wrong height.

     Fix here: re-scope the tap-target lift to `main` only (or with
     `:not(.amgb-header__cta):not(.amgb-header__phone)` exclusions). Header
     CTAs are owned by chrome.css.

   POLISH GOALS (≤640 px phones, ≤1023 px tablets)
     - Section padding: clamp inline + block
     - Typography minimums: H1, H2, body 16 px, line-height 1.6
     - Card / multi-column grids → single column with 24 px gap
     - Footer columns stack at narrow viewports
     - Sticky header height clamp on mobile (64 px)
     - Hero image scales without overflow
     - Full-bleed primary CTAs at ≤480 px

   Hard rules
     - Header chrome (`.amgb-header *`) is OFF LIMITS — sized in chrome.css
     - All v3 patches preserved — these rules supplement, not override
     - AU English in comments
   ========================================================================== */


/* ============================================================
   1. ROOT-CAUSE FIX — re-scope tel:/mailto: tap-target lift
   ============================================================
   v3 hit the header pill. Restrict to body content (`main`) so chrome.css
   keeps full control of the header CTA shape. */
@media (max-width: 1023px) {
  /* Backstop: undo v3 rule 7 on header CTA + utility-bar phone link */
  .amgb-header__cta,
  .amgb-header__utility a[href^="tel:"],
  .amgb-header__utility a[href^="mailto:"],
  .amgb-header__utility-phone {
    display: inline-flex; /* keep chrome.css shape */
    min-height: 44px;
    padding-top: 0;
    padding-bottom: 0;
  }
  /* The .amgb-header__cta is the gold pill — pad as chrome.css authored */
  .amgb-header__cta {
    padding: 12px 22px;
    min-height: 44px;
  }
}


/* ============================================================
   2. SECTION PADDING — comfortable inline + block on phones / tablets
   ============================================================
   Use clamp() so the values scale smoothly with viewport width. The AMGB
   design already sets 18 px inline padding on `.amgb-home__container` /
   `.amgb-home__hero-inner` etc. in mobile.css. v4 lifts that to a clamp()
   on the OUTER section block padding (block-axis) plus the inner-container
   inline padding so the floor is 16 px on the smallest phones and grows
   smoothly up to 32 px on tablets.

   Real class system on this site: `.amgb-home__*`, `.amgb-buy__*`,
   `.amgb-how__*`, `.amgb-test__*`, `.amgb-about__*`, `.amgb-faq__*`,
   `.amgb-contact__*`, `.amgb-sell__*`, `.amgb-parties__*`, `.amgb-insights__*`. */
@media (max-width: 1023px) {
  /* Inline padding on inner containers — bump from 18 px to a clamp floor */
  main .amgb-home__container,
  main .amgb-home__container--narrow,
  main .amgb-home__hero-inner,
  main .amgb-page__container,
  main .amgb-page__container--wide,
  main .amgb-buy__container,
  main .amgb-how__container,
  main .amgb-test__container,
  main .amgb-about__container,
  main .amgb-faq__container,
  main .amgb-contact__container,
  main .amgb-sell__container,
  main .amgb-parties__container,
  main .amgb-insights__container {
    padding-left: clamp(16px, 5vw, 32px);
    padding-right: clamp(16px, 5vw, 32px);
  }
  /* Block padding on outer sections — clamp 48-80 px */
  main .amgb-home__section,
  main .amgb-home__hero,
  main .amgb-page__section,
  main .amgb-section,
  main .amgb-buy__hero,
  main .amgb-buy__section,
  main .amgb-how__hero,
  main .amgb-how__section,
  main .amgb-test__hero,
  main .amgb-test__section,
  main .amgb-about__hero,
  main .amgb-about__section,
  main .amgb-faq__hero,
  main .amgb-faq__section,
  main .amgb-contact__hero,
  main .amgb-contact__section,
  main .amgb-sell__hero,
  main .amgb-sell__section,
  main .amgb-parties__hero,
  main .amgb-parties__section,
  main .amgb-insights__hero,
  main .amgb-insights__section,
  main section[class*="amgb-"]:not([class*="header"]):not([class*="footer"]) {
    padding-top: clamp(48px, 8vw, 80px);
    padding-bottom: clamp(48px, 8vw, 80px);
  }
}


/* ============================================================
   3. TYPOGRAPHY MINIMUMS — readable text on small screens
   ============================================================
   H1 32–40 px, H2 24–32 px, body 16 px floor, line-height 1.6.
   Scoped to `main` so the dark drawer-nav (22 px H2-shape labels) and
   footer headings aren't overridden. */
@media (max-width: 1023px) {
  main h1,
  main .amgb-h1 {
    font-size: clamp(32px, 8vw, 40px);
    line-height: 1.15;
  }
  main h2,
  main .amgb-h2 {
    font-size: clamp(24px, 6vw, 32px);
    line-height: 1.2;
  }
  main p,
  main li,
  main .amgb-body,
  main blockquote {
    font-size: max(16px, 1rem);
    line-height: 1.6;
  }
}


/* ============================================================
   4. CARD-STACK / GRID COLLAPSE — single column on phones
   ============================================================
   Catches the AMGB grid utilities and any Elementor multi-column patterns.
   Footer grid is intentionally NOT touched here — chrome.css already
   handles its responsive collapse at 640 / 1024 px. */
@media (max-width: 640px) {
  main .amgb-grid,
  main .amgb-grid-2,
  main .amgb-grid-3,
  main .amgb-grid-4,
  main [class*="amgb-grid"],
  main .amgb-page__grid,
  main .amgb-cards,
  main .amgb-card-row,
  main [class*="card-grid"],
  main [class*="__grid"]:not([class*="amgb-footer__"]),
  main .elementor-row,
  main .e-con.e-flex.e-con--row {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }
  /* Flex-row to flex-column for non-grid card rows */
  main .amgb-cards.flex,
  main [class*="card-row"][class*="flex"] {
    flex-direction: column;
  }
}


/* ============================================================
   5. FOOTER COLUMN STACK — single column on phones
   ============================================================
   chrome.css collapses .amgb-footer__grid to a single column at the
   default mobile width already, but reinforce the inner padding here to
   guarantee a 24 px gutter even when the host page CSS overrides it. */
@media (max-width: 640px) {
  .amgb-footer__inner {
    padding: 48px 24px 24px;
  }
  .amgb-footer__cta {
    padding: 24px;
    margin-bottom: 40px;
  }
  .amgb-footer__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}


/* ============================================================
   6. CTA SIZING — 48 px floor; full-bleed primaries on tiny screens
   ============================================================
   Reinforces v3 tertiary-link minimum (44 px) with a 48 px buttoned-CTA
   floor on mobile/tablet (excluding header), per WCAG 2.5.8 Enhanced.
   Header pill is excluded via `main` scope. */
@media (max-width: 1023px) {
  main .amgb-btn,
  main .amgb-btn-primary,
  main .amgb-btn-secondary {
    min-height: 48px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  /* Tel/mailto in body copy still gets the v3 44 px lift, but now correctly
     scoped to `main` so the header pill is exempt. */
  main a[href^="tel:"],
  main a[href^="mailto:"] {
    min-height: 44px;
  }
}

/* Full-bleed primary on the smallest phones (≤480 px) */
@media (max-width: 480px) {
  main .amgb-btn-primary,
  main .amgb-page__cta-row .amgb-btn-primary,
  main .amgb-page__cta-block .amgb-btn-primary,
  main [class*="cta"] .amgb-btn-primary {
    width: 100%;
    justify-content: center;
  }
}


/* ============================================================
   7. STICKY HEADER HEIGHT — clamp on mobile
   ============================================================
   chrome.css has a 76 px bar + 36 px utility (~112 px). On phones the
   utility strip is hidden and the bar should sit at 64 px. */
@media (max-width: 768px) {
  .amgb-header {
    height: 64px !important;
  }
  .amgb-header__bar {
    min-height: 64px;
    padding: 10px 16px;
  }
  .amgb-header__utility {
    display: none; /* premium-strip is desktop-only on phones */
  }
  /* Re-adjust the body offset so hero isn't tucked under the bar */
  .amgb-page-offset {
    padding-top: 72px;
  }
}


/* ============================================================
   8. HERO IMAGE — never overflow
   ============================================================
   Covers .amgb-page__hero, generic hero classes and the v2 LCP <img>
   markup. */
@media (max-width: 1023px) {
  main .amgb-page__hero img,
  main [class*="hero"] img,
  main .amgb-hero img,
  main .amgb-page__hero picture,
  main [class*="hero"] picture {
    max-width: 100%;
    height: auto;
  }
}