/* ── Layout helpers — page-specific breakpoint shims, one block per
   class. Real modules (css+js+php) keep their own css/modules/ file. ── */

/* .ec-card — Emergency & Urgent Care cards, SERVICES page (reusable:
   duplicate the groups on other pages and the class travels).
   ≥1551px: 4-across with subgrid rows — titles, numbers, and buttons
   sit on shared lines across all four cards.
   981–1550px: full-width 2×2 grid instead of a lone wrapped card;
   stacked ≤980px untouched. */
@media (min-width: 1551px) {
  /* four equal columns, content centered — the wide gap keeps tracks
     narrow so long titles wrap and fill them (matches the comp) */
  .et_pb_column:has(> .ec-card) {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto auto auto;   /* title / number / button */
    gap: 1.25rem 5rem;
  }
  .et_pb_column:has(> .ec-card) > .ec-card {
    grid-row: 1 / 4;
    display: grid !important;
    grid-template-rows: subgrid;
    justify-items: center;
    width: 100% !important;
  }
}
@media (min-width: 981px) and (max-width: 1550px) {
  .et_pb_column:has(> .ec-card) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem 3rem;
    width: 100% !important;
  }
  .et_pb_column:has(> .ec-card) > .ec-card { width: 100% !important; }
}

/* .pr-card — "A Practice Rooted in Canton" cards, HOME page only.
   Desktop subgrid: images, headings, body, buttons share rows. */
@media (min-width: 1025px) {
  .et_pb_column:has(> .pr-card) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto 1fr auto;
    gap: 1.25rem 2rem;
  }
  .et_pb_column:has(> .pr-card) > .pr-card {
    grid-row: 1 / 5;
    display: grid !important;
    grid-template-rows: subgrid;
    width: 100% !important;
  }
}