/* ==========================================================================
   AMGB mobile polish v2, additions on top of mobile.css
   --------------------------------------------------------------------------
   Loaded AFTER mobile.css. Adds breakpoint coverage that v1 missed:
     - 415-639 px       Large phones, iPhone 16 Pro Max 430, Pixel 8 Pro 412
     - Tablet portrait  iPad 810, iPad Pro 11" 834
     - Tablet landscape iPad Pro 11" 1194, iPad Pro 13" 1366
     - Landscape phones ≤932 high in landscape (iPhone Pro Max 932×430)
     - Ultra-wide       ≥1920

   Full-width rule enforcement:
     Section backgrounds extend edge-to-edge already (sections are not
     constrained by .amgb-page__container, only their inner content is). This
     file keeps that contract intact while widening container padding for
     comfortable reading at larger viewports.
   ========================================================================== */

/* --- 415 to 639, large phones, phablets ----------------------------------- */
@media (min-width: 415px) and (max-width: 639px) {
  .amgb-page__container,
  .amgb-page__container--narrow,
  .amgb-page__container--wide,
  .amgb-home__container,
  .amgb-home__container--narrow {
    padding-left: 22px;
    padding-right: 22px;
  }

  /* CTAs side-by-side when there's room (above 414, button text still fits) */
  .amgb-home__cta-row,
  .amgb-page__cta-row {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* --- 640 to 767, large phablets / small tablets portrait ------------------ */
@media (min-width: 640px) and (max-width: 767px) {
  .amgb-page__container,
  .amgb-page__container--narrow,
  .amgb-page__container--wide,
  .amgb-home__container,
  .amgb-home__container--narrow {
    padding-left: 28px;
    padding-right: 28px;
  }
}

/* --- 768 to 1023, tablet portrait, iPad 810, iPad Pro 11" 834 ------------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .amgb-page__container,
  .amgb-home__container {
    padding-left: clamp(32px, 5vw, 48px);
    padding-right: clamp(32px, 5vw, 48px);
  }

  /* Two-column grids that hero blocks default to should stack on tablet portrait
     where the screen is still narrow vertically. Hero text first, photo below. */
  .amgb-home__hero-grid,
  .amgb-buy__hero-grid,
  .amgb-how__hero-grid,
  .amgb-about__hero-grid,
  .amgb-sell__hero-grid,
  .amgb-gold__hero-grid,
  .amgb-contact__hero-grid {
    grid-template-columns: 1fr;
  }
}

/* --- 1024 to 1279, tablet landscape, small laptops ------------------------ */
@media (min-width: 1024px) and (max-width: 1279px) {
  .amgb-page__container,
  .amgb-home__container {
    padding-left: clamp(40px, 4vw, 56px);
    padding-right: clamp(40px, 4vw, 56px);
  }
}

/* --- 1280 to 1439, standard desktop --------------------------------------- */
@media (min-width: 1280px) and (max-width: 1439px) {
  .amgb-page__container,
  .amgb-home__container {
    padding-left: clamp(48px, 4vw, 64px);
    padding-right: clamp(48px, 4vw, 64px);
  }
}

/* --- 1440+, wide desktop, full-bleed backgrounds, container caps ---------- */
@media (min-width: 1440px) {
  /* Container content stays comfortable, never wider than 1320 even on 4K. */
  .amgb-page__container { max-width: 1240px; }
  .amgb-page__container--wide { max-width: 1360px; }
}

/* --- 1920+, ultra-wide. Keep section backgrounds full-bleed --------------- */
@media (min-width: 1920px) {
  .amgb-page__container,
  .amgb-home__container {
    padding-left: clamp(64px, 4vw, 96px);
    padding-right: clamp(64px, 4vw, 96px);
  }
}

/* --- Landscape phones, height ≤480 ---------------------------------------- */
@media (max-height: 480px) and (orientation: landscape) {
  /* Hero sections collapse vertically so the hero CTA stays in view. */
  .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-gold__hero,
  .amgb-insights__hero {
    padding-top: var(--amgb-space-7, 32px);
    padding-bottom: var(--amgb-space-7, 32px);
    min-height: 0;
  }

  .amgb-home__hero-photo,
  .amgb-buy__hero-photo,
  .amgb-about__hero-photo,
  .amgb-contact__hero-photo,
  .amgb-gold__hero-photo {
    max-height: 220px;
    object-fit: cover;
  }
}

/* --- Belt-and-braces, no horizontal scroll at any viewport ---------------- */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* --- Photography always responsive (catches any per-page overrides) ------- */
img {
  max-width: 100%;
  height: auto;
}