/* ==========================================================================
   04 SERVICES — 3x3 photo-top card grid, then a 3-up wide row for the
   remaining three services, then the add-on ledger. 12 images.
   ========================================================================== */

.services { background: var(--surface-page); }

.services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--card-min), 1fr));
  gap: var(--grid-gap);
}

.svc {
  display: flex;
  flex-direction: column;
  background: var(--surface-raised);
  border: var(--border-width-hair) solid var(--border-hairline);
  border-radius: var(--radius-card);
  clip-path: var(--chamfer-clip);
  overflow: hidden;
  transition:
    transform var(--dur-fast) var(--ease-lift),
    background-color var(--dur-fast) var(--ease-state),
    box-shadow var(--dur-fast) var(--ease-lift);
}
.svc:hover {
  transform: translate3d(0, var(--lift-card), 0);
  background: var(--surface-raised-hover);
}
.svc:hover .media img { transform: scale3d(var(--scale-media-hover), var(--scale-media-hover), 1); }
.svc:hover .media::after { background: var(--chamfer-edge), var(--overlay-media-hover); }
.svc:hover .media::before { transform: skewX(var(--sheen-skew)) translate3d(1200%, 0, 0); }

.svc__media {
  aspect-ratio: var(--ratio-card);
  border-start-start-radius: var(--radius-card);
  border-start-end-radius: var(--radius-card);
}
/* the card's chamfer cuts through the photograph, so the hairline that
   replaces the lost border has to be drawn on the layer above the image */
.svc__media::after { background: var(--chamfer-edge), var(--overlay-media); }

.svc__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  flex: 1;
  padding: var(--card-pad);
}

.svc__title {
  font-size: var(--text-h3);
  line-height: var(--leading-snug);
  color: var(--text-primary);
}

.svc__desc {
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  color: var(--text-muted);
}

.svc__specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-md);
  margin-block-start: auto;
  padding-block-start: var(--space-sm);
  background: var(--tick-rule-fine);
}
.svc__spec { display: flex; flex-direction: column; gap: var(--space-3xs); }
.svc__spec-key {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-faint);
}
.svc__spec-val {
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
}
.svc__spec-val--price { font-size: var(--text-price); color: var(--text-accent); }

.svc__cta { margin-block-start: var(--space-xs); align-self: flex-start; }

/* --------------------------------------------------------------------------
   WIDE ROW — the three services that do not fit the nine tiles
   -------------------------------------------------------------------------- */
.services__wide {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--card-min), 1fr));
  gap: var(--grid-gap);
  margin-block-start: var(--grid-gap);
}

.svcw {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  background: var(--chamfer-edge), var(--surface-alt);
  border: var(--border-width-hair) solid var(--border-hairline);
  border-radius: var(--radius-card);
  clip-path: var(--chamfer-clip);
  overflow: hidden;
  transition: background-color var(--dur-fast) var(--ease-state), transform var(--dur-fast) var(--ease-lift);
}
.svcw:hover { background: var(--chamfer-edge), var(--surface-raised); transform: translate3d(0, var(--lift-tile), 0); }
.svcw:hover .media::before { transform: skewX(var(--sheen-skew)) translate3d(1200%, 0, 0); }
.svcw:hover .media img { transform: scale3d(var(--scale-media-hover), var(--scale-media-hover), 1); }

.svcw__media { height: 100%; min-height: var(--icon-circle-lg); aspect-ratio: var(--ratio-wide); }
.svcw__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding: var(--card-pad);
}
.svcw__title { font-size: var(--text-h4); color: var(--text-primary); }
.svcw__desc { font-size: var(--text-caption); color: var(--text-muted); }
.svcw__price {
  margin-block-start: auto;
  padding-block-start: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  color: var(--text-accent);
}

/* --------------------------------------------------------------------------
   ADD-ONS — a single dense ledger row
   -------------------------------------------------------------------------- */
.services__addons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-md);
  margin-block-start: var(--grid-gap);
  padding: var(--card-pad);
  border: var(--border-width-hair) solid var(--border-strong);
  border-radius: var(--radius-inset);
  clip-path: var(--chamfer-clip);
  background: var(--chamfer-edge), var(--surface-sunken);
}
.services__addons-label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.services__addons-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-md);
}
.services__addon {
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs);
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
}
.services__addon b {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  color: var(--text-accent);
}
.services__addon-note { font-size: var(--text-caption); color: var(--text-faint); }

/* --------------------------------------------------------------------------
   SECTION FOOT — the grid publishes the Tier I figure and hands the other two
   to the full price list. Nine tiles carrying twenty-seven prices reads as a
   spreadsheet; the route out has to be a visible part of the section, not a
   line of small print. docs/content.md §Vehicle size tiers.
   -------------------------------------------------------------------------- */
.services__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  margin-block-start: var(--grid-gap);
}
.services__foot .filmnote { flex: 1 1 var(--card-min-wide); margin-block-start: 0; }

/* The split only once the media column can hold a spec chip. Measured across
   the row's own breakpoints: the wide row is 3-up from 1024, which leaves the
   34% media column 82px of content against a 98px chip — that IS the clipped
   "FROM $1" the client caught, one breakpoint further out. It clears at 1200,
   where the column carries 112px. Below that the card stacks and the chip has
   the full width. */
@media (min-width: 1200px) {
  .svcw { grid-template-columns: minmax(0, 34%) minmax(0, 1fr); }
  .svcw__media { aspect-ratio: auto; }
}

@media (min-width: 1024px) {
  .services__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .services__wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}