/* Griglia a esagoni della home. Come funziona (forma, layout, breakpoint):
   vedi docs/hexgrid.md.
   Tecnica: https://github.com/web-tiki/responsive-grid-of-hexagons */

/* Hexagons.
   Il colore dell'esagono (--maincolor) arriva inline dalla view, in base alla
   categoria del viaggio (mapping locale CategoryColorMap). Qui solo il fallback. */

#hexGrid {
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
    padding: 0.866% 0;
    font-family: 'Raleway', sans-serif;
    font-size: 15px;
    /*background-color: red;*/
}

    #hexGrid:after {
        content: "";
        display: block;
        clear: both;
    }

.hex {
    --maincolor: var(--ascgrigio); /* fallback: sovrascritto inline con il colore della categoria */
    position: relative;
    list-style-type: none;
    float: left;
    overflow: hidden;
    visibility: hidden;
    outline: 1px solid transparent; /* fix for jagged edges in FF on hover transition */
    transform: rotate(-60deg) skewY(30deg) translatez(-1px);
}

    .hex * {
        position: absolute;
        visibility: visible;
        outline: 1px solid transparent; /* fix for jagged edges in FF on hover transition */
    }

.hexIn {
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;
    overflow: hidden;
    transform: skewY(-30deg) rotate(60deg);
    background: color-mix(in srgb, var(--maincolor) 30%, transparent);
}



/*** HEX CONTENT **********************************************************************/

.hex img {
    left: -100%;
    right: -100%;
    width: auto;
    height: 61%;
    margin: 0 auto;
}

.hex div {
    margin: 0;
    width: 102%;
    left: -1%; /* prevent line on the right where background doesn't cover image */
    padding: 0 4%;
    box-sizing: border-box;
    background-color: var(--maincolor);
    bottom: 25.2%;
    height: 13.85%;
    /*padding-top: 50%;*/
    overflow: hidden; /* rete di sicurezza: niente testo oltre i bordi della banda */
    /* Contenuto centrato verticalmente nella banda: così titolo (1 o 2 righe) e
       data restano sempre dentro l'altezza fissa. */
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 1;
}

    /* Titolo: da solo nella banda, max 2 righe con ellissi; font FLUIDO (scala con
       la larghezza dell'esagono) così due righe restano dentro l'altezza fissa
       della banda a ogni risoluzione. Vedi docs/hexgrid.md §5. */
    .hex div h1 {
        margin: 0;
        position: relative;
        width: 100%;
        font-weight: 300;
        font-size: clamp(0.85rem, 0.45rem + 1.25vw, 1.5rem);
        line-height: 1.2; /* abbastanza aria da non tagliare i discendenti (g, p...) dell'ultima riga */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Periodo (data): NON nella banda, ma nel triangolo chiaro sotto di essa.
       Sfondo = tinta chiara della categoria (30% su bianco) → testo nel colore
       pieno della categoria per leggibilità. Posizionato appena sotto la banda,
       dove il triangolo è più largo. */
    .hex .periodo {
        margin: 0;
        bottom: 18%;          /* banda: bottom 25.2% → il periodo cade subito sotto */
        left: 0;
        width: 100%;
        text-align: center;
        color: var(--maincolor);
        font-weight: 700;
        font-size: clamp(0.7rem, 0.4rem + 0.65vw, 1rem);
    }

/*
    .hex h1:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 45%;
        width: 10%;
        text-align: center;
        border-bottom: 1px solid #fff;
    }
*/


/*** SPACING AND SIZING *****************************************************************/

@media (min-width:1200px) { /* <- 2-3  hexagons per row */
    /* L'ultima riga si incastra con margin-bottom negativo (-7.564%): senza spazio,
       #hexGrid (overflow:hidden) le taglia la punta inferiore. Compensiamo col padding. */
    #hexGrid { padding-bottom: 8%; }

    .hex {
        width: 32%; /* = (100-2) / 3 */
        padding-bottom: 36.950%; /* =  width / sin(60) */
    }

        .hex:nth-child(5n+1),
        .hex:nth-child(5n+2) {
            transform: translateX(50%) rotate(-60deg) skewY(30deg);
        }

        .hex:nth-child(5n+3),
        .hex:nth-child(5n+4),
        .hex:nth-child(5n+5) {
            margin-top: -7.564%;
            margin-bottom: -7.564%;
        }

        .hex:nth-child(5n+2),
        .hex:nth-child(5n+4) {
            margin-right: 2%;
            margin-left: 2%;
        }

        .hex:nth-child(5n+1) {
            margin-left: 1%;
        }

        .hex:nth-child(5n+3),
        .hex:nth-child(5n+6) {
            clear: left;
        }

        /* Ultima riga PARZIALE centrata (invece che a sinistra). I selettori
           :last-child/:nth-last-child hanno specificità maggiore e agiscono solo
           sugli ultimi esagoni quando non completano la super-riga. Larghezza hex 32%. */
        .hex:last-child:nth-child(5n+1) { /* 1 solo esagono in coda (posizione "riga da 2") */
            transform: rotate(-60deg) skewY(30deg); /* niente indentazione translateX */
            margin-left: 34%;                        /* = (100-32)/2 */
            margin-top: 7.564%;                      /* cade sotto una riga piena: niente incastro (evita overlap) */
        }
        .hex:last-child:nth-child(5n+3) { /* 1 solo esagono in coda: nesta nella valle della riga da 2 */
            margin-left: 34%;
        }
        .hex:nth-last-child(2):nth-child(5n+3), /* 2 esagoni in coda (riga da 3 incompleta) */
        .hex:last-child:nth-child(5n+4) {
            margin-top: 0;                           /* cadono sotto la riga da 2: niente incastro */
        }
        .hex:nth-last-child(2):nth-child(5n+3) {
            margin-left: 17%;                        /* = (100-66)/2 */
        }
}

@media (max-width: 1199.98px) { /* <- 1-2  hexagons per row (boundary contiguo col 2-3: nessun buco a width frazionari) */
    /* Come sopra: qui l'incastro è più profondo (margin-bottom -13.423%) → serve più
       padding per non tagliare la punta dell'ultima riga. */
    #hexGrid { padding-bottom: 14%; }

    .hex {
        width: 49.5%; /* = (100-1) / 2 */
        padding-bottom: 57.158%; /* =  width / sin(60) */
    }

        .hex:nth-child(3n+1) {
            transform: translateX(50%) rotate(-60deg) skewY(30deg);
        }

        .hex:nth-child(3n+2),
        .hex:nth-child(3n+3) {
            margin-top: -13.423%;
            margin-bottom: -13.423%;
        }

        .hex:nth-child(3n+1) {
            margin-left: 0.5%
        }

        .hex:nth-child(3n+3) {
            margin-left: 1%;
        }

        .hex:nth-child(3n+2),
        .hex:nth-child(3n+4) {
            clear: left;
        }

        /* Ultima riga PARZIALE centrata. Il "3n+1" da solo è già centrato dal
           translateX; qui centriamo il "3n+2" rimasto solo. Larghezza hex 49.5%. */
        .hex:last-child:nth-child(3n+2) {
            margin-left: 25.25%; /* = (100-49.5)/2 */
            margin-top: 0;       /* cade sotto l'esagono sopra: niente incastro (evita overlap) */
        }
}

@media (max-width: 480px) { /* <- 1 esagono per riga, impilati in colonna */
    /* #hexGrid .hex ha specificità maggiore (id) delle regole .hex:nth-child(...)
       del breakpoint qui sopra, quindi con una sola regola azzera per TUTTI gli
       esagoni: indentazione, margini negativi e clear parziali. */
    #hexGrid .hex {
        width: 90%;                /* colonna singola, centrata */
        padding-bottom: 103.92%;   /* = width / sin(60): mantiene le proporzioni */
        float: none;
        clear: both;
        margin: 10px auto 0;            /* centrato, niente sovrapposizione fra le righe */
        transform: rotate(-60deg) skewY(30deg); /* niente translateX: nessuna indentazione */
    }
    #hexGrid .hex:first-child {
        margin-top:0
    }

    /* In colonna singola l'esagono è grande rispetto al viewport: il font (legato a
       vw) va ingrandito, altrimenti resta minuscolo dentro la banda grande. NB: non
       troppo, altrimenti due righe riempiono la banda e l'ultima riga viene tagliata. */
    #hexGrid .hex div h1 {
        font-size: clamp(1.1rem, 4.5vw, 1.9rem);
    }
    #hexGrid .hex .periodo {
        font-size: clamp(0.9rem, 3.2vw, 1.4rem);
    }
}

@media (max-width: 400px) {
    #hexGrid {
        font-size: 13px;
    }
}