/* =========================================================
   Services page (overview)
   - Center H1 + lead
   - Two-column intro + guidance
   - 3-up grid (desktop), 2-up (tablet), 1-up (mobile)
   - Pixel-consistent media ratio across breakpoints
   ========================================================= */

.page-services .page-services__header{
  text-align: center;
  margin-bottom: 2.25rem;
}

.page-services .page-services__header .page-lead{
  margin-left: auto;
  margin-right: auto;
  max-width: 65ch;
}

/* Top: main intro + guidance */
.page-services .services-header{
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 3rem;
  align-items: start;
  margin-bottom: 3rem;
}

.page-services .services-header__side{
  background: var(--c-surface);
  padding: 1.75rem 1.75rem 1.9rem;
  border-radius: 16px;
}

.page-services .services-guidance h2{
  margin-top: 0;
}

.page-services .services-guidance ul{
  margin-top: 0.8rem;
  padding-left: 1.2rem;
}

.page-services .services-guidance li{
  margin-bottom: 0.4rem;
}

/* Center the section title */
.page-services .section-title--center{
  text-align: center;
}

/* Grid: professional 3-up */
.page-services .service-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6rem;
  margin-top: 1.2rem;
}

/* Cards: ensure consistent vertical rhythm */
.page-services .service-card{
  height: 100%;
}

.page-services .service-link{
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
}

/* Media: lock exact ratio everywhere */
.page-services .service-media{
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
}

/* Defensive: if any other CSS sets height, this wins */
.page-services .service-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Keep CTA aligned at bottom */
.page-services .service-title{
  margin-top: 1rem;
}

.page-services .service-text{
  margin-top: 0.4rem;
}

.page-services .service-cta{
  margin-top: auto;
  padding-top: 0.9rem;
}

/* Responsive */
@media (max-width: 1000px){
  .page-services .services-header{
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .page-services .service-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  .page-services .service-grid{
    grid-template-columns: 1fr;
  }
}