/* services-theme.css
   Shared styles for service detail pages (hero + accents)
   Requires: your site should load Bootstrap (grid/spacing) and optionally Bootstrap Icons.
=========================================================== */

/* 1) Theme tokens (accents, patterns) */
:root{
  --service-accent: #2956d3;
  --service-pattern: url("/images/patterns/blueprint.svg");
}

body[data-service="new-construction"]{ --service-accent:#3d63ff; --service-pattern:url("/images/patterns/blueprint.svg"); }
body[data-service="remodeling"]{      --service-accent:#16b687; --service-pattern:url("/images/patterns/dots-grid.svg"); }
body[data-service="additions"]{       --service-accent:#f6a21a; --service-pattern:url("/images/patterns/diagonal-hatch.svg"); }
body[data-service="rehab-repair"]{    --service-accent:#8c63f9; --service-pattern:url("/images/patterns/mesh.svg"); }
body[data-service="roofing"]{         --service-accent:#e14b4b; --service-pattern:url("/images/patterns/angled-stripes.svg"); }
body[data-service="flooring"]{        --service-accent:#22b6a7; --service-pattern:url("/images/patterns/wave-grid.svg"); }

/* 2) Full-bleed hero (Careers-style) */
.hero--services .hero-media{
  position:absolute; inset:0; z-index:-1;
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 40%, rgba(0,0,0,.15) 70%, rgba(0,0,0,0) 100%),
    var(--hero-img, url("/images/2025/Stock/all-services-1920.jpg"));
  background-size:cover; background-position:center; background-repeat:no-repeat;
  filter:saturate(90%) brightness(90%);
}
.hero--services .hero-heading{
  font-weight:700; font-size:clamp(2.25rem, 4vw + 1rem, 4rem);
  line-height:1.05; margin:0 0 .25rem 0; text-shadow:0 2px 12px rgba(0,0,0,.5);
}
.hero--services .hero-sub{
  font-size:clamp(1rem, 1.2vw + .6rem, 1.25rem);
  margin:0; opacity:.95; text-shadow:0 2px 8px rgba(0,0,0,.4);
}

/* 3) Page accents */
.service-wrap{ position:relative; isolation:isolate; }
.service-bg{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(1100px 500px at 75% 10%, rgba(0,0,0,.06), transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,.04), transparent 40%),
    var(--service-pattern);
  background-size:auto, auto, 600px;
  opacity:.25;
}
.service-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:700; letter-spacing:.02em; color:var(--service-accent);
  border-left:.35rem solid var(--service-accent);
  padding:.25rem .75rem; margin:1rem 0 .75rem 0;
  background:color-mix(in srgb, var(--service-accent) 10%, transparent);
  border-radius:.375rem;
}
.service-eyebrow .bi{ font-size:1.1em; }

.service-title{ margin-bottom:.5rem; }
.service-lede{ max-width:70ch; }

.section-h{ position:relative; padding-top:.25rem; margin-top:1.5rem; }
.section-h::after{
  content:""; display:block; width:72px; height:4px; margin-top:.35rem;
  background:var(--service-accent); border-radius:999px;
}

.service-figure{ margin:1.25rem 0 2rem; border-radius:.75rem; overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,.08); border:1px solid rgba(0,0,0,.08); }
.service-figure img{ width:100%; height:auto; display:block; aspect-ratio:16/9; object-fit:cover; }
.service-figure figcaption{ padding:.75rem 1rem; font-size:.975rem; color:#334; background:#fff; border-top:4px solid var(--service-accent); }

.icon-bullets{ list-style:none; padding-left:0; margin-bottom:1rem; }
.icon-bullets li{ display:flex; gap:.5rem; align-items:flex-start; margin:.4rem 0; }
.icon-bullets .bi{ color:var(--service-accent); margin-top:.15rem; }

.facts{ background:#fff; border:1px solid rgba(0,0,0,.1); border-radius:.5rem; padding:1rem; }
.cta{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--service-accent); color:#fff; border-radius:.5rem;
  padding:.75rem 1rem; text-decoration:none; font-weight:600;
  box-shadow:0 6px 20px color-mix(in srgb, var(--service-accent) 30%, transparent);
}
.cta:hover{ filter:brightness(1.05); }

.content-section{ padding:2rem 0 3rem; }


/* === Spacing tweak: widen column gap between main and aside on lg+ === */
@media (min-width: 992px){
  .service-wrap .row{ --bs-gutter-x: 3rem; } /* 48px horizontal gap */
}
@media (min-width: 1200px){
  .service-wrap .row{ --bs-gutter-x: 3.5rem; } /* 56px on xl */
}

/* Optional subtle divider for the aside on desktop */
@media (min-width: 992px){
  .service-wrap .col-lg-4{ border-left: 1px solid rgba(0,0,0,.06); padding-left: 1.5rem; }
}

/* --- Service detail layout: breathing room & tidy columns --- */

/* widen the content band a touch (breadcrumb + section) */
.breadcrumb,
.service-wrap{
  max-width: 1200px;   /* was ~1100px */
  margin-inline: auto; /* keep centered */
}

/* larger horizontal gutters between main and aside */
@media (min-width: 992px){
  .service-wrap .row{ --bs-gutter-x: 3.5rem; }   /* 56px */
}
@media (min-width: 1200px){
  .service-wrap .row{ --bs-gutter-x: 4rem; }     /* 64px on xl */
}

/* sidebar divider + extra padding for clear separation */
@media (min-width: 992px){
  .service-wrap .col-lg-4{
    border-left: 1px solid rgba(0,0,0,.08);
    padding-left: 2rem;                 /* was 1.5rem */
  }
}

/* optional: add a little right padding to the main column so text doesn't crowd the divider */
@media (min-width: 992px){
  .service-wrap .col-lg-8{
    padding-right: .5rem;
  }
}

/* safety: keep columns comfortably stacked on md and tighter screens */
@media (max-width: 991.98px){
  .service-wrap .col-lg-4{ border-left: 0; padding-left: 0; }
}

/* services-fix.css
   Neutralizes an older grid rule on .service-wrap that conflicts with Bootstrap layout.
   Load this file AFTER styles.css and services-theme.css.
*/

/* Kill legacy grid on service pages (keeps Bootstrap's .row/.col layout) */
@media (min-width: 960px){
  .service-wrap{
    display: block !important;
    grid-template-columns: unset !important;
    gap: 0 !important;
  }
}

/* Keep roomy gutters between main and aside */
@media (min-width: 992px){
  .service-wrap .row{ --bs-gutter-x: 3.5rem; }
}
@media (min-width: 1200px){
  .service-wrap .row{ --bs-gutter-x: 4rem; }
}
@media (min-width: 992px){
  .service-wrap .col-lg-4{ border-left: 1px solid rgba(0,0,0,.08); padding-left: 2rem; }
}
@media (min-width: 992px){
  .service-wrap .col-lg-8{ padding-right: .5rem; }
}
@media (max-width: 991.98px){
  .service-wrap .col-lg-4{ border-left: 0; padding-left: 0; }
}

/* services-balance.css
   Adds a shared panel behind the two columns and makes the sidebar sticky.
   Load after your base service styles.
*/

.service-panel{
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.01));
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding: 1rem;
  box-shadow: 0 10px 36px rgba(0,0,0,.06);
  margin-top: 1rem;
}
@media (min-width: 992px){
  .service-panel{ padding: 2rem; }
}

/* Sticky sidebar balances height while scrolling */
@media (min-width: 992px){
  .aside-sticky{
    position: sticky;
    top: calc(var(--header-height, 76px) + 24px);
  }
}

/* Right-rail CTA helpers */
.cta.full{ width:100%; justify-content:center; }
.cta.alt{
  background:transparent;
  color:var(--service-accent);
  border:1px solid color-mix(in srgb, var(--service-accent) 40%, transparent);
  box-shadow:none;
}
.cta.alt:hover{ background: color-mix(in srgb, var(--service-accent) 10%, #fff); }

/* Right-rail spacing polish */
.aside-sticky .cta{ margin-bottom: 14px; }
.aside-sticky .facts.mb-3{ margin-top: 14px; }