/* ==========================================================================
   OASI — Template "Pagina azione / Sostienici" (page-azione.php)
   Ref Figma 474:1806 (5x1000). Riusa da content.css: .content/.rte,
   .photo-break, .eyebrow, .sec-head, .btn, e da components.css il .cf-block.
   Sezioni: intro + CF + passi (paper) · promemoria (teal, placeholder) ·
   storie editoriali (paper) · FAQ accordion (paper) · banda dona (teal).
   Anche caricato su page-dona.php per la FAQ condivisa.
   DS: container 1400, radius 0, un accento arancio per sezione.
   ========================================================================== */

/* Bottone opzionale nell'hero interno (hero-inner.php cta) */
.inner-hero .hero-cta{margin-top:40px}

/* ============ HERO "cover" 5x1000 / Sostienici (Figma 474:1806/1807) ============
   Foto + gradiente teal (scuro a sx e in basso per la leggibilità del testo):
   breadcrumb in alto, H1 grande in alto-sx, in basso lead (sx) + CTA arancio (dx).
   Applicato da page-azione.php (layout=cover) → non tocca le hero split L2/L3. */
.inner-hero--cover{padding:clamp(116px,15vh,148px) 0 clamp(52px,7vh,72px);min-height:min(94vh,940px);display:flex;align-items:stretch}
.inner-hero--cover .wrap{display:flex;flex-direction:column;flex:1;width:100%}
.inner-hero--cover.has-photo::after{background:linear-gradient(90deg,rgba(0,61,82,.82) 0%,rgba(0,61,82,.4) 46%,rgba(0,61,82,.12) 100%),linear-gradient(180deg,rgba(0,61,82,0) 42%,rgba(0,61,82,.62) 100%)}
.inner-hero--cover .crumb{margin-bottom:clamp(36px,6vh,72px)}
.inner-hero--cover .crumb::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange);flex-shrink:0}
.inner-hero--cover h1{margin:0;max-width:15ch;font-size:clamp(2.6rem,6.6vw,5.4rem);line-height:1;letter-spacing:-.03em}
.inner-hero--cover .hero-foot{margin-top:auto;padding-top:clamp(40px,7vh,80px);display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(28px,5vw,72px);flex-wrap:wrap}
.inner-hero--cover .hero-side{min-width:0}
.inner-hero--cover .lead{margin:0;max-width:44ch;font-size:clamp(1rem,1.25vw,1.15rem);line-height:1.5;color:rgba(255,255,255,.82)}
.inner-hero--cover .hero-cta{margin-top:0;flex-shrink:0}
@media(max-width:900px){
  .inner-hero--cover{padding:clamp(120px,18vh,150px) 0 56px;min-height:auto}
  .inner-hero--cover h1{max-width:none}
  .inner-hero--cover .hero-foot{align-items:flex-start;gap:28px}
  .inner-hero--cover .lead{max-width:none}
}

/* ============ INTRO + CF + PASSI (paper, riusa .content) ============ */
/* La sezione è il contenitore della serpentina "come fare" (.azione-deco):
   relative + overflow per contenere l'SVG dietro i passi; il contenuto
   (.wrap) sta sopra la linea (z-index). */
/* scroll-margin-top: compensa la navbar fissa quando il pulsante hero salta a
   #contenuto (stesso valore di .anchor-target in content.css). */
.azione-intro{position:relative;overflow:hidden;scroll-margin-top:110px}
.azione-intro .wrap{max-width:1400px;position:relative;z-index:1}
.intro-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,540px);gap:64px;align-items:start}
.intro-lead h2{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,3.8vw,3.2rem);line-height:1.04;letter-spacing:-.02em;color:var(--teal);margin:0}
.intro-lead h2 em{font-style:normal;color:var(--orange)}
.intro-body{padding-top:8px}

.azione-cf{margin-top:56px}

/* Secondo h2 "Come fare" — introduce i tre passi (sopra la griglia). */
.steps-head{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,3.8vw,3.2rem);line-height:1.04;letter-spacing:-.02em;color:var(--teal);margin:clamp(72px,9vw,120px) 0 0}
.steps-head em{font-style:normal;color:var(--orange)}

/* Passi numerati sfalsati in diagonale (01 in alto → 03 in basso, come Figma
   474:1806). Diagonale via margin-top (non transform): lascia il transform
   libero per il reveal-stagger di motion.js e dà spazio alla serpentina. */
/* Card "Blur" del Figma 474:1806: fondo beige translucido + backdrop-blur,
   in alto pallino arancio + titolo e testo, in basso il numero grande arancio
   (Figtree Light). Il numero (primo nel markup) va in fondo via order+margin. */
.steps-grid{margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
.step-card{min-height:clamp(300px,25vw,350px);background:rgba(216,198,168,.2);border:1px solid rgba(197,184,160,.4);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:32px;display:flex;flex-direction:column;gap:6px}
.steps-grid .step-card:nth-child(2){margin-top:clamp(64px,11vw,180px)}
.steps-grid .step-card:nth-child(3){margin-top:clamp(128px,22vw,360px)}
.step-body{display:flex;flex-direction:column;gap:6px}
.step-card h3{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:clamp(1.2rem,1.5vw,1.375rem);line-height:1.45;color:var(--teal);letter-spacing:-.01em}
.step-card h3::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--orange);flex-shrink:0}
.step-card p{font-family:var(--font-body);font-size:1rem;line-height:1.5;color:rgba(10,38,48,.6)}
.step-n{order:1;margin-top:auto;padding-top:24px;font-family:var(--font-display);font-weight:300;font-size:clamp(4.5rem,8vw,7.5rem);line-height:1;letter-spacing:-.04em;color:var(--orange)}

/* ============ BOX "ATTENZIONE" (callout reso dopo i 3 passi) ============ */
.azione-alert{position:relative;z-index:1;margin:clamp(40px,5vw,64px) 0 0;max-width:852px;padding:clamp(24px,3vw,32px) clamp(24px,3vw,36px);background:rgba(255,84,23,.06);border:1px solid rgba(255,84,23,.22);border-left:4px solid var(--orange)}
.azione-alert .alert-head{display:flex;align-items:center;gap:12px;margin:0 0 12px;font-family:var(--font-display);font-weight:800;font-size:1.05rem;letter-spacing:.04em;text-transform:uppercase;color:var(--orange)}
.azione-alert .alert-ico{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--orange);color:#fff;font-family:var(--font-display);font-weight:800;font-size:1rem;line-height:1;flex-shrink:0}
.azione-alert .rte p{font-family:var(--font-body);font-size:1rem;line-height:1.65;color:var(--ink);margin:0 0 12px}
.azione-alert .rte > :last-child{margin-bottom:0}

/* Serpentina "come fare" (line-ribbon variante azione): overlay dietro ai
   passi (z:0 < .wrap z:1). Ancorata in basso, larga quanto il container, così
   la curva e i 2 pallini arancio cadono nei gutter tra i box. mix-blend
   soft-light nell'SVG → sul paper la linea resta tenue (fedele al Figma). */
.azione-deco{position:absolute;left:50.6%;transform:translateX(-50%);bottom:clamp(-165px,-8.4vw,-72px);width:min(1440px,94vw);z-index:0;pointer-events:none}
.azione-deco svg{display:block;width:100%;height:auto}

/* ============ PROMEMORIA (teal, placeholder — nessun backend) ============ */
.promemoria{background:var(--teal);color:#fff;padding:clamp(72px,8vw,104px) 0}
.promemoria .wrap{max-width:1400px;margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,660px);gap:56px;align-items:center}
.promemoria h2{font-family:var(--font-display);font-weight:800;font-size:clamp(1.8rem,3.4vw,2.8rem);line-height:1.05;letter-spacing:-.02em;color:#fff;margin:0}
.promemoria h2 em{font-style:normal;color:var(--orange)}
.remind-form{display:flex;flex-direction:column;gap:16px}
.remind-tabs{display:inline-flex;gap:4px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:6px;align-self:flex-start}
.remind-tab{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:600;font-size:.8rem;letter-spacing:.04em;color:rgba(255,255,255,.8);background:none;border:0;border-radius:999px;padding:10px 20px;cursor:pointer;transition:background .2s,color .2s}
.remind-tab .d{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.55}
.remind-tab.is-active{background:#fff;color:var(--teal)}
.remind-tab.is-active .d{background:var(--orange);opacity:1}
.remind-row{display:flex;gap:12px;flex-wrap:wrap}
.remind-input{flex:1;min-width:220px;background:#fff;border:1.5px solid transparent;padding:0 22px;height:60px;font-family:var(--font-body);font-size:1rem;color:var(--ink)}
.remind-input::placeholder{color:var(--muted)}
/* Pannelli canale del promemoria: visibile solo quello attivo */
.remind-panel{display:none}
.remind-panel.is-active{display:block}
.remind-hint{margin-top:14px;font-family:var(--font-body);font-size:.86rem;line-height:1.5;color:rgba(255,255,255,.6);max-width:54ch}
.remind-consent{display:flex;align-items:flex-start;gap:10px;margin-top:14px;font-family:var(--font-body);font-size:.86rem;line-height:1.45;color:rgba(255,255,255,.72);cursor:pointer}
.remind-consent input{margin-top:2px;width:16px;height:16px;flex-shrink:0;accent-color:var(--orange)}
.remind-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0}
.remind-msg{margin-top:12px;min-height:1.2em;font-family:var(--font-body);font-size:.9rem;line-height:1.45;color:rgba(255,255,255,.75)}
.remind-msg.is-ok{color:#fff}
.remind-msg.is-ok::before{content:"● ";color:var(--orange)}
.remind-msg.is-error{color:#ffd2c4}
.remind-form .btn[disabled]{opacity:.6;cursor:not-allowed}
.remind-note{margin-top:6px;grid-column:1/-1;font-family:var(--font-body);font-size:.86rem;color:rgba(255,255,255,.6)}

/* ============ STORIE — carosello condiviso (Figma 474:1858) ============
   La sezione riusa il componente storie della home: markup in
   template-parts/storie-slider.php, stili .storyline/.story-slide/.stories-*
   in components.css, JS in main.js. Qui resta solo l'override di larghezza
   del container per allinearla al ritmo delle altre sezioni di Sostienici. */
.azione-storie .wrap{max-width:1400px}

/* ============ FAQ ACCORDION (paper) — riusa il toggle di main.js.
   Figma 474:1868: righe su paper separate da filetti sottili, pallino grigio a
   sx, domanda teal, pulsante tondo con freccia giù a dx. "FAQ." arancio grande
   sopra il titolo teal. Il toggle JS ([data-oasi-accordion]) resta invariato. */
.faq{background:var(--paper);padding:clamp(90px,10vw,140px) 0}
.faq .wrap{max-width:1400px;margin:0 auto;padding:0 var(--pad)}
.faq-head{margin-bottom:clamp(40px,5vw,64px)}
.faq-head .eyebrow{display:block;font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,4vw,3.2rem);line-height:1.04;letter-spacing:-.025em;text-transform:none;color:var(--orange);margin-bottom:0}
.faq-head .eyebrow .d{display:none}
.faq-head h2{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,4vw,3.2rem);line-height:1.04;letter-spacing:-.025em;color:var(--teal)}
.faq-head h2 em{font-style:normal;color:var(--orange)}

.faq .acc-item{border-bottom:1px solid var(--border-default)}
.faq .acc-h{margin:0}
.faq .acc-head{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) 52px;gap:clamp(20px,4vw,48px);align-items:center;padding:clamp(28px,3.2vw,36px) 4px;background:none;border:0;cursor:pointer;text-align:left}
.faq .acc-head::before{content:"";width:10px;height:10px;border-radius:50%;background:rgba(11,37,48,.32);align-self:center}
.faq .acc-title{font-family:var(--font-display);font-weight:700;font-size:clamp(1.1rem,1.9vw,1.55rem);line-height:1.35;letter-spacing:-.02em;color:var(--teal);transition:color .2s}
.faq .acc-item.is-open .acc-title,.faq .acc-head:hover .acc-title{color:var(--orange)}
.faq .acc-icon{width:52px;height:52px;border-radius:50%;border:1.5px solid var(--border-default);position:relative;justify-self:end;transition:border-color .2s,transform .3s}
.faq .acc-icon::before{content:"";position:absolute;top:50%;left:50%;width:9px;height:9px;border-right:1.5px solid var(--teal);border-bottom:1.5px solid var(--teal);transform:translate(-50%,-65%) rotate(45deg);transition:border-color .2s}
.faq .acc-head:hover .acc-icon,.faq .acc-item.is-open .acc-icon{border-color:var(--orange)}
.faq .acc-head:hover .acc-icon::before{border-color:var(--orange)}
.faq .acc-item.is-open .acc-icon{transform:rotate(180deg)}
.faq .acc-item.is-open .acc-icon::before{border-color:var(--orange)}
.faq .acc-panel{overflow:hidden;transition:max-height .4s cubic-bezier(.2,.8,.2,1)}
.faq .acc-panel[hidden]{display:none}
.faq .acc-panel-inner{padding:0 60px 32px calc(14px + clamp(20px,4vw,48px))}
.faq .acc-panel-inner .rte p{max-width:70ch;font-size:1.02rem}
@media(prefers-reduced-motion:reduce){.faq .acc-panel{transition:none}}

/* ============ BANDA DONA (teal — preset + CTA) ============ */
.donate-band{background:var(--teal);color:#fff;padding:clamp(90px,10vw,130px) 0;text-align:center;position:relative}
.donate-band .wrap{max-width:820px;margin:0 auto;padding:0 var(--pad)}
.donate-band .db-dot{width:26px;height:26px;border-radius:50%;background:var(--orange);display:block;margin:0 auto 34px}
.donate-band h2{font-family:var(--font-display);font-weight:800;font-size:clamp(2.4rem,5vw,3.8rem);line-height:1;letter-spacing:-.03em;color:#fff;margin-bottom:22px}
.donate-band h2 em{font-style:normal;color:var(--orange)}
.donate-band .db-lead{font-family:var(--font-body);font-size:1.1rem;line-height:1.6;color:rgba(255,255,255,.82);max-width:540px;margin:0 auto 38px}
.db-presets{display:inline-flex;gap:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:8px;margin-bottom:36px;flex-wrap:wrap;justify-content:center}
.db-preset{font-family:var(--font-display);font-weight:700;font-size:.95rem;letter-spacing:.02em;color:rgba(255,255,255,.85);padding:14px 30px;border-radius:999px;transition:background .2s,color .2s}
.db-preset:hover{background:rgba(255,255,255,.14);color:#fff}
.db-preset.is-active{background:#fff;color:var(--teal)}
.donate-band .btn--primary{margin:0 auto}

/* ============ RESPONSIVE ============ */
@media(max-width:960px){
  .intro-grid{grid-template-columns:1fr;gap:28px}
  .promemoria .wrap{grid-template-columns:1fr;gap:32px}
  .steps-grid{grid-template-columns:1fr;gap:24px}
  .steps-grid .step-card:nth-child(2),.steps-grid .step-card:nth-child(3){margin-top:0}
  /* Box impilati → la serpentina (calibrata sul diagonale desktop) non ha più
     senso: nascondila, l'effetto resta sui pallini arancio dei titoli. */
  .azione-deco{display:none}
}
@media(max-width:560px){
  .faq .acc-head{padding:22px 2px;gap:16px}
  .faq .acc-panel-inner{padding:0 8px 24px 26px}
  .remind-tab{padding:10px 14px}
}