/* Services grid — 4-card layout for the 4 services */

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

.savvy-services__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-9) var(--container-padding);
}

.savvy-services__intro {
  text-align: center;
  margin-bottom: var(--space-7);
}
.savvy-services__intro h2 {
  font-size: var(--fs-2xl);
  margin: 0 0 var(--space-3);
}
.savvy-services__intro p {
  color: var(--text-muted);
  max-width: 60ch;
  margin: 0 auto;
}

/* Five services on a 6-col grid: each card spans 2 cols, so row 1 holds three
   cards (3x2=6). The last two are pushed to columns 2-3 and 4-5, leaving the
   outer columns empty so the bottom row sits centred under the top row
   (Manik round-2: "3 on top, 2 centred on the bottom"). */
.savvy-services__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-5);
}
.savvy-service-card { grid-column: span 2; }
.savvy-service-card:nth-child(4) { grid-column: 2 / span 2; }
.savvy-service-card:nth-child(5) { grid-column: 4 / span 2; }

.savvy-service-card {
  background: var(--surface-inverse);
  border: 1px solid var(--surface-inverse);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--text-on-dark);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.savvy-service-card:hover {
  border-color: var(--brand-accent);
  transform: translateY(-2px);
}

.savvy-service-card__image {
  aspect-ratio: 16 / 10;
  background: var(--surface-alt);
  overflow: hidden;
}
.savvy-service-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.savvy-service-card__body {
  padding: var(--space-5);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.savvy-service-card__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  margin: 0 0 var(--space-2);
  color: var(--text-on-dark);
}
.savvy-service-card__desc {
  font-size: var(--fs-sm);
  color: var(--text-on-dark);
  opacity: 0.85;
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-4);
  flex: 1;
}
.savvy-service-card__link {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-on-dark);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.savvy-service-card:hover .savvy-service-card__link {
  color: var(--text-on-dark);
  opacity: 0.85;
}

@media (max-width: 1024px) {
  /* Tablet: two per row (4-col grid, cards span 2). Fifth card centres on its
     own row (columns 2-3 of 4). */
  .savvy-services__grid { grid-template-columns: repeat(4, 1fr); }
  .savvy-service-card,
  .savvy-service-card:nth-child(4) { grid-column: span 2; }
  .savvy-service-card:nth-child(5) { grid-column: 2 / span 2; }
}
@media (max-width: 600px) {
  /* Mobile: single column, reset all spans/placements to natural flow. */
  .savvy-services__grid { grid-template-columns: 1fr; }
  .savvy-service-card,
  .savvy-service-card:nth-child(4),
  .savvy-service-card:nth-child(5) { grid-column: auto; }
}