/* =========================================================
   Una soluzione al giorno — stili della pagina dedicata
   Si carica DOPO fulcrum.css e ne usa token e componenti (kicker, btn,
   section, stato, contact-links): qui solo cio' che e' proprio di questa
   pagina. Prefisso usag- (Una Soluzione Al Giorno).
   ========================================================= */

:root{
  /* L'ambra del logo del progetto, campionata dal PNG ufficiale. Solo come
     accento: su navy e slate regge anche come testo (oltre 6:1), sul fondo
     chiaro no (1,9:1), e li' resta grafica. */
  --usag-amber:#F4A827;
}

/* La hero e' chiara: la barra di navigazione resta sempre piena, altrimenti
   prima dello scroll le voci (stone) sparirebbero sull'off-white. */
.pagina-usag .nav{background:rgba(13,31,45,.94);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-bottom-color:var(--hairline)}

/* testo solo per gli screen reader */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* due colonne: titolo a sinistra, testo a destra (Il progetto, Video, Invito) */
.usag-coppia{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,6vw,88px);align-items:start}
.usag-coppia--fondo{align-items:end}
.usag-coppia .prose{max-width:58ch}
.usag-coppia .prose p:first-child{margin-top:0}
.usag-coppia .lead{margin-top:0}
@media(max-width:860px){.usag-coppia{grid-template-columns:1fr}}

/* ---------- 01 · hero ---------- */
.usag-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(40px,6vw,96px);align-items:center}
.usag-hero .kicker{margin-bottom:var(--s-8)}
.usag-logo{line-height:0}
.usag-logo img{width:clamp(200px,20vw,272px);height:auto}
.usag-headline{
  font-family:var(--ff-serif);font-weight:400;
  font-size:clamp(1.85rem,1.25rem + 2.5vw,2.9rem);line-height:1.1;letter-spacing:-.012em;
  color:var(--navy);margin-top:clamp(28px,4vw,44px);max-width:18ch;
}
.usag-hero .lead{color:var(--dark-text);font-weight:400;margin-top:var(--s-6);max-width:46ch}
.usag-hero .hero-cta{margin-top:var(--s-8)}
.usag-fig{width:100%;max-width:440px;justify-self:end}
@media(max-width:860px){
  .usag-hero-grid{grid-template-columns:1fr}
  .usag-fig{justify-self:start;max-width:360px}
}

/* figura: dal problema alla soluzione */
.usag-flusso{width:100%;height:auto;overflow:visible}
.usag-flusso .f-label{font-family:var(--ff-mono);font-size:13px;letter-spacing:.14em;fill:var(--muted-text)}
.usag-flusso .f-label--scuro{fill:var(--sand)}
.usag-flusso .f-flusso{stroke:var(--teal);stroke-width:2;stroke-dasharray:5 7;stroke-linecap:round}
.usag-flusso .f-barra{transform-box:fill-box;transform-origin:50% 100%}
/* Le animazioni partono quando la figura entra in vista (.visible, da
   fulcrum.js): su mobile la figura sta sotto la piega. */
.usag-fig.visible .f-flusso{animation:usag-flusso 1.6s linear infinite}
.usag-fig.visible .f-barra{animation:usag-barra .9s var(--ease) both;animation-delay:calc(300ms + var(--i) * 80ms)}
.usag-fig.visible .f-oggi{animation:usag-oggi 2.8s ease-in-out 1.2s infinite}
@keyframes usag-flusso{to{stroke-dashoffset:-24}}
@keyframes usag-barra{from{transform:scaleY(.12)}}
@keyframes usag-oggi{50%{opacity:.4}}

/* ---------- 02 · il progetto ---------- */
.usag-punto{
  margin-top:clamp(48px,7vw,88px);padding-left:clamp(20px,3vw,32px);
  border-left:2px solid var(--usag-amber);
  font-family:var(--ff-serif);font-style:italic;font-size:clamp(1.35rem,1.05rem + 1.3vw,2rem);
  line-height:1.3;color:var(--sand);max-width:34ch;
}

/* ---------- 03 · i contenuti editoriali ----------
   Schede separate da filetti, non card con ombra: e' la griglia a fare da
   bordo (lo sfondo hairline trasparisce dal gap di 1px). */
.usag-schede{
  margin-top:clamp(40px,6vw,72px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;background:var(--hairline);border:1px solid var(--hairline);border-radius:var(--r-lg);overflow:hidden;
}
.usag-card{background:var(--slate);padding:clamp(24px,3.4vw,40px);display:flex;flex-direction:column}
.usag-card-k{display:flex;align-items:center;gap:var(--s-3);font-family:var(--ff-mono);font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}
.usag-card-n{color:var(--usag-amber)}
.usag-card h3{font-family:var(--ff-serif);font-weight:400;font-size:clamp(1.4rem,1.1rem + 1vw,1.75rem);line-height:1.2;margin-top:var(--s-4)}
.usag-card-testo{color:var(--stone);max-width:46ch;margin-top:var(--s-3)}
.usag-card-piede{margin-top:auto;padding-top:var(--s-8)}
.usag-card-piede .stato{margin-top:0}
@media(max-width:700px){.usag-schede{grid-template-columns:1fr}}

/* ---------- 04 · gli ambiti applicativi ---------- */
.usag-simboli{position:absolute;width:0;height:0;overflow:hidden}
.usag-ambiti{
  list-style:none;margin-top:clamp(40px,6vw,72px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--hairline);border-left:1px solid var(--hairline);
}
.usag-ambito{padding:clamp(24px,3vw,36px);border-right:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.usag-ambito-icona{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-md);background:var(--teal-soft);color:var(--sand);margin-bottom:var(--s-6)}
.usag-ambito-icona svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.usag-ambito h3{margin-bottom:var(--s-2)}
.usag-ambito p{color:var(--stone);max-width:36ch}
@media(max-width:860px){.usag-ambiti{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){
  .usag-ambiti{grid-template-columns:1fr}
  .usag-ambito{display:grid;grid-template-columns:auto 1fr;column-gap:var(--s-4);align-items:start}
  .usag-ambito-icona{margin-bottom:0}
}

/* ---------- 05 · video in evidenza ---------- */
.usag-video-grid{margin-top:clamp(40px,6vw,64px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
.usag-video{position:relative;display:flex;flex-direction:column}
/* una dimostrazione (16:9) occupa due colonne accanto a uno short (9:16) */
.usag-video--dimostrazione{grid-column:span 2}
.usag-video-thumb{position:relative;aspect-ratio:9/16;border-radius:var(--r-lg);overflow:hidden;background:var(--navy);border:1px solid var(--hairline-ink)}
.usag-video--dimostrazione .usag-video-thumb{aspect-ratio:16/9}
.usag-video-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.usag-video-play{position:absolute;top:14px;left:14px;width:44px;height:44px;border-radius:50%;background:rgba(13,31,45,.86);display:grid;place-items:center;transition:background .25s var(--ease)}
.usag-video-play svg{width:18px;height:18px;fill:var(--cream);margin-left:2px}
.usag-video-meta{display:flex;align-items:center;gap:var(--s-3);margin-top:var(--s-4);font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-text)}
.usag-video-tipo{display:inline-flex;align-items:center;gap:6px;color:var(--dark-text)}
.usag-video-tipo::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--usag-amber)}
.usag-video--dimostrazione .usag-video-tipo::before{background:var(--teal)}
.usag-video h3{margin-top:var(--s-2);font-size:1.05rem;line-height:1.4;color:var(--dark-text)}
.usag-video h3 a{color:inherit;text-decoration:none;transition:color .2s}
/* tutta la scheda e' cliccabile: il link del titolo si allarga sopra la miniatura */
.usag-video h3 a::after{content:"";position:absolute;inset:0}
.usag-video:hover h3 a{color:var(--teal)}
.usag-video:hover .usag-video-thumb img{transform:scale(1.03)}
.usag-video:hover .usag-video-play{background:var(--teal)}

.usag-canali{margin-top:clamp(48px,7vw,80px);padding-top:var(--s-8);border-top:1px solid var(--hairline-ink)}
.usag-canali h3{font-family:var(--ff-mono);font-size:var(--fs-label);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.usag-canali .contact-links{margin-top:var(--s-4)}

/* Su mobile i video scorrono in orizzontale, a tutta larghezza: tre
   miniature verticali una sotto l'altra sarebbero tre schermate di scroll. */
@media(max-width:760px){
  .usag-video-grid{
    grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(210px,66%);
    overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    margin-inline:calc(-1 * clamp(20px,5vw,56px));padding-inline:clamp(20px,5vw,56px);
    scroll-padding-inline:clamp(20px,5vw,56px);padding-bottom:var(--s-4);scrollbar-width:thin;
  }
  .usag-video{scroll-snap-align:start}
  .usag-video--dimostrazione{grid-column:auto}
}

/* ---------- 07 · Fulcrum ---------- */
.usag-fulcrum{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,88px);align-items:center}
.usag-fulcrum-logo{
  display:inline-flex;align-items:center;gap:.32em;
  font-family:var(--ff-serif);font-weight:700;font-size:clamp(2rem,1.4rem + 2.6vw,3.4rem);
  letter-spacing:.07em;text-transform:uppercase;color:var(--cream);text-decoration:none;
}
.usag-fulcrum-logo svg{width:.62em;height:.7em;overflow:visible}
.usag-fulcrum .lead{margin-top:var(--s-4)}
@media(max-width:860px){.usag-fulcrum{grid-template-columns:1fr}}

/* ---------- movimento ridotto ---------- */
@media(prefers-reduced-motion:reduce){
  .usag-flusso *{animation:none!important}
  .usag-video-thumb img{transition:none}
}