/* ==========================================================================
   COMPONENT: ServicePage
   Template for individual service pages — hero + body sections
   ========================================================================== */

/* -------------------------------------------------------------------
   Service page hero
------------------------------------------------------------------- */

.service-hero {
  background-color: var(--color-bg-alt);
  padding-block: var(--spacing-12) var(--spacing-10);
}

.service-hero__inner {
  max-width: var(--max-content-width);
  margin-inline: auto;
  padding-inline: var(--spacing-4);
}

.service-hero__breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  margin-bottom: var(--spacing-4);
  list-style: none;
}

.service-hero__breadcrumb li {
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.service-hero__breadcrumb li + li::before {
  content: '/';
  margin-right: var(--spacing-1);
  color: var(--color-text-muted);
  opacity: 0.5;
}

.service-hero__breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}

.service-hero__breadcrumb a:hover {
  color: var(--color-accent);
}

.service-hero__heading {
  max-width: 700px;
  margin-bottom: var(--spacing-4);
}

.service-hero__body {
  max-width: 620px;
  font-size: var(--text-md);
  line-height: var(--leading-loose);
  color: var(--color-text-muted);
}

/* -------------------------------------------------------------------
   Service page content sections
------------------------------------------------------------------- */

.service-content {
  padding-block: var(--section-padding-y);
}

.service-content--alt {
  background-color: var(--color-bg-alt);
}

.service-content__inner {
  max-width: 780px;
  margin-inline: auto;
  padding-inline: var(--spacing-4);
}

.service-content__heading {
  margin-bottom: var(--spacing-5);
}

/* Modalities list — bullet list with styled items */
.modalities-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
}

.modalities-list__item {}

.modalities-list__item-title {
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-2);
}

.modalities-list__item-body {
  font-family: var(--font-primary);
  font-size: var(--text-base);
  line-height: var(--leading-loose);
  color: var(--color-text-muted);
  max-width: 65ch;
}

/* Healing outcomes — bulleted list */
.outcomes-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.outcomes-list__item {
  display: flex;
  gap: var(--spacing-3);
  align-items: flex-start;
  font-family: var(--font-primary);
  font-size: var(--text-base);
  line-height: var(--leading-loose);
  color: var(--color-text-muted);
}

.outcomes-list__item::before {
  content: '→';
  color: var(--color-accent);
  flex-shrink: 0;
  margin-top: 0.2em;
}

/* -------------------------------------------------------------------
   Responsive
------------------------------------------------------------------- */

@media (max-width: 768px) {
  .service-hero {
    padding-block: var(--spacing-8);
  }

  .service-content {
    padding-block: var(--section-padding-y-mobile);
  }
}