/* Homepage hero (two-column, 769px and up).
   1) The photo kept its own aspect ratio while the copy column set the
      section's height, so below ~1440px it ended well short of the copy and
      left a grey strip under it (83px at 1270px, 137px at 1024px). It now
      fills the full column height (object-fit crops a little at the sides).
   2) 769-1279px: the headline followed the fluid scale (66px at 1270px,
      53px at 1024px, 52px minimum below that) and read too big in the
      narrowed copy column; set to 40px with a matching line-height across
      the whole two-column range, so it no longer jumps back up to 52px at
      1023px. (1279 rather than 1270 so 1270px is covered whatever
      scrollbar width the browser adds.) */
@media (min-width: 769px) {
  .am-hero__image {
    height: 100%;
  }

  .am-hero__image img {
    display: block;
    height: 100%;
    object-fit: cover;
    object-position: 70% center;
    width: 100%;
  }
}

@media (min-width: 769px) and (max-width: 1279px) {
  .am-hero h1 {
    font-size: 40px;
    letter-spacing: -.5px;
    line-height: 46px;
  }
}

/* 769-1279px: with the photo now filling the full height, the copy column
   needs its own clearance from it — a 24px right padding keeps the text off
   the photo edge — and below 1024px the two CTA buttons (426px together)
   are wider than the 360px copy column, so they wrap instead of running
   underneath the photo. */
@media (min-width: 769px) and (max-width: 1279px) {
  .am-hero .am-hero__copy {
    padding-right: 24px;
  }
}

@media (min-width: 769px) and (max-width: 1023px) {
  .am-hero .am-hero__copy .am-actions {
    flex-wrap: wrap;
    row-gap: 12px;
  }
}


/* Statistics row (1500+ / 800+ / 500+ / 100%): the labels are forced onto
   one line (white-space: nowrap), but between ~770px and ~1280px the four
   columns get narrower than the longest label, so "Iconic Automotive
   Brands" ran past its column and was cut off by the next stat (about 13px
   at 1200px, 46px at 770px). Below 1280px the labels may wrap instead, and
   at 1025-1279px the side padding is trimmed so they wrap to two lines at
   most. 1280px and up keeps the original single-line labels. */
@media (min-width: 769px) and (max-width: 1279px) {
  .am-stat p {
    white-space: normal;
  }
}

@media (min-width: 1025px) and (max-width: 1279px) {
  .am-stat {
    gap: 16px;
    padding: 0 24px;
  }

  .am-stat:first-child {
    padding-left: 0;
  }
}

/* Spacing only (layout unchanged — the text stays on the banner image):
   between tablet and ~1300px the banner is short, so the CTA button sat
   within a few pixels of the car's nose. Lifting the text block a little
   (padding-bottom shifts the vertically centred copy upward) gives it
   room; wider screens already have it, and mobile uses its own layout. */
@media (min-width: 769px) and (max-width: 1299px) {
  .am-collector__inner {
    padding-bottom: 6vw;
  }
}

/* Same idea, tighter: between 769px and 1199px the banner is short enough
   that the text block (about 310-400px tall) still ran onto the car's
   hood/nose even after the lift above — confirmed at 800, 900 and 1024px.
   A more compact text block (smaller gaps, 16px paragraph, 15px button)
   leaves it clear of the car. Layout is unchanged; only sizes/gaps shrink,
   and 1200px+ keeps the original sizes. The selectors are one class more
   specific than the base rules so they win without !important. */
@media (min-width: 769px) and (max-width: 1199px) {
  .am-collector .am-collector__inner {
    padding-bottom: 7vw;
  }

  .am-collector .am-collector__social {
    margin-bottom: 14px;
  }

  .am-collector .am-collector__copy h2 {
    margin-bottom: 14px;
  }

  .am-collector .am-collector__copy .am-rich-text {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 20px;
  }

  .am-collector .am-collector__copy .am-button {
    font-size: 15px;
    line-height: 22px;
    min-height: 44px;
    padding: 0 16px;
  }
}

@media (min-width: 769px) and (max-width: 899px) {
  .am-collector .am-collector__inner {
    padding-bottom: 10vw;
  }
}


@media (max-width: 1199px) {
  .am-homepage {
    --am-h2-size: 48px;
    --am-h2-line-height: 54px;
    --am-h3-size: 27px;
    --am-h3-line-height: 32px;
    --am-h4-size: 21px;
    --am-h4-line-height: 27px;
    --am-section-y: 70px;
    --am-section-head-y: 42px;
  }

  .am-fluid {
    padding-left: 40px;
    padding-right: 40px;
  }

  .am-scale-card strong {
    font-size: 38px;
    line-height: 42px;
  }

  /* Hero stays 2-column all the way down to 768px (see base .am-hero
     .am-fluid) — this was sized for the single-column stack this range
     used to force. The 470px copy width and shrunk buttons it now
     needs are covered by the ≤1399px block below, which already
     stretches down through this range. */
  .am-hero h1 {
    margin-bottom: 38px;
  }

  .am-brand-card--large {
    grid-column: span 2;
  }

  .am-collector {
    background-position: center center;
    min-height: 0;
  }

  .am-collector__inner {
    min-height: 0;
  }

  /* Spacing only: start the text further in as the banner shrinks so it
     clears the rev-counter gauge on the image (a flat 40px put it on top of
     the gauge at tablet-landscape widths). .am-fluid already pads 40px here. */
  .am-collector__copy {
    margin-left: calc(11vw - 40px);
    max-width: 500px;
  }

  .am-instagram-grid {
    --am-card-grid-columns: 3;
  }

  /* The "3 cards + a peek" formula (base rule) produces cards too narrow
     for the shared card component's full-size add-to-cart button between
     roughly 992px and 1199px — confirmed live, price + button (248px
     combined) no longer fit in a card's ~246px purchase row at 1100px,
     causing a horizontal overflow that's easy to miss because it's
     narrower than the row itself. Same threshold the shop archive grid
     already uses for the equivalent squeeze (2 columns at ≤1199px)
     instead of shrinking the button down. */
  .am-product-rail {
    grid-auto-columns: calc(50% - 12px);
  }
}

@media (max-width: 1749px) and (min-width: 1200px) {
  .am-hero h1 {
    margin-bottom: 40px;
  }

  .am-hero__eyebrow {
    margin-bottom: 32px;
  }
}

/* Was "and (min-width: 1200px)" — that left a 1025-1199px gap where
   NEITHER this reduction nor the ≤1024px one applied, falling back to
   full desktop sizing (38px stat numbers, 34px maker names) in a
   column that's already narrower than 1200px+. Confirmed live at
   1199px: the stats row genuinely overflowed the page (scrollWidth
   1307 vs 1184 viewport) because of exactly this gap. The ≤1024px
   block further down still wins below 1024px via source order, so
   widening this one down doesn't fight it. */
@media (max-width: 1399px) {
  .am-hero__copy {
    max-width: 470px;
  }

  /* The copy column narrows to 470px in this band but the two CTA
     buttons were never resized to match — at their full desktop size
     they need ~510px combined and the second one wrapped to its own
     row (confirmed live at 1399px). Shrinking font/padding/gap keeps
     them on one line with room to spare. */
  .am-hero .am-actions .am-button {
    font-size: 16px;
    gap: 8px;
    line-height: 24px;
    padding: 0 20px;
  }

  /* The base grid (repeat(4, auto), sized to content for the nowrap
     labels) doesn't shrink — confirmed live it overflowed the page by
     123px at 1199px. Equal-width columns is what ≤1024px already uses
     successfully; borrowing it here means the existing icon/padding/gap
     don't need their own reduction too, just the font-size below (also
     confirmed live at 1199px and 1025px, both edges of this range). */
  .am-stats__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .am-stat strong {
        font-size: 25px;
   }
   .am-stat p {
     font-size: 13px;
    }

  /* Maker cards only have ~149px to work with for the name + "View
     Collection" link in this band (4-column grid minus the 60px logo
     column) — confirmed live at 1280px that both wrapped to 2 lines at
     their full desktop size ("B. M. Creations" and "View Collection"). */
  .am-maker-card strong {
    font-size: 20px;
    line-height: 22px;
  }

  .am-maker-card em {
    font-size: 15px;
    line-height: 16px;
  }
}

@media (max-width: 1024px) {
  .am-homepage {
    --am-h2-size: 44px;
    --am-h2-line-height: 50px;
    --am-h3-size: 26px;
    --am-h3-line-height: 31px;
    --am-h4-size: 20px;
    --am-h4-line-height: 26px;
  }

  .am-hero__copy {
    max-width: 430px;
    padding: 58px 0;
  }

  .am-hero h1 {
    margin-bottom: 28px;
  }

  .am-hero .am-actions {
    align-items: center;
    flex-wrap: nowrap;
    gap: 12px;
  }

  .am-hero .am-button {
    border-radius: 8px;
    flex: 0 1 auto;
    font-size: 14px;
    gap: 8px;
    line-height: 20px;
    min-height: 48px;
    padding-left: 18px;
    padding-right: 18px;
  }

  .am-hero .am-button img {
    height: 14px;
    width: 14px;
  }

  .am-stats__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .am-stat {
    gap: 12px;
    padding: 0 18px;
  }

  .am-stat:nth-child(2n) {
    border-right: 1px solid #E4E4E7;
  }

  .am-stat:last-child {
    border-right: 0;
  }

  .am-stat > span {
    flex-basis: 44px;
    height: 44px;
  }

  .am-stat strong {
    font-size: 24px;
  }

  .am-stat p {
    font-size: 12px;
  }
}

@media (max-width: 991px) {
  .am-homepage {
    --am-h2-size: 40px;
    --am-h2-line-height: 46px;
    --am-h3-size: 25px;
    --am-h3-line-height: 30px;
    --am-h4-size: 20px;
    --am-h4-line-height: 26px;
  }

  .am-hero__copy {
    max-width: 390px;
  }
}

@media (max-width: 768px) {
  .am-homepage {
    --am-h2-size: 34px;
    --am-h2-line-height: 40px;
    --am-h3-size: 23px;
    --am-h3-line-height: 28px;
    --am-h4-size: 19px;
    --am-h4-line-height: 25px;
    --am-section-y: 56px;
    --am-section-head-y: 34px;
  }
  
  .am-collector {
    aspect-ratio: auto;
  }

  .am-fluid {
    padding-left: 20px;
    padding-right: 20px;
  }

  .am-scale-card strong {
    font-size: 30px;
    line-height: 34px;
  }

  .am-maker-card__body {
    grid-template-columns: minmax(0, 1fr) 70px;
    min-height: 112px;
    padding: 16px 18px 20px;
  }

  .am-maker-card strong {
    font-size: 22px;
    line-height: 26px;
  }

  .am-maker-card__logo,
  .am-maker-card__logo img {
    max-width: 70px;
  }

  .am-section-head {
    display: block;
    margin-bottom: var(--am-section-head-y);
  }

  .am-section-head__right {
    margin-top: 18px;
  }

  .am-view-link {
    display: inline-flex;
  }

  .am-hero .am-fluid {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-right: 20px;
  }

  .am-hero__copy {
    max-width: 100%;
    padding: 56px 0 34px;
  }

  .am-hero__eyebrow {
    margin-bottom: 30px;
  }

  .am-stats__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
  .am-scale-grid,
  .am-maker-grid,
  .am-brand-grid,
  .am-instagram-grid {
    --am-card-grid-columns: 2;
  }

  .am-stat {
    border-bottom: 0;
    border-right: 0;
    padding: 24px 0;
  }

  .am-stat:last-child {
    border-bottom: 0;
  }

  .am-collector {
    background-image: linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.92) 60%, rgba(255,255,255,.72) 100%), var(--am-collector-bg, none);
    background-position: center center;
  }

  /* Phones/small tablets keep the text over the faded banner image, as
     designed; this only gives it breathing room (36px above and below) and
     the stronger white wash above makes it read clearly over the car. */
  .am-collector .am-collector__inner {
    padding-bottom: 36px;
    padding-top: 36px;
  }

  .am-collector__copy {
    margin-left: 0;
    max-width: 430px;
  }

  .am-collector h2 {
    margin-bottom: 20px;
  }

  .am-collector .am-rich-text {
    font-size: 15px;
    line-height: 23px;
    margin-bottom: 28px;
    max-width: 390px;
  }

  .am-promo__card {
    padding: 40px 24px;
  }

  .am-brand-card--large {
    grid-column: span 2;
  }

  .am-brand-grid {
    gap: 22px;
    grid-auto-rows: 300px;
  }

  .am-brand-card {
    padding: 0 20px 24px;
  }

  .am-brand-card--large {
    padding: 0 24px 28px;
  }

  .am-brand-card h3,
  .am-brand-card--large h3 {
    font-size: 24px;
    line-height: 29px;
  }

  .am-brand-logo {
    height: 48px;
    right: 14px;
    top: 14px;
    width: 48px;
  }

  .am-brand-card--large .am-brand-logo {
    height: 58px;
    right: 18px;
    top: 18px;
    width: 58px;
  }

  .am-community .am-section-head {
    margin-bottom: var(--am-section-head-y);
  }

}

@media (max-width: 767px) {
  .am-product-rail {
    grid-auto-columns: 86%;
  }

  .am-homepage {
    --am-h2-size: 30px;
    --am-h2-line-height: 36px;
    --am-h3-size: 22px;
    --am-h3-line-height: 27px;
    --am-h4-size: 18px;
    --am-h4-line-height: 24px;
    --am-section-y: 48px;
    --am-section-head-y: 30px;
  }

  .am-hero h1 {
    margin-bottom: 28px;
  }

  .am-stat:nth-child(2n) {
    border-right: 0;
  }

  .am-hero__eyebrow {
    font-size: 14px;
    margin-bottom: 24px;
  }

  .am-maker-card__body {
    grid-template-columns: minmax(0, 1fr) 64px;
    min-height: 108px;
  }

  .am-maker-card strong {
    font-size: 21px;
    line-height: 25px;
  }

  .am-collector {
    background-image: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.94) 62%, rgba(255,255,255,.78) 100%), var(--am-collector-bg, none);
    background-position: 56% center;
  }

  .am-collector__social {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }

  .am-collector .am-button {
    width: auto;
  }

  .am-instagram-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }
}

@media (max-width: 575px) {
  .am-scale-grid,
  .am-maker-grid,
  .am-brand-grid,
  .am-instagram-grid {
    --am-card-grid-columns: 1;
  }

  .am-brand-card--large {
    grid-column: span 1;
  }

  .am-brand-grid {
    grid-auto-rows: 300px;
  }

  /* Below ~576px the 2-column stat grid doesn't leave enough room for the
     longer labels ("Iconic Automotive Brands") to stay on one line the
     way Figma specs them (white-space: nowrap) — confirmed live the text
     was overflowing its column at 375px. One column per row gives each
     label the full row width instead. */
  .am-stats__grid {
    grid-template-columns: 1fr;
  }

  .am-stat {
    padding: 16px 0;
  }
}

@media (max-width: 330px) {
    .am-homepage {
        --am-h2-size: 28px;
        --am-h2-line-height: 34px;
        --am-h3-size: 21px;
        --am-h3-line-height: 26px;
        --am-h4-size: 17px;
        --am-h4-line-height: 23px;
    }

    .am-stats__grid {
        grid-template-columns: 1fr;
    }

    /* "Start Your Collection Today" at the full button size doesn't fit
       even the full viewport width below 330px (confirmed live at
       320px: button needed 348px). Shrunk font/padding to fit. */
    .am-collector .am-button {
        font-size: 14px;
        gap: 8px;
        line-height: 20px;
        padding: 0 16px;
    }
}