/*
 * ChauffagistePlombier global service-page design system.
 *
 * FUTURE SERVICE-PAGE CSS CHANGES BELONG HERE.
 * Use this file for margins, padding, card widths, responsive service layout,
 * section spacing, forms, and shared service components.
 *
 * Loaded after style.css by functions.php handle: chauffagiste-light-service-pages.
 * Component namespace: .cp-modern-service
 */

:root{
  --cp-service-max:1120px;
  --cp-service-gutter:32px;
  --cp-service-mobile-gutter:36px;
  --cp-service-card-radius:22px;
  --cp-service-card-border:1px solid var(--cp-border,#1e1f24);
  --cp-service-card-shadow:8px 8px 0 rgba(112,72,255,.14);
  --cp-service-card-padding:30px;
  --cp-service-card-padding-desktop:48px;
  --cp-service-card-padding-mobile-y:26px;
  --cp-service-card-padding-mobile-x:24px;
  --cp-service-input-padding-x:14px;
}

/* Global service wrapper: every generated service page should use this root class. */
.entry-content .cp-modern-service{
  width:100%;
}
.cp-modern-service .cp-wrap,
.cp-modern-service .cp-hero-grid,
.cp-modern-service .cp-split-card,
.cp-modern-service .cp-dark-grid,
.cp-modern-service .cp-feature-grid,
.cp-modern-service .cp-gallery{
  width:min(var(--cp-service-max),calc(100% - var(--cp-service-gutter)));
  max-width:var(--cp-service-max);
  margin-left:auto;
  margin-right:auto;
}

/* Do not convert structural grid wrappers into flex. Center only simple section wrappers. */
@media(min-width:981px){
  .cp-modern-service .cp-section > .cp-wrap:not(.cp-split-card):not(.cp-hero-grid):not(.cp-dark-grid),
  .cp-modern-service .cp-dark-section > .cp-wrap:not(.cp-split-card):not(.cp-hero-grid):not(.cp-dark-grid),
  .cp-modern-service .cp-bottom-cta > .cp-wrap:not(.cp-split-card):not(.cp-hero-grid):not(.cp-dark-grid){
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .cp-modern-service .cp-section > .cp-wrap:not(.cp-split-card):not(.cp-hero-grid):not(.cp-dark-grid) > :where(h2,p),
  .cp-modern-service .cp-dark-section > .cp-wrap:not(.cp-split-card):not(.cp-hero-grid):not(.cp-dark-grid) > :where(h2,p),
  .cp-modern-service .cp-bottom-cta > .cp-wrap:not(.cp-split-card):not(.cp-hero-grid):not(.cp-dark-grid) > :where(h2,p){
    width:100%;
    max-width:880px;
    text-align:center;
  }
  .cp-modern-service .cp-split-card,
  .cp-modern-service .cp-dark-grid,
  .cp-modern-service .cp-feature-grid,
  .cp-modern-service .cp-gallery{
    width:min(var(--cp-service-max),calc(100% - var(--cp-service-gutter)));
  }
  .cp-modern-service .cp-green-band{
    width:min(var(--cp-service-max),calc(100% - var(--cp-service-gutter)));
    max-width:var(--cp-service-max);
    margin-left:auto;
    margin-right:auto;
    align-items:center;
  }
  .cp-modern-service .cp-green-band > .cp-wrap{
    grid-column:1 / -1;
    width:min(880px,100%);
    margin-left:auto;
    margin-right:auto;
    text-align:center;
  }
  .cp-modern-service .cp-green-band .cp-step{
    text-align:left;
  }
  .cp-modern-service .cp-split-content{
    padding:var(--cp-service-card-padding-desktop);
  }
  .cp-modern-service .cp-feature,
  .cp-modern-service .cp-stat{
    padding:30px;
  }
}

/* Keep shared card sections readable when long H2 headings sit in two-column layouts. */
.cp-modern-service .cp-split-card{
  gap:clamp(24px,4vw,44px);
}
.cp-modern-service .cp-split-card > div{
  min-width:0;
}
.cp-modern-service .cp-split-card h2{
  font-size:clamp(1.45rem,2.2vw,2rem);
  line-height:1.16;
  margin-top:0;
  margin-bottom:14px;
  overflow-wrap:break-word;
}
.cp-modern-service .cp-feature-grid h3{
  line-height:1.22;
  overflow-wrap:break-word;
}

/* Shared callback form styling for shortcode output, service CTAs, and bottom forms. */
.cp-cta-row-center{
  justify-content:center;
}
.entry-content > .cp-lead-form-card,
.cp-modern-service > .cp-lead-form-card,
.cp-bottom-cta .cp-lead-form-card{
  width:min(760px,calc(100% - var(--cp-service-gutter)));
  margin:28px auto 56px;
  background:#fff;
  border:var(--cp-service-card-border);
  border-radius:var(--cp-service-card-radius);
  padding:var(--cp-service-card-padding);
  box-shadow:var(--cp-service-card-shadow);
}
.entry-content > .cp-lead-form-card h2,
.cp-modern-service > .cp-lead-form-card h2,
.cp-bottom-cta .cp-lead-form-card h2{
  font-size:clamp(1.7rem,3vw,2.25rem)!important;
  margin-bottom:8px;
}
.entry-content > .cp-lead-form-card>p,
.cp-modern-service > .cp-lead-form-card>p,
.cp-bottom-cta .cp-lead-form-card>p{
  margin:0 0 18px;
  color:#343940;
}
.entry-content > .cp-lead-form-card .cp-form-grid,
.cp-modern-service > .cp-lead-form-card .cp-form-grid,
.cp-modern-service .cp-lead-form-card .cp-form-grid,
.cp-bottom-cta .cp-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.entry-content > .cp-lead-form-card .cp-lead-form label,
.cp-modern-service > .cp-lead-form-card .cp-lead-form label,
.cp-modern-service .cp-lead-form-card .cp-lead-form label,
.cp-bottom-cta .cp-lead-form label{
  display:block;
  margin:0 0 14px;
  font-weight:700;
  color:#172018;
}
.entry-content > .cp-lead-form-card .cp-lead-form label span,
.cp-modern-service > .cp-lead-form-card .cp-lead-form label span,
.cp-modern-service .cp-lead-form-card .cp-lead-form label span,
.cp-bottom-cta .cp-lead-form label span{
  display:block;
  margin-bottom:6px;
}
.entry-content > .cp-lead-form-card .cp-lead-form .hp-wrap,
.cp-modern-service > .cp-lead-form-card .cp-lead-form .hp-wrap,
.cp-modern-service .cp-lead-form-card .cp-lead-form .hp-wrap,
.cp-bottom-cta .cp-lead-form .hp-wrap{
  position:absolute!important;
  left:-10000px!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
}
.entry-content > .cp-lead-form-card .cp-lead-form input,
.entry-content > .cp-lead-form-card .cp-lead-form textarea,
.cp-modern-service > .cp-lead-form-card .cp-lead-form input,
.cp-modern-service > .cp-lead-form-card .cp-lead-form textarea,
.cp-modern-service .cp-lead-form-card .cp-lead-form input,
.cp-modern-service .cp-lead-form-card .cp-lead-form textarea,
.cp-bottom-cta .cp-lead-form input,
.cp-bottom-cta .cp-lead-form textarea{
  width:100%;
  box-sizing:border-box;
  min-height:48px;
  padding:12px 14px;
  border:1px solid #cfd6d1;
  border-radius:12px;
  font:inherit;
}
.entry-content > .cp-lead-form-card .cp-lead-form textarea,
.cp-modern-service > .cp-lead-form-card .cp-lead-form textarea,
.cp-modern-service .cp-lead-form-card .cp-lead-form textarea,
.cp-bottom-cta .cp-lead-form textarea{
  min-height:110px;
}
.entry-content > .cp-lead-form-card .cp-submit,
.cp-modern-service > .cp-lead-form-card .cp-submit,
.cp-bottom-cta .cp-submit{
  width:auto;
  min-width:240px;
  padding-inline:28px;
}

@media(max-width:760px){
  .cp-modern-service .cp-wrap,
  .cp-modern-service .cp-hero-grid,
  .cp-modern-service .cp-split-card,
  .cp-modern-service .cp-dark-grid,
  .cp-modern-service .cp-feature-grid,
  .cp-modern-service .cp-gallery,
  .cp-modern-service .cp-green-band{
    width:min(var(--cp-service-max),calc(100% - var(--cp-service-mobile-gutter)));
  }
  .entry-content > .cp-lead-form-card,
  .cp-modern-service > .cp-lead-form-card,
  .cp-bottom-cta .cp-lead-form-card{
    width:min(100% - var(--cp-service-mobile-gutter),560px);
    padding:var(--cp-service-card-padding-mobile-y) var(--cp-service-card-padding-mobile-x);
    border-radius:18px;
  }
  .entry-content > .cp-lead-form-card .cp-form-grid,
  .cp-modern-service > .cp-lead-form-card .cp-form-grid,
  .cp-bottom-cta .cp-form-grid{
    grid-template-columns:1fr;
  }
  .entry-content > .cp-lead-form-card .cp-submit,
  .cp-modern-service > .cp-lead-form-card .cp-submit,
  .cp-bottom-cta .cp-submit{
    width:100%;
  }
  .cp-modern-service .cp-split-content,
  .cp-modern-service .cp-green-band,
  .cp-modern-service .cp-feature,
  .cp-modern-service .cp-stat,
  .cp-modern-service .cp-step{
    padding-left:var(--cp-service-card-padding-mobile-x);
    padding-right:var(--cp-service-card-padding-mobile-x);
  }
  .cp-modern-service .cp-feature-grid,
  .cp-modern-service .cp-gallery,
  .cp-modern-service .cp-stats,
  .cp-modern-service .cp-dark-grid{
    gap:18px;
  }
  .cp-modern-service .cp-feature,
  .cp-modern-service .cp-stat,
  .cp-modern-service .cp-step{
    overflow-wrap:anywhere;
  }
  .cp-lead-form input,
  .cp-lead-form textarea{
    padding-left:var(--cp-service-input-padding-x);
    padding-right:var(--cp-service-input-padding-x);
  }
}

/* 2026-07 heating-leak rollout safeguard: direct HTML service pages often use
   cp-split-card with plain div columns rather than cp-split-content wrappers.
   Keep those columns padded/readable globally instead of adding inline CSS. */
.cp-modern-service .cp-split-card > div:not(.cp-lead-form-card):not(.cp-hero-image),
.cp-modern-service .cp-feature-grid > div:not(.cp-lead-form-card):not(.cp-hero-image){
  padding:var(--cp-service-card-padding);
}
@media(min-width:981px){
  .cp-modern-service .cp-split-card > div:not(.cp-lead-form-card):not(.cp-hero-image),
  .cp-modern-service .cp-feature-grid > div:not(.cp-lead-form-card):not(.cp-hero-image){
    padding:var(--cp-service-card-padding-desktop);
  }
}
.cp-modern-service > section:not(.cp-green-band):not(.cp-dark-section):not(.cp-bottom-cta),
.cp-modern-service .cp-section{
  padding:56px 0;
}
.cp-modern-service > section:first-child{
  padding-top:24px;
}
.cp-modern-service > section:last-child{
  padding-bottom:72px;
}