/* fp-services-grid.css — Homepage services grid layout
   Forces a clean 4-across grid on desktop so the 16 service
   tiles render as an even 4×4 block. Tablet keeps a balanced
   auto-fill; mobile is left untouched (stays 2-up = 2×8).
   Deploy: v40 · June 2026 */

/* Desktop (≥901px): exactly 4 columns → 4×4 for 16 tiles */
@media (min-width: 901px) {
  .services-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    max-width: var(--max-w, 1200px);
    margin-left: auto;
    margin-right: auto;
  }
}

/* Tablet (641–900px): 3 across reads cleanly at this width */
@media (min-width: 641px) and (max-width: 900px) {
  .services-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Mobile (≤640px): intentionally NOT overridden.
   Base stylesheet already yields a 2-column layout
   (auto-fill, minmax(140px,1fr)) = 2×8 for 16 tiles. */

/* ─────────────────────────────────────────────────────────────
   Service-tile TITLES — v75 (Astro-6 era, 2026-06-25; rev 2)
   The 16 service buttons are wordless glass-button IMAGES (the
   title used to be baked into the button art). A visible label
   sits ABOVE each button — slightly smaller than body, ALL CAPS,
   with a touch of letter-spacing so it reads as a clean tile
   header. Order in markup: <h3 .service-title> → <img> → <span
   .service-tags>. Mobile shrinks a hair so two-word titles don't
   wrap awkwardly on the 2-up grid.
   ───────────────────────────────────────────────────────────── */
.service-card .service-title {
  font-family: var(--fp-sans);
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #16323b;
  line-height: 1.25;
  margin: 0 0 .4rem;
  text-shadow: none;
  /* Every title is authored as exactly TWO lines (hard <br>), shortened
     so each line fits the narrow mobile column at a readable size. Reserve
     2 lines and center, so all buttons start on the same line. */
  height: calc(1.25em * 2);
  text-align: center;
}
/* Title sits above the button; give the image a little top room */
.service-card img { margin-top: .1rem; margin-bottom: .15rem; }

@media (max-width: 640px) {
  .service-card .service-title {
    font-size: .72rem;
    letter-spacing: .03em;
    margin-bottom: .3rem;
  }
}

/* ─────────────────────────────────────────────────────────────
   Service-tile SUBTITLE uniform height — v75 (2026-06-25)
   The symptom-tags subtitle wraps to 2 or 3 lines depending on
   length, which made cards in a row different heights (e.g. the
   H-Wave tile's 3-line "nerve pain · neuropathy · poor circulation"
   next to a 2-line neighbor looked unbalanced). Reserve the worst
   case (3 lines) so every card is the same height and the grid is
   visually even. Top-align so the text sits directly under the
   button rather than floating.
   ───────────────────────────────────────────────────────────── */
.service-card .service-tags {
  min-height: calc(1.4em * 3);
}
@media (max-width: 640px) {
  .service-card .service-tags {
    min-height: calc(1.4em * 3);
  }
}

/* ─────────────────────────────────────────────────────────────
   In-grid GROUP HEADINGS / elegant separators — v77 (2026-06-25)
   The tiles are organized into clinical groups, surgical first.
   Each group is introduced by a full-width heading that spans all
   grid columns. The heading uses a centered label flanked by thin
   horizontal rules (an elegant "section divider" treatment). The
   FIRST heading (top of the section) omits the extra top spacing
   so it reads as a lead header, not a divider between blocks.
   ───────────────────────────────────────────────────────────── */
.services-grid .services-subhead {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 2rem 0 .4rem;
  font-family: var(--fp-sans);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 1rem;
  color: #16323b;
  white-space: nowrap;
}
/* Thin flanking rules on each side of the centered label */
.services-grid .services-subhead::before,
.services-grid .services-subhead::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(
    to var(--dir, right),
    rgba(22, 50, 59, 0) 0%,
    rgba(22, 50, 59, .22) 100%
  );
}
.services-grid .services-subhead::before { --dir: left; }
/* The first group heading leads the section — tighten its top margin */
.services-grid .services-subhead:first-child {
  margin-top: .25rem;
}
/* A small teal diamond accent could be added, but keep it clean. */

@media (max-width: 640px) {
  .services-grid .services-subhead {
    font-size: .86rem;
    letter-spacing: .08em;
    gap: .6rem;
    margin: 1.5rem 0 .3rem;
  }
  .services-grid .services-subhead:first-child {
    margin-top: .25rem;
  }
}