/* service-macro.css — stili specifici per le 6 pagine macro-categoria.
   Estende service-sub.css (caricato prima). */

/* ===== SEZIONE "I NOSTRI SERVIZI" ===== */
.section-macro-services { padding-block: var(--section-py); background: var(--c-white); }

.macro-services__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-bottom: 56px;
  align-items: center;          /* paragrafo SEMPRE centrato verticalmente al titolo */
}
.macro-services__title-col {
  position: relative;
  /* niente padding-top: il deco vive fuori dalla cella così l'altezza è = al solo testo H2
     e align-items: center sul parent centra davvero il paragrafo sul titolo visibile. */
}
.macro-services__deco {
  position: absolute; top: -38px; left: 0;
  width: 15px; height: 16px;
  border-top: 4px solid var(--c-green-dark); border-left: 4px solid var(--c-green-dark);
  display: block;
}
.macro-services__title {
  font-size: clamp(28px, 2.6vw, 50px);
  font-weight: 600; line-height: 1;
  color: var(--c-title); margin: 0;
}
.macro-services__intro-col { /* niente padding-top: align-items: center sul parent gestisce il centramento */ }
.macro-services__intro {
  font-size: var(--fs-body);
  font-weight: 400; line-height: 1.39;
  color: var(--c-body); margin: 0 0 16px;
}

/* Griglia 2×3 di card servizio orizzontali — dimensioni a 1920:
   card 610×303, image 227×303 (37.2%), body 381×303 (62.5%), gap 53px */
.macro-services__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: max(20px, 2.76vw);
}
.service-tile {
  display: grid;
  grid-template-columns: 37.2% 1fr;
  aspect-ratio: 610 / 303;
  align-items: stretch;
  background: var(--c-white);
  color: inherit;
  border: 1px solid #E5E7E7;
  overflow: hidden;
  transition: box-shadow var(--t-fast), transform var(--t-fast);
}
.service-tile:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  transform: translateY(-3px);
}
.service-tile__media {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--c-bg-placeholder);
}
.service-tile__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--t-slow);
}
.service-tile:hover .service-tile__media img { transform: scale(1.03); }
.service-tile__body {
  padding: 32px 36px 32px 36px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  min-width: 0;
  overflow: hidden;
}
.service-tile__body::before {
  content: "";
  position: absolute;
  top: 32px; left: 36px;
  width: 13px; height: 14px;
  border-top: 3px solid var(--c-green);
  border-left: 3px solid var(--c-green);
}
.service-tile__title {
  font-size: clamp(22px, 1.25vw, 24px);    /* H3 chiaramente più grande del paragrafo */
  font-weight: 600;
  line-height: 1.2;
  color: var(--c-green);
  margin: 26px 0 0 0;
  overflow-wrap: break-word;
  word-break: break-word;
}
.service-tile__text {
  font-size: var(--fs-body);   /* segue il token globale: 18px desktop, 16px mobile */
  font-weight: 400;
  line-height: 1.45;
  color: var(--c-body);
  margin: 0;
}

/* ===== SEZIONE "PARTNER DI FIDUCIA" =====
   Header 2 col (titolo sx + paragrafo dx) sopra
   Grossa immagine sotto, con 3 box overlay sul bordo bottom */
.section-macro-partner {
  padding-block: var(--section-py);
  background: var(--c-bg-soft);   /* grigio chiaro #F7F9F9 — fascia "Partner di Fiducia" */
}
.macro-partner__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
  align-items: center;          /* paragrafo SEMPRE centrato verticalmente al titolo */
}
.macro-partner__title-col {
  position: relative;
  /* min-width: 0 evita il Grid blowout — senza, una parola lunga come
     "amministratori" forza il col oltre la viewport su mobile stretto. */
  min-width: 0;
  /* niente padding-top: stesso ragionamento di .macro-services__title-col → align-items: center
     centra il paragrafo sul testo H2, non sulla cella gonfiata dal padding del deco. */
}
.macro-partner__deco {
  position: absolute; top: -38px; left: 0;
  width: 15px; height: 16px;
  border-top: 4px solid var(--c-green-dark); border-left: 4px solid var(--c-green-dark);
  display: block;
}
.macro-partner__title {
  font-size: var(--fs-h2);          /* cap @1920 = 50px, piatto fino a 2560 */
  font-weight: 600;
  line-height: 1.1;
  color: var(--c-title);
  margin: 0;
  overflow-wrap: break-word;
}
.macro-partner__text-col {
  /* niente padding-top: align-items: center sul parent gestisce il centramento */
  min-width: 0;   /* stessa ragione del title-col: evita Grid blowout su mobile */
}
.macro-partner__p {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.45;
  color: var(--c-body);
  margin: 0 0 14px;
}
.macro-partner__p:last-child { margin-bottom: 0; }

.macro-partner__media {
  position: relative;
  isolation: isolate;
}
.macro-partner__media img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 1273 / 500;
  object-fit: cover;
}

/* 3 box overlay sul bordo bottom dell'immagine */
.macro-partner__overlay {
  position: absolute;
  right: 24px;          /* DENTRO l'immagine, a destra */
  bottom: 24px;
  display: flex;
  gap: 20px;
}
.partner-feature {
  width: 245px;
  height: 245px;
  background: rgba(255, 255, 255, 0.9);
  padding: 48px 20px 16px;            /* ridotto per dare 4 righe al testo nelle card più lunghe */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;        /* icona ancorata in alto, stessa altezza in tutti i box */
  gap: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.partner-feature__icon,
.partner-feature > img,
.partner-feature__icon[src] {
  width: 55px !important;
  height: 55px !important;
  max-width: 55px !important;
  max-height: 55px !important;
  min-width: 55px !important;
  min-height: 55px !important;
  object-fit: contain !important;
  display: block !important;
  flex-shrink: 0 !important;
  align-self: flex-start !important;
}
.partner-feature__text {
  font-size: clamp(14px, 0.83vw, 16px);   /* cap @1920 = 16px: 4 righe entrano nei 245×245 anche con testi lunghi */
  font-weight: 600;
  line-height: 1.25;
  color: var(--c-title);
  margin: 0;
}


/* ===== SEZIONE "SERVIZIO ATTIVO NEL TERRITORIO" =====
   Layout: 3 immagini posizionate attorno al testo centrale
   con segno grafico Soluzioni come watermark dietro.
   Coordinate sul frame 1920×972:
   - IMG 1 (SX top):    x=162  y=235  size 408×406
   - IMG 2 (CENTER bot): x=681 y=423  size 559×549
   - IMG 3 (RIGHT mid):  x=1351 y=276 size 408×285
   - Watermark segno:    centrato, dietro tutto */
.section-macro-territory {
  position: relative;
  width: 100%;
  max-width: var(--grid-max);
  margin: 0 auto 80px auto;              /* gap territory→banner CTA: 80px @1920 */
  height: max(700px, 56vw);              /* @1920 = 1075px (era 50.6vw=972): più aria sotto la CTA prima dell'img centrale */
  background: var(--c-white);
  overflow: hidden;
  isolation: isolate;
}
.macro-territory__watermark {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  width: 48.18%;        /* 925/1920 */
  height: auto;
  opacity: 1;           /* l'SVG ha già fill #00A79D opacity 0.1 nativo */
  pointer-events: none;
  z-index: 0;
}
.macro-territory__img {
  position: absolute;
  display: block;
  object-fit: cover;
  z-index: 1;
  margin-top: 60px;          /* tutte e 3 le immagini abbassate di 60px */
}
/* SX top: x=162 (=8.44%), y=235 (=24.18%), 408×406 (=21.25%×... aspect 408/406) */
.macro-territory__img--1 {
  top: 24.18%;
  left: 8.44%;
  width: 21.25%;
  aspect-ratio: 408 / 406;
}
/* CENTER bottom: x=681, size 559×549. Top abbassato a 50% (era 43.52%)
   per dare più aria fra fondo CTA e bordo superiore di questa immagine @1920. */
.macro-territory__img--2 {
  top: 50%;
  left: 35.47%;
  width: 29.11%;
  aspect-ratio: 559 / 549;
}
/* RIGHT middle: x=1351 (=70.36%), y=276 (=28.40%), 408×285 (=21.25%×... aspect 408/285) */
.macro-territory__img--3 {
  top: 28.40%;
  left: 70.36%;
  width: 21.25%;
  aspect-ratio: 408 / 285;
}

.macro-territory {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding-top: 80px;        /* spazio sopra per evitare overlap col header */
  text-align: center;
}
.macro-territory__title {
  font-size: var(--fs-h2);          /* cap @1920 = 50px, piatto fino a 2560 */
  font-weight: 600;
  line-height: 1.1;
  color: var(--c-title);
  margin: 0;
  max-width: 920px;
}
.macro-territory__p {
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--c-body);
  margin: 0;
  max-width: 920px;
}
.macro-territory__cta { margin-top: 8px; align-self: center; }

/* ===== RESPONSIVE: viewport non desktop full (sotto 1920px) =====
   L'aspect-ratio fisso 610/303 della service-tile era pensato per il
   desktop pixel-perfect a 1920. Su viewport più stretti (es. MacBook Air
   1660) le card si rimpiccioliscono in larghezza ma con aspect-ratio
   bloccato calano anche in altezza → il testo overflow viene tagliato
   da `overflow: hidden`. Lasciamo altezza auto. */
@media (max-width: 1919px) {
  .service-tile { aspect-ratio: auto; }
}

/* ===== RESPONSIVE sotto 1270px ===== */
@media (max-width: 1270px) {
  /* padding-block delle .section-* gestito globalmente da --section-py (tokens.css);
     .section-macro-territory è esclusa dalla regola globale (hero custom), tiene il suo */
  .section-macro-territory { padding-block: 56px; }
  .macro-services__head,
  .macro-partner__head {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 20px;
  }
  .macro-services__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .macro-partner__overlay {
    position: static;
    /* Sotto l'immagine: 3 box IN LINEA (non più una fascia piena ciascuno).
       minmax(0,1fr) (non 1fr): la traccia può restringersi SOTTO il min-content →
       evita il grid-blowout su smartphone (con `1fr` le parole lunghe del testo
       gonfiavano le 3 tracce oltre il viewport → .col-content a 423px su 390 →
       scroll/clip laterale). Il testo va a capo, niente overflow. */
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 20px;
    left: 0; right: 0;
  }
  .partner-feature { width: 100%; min-width: 0; }
  .partner-feature__text { overflow-wrap: anywhere; }
  /* Su mobile la section ha padding-top ridotto (40/56px vs 80px desktop),
     quindi il deco con `top: -38px` finisce praticamente attaccato al bordo
     superiore della fascia grigia. Lo riporto dentro il title-col e gli do
     un po' di padding-top per riservare spazio sopra il titolo. */
  .macro-partner__title-col { padding-top: 24px; }
  .macro-partner__deco { top: 0; }
}
@media (max-width: 1024px) {
  /* 3 box in linea (vedi @1270): altezza auto + icona/padding dimensionati per la
     colonna stretta (la griglia stira tutte e 3 i box alla stessa altezza). */
  .partner-feature {
    height: auto;
    min-height: 0;
    padding: 20px 14px;
    justify-content: flex-start;
  }
  .partner-feature__icon,
  .partner-feature > img,
  .partner-feature__icon[src] {
    width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
  }

  /* Card servizi: sotto i 1024px la divisione orizzontale immagine|testo strizzava
     il testo in una colonna troppo stretta (vedi screenshot). Le mando in colonna,
     una dopo l'altra (1 per riga), con immagine sopra e testo sotto. */
  .macro-services__grid { grid-template-columns: 1fr; }
  .service-tile {
    aspect-ratio: auto;
    grid-template-columns: 1fr;        /* immagine sopra, corpo sotto */
  }
  .service-tile__media {
    aspect-ratio: 16 / 9;
    max-height: 320px;                 /* evita immagini enormi nella card full-width */
  }

  /* ===== TERRITORY: layout sequenziale su mobile =====
     Desktop: foto sparse in position absolute attorno al testo (height fissa 700px+).
     Mobile: tutto in flusso normale → titolo, paragrafi, CTA, poi le 3 foto
     in colonna sotto il pulsante. Watermark centrale nascosto. */
  .section-macro-territory {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;     /* simmetrico con .section-macro-partner:has(+ .section-macro-territory) padding-bottom */
    /* Override del padding-block: 56px ereditato dalla regola @media 1270.
       Su mobile lasciamo un piccolo padding-top per evitare che il titolo
       della territory sia troppo attaccato alla fascia partner soprastante.
       Il padding-bottom resta 0 perché lo spazio sotto è dato dal
       margin-bottom = var(--section-py). */
    padding-top: 32px;
    padding-bottom: 0;
    /* margin-bottom = var(--section-py) per simmetria con le altre fasce:
       lo spazio tra l'ultima foto della territory e il top della CTA è
       margin-bottom (var) + padding-top CTA (var) = stesso pattern delle
       altre transizioni tra section adiacenti. */
    margin-bottom: var(--section-py);
  }
  /* Spazi simmetrici sopra e sotto la fascia macro-territory:
     - sopra il titolo  = padding-bottom della partner adiacente
     - sotto il CTA     = gap della section flex (vedi `.section-macro-territory`)
     Entrambi 24px per ritmo coerente. */
  .section-macro-partner:has(+ .section-macro-territory) { padding-bottom: 24px !important; }
  .macro-territory__watermark { display: none; }
  .macro-territory__img {
    position: static;
    /* rientrate al margine del sito (≈20px/lato) come il testo, NON edge-to-edge */
    width: calc(100% - 40px);
    margin-inline: auto;
    margin-top: 0;
    order: 1;        /* va dopo il container del testo (order: 0 di default) */
  }
  .macro-territory__img--1,
  .macro-territory__img--2,
  .macro-territory__img--3 {
    top: auto;
    left: auto;
    width: calc(100% - 40px);
  }
  /* Avvicina il titolo al top della section (era 80px riservati per il deco
     di posizionamento desktop) e allinea i testi a sinistra come da regola
     mobile generale del sito.
     padding-top: 10 (era 20) dimezza lo spazio bianco tra la fascia grigia
     della macro-partner che precede e il titolo "Interventi di giardinaggio". */
  .macro-territory {
    padding-top: 0;
    gap: 16px;
    text-align: left;
    align-items: flex-start;
  }
  .macro-territory__cta { align-self: flex-start; }
}
@media (max-width: 720px) {
  .macro-services__grid { grid-template-columns: 1fr; }
  /* Su mobile la card diventa verticale: immagine orizzontale sopra,
     testo sotto. Sovrascrive il default `37.2% 1fr` (img sx + testo dx). */
  .service-tile {
    aspect-ratio: auto;
    grid-template-columns: 1fr;
  }
  .service-tile__media { aspect-ratio: 16/10; }
  /* La foto della macro-partner è widescreen (1273/500 = 2.55) e su mobile
     diventa troppo schiacciata. Aspect 4/3 le dà più altura. */
  .macro-partner__media img { aspect-ratio: 4 / 3; }
  /* Su MOBILE i 3 box "plus" vanno UNO SOTTO L'ALTRO: in linea a questa larghezza
     sarebbero 3 colonne troppo strette col testo spezzato parola-per-parola.
     (Le 3-in-linea restano da 721px in su, dove c'è spazio — vedi @1270.) */
  .macro-partner__overlay { grid-template-columns: 1fr; }
  /* Riduce il padding interno del body della tile su mobile per contenere
     l'altezza complessiva della card e togliere gli ampi margini laterali. */
  .service-tile__body { padding: 16px 20px; }
  .service-tile__body::before { top: 16px; left: 20px; }
}