/* ==========================================================================
   responsive.css — Global mobile responsive rules (≤ 767px)
   --------------------------------------------------------------------------
   Loaded AFTER components.css (and before page styles) so these mobile
   overrides win the cascade over base component rules.

   Mobile policy:
     • Center all titles (h1, h2), short structural content, buttons,
       images and the entire footer (including titles + bottom bar).
     • Long-form prose (.longform) keeps natural reading alignment.
   ========================================================================== */

@media (max-width: 767px) {

  /* ---------------------------------------------------------------------
     1. Headings — every h1/h2 (and section/footer titles) centered.
     --------------------------------------------------------------------- */
  h1,
  h2,
  .section-title,
  .hero__title,
  .footer__title {
    text-align: center;
  }

  /* Section header block + its short lead */
  .section-head {
    text-align: center;
    margin-inline: auto;
  }
  .section-head .section-title,
  .section-head .section-lead {
    margin-inline: auto;
  }

  /* ---------------------------------------------------------------------
     2. Buttons / CTA groups centered.
     --------------------------------------------------------------------- */
  .cta-row {
    justify-content: center;
  }

  /* ---------------------------------------------------------------------
     3. Footer — fully centered (brand, links, social, titles, bottom bar).
     --------------------------------------------------------------------- */
  .footer__grid {
    text-align: center;
  }
  .footer__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .footer__tagline {
    margin-inline: auto;
  }
  .footer__links {
    align-items: center;
  }
  .footer__social {
    justify-content: center;
  }
  .footer__title {
    text-align: center;
  }
  .footer__bottom {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .footer__bottom p {
    inline-size: 100%;
  }

  /* ---------------------------------------------------------------------
     4. Long-form prose always keeps natural reading alignment.
     --------------------------------------------------------------------- */
  .longform,
  .longform * {
    text-align: start;
  }
}