/*
 * ChauffagistePlombier global city-page design system.
 *
 * FUTURE CITY-PAGE CSS CHANGES BELONG HERE.
 * Use this file for city landing pages, future city/service matrix pages,
 * local proof blocks, city CTA layout, city cards, map/zone sections,
 * and responsive city-page spacing.
 *
 * Loaded after style.css by functions.php handle: chauffagiste-light-city-pages.
 * Planned component namespace: .cp-city-page
 */

:root{
  --cp-city-max:1120px;
  --cp-city-gutter:32px;
  --cp-city-mobile-gutter:36px;
  --cp-city-card-radius:22px;
  --cp-city-card-border:1px solid var(--cp-border,#1e1f24);
  --cp-city-card-shadow:8px 8px 0 rgba(112,72,255,.12);
  --cp-city-section-padding:78px;
  --cp-city-section-padding-mobile:48px;
}

/* Future city templates should wrap content with .cp-city-page. */
.cp-city-page{
  width:100%;
}
.cp-city-page .cp-wrap,
.cp-city-page .cp-city-grid,
.cp-city-page .cp-city-card-grid,
.cp-city-page .cp-city-proof-grid,
.cp-city-page .cp-city-service-grid,
.cp-city-page .cp-city-cta-card{
  width:min(var(--cp-city-max),calc(100% - var(--cp-city-gutter)));
  max-width:var(--cp-city-max);
  margin-left:auto;
  margin-right:auto;
}
.cp-city-page .cp-section{
  padding:var(--cp-city-section-padding) 0;
}
.cp-city-page .cp-city-grid,
.cp-city-page .cp-city-card-grid,
.cp-city-page .cp-city-proof-grid,
.cp-city-page .cp-city-service-grid{
  display:grid;
  gap:28px;
}
.cp-city-page .cp-city-grid{
  grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);
  align-items:center;
}
.cp-city-page .cp-city-card,
.cp-city-page .cp-city-cta-card,
.cp-city-page .cp-city-proof,
.cp-city-page .cp-city-service-card{
  background:#fff;
  border:var(--cp-city-card-border);
  border-radius:var(--cp-city-card-radius);
  box-shadow:var(--cp-city-card-shadow);
  padding:30px;
}

@media(max-width:860px){
  .cp-city-page .cp-wrap,
  .cp-city-page .cp-city-grid,
  .cp-city-page .cp-city-card-grid,
  .cp-city-page .cp-city-proof-grid,
  .cp-city-page .cp-city-service-grid,
  .cp-city-page .cp-city-cta-card{
    width:min(var(--cp-city-max),calc(100% - var(--cp-city-mobile-gutter)));
  }
  .cp-city-page .cp-section{
    padding:var(--cp-city-section-padding-mobile) 0;
  }
  .cp-city-page .cp-city-grid,
  .cp-city-page .cp-city-card-grid,
  .cp-city-page .cp-city-proof-grid,
  .cp-city-page .cp-city-service-grid{
    grid-template-columns:1fr;
    gap:18px;
  }
  .cp-city-page .cp-city-card,
  .cp-city-page .cp-city-cta-card,
  .cp-city-page .cp-city-proof,
  .cp-city-page .cp-city-service-card{
    padding:26px 24px;
    overflow-wrap:anywhere;
  }
}