:root{
    /* layout */
    --grid-gap: 8px;
    --cell-padding: 6px;
    --radius: 12px;

    /* colori light */
    --border: #e5e7eb;
    --accent: #3b82f6;

    /* header/buttons */
    --btn-bg: #ffffff;
    --btn-border: #e5e7eb;
    --btn-hover: #f3f4f6;
    --btn-text: #111827;
}

/* contenitore pagina calendario (se non lo gestisci altrove) */
.wrap{
    max-width:1100px;
    margin:32px auto;
    padding:0 16px;
}

/* HEADER calendario */
.cal-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:16px;
}
.cal-title{
    font-size:1.4rem;
    font-weight:700;
    letter-spacing:.3px;
    font-family: "Monument Extended";
}

/* NAV (Oggi, ←, →) */
.cal-nav{
    display:flex;
    align-items:center;
    gap:8px;
}
.btn{
    appearance:none;
    border:1px solid var(--btn-border);
    background:var(--btn-bg);
    color:var(--btn-text);
    padding:8px 12px;
    border-radius:12px;
    cursor:pointer;
    line-height:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    box-shadow:0 1px 0 rgba(0,0,0,.02);
    font-family: "Monument Extended";
}
.btn:hover{ background:var(--btn-hover); }
.btn:active{ transform:translateY(1px); }

/* “Oggi” stile ghost */
.btn-ghost{
    background:transparent;
    border-color:var(--btn-border);
}
.btn-ghost:hover{ background:var(--btn-hover); }

/* Icon button per frecce (Font Awesome <i class="fa-solid fa-chevron-left">) */
.btn-icon{
    width:38px; height:38px; padding:0;
    border-radius:999px;
    font-size:14px;
}

/* intestazione giorni */
.weekdays{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:var(--grid-gap);
    margin:10px 0 6px;
    font-family: "Monument Extended";
}
.weekday{
    font-size:.82rem;
    color:#6b7280;
    text-align:right;
}

/* griglia mese */
.grid{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    grid-auto-rows:140px;
    gap:var(--grid-gap);
}

/* cella giorno */
.cell{
    position:relative;
    overflow:hidden;
    /* più spazio in alto così gli eventi non invadono il badge */
    padding:28px 8px 8px;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:#fff;                 /* fuori mese */
    box-shadow:0 1px 0 rgba(0,0,0,.02);
    display:flex;
    flex-direction:column;
    gap:6px;                     /* spazio verticale tra eventi */
}

/* mese corrente */
.cell:not(.out){ background: var(--lightgray); }
.cell.out{ opacity:.6; }

/* badge giorno (resta sopra agli eventi) */
.date-num{
    position:absolute;
    top:6px; right:8px;
    z-index:2;
    font-size:.85rem;
    font-weight:600;
    border-radius:999px;
    padding:3px 7px;
    /* di default: fuori mese → bianco */
    background:transparent;
    color:var(--darkgray);
}

.cell:not(.out) .date-num{
    color:var(--darkgray);
    font-family: "Monument Extended";
}

.today .date-num{
    background: var(--pink);
    color:var(--lightgray) !important;
}

/* evento */
.ev{
    position:relative;
    z-index:1;     /* i badge restano sopra se si sovrappongono */
    display:block;
    margin-bottom:6px;
    padding:8px 10px;
    border-radius:10px;
    color:#fff;
    text-decoration:none;
    line-height:1.2;
    font-size:.82rem;
    border:1px solid rgba(0,0,0,.12);
    overflow:hidden;             /* nasconde testo in eccesso */
    margin:0;                    /* lo spazio lo dà .cell con gap */
    min-height:0;                /* importante per flex */
}

.ev strong{
    display:-webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:hidden;
    padding-right: 28px;
}

.ev .subtitle{
    font-size:.72rem;
    opacity:.95;
    margin-top:2px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

/*************** 2 EVENTS **********************/
.cell:has(.ev + .ev) .ev{
    flex: 1 1 0;                 /* si dividono lo spazio disponibile */
    display:flex; align-items:center;   /* testo centrato verticalmente */
    padding:6px 8px;             /* un po’ più compatta */
}
.cell:has(.ev + .ev) .ev .subtitle { display: none; }
.cell:has(.ev + .ev) .ev .strong { padding-right: 28px; }

/*************** 3 EVENTS **********************/
.cell:has(.ev + .ev + .ev) .ev{
    padding:5px 8px;
    -webkit-line-clamp: 1;       /* titolo a una riga */
    display: block;               /* annulla il line-clamp precedente */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;      /* … alla fine */
    padding-right: 28px
}

.cell:has(.ev + .ev + .ev) .ev .ev-badge {
    font-size: .8rem;
    width: 27px;
    height: 27px;
}

/************* 4 EVENTS (or more) ****************/
/* dimensioni base (puoi alzarle) */
:root { --dot-h: 28px; --dot-gap: 6px; }

/* 4+ eventi ⇒ passa da lista (flex) a griglia 3 colonne */
.cell:has(.ev + .ev + .ev + .ev){
    display: grid;                              /* override del flex */
    grid-template-columns: repeat(3, 1fr);      /* 3 colonne fisse */
    grid-template-rows: repeat(3, var(--dot-h));/* max 3 per colonna */
    gap: var(--dot-gap);
    align-content: start;                       /* parte alta della cella */
}

/* i “pallini” (micro-pill) */
.cell:has(.ev + .ev + .ev + .ev) .ev{
    height: var(--dot-h);
    min-height: 0;
    border-radius: 999px;
    padding: 0 var(--dot-h) 0 8px;              /* spazio per il badge a destra */
    margin: 0;                                  /* lo spacing lo fa 'gap' della griglia */
    display: block;
}

/* niente testo con 4+ eventi */
.cell:has(.ev + .ev + .ev + .ev) .ev strong,
.cell:has(.ev + .ev + .ev + .ev) .ev .subtitle{
    display: none !important;
}

/* badge sempre visibile ma più piccolo in modalità “dots” */
.cell:has(.ev + .ev + .ev + .ev) .ev-badge{
    padding-right: 0.33rem;
}

/* filtro piattaforme */
.cal-filters{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    justify-content:center;
    flex:1;
}

/* chip selezionabile */
.chip{
    appearance:none;
    border:1px solid var(--border);
    background:#fff;
    color:#111827;
    padding:6px 10px;
    border-radius:18px;
    font-size:.8rem;
    cursor:pointer;
    line-height:1;
    display:inline-flex;
    align-items:center;
    gap:8px;
}
.chip:hover{ background:#f3f4f6; }
.chip[aria-pressed="true"]{
    color:#fff;
    border-color:transparent;
}

/* icona piattaforma */
.chip .chip-icon{
    width:auto;
    height:28px;
    object-fit:contain;
    border-radius:4px;
}

.chip-reset{ opacity:.8; }
.chip-reset:hover{ opacity:1; }

.chip.plat-iracing[aria-pressed="true"]{ background: var(--iracing); }
.chip.plat-acc[aria-pressed="true"]{ background: var(--acc); }
.chip.plat-lmu[aria-pressed="true"]{ background: var(--lmu); }
.chip.plat-rf2[aria-pressed="true"]{ background: var(--rf2); }

.ev-badge{
    position: absolute;
    top: 0px;
    right: 0px;
    width: 35px;
    height: 35px;
    padding: 1px;
    pointer-events: none;
    z-index: 2;
}

.ev-badge.fa-twitch {
    margin-top: 0.4rem;
    font-size: 1rem;
    text-align: center;
}

@media (max-width: 1100px) and (min-width: 800px){
    .cell:has(.ev + .ev + .ev + .ev){
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, var(--dot-h));
        grid-auto-flow: column;    /* riempi in verticale, poi passa alla colonna dopo */
    }
}

/* ===== Mobile: lista eventi (<= 800px) ===== */
@media (max-width: 800px){

    /* layout lista */
    .weekdays{ display:none; }
    .grid{ display:block; }

    .cell.out{ display:none; }
    .cell:not(:has(.ev)){ display:none; }

    .cell{
        border:0; background:transparent;
        padding:0; margin:0 0 18px; display:block;
    }
    .date-num{ display:none; }

    /* annulla i dots */
    .cell:has(.ev + .ev + .ev + .ev){
        display:block !important;
        grid-template:none; grid-auto-flow:unset;
    }

    /* pill evento */
    .ev{
        display:block; position:relative;
        margin:18px 0 12px;
        padding:12px 14px;                /* ← niente offset a sinistra */
        border-radius:16px;
        box-shadow:0 8px 18px rgba(0,0,0,.08);
        font-size:.95rem; line-height:1.2;
    }

    .cell{ overflow: visible; position: relative; }
    .cell::before{
        content: attr(data-daylabel);
        display: block;
        margin: 0 0 8px 2px;        /* un filo sopra al primo evento */
        color: var(--dark);
        font-weight: 800;
        font-size: .9rem;
        font-family: "Monument Extended";
        line-height: 1;
        padding: 1rem 0 0 0;
    }
    .cell:not(:has(.ev))::before{ content: ""; }
    .cell .ev:first-child{ margin-top: 0; }
    .cell .ev + .ev::before{ display:none; }    /* solo sul primo evento */

    /* testo clamp */
    .ev strong{
        display:-webkit-box; -webkit-line-clamp:2;
        -webkit-box-orient:vertical; overflow:hidden;
    }
    .ev .subtitle{
        display:-webkit-box; -webkit-line-clamp:1;
        -webkit-box-orient:vertical; overflow:hidden;
        opacity:.95; margin-top:2px;
    }

    /* badge icona */
    .ev-badge{ top:8px; right:10px; }

    /* header mobile: filtri sotto titolo/nav */
    .cal-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
    .cal-title{ order:1; flex:1 1 auto; }
    .cal-nav{ order:2; }
    .cal-filters{ order:3; width:100%; justify-content:flex-start; gap:8px; margin-top:4px; }

    /* chip un filo più compatti */
    .chip{ padding:6px 8px; font-size:.85rem; }
    .chip .chip-icon{ width:35px; height:27px; }

    .cell:has(.ev + .ev),
    .cell:has(.ev + .ev + .ev),
    .cell:has(.ev + .ev + .ev + .ev){
        display:block !important;
        grid-template:none !important;
        grid-auto-flow:unset !important;
    }
    .cell:has(.ev + .ev) .ev,
    .cell:has(.ev + .ev + .ev) .ev,
    .cell:has(.ev + .ev + .ev + .ev) .ev{
        display:block !important;
        height:auto !important;
        min-height:unset !important;
        padding:12px 14px !important;
        border-radius:16px !important;
        margin:12px 0 !important;
    }
    .cell:has(.ev + .ev + .ev + .ev) .ev strong{
        display:-webkit-box !important;
        -webkit-line-clamp:2; -webkit-box-orient:vertical;
        overflow:hidden;
        display: block;
    }
    .cell:has(.ev + .ev ) .ev .subtitle,
    .cell:has(.ev + .ev + .ev) .ev .subtitle,
    .cell:has(.ev + .ev + .ev + .ev) .ev .subtitle{
        display:-webkit-box !important;
        -webkit-line-clamp:1; -webkit-box-orient:vertical;
        overflow:hidden;
        display: block;
    }

    /* evita badge mini dei giorni affollati */
    .cell:has(.ev + .ev) .ev .ev-badge,
    .cell:has(.ev + .ev + .ev) .ev .ev-badge,
    .cell:has(.ev + .ev + .ev + .ev) .ev .ev-badge{
        font-size:1rem;
        width: 35px;
        height: 35px;
    }

    .pop-entries .car strong{
        flex:1 1 auto;
        min-width:48px;
        font-size:.5rem;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .pop-entries .car img{
        max-width:25px;
    }
}

/* ===== Popover evento ===== */
.pop-overlay{
    position: fixed; inset: 0;
    background: transparent;          /* clic al di fuori per chiudere */
    z-index: 60; display: none;
}
.pop-overlay.show{ display:block; }

.pop{
    position: absolute;
    min-width: 340px;
    max-width: 520px;
    background: #fff;
    color: var(--dark);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
    padding: 14px 14px 12px;
    z-index: 61;
    display:flex;
    flex-direction:column;     /* <— colonna */
    max-height: min(70vh, 560px);            /* <— limite verticale */
}
.pop.above{ transform: translateY(-6px); }
.pop.below{ transform: translateY(6px); }

/* freccetta */
.pop::after{
    content:""; position:absolute; width:12px; height:12px; background:#fff;
    border-left:1px solid var(--border); border-top:1px solid var(--border);
    transform: rotate(45deg);
}
.pop.below::after{ top:-7px; left:24px; }
.pop.above::after{ bottom:-7px; left:24px; transform: rotate(225deg); }

/* header */
.pop-head{
    display:flex;
    align-items:center;
    gap:12px;
    position:sticky;
    top:0;
    z-index:2;
    background:#fff;
    padding-bottom:6px;
    margin-bottom:8px;
}

.pop-title .section-title{
    font-size:1.1rem;
}

.pop-platform{
    max-width:60px;
    max-height:60px;
    object-fit:contain;
    margin-left:auto;
    flex:0 0 auto;
}
.pop-meta {
    display:flex;
    gap:16px;
    align-items:center;
    margin-bottom:10px;
}

.pop-track{ display:flex; align-items:center; gap:8px; }
.pop-track img{ max-width:60px; max-height:60px; object-fit:contain; }
.pop-time{
    display:flex;
    flex-direction:column;       /* ← una sotto l’altra */
    line-height:1.15;
    gap:2px;
}
.pop-time .pop-date{ font-weight:700; color:#111827; }
.pop-time .pop-hour{ font-weight:700; color:#374151; }

/* entries */
.pop-entries h4{ font-size:.9rem; margin:6px 0 6px; font-weight:700; }
.pop-entries .car-list{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:8px; }
.pop-entries .car{
    background:#f9fafb;
    border:1px solid var(--border);
    border-radius:10px;
    padding:8px;
    font-size:.85rem;
    height: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.pop-entries .car small{ display:block; color:#6b7280; margin-top:2px; }

.pop-scroll{
    min-height:0;             /* flexbox trick */
    overflow:auto;            /* <— scroll */
    overscroll-behavior:contain;
    padding-right:2px;
}

/* descrizione */
.pop-desc{
    margin-top:8px;
    font-size:.9rem;
    color: var(--dark);
}

.pop-desc img{
    max-width:100%;
    border-radius:8px;
}

.pop-car-brand {
    max-height: 25px;
    max-width: 35px;
}

.pop-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:20px;
    padding:0 5px;
    font-size:11px;
    font-weight:700;
    letter-spacing:.2px;
    border-radius:4px;           /* pill */
    color:#fff;
    line-height:1;
    border:1px solid rgba(0,0,0,.06);
    box-shadow:0 1px 0 rgba(0,0,0,.04);
    user-select:none;
}
.pop-badge.year{
    background:#707070;
}