/* ================================================
   SERVICES PAGE — Warm Editorial Design System
   ================================================ */

/* ================================================
   SERVICES GRID SECTION
   ================================================ */

.services-section {
  padding: 5rem 2rem;
  background: var(--ed-cream);
}

[data-theme="dark"] .services-section {
  background: var(--ed-ink);
}

@media (min-width: 800px) {
  .services-section {
    padding: 6rem 3rem;
  }
}

.services-section__inner {
  max-width: var(--max-width-container);
  margin: 0 auto;
}

.services-section__label {
  font-family: var(--ed-font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ed-terracotta);
  margin-bottom: 0.75rem;
}

[data-theme="dark"] .services-section__label {
  color: var(--ed-terracotta-lt);
}

.services-section__heading {
  font-family: var(--ed-font-serif);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ed-ink);
  margin: 0 0 3rem;
}

[data-theme="dark"] .services-section__heading {
  color: var(--ed-cream);
}

.services-section__heading em {
  font-style: italic;
  font-weight: 300;
  color: var(--ed-terracotta);
}

[data-theme="dark"] .services-section__heading em {
  color: var(--ed-terracotta-lt);
}

/* ================================================
   SERVICES GRID — 2x2 on desktop
   ================================================ */

.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 667px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ================================================
   SERVICE CARD INTERNALS
   Each card uses .ed-bento-card base + color variant.
   These styles extend/configure the bento card for
   the services page context.
   ================================================ */

.service-card {
  min-height: 260px;
}

.service-card .ed-bento-card__icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.75;
}

/* Icon background overrides per variant */
.service-card.ed-bento-card--sand .ed-bento-card__icon {
  background: rgba(30, 22, 18, 0.1);
}

.service-card.ed-bento-card--sage .ed-bento-card__icon {
  background: rgba(90, 122, 94, 0.15);
  color: var(--ed-sage);
}

/* Decorative corner circle */
.service-card .ed-bento-card__circle {
  width: 10rem;
  height: 10rem;
  bottom: -3.5rem;
  right: -3.5rem;
}

/* ================================================
   RESPONSIVE — tighten padding on small screens
   ================================================ */

@media (max-width: 479px) {
  .service-card {
    padding: 1.5rem 1.25rem;
  }
}