/* Responsive overrides for the components shared across pages —
   Promise ("Why Collectors Choose Us"), Collector Stories
   (testimonials), and Newsletter ("Drop Alerts") are all rendered by
   one PHP function each (inc/automania-promise.php,
   inc/automania-collector-stories.php, inc/automania-newsletter.php)
   and already share their base CSS in automania-shared-sections.css —
   but until now their @media breakpoints were copy-pasted separately
   into automania-home-responsive.css and automania-about-responsive.css,
   which is exactly the kind of duplication that made a single fix need
   editing twice. Consolidated here instead.

   "Our Story" is included too: Home and About each have their own PHP
   markup and class prefix for it (.am-story__* vs .am-about-story__*,
   fed by separate CMB2 fields) rather than one shared render function,
   but the two versions use identical values, so both selectors are
   just listed together below instead of duplicating the rule. */

@media (max-width: 1199px) {
  /* --am-section-y/--am-section-head-y (used by .am-section's own
     vertical padding and .am-section-head's margin-bottom — i.e. every
     one of these shared sections, Related Products included) were only
     ever stepped down inside ".am-homepage"/".am-about" scoped blocks in
     each page's own *-responsive.css. The shop archive and single
     product page have neither ancestor class, so these sections stayed
     locked at the desktop 80px/46px padding at every viewport —
     confirmed live on the product page, 80px top+bottom on a 375px
     phone. Defined on :root here (same values/breakpoints already used
     by Home and About) so every page gets the same step-down. */
  :root {
    --am-section-y: 70px;
    --am-section-head-y: 42px;
  }

  /* .am-newsletter h2 is a flat 48px with no responsive treatment at
     all — confirmed live it was still rendering at 48px at 768px and
     375px while every sibling heading (.am-promise h2, etc.) had
     already shrunk to ~29-30px there, a glaring size mismatch. Reusing
     .am-scale-card strong's exact step values since it's the only other
     element on the same 48px design tier and its numbers were already
     tuned/confirmed. */
  .am-newsletter h2 {
    font-size: 38px;
    line-height: 42px;
  }
}

@media (max-width: 1024px) {
  .am-promise__grid {
    gap: 40px;
  }

  .am-promise h2 {
    margin-bottom: 30px;
  }

  .am-rich-text {
    font-size: 18px;
    line-height: 30px;
    margin-bottom: 28px;
  }
}

/* .am-fluid itself (the shared max-width/centering wrapper every one of
   these sections is rendered inside) had no responsive padding at all
   here — confirmed live on the shop archive and single product pages,
   stuck at the desktop 60px left/right all the way down to mobile,
   while the Home and About templates each separately duplicated this
   same 991/768/575px padding step-down in their own *-responsive.css
   files. Consolidated here so every page using these shared sections
   gets the same padding instead of only the two that happened to
   redeclare it. */
@media (max-width: 991px) {
  .am-fluid {
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media (max-width: 900px) {
  /* The Promise section's 2-column split narrows enough by here that its
     2x2 icon-card grid runs out of room — confirmed live at 870px that
     "Collector Packaging" and "Trusted Community" both overflowed their
     ~164px card (fine at 900px: ~188px card, everything fit). One column
     gives each card the full width of the section's second column. */
  .am-promise-cards {
    --am-card-grid-columns: 1;
  }
}

@media (max-width: 768px) {
  :root {
    --am-section-y: 56px;
    --am-section-head-y: 34px;
  }

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

  /* Story and Promise stay 2-column all the way down to here (both used
     to stack as early as 1199px). */
  .am-story__grid,
  .am-about-story__grid,
  .am-promise__grid {
    grid-template-columns: 1fr;
  }

  .am-promise__grid {
    gap: 46px;
  }

  /* Promise dropped to 1 card-column at 900px because its 2-column
     section layout squeezed the 2x2 icon-card grid — now that Promise
     itself just stacked to full width above, the cards (and the
     Collector Stories testimonial cards, same shared grid mechanism)
     have plenty of room again. */
  .am-testimonial-grid,
  .am-promise-cards {
    --am-card-grid-columns: 2;
  }

  .am-story__image,
  .am-about-story__image {
    max-width: 720px;
  }

  .am-newsletter h2 {
    font-size: 30px;
    line-height: 34px;
  }

  .am-newsletter__box {
    gap: 30px;
    grid-template-columns: 1fr;
    padding: 40px 24px;
  }

  .am-newsletter__form {
    justify-self: stretch;
    max-width: none;
  }
}

@media (max-width: 767px) {
  :root {
    --am-section-y: 48px;
    --am-section-head-y: 30px;
  }

  /* Eyebrow/heading on the left, "View All" link + arrows on the right
     — stacks instead of squeezing both onto one row below 767px. */
  .am-section-head {
    flex-direction: column;
  }

  .am-actions,
  .am-newsletter__form .subscribe-form-home {
    align-items: stretch;
    flex-direction: column;
  }

  .am-newsletter__form .wpcf7-form {
    min-height: 172px;
  }

  .am-newsletter__form .subscribe-form-home {
    gap: 10px;
  }

  .am-newsletter__form .wpcf7-response-output {
    top: 124px;
  }

  .am-newsletter__title img {
    height: 18px;
    margin-bottom: 4px;
    max-width: 48px;
  }

  .am-button,
  .am-newsletter__form input[type="email"],
  .am-newsletter__form input[type="submit"] {
    width: 100%;
  }

  .am-newsletter__form input[type="email"],
  .am-newsletter__form input[type="submit"] {
    border-radius: 6px;
  }
}

@media (max-width: 575px) {
  .am-fluid {
    padding-left: 16px;
    padding-right: 16px;
  }

  .am-testimonial-grid,
  .am-promise-cards {
    --am-card-grid-columns: 1;
  }
}