/* ============================================================
   Mood Landing - Ultime Novita come BANNER (niente card)
   + Modale Mood con contenuto post + embed link stile feed.
   File esterno dedicato (nessun CSS inline).
   ============================================================ */
.news-banner-wrap { position: relative; }

.news-banner {
    position: relative;
    overflow: hidden;
    height: 250px;
    border-radius: 16px;
    border: 1px solid var(--mood-border);
    background: var(--mood-bg-card);
    box-shadow: var(--mood-shadow);
}

.news-banner-track {
    display: flex;
    height: 100%;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.news-banner-slide {
    position: relative;
    flex: 0 0 100%;
    min-width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: pointer;
}

.news-banner-media,
.news-banner-media img,
.news-banner-media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-banner-no-media {
    background: linear-gradient(135deg, #6C5CE7 0%, #3E2AB3 45%, #15152A 100%);
}

.news-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(13, 13, 26, 0.05) 0%, rgba(13, 13, 26, 0.2) 42%, rgba(13, 13, 26, 0.86) 100%);
}

.news-banner-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    display: inline-block;
    background: rgba(108, 92, 231, 0.92);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
}

.news-banner-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 0 16px 16px;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.news-banner-author {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    text-shadow: none;
}

.news-banner-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    display: inline-block;
    border: 1px solid rgba(255, 255, 255, 0.35);
}

/* IL POSTO DELL'AVATAR IN VIDEO (01/10/2026): la copertina ferma sta sotto, il video (UNO SOLO per
   tutta la bacheca, vedi news-banner.js) si posa sopra. Il posto ha la misura dell'avatar, cosi' la
   riga dell'autore non si muove di un pixel quando il video arriva e la copertina si nasconde. */
.news-banner-avatar-slot {
    position: relative;
    display: inline-block;
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    vertical-align: middle;
}
.news-banner-avatar-slot > .news-banner-avatar {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.news-banner-author-name { font-weight: 700; }
.news-banner-time { opacity: 0.8; }

.news-banner-text {
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 8px;
}

.news-banner-link-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    color: #fff;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    padding: 3px 10px;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.news-banner-link-chip svg { width: 12px; height: 12px; flex-shrink: 0; }
.news-banner-link-chip span { overflow: hidden; text-overflow: ellipsis; }

.news-banner-cta {
    margin-top: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    opacity: 0.92;
}
.news-banner-cta svg { width: 14px; height: 14px; }

/* Frecce + dots */
.news-banner-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(13, 13, 26, 0.45);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}
.news-banner-arrow:hover { background: var(--mood-primary); }
.news-banner-arrow svg { width: 18px; height: 18px; }
.news-banner-arrow.prev { left: 10px; }
.news-banner-arrow.next { right: 10px; }

.news-banner-dots {
    position: absolute;
    bottom: 12px;
    right: 14px;
    z-index: 3;
    display: flex;
    gap: 6px;
}
.news-banner-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 999px;
    border: 0;
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: width 0.25s, background 0.2s;
}
.news-banner-dots button.is-active {
    width: 18px;
    background: #fff;
}

/* ===== Modale Mood (banner -> contenuto post) ===== */
.news-modal {
    position: fixed;
    inset: 0;
    z-index: 950;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(13, 13, 26, 0.72);
    padding: 16px;
}
.news-modal.hidden { display: none; }

.news-modal-box {
    width: 100%;
    max-width: 520px;
    max-height: 86vh;
    overflow-y: auto;
    background: var(--mood-bg-card);
    color: var(--mood-text);
    border: 1px solid var(--mood-border);
    border-radius: 18px;
    box-shadow: var(--mood-shadow);
}

.news-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--mood-border);
    position: sticky;
    top: 0;
    background: var(--mood-bg-card);
    z-index: 2;
}

.news-modal-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.news-modal-who {flex: 1;min-width: 0;text-align: left;}
.news-modal-name {
    font-weight: 700;
    margin: 0;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 6px;
}
.news-modal-name svg { width: 15px; height: 15px; color: var(--mood-primary); }
/* Il badge "verificato" ora e' l'immagine /assets/icons/certificato.svg: porta i suoi colori. */
.news-modal-name img.cert-badge { width: 15px; height: 15px; }
.news-modal-meta { font-size: 0.75rem; color: var(--mood-text-muted); }

.news-modal-close {
    background: transparent;
    border: 0;
    color: var(--mood-text-muted);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 8px;
}
.news-modal-close:hover { color: var(--mood-text); background: var(--mood-bg-hover); }

/* IL MODALE NON E' LA LANDING (01/10/2026, misurato). La pagina centra TUTTO (`html.mood-landing`,
   `text-align: center`: il logo, la spiegazione, il modulo di accesso). La scheda del post viene
   dall'app e no: li' si legge una riga alla volta. Senza `text-align: left` qui, misurato, il testo del
   post e le VOCI DI UN ELENCO venivano centrati (il pallino al centro della riga: non un elenco) e la
   card dell'anteprima del link pure. Le voci del modale tengono il loro `text-align: right`
   (`.news-modal-actions`: una regola diretta vince sempre sul valore ereditato, anche scritta dopo). */
.news-modal-body { padding: 14px 16px 18px; text-align: left; }

.news-modal-media { margin: 0 0 14px; }
.news-modal-media img,
.news-modal-media video {
    width: 100%;
    max-height: 320px;
    object-fit: contain;
    border-radius: 12px;
    background: #000;
    display: block;
}

.news-modal-text {
    font-size: 0.98rem;
    line-height: 1.55;
    color: var(--mood-text);
    overflow-wrap: anywhere;
}
.news-modal-text a { color: var(--mood-primary); }

/* Embed link stile feed (og image/title/desc) */
.news-embed-card {
    margin: 4px 0 14px;
    border: 1px solid var(--mood-border);
    border-radius: 14px;
    overflow: hidden;
    background: var(--mood-bg);
}
.news-embed-cover img { width: 100%; max-height: 190px; object-fit: cover; display: block; }
.news-embed-body { padding: 10px 12px; }
.news-embed-title { font-weight: 700; font-size: 0.95rem; margin: 0 0 4px; }
.news-embed-desc {
    font-size: 0.84rem;
    color: var(--mood-text-muted);
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-embed-domain {
    font-size: 0.75rem;
    color: var(--mood-text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
    overflow-wrap: anywhere;
}
.news-embed-domain svg { width: 13px; height: 13px; flex-shrink: 0; }

.news-embed-fallback {
    margin: 4px 0 14px;
    padding: 12px 14px;
    border: 1px dashed var(--mood-border);
    border-radius: 12px;
    font-size: 0.85rem;
    color: var(--mood-text-muted);
    display: flex;
    align-items: center;
    gap: 10px;
    overflow-wrap: anywhere;
}
.news-embed-fallback a { color: var(--mood-primary); flex: 1; }

.news-modal-actions {
    margin-top: 14px;
    text-align: right;
}
.news-modal-actions .btn { text-decoration: none; }

/* ============================================================
   IL MARKDOWN NEL MODALE DELLE NOVITA' (01/10/2026)

   IL TITOLARE, davanti a questo riquadro:
       <div id="newsModalText" class="news-modal-text">Condividi le tue idee su mood
       [Mood. Join the network](https://mood.lsnn.net/)</div>
   «markdown principali non sono attivi». Il testo c'era, i segni si leggevano: il modale rendeva il corpo
   con una copia locale di `linkify` (`news-banner.js`), che conosce solo gli indirizzi. Adesso il modale
   passa da `MoodTesto.rendi` (una strada sola, come la chat e il corpo dei post) e qui c'e' la veste delle
   sue classi. SENZA QUESTE REGOLE IL MARKDOWN SI VEDREBBE MALE: un titolo a misura di pagina, una tabella
   senza righe, un blocco di codice che esce dal riquadro.

   LE MISURE SONO QUELLE DI UN LETTORE (il modale si legge), un po' piu' strette di quelle di un post
   (`mood.css`): il riquadro e' alto poco e sul telefono sta dentro lo schermo. La tabella scorre DENTRO il
   suo riquadro (`.chat-md-tabella-scorri`) invece di allargare la pagina. */
.news-modal-text .chat-md-titolo {
    font-weight: 700;
    line-height: 1.25;
    margin: 16px 0 6px;
}
.news-modal-text > .chat-md-titolo:first-child { margin-top: 0; }
.news-modal-text .chat-md-titolo-1 { font-size: 1.3em; }
.news-modal-text .chat-md-titolo-2 { font-size: 1.2em; }
.news-modal-text .chat-md-titolo-3 { font-size: 1.08em; }
.news-modal-text .chat-md-titolo-4,
.news-modal-text .chat-md-titolo-5,
.news-modal-text .chat-md-titolo-6 { font-size: 1em; opacity: 0.92; }

.news-modal-text .chat-md-lista { margin: 8px 0; padding-left: 22px; }
.news-modal-text .chat-md-lista li { margin: 2px 0; }

.news-modal-text .chat-md-cita {
    display: block;
    margin: 10px 0;
    padding: 6px 12px;
    border-left: 3px solid var(--mood-primary);
    border-radius: 0 8px 8px 0;
    background: rgba(127, 127, 127, 0.08);
    font-style: italic;
}

.news-modal-text .chat-md-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    padding: 1px 6px;
    border-radius: 7px;
    background: rgba(127, 127, 127, 0.16);
}

/* Il sottolineato (`++testo++`, 01/10/2026): il `<u>` che rende `mood-testo.js`, staccato dalle lettere. */
.news-modal-text .chat-md-sottolineato {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.news-modal-text .chat-md-pre {
    margin: 10px 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(127, 127, 127, 0.14);
    overflow-x: auto;
    max-width: 100%;
}
.news-modal-text .chat-md-pre code.chat-md-blocco {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    white-space: pre;
}

.news-modal-text .chat-md-tabella-scorri { margin: 10px 0; max-width: 100%; overflow-x: auto; }
.news-modal-text .chat-md-tabella { border-collapse: collapse; font-size: 0.95em; width: auto; }
.news-modal-text .chat-md-tabella th,
.news-modal-text .chat-md-tabella td {
    border: 1px solid var(--mood-border);
    padding: 6px 10px;
    text-align: left;
    vertical-align: top;
}
.news-modal-text .chat-md-tabella th { font-weight: 700; background: rgba(127, 127, 127, 0.08); }
.news-modal-text .chat-md-tabella .chat-md-cx { text-align: center; }
.news-modal-text .chat-md-tabella .chat-md-dx { text-align: right; }

/* IL COLLEGAMENTO SCRITTO A MANO SI DEVE VEDERE COME UN COLLEGAMENTO. Nel sito i collegamenti non sono
   sottolineati, e senza questa riga `[Mood. Join the network](https://mood.lsnn.net/)` sarebbe una scritta
   colorata: e' la strada del corpo dei post (`a.chat-md-link` in `mood.css`). Le etichette e le menzioni
   restano come sono sempre state. */
.news-modal-text a.chat-md-link {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    word-break: break-word;
}

@media (max-width: 620px) {
    .news-banner { height: 210px; }
    .news-banner-text { font-size: 0.95rem; }
}