/**
 * Service single template + Services overview page.
 * Loaded on: single-service, page-services.php.
 */

/* ---------------------------------------------------------------
   Hero / page-header
   --------------------------------------------------------------- */

/* Solid white, not the shared component's default muted tone — just
   for the service pages' Introductory Copy. */
.single-service .page-header--media .page-header__intro {
  color: var(--color-text-on-dark);
}

/* ---------------------------------------------------------------
   Services overview grid
   --------------------------------------------------------------- */

.services-overview-intro {
  margin-bottom: var(--space-xl);
}

.services-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

/* ---------------------------------------------------------------
   Flexible content sections
   --------------------------------------------------------------- */

/* Tighter than the sitewide .section--tight — these sections run in
   a row on service pages, so stock spacing reads as too much dead
   air between them. */
.service-section {
  padding-block: var(--space-lg);
}

.service-section--text h2,
.service-section--image-text h2,
.service-section--image-text-accordion h2,
.service-section--gallery h2 {
  margin-bottom: var(--space-md);
}

.service-section--text h2,
.service-section--gallery h2 {
  text-align: center;
}

.service-image-text {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  /* start, not center — with a portrait image or an accordion-heavy
     text column, the two sides can differ a lot in height, and
     centering left equal, distracting empty space above and below
     the shorter one. */
  align-items: start;
}

.is-image-left .service-image-text__media {
  order: -1;
}

/* Image + Text (no accordion) only, desktop: content column at 60%,
   image at 40%, and a tighter column gap (4.5rem, down from
   --space-2xl's fluid ~8rem at this width) — scoped to the same
   min-width the two-column layout itself only applies above (see the
   max-width: 61.99rem block below, which collapses everything to a
   single column). The two grid-template-columns rules below (rather
   than one shared ratio) exist because content stays in DOM order
   while .is-image-left only reorders the media column — so whichever
   track the content lands in needs to be the 3fr one. */
@media (min-width: 62rem) {
  .service-section--image-text .service-image-text {
    grid-template-columns: 3fr 2fr;
    gap: 4.5rem;
  }

  .service-section--image-text.is-image-left .service-image-text {
    grid-template-columns: 2fr 3fr;
  }
}

.service-image-text__accordion {
  margin-top: var(--space-md);
}

/* Tighter than the shared .btn-group--spaced default (used elsewhere,
   e.g. the 404 page) — these buttons sit right under the body copy or
   accordion, not detached lower on the page. */
.service-image-text__content .btn-group--spaced {
  margin-top: var(--space-sm);
}

.service-image-text__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.service-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
}

.service-gallery img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-md);
}

/* ---------------------------------------------------------------
   Closing CTA
   --------------------------------------------------------------- */

.service-closing-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.service-closing-cta__inner h2 {
  font-size: var(--fs-h4);
}

.service-closing-cta__inner p {
  color: var(--color-text-muted);
  margin-top: var(--space-2xs);
}

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

@media (max-width: 61.99rem) {
  .services-overview-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .service-image-text {
    grid-template-columns: 1fr;
  }

  .is-image-left .service-image-text__media {
    order: 0;
  }

  .service-image-text__media {
    order: -1;
  }

  .service-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 36rem) {
  .services-overview-grid {
    grid-template-columns: 1fr;
  }

  .service-gallery {
    grid-template-columns: 1fr;
  }

  .service-closing-cta__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}