/**
 * Pool Ready Home - Service Listing page template
 * Highlights, catalog pagination.
 * (The shared page banner lives in assets/css/page-banner.css. The catalog
 * grid reuses .prh-services__panel / .prh-services__grid from home.css, the
 * "How It Works" section reuses .prh-process from assets/css/process.css,
 * and the FAQ accordion reuses assets/css/faq.css.)
 */

/* ==========================================================================
   1. Highlights
   ========================================================================== */

.prh-highlights__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--prh-space-5);
}

.prh-highlight {
  display: flex;
  align-items: center;
  gap: var(--prh-space-3);
  padding: var(--prh-space-5);
  border: var(--prh-border);
  border-radius: var(--prh-radius-lg);
  color: var(--prh-ink);
  font-weight: var(--prh-fw-medium);
}

.prh-highlight__icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--prh-radius-circle);
  background: var(--prh-teal);
  color: var(--prh-white);
}

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