/* =========================================================
 * FiLA — Box della filiera
 * ---------------------------------------------------------
 * Misure dal progetto Figma a 1280px: box larghi 362px con
 * 33px di spazio, altezze 299 / 359 / 410 / 562 (i quattro
 * formati), titolo 26px (a questo corpo "NELL'EDILIZIA" è
 * largo 172px contro i 175 del progetto), testo 20px con
 * interlinea 24px, largo al massimo ~270px.
 *
 * Il corpo del testo NON si ricava dal passo di riga: nel
 * progetto è 24px come nella timeline, ma qui i glifi sono
 * più grandi e l'interlinea più stretta. Verificato sullo
 * stesso testo del mockup: a 16px vengono 7 righe, a 20px
 * le 10 del progetto.
 *
 * I font non sono dichiarati: si eredita quello del sito.
 * ======================================================= */

/* ---------------------------------------------------------
 * GRIGLIA A MOSAICO
 * Colonne CSS e non una griglia: i box si impilano per
 * colonna con altezze diverse, come nel progetto, e su
 * telefono l'ordine resta quello impostato nel backend
 * (è anche l'ordine del mockup mobile).
 * ------------------------------------------------------- */
.fila-box-griglia{
    --fila-box-spazio:33px;
    column-count:3;
    column-gap:var(--fila-box-spazio);
    /* Ogni box ha lo spazio sotto di sé, anche l'ultimo di ogni colonna:
       il margine negativo lo compensa e la sezione finisce a filo */
    margin:0 0 calc(-1 * var(--fila-box-spazio));
}

/* ---------------------------------------------------------
 * BOX
 * ------------------------------------------------------- */
.fila-box{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    aspect-ratio:var(--fila-box-rapporto, 1 / 1);
    margin:0 0 var(--fila-box-spazio);
    /* Stondature del progetto: 100px in alto a destra, 40px in basso a sinistra */
    border-radius:0 100px 0 40px;
    /* Si vede solo mentre la foto carica, o se manca */
    background:var(--fila-box-fondo, #2B637A);
    color:#fff;
    /* Un box non si spezza mai fra due colonne */
    break-inside:avoid;
    -webkit-column-break-inside:avoid;
    page-break-inside:avoid;
    /* NIENTE overflow:hidden. Un box con aspect-ratio che non ritaglia si
       allunga da solo se il testo non ci sta; con overflow:hidden resterebbe
       della sua proporzione e taglierebbe le ultime righe. Le stondature le
       fanno foto e velo, che ereditano il raggio. */
    isolation:isolate;
    outline:none;
    cursor:default;
}

.fila-box .fila-box__img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    max-width:none;
    margin:0;
    object-fit:cover;      /* riempie il box senza deformare, qualunque formato */
    border-radius:inherit;
    z-index:0;
}

.fila-box__velo{
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:var(--fila-box-velo, rgba(43,99,122,.7));
    opacity:0;
    transition:opacity .35s ease;
    z-index:1;
    pointer-events:none;
}

.fila-box__testo{
    position:relative;
    z-index:2;
    width:100%;
    padding:32px 44px;
    box-sizing:border-box;
    text-align:center;
    opacity:0;
    transform:translateY(10px);
    transition:opacity .35s ease, transform .35s ease;
}

/* Titolo e testo: il tema imposta colore e corpo di h3 e p, qui vanno
   forzati. I selettori partono da .fila-box per alzare la specificità:
   !important serve solo contro altri !important di tema ed Elementor. */
.fila-box .fila-box__titolo{
    margin:0 0 28px;
    padding:0;
    color:#fff !important;
    font-size:1.625rem !important;   /* 26px */
    line-height:1.2 !important;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.01em;
}
.fila-box .fila-box__testo p{
    margin:0 0 .75em;
    color:#fff !important;
    font-size:1.25rem !important;    /* 20px */
    line-height:1.2 !important;      /* 24px, come nel progetto */
}
.fila-box .fila-box__testo p:last-child{
    margin-bottom:0;
}

/* ---------------------------------------------------------
 * STATO ATTIVO: velo e testo visibili
 *  - :hover solo dove c'è un mouse vero, altrimenti sul
 *    telefono il tocco lascerebbe il box "appiccicato"
 *  - :focus-visible per chi naviga da tastiera
 *  - .is-attivo lo mette il JS sui dispositivi touch,
 *    sul box che passa a metà schermo mentre si scorre
 *  - senza immagine il box sarebbe vuoto: sempre attivo
 * ------------------------------------------------------- */
@media (hover:hover){
    .fila-box:hover .fila-box__velo{opacity:1;}
    .fila-box:hover .fila-box__testo{opacity:1;transform:none;}
}
.fila-box:focus-visible .fila-box__velo,
.fila-box.is-attivo .fila-box__velo,
.fila-box--senza-immagine .fila-box__velo{
    opacity:1;
}
.fila-box:focus-visible .fila-box__testo,
.fila-box.is-attivo .fila-box__testo,
.fila-box--senza-immagine .fila-box__testo{
    opacity:1;
    transform:none;
}

/* Il contorno di messa a fuoco segue le stondature del box */
.fila-box:focus-visible{
    outline:3px solid #BC5151;
    outline-offset:4px;
}

/* ---------------------------------------------------------
 * TABLET: due colonne
 * ------------------------------------------------------- */
@media (max-width:1024px){
    .fila-box-griglia{
        --fila-box-spazio:28px;
        column-count:2;
    }
}

/* ---------------------------------------------------------
 * MOBILE: una colonna
 * ------------------------------------------------------- */
@media (max-width:767px){
    .fila-box-griglia{
        --fila-box-spazio:24px;
        column-count:1;
    }
    .fila-box__testo{
        padding:28px 32px;
    }
    .fila-box .fila-box__titolo{
        font-size:1.375rem !important;   /* 22px */
        margin-bottom:20px;
    }
    .fila-box .fila-box__testo p{
        font-size:1.125rem !important;   /* 18px */
        line-height:1.3 !important;
    }
}

@media (prefers-reduced-motion:reduce){
    .fila-box__velo,
    .fila-box__testo{
        transition:none;
    }
    .fila-box__testo{
        transform:none;
    }
}