/* ==========================================================================
   OASI — Template "Pagina contenuto" (page-contenuto.php)
   Base = prototipo delivery/prototipo/mission-vision.html (inner hero foto +
   overlay teal, corpo editoriale 2 colonne + sidebar). Refs Figma:
   474:1347 (La nostra storia) e 563:1963 (Trasparenza).
   Regole DS: container 1360/1400, ritmo 160, un accento arancio per sezione,
   radius 0, niente ombre/gradienti sui componenti primari.
   ========================================================================== */

/* ============ CONTENUTO (griglia principale + sidebar) ============ */
.content{padding:clamp(90px,10vw,140px) 0 clamp(100px,12vw,160px);background:var(--paper)}
.content + .content{padding-top:0}
.content .wrap{max-width:1400px;margin:0 auto;padding:0 var(--pad)}
.content-grid{display:grid;grid-template-columns:1fr 380px;gap:80px;align-items:start}
.content-grid.solo{grid-template-columns:minmax(0,852px)}
.content-main{min-width:0}

/* Titoli di blocco (editoriale, più contenuti degli H2 di sezione) */
.content-main h2,.cblock h2{font-family:var(--font-display);font-weight:800;font-size:clamp(1.9rem,3.4vw,2.8rem);line-height:1.08;color:var(--teal);letter-spacing:-.018em;margin-bottom:32px}
.content-main h2 em,.cblock h2 em{font-style:normal;color:var(--orange)}

/* Blocchi impilati nella colonna principale */
.cblock{margin-bottom:64px}
.cblock:last-child{margin-bottom:0}

/* Rich text (WYSIWYG) */
.rte p{font-family:var(--font-body);font-size:1.08rem;line-height:1.75;color:var(--ink);margin-bottom:24px;max-width:64ch}
.rte p:last-child{margin-bottom:0}
.rte p.muted{color:var(--muted);font-size:1rem}
.rte h3{font-size:1.5rem;color:var(--teal);margin:36px 0 16px}
.rte h4{font-size:1.2rem;color:var(--teal);margin:28px 0 12px}
.rte ul,.rte ol{margin:0 0 24px 1.1em;max-width:64ch}
.rte li{font-family:var(--font-body);font-size:1.06rem;line-height:1.7;color:var(--ink);margin-bottom:8px}
.rte a{color:var(--orange);text-decoration:underline;text-underline-offset:3px}
.rte strong{color:var(--teal)}
.rte > :last-child{margin-bottom:0}
/* ---- Media NATIVO WP inserito nei blocchi Testo (WYSIWYG): immagini singole
   (con allineamenti), didascalie e gallery classiche [gallery]. ---- */
.rte img{max-width:100%;height:auto}
.rte::after{content:"";display:table;clear:both}
.rte figure{margin:32px 0}
.rte .wp-caption{max-width:100%;margin:32px 0}
.rte figcaption,.rte .wp-caption-text{margin-top:10px;font-family:var(--font-body);font-size:.9rem;line-height:1.5;color:var(--muted)}
.rte .aligncenter{display:block;margin:24px auto;text-align:center}
.rte .alignnone{display:block;margin:24px 0}
.rte .alignleft{float:left;margin:6px 32px 20px 0;max-width:min(50%,420px)}
.rte .alignright{float:right;margin:6px 0 20px 32px;max-width:min(50%,420px)}
/* Gallery classica [gallery] → griglia responsive (override degli stili inline WP) */
.rte .gallery{display:grid!important;gap:clamp(10px,1.2vw,16px);margin:32px 0;grid-template-columns:repeat(3,1fr)}
.rte .gallery.gallery-columns-1{grid-template-columns:1fr}
.rte .gallery.gallery-columns-2{grid-template-columns:repeat(2,1fr)}
.rte .gallery.gallery-columns-4{grid-template-columns:repeat(4,1fr)}
.rte .gallery.gallery-columns-5{grid-template-columns:repeat(5,1fr)}
.rte .gallery.gallery-columns-6{grid-template-columns:repeat(6,1fr)}
.rte .gallery .gallery-item{width:auto!important;margin:0!important;padding:0;float:none!important}
.rte .gallery .gallery-icon{margin:0}
.rte .gallery .gallery-icon a{display:block}
/* Nessun crop e nessuno sfondo: l'immagine tiene le sue proporzioni (i PNG
   con trasparenza dei loghi restano puliti). Il ritaglio 4/3 è solo dello
   slider, che ora usa .gs-item e non collide più con questa classe. */
.rte .gallery .gallery-icon img{width:100%;height:auto;border:0!important;display:block;object-fit:contain;background:none}
.rte .gallery .gallery-caption,.rte .gallery .wp-caption-text{margin-top:8px;font-size:.85rem;line-height:1.45;color:var(--muted)}
/* Modalita' "Barra loghi" (checkbox nella modale gallery → attributo loghi):
   riga flessibile invece della griglia, tutte le immagini alla stessa altezza e
   larghezza libera, come le barre partner/certificazioni. Le colonne impostate
   nella modale non contano piu': gli item vanno a capo da soli. */
.rte .gallery-loghi .gallery{display:flex!important;flex-wrap:wrap;align-items:center;gap:clamp(24px,3.5vw,52px);grid-template-columns:none!important}
.rte .gallery-loghi .gallery .gallery-item{flex:0 0 auto}
.rte .gallery-loghi .gallery .gallery-icon img{width:auto;max-width:100%;height:clamp(56px,7vw,96px)}
.rte .gallery-loghi .gallery .gallery-caption,.rte .gallery-loghi .gallery .wp-caption-text{text-align:center}
@media(max-width:640px){
  .rte .gallery{grid-template-columns:repeat(2,1fr)!important}
  .rte .alignleft,.rte .alignright{float:none;margin:24px 0;max-width:100%}
}

/* Intro breve sopra una lista (download / aree) */
.cblock .intro{font-family:var(--font-body);font-size:1.08rem;line-height:1.75;color:var(--ink);max-width:64ch;margin-bottom:36px}

/* Due colonne (testo/testo) */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:56px}
@media(max-width:760px){.two-col{grid-template-columns:1fr;gap:32px}}

/* La citazione DS (.oasi-quote) ha già i suoi margini; li riduco nel flusso */
.content-main .oasi-quote,.cblock .oasi-quote{margin:8px 0 0}

/* ============ SIDEBAR (widget "Sostieni" + contatti) ============ */
.side{display:flex;flex-direction:column;gap:24px;position:sticky;top:120px}
.widget{padding:32px 28px;background:#fff;border:1px solid rgba(11,37,48,.12)}
.widget.feature{background:var(--teal);color:#fff;border:none}
.widget .w-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#fff;margin-bottom:18px;opacity:.92}
.widget.feature .w-eyebrow .d{width:7px;height:7px;border-radius:50%;background:var(--orange)}
.widget h3{font-family:var(--font-display);font-weight:700;font-size:1.5rem;line-height:1.15;color:#fff;margin-bottom:14px}
.widget p{font-family:var(--font-body);font-size:.94rem;line-height:1.6;color:rgba(255,255,255,.8);margin-bottom:24px}
.widget .w-cta{display:inline-flex;align-items:center;gap:10px;background:var(--orange);color:#fff;font-family:var(--font-display);font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;padding:14px 24px;border-radius:999px;transition:background .2s}
.widget .w-cta:hover{background:var(--orange-600)}
.widget .w-cta .d{width:7px;height:7px;border-radius:50%;background:#fff}
.widget.contact h4{font-family:var(--font-display);font-weight:700;font-size:1.18rem;color:var(--teal);margin-bottom:14px}
.widget.contact ul{list-style:none;display:flex;flex-direction:column;gap:8px;font-family:var(--font-body);font-size:.94rem;color:var(--muted);line-height:1.7}
.widget.contact .w-link{display:inline-flex;align-items:center;gap:10px;margin-top:18px;font-family:var(--font-display);font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--teal)}
.widget.contact .w-link .d{width:7px;height:7px;border-radius:50%;background:var(--orange)}
.widget.contact .w-link:hover{color:var(--orange)}

/* Banner "foto": card con foto di sfondo + overlay teal (Figma 477-2794) */
.widget.photo{position:relative;min-height:212px;padding:24px;background:var(--teal);background-size:cover;background-position:center;display:flex;align-items:flex-end;overflow:hidden}
.widget.photo::before{content:"";position:absolute;inset:0;background:linear-gradient(270deg,rgba(0,84,112,0) 0%,rgba(0,84,112,.75) 100%)}
.widget.photo .w-photo-inner{position:relative;z-index:1;display:flex;flex-direction:column;width:100%}
.widget.photo h3{font-family:var(--font-display);font-weight:800;font-size:1.4rem;line-height:1.14;letter-spacing:-.02em;color:#fff;margin-bottom:16px}
.widget.photo p{margin-bottom:16px}
.widget.photo .w-cta.ghost{align-self:flex-end;background:transparent;padding:6px 0;color:#fff}
.widget.photo .w-cta.ghost:hover{background:transparent;color:rgba(255,255,255,.85)}
.widget.photo .w-cta.ghost .d{background:var(--orange)}

/* ============ AREE TEMATICHE (lista link full-width — Figma 474:1383) ============ */
.aree-section{padding:clamp(90px,10vw,140px) 0}
.aree-section .sec-head{margin-bottom:48px}
.aree-list{border-top:1px solid var(--border-default)}
.aree-link{display:grid;grid-template-columns:24px minmax(0,1fr) minmax(0,540px) 52px;gap:32px;align-items:center;padding:34px 0;border-bottom:1px solid var(--border-default);transition:padding .25s}
.aree-link:hover{padding-left:16px}
.aree-link .dot{width:12px;height:12px;border-radius:50%;background:rgba(11,37,48,.22);transition:background .3s,transform .3s;justify-self:center}
.aree-link:hover .dot{background:var(--orange);transform:scale(1.3)}
.aree-link .ttl{font-family:var(--font-display);font-weight:800;font-size:clamp(1.3rem,2vw,1.9rem);line-height:1.05;letter-spacing:-.02em;color:var(--teal);transition:color .2s}
.aree-link:hover .ttl{color:var(--orange)}
.aree-link .desc{font-family:var(--font-body);font-size:.98rem;line-height:1.55;color:var(--muted)}
.aree-link .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;color:var(--teal);transition:all .3s}
.aree-link:hover .go{background:var(--teal);border-color:var(--teal);color:#fff;transform:rotate(-45deg)}
.aree-link .go svg{width:16px;height:16px}
@media(max-width:820px){
  .aree-link{grid-template-columns:16px 1fr 52px;gap:20px}
  .aree-link .desc{grid-column:2;grid-row:2}
}

/* ============ PHOTO BREAK (foto full-bleed — Figma "Photo Break") ============ */
.photo-break{position:relative;min-height:clamp(340px,44vw,600px);background-size:cover;background-position:center;display:flex;align-items:flex-end}
.photo-break .wrap{max-width:1400px;margin:0 auto;padding:0 var(--pad);width:100%;position:relative;z-index:2}
.photo-break .pb-caption{display:inline-flex;align-items:center;gap:12px;margin-bottom:40px;font-family:var(--font-display);font-size:.74rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#fff}
.photo-break .pb-caption::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--orange)}
.photo-break::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,61,82,0) 40%,rgba(0,61,82,.55) 100%);z-index:1}

/* ============ CTA BAND (teal — Figma "cta") ============ */
.cta-band{background:var(--teal);color:#fff;padding:clamp(80px,10vw,120px) 0;text-align:center}
.cta-band .wrap{max-width:820px;margin:0 auto;padding:0 var(--pad)}
.cta-band .eyebrow{justify-content:center;margin-bottom:26px}
.cta-band h2{font-family:var(--font-display);font-weight:800;font-size:clamp(2.4rem,5vw,4rem);line-height:1;letter-spacing:-.03em;color:#fff;margin-bottom:24px}
.cta-band h2 em{font-style:normal;color:var(--orange)}
.cta-band p{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 40px}
.cta-band .btn--primary{margin:0 auto}

/* ============ TESTO + FOTO (riga testo/foto full-width) ============ */
.testo-foto{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,80px);align-items:center}
.testo-foto--foto-dx .tf-media{order:2}
.testo-foto .tf-media img{display:block;width:100%;height:auto;object-fit:cover}
.testo-foto .tf-text h2{font-family:var(--font-display);font-weight:800;font-size:clamp(1.9rem,3.4vw,2.8rem);line-height:1.08;color:var(--teal);letter-spacing:-.018em;margin-bottom:24px}
.testo-foto .tf-text h2 em{font-style:normal;color:var(--orange)}
@media(max-width:820px){
  .testo-foto{grid-template-columns:1fr;gap:32px}
  .testo-foto--foto-dx .tf-media{order:0}
}

/* ============ GALLERY (slider full-width, sborda a destra — G5) ============
   Track scroll-snap orizzontale: 2,5 item visibili, il primo allineato al
   contenuto (--edge), gli ultimi sbordano oltre il margine destro. Le frecce
   scorrono di un item (main.js [data-slider]); touch/trackpad/tastiera nativi.
   scroll-behavior smooth solo se l'utente non chiede reduced-motion. */
.gallery-section{padding:clamp(70px,8vw,120px) 0}
.gallery-slider{--edge:max(var(--pad),calc((100vw - 1400px) / 2 + var(--pad)));--gal-gap:clamp(16px,2vw,28px)}
.gallery-head{max-width:1400px;margin:0 auto 40px;padding:0 var(--pad)}
.gallery-head h2{font-family:var(--font-display);font-weight:800;font-size:clamp(1.9rem,3.4vw,2.8rem);line-height:1.08;color:var(--teal);letter-spacing:-.018em;margin:0}
.gallery-head h2 em{font-style:normal;color:var(--orange)}
.gallery-track{display:flex;gap:var(--gal-gap);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--edge);padding:0 var(--pad) 8px var(--edge);-webkit-overflow-scrolling:touch;scrollbar-width:none}
.gallery-track::-webkit-scrollbar{display:none}
.gallery-track:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
/* .gs-item e non .gallery-item: quest'ultima è la classe che WordPress genera
   per la gallery nativa [gallery], e il crop 4/3 dello slider finiva lì sopra. */
.gs-item{flex:0 0 auto;width:calc((100vw - var(--edge) - 2 * var(--gal-gap)) / 2.5);scroll-snap-align:start;margin:0}
.gs-item img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--paper-2)}
.gs-item figcaption{margin-top:14px;font-family:var(--font-body);font-size:.9rem;line-height:1.5;color:var(--muted)}
.gallery-foot{max-width:1400px;margin:28px auto 0;padding:0 var(--pad)}
.gallery-ctrls{display:flex;gap:10px}
.gallery-ctrls button{width:58px;height:58px;border-radius:50%;background:transparent;border:1.5px solid var(--border-default);color:var(--teal);display:flex;align-items:center;justify-content:center;transition:all .2s;cursor:pointer}
.gallery-ctrls button:hover:not(:disabled){background:var(--teal);border-color:var(--teal);color:#fff}
.gallery-ctrls button:disabled{opacity:.3;cursor:not-allowed}
.gallery-ctrls svg{width:16px;height:16px}
@media(prefers-reduced-motion:no-preference){.gallery-track{scroll-behavior:smooth}}
@media(max-width:760px){.gs-item{width:calc((100vw - var(--edge) - var(--gal-gap)) / 1.3)}}

/* ============ GALLERY (griglia — layout_gallery_grid) ============
   Griglia a N colonne (var --gg-cols): item quadrati con didascalia in overlay.
   Se lightbox/link → cursore pointer + leggero zoom in hover; la lightbox
   (overlay full-screen) e' generata da main.js su [data-oasi-lightbox]. */
.gallery-grid-sec .gg-title{font-family:var(--font-display);font-weight:800;font-size:clamp(1.9rem,3.4vw,2.8rem);line-height:1.08;color:var(--teal);letter-spacing:-.018em;margin:0 0 40px}
.gallery-grid-sec .gg-title em{font-style:normal;color:var(--orange)}
.gallery-grid{display:grid;grid-template-columns:repeat(var(--gg-cols,3),1fr);gap:clamp(12px,1.4vw,20px);align-items:start}
.gg-item{position:relative;display:block;overflow:hidden;margin:0;padding:0;border:0;background:var(--paper-2);cursor:default;text-decoration:none;line-height:0}
.gg-item--link,.gg-item--zoom{cursor:pointer}
/* Nessun crop: l'immagine mantiene le sue proporzioni naturali (l'utente decide
   la dimensione caricando l'immagine). height:auto → niente object-fit cover. */
.gg-item .gg-img{display:block;width:100%;height:auto;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.gg-item--link:hover .gg-img,.gg-item--zoom:hover .gg-img{transform:scale(1.05)}
/* cue "ingrandisci" sull'item lightbox */
.gg-item--zoom::after{content:"";position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;background:rgba(11,37,48,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") center/16px no-repeat;opacity:0;transition:opacity .25s;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:2}
.gg-item--zoom:hover::after,.gg-item--zoom:focus-visible::after{opacity:1}
/* didascalia in overlay (link/zoom) o statica (figure) */
.gg-item--link .gg-cap,.gg-item--zoom .gg-cap{position:absolute;left:0;right:0;bottom:0;padding:30px 16px 14px;font-family:var(--font-body);font-size:.82rem;line-height:1.4;color:#fff;background:linear-gradient(180deg,transparent,rgba(0,0,0,.72));z-index:1;text-align:left}
figure.gg-item .gg-cap{margin-top:12px;font-family:var(--font-body);font-size:.9rem;line-height:1.5;color:var(--muted)}
.gg-item:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
@media(max-width:760px){.gallery-grid{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:420px){.gallery-grid{grid-template-columns:1fr!important}}

/* ---- Lightbox overlay (creato da main.js, appeso al body) ---- */
.oasi-lightbox{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:clamp(20px,5vw,64px);background:rgba(6,24,31,.93);opacity:0;visibility:hidden;transition:opacity .28s}
.oasi-lightbox.is-open{opacity:1;visibility:visible}
.oasi-lightbox .oasi-lb-img{max-width:100%;max-height:86vh;object-fit:contain;box-shadow:0 30px 80px -20px rgba(0,0,0,.6);transform:scale(.96);transition:transform .28s}
.oasi-lightbox.is-open .oasi-lb-img{transform:scale(1)}
.oasi-lightbox .oasi-lb-cap{position:absolute;left:0;right:0;bottom:22px;text-align:center;color:rgba(255,255,255,.85);font-family:var(--font-body);font-size:.9rem;line-height:1.5;padding:0 24px}
.oasi-lb-close{position:absolute;top:20px;right:24px;width:52px;height:52px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);background:transparent;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}
.oasi-lb-close:hover{background:#fff;color:var(--teal);border-color:#fff}
.oasi-lb-close svg{width:20px;height:20px}
@media(prefers-reduced-motion:reduce){.oasi-lightbox,.oasi-lightbox .oasi-lb-img{transition:none}.gg-item .gg-img{transition:none}}

/* ============ RISULTATI (blocco numeri + testo, full-width) ============
   Blocco content_blocks "risultati": griglia 2-col numero (arancio) + frase.
   Usa .content per padding/wrap; qui solo titolo + lista. */
.risultati .ris-title{font-family:var(--font-display);font-weight:800;font-size:clamp(1.9rem,3.4vw,2.8rem);line-height:1.08;letter-spacing:-.018em;color:var(--teal);margin:0 0 44px;max-width:24ch}
.risultati .ris-title em{font-style:normal;color:var(--orange)}
.risultati .results-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1.5px solid rgba(11,37,48,.14)}
.risultati .result-row{display:flex;align-items:baseline;gap:22px;padding:28px 40px 28px 0;border-bottom:1.5px solid rgba(11,37,48,.14)}
.risultati .result-row:nth-child(2n){padding-right:0;padding-left:40px;border-left:1px solid rgba(11,37,48,.1)}
.risultati .result-val{flex-shrink:0;font-family:var(--font-display);font-weight:800;font-size:clamp(2.4rem,3.6vw,3.2rem);line-height:.85;letter-spacing:-.03em;color:var(--orange);min-width:1.7em}
.risultati .result-text{font-family:var(--font-body);font-size:1.04rem;line-height:1.5;color:var(--ink)}
@media(max-width:760px){
  .risultati .results-list{grid-template-columns:1fr}
  .risultati .result-row,.risultati .result-row:nth-child(2n){padding:24px 0;padding-left:0;border-left:0}
}

/* ============ ANCORA (punto di aggancio) ============ */
/* Target invisibile per i link interni #slug. scroll-margin-top compensa la
   navbar fissa (.float-menu: top:22px + ~50px di altezza) al jump. */
.anchor-target{display:block;height:0;scroll-margin-top:110px}

/* ============ RESPONSIVE ============ */
@media(max-width:900px){
  .content-grid{grid-template-columns:1fr;gap:48px}
  .side{position:static;flex-direction:row;flex-wrap:wrap}
  .side .widget{flex:1 1 260px}
}
@media(max-width:560px){
  .side{flex-direction:column}
}