/* =========================================================== */
/* AG Mobile Centering — §6C ENFORCEMENT NET (≤900), retrofit  */
/* Center-is-base override for the bespoke ea-* build. Loaded   */
/* LAST so it wins over component left-aligns. Everything        */
/* centers at 900 and below: headings, body, CTAs, cards, media, */
/* footer. Opt out only via [data-ag-center-exempt]. (v2.7)      */
/* =========================================================== */
@media (max-width: 900px) {
  /* --- text: center everything (beats ea-* class rules) --- */
  main, section, footer, .ea-footer, .ea-header,
  h1, h2, h3, h4, h5, h6, p, li, blockquote, figcaption,
  [class*="eyebrow"], [class*="-label"], [class*="-tag"], [class*="-title"],
  [class*="-story"], [class*="-client"], [class*="-lead"], [class*="-meta"],
  [class*="-copy"], [class*="-body"], [class*="-text"], [class*="-name"] {
    text-align: center !important;
  }

  /* --- block centering: media + capped text blocks sit centered in their track --- */
  main img, main video, section img, section video,
  [class*="-card"], [class*="-content"], [class*="-inner"],
  [class*="-copy"], [class*="-body"], [class*="-text"], [class*="-lead"] {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* --- flex/grid columns center their children horizontally --- */
  [class*="-cards"], [class*="-list"], [class*="-col"], [class*="-content"],
  [class*="-inner"], [class*="-meta"], [class*="-details"], [class*="-actions"],
  [class*="-cta"], [class*="-buttons"] {
    align-items: center !important;
    justify-items: center !important;
  }

  /* --- exemption (documented per-project) --- */
  [data-ag-center-exempt], [data-ag-center-exempt] * { text-align: left !important; }
}

/* Touch active-state (§6C companion) */
@media (hover: none) {
  a:active, button:active, [role="button"]:active {
    opacity: 0.63;
    transition: opacity 0.21s cubic-bezier(0.22, 1, 0.36, 1);
  }
}