/* ── Services Cards — [services_cards] ─────────────────────────────
   3 → 2 column grid (desktop / tablet) that becomes a looping
   carousel on phones. Card bg swaps blue-1 → hover image on hover.
   Content classes (.subheading-md / .body-sm) come from typography.css. */

.svc-cards { position: relative; }

.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;        /* every row = the tallest row → all cards equal height */
  column-gap: 1.5rem;
  row-gap: 4.25rem;
}

@media (max-width: 979px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── Card ────────────────────────────────────────────────────────── */
.svc-card {
  position: relative;
  overflow: hidden;
  border-radius: 2rem;
  background-color: var(--blue-1);
  color: var(--background-orange);
  isolation: isolate;
}

/* hover background: absolute layer cross-fades in (no white flash) */
.svc-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--svc-hover, none);
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
}
@media (hover: hover) and (min-width: 768px) {
  .svc-card:hover::before { opacity: 1; }
}

.svc-card__inner {
  height: 100%;
  padding: 10%;
  display: flex;
  flex-direction: column;
  align-items: center;        /* horizontal centering */
  justify-content: center;    /* vertical centering within the card */
  text-align: center;
  gap: 1rem;                  /* icon → group */
}

.svc-card__icon { display: flex; justify-content: center; width: 100%; }
.svc-icon { display: block; margin: 0 auto; width: auto; max-width: 100%; height: auto; }  /* width:auto keeps aspect when max-height caps it */
.svc-icon--desktop { max-height: 100px; }   /* Figma desktop icons ≤96px */
.svc-icon--mobile  { display: none; }

.svc-card__group {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;               /* heading → divider → body */
  width: 100%;
}

.svc-card__heading > :first-child { margin-top: 0; }
.svc-card__heading > :last-child  { margin-bottom: 0; }
.svc-card__body    > :first-child { margin-top: 0; }
.svc-card__body    > :last-child  { margin-bottom: 0; }

.svc-card__divider {
  width: 100%;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--orange-2);   /* Figma divider = orange-2 */
}

/* inline links inside a card: same colour + underline, orange-4 on hover */
.svc-card a {
  color: inherit;
  text-decoration: underline;
  transition: color 0.2s ease;
}
.svc-card a:hover,
.svc-card a:focus-visible { color: var(--orange-4); }

/* ── Arrows + dots — hidden on desktop / tablet ─────────────────── */
.svc-arrow,
.svc-dots { display: none; }

/* ── Phone: carousel ────────────────────────────────────────────── */
@media (max-width: 767px) {
  .svc-viewport { overflow: hidden; margin: 0 3.25rem; }   /* gutters for the arrows */

  .svc-grid {
    display: flex;
    grid-template-columns: none;
    column-gap: 1.5rem;
    row-gap: 0;
    align-items: stretch;          /* all cards = tallest card's height (constant carousel) */
    transition: transform 0.4s ease;
    will-change: transform;
  }
  .svc-card { flex: 0 0 100%; height: auto; }

  /* top-align content in the carousel so the icon/heading sit in the same spot
     on every card — sparse cards no longer look like they resize when sliding */
  .svc-card__inner { justify-content: flex-start; }

  /* swap to the mobile icon on the carousel */
  .svc-icon--desktop { display: none; }
  .svc-icon--mobile  { display: block; max-height: 50px; }   /* Figma mobile icon ~50px */

  .svc-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    width: 3.25rem;
    height: 3.25rem;
    border: 0;
    background: none;
    color: var(--blue-1);
    cursor: pointer;
    z-index: 2;
    padding: 0;
  }
  .svc-arrow__icon { display: block; width: 1.75rem; height: auto; }
  .svc-prev { left: 0; }
  .svc-next { right: 0; }
  .svc-arrow:hover { color: var(--orange-1); }

  .svc-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
  }
  .svc-dot {
    width: 0.5rem;
    height: 0.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--blue-3);
    cursor: pointer;
    transition: background-color 0.2s ease;
  }
  .svc-dot.is-active { background: var(--blue-1); }
}