/* ============================================================
   assets/css/spurgo.css
   /spurgo-pozzi-neri/ — page-specific sections only.

   Tokens, .container, .btn, the header/footer chrome, the sticky
   call bar, the .hero--split hero, .features__grid/.feature-card
   and the "Dove operiamo" accordion (.svc-coverage/.svc-region-*,
   prezzi.css) all come from global.css / prezzi.css and are never
   redefined here (CLAUDE.md, "Section CSS" rule 2). Everything
   below is prefixed sp- so it cannot collide with a shared
   component, now or later.

   Sections: steps - story - services - coverage (prezzi.css) - closing
============================================================ */

/* ---- Steps: three-up onboarding strip, centred cards ---- */
.sp-steps{
  background:var(--paper-000);
  padding:clamp(56px,7vw,88px) 5vw clamp(40px,5vw,64px);
}
.sp-steps-inner{ max-width:1080px; margin:0 auto; }

.sp-steps .feature-card{
  text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.sp-steps .feature-card__icon{
  width:84px; height:84px; border-radius:50%;
  background:var(--green-100);
  margin-bottom:22px;
}
.sp-steps .feature-card__icon img{ width:52px; height:52px; object-fit:contain; }
.sp-steps .feature-card p{ text-align:center; }

/* Plain paragraph in the source, not a heading (hard rule 9) — styled
   to read as this card's title regardless of tag, same treatment
   /intervento-apertura-porte/'s .fb-step-title gives its own
   heading-less step labels. */
.sp-steps .sp-step-title{
  margin:0 0 12px;
  font-family:var(--font-display);
  font-size:1.15rem; font-weight:800; color:var(--green-900);
}

@media (max-width:560px){
  .sp-steps .feature-card__icon{ width:68px; height:68px; }
  .sp-steps .feature-card__icon img{ width:42px; height:42px; }
}

/* ============================================================
   Story: intro + three long-copy sub-sections.
   These carry real paragraphs, not blurbs, so an editorial rail
   (numbered dot + connector line) reads better than squeezing them
   into equal-width cards — same visual family as
   /intervento-idraulico/'s .idr-editorial, rebuilt here with its
   own prefix since spurgo.css cannot reach idraulico.css's classes.
============================================================ */
.sp-story{
  background:var(--paper-050);
  padding:clamp(56px,7vw,88px) 5vw;
}
.sp-story-inner{ max-width:900px; margin:0 auto; }

.sp-story-intro{ margin:0 0 clamp(40px,5vw,56px); }
.sp-story-intro h2{ margin:0 0 16px; color:var(--green-900); }
.sp-story-intro p{ margin:0; font-size:16.5px; line-height:1.75; }
.sp-story-intro p a{ color:var(--green-700); font-weight:700; }
.sp-story-intro p a:hover{ color:var(--green-900); }

.sp-story-grid{ display:grid; gap:clamp(36px,4vw,52px); }

.sp-story-block{
  display:grid;
  grid-template-columns:44px 1fr;
  gap:24px;
}
.sp-story-rail{
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.sp-story-dot{
  width:44px; height:44px; border-radius:50%;
  background:var(--amber-500); color:var(--paper-000);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  box-shadow:0 8px 20px rgba(255,81,0,.3);
}
.sp-story-dot svg{ width:22px; height:22px; }
.sp-story-line{
  flex:1; width:2px; border-radius:1px;
  background:linear-gradient(var(--green-700),transparent);
  opacity:.35;
}
.sp-story-block:last-child .sp-story-line{ display:none; }

.sp-story-body h3{ margin:4px 0 14px; color:var(--green-900); line-height:1.35; }
.sp-story-body p{ margin:0 0 14px; font-size:16px; line-height:1.75; }
.sp-story-body p:last-child{ margin-bottom:0; }
.sp-story-body a{ color:var(--green-700); font-weight:700; }
.sp-story-body a:hover{ color:var(--green-900); }

@media (max-width:560px){
  .sp-story-block{ grid-template-columns:34px 1fr; gap:16px; }
  .sp-story-dot{ width:34px; height:34px; }
  .sp-story-dot svg{ width:17px; height:17px; }
}

/* ---- Full-width prose: headings + text, no photo column.
   Verona's source runs an intro block ahead of the usual photo+text
   row — plain typography, not .about__grid. ---- */
.sp-prose{
  background:var(--paper-000);
  padding:clamp(40px,5vw,56px) 5vw;
}
.sp-prose-inner{ max-width:900px; margin:0 auto; }
.sp-prose h2{ margin:0 0 16px; color:var(--green-900); }
.sp-prose h3{ margin:32px 0 14px; color:var(--green-900); }
.sp-prose p{ margin:0 0 16px; font-size:16.5px; line-height:1.75; }
.sp-prose p:last-child{ margin-bottom:0; }
.sp-prose a{ color:var(--green-700); font-weight:700; }
.sp-prose a:hover{ color:var(--green-900); }

/* ---- Services: phone banner + two full-width split cards ---- */
.sp-services{
  background:var(--paper-000);
  padding:clamp(56px,7vw,88px) 5vw;
}
.sp-services-inner{ max-width:1000px; margin:0 auto; text-align:center; }

.sp-services-title{
  margin:0 0 18px;
  font-size:clamp(28px,3vw,38px); font-weight:800;
  color:var(--green-900); letter-spacing:-.01em;
}
.sp-services-rule{
  width:72px; height:4px; margin:0 auto 28px; border:0; border-radius:2px;
  background:var(--amber-500);
}
.sp-services-subtitle{
  margin:0 0 14px; font-size:clamp(1.05rem,1rem + .4vw,1.3rem);
  color:var(--ink-700);
}
.sp-services-call{ margin:0 0 44px; font-size:1.15rem; font-weight:800; }
.sp-services-call a{ color:var(--amber-600); }
.sp-services-call a:hover{ color:var(--amber-500); }

/* "DOVE OPERIAMO" heading — the source colours this one orange,
   unlike "I SERVIZI"'s navy, so it gets its own title class rather
   than reusing .sp-services-title with an inline-style override. */
.sp-coverage-title{
  margin:0 0 18px;
  font-size:clamp(28px,3vw,38px); font-weight:800;
  color:var(--amber-500); letter-spacing:-.01em;
}

.sp-services-grid{
  --col-min:320px; --gap:28px; --cols-max:2;
  text-align:left;
}
.sp-services-grid .feature-card{
  display:flex; gap:24px; align-items:flex-start;
}
.sp-services-grid .feature-card__icon{
  width:72px; height:72px; border-radius:16px;
  background:var(--green-100); flex-shrink:0; margin-bottom:0;
}
.sp-services-grid .feature-card__icon img{ width:44px; height:44px; object-fit:contain; }

/* A card that carries its own call button (Piacenza's second card)
   needs the same wrap guard every other long CTA label on this site
   needs: .btn is nowrap by default, so a full "CHIAMA! <number>"
   label forces the grid item's min-content width past its track at
   some in-between widths. */
.sp-services-grid .feature-card a.btn{
  white-space:normal; max-width:100%; margin-top:8px;
}

@media (max-width:640px){
  .sp-services-grid .feature-card{ flex-direction:column; align-items:center; text-align:center; }
}

/* A call button sitting under an .about__media photo, rather than
   inside .about__content, needs its own top margin. */
.about__media .btn{ margin-top:20px; }

/* global.css paints every link inside .about__content green-500
   (0,1,1), which also catches a call button placed in the text
   column and turns its label blue — same specificity trap
   /intervento-idraulico/'s .idr-intro already documents. Put the
   button's own colour back; it needs its own top margin too, since
   .about__content p only spaces paragraphs from each other. */
.about__content a.btn,
.about__content a.btn:hover,
.about__content a.btn:focus-visible{ color:var(--paper-000); }
.about__content a.btn{ margin-top:8px; }

/* ---- City-page closing CTA strip: icon + heading + line, paired
   with a call button — text left, button right, wraps on mobile.
   Same shape /intervento-idraulico/'s .idr-services-closing already
   established, rebuilt here with spurgo's own prefix. ---- */
.sp-city-cta{
  margin-top:clamp(40px,5vw,56px);
  background:var(--green-050);
  border:1px solid var(--line-200);
  border-radius:var(--radius-l);
  padding:clamp(24px,3vw,34px);
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:24px;
  text-align:left;
}
.sp-city-cta-media{ display:flex; align-items:center; gap:18px; flex:1 1 320px; }
.sp-city-cta-media img{ width:64px; height:64px; object-fit:contain; flex-shrink:0; }
.sp-city-cta-media h4{ margin:0 0 6px; color:var(--green-900); }
.sp-city-cta-media p{ margin:0; font-weight:700; color:var(--ink-700); }
.sp-city-cta .btn{ flex-shrink:0; white-space:normal; }

/* ---- Closing band: dark, single centred column ---- */
.sp-closing{
  background:var(--green-900);
  padding:clamp(64px,8vw,96px) 5vw;
  text-align:center;
}
.sp-closing-inner{ max-width:720px; margin:0 auto; }
.sp-closing h2{ margin:0 0 20px; color:var(--paper-000); }
.sp-closing p{ margin:0 0 32px; color:var(--green-100); font-size:16.5px; line-height:1.75; }