/* ---- Home: pannello laterale delle news ---------------------------------
   Il pannello c'è solo per l'utente loggato (index.js), resta nascosto
   (attributo hidden) se non ci sono news e si vede solo con la finestra
   più larga di 1000px. Resta fermo mentre la pagina scorre. */
.home-layout {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.home-main {
    flex: 1;
    min-width: 0;
}

.news-panel {
    display: none;
}

@media (min-width: 1001px) {
    .news-panel:not([hidden]) {
        display: block;
        /* almeno 40rem, poi prende tutto lo spazio lasciato libero dalle card */
        flex: 1 1 40rem;
        min-width: 40rem;
        position: sticky;
        top: calc(var(--topbar-h) + 2rem);
        max-height: calc(100dvh - var(--topbar-h) - 4rem);
        overflow-y: auto;
        box-sizing: border-box;
        /* bordo esterno come le card (.cornice) */
        background-color: #ffffff80;
        border: 1px solid #00000015;
        border-radius: 0.5rem;
        box-shadow: 0px 0px 0.5rem #00000020;
        backdrop-filter: blur(2px);
    }

    /* con il pannello visibile: card al massimo su due colonne (anche con poco
       spazio, minimo 45rem l'una) e larghe al massimo due card da 75rem;
       il resto dello spazio va alle news */
    .home-layout:has(.news-panel:not([hidden])) .home-main {
        flex: 0 1 151.5rem;
    }

    .home-layout:has(.news-panel:not([hidden])) .grid-container {
        grid-template-columns: repeat(auto-fit, minmax(max(45rem, calc((100% - 1.5rem) / 2)), 1fr));
    }
}

/* cornice interna come le card (.cornice-int + .cornice-int2), senza le regole
   delle card che metterebbero il contenuto in riga e troncherebbero i titoli */
.news-int {
    border-radius: 4px;
    border: 0.7rem solid #ffffff5a;
    background: linear-gradient(to bottom, #00000003, #00000008);
    padding: 1.2rem;
    box-shadow: 0px 0px 0.5rem #00000020;
}

.news-header {
    font-size: 2.2rem;
    margin-bottom: 1rem;
    padding: 0 0.8rem;
    /* icona e titolo a sinistra, (filtri e) pulsante di aggiornamento a destra */
    display: flex;
    align-items: center;
    gap: 0.8rem;
    /* i filtri della home si mostrano in base alla larghezza dell'intestazione, non della finestra */
    container-type: inline-size;
}

/* ---- Home: filtri nell'intestazione del pannello news (rssLib.getHtml(news, true)) ----
   Visibili solo se c'è spazio: sotto 58rem sparisce la ricerca, sotto 39rem anche la combo */
.news-filters {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.news-filters .news-filter-tags {
    min-width: 14rem;
}

/* bordo: classe "secondary" (css/main.css), come il pulsante di aggiornamento */
.news-header .news-filter-search {
    width: 18rem;
    font-size: 1.6rem;
}

@container (max-width: 58rem) {
    .news-filter-search {
        display: none;
    }
}

@container (max-width: 39rem) {
    .news-filters {
        display: none;
    }
}

.news-icon {
    width: 2.6rem;
    height: 2.6rem;
}

.news-title {
    flex: 1;
    white-space: nowrap;
}

/* il pulsante usa lo stile dei pulsanti secondari (.iconToolbar.secondary, come nelle rose) */
.news-refresh:disabled {
    cursor: wait;
}

/* durante l'aggiornamento l'icona gira */
.news-refresh.loading img {
    animation: newsSpin 0.8s linear infinite;
}

@keyframes newsSpin {
    to {
        transform: rotate(360deg);
    }
}

.news-empty {
    padding: 1rem 0.8rem;
    font-size: 1.6rem;
    color: #00000080;
}

.news-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.news-item {
    padding: 5px 0px;
    border-top: 1px solid var(--border-color-main2);
    /* le news compaiono una dopo l'altra, dalla prima all'ultima
       (--i = posizione, impostata in rss-news.js) */
    opacity: 0;
    animation: newsIn 0.1s ease-out forwards;
    animation-delay: calc(var(--i, 0) * 0.05s);
}

@keyframes newsIn {
    from {
        opacity: 0;
        transform: translateY(0.8rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* chi ha chiesto al sistema di ridurre le animazioni vede le news subito */
@media (prefers-reduced-motion: reduce) {
    .news-item {
        opacity: 1;
        animation: none;
    }
}

/* riga della news: al passaggio del mouse si colora come le card (.cornice.visible:hover) */
.news-row {
    display: block;
    padding: 1rem 0.8rem;
    border-radius: 0.4rem;
    color: #000000;
    text-decoration: none;
    transition: background-color .1s ease;
    border: 1px solid transparent;
}

a.news-row:hover {
    background-color: #4ab67890;
    border: 1px solid #02920e80;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
}

.news-link {
    font-size: 1.7rem;
}

/* prima riga della news: tag a sinistra, fonte a destra */
.news-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.4rem;
}

/* un box per ogni tag; se non stanno in una riga vanno a capo */
.news-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    min-width: 0;
}

.news-source {
    font-size: 1.4rem;
    color: #00000080;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.news-tag {
    flex: none;
    /* larghezza fissa, pari al tag più lungo ("Fantacalcio"): tutti i box uguali */
    box-sizing: content-box;
    width: 11ch;
    text-align: center;
    white-space: nowrap;
    font-size: 1.2rem;
    padding: 0.3rem 0.6rem;
    border-radius: 0.2rem;
    color: #ffffff;
    background-color: #707070C0;
}

/* un colore per tipo di news */
.news-tag-infortuni {
    --tag-color: #d9534fC0;
    background-color: var(--tag-color);
}

.news-tag-risultati {
    --tag-color: #3a9d5dC0;
    background-color: var(--tag-color);
}

.news-tag-squalifiche {
    --tag-color: #e08a1eC0;
    background-color: var(--tag-color);
}

.news-tag-formazioni {
    --tag-color: #2f78c4C0;
    background-color: var(--tag-color);
}

.news-tag-mercato {
    --tag-color: #8a5cc2C0;
    background-color: var(--tag-color);
}

.news-tag-fantacalcio {
    --tag-color: #1f9c9cC0;
    background-color: var(--tag-color);
}

/* combo e pannello delle tipologie (pulsante, pannello, voci): css/menu.css */

/* ---- Pagina rss-news.html: la cornice occupa lo spazio verticale disponibile ----
   Altezza = finestra - barra in alto - margini di .maincontent (2rem sopra, 1rem sotto).
   Ogni contenitore interno passa lo spazio al successivo (flex + min-height: 0):
   l'intestazione resta ferma e scorre solo la lista delle news (#newsList).
   100dvh segue il resize e, su mobile, la comparsa/scomparsa della barra del browser. */
.cornice.news-page {
    box-sizing: border-box;
    height: calc(100dvh - var(--topbar-h) - 3rem);
    /* con pochissimo spazio (telefono in orizzontale) non si schiaccia: scorre la pagina */
    min-height: 30rem;
}

.news-page .cornice-int,
.news-page .cornice-int2,
.news-page #divtb {
    flex: 1;
    min-height: 0;
    height: auto;
    display: flex;
    flex-direction: column;
}

.news-page .news-header {
    flex: none;
}

.news-page #newsList {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ---- Pulsante di revisione news (rss-news.html, solo amministratori) ---- */
.review-btn {
    position: relative;
    justify-content: center;
}

/* numero di titoli da verificare, in alto a destra del pulsante */
.review-badge {
    position: absolute;
    top: -0.7rem;
    right: -0.7rem;
    min-width: 1.8rem;
    height: 1.8rem;
    padding: 0 0.4rem;
    box-sizing: border-box;
    border-radius: 0.9rem;
    background-color: #d9534f;
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 1.8rem;
    text-align: center;
    pointer-events: none;
}

/* .iconToolbar imposta display: senza questa regola l'attributo hidden non nasconderebbe il pulsante */
.review-btn[hidden] {
    display: none;
}