/* =============================================================================
   ARCHIVE: CASE STUDIES
   ============================================================================= */

/* ── Hero ──────────────────────────────────────────────────────────────────
   Statica (gradiente sfocato fisso, --sfondo-hero), niente piu' pin/
   scroll-jacking — su richiesta esplicita, al posto del vecchio
   pin-spacer/stage sticky. La griglia sotto (#mmReviewsSection) e'
   sempre in flusso normale, sempre visibile (vedi .cs-archive
   .mm-reviews piu' in basso in questo file). */

.cs-archive {
    width: 100%;
}

/* Hero statica (gradiente sfocato fisso, --sfondo-hero — stessa tecnica/
   variabile di /agenzia/, /madsuite/ e della hero home). Alta almeno
   100vh (min-height: cresce se il contenuto e' piu' alto), gradiente
   con ellisse in PERCENTUALE (non svh) cosi' si adatta sempre
   all'altezza reale della sezione, fondendosi con la griglia sotto
   senza stacco (vedi margin-top su .cs-archive .mm-reviews piu' in
   basso in questo file). */
.cs-hero {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    isolation: isolate;
    --mm-hero-blur: min(125px, 8svh);
    --mm-hero-ext:  calc(var(--mm-hero-blur) * 2.4);
    --sfondo-hero: radial-gradient(
        220% 220% at 100% var(--mm-hero-ext),
        var(--colori-pieni-rosso-default, #D24A5D) -10%,
        var(--colori-pieni-blu-default, #162640) 50%,
        var(--colori-pieni-blu-default, #162640) 100%
    );
    background-color: var(--colori-pieni-blu-default, #162640);
    color: var(--colori-pieni-bianco-default);
}

.cs-hero::before {
    content:  "";
    position: absolute;
    inset: calc(var(--mm-hero-ext) * -1) calc(var(--mm-hero-ext) * -1) 0 calc(var(--mm-hero-ext) * -1);
    z-index:  -2;
    background: var(--sfondo-hero);
    filter: blur(var(--mm-hero-blur));
    transform: translateZ(0);
}

.cs-hero > .mm-bg-grain {
    z-index: -1;
    -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent 85%);
            mask-image: linear-gradient(to bottom, #000 65%, transparent 85%);
}

/* Struttura a righe (Figma, stessa logica della hero home): riga 1 =
   testo+bottoni a destra (colonna sinistra vuota), riga 2 = titolo da
   solo in basso a sinistra, con 160px di distanza tra le due righe
   (vedi .cs-hero__top/.cs-hero__title piu' sotto). */
.cs-hero__inner {
    position: relative;
    z-index:  1;
    min-height:   100svh;
    display:  flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--spacing-120, 120px);
    padding-top: calc(var(--mm-header-actual-h, 108px) + var(--spacing-40));
    padding-bottom: var(--spacing-40);
}

.cs-hero__top {
    display: flex;
    justify-content: flex-end;
    flex-direction: row-reverse;
    width: 100%;
    gap: 160px;
}

.cs-hero__intro {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-24, 24px);
width: 35%;
justify-content: flex-end;
padding-bottom: 25px;
}

.cs-hero__desc {
    margin: 0;
    color: var(--colori-pieni-blu-50);
}

.cs-hero__buttons {
    display: flex;
    align-items: center;
    gap: var(--spacing-8, 8px);
    flex-wrap: wrap;
}



@media (max-width: 767px) {
    .cs-hero__inner {
        gap: var(--spacing-40, 40px);
    }
    .cs-hero__top {
        justify-content: flex-start;
    }
    .cs-hero__intro {
        max-width: none;
        padding-bottom: 0;
    }
    .cs-hero__buttons {
        flex-direction: column;
        align-self: stretch;
        width: 100%;
    }
    .cs-hero__buttons .btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

/* ── Griglia card -> Footer ──────────────────────────────────────────────
   #mmReviewsSection (vedi archive-case_study.php) e' un'UNICA sezione
   dinamica con TUTTE le card (compresa la prima), che riusa il
   meccanismo Recensioni -> Footer di home (vedi homepage.php/.css/.js:
   stage pinnato, sub-scroll interno se serve, reveal a ellisse sul
   footer).
   La dissolvenza con la hero sopra (homepage.js) ora SEGUE lo stesso
   pattern di Risultati nella homepage (vedi .mm-risultati/.mm-risultati--
   overlay in homepage.css): finche' l'animazione della hero non e'
   completata, questa sezione (pur essendo molto piu' alta di 100vh, per
   via della griglia + footer che contiene) resta un overlay FISSO
   (position:fixed, inset:0) con `overflow:hidden` — quindi visivamente
   "tagliata" a una sola schermata, la parte oltre i 100vh non e' ancora
   visibile. Solo quando l'animazione e' completa (scroll arrivato in
   fondo alla hero) la sezione passa in flusso normale (margin-top:-100vh,
   stessa quota della Hero prima, per un handoff senza scatti) e la parte
   "tagliata" torna semplicemente scorribile in modo naturale. Scoped a
   questa pagina (.cs-archive) perche' lo stesso id/classe e' riusato
   nella homepage per Recensioni, che segue invece il proprio pattern
   esistente (fermo/scrolling naturale) — non deve essere toccato da qui. */
/* La hero sopra e' ora alta almeno 100vh (min-height, gradiente che
   finisce in blu pieno, non piu' in bianco): niente piu' margin-top
   negativo per "pescare" nella coda bianca della hero (che non c'e'
   piu'). La griglia e' sempre in flusso normale, sempre visibile
   (niente piu' overlay fisso pilotato dallo scroll della hero). */
.cs-archive .mm-reviews {
    height: auto;
}

/* Classe NON piu' applicata da nessun JS (vedi sopra) — resta qui solo
   perche' innocua se inutilizzata. */
.cs-archive .mm-reviews--overlay {
    position: fixed;
    inset: 0;
    margin-top: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Disattivazione completa (su tutti i dispositivi) del meccanismo di
   pin/overlay Recensioni->Footer condiviso (definito in homepage.css,
   usato anche da home/madsuite/manifesto): su questa pagina lo stage non
   e' piu' pinnato ne' pilotato da scroll — su richiesta esplicita
   ("togli tutte le animazioni dei footer"). Stessa ricetta gia' usata
   sitewide solo su mobile (vedi homepage.css, @media max-width:1080px),
   qui resa incondizionata ma scoped a .cs-archive per non toccare le
   altre pagine. */
.cs-archive .mm-reviews__stage {
    position: static;
    height: auto;
    overflow: visible;
    justify-content: flex-start;
    align-items: stretch;
}

.cs-archive .mm-reviews__window {
    position: static;
    inset: auto;
    overflow: visible;
    width: 100%;
}

.cs-archive .mm-reviews__stage #mmFooter {
    position: relative;
    inset: auto;
    overflow: hidden;
    isolation: isolate;
    pointer-events: auto;
}

/* Sfondo del footer: STESSO gradiente ora usato dalle hero del sito
   (rosso -10% -> blu 50% -> blu 100%, vedi anche footer.css sitewide),
   capovolto su entrambi gli assi con transform:scale(-1,-1) — su
   indicazione esplicita, invece di riposizionare l'ancora e invertire
   manualmente l'ordine dei colori. L'ancora rossa (vicino al bordo in
   alto a destra nella hero) finisce cosi' in basso a sinistra nel
   footer. Il bordo "flush" della hero (gia' blu pieno) diventa il bordo
   SUPERIORE del footer (si fonde con la griglia bianca sopra tramite
   .mm-footer, che ha comunque un fallback blu — niente piu' cucitura
   bianca), il bordo sfocato/esteso (vicino all'ancora rossa) diventa il
   bordo INFERIORE. Scoped a .cs-archive: stessa ricetta di footer.css
   sitewide, solo riapplicata qui perche' questo #mmFooter vive dentro lo
   stage pinnato (position/inset diversi, vedi regola sopra). */
.cs-archive .mm-reviews__stage #mmFooter {
    --mm-footer-blur: min(125px, 8svh);
    --mm-footer-ext:  calc(var(--mm-footer-blur) * 2.4);
    /* Dimensione ellisse in PERCENTUALE (non svh come la hero): la hero ha
       un'altezza proporzionata al viewport, il footer no — la sua altezza
       dipende dal contenuto (newsletter+link+copyright). In percentuale il
       raggio si adatta SEMPRE all'altezza reale del box (blur incluso),
       qualunque essa sia — fusione garantita su ogni pagina/dispositivo. */
    --sfondo-footer: radial-gradient(
        220% 220% at 100% var(--mm-footer-ext),
        var(--colori-pieni-rosso-default, #D24A5D) -10%,
        var(--colori-pieni-blu-default, #162640) 50%,
        var(--colori-pieni-blu-default, #162640) 100%
    );
    background-color: var(--colori-pieni-blu-default, #162640);
}

.cs-archive .mm-reviews__stage #mmFooter::before {
    content:  "";
    position: absolute;
    inset: calc(var(--mm-footer-ext) * -1) calc(var(--mm-footer-ext) * -1) 0 calc(var(--mm-footer-ext) * -1);
    z-index:  -1;
    background: var(--sfondo-footer);
    filter: blur(var(--mm-footer-blur));
    transform: scale(-1, -1) translateZ(0);
}

/* #mmFooter__inner (footer.css) ha di suo uno sfondo pieno/opaco
   (fallback per i footer normali, non overlay): qui dentro deve restare
   trasparente, altrimenti coprirebbe per intero il nuovo gradiente
   sfocato impostato sopra su #mmFooter stesso. */
.cs-archive .mm-reviews__stage #mmFooter .mm-footer__inner {
    background: transparent;
}
.cs-hero__buttons > .btn {
  flex: 1 1 260px;
  justify-content: center;
  white-space: nowrap;
}
.cs-archive .mm-reviews__stage > .mm-bg-grain,
.cs-archive .mm-reviews__stage .mm-scroll-bg,
.cs-archive .mm-reviews__stage .mm-scroll-bg--reveal {
    display: none !important;
}

/* Gap tra le card, piu' ampio del default Recensioni (32px): stesso
   contenitore (.mm-reviews__inner) ma scoped a questa pagina. */
#mmReviewsSection .mm-reviews__inner {
    gap: var(--spacing-16, 16px);
}

/* Messaggio vuoto */
.cs-archive__empty {
    text-align: center;
    color: var(--colori-pieni-grigio-default);
    font-family: var(--font-body), sans-serif;
    font-size: var(--body-lg-size);
    padding: var(--spacing-80) 0;
}
.cs-hero__title {
    color: var(--colori-pieni-bianco-default) !important;
    margin: 0;
    width: 65%;
}
/* ── Responsive ──────────────────────────────────────────────────────────────── */

/* MOBILE — nessuna regola specifica qui piu': hero e griglia sono gia'
   sezioni statiche su tutti i dispositivi (vedi .cs-hero piu' sopra in
   questo file, e .cs-archive .mm-reviews), stessa altezza/gradiente/
   margin-top ovunque. */

@media (max-width: 767px) {
    #mmReviewsSection .mm-reviews__inner {
        gap: var(--spacing-16, 16px);
    }
    .cs-hero__inner{
        padding-bottom: var(--spacing-80, 80px);
    }
    .cs-hero__buttons > .btn{
        flex: none !important;
    }
}


/* Card caso studio piu' basse SOLO in questa pagina (.mm-cs-feature e'
   condivisa con home/correlati, dove resta 80vh di default). */
#mmReviewsInner .mm-cs-feature {
    height: 70vh;
}

@media(max-width:1080px ){
    .cs-hero__inner{
        flex-direction: column-reverse;
        justify-content: flex-start;
        gap: 40px;
    }
    .cs-hero__buttons {
    align-self: stretch;
    width: 100%;
  }
    .cs-hero__intro{
        width: 100%;
        align-items: center;
        padding-bottom: 0;
        gap: 40px;
    }
    .cs-hero__desc{
        text-align: left;
    }
    .cs-hero__title{
        align-items: left;
        display: flex;
        flex-direction: column;
        width: 100% !important;
    }
    .cs-hero__title > br {
    display: none;
}
.cs-hero__top{
    display: flex;
    flex-direction: column-reverse;
    gap: 40px;
    justify-content: flex-start;
}

}

@media(min-width: 1820px){
    .cs-hero__inner{
        padding-top: 180px;
    }
}

@media (min-width: 2560px) {
    .cs-hero__inner{
        padding-top: 280px;
        display: flex;
        justify-content: space-between;
    }
    .mm-cs-feature__panel{
        padding: var(--spacing-80, 80px);
    }
    .mm-cs-feature__bottom{
        gap: var(--spacing-40, 40px);
    }
}



@media (min-width: 1081px) {
  .cs-hero__top { align-items: flex-end; }
}