/* ============================================================
   annuncio.css — CCF Balduina
   Box "Annuncio" — solo homepage (core/index.html). Compare ad ogni visita
   della homepage finché è entro la finestra di "Durata (giorni)" impostata
   in admin — vedi Annuncio.get_attivo() in apps/core/models.py per il
   calcolo della scadenza.

   Due comportamenti DIVERSI sopra/sotto 768px (vedi annuncio.js):
   - Desktop (>768px, sezione BOX qui sotto): il box scorre da sinistra
     dopo il ritardo impostato in admin, si chiude con la X o da solo dopo
     la durata. INVARIATO rispetto a prima di questa modifica.
   - Mobile/tablet (<=768px, sezione PILLOLA + RESPONSIVE più sotto): al
     posto del box che scorre, una pillola circolare compare in basso a
     destra; il tap la espande nella stessa card (ancorata basso-destra
     invece che scorrere da sinistra), un secondo tap/la X la ricollassa.
   ============================================================ */


/* === BOX === */
.annuncio-box {
    position: fixed;                              /* Non si stacca mai dal bordo, anche scrollando */
    left: 0;
    top: 50%;
    z-index: 400;                                  /* Sopra il contenuto normale, sotto il lightbox (500) */
    width: 320px;
    max-width: calc(100vw - 12px);                 /* Mai più largo dello schermo su viewport minuscoli */
    max-height: calc(100vh - var(--space-lg));
    overflow-y: auto;
    background-color: var(--color-annuncio-bg);    /* Arancione a bassa opacità — vedi global.css */
    color: var(--color-dark);                      /* Testo scuro — leggibile a prescindere dall'opacità dello sfondo */
    border: 3px solid var(--color-annuncio-border); /* Blu royal — staccato apposta dalla palette calda del sito */
    border-left: none;                              /* Il lato che tocca il bordo schermo non ha bordo visibile */
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0; /* Arrotondato solo sul lato destro (alto e basso) */
    padding: var(--space-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
    backdrop-filter: blur(3px);                     /* Aiuta la leggibilità sopra sfondi impegnativi, essendo lo sfondo trasparente */
    /* Riposa fuori schermo a sinistra; .annuncio-box--visible lo fa scorrere dentro */
    transform: translateY(-50%) translateX(-110%);
    transition: transform .5s ease-out;
}

.annuncio-box--visible {
    transform: translateY(-50%) translateX(0);
}

.annuncio-box__close {
    position: absolute;
    top: var(--space-xs);
    right: var(--space-xs);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--color-dark);                       /* Stessa leggibilità del resto del testo del box */
    font-size: var(--text-xl);
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
}

.annuncio-box__close:hover {
    background-color: rgba(0, 0, 0, .08);
}

.annuncio-box__image {
    display: block;
    width: 100%;
    height: 220px;            /* Tetto massimo — una foto verticale non allunga il box a dismisura */
    object-fit: contain;      /* Mai ritagliata, mai deformata — riempie lo spazio disponibile senza tagliare nulla */
    border-radius: var(--radius);
    margin-bottom: var(--space-sm);
}

.annuncio-box__title {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    text-align: center;
    margin: 0 0 var(--space-xs);
    /* Padding SIMMETRICO (non solo a destra) — con solo padding-right il
       testo restava protetto dalla X di chiusura, ma text-align:center lo
       centrava in un'area più stretta sul lato destro, spostandolo
       visivamente a sinistra rispetto all'immagine sopra (che occupa tutta
       la larghezza del box). Con lo stesso padding su entrambi i lati il
       centro del testo torna ad allinearsi al centro reale del box. */
    padding: 0 var(--space-lg);
}

.annuncio-box__text {
    font-size: var(--text-sm);
    line-height: 1.5;
    text-align: center;
    margin: 0;
}

.annuncio-box__text p {
    margin: 0 0 var(--space-xs);
}

.annuncio-box__cta {
    margin-top: var(--space-sm);
    width: 100%;
    justify-content: center;
}


/* === PILLOLA (solo mobile/tablet — nascosta sopra 768px) === */
.annuncio-pillola {
    display: none;   /* sopra i 768px non esiste, è il box a scorrere da sinistra */
}


/* === RESPONSIVE — MOBILE/TABLET (max-width: 768px) ===
   Sotto questa soglia il box NON scorre più da sinistra: diventa la card
   che si espande dalla pillola, ancorata in basso a destra. Tutte le
   regole desktop del box (position:fixed;left:0;top:50%;transform con
   translateX, transizione, .annuncio-box--visible) restano scritte più in
   alto per gli schermi >768px — qui le sovrascriviamo per intero invece di
   fare piccoli aggiustamenti, sono due presentazioni davvero diverse. */
@media (max-width: 768px) {

    .annuncio-pillola {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        /* 16px di margine di sicurezza dai bordi + le safe-area dei
           dispositivi con notch/home indicator (richiede
           viewport-fit=cover nel meta viewport — vedi templates/base.html;
           il fallback "0px" dopo la virgola è per i browser che non
           supportano env(), che allora si comportano come se fosse 0). */
        right: calc(16px + env(safe-area-inset-right, 0px));
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        width: 48px;
        height: 48px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
        z-index: 400;
        cursor: pointer;
        /* Comparsa "improvvisa" (scale, non scorrimento) — annuncio.js
           aggiunge --visibile dopo il ritardo impostato in admin. */
        opacity: 0;
        transform: scale(.5);
        transition: transform .2s ease-out, opacity .2s ease-out;
    }

    .annuncio-pillola--visibile {
        opacity: 1;
        transform: scale(1);
    }

    .annuncio-pillola__logo {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;   /* il logo è già circolare, cover evita bordi bianchi residui */
    }

    .annuncio-pillola__dot {
        position: absolute;
        top: -1px;
        right: -1px;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: var(--color-red);   /* Rosso del brand — indicatore "hai una notifica" */
        border: 2px solid #fff;         /* Lo stacca dal logo sotto, altrimenti si confonde ai bordi */
    }

    /* Anello che pulsa — stesso pattern del badge di notifica di WhatsApp/
       Messenger: un cerchio che si espande e sfuma, in loop, attorno alla
       pillola. Pseudo-elemento invece di markup extra — .annuncio-pillola
       è già position:fixed, quindi è già un riferimento valido per
       "inset" qui sotto, non serve altro. Tolta via JS (classe --pulse
       rimossa) dopo ~3-4 cicli dalla comparsa: il pallino rosso resta
       comunque visibile e fisso, come richiesto. */
    .annuncio-pillola--pulse::before {
        content: '';
        position: absolute;
        inset: -6px;
        border-radius: 50%;
        border: 2px solid var(--color-red);
        animation: annuncio-pulse 1.5s ease-out infinite;
    }

    /* === Box — su mobile/tablet è la card che si espande dalla pillola ===
       Deve restare una card COMPATTA ancorata in basso a destra, mai un
       popup che occupa quasi lo schermo — vincoli voluti esplicitamente:
       max-width ~300-320px E MAI oltre l'85% della larghezza schermo,
       max-height ~70% dell'altezza schermo, margine di almeno 16-20px dai
       bordi in ogni caso. */
    .annuncio-box {
        /* Sovrascrive per intero il posizionamento desktop (left:0;
           top:50%) — qui ancorata in basso a destra, stesso angolo della
           pillola da cui "nasce". */
        left: auto;
        top: auto;
        right: calc(16px + env(safe-area-inset-right, 0px));
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        /* min() tra un tetto fisso (320px) e l'85% della larghezza reale
           (85vw) — su un iPhone piccolo (320px) risulta 272px, su un
           tablet vicino ai 768px resta comunque fissa a 320px (85vw
           sarebbe enorme lì, il tetto fisso vince). Il 15vw rimanente,
           diviso tra i 16px di "right" e il margine sinistro, garantisce
           sempre più dei 16-20px minimi richiesti su ogni larghezza reale
           di telefono/tablet — nessun calc(100vw - Npx) esplicito qui,
           serve solo a schermi ASSURDAMENTE stretti sotto i 320px che
           in pratica non esistono più. */
        width: min(320px, 85vw);
        /* Stesso principio in verticale: tetto fisso (per non diventare
           comunque troppo alta su tablet molto alti) + percentuale
           dell'altezza reale dello schermo. */
        max-height: min(460px, 70vh);
        /* Niente scroll interno per richiesta esplicita — il contenuto è
           comunque già limitato lato server (Annuncio.clean(): titolo max
           60 caratteri, testo max 220, vedi apps/core/models.py), quindi
           un contenuto normale entra nello spazio ridotto qui sotto
           (immagine/font più compatti che su desktop) senza bisogno di
           scorrere. In un caso limite il contenuto in eccesso viene
           tagliato (clip) invece di scorrere o rompere il layout. */
        overflow: hidden;
        padding: var(--space-sm);                 /* meno spazioso del padding desktop (--space-md), la card è più piccola */
        border: 3px solid var(--color-annuncio-border);
        border-radius: var(--radius-lg);          /* tutti e 4 gli angoli, non solo a destra come su desktop */
        transform-origin: bottom right;            /* "nasce" dall'angolo dove sta la pillola */
        /* Riposa invisibile e leggermente rimpicciolita; .annuncio-box--espansa
           (classe DIVERSA da .annuncio-box--visible, quella è solo per il
           comportamento desktop) la porta a piena scala/opacità. */
        transform: scale(.85);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: transform .25s ease-out, opacity .25s ease-out, visibility 0s .25s;
    }

    .annuncio-box.annuncio-box--espansa {
        transform: scale(1);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: transform .25s ease-out, opacity .25s ease-out, visibility 0s;
    }

    /* Immagine/titolo/testo più compatti che su desktop — il tetto di
       altezza (70vh/460px) e la larghezza ridotta (max 320px) lasciano
       molto meno spazio dei 320px larghi e senza limite di altezza del
       box desktop; senza rimpicciolirli qui, un'immagine da 220px di
       altezza da sola userebbe già gran parte del budget verticale. */
    .annuncio-box__image {
        height: 110px;
    }

    .annuncio-box__title {
        font-size: var(--text-base);
        margin-bottom: 4px;
    }

    .annuncio-box__text {
        font-size: var(--text-xs);
        line-height: 1.35;
    }

    .annuncio-box__cta {
        margin-top: var(--space-xs);
    }
}


@keyframes annuncio-pulse {
    0%   { transform: scale(1);   opacity: .7; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* Chi ha chiesto al sistema operativo di ridurre le animazioni non vede
   l'anello pulsare — la pillola resta comunque visibile e cliccabile,
   cambia solo questo effetto decorativo. */
@media (prefers-reduced-motion: reduce) {
    .annuncio-pillola--pulse::before {
        animation: none;
    }
}