/* ---------------------------------------------------------------------------
   Service detail pages.
   Loaded only on is_singular('service'), on top of home.css, which carries the
   shared primitives (.aps-grid, the .aps-section--* bands, .aps-service card).
   --------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Hero band.
   Same full-bleed ::before as the homepage bands. The photo sits under a navy
   wash weighted to the text side: these are the 900x670 service photos, which
   are not big enough to carry a full-bleed band on their own, so the wash does
   most of the work and the picture reads as texture rather than as the subject.
   -------------------------------------------------------------------------- */
.aps-svc-hero {
  position: relative;
  padding-block: var(--space-9) var(--space-8);
  background: var(--color-navy);
  overflow: hidden;
}
.aps-svc-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(180deg, rgba(36, 70, 111, 0.93) 0%, rgba(47, 87, 139, 0.86) 100%);
  z-index: 0;
}
.aps-svc-hero--photo::before {
  background-image:
    linear-gradient(180deg, rgba(36, 70, 111, 0.90) 0%, rgba(36, 70, 111, 0.95) 100%),
    var(--aps-svc-photo);
  background-size: cover, cover;
  background-position: center center, center center;
  background-repeat: no-repeat, no-repeat;
}
.aps-svc-hero__inner { position: relative; z-index: 1; }

.aps-svc-hero__group {
  margin: 0 0 var(--space-3);
  color: var(--color-gold);            /* 4:1 on navy - orange would be 1.7:1 */
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
html[dir="rtl"] .aps-svc-hero__group { letter-spacing: 0; text-transform: none; }

.aps-svc-hero__title {
  max-width: 20ch;
  margin: 0 0 var(--space-4);
  color: #fff;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-heading);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
}
/* Orange measures 1.7:1 on navy, so the accent word is gold here - the same
   substitution the Projects band and the Fields band already make. */
.aps-svc-hero__title .aps-title__accent { color: var(--color-gold); }
html[dir="rtl"] .aps-svc-hero__title { letter-spacing: 0; line-height: 1.35; font-weight: 600; }

.aps-svc-hero__lead {
  max-width: 62ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.88);    /* 6.1:1 on the wash */
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
}
html[dir="rtl"] .aps-svc-hero__lead { line-height: var(--lh-loose); }

/* ------------------------------- body text ------------------------------- */
.aps-svc-body { max-width: 76ch; }
.aps-svc-body__text {
  margin: 0;
  color: var(--color-text);
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
}
/* Legacy body copy carried over from the old site, kept for depth. */
.aps-svc-body__extra { margin-top: var(--space-5); }
.aps-svc-body__extra p { margin-bottom: var(--space-4); line-height: var(--lh-loose); }
.aps-svc-body__extra h2,
.aps-svc-body__extra h3 {
  margin: var(--space-6) 0 var(--space-3);
  color: var(--color-navy);
  font-size: var(--fs-lg);
  font-weight: var(--fw-heading-sm);
  letter-spacing: var(--ls-display);
}
html[dir="rtl"] .aps-svc-body__extra h2,
html[dir="rtl"] .aps-svc-body__extra h3 { letter-spacing: 0; line-height: 1.35; }
.aps-svc-body__extra ul { margin: 0 0 var(--space-4); padding-inline-start: 1.25em; }
.aps-svc-body__extra li { margin-bottom: var(--space-2); line-height: var(--lh-loose); }
.aps-svc-body__extra li::marker { color: var(--color-orange); }

/* The three post images become a strip rather than a stack - WordPress's own
   gallery floats them at 600x600, which inside a 76ch column reads as three
   screens of scrolling. The template hands the ids over at card size. */
.aps-svc-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
  margin: var(--space-7) 0 0;
}
.aps-svc-gallery img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* ----------------------------- more services ----------------------------- */
.aps-grid--4 { grid-template-columns: repeat(4, 1fr); }
.aps-svc-more__title { margin-top: 0; }

/* The sibling cards carry no description, so the title needs the bottom
   padding the excerpt would otherwise have provided. */
.aps-svc-more .aps-service__title { margin-bottom: var(--space-2); }

/* --------------------------------- CTA ----------------------------------- */
.aps-svc-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: center;
  justify-content: space-between;
}
.aps-svc-cta:hover { transform: none; box-shadow: var(--shadow); }
.aps-svc-cta__title {
  margin: 0 0 var(--space-2);
  color: var(--color-navy);
  font-size: var(--fs-lg);
  font-weight: var(--fw-heading-sm);
}
.aps-svc-cta__note { margin: 0; color: var(--color-text-mut); font-size: var(--fs-sm); }
.aps-svc-cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
/* The back link is secondary: navy outline, not a second orange button. */
.aps-svc-cta__back { white-space: nowrap; }

/* ------------------------------ responsive ------------------------------- */
@media (max-width: 1100px) {
  .aps-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .aps-svc-hero { padding-block: var(--space-8) var(--space-7); }
  .aps-svc-hero__title { max-width: none; }
}
@media (max-width: 620px) {
  .aps-grid--4 { grid-template-columns: 1fr; }
  .aps-svc-cta { flex-direction: column; align-items: flex-start; }
}