/* services.css — award-show treatment for the Services grid.
 * Kept in its own file (loaded last) so a future Claude-design update
 * can't wipe it. Old .services-grid/.service-card/.service-title/
 * .service-desc rules in site.css are now unused (Services.jsx no
 * longer renders those classes) — left in place, harmless.
 */

.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: var(--space-2);
}

/* Dividers are drawn as borders ON the tiles, not as a grid `gap` with the
   container's background peeking through. With repeat(4, 1fr) the column
   width is rarely a whole number of pixels, so two independently-rounded
   tile edges can land on the same physical pixel and the 1px seam between
   COLUMNS quietly vanishes (row seams survive since there are far fewer
   of them). A border is one atomic paint on a single box, so it can't be
   lost that way — reliable at any width, not just in this test render. */
.svc-tile {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--color-card-bg);
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 30px 26px 60px;
  display: flex;
  flex-direction: column;
  cursor: default;
  transition: background .45s var(--ease-out, ease);
}

/* No trailing border on the last column of each row, or the last row —
   otherwise it'd double up against .svc-grid's own outer border. Targets
   the .reveal wrapper's position among its 6 siblings (the actual grid
   items), since .svc-tile itself is always its wrapper's only child. */
.svc-grid > .reveal:nth-child(3n) .svc-tile { border-right: none; }
.svc-grid > .reveal:nth-last-child(-n+3) .svc-tile { border-bottom: none; }

/* Cursor-tracked spotlight — a soft glow that follows the pointer inside
   the tile. --mx/--my are written directly to the element's style by
   Services.jsx's onMouseMove (no React re-render per pixel moved). */
.svc-spotlight {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%),
              rgba(143, 218, 250, .16), transparent 70%);
  transition: opacity .5s ease;
  pointer-events: none;
}
.svc-tile:hover .svc-spotlight { opacity: 1; }

/* Giant faded monogram — a quiet typographic flourish sitting behind the
   copy, reusing the mono codes already in js/data.js (WD, GD, LG…). */
.svc-mono {
  position: absolute;
  top: -0.14em;
  right: 14px;
  z-index: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 92px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-white);
  opacity: .035;
  transition: opacity .45s var(--ease-out, ease), transform .6s var(--ease-out, ease);
  pointer-events: none;
}
.svc-tile:hover .svc-mono { opacity: .07; transform: scale(1.06); }

.svc-index {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--color-accent);
  opacity: .55;
  margin-bottom: 22px;
  transition: opacity .35s ease;
}
.svc-tile:hover .svc-index { opacity: 1; }

.svc-body { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; }
.svc-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  color: #fff;
  margin-bottom: 10px;
  transition: transform .45s var(--ease-out, ease);
}
.svc-desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--color-gray-500);
  max-width: 34ch;
  margin-bottom: 18px;
}
.svc-tile:hover .svc-title { transform: translateX(4px); }

.svc-features { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.svc-features li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  color: var(--color-gray-400);
}
.svc-features svg { color: var(--color-accent); flex-shrink: 0; }

.svc-learn-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  color: var(--color-white);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}
.svc-learn-more svg { color: var(--color-accent); transition: transform var(--dur-mid) var(--ease-out); }
.svc-learn-more:hover { color: var(--color-accent); }
.svc-learn-more:hover svg { transform: translateX(4px); }

/* Whole-tile hover: lift + a soft accent-tinted glow ring that briefly
   overlays the hairline border on that tile's edges. */
.svc-tile:hover {
  background: #131418;
  box-shadow: inset 0 0 0 1px rgba(143, 218, 250, .35), 0 24px 48px -20px rgba(0, 0, 0, .6);
  z-index: 2;
}

@media (max-width: 980px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-mono { font-size: 72px; }
  /* Re-derive "last column / last row" for 2 columns — :nth-child(n)
     matches everything, keeping specificity equal to the base 3n/last-3
     rules above so this (later in the cascade) wins and resets them. */
  .svc-grid > .reveal:nth-child(n) .svc-tile { border-right: 1px solid var(--color-border); }
  .svc-grid > .reveal:nth-child(2n) .svc-tile { border-right: none; }
  .svc-grid > .reveal:nth-last-child(-n+3) .svc-tile { border-bottom: 1px solid var(--color-border); }
  .svc-grid > .reveal:nth-last-child(-n+2) .svc-tile { border-bottom: none; }
}

@media (max-width: 620px) {
  .svc-grid { grid-template-columns: 1fr; }
  .svc-tile { padding: 26px 22px 54px; }
  .svc-mono { font-size: 64px; }
  /* Single column: no vertical dividers at all; only the very last tile
     loses its bottom border. */
  .svc-grid > .reveal:nth-child(n) .svc-tile { border-right: none; }
  .svc-grid > .reveal:nth-child(n) .svc-tile { border-bottom: 1px solid var(--color-border); }
  .svc-grid > .reveal:last-child .svc-tile { border-bottom: none; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-tile, .svc-mono, .svc-index, .svc-title, .svc-spotlight {
    transition: none;
  }
}

/* Touch devices: no hover, so surface a resting-state hint instead of a
   dead interaction (spotlight that only ever shows on desktop). */
@media (hover: none) {
  .svc-index { opacity: .8; }
}