/* ==========================================================================
   SERVIZI GRID — Figma homepage 177:2448, y=1317–1997 (kicker + 3 cards)
   Repeating card: image (266h) + number/title/desc, arrow bottom-pinned.
   Card height is fixed (496px, matches Figma exactly at >=768px) — content
   flows from the top and the arrow sits 40px above the card's bottom edge
   via margin-top: auto, so it stays put regardless of description length
   (verified against Figma: all three descriptions differ in line count but
   every arrow sits at the same y=1843).
   ========================================================================== */
.servizi {
  padding-bottom: var(--space-120);   /* gap to the next section (measured ~114) */
}

.servizi__kicker {
  margin: 0 0 32px;                   /* measured: kicker bottom (1355) → card top (1387) */
}

/* --- Card --------------------------------------------------------------- */
.service-card {
  display: flex;
  flex-direction: column;
  height: 496px;
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-frame);
  overflow: hidden;
  background: var(--c-surface);
  transition: border-color var(--dur) var(--ease);
}
.service-card:hover { border-color: var(--c-accent); }

.service-card__media {
  display: block;
  flex: none;
  height: 266px;
  /* .media-zoom sits on the whole card (<a>), so its overflow:hidden clips
     at the *card's* outer edge — it doesn't stop the scaled-up img from
     visually painting over .service-card__body below it, since that's an
     internal overlap between siblings, not content crossing the card's own
     boundary. Clipping here too keeps the zoom inside the photo's own box. */
  overflow: hidden;
}
.service-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  padding: 24px 24px 40px;            /* measured: image→number and side gaps are both 24 */
}
.service-card__num   { margin: 0 0 4px; }
.service-card__title { margin: 0 0 8px; }
.service-card__desc  { margin: 0; }
/* Bottom-pinned via margin-top: auto, right-aligned via align-self — Figma
   sits the arrow flush to the card's right padding (177:2503/2505/2516 all
   land 24px in from the right edge), not under the text on the left. */
.service-card__arrow { align-self: flex-end; margin-top: auto; color: var(--c-accent); }

/* Card width/count come from the shared .grid-3 track (base.css). Height
   only needs to flex below the 1-col breakpoint, where a narrower column
   can wrap the description onto more lines than the fixed 496px allows. */
@media (max-width: 768px) {
  .service-card { height: auto; }
  /* Fixed 20px, not a lower clamp() floor on .t-h3 — that utility is also
     used for the featured-project spec values, which aren't part of this ask. */
  .service-card__title { font-size: 20px; }
}