/* ==========================================================================
   AMGB mobile polish
   Targeted overrides for screens ≤ 414px CSS pixels.
   iPhone 16 Pro is 402×874 logical px so it falls into this band.
   --------------------------------------------------------------------------
   The rest of the codebase is already mobile-first, the breakpoints just
   start at 414px. This file tunes the band BELOW 414 for the latest small
   iPhones and Android phones in the 360-414 range.

   Load order: after tokens.css, shared.css, amgb-anim.css and the per-page
   page.css. Used as a global stylesheet, no per-page changes needed.
   ========================================================================== */

@media (max-width: 414px) {

  /* --- Layout: tighter container, lighter section vertical rhythm ------- */
  .amgb-page__container,
  .amgb-page__container--narrow,
  .amgb-page__container--wide,
  .amgb-home__container,
  .amgb-home__container--narrow {
    padding-left: 18px;
    padding-right: 18px;
  }

  .amgb-page__section,
  .amgb-home__section,
  .amgb-home__hero,
  .amgb-buy__hero,
  .amgb-how__hero,
  .amgb-test__hero,
  .amgb-about__hero,
  .amgb-faq__hero,
  .amgb-contact__hero,
  .amgb-sell__hero,
  .amgb-insights__hero,
  .amgb-home__signed {
    padding-top: var(--amgb-space-10);
    padding-bottom: var(--amgb-space-10);
  }

  .amgb-page__section-head,
  .amgb-home__section-head {
    margin-bottom: var(--amgb-space-7);
  }

  /* --- Type: scale down headings, keep body at 16+ ---------------------- */
  .amgb-page__h1,
  .amgb-home__h1 {
    font-size: 32px;
    line-height: 1.12;
    letter-spacing: -0.015em;
  }
  .amgb-page__h2,
  .amgb-home__h2 {
    font-size: 26px;
    line-height: 1.18;
  }
  .amgb-page__h3,
  .amgb-home__h3 {
    font-size: 19px;
  }
  .amgb-page__lede,
  .amgb-home__lede {
    font-size: 16px;
    line-height: 1.55;
    margin-bottom: var(--amgb-space-5);
  }
  .amgb-page__section-lede {
    font-size: 15px;
    line-height: 1.55;
  }
  .amgb-page__eyebrow {
    font-size: 12px;
    letter-spacing: 0.14em;
  }

  /* --- CTA row: stack always, primary button reflows the long label ----- */
  .amgb-page__cta-row,
  .amgb-home__cta-row,
  .amgb-home__close-ctas {
    flex-direction: column;
    gap: 10px;
  }
  .amgb-page__cta-row > .amgb-btn-primary,
  .amgb-page__cta-row > .amgb-btn-secondary,
  .amgb-home__cta-row > .amgb-btn-primary,
  .amgb-home__cta-row > .amgb-btn-secondary,
  .amgb-home__close-ctas > .amgb-btn-primary,
  .amgb-home__close-ctas > .amgb-btn-secondary {
    width: 100%;
    padding: 14px 18px;
    font-size: 14.5px;
    line-height: 1.25;
    letter-spacing: 0.04em;
    /* Allow the long "Call Chris and Sharon, 0411 108 170" to wrap so the
       phone number stays bold on its own line if it has to. */
    white-space: normal;
    text-align: center;
  }
  .amgb-page__cta-call span,
  .amgb-home__cta-call span {
    display: inline;
  }
  .amgb-page__cta-number {
    white-space: nowrap;
    display: inline-block;
  }

  /* --- Hero photos: taller crop so faces aren't tiny -------------------- */
  .amgb-home__hero-photo,
  .amgb-page__hero-photo {
    aspect-ratio: 5 / 4;
    border-radius: var(--amgb-radius-lg);
  }
  .amgb-home__hero-photo::after,
  .amgb-home__signed-frame {
    inset: 8px;
    border-radius: calc(var(--amgb-radius-lg) - 4px);
    box-shadow: inset 0 0 0 3px rgba(252, 247, 241, 0.88);
  }
  .amgb-home__hero-caption,
  .amgb-page__hero-caption {
    padding: 6px 12px;
    font-size: 12px;
    left: 10px;
    bottom: 10px;
  }
  .amgb-home__hero-caption svg,
  .amgb-page__hero-caption svg { width: 14px; height: 14px; }

  /* --- Personal greeting band on /, tighter --- */
  .amgb-home__signed-h2 {
    font-size: 24px;
    line-height: 1.3;
  }
  .amgb-home__signed-body { font-size: 16px; line-height: 1.65; }
  .amgb-home__signed-script { font-size: 26px; }

  /* --- Cards across the site: smaller padding, retain breathing room --- */
  .amgb-card,
  .amgb-home__pillar,
  .amgb-home__step,
  .amgb-home__what-tile,
  .amgb-home__price-row,
  .amgb-buy__tile,
  .amgb-buy__cannot-item,
  .amgb-buy__cat-grid > div,
  .amgb-how__flow-card,
  .amgb-how__step,
  .amgb-how__id-card,
  .amgb-how__paymode > div,
  .amgb-about__col-bad,
  .amgb-about__col-good,
  .amgb-about__car-card,
  .amgb-about__comm-grid article,
  .amgb-contact__info,
  .amgb-contact__form-area,
  .amgb-contact__priv-grid article,
  .amgb-test__card,
  .amgb-test__pillar,
  .amgb-test__live-card,
  .amgb-test__theme-grid > li,
  .amgb-faq__item,
  .amgb-party__how-card,
  .amgb-party__story-card,
  .amgb-party__host-list li,
  .amgb-party__hero-panel,
  .amgb-insights__card,
  .amgb-insights__hero-card,
  .amgb-insights__news-card,
  .amgb-sell__hero-callout,
  .amgb-sell__what-grid article {
    padding: 20px;
  }

  /* FAQ summary: keep big tap target, smaller type so it doesn't shout */
  .amgb-faq__q,
  .amgb-home__faq-q {
    font-size: 16px;
    padding: 16px 18px;
    gap: 14px;
  }
  .amgb-faq__a,
  .amgb-home__faq-a {
    font-size: 15px;
    padding: 0 18px 18px;
  }

  /* --- Header eyebrows and section heads tighter ---------------------- */
  .amgb-page__section-head .amgb-page__section-lede,
  .amgb-home__section-head .amgb-home__section-lede {
    font-size: 15px;
  }

  /* --- Testimonials stat card: shrink the giant rating number ---------- */
  .amgb-test__stat-card {
    padding: 24px 20px 28px;
    max-width: 100%;
  }
  .amgb-test__stat-rating { font-size: 56px; }
  .amgb-test__stat-count { font-size: 16px; }
  .amgb-test__stat-cta { padding: 12px 20px; font-size: 14px; }

  /* --- Live review cards: tighter avatar+head row --------------------- */
  .amgb-test__live-head { grid-template-columns: 38px 1fr auto; gap: 10px; }
  .amgb-test__live-avatar { width: 38px; height: 38px; font-size: 14px; }
  .amgb-test__live-name { font-size: 14px; }
  .amgb-test__live-time { font-size: 12px; }
  .amgb-test__live-text { font-size: 14.5px; line-height: 1.6; }

  /* --- Featured pull-quote (home + testimonials) ---------------------- */
  .amgb-home__test-feature,
  .amgb-test__featured-card {
    padding: 24px 20px 22px;
  }
  .amgb-home__test-feature-quote,
  .amgb-test__featured-card blockquote {
    padding-left: 0;
    font-size: 16px;
    line-height: 1.6;
  }
  .amgb-home__test-feature-cite { padding-left: 0; }
  .amgb-home__test-feature-mark,
  .amgb-test__quote { display: none; }

  /* --- Service area map: smaller block --------------------------------- */
  .amgb-home__area-map,
  .amgb-contact__map {
    padding: 16px;
  }
  .amgb-home__area-map svg,
  .amgb-contact__map svg {
    max-width: 260px;
    margin: 0 auto;
    display: block;
  }

  /* --- Suburb chips wrap tighter --------------------------------------- */
  .amgb-home__suburbs,
  .amgb-how__suburbs,
  .amgb-about__suburbs,
  .amgb-contact__suburbs {
    gap: 8px;
    grid-template-columns: repeat(2, 1fr);
  }
  .amgb-home__suburbs li,
  .amgb-how__suburbs li,
  .amgb-about__suburbs li,
  .amgb-contact__suburbs li {
    padding: 10px 12px;
    font-size: 13px;
  }

  /* --- Price formula on /sell-gold-silver-jewellery/ ------------------- */
  .amgb-sell__formula { gap: 8px; }
  .amgb-sell__formula-card { padding: 10px 12px; }
  .amgb-sell__formula-op { font-size: 18px; }

  /* --- Process line on /how-it-works/ is already hidden ≤767, fine ----- */

  /* --- About hero: switch to a tighter ratio --------------------------- */
  .amgb-about__hero-photo { aspect-ratio: 4 / 5; }

  /* --- Gold-parties hero panel: reduce padding and add some breathing - */
  .amgb-party__hero { min-height: auto; }
  .amgb-party__hero-wrap { padding: 60px 0 28px; }
  .amgb-party__hero-panel { padding: 22px 20px; }

  /* --- Trust strip / close link text smaller --------------------------- */
  .amgb-home__close-reply,
  .amgb-home__close-links,
  .amgb-test__close-links,
  .amgb-buy__close-links,
  .amgb-how__close-links,
  .amgb-about__close-links,
  .amgb-faq__close-links,
  .amgb-sell__close-links,
  .amgb-party__close-links,
  .amgb-contact__close-links {
    font-size: 13px;
    line-height: 1.55;
  }

  /* --- Section ornamental rules a touch shorter ----------------------- */
  .amgb-home__signed::before,
  .amgb-home__signed::after {
    margin-top: 32px;
    margin-bottom: 32px;
  }

  /* --- Footer hint links wrap better, avoid mid-word break ----------- */
  .amgb-home__test-feature-cite { flex-wrap: wrap; gap: 8px; }
  .amgb-home__test-feature-rule { display: none; }

  /* --- Newsletter form on /insights/ ---------------------------------- */
  .amgb-insights__news-form { gap: 14px; }
  .amgb-insights__news-card { padding: 28px 20px; }

  /* --- Hero meta strip (home) more compact ---------------------------- */
  .amgb-home__hero-meta li,
  .amgb-page__meta li {
    font-size: 14px;
    gap: 8px;
  }

  /* --- Six-tile what-we-buy grid: full-width single-col -------------- */
  .amgb-home__what-grid,
  .amgb-buy__tile-grid {
    grid-template-columns: 1fr;
  }

  /* --- Avoid horizontal scroll from any over-wide element ------------ */
  main, section, .amgb-page__container {
    overflow-x: clip;
  }
}


/* ==========================================================================
   Very small phones, ≤ 360 (older Android, oddments).
   Tighter still, but the same shape.
   ========================================================================== */
@media (max-width: 360px) {
  .amgb-page__h1, .amgb-home__h1 { font-size: 28px; line-height: 1.15; }
  .amgb-page__h2, .amgb-home__h2 { font-size: 22px; }
  .amgb-page__container,
  .amgb-home__container { padding-left: 14px; padding-right: 14px; }
  .amgb-test__stat-rating { font-size: 48px; }
  .amgb-home__cta-call,
  .amgb-page__cta-call { font-size: 13.5px; padding: 12px 14px; }
}
