/* ============================================================
   assets/css/sanificazione.css
   Sections used by the /sanificazione/ pages only.

   Load order: global.css -> prezzi.css -> sanificazione.css
   so this file can still override a shared section locally.

   Tokens, .container, .btn and the header/footer/hero chrome stay
   in global.css and are never redefined here.

   This file was empty until /sanificazione/sanificazione-bologna/
   needed two things global.css and prezzi.css do not provide:

     1 .san-icon  a small round icon floated into a paragraph,
                  which is what the old page's "alignleft" image is
     2 .san-band  a full-bleed photo band carrying white text,
                  which is what the old page's last row is

   Everything else on that page reuses existing components
   (.hero--split, .features, .btn, .call-bar, .section-kicker).

   The /sanificazione/ hub also loads this file and uses none of
   these classes, so it renders exactly as before.
============================================================ */


/* ============================================================
   1. INTRO — the "SERVIZI DI SANIFICAZIONE" block
============================================================ */
.san-intro{
  background:var(--paper-000);
  padding:clamp(56px,7vw,88px) 5vw;
}

.san-intro-inner{ max-width:900px; margin:0 auto; }

.san-head{
  text-align:center;
  margin:0 0 clamp(26px,3.4vw,38px);
}

.san-head h2{
  margin:0 0 12px;
  color:var(--green-900);
  font-size:clamp(1.5rem,1.2rem + 1.4vw,2.2rem);
  line-height:1.15;
  letter-spacing:-.02em;
}

.san-head h3{
  margin:0;
  font-size:clamp(1.05rem,.95rem + .5vw,1.35rem);
  line-height:1.3;
  color:var(--green-900);
}

/* The call number inside that H3 is the page's loudest link. */
.san-head h3 a{
  color:var(--amber-600);
  text-decoration:none;
}
.san-head h3 a:hover{ text-decoration:underline; }

.san-intro p{
  margin:0 0 18px;
  font-size:16.5px;
  line-height:1.8;
  color:var(--ink-700);
}

.san-intro p strong,
.san-intro p b{ color:var(--green-900); }


/* ------------------------------------------------------------
   The round icon floated into the first paragraph. In the export
   this is an <img class="alignleft"> at 99x99; the file itself is
   64px, so it sits inside the circle with padding rather than
   being scaled up.
------------------------------------------------------------ */
.san-icon{
  float:left;
  shape-outside:circle(50%);
  box-sizing:border-box;
  width:99px; height:99px;
  margin:2px 22px 12px 0;
  padding:16px;
  border-radius:50%;
  background:var(--green-100);
}

/* On a phone the float leaves a two-word gutter — centre it. */
@media (max-width:560px){
  .san-icon{
    float:none;
    shape-outside:none;
    display:block;
    margin:0 auto 18px;
  }
}


/* ============================================================
   2. CTA ROW — the centred orange buttons between sections
============================================================ */
.san-cta{
  margin:clamp(26px,3.2vw,38px) 0 0;
  text-align:center;
}


/* ============================================================
   3. SERVICE CARDS — "SERVIZI CHE OFFRIAMO"

   Added for /sanificazione/sanificazione-milano/, which lays its
   eight pest-control services out as four columns of cards. The
   card itself is global.css's .feature-card; only the grid and
   the pinned button are defined here, so the cards match the
   feature cards used elsewhere on the site.
============================================================ */
.san-services{
  background:var(--green-050);
  padding:clamp(56px,7vw,88px) 5vw;
}

.san-services-inner{ max-width:1240px; margin:0 auto; }

.san-services-grid{
  --col-min:240px; --gap:var(--space-m); --cols-max:4;
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(
    auto-fit,
    minmax(max(min(var(--col-min),100%),
               (100% - (var(--gap) * (var(--cols-max) - 1))) / var(--cols-max)),1fr)
  );
}

/* Cards share a row, so the button is pinned to the bottom and
   the grid stays tidy whatever the copy length. */
.san-services-grid .feature-card{
  display:flex;
  flex-direction:column;
}

.san-card-cta{
  margin:auto 0 0;
  padding-top:18px;
  text-align:center;
}


/* ============================================================
   4. REGION LIST — "Collaboriamo con tecnici allocati in ..."

   Added for /sanificazione/sanificazione-veneto/, which lists the
   province capitals it covers as two centred columns. The export
   prefixes each line with <i class="fa fa-check-circle">;
   FontAwesome is not loaded on this site, so the markup uses an
   inline SVG tick instead — the <i> held no text, so nothing the
   page says changes.
============================================================ */
.san-regions{ margin:clamp(28px,3.5vw,42px) 0 0; }

.san-regions-lead{
  margin:0 0 20px;
  text-align:center;
  color:var(--green-900);
  font-family:var(--font-display);
  font-size:clamp(1.25rem,1.05rem + .9vw,1.8rem);
  line-height:1.15;
}

.san-regions-grid{
  display:grid;
  gap:var(--space-s);
  grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));
}

/* The .san-intro paragraph rules would left-align these. */
.san-intro .san-regions-grid p{
  margin:0;
  text-align:center;
  font-size:1.02rem;
  line-height:1.9;
}

/* global.css sets a blanket "svg{display:block}", which would put
   every tick on a line of its own and leave the city name centred
   underneath it. These have to stay inline with their label. */
.san-check{
  display:inline-block;
  width:16px; height:16px;
  vertical-align:-3px;
  margin-right:7px;
  color:var(--green-700);
}


/* ============================================================
   5. PHOTO BAND — "SANIFICAZIONE AMBIENTALE"

   The export puts sanificazione-rapida.jpg behind this row as a
   CSS background and writes the copy in white over it, so it is
   reproduced the same way rather than as an <img>: it carries no
   alt text and is purely decorative. The dark wash keeps the copy
   readable whatever part of the photo is showing.
   Upload path and query string are untouched (hard rule 6).
============================================================ */
.san-band{
  position:relative;
  padding:clamp(64px,8vw,108px) 5vw;
  background:
    linear-gradient(rgba(6,38,24,.78), rgba(6,38,24,.78)),
    url("/wp-content/uploads/2020/03/sanificazione-rapida.jpg?id=13849")
      center / cover no-repeat;
  color:var(--paper-000);
}

.san-band-inner{
  max-width:860px;
  margin:0 auto;
  text-align:center;
}

.san-band h2{
  margin:0 0 20px;
  color:var(--paper-000);
  font-size:clamp(1.5rem,1.2rem + 1.4vw,2.2rem);
  line-height:1.15;
  letter-spacing:-.02em;
}

/* The first two words link to the /sanificazione/ hub. */
.san-band h2 a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:4px;
}
.san-band h2 a:hover{ color:var(--amber-400); }

.san-band p{
  margin:0;
  font-size:16.5px;
  line-height:1.85;
  color:rgba(255,255,255,.88);
  text-align:left;
}

@media (min-width:720px){
  .san-band p{ text-align:center; }
}