/* I dettagli comuni a tutte le pagine: le righe geometriche, che danno un
   appoggio ai titoli e al testo che altrimenti resterebbe sospeso nel
   bianco, e il cartellino con lo stato di un cantiere. Caricato da tutte le
   pagine dopo il loro foglio (come testata.css), così vale anche per le
   quattro pagine con una copia propria del guscio.
   Lo stesso disegno, con le sue varianti locali, sta nella sezione «Le
   lavorazioni» di Cantieri (Lavori.dc.html). */

/* 1. una lineetta sotto ogni titolo di sezione */
.pag .h2::after, .home .h2::after {
  content: ""; display: block; width: 40px; height: 2px; margin-top: clamp(12px, 1.2vw, 16px);
  background: var(--mare);
}

/* 2. la fascia di chiusura: lineetta sotto il titolo e, a schermo largo, una
   linea verticale fra il testo e i pulsanti, che altrimenti restano sospesi */
.cta h2::after {
  content: ""; display: block; width: 40px; height: 2px; margin-top: 14px; background: var(--azzurro);
}
@media (min-width: 1000px) {
  .cta .azioni { align-self: stretch; align-items: center; padding-left: clamp(28px, 3vw, 48px);
                 border-left: 1px solid rgba(143, 162, 171, 0.35); }
}

/* 3. un paragrafo accanto al suo titolo: linea verticale sottile a sinistra,
   con un tratto in cima */
.linea-lato {
  padding-left: clamp(18px, 2vw, 28px);
  background: linear-gradient(var(--mare), var(--mare)) left top / 2px 28px no-repeat,
              linear-gradient(var(--ardesia), var(--ardesia)) left top / 1px 100% no-repeat;
}

/* 4. lo stato di un cantiere: un pallino e una parola. Verde che pulsa per
   «in corso», arancione che pulsa per «in collaudo», grigio per i lavori
   finiti.
   Il colore accompagna la parola, non la sostituisce. */
.stato { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 7px 13px;
         border-radius: 100px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em;
         text-transform: uppercase; white-space: nowrap; }
.stato::before { content: ""; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; }
.stato-corso { background: #E2F2E7; color: #1D6B3A; }
.stato-corso::before { background: #22A355; animation: vivo 1.8s ease-out infinite; }
.stato-collaudo { background: #FBEBD8; color: #8A4B08; }
.stato-collaudo::before { background: #E8860C; animation: vivo-arancio 1.8s ease-out infinite; }
.stato-finito { background: #EEF0F1; color: #3E474C; }
.stato-finito::before { background: #8FA2AB; }
@keyframes vivo {
  0%   { box-shadow: 0 0 0 0 rgba(34, 163, 85, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(34, 163, 85, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 163, 85, 0); }
}
@keyframes vivo-arancio {
  0%   { box-shadow: 0 0 0 0 rgba(232, 134, 12, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(232, 134, 12, 0); }
  100% { box-shadow: 0 0 0 0 rgba(232, 134, 12, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .stato-corso::before, .stato-collaudo::before, .punto-corso, .punto-collaudo { animation: none; }
}

/* 5. le foto dichiarano larghezza e altezza (le scrive il generatore), così
   il browser tiene il posto mentre si caricano. «height: auto» fa valere le
   proporzioni invece dell'altezza scritta; :where non pesa, e ogni regola di
   pagina che fissa un'altezza (galleria, copertine) resta più forte. */
:where(.pag, .home) img { max-width: 100%; height: auto; }

/* 6. il percorso («Home / Azienda») separato dal titolo da un filetto sottile.
   Dove l'occhiello ripeteva l'ultima voce del percorso (Azienda, Competenze,
   Contatti, Qualifiche) l'occhiello è stato tolto: il filetto tiene lo stacco.
   Il colore va bene sia sul fondo chiaro sia su quello scuro di Richiesta. */
.pag .briciole { padding-bottom: clamp(8px, 1vw, 12px); margin-bottom: clamp(16px, 1.8vw, 24px);
                 border-bottom: 1px solid rgba(143, 162, 171, 0.35); }

/* --- stampa ---------------------------------------------------------------
   Chi stampa una scheda vuole i dati: testo scuro su bianco, senza testata,
   video, pulsanti e fascia di chiusura. */
@media print {
  .hdr, .sr, .cta, .sez-video, video, .burger, .ticker-stop, .gal-cmd, .freccia { display: none !important; }
  :where(.pag, .home) * { color: #000 !important; background: transparent !important;
                          box-shadow: none !important; animation: none !important; }
  :where(.pag, .home) a { text-decoration: underline; }
  img { break-inside: avoid; }
}