/* ==========================================================================
   OASI — Template "Hub di sezione" (page-hub.php)
   Refs Figma: 474:1493 (Cosa facciamo) e 502:1423 (Sostienici).
   Hero teal centrato + foto full-bleed + griglia sfalsata di card outline su
   teal. DS: container 1360, radius 0, un solo accento arancio per sezione.
   ========================================================================== */

.hub{background:var(--teal-900);color:#fff;position:relative;overflow:hidden}

/* ============ LINEA "SERPENTINA" full-page ============ */
/* SVG esatto Figma vector02 (line-ribbon.php variant 'hub'). Overlay a tutta
   pagina: passa SOPRA i fondali teal e la foto (z:1), ma DIETRO le card della
   griglia (z:2 + backdrop-blur → "Blur card"). Stesso path per i due hub,
   posizione diversa: --left = Cosa facciamo (naturale, pallino alto a sx),
   --right = Sostienici (specchiata, pallino alto a dx). preserveAspectRatio
   'meet' → pallini circolari. Offset verticali dai frame Figma
   (474:1493 3030h, vector02 y=299 h=2078 · 502:1423 2466h, y=276). */
.hub-deco{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:hidden}
.hub-deco svg{position:absolute;left:0;width:100%}
/* Shift laterale (Figma: vector02 a x=-179 su Cosa / mirror su Sostienici) →
   la parte alta della linea resta a LATO, mai sul testo hero centrato. */
.hub-deco--left  svg{top:9.5%;height:86%;transform:translateX(-11%)}
/* Sostienici: titolo hero a 2 righe (largo) → si parte più in basso, così il
   pallino alto resta sotto il titolo nella fascia destra libera. */
.hub-deco--right svg{top:23%;height:80%;transform:translateX(9%) scaleX(-1)}

/* ============ HERO ============ */
.hub-hero{position:relative;background:var(--teal);padding:clamp(200px,22vw,300px) 0 clamp(90px,11vw,150px);text-align:center;overflow:hidden}
.hub-hero .wrap{max-width:var(--container-max);margin:0 auto;padding:0 var(--container-pad);position:relative;z-index:2}
.hub-eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-display);font-weight:600;font-size:.76rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.hub-eyebrow .d{width:8px;height:8px;border-radius:50%;background:var(--orange);flex-shrink:0}
.hub-hero h1{font-family:var(--font-display);font-weight:800;font-size:clamp(3rem,8.5vw,6.5rem);line-height:.98;letter-spacing:-.035em;color:#fff;margin:26px 0 0}
.hub-hero h1 em{font-style:normal;color:var(--orange)}
.hub-lead{font-family:var(--font-body);font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.65;color:rgba(255,255,255,.78);max-width:560px;margin:28px auto 0}

/* ============ FOTO FULL-BLEED ============ */
/* z-auto: la serpentina (z:1) passa SOPRA la foto, come nel Figma. */
.hub-photo{min-height:clamp(280px,34vw,480px);background-size:cover;background-position:center}

/* ============ INTRO opzionale ============ */
.hub-intro{position:relative;z-index:2;padding:clamp(80px,9vw,120px) 0 0}
.hub-intro .wrap{max-width:var(--container-max);margin:0 auto;padding:0 var(--container-pad);text-align:center}
.hub-intro h2{font-family:var(--font-display);font-weight:800;font-size:clamp(1.9rem,3.4vw,2.8rem);line-height:1.08;letter-spacing:-.02em;color:#fff;margin-bottom:20px}
.hub-intro h2 em{font-style:normal;color:var(--orange)}
.hub-intro p{font-family:var(--font-body);font-size:1.08rem;line-height:1.7;color:rgba(255,255,255,.78);max-width:620px;margin:0 auto}

/* ============ GRIGLIA CARD ============ */
/* z:2 → le card stanno SOPRA la serpentina (che resta visibile nei gutter). */
.hub-grid{position:relative;z-index:2;padding:clamp(80px,10vw,140px) 0 clamp(100px,12vw,170px)}
.hub-grid .wrap{max-width:var(--container-max);margin:0 auto;padding:0 var(--container-pad)}
.hub-grid .hub-eyebrow{margin-bottom:44px}
.hub-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
/* colonna centrale sfalsata verso il basso (effetto Figma) */
.hub-cards > .card-hub:nth-child(3n+2){margin-top:clamp(48px,7vw,96px)}

/* "Blur card": vetro smerigliato → la serpentina (z:1) resta leggibile ma
   chiaramente DIETRO le card (Figma "Blur card"). */
.card-hub{position:relative;display:flex;flex-direction:column;min-height:clamp(200px,20vw,250px);padding:36px 34px;background:rgba(10,45,58,.42);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);border:1px solid rgba(255,255,255,.24);color:#fff;transition:border-color .3s,background .3s}
.card-hub:hover{border-color:rgba(255,255,255,.55);background:rgba(10,45,58,.55)}
.card-hub__media{display:block;margin:-36px -34px 26px;aspect-ratio:16/9;overflow:hidden}
.card-hub__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.card-hub:hover .card-hub__media img{transform:scale(1.05)}
.card-hub h3{font-family:var(--font-display);font-weight:700;font-size:clamp(1.35rem,1.9vw,1.7rem);line-height:1.12;letter-spacing:-.015em;color:#fff}
.card-hub p{font-family:var(--font-body);font-size:.96rem;line-height:1.6;color:rgba(255,255,255,.72);margin-top:14px;max-width:34ch}
.card-hub .go{margin-top:auto;padding-top:28px;align-self:flex-end;display:inline-flex;align-items:center;gap:10px}
.card-hub .go .d{width:8px;height:8px;border-radius:50%;background:var(--orange);flex-shrink:0}
.card-hub .go-label{font-family:var(--font-display);font-weight:700;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;transition:color .2s}
.card-hub:hover .go-label{color:var(--orange)}

/* ============ RESPONSIVE ============ */
@media(max-width:900px){
  .hub-cards{grid-template-columns:repeat(2,1fr)}
  .hub-cards > .card-hub:nth-child(3n+2){margin-top:0}
  .hub-cards > .card-hub:nth-child(2n){margin-top:clamp(40px,6vw,72px)}
}
@media(max-width:560px){
  .hub-cards{grid-template-columns:1fr}
  .hub-cards > .card-hub:nth-child(n){margin-top:0}
}