/* ============================================================
   TCGC pages-a.css
   Page-specific responsive rules for the Builder-A pages:
   About, Ministries index, and the shared ministry-detail layout.

   This is a NEW, additive file (interior.css / home.css / tokens.css /
   base.css / layout.css are NOT touched). It only ports the per-page
   <style> media blocks from the designer mockups 1:1:
     - about.jsx          lines 295-306  (@media max-width:900)
     - ministries.jsx     lines 65-71    (@media max-width:900)
     - ministries-*.jsx   lines 81-87    (@media max-width:900)

   Layout/visual styling is inline on the elements (exactly as the
   designer authored it in JSX); these rules only handle the breakpoints.
   ============================================================ */

/* ---- About sticky anchor nav active state (about.jsx 46-50)
   designer: inactive = muted + transparent underline,
             active   = crimson + 3px crimson bottom border. ---- */
.wc-about .wc-about-nav__link {
  color: #7a6353;
  border-bottom: 3px solid transparent;
}
.wc-about .wc-about-nav__link:hover { color: #B8341B; }
.wc-about .wc-about-nav__link.is-active {
  color: #B8341B;
  border-bottom: 3px solid #B8341B;
}

/* ---- About page (about.jsx 295-306) ---- */
@media (max-width: 900px) {
  .wc-about .wc-two-col       { grid-template-columns: 1fr !important; }
  .wc-about .wc-beliefs-grid  { grid-template-columns: 1fr !important; }
  .wc-about .wc-vision-grid   { grid-template-columns: 1fr !important; }
  .wc-about .wc-team-grid     { grid-template-columns: repeat(2, 1fr) !important; }
  .wc-about .wc-visit-grid    { grid-template-columns: repeat(2, 1fr) !important; }
  .wc-about .wc-faq-grid      { grid-template-columns: 1fr !important; }
  .wc-about .wc-pastor-feature {
    grid-template-columns: 1fr !important;
    text-align: center;
  }
}

/* ---- Ministries index (ministries.jsx 65-71) ---- */
@media (max-width: 900px) {
  .wc-ministries .wc-min-grid { grid-template-columns: 1fr !important; }
  .wc-ministries .wc-min-card { flex-direction: column !important; }
  .wc-ministries .wc-min-img  { width: 100% !important; height: 200px; }
}

/* ---- Shared ministry-detail (ministries-children.jsx 81-87) ----
   Designer collapses BOTH the hero grid and the 1fr/1.5fr content grid
   (.wc-two-col) to one column and shrinks the h1 at 900px — reproduced
   1:1 (ministries-children.jsx 81-87). */
@media (max-width: 900px) {
  .wc-ministry-detail .wc-hero-grid { grid-template-columns: 1fr !important; }
  .wc-ministry-detail .wc-two-col   { grid-template-columns: 1fr !important; }
  .wc-ministry-detail h1            { font-size: 40px !important; }
}

/* ---- Edge padding parity with the designer (40px → 20px on phones).
   Designer mockups use 40px section padding on desktop; the interior
   chrome (interior.css) already drops its own chrome to 20px at 600px.
   Match that for these page bodies so content isn't edge-clipped. ---- */
@media (max-width: 600px) {
  .wc-about > section,
  .wc-ministries > section,
  .wc-ministry-detail > section { padding-left: 20px !important; padding-right: 20px !important; }
  .wc-about .wc-about-nav__inner { padding-left: 20px; padding-right: 20px; }
}