/* =========================================================
   Tidi Mega Menu — mega-menu.css
   Tidi Suite · modulo mega-menu
   ========================================================= */

/* ---- Wrapper pannello (larghezza piena) ----------------- */
.tmm-panel {
    display: none;   /* di default fuori dal flusso e non renderizzato: niente striscia residua */
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 99999;
    box-sizing: border-box;

    --tidi-main-color: #f16234;

    background: #fff;
    border-top: 3px solid var(--tidi-main-color);
    box-shadow: 0 10px 36px rgba(0, 0, 0, .12);

    opacity: 0;
    pointer-events: none;
    clip-path: inset(0 0 100% 0);       /* scivola "su" collassandosi verso l'alto */
}

/* Step 1 (impostato da JS): il pannello viene inserito nel flusso
   con display:flex ma ancora invisibile, un frame prima di animare.
   Questo permette al browser di calcolare il layout prima che parta
   la transition (altrimenti display:none -> flex non anima). */
.tmm-panel.tmm-panel--rendering {
    display: flex;
    flex-wrap: nowrap;
}

/* Step 2: stato aperto, con transition attiva */
.tmm-panel.tmm-panel--rendering,
.tmm-panel.tmm-panel--open {
    transition:
        opacity   .22s ease,
        clip-path .22s ease;
}

.tmm-panel.tmm-panel--open {
    display: flex;
    flex-wrap: nowrap;
    opacity: 1;
    pointer-events: auto;
    clip-path: inset(0 0 0% 0);
}

/* ---- Inner centrato max 1600px -------------------------- */
.tmm-panel__inner {
    display: grid;
    /* Prima erano 4 colonne 1fr fisse, che riempivano sempre il 100%
       indipendentemente dal numero di post: con meno di 4 post restavano
       solo celle vuote, non spazio "vero" da allineare — justify-content
       non avrebbe avuto alcun effetto. Con minmax a larghezza massima,
       le colonne non si allargano oltre 320px: lo spazio che avanza
       diventa spazio di allineamento reale sul contenitore. */
    grid-template-columns: repeat(auto-fit, minmax(0, 320px));
    justify-content: start;
    gap: 1.25rem;
    max-width: 1600px;
    margin: 0 auto;
    padding: 1.75rem 2rem;
    box-sizing: border-box;

    /* Fade per swap tra categorie */
    transition: opacity .12s ease;
}

.tmm-panel__inner.tmm-items-align-left {
    justify-content: start;
}

.tmm-panel__inner.tmm-items-align-center {
    justify-content: center;
}

.tmm-panel__inner.tmm-items-align-right {
    justify-content: end;
}

.tmm-inner--fade-out {
    opacity: 0;
}

/* ---- Tema dark ----------------------------------------- */
.tmm-panel--dark {
    background: #1a1a1a;
    border-top-color: #0073aa;
    box-shadow: 0 10px 36px rgba(0, 0, 0, .5);
}

/* ---- Singolo box post ---------------------------------- */
.tmm-post {
    min-width: 0;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    border-radius: 4px;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
}

.tmm-post:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .1);
}

.tmm-post__thumb {
    overflow: hidden;
    border-radius: 3px;
    background: #f0f0f0;
    aspect-ratio: 16 / 9;
}

.tmm-post__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}

.tmm-post:hover .tmm-post__thumb img {
    transform: scale(1.05);
}

.tmm-post--no-img:not(.tmm-post--overlay) .tmm-post__thumb {
    display: none;
}

/* ---- Layout 2: testi sopra l'immagine in evidenza ------ */
.tmm-post--overlay .tmm-post__thumb {
    position: relative;
}

.tmm-post--overlay .tmm-post__overlay-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: 28px 16px 14px 16px;

    /* Sfumatura scura dal basso per leggibilità del testo,
       indipendente dal tema (serve anche in tema "light"). */
    background: linear-gradient( to top, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .45) 55%, rgba(0, 0, 0, 0) 100% );
}

.tmm-post--overlay .tmm-post__overlay-body .tmm-post__date,
.tmm-post--overlay .tmm-post__overlay-body .tmm-post__title,
.tmm-post--overlay .tmm-post__overlay-body .tmm-post__excerpt {
    color: #fff;
}

.tmm-post--overlay .tmm-post__overlay-body .tmm-post__date {
    color: #e0e0e0;
}

.tmm-post--overlay .tmm-post__overlay-body .tmm-post__excerpt {
    color: #ddd;
}

/* Nel layout overlay non c'è un .tmm-post__body separato sotto
   l'immagine: niente padding extra da rimuovere, il contenitore
   flex del box .tmm-post resta semplicemente senza quel blocco. */

.tmm-post__body {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: 10px 20px 20px 20px;
}

/* Allineamento contenuti della card — su entrambi i layout: normale
   (.tmm-post__body) e overlay su immagine (.tmm-post__overlay-body).
   align-items controlla l'allineamento in blocco (data/titolo/riassunto
   come elementi), text-align quello del testo dentro ognuno quando va
   a capo su più righe. */
.tmm-panel__inner.tmm-content-align-left .tmm-post__body,
.tmm-panel__inner.tmm-content-align-left .tmm-post__overlay-body {
    align-items: flex-start;
    text-align: left;
}

.tmm-panel__inner.tmm-content-align-center .tmm-post__body,
.tmm-panel__inner.tmm-content-align-center .tmm-post__overlay-body {
    align-items: center;
    text-align: center;
}

.tmm-panel__inner.tmm-content-align-right .tmm-post__body,
.tmm-panel__inner.tmm-content-align-right .tmm-post__overlay-body {
    align-items: flex-end;
    text-align: right;
}

.tmm-post__date {
    font-size: .72rem;
    color: #999;
    letter-spacing: .03em;
}

.tmm-post__title {
    font-size: .92rem;
    line-height: 1.35;
    color: #111;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tmm-post__excerpt {
    font-size: .8rem;
    color: #555;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- Tema dark: testi ---------------------------------- */
.tmm-panel--dark .tmm-post__title   { color: #f0f0f0; }
.tmm-panel--dark .tmm-post__excerpt { color: #aaa; }
.tmm-panel--dark .tmm-post__thumb   { background: #333; }

/* ---- Stato loading / vuoto ----------------------------- */
.tmm-loading,
.tmm-empty {
    grid-column: 1 / -1;
    width: 100%;
    text-align: center;
    color: #aaa;
    font-style: italic;
    padding: 1rem 0;
}

/* ---- Responsivo: sotto 768px nascosto ------------------ */
@media (max-width: 767px) {
    .tmm-panel {
        display: none !important;
    }
}