/* ═══════════════════════════════════════════════════
   SECTION: audit — related services. Source: audit.html #sp-related

   The source's card and the service rows on the home page do the same job in
   two different shapes, so the hover here borrows their behaviour: the accent
   rule wipes in across the top, the name takes the accent colour, the arrow
   moves. Titles use the card title block the rest of the site settled on —
   --f-display / --fs-500 / --fw-black / -.03em / 1.5 — rather than the source's
   18px, which was a size nothing else on the page used.

   No .sp-related-price rules: the source markup had already lost the price and
   left an empty div behind it, so the foot carries the arrow alone.
═══════════════════════════════════════════════════ */

#sp-related {
  background: var(--c-bg);
  padding: var(--sp-section) 0;
  border-bottom: 1px solid var(--c-border);
}

.sp-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}

.sp-related-card {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  padding: var(--sp-7, 28px) var(--sp-6);
  background: var(--c-bg-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  text-decoration: none;
  transition: border-color var(--dur-base), background var(--dur-base);
}

/* Accent rule that wipes in from the left on hover — the same gesture the
   principles panel in the solution section uses, turned on its side. */
.sp-related-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--c-accent), rgba(var(--c-accent-rgb), .2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease-out);
}

.sp-related-card:hover {
  border-color: rgba(var(--c-accent-rgb), .3);
  background: var(--c-bg-3);
}
.sp-related-card:hover::after { transform: scaleX(1) }
.sp-related-card:hover .sp-related-name { color: var(--c-accent) }
.sp-related-card:hover .sp-related-arr { transform: translateX(4px) }

.sp-related-card:focus-visible {
  outline: 2px solid var(--c-focus-ring);
  outline-offset: 2px;
}

.sp-related-num {
  font-family: var(--f-display);
  font-size: var(--fs-300);
  font-weight: var(--fw-extrabold);
  letter-spacing: .1em;
  color: rgba(var(--c-accent-rgb), .4);
  margin-bottom: var(--sp-3);
}

.sp-related-name {
  font-family: var(--f-display);
  font-size: var(--fs-500);
  font-weight: var(--fw-black);
  letter-spacing: -.03em;
  line-height: 1.5;
  color: var(--c-text-1);
  margin-bottom: var(--sp-2);
  transition: color var(--dur-base);
}

.sp-related-desc {
  flex: 1;
  font-size: var(--fs-200);
  color: var(--c-text-3);
  line-height: 1.7;
  margin-bottom: var(--sp-5);
}

.sp-related-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-border);
}

/* Same label and same shape as .sc-cat-cta on the category page: these two
   cards do the same job in two places, and a bare arrow in one of them reads
   as a different affordance rather than the same one. */
.sp-related-cta {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-200);
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-accent);
}

.sp-related-arr {
  display: inline-block;
  transition: transform var(--dur-base) var(--ease-out);
}

/* ── Responsive ── */
@media (max-width: 960px) {
  .sp-related-grid { grid-template-columns: 1fr 1fr }
}

@media (max-width: 640px) {
  .sp-related-grid { grid-template-columns: 1fr }
}

@media (prefers-reduced-motion: reduce) {
  .sp-related-card::after,
  .sp-related-arr { transition: none }
}