/**
 * Feature grid SDC — structural CSS only (section spacing, max-width
 * container). html_text is pasted as TWO sibling top-level elements — a
 * heading row (its own inline flex/text styling) followed by ONE div that
 * is already `display:grid; grid-template-columns:repeat(4,1fr)` inline
 * (see html/Home.html's services/add-ons sections, html/About.html's stats)
 * — the cards grid is nested a level *inside* that second div, not a set of
 * direct siblings of the heading. `.mk3-fg__cards` must stay a plain block
 * wrapper so those two children stack normally; it must NOT itself be
 * display:grid, or it turns the heading row and the (already-gridded) cards
 * div into two side-by-side grid cells instead of stacked sections — a real
 * bug caught by comparing the live site to the source screenshot.
 */
.mk3-sdc--feature-grid .mk3-fg__inner {
  max-width: 80rem; /* 1280px, matches .mk3-header__wrap / .mk3-footer__top */
  margin: 0 auto;
  /* html/Home.html: padding-top:80px, fixed not fluid — a clamp() here
   * previously undershot to 61–77px across the whole 1024–1300px viewport
   * band (only hit 80px at ≥1333px), a measured, real mismatch. */
  padding: 5rem 3rem 1.25rem;
}

/* html/Home.html uses padding-top:70px for the add-ons instance of this
 * shared component vs 80px for the services instance — this component is
 * used by both with the same clamp() otherwise, so the 10px difference
 * needs its own css_tag variant (field_css_tag: "cols-4 section-tight" on
 * the add-ons paragraph in home.yml) rather than changing the shared rule. */
.mk3-sdc--feature-grid.section-tight .mk3-fg__inner {
  padding-top: 4.375rem;
}

/* About's "stats" instance pastes only ONE top-level child (the grid div,
 * no heading row above it — html/About.html's stats <section> really does
 * contain just the grid, unlike every other feature-grid usage). Verified
 * live with Playwright: in that specific single-child shape, the grid div's
 * own `width:auto` resolves to 0 on initial page load (grid-template-columns
 * then falls back to each column's bare min-content width, packing all 4
 * items into the right edge of the viewport and overflowing it) — the exact
 * same markup with a second sibling *before* it (every other instance)
 * sizes correctly. Root cause not fully pinned down (isolated repros outside
 * this page's full stylesheet/DOM don't reproduce it, and DOM mutation after
 * initial layout doesn't reproduce it either — looks like a real browser
 * quirk in initial auto-width resolution for this specific shape, not a rule
 * in this codebase overriding it), but forcing an explicit width reliably
 * fixes it regardless of child count, so it's applied unconditionally here
 * rather than only for the single-child case. */
.mk3-sdc--feature-grid .mk3-fg__cards > div {
  width: 100%;
}

@media (max-width: 768px) {
  .mk3-sdc--feature-grid .mk3-fg__inner {
    padding: 2.5rem 1.25rem 1rem;
  }

  /* The pasted cards div's own inline grid-template-columns:repeat(4,1fr)
   * has no responsive fallback of its own (html/Home.html is a fixed-width
   * desktop design) — left as-is it renders ~90px-wide illegible cards with
   * content overflowing the viewport on phones. Same fix pattern as
   * testimonials.css: force single-column below 768px on whichever pasted
   * child actually is a grid (harmless no-op on the heading row, which
   * isn't one). */
  .mk3-sdc--feature-grid .mk3-fg__cards > div,
  .mk3-sdc--feature-grid .mk3-fg__cards > div > div {
    grid-template-columns: 1fr !important;
  }
}