/**
 * Pool Ready Home - Service Detail page template
 * Banner photo background + rating/stats, overview + at-a-glance card,
 * scope checklist.
 * (The shared page banner lives in assets/css/page-banner.css. "How It
 * Works" reuses assets/css/process.css, the FAQ accordion reuses
 * assets/css/faq.css, and Related Services reuses .prh-services__panel /
 * .prh-services__grid from home.css.)
 */

/* ==========================================================================
   1. Banner photo background + rating/stats
   ========================================================================== */

.prh-page-banner__photo {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  mix-blend-mode: overlay;
  opacity: 0.32;
}

.prh-service-banner__rating {
  display: inline-flex;
  align-items: center;
  gap: var(--prh-space-1);
  margin-bottom: var(--prh-space-3);
  padding: var(--prh-space-1) var(--prh-space-3);
  border-radius: var(--prh-radius-pill);
  background: rgba(255, 255, 255, 0.15);
  color: var(--prh-white);
  font-size: var(--prh-fs-xs);
  font-weight: var(--prh-fw-semibold);
}

.prh-service-banner__rating svg {
  color: var(--prh-gold);
}

.prh-service-banner__stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--prh-space-6);
  margin-top: var(--prh-space-6);
}

.prh-service-banner__stat {
  display: inline-flex;
  align-items: center;
  gap: var(--prh-space-2);
  color: var(--prh-white);
  font-size: var(--prh-fs-sm);
  font-weight: var(--prh-fw-medium);
}

.prh-service-banner__stat svg {
  opacity: 0.85;
}

/* ==========================================================================
   2. Overview + at-a-glance card
   ========================================================================== */

.prh-service-overview {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  align-items: start;
  gap: clamp(2.5rem, 1.5rem + 4vw, 5rem);
}

.prh-service-overview__image {
  width: 100%;
  height: 16rem;
  margin-bottom: var(--prh-space-6);
  border-radius: var(--prh-radius-lg);
  object-fit: cover;
}

.prh-service-overview__content p {
  margin-bottom: var(--prh-space-4);
  color: var(--prh-grey-500);
}

.prh-service-overview__content p:last-child {
  margin-bottom: 0;
}

.prh-service-glance {
  padding: var(--prh-space-6);
  border-radius: var(--prh-radius-lg);
  background: var(--prh-grey-50);
}

.prh-service-glance__title {
  margin-bottom: var(--prh-space-4);
  font-size: var(--prh-fs-h6);
}

.prh-service-glance__list {
  margin: 0 0 var(--prh-space-5);
}

.prh-service-glance__row {
  display: flex;
  justify-content: space-between;
  gap: var(--prh-space-3);
  padding-block: var(--prh-space-3);
  border-bottom: var(--prh-border);
  font-size: var(--prh-fs-sm);
}

.prh-service-glance__row:last-child {
  border-bottom: 0;
}

.prh-service-glance__row dt {
  margin: 0;
  color: var(--prh-grey-500);
}

.prh-service-glance__row dd {
  margin: 0;
  color: var(--prh-ink);
  font-weight: var(--prh-fw-semibold);
  text-align: right;
}

@media (max-width: 900px) {
  .prh-service-overview {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   3. Scope checklist
   ========================================================================== */

.prh-scope-section {
  background: var(--prh-grey-50);
}

.prh-scope__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  max-width: 56rem;
  margin-inline: auto;
  gap: var(--prh-space-8);
}

.prh-scope__grid--single {
  max-width: 34rem;
  grid-template-columns: 1fr;
}

.prh-scope__col-title {
  margin-bottom: var(--prh-space-4);
  font-size: var(--prh-fs-h6);
}

.prh-scope__list {
  display: flex;
  flex-direction: column;
  gap: var(--prh-space-3);
}

.prh-scope__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--prh-space-3);
  color: var(--prh-ink);
  font-size: var(--prh-fs-sm);
}

.prh-scope__icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: var(--prh-radius-circle);
}

.prh-scope__icon--yes {
  background: var(--prh-teal);
  color: var(--prh-white);
}

.prh-scope__icon--no {
  background: var(--prh-grey-100);
  color: var(--prh-grey-500);
}

@media (max-width: 700px) {
  .prh-scope__grid {
    grid-template-columns: 1fr;
  }
}