/* ==========================================================================
   OASI — Home (front-page) — CSS portato fedelmente dal prototipo
   (delivery/prototipo/index.html, ref Figma 437:2181).
   Caricato SOLO sulla front page (inc/enqueue.php).
   Navbar, footer, .eyebrow, .deco/.hero-deco/.storie-deco e i token vivono
   nei fogli globali (tokens.css / base.css / components.css): qui NON si
   ripetono. Restano le sezioni specifiche della home.
   ========================================================================== */

/* ============ HERO — gallery rides on the line ============ */
.hero{background:var(--teal);color:#fff;min-height:100vh;position:relative;overflow:hidden;padding:180px 0 120px}
.hero .hero-wrap{max-width:1600px;margin:0 auto;padding:0 var(--pad);position:relative;z-index:3}
.hero-eyebrow{margin-bottom:36px}
.hero h1{color:#fff;max-width:14ch}
.hero h1 em{font-style:normal;color:var(--orange);position:relative}

.hero-meta{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-top:160px;flex-wrap:wrap}
.hero-meta p{color:rgba(255,255,255,.82);font-size:1.1rem;max-width:480px;line-height:1.55}
.hero-cta{display:inline-flex;align-items:center;gap:14px;background:var(--orange);color:#fff;font-weight:700;font-size:.86rem;letter-spacing:.1em;text-transform:uppercase;padding:20px 32px;border-radius:999px;transition:background .2s;flex-shrink:0}
.hero-cta:hover{background:var(--orange-600)}
.hero-cta .d{width:9px;height:9px;border-radius:50%;background:#fff}

/* Hero carousel — bigger tiles riding along a big horizontal wave.
   Tiles are in a horizontally-scrolling track; the line is behind them
   and extends off-screen on both sides. */
.hero-line-stage{position:relative;margin-top:80px;height:560px;left:50%;transform:translateX(-50%);width:100vw;padding:0 0}
.hero-line-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.hero-line-svg .thread{fill:none;stroke:rgba(255,255,255,.9);stroke-width:21;stroke-linecap:round}
.hero-carousel{position:absolute;inset:0;overflow:hidden}
.hero-track{position:absolute;inset:0;display:flex;align-items:center;gap:40px;padding:0 clamp(40px,8vw,140px);will-change:transform}
.hero-tile{position:relative;flex-shrink:0;background:#d8c6a8;overflow:hidden;box-shadow:0 40px 80px -20px rgba(0,0,0,.55);transition:transform .5s cubic-bezier(.2,.8,.2,1);cursor:pointer}
.hero-track.dragging,.hero-track.dragging .hero-tile{cursor:grabbing}
.hero-tile img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.hero-tile:hover img{transform:scale(1.06)}
.hero-tile .lbl{position:absolute;left:20px;bottom:20px;right:20px;color:#fff;font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;display:flex;align-items:center;gap:10px}
.hero-tile .lbl::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--orange);flex-shrink:0}
.hero-tile .lbl::after{content:"";position:absolute;left:-20px;right:-20px;bottom:-20px;top:-30px;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.75));z-index:-1}
.hero-tile .meta{position:absolute;left:20px;top:20px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.85);background:rgba(0,0,0,.4);backdrop-filter:blur(10px);padding:6px 12px;border-radius:999px}
/* Bigger, irregular sizing so tiles feel cinematic */
.hero-tile.t1{width:360px;height:460px;margin-top:40px}
.hero-tile.t2{width:300px;height:400px;margin-top:-60px}
.hero-tile.t3{width:400px;height:520px;margin-top:30px}
.hero-tile.t4{width:320px;height:420px;margin-top:-40px}
.hero-tile.t5{width:360px;height:460px;margin-top:60px}

/* Carousel controls */
.hero-ctrls{position:absolute;bottom:-24px;left:var(--pad);display:flex;gap:12px;z-index:5}
.hero-ctrls button{width:62px;height:62px;border-radius:50%;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.24);color:#fff;display:flex;align-items:center;justify-content:center;transition:all .2s;backdrop-filter:blur(12px)}
.hero-ctrls button:hover{background:var(--orange);border-color:var(--orange)}
.hero-ctrls button:disabled{opacity:.3;cursor:not-allowed}
.hero-ctrls svg{width:18px;height:18px}
.hero-progress{position:absolute;bottom:-8px;right:var(--pad);z-index:5;display:flex;gap:6px;align-items:center;color:rgba(255,255,255,.6);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase}
.hero-progress .bar{width:120px;height:2px;background:rgba(255,255,255,.15);position:relative;overflow:hidden}
.hero-progress .bar::after{content:"";position:absolute;left:0;top:0;height:100%;width:var(--p,10%);background:var(--orange);transition:width .5s}
@media(max-width:900px){
  .hero-line-stage{height:480px;margin-top:60px}
  .hero-tile.t1,.hero-tile.t2,.hero-tile.t3,.hero-tile.t4,.hero-tile.t5{width:240px;height:320px;margin-top:0}
}

.hero-ticker{margin-top:80px;border-top:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18);padding:26px 0;display:flex;gap:80px;overflow:hidden;white-space:nowrap;font-family:var(--font-display);font-weight:700;font-size:1.3rem;letter-spacing:-.01em;color:rgba(255,255,255,.7)}
.hero-ticker .t-strip{display:inline-flex;gap:80px;animation:tick 40s linear infinite;flex-shrink:0}
.hero-ticker .t-strip span,.hero-ticker .t-strip a{display:inline-flex;align-items:center;gap:80px}
.hero-ticker .t-strip a{color:inherit;text-decoration:none;transition:color .2s ease}
.hero-ticker .t-strip a:hover,.hero-ticker .t-strip a:focus-visible{color:#fff;text-decoration:underline;text-underline-offset:6px}
.hero-ticker .t-strip span::after,.hero-ticker .t-strip a::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--orange);flex-shrink:0}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.hero-scroll-cue{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.55);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:14px;z-index:5}
.hero-scroll-cue::after{content:"";width:1px;height:42px;background:linear-gradient(180deg,rgba(255,255,255,.5),transparent);animation:drop 1.6s ease-in-out infinite}
@keyframes drop{0%,100%{transform:scaleY(.4);transform-origin:top}50%{transform:scaleY(1)}}

/* position: relative on sections so lines can anchor */
.areas,.manifesto,.impact{position:relative}

/* ============ PHOTO BREAK between manifesto and impact ============ */
.photo-break{position:relative;height:70vh;min-height:480px;max-height:760px;overflow:hidden;background:var(--teal)}
.photo-break img{position:absolute;inset:0;width:100%;height:120%;object-fit:cover;object-position:center 30%;will-change:transform,opacity;display:block;opacity:0}
@media(prefers-reduced-motion:reduce){.photo-break img{opacity:1}}
.photo-break::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,61,82,.25) 0%,transparent 28%,transparent 72%,rgba(0,61,82,.35) 100%);pointer-events:none}
.photo-break-caption{position:absolute;left:80px;bottom:60px;display:inline-flex;align-items:center;gap:12px;color:#fff;font-size:.74rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;text-shadow:0 2px 8px rgba(0,0,0,.45);z-index:2}
.photo-break-caption .d{width:8px;height:8px;border-radius:50%;background:var(--orange);flex-shrink:0}
@media(max-width:900px){.photo-break{height:50vh;min-height:340px}.photo-break-caption{left:24px;bottom:28px}}

/* STORIES CAROUSEL → assets/css/components.css (componente condiviso: home + 5x1000). */

/* ============ AREAS (airy, list) ============ */
.areas{padding:160px 0;background:var(--paper-2)}
.areas .wrap{max-width:1600px;margin:0 auto;padding:0 var(--pad)}
.areas-head{max-width:880px;margin-bottom:80px}
.areas-head h2{margin-top:20px}
.areas-head h2 em{font-style:normal;color:var(--orange)}
.areas-list{border-top:1px solid rgba(11,37,48,.16)}
.area-row{display:grid;grid-template-columns:40px 1fr 1.4fr 70px;gap:48px;align-items:center;padding:44px 0;border-bottom:1px solid rgba(11,37,48,.16);transition:all .3s;cursor:pointer}
.area-row:hover{padding-left:28px;background:linear-gradient(90deg,rgba(255,84,22,.04),transparent 40%)}
.area-row .dot{width:14px;height:14px;border-radius:50%;background:rgba(11,37,48,.22);transition:background .3s,transform .3s}
.area-row:hover .dot{background:var(--orange);transform:scale(1.35)}
.area-row h3{font-size:clamp(1.6rem,2.6vw,2.4rem);line-height:1.05;color:var(--teal);font-weight:700;letter-spacing:-.02em;transition:color .2s}
.area-row:hover h3{color:var(--orange)}
.area-row p{font-size:1rem;max-width:540px;line-height:1.6}
.area-row .go{width:52px;height:52px;border-radius:50%;border:1.5px solid rgba(11,37,48,.18);display:flex;align-items:center;justify-content:center;transition:all .3s}
.area-row:hover .go{background:var(--teal);border-color:var(--teal);color:#fff;transform:rotate(-45deg)}
.area-row .go svg{width:16px;height:16px}
@media(max-width:900px){.area-row{grid-template-columns:1fr;gap:12px}.area-row .dot,.area-row .go{display:none}}

/* ============ MANIFESTO ============ */
.manifesto{padding:200px 0;background:var(--teal);color:#fff;position:relative;overflow:hidden}
.manifesto .wrap{max-width:1400px;margin:0 auto;padding:0 var(--pad);position:relative;z-index:2}
.manifesto .big-text{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,4.2vw,4rem);line-height:1.1;color:#fff;max-width:22ch;letter-spacing:-.025em}
.manifesto .big-text em{font-style:normal;color:var(--orange)}
.manifesto .sign{margin-top:80px;display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.manifesto .sign .who{font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.manifesto .sign .stats{display:flex;gap:60px}
.manifesto .sign .stats div span{display:block;font-family:var(--font-display);font-weight:800;font-size:3.4rem;letter-spacing:-.03em;line-height:1;color:#fff}
.manifesto .sign .stats div small{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:8px;display:block}

/* ============ IMPACT STRIP ============ */
.impact{padding:140px 0;background:var(--paper)}
.impact .wrap{max-width:1600px;margin:0 auto;padding:0 var(--pad)}
.impact-head{max-width:700px;margin-bottom:60px}
.impact-head h2{margin-top:20px}
.impact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1.5px solid var(--teal);border-bottom:1.5px solid var(--teal)}
.impact-cell{padding:48px 32px;border-right:1px solid rgba(11,37,48,.12)}
.impact-cell:last-child{border-right:0}
.impact-cell .n{font-family:var(--font-display);font-weight:800;font-size:4rem;color:var(--teal);letter-spacing:-.04em;line-height:.9;display:flex;align-items:baseline;gap:4px}
.impact-cell .n .pct{color:var(--orange);font-size:1.6rem}
.impact-cell .n::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--orange);display:inline-block;margin-left:8px;align-self:center}
.impact-cell h4{margin-top:24px;color:var(--teal);font-size:1rem;font-weight:700}
.impact-cell p{margin-top:10px;font-size:.9rem}
@media(max-width:900px){.impact-grid{grid-template-columns:1fr 1fr}.impact-cell:nth-child(2n){border-right:0}.impact-cell{border-bottom:1px solid rgba(11,37,48,.12)}}

/* DONATE prefooter: stili spostati in components.css (modulo condiviso,
   template-parts/prefooter-donate.php) perché usato anche fuori dalla home. */

/* ============ NEWSLETTER (fascia solo-UI, ref Figma 549:2581) ============ */
.newsletter{padding:110px 0;background:var(--teal);color:#fff}
.newsletter .wrap{max-width:1600px;margin:0 auto;padding:0 var(--pad)}
.newsletter-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.newsletter .nl-intro .eyebrow{margin-bottom:24px}
.newsletter h2{color:#fff;font-size:clamp(2rem,3.6vw,3.1rem);line-height:1.02;letter-spacing:-.025em;font-weight:800}
.newsletter .nl-text{color:rgba(255,255,255,.78);font-size:1.05rem;line-height:1.6;max-width:460px;margin-top:22px}
.nl-form{width:100%}
.nl-field{border-bottom:1.5px solid rgba(255,255,255,.45);transition:border-color .2s}
.nl-field:focus-within{border-color:var(--orange)}
.nl-field input{width:100%;background:transparent;border:0;color:#fff;font-family:var(--font-display);font-weight:300;font-size:clamp(1.6rem,2.4vw,2.2rem);letter-spacing:-.01em;padding:6px 0 16px;outline:none}
.nl-field input::placeholder{color:rgba(255,255,255,.4)}
.nl-actions{display:flex;justify-content:flex-end;margin-top:24px}
.nl-btn{display:inline-flex;align-items:center;gap:14px;background:var(--orange);color:#fff;font-family:var(--font-display);font-weight:700;font-size:.86rem;letter-spacing:.1em;text-transform:uppercase;padding:20px 32px;border:0;border-radius:999px;cursor:pointer;transition:background .2s}
.nl-btn:hover{background:var(--orange-600)}
.nl-btn .d{width:9px;height:9px;border-radius:50%;background:#fff;flex-shrink:0}
.nl-privacy{margin-top:18px;font-size:.82rem;color:rgba(255,255,255,.55);text-align:right}
@media(max-width:900px){
  .newsletter-grid{grid-template-columns:1fr;gap:36px}
  .nl-actions{justify-content:flex-start}
  .nl-privacy{text-align:left}
}

/* ============ RESPONSIVE — ritmo verticale ridotto + touch slider ============
   Le sezioni home usano padding fissi grandi (160/200px): li riduciamo su
   tablet/telefono. Gli slider (hero + storie) restano trascinabili al touch
   ma lasciano passare lo scroll verticale (touch-action). ========== */
.hero-track{touch-action:pan-y}
@media(max-width:768px){
  .hero{padding:128px 0 72px;min-height:auto}
  .hero-eyebrow{margin-bottom:24px}
  .hero-line-stage{margin-top:48px}
  .hero-meta{margin-top:64px}
  .hero-ticker{margin-top:56px;gap:48px;font-size:1.05rem}
  .hero-ticker .t-strip,.hero-ticker .t-strip span,.hero-ticker .t-strip a{gap:48px}
  .hero-scroll-cue{display:none}
  .areas{padding:88px 0}
  .areas-head{margin-bottom:44px}
  .manifesto{padding:104px 0}
  .manifesto .sign{margin-top:48px}
  .impact{padding:80px 0}
  .impact-head{margin-bottom:40px}
  .newsletter{padding:80px 0}
}
@media(max-width:600px){
  .hero-meta{gap:24px}
  .manifesto .sign .stats{gap:26px}
  .manifesto .sign .stats div span{font-size:2.4rem}
}
@media(max-width:480px){
  .hero{padding:116px 0 56px}
  .areas{padding:72px 0}
  .manifesto{padding:88px 0}
  .impact{padding:64px 0}
  .newsletter{padding:64px 0}
  .manifesto .sign .stats{gap:20px}
  .manifesto .sign .stats div span{font-size:2rem}
}