/* ============================================================
   SERVICES SECTION
   Service cards in a responsive grid with accordion expand/collapse.
   Uses the CSS grid-template-rows 0fr/1fr trick for smooth height animation.
   ============================================================ */

/* === Services grid === */
.services-grid {
  align-items: start; /* prevent stretch across different content lengths */
}

/* ============================================================
   SERVICE CARD — base
   ============================================================ */

.service-card {
  background-color: var(--color-bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--transition-base);
}

.service-card:hover {
  box-shadow: var(--shadow-md);
}

/* ============================================================
   SERVICE CARD HEADER — the always-visible clickable button
   ============================================================ */

.service-card__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-6);
  background: none;
  border: none;
  cursor: pointer;
  inline-size: 100%;
  font-family: var(--font-family-body);
  color: var(--color-text-primary);
  transition: background-color var(--transition-fast);
}

.service-card__header:hover {
  background-color: var(--color-brand-primary-bg);
}

.service-card__header:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: -2px;
}

/* ============================================================
   SERVICE CARD ICON
   ============================================================ */

.service-card__icon {
  color: var(--color-brand-primary);
  flex-shrink: 0;
}

/* ============================================================
   SERVICE CARD TITLE & DESCRIPTION
   ============================================================ */

.service-card__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
}

.service-card__desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* ============================================================
   CHEVRON — rotates 180deg when card is open
   ============================================================ */

.service-card__chevron {
  transition: transform var(--transition-base);
  margin-block-start: var(--space-2);
  color: var(--color-text-muted);
}

.service-card.is-open .service-card__chevron {
  transform: rotate(180deg);
}

/* ============================================================
   ACCORDION BODY — grid-template-rows 0fr to 1fr trick
   The outer grid element clips the inner content to zero height.
   ============================================================ */

.service-card__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition-slow);
}

.service-card__body.is-open {
  grid-template-rows: 1fr;
}

/* CRITICAL: overflow:hidden on the inner wrapper makes 0fr work */
.service-card__body-inner {
  overflow: hidden;
  padding-inline: var(--space-6);
  padding-block-end: var(--space-6);
}

/* ============================================================
   BULLET LIST
   ============================================================ */

.service-card__bullets {
  list-style: disc;
  padding-inline-start: var(--space-6);
  margin-block-end: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.service-card__bullets li {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-base);
}