/* Services page layout refinement.
   One repeatable editorial module keeps image scale, reading order and rhythm
   consistent across every production stage. */

.service-page .capability-detail {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "copy media";
  column-gap: clamp(2.75rem, 5vw, 5.5rem);
  row-gap: clamp(1.75rem, 3vw, 2.75rem);
  align-items: start;
  min-height: 0;
  padding-block: clamp(4.25rem, 6.5vw, 6.5rem);
  border-top: 1px solid rgba(255, 255, 255, .08);
}

/* Reset the older per-stage column ratios so every stage uses one scale. */
.service-page #project-review,
.service-page #production,
.service-page #cutting,
.service-page #finishing,
.service-page #packing {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.service-page .capability-detail > .capability-detail-copy {
  grid-area: copy;
  min-width: 0;
  align-self: center;
}

.service-page .capability-detail > figure,
.service-page #cutting > figure,
.service-page #finishing > figure,
.service-page .capability-detail--with-evidence > .project-review-photo {
  grid-column: auto;
  grid-row: auto;
  grid-area: media;
  width: 100%;
  min-width: 0;
  margin: 0;
  overflow: hidden;
}

.service-page #cutting > .capability-detail-copy,
.service-page #finishing > .capability-detail-copy {
  grid-area: copy;
}

.service-page #cutting > figure,
.service-page #finishing > figure {
  grid-area: media;
}

.service-page .capability-detail > figure > img,
.service-page .capability-detail--with-evidence .project-review-photo > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.service-page .capability-detail > figure > figcaption {
  min-height: 3.35rem;
  padding-top: 1rem;
  margin-top: 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.service-page .capability-detail--with-evidence {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "copy media"
    "brief media";
}

.service-page .capability-detail--with-evidence > .capability-detail-copy {
  align-self: start;
}

.service-page .capability-detail--with-evidence > .service-brief {
  grid-area: brief;
  grid-column: auto;
  grid-row: auto;
  align-self: start;
  width: 100%;
  padding: clamp(1.35rem, 2.1vw, 1.85rem);
  background: #1b1b19;
  border-top: 2px solid var(--accent);
}

/* These IDs outrank the older repair selectors that pinned the two elements. */
.service-page #project-review > .project-review-photo {
  grid-area: media;
}

.service-page #project-review > .service-brief {
  grid-area: brief;
}

.service-page .service-brief h3 {
  margin: 0;
  font-size: clamp(1.1rem, 1.4vw, 1.3rem);
}

.service-page .service-brief ul {
  gap: .55rem;
  margin: 1.05rem 0 0;
  padding-top: 1rem;
}

.service-page .service-brief .service-brief-note {
  margin-top: 1.1rem;
}

@media (max-width: 960px) {
  .service-page .capability-detail,
  .service-page .capability-detail--with-evidence {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "media";
    gap: 2.25rem;
    padding-block: clamp(3.5rem, 8vw, 5rem);
  }

  .service-page #project-review,
  .service-page #production,
  .service-page #cutting,
  .service-page #finishing,
  .service-page #packing {
    grid-template-columns: 1fr;
  }

  .service-page .capability-detail--with-evidence {
    grid-template-areas:
      "copy"
      "media"
      "brief";
  }

  .service-page .capability-detail > .capability-detail-copy,
  .service-page #cutting > .capability-detail-copy,
  .service-page #finishing > .capability-detail-copy,
  .service-page .capability-detail > figure,
  .service-page #cutting > figure,
  .service-page #finishing > figure,
  .service-page .capability-detail--with-evidence > .project-review-photo,
  .service-page .capability-detail--with-evidence > .service-brief {
    grid-column: auto;
    grid-row: auto;
  }

  .service-page .capability-detail > .capability-detail-copy {
    align-self: start;
  }

  .service-page .capability-detail > figure {
    max-width: none;
  }
}

@media (max-width: 560px) {
  .service-page .capability-detail {
    gap: 1.65rem;
    padding-block: 3.5rem;
  }

  .service-page .capability-detail > figure > figcaption {
    min-height: 0;
    padding-top: .85rem;
  }

  .service-page .capability-detail--with-evidence > .service-brief {
    padding: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-page .capability-detail .motion-image-frame,
  .service-page .capability-detail .motion-image-frame img {
    transform: none !important;
  }
}