/* ================================================================
   PARISH HOME — "Parish News" cards (utility section)
   Gantry Page Settings CSS asset on outline 17 (home page only).
   Priority 0 => loads last, after the "Override" row (priority 1).

   WHY THIS FILE EXISTS
     override-cl.css caps every card in a .ph-small-box array:
         .ph-small-box .g-content-array > .g-grid { flex: 1; max-width: 18vw }
     18vw = 230px at a 1280 viewport and 180px at 1000, so the three
     Parish News cards sat bunched in the middle of their own column
     with dead space either side. override-cl.css belongs to the Solutio
     team and sits outside the agent FTP write root, hence this override.

   WHAT THIS DOES
     At tablet and up (>= 51rem) the cards spread out to fill the column
     and wrap onto another row when they no longer fit: 3 across from
     ~1160px up, 2 across on the rest of the tablet range, with the third
     card wrapping to the next row. Below 51rem the array is untouched,
     so the phone layout (3 fixed tracks that side-scroll) is unchanged.

   WHY 280px AND NOT 17.5rem
     This theme scales the ROOT font-size, so a rem value is not stable:
     measured html font-size is 16px at phone and at >=1216px, but 12.8px
     across the tablet range and 14.4px around 1000px. A rem-based
     minimum would therefore mean anything from 204.8px to 256px and the
     column count would flip back and forth as the viewport grows.
     280px keeps every card at 300px+ at every width, and makes the
     2-across -> 3-across switch happen once, at about 1160px.

   WHAT THIS DELIBERATELY DOES NOT DO
     - No image sizing here: aspect ratios stay exactly as they were
       (.ph-small-box.ph-standard = 4/3), so the pictures simply get
       bigger as the cards do.
     - The ads rail is not moved. It keeps its own 20% block beside this
       one and nothing in this file touches it.
   ================================================================ */

@media only all and (min-width: 51rem) {

  /* spread the cards across the full width of their own column */
  html body #g-utility .ph-small-box .g-content-array {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    justify-content: stretch !important;
    gap: 1vw !important;
  }

  /* undo the 18vw cap that kept each card narrow */
  html body #g-utility .ph-small-box .g-content-array > .g-grid {
    max-width: none !important;
    min-width: 0 !important;
  }
}