/* feed.css - Card del feed contenuti (news ed eventi).
 *
 * Nasce con M14 / Fase 2 (docs/piani/M14-fase2-task.md, Task 1). In Fase 2 l'unico
 * consumatore e' la colonna di anteprima del composer admin (admin/contenuti.php, Task 8);
 * la Fase 3 riusera' le stesse classi per sostituire le card Bootstrap di news.php ed
 * events.php. I nomi delle classi sono quindi un CONTRATTO: chi rende l'HTML
 * (contenutoRenderCard() in includes/render_contenuto.php, Task 3) deve produrre esattamente
 * lo scheletro qui sotto, e chi tocca questo file non deve rinominare nulla senza aggiornare
 * il PHP che lo genera.
 *
 * ---------------------------------------------------------------------------
 * SCHELETRO HTML ATTESO (quello prodotto da contenutoRenderCard())
 * ---------------------------------------------------------------------------
 *
 *   <article class="feed-card">
 *     <div class="feed-card__header">
 *       <img class="feed-card__avatar" src="/assets/images/logotrasparente.png" alt="">
 *                                                        <- SEMPRE il logo del sito, mai le
 *                                                           iniziali dell'autore: l'intestazione
 *                                                           della card e' la TESTATA (come il
 *                                                           feed di una pagina Facebook), non
 *                                                           il profilo di chi ha scritto.
 *       <div class="feed-card__testata">
 *         <span class="feed-card__testata-nome">DartTime Sport</span>
 *                                                        <- SEMPRE CONTENUTO_TESTATA_NOME, mai
 *                                                           l'autore del post. ⛔ NON rimettere
 *                                                           un LEFT JOIN admin_users per
 *                                                           stampare chi ha scritto: su tutti e
 *                                                           tre gli account reali la colonna
 *                                                           `username` e' un INDIRIZZO EMAIL, e
 *                                                           il feed pubblicherebbe l'email
 *                                                           dell'utente su ogni card. Difetto
 *                                                           corretto in T5 il 2026-09-01, su
 *                                                           decisione dell'utente.
 *                                                           (⚠️ CONTENUTO_AUTORE_DEFAULT, che
 *                                                           vale "Redazione", e' un'altra cosa:
 *                                                           e' il ripiego del contratto per chi
 *                                                           passa `autore_nome` vuoto.)
 *         <span class="feed-card__testata-data">01/01/2026 10:00</span>
 *       </div>
 *     </div>
 *
 *     <h3 class="feed-card__titolo">Titolo del post</h3>  <- opzionale (se il titolo e' vuoto, si omette)
 *
 *     <div class="feed-card__body">Testo gia' formattato lato PHP...…<a
 *          class="feed-card__continua" href="news-detail.php?id=12">Continua a leggere</a></div>
 *                                                        <- i puntini e il "Continua a leggere"
 *                                                           compaiono SOLO se il corpo e' stato
 *                                                           troncato (opzione `tronca`), stanno
 *                                                           DENTRO il body e sono attaccati al
 *                                                           testo senza spazi ne' a capo nel
 *                                                           sorgente (vedi nota 4).
 *                                                           Senza URL di dettaglio (composer
 *                                                           admin, post non ancora salvato) e'
 *                                                           uno <span> con la stessa classe,
 *                                                           NON cliccabile.
 *
 *     <img class="feed-card__photo" src="/assets/images/news/xxx.jpg" alt=""
 *          width="900" height="1125" loading="lazy">
 *                                                        <- SOLO se il post ha una foto E il file
 *                                                           esiste davvero sul disco: senza, il tag
 *                                                           non esiste proprio, nessun placeholder
 *                                                           rotto (vedi nota 3).
 *                                                           width/height sono le dimensioni REALI
 *                                                           del file, misurate con getimagesize():
 *                                                           900x1125 qui e' un esempio, NON una
 *                                                           costante.
 *
 *     <div class="feed-card__event-badges">              <- SOLO per tipo 'evento'
 *       <span class="feed-card__badge">15/03/2026</span>
 *       <span class="feed-card__badge">Circolo Arci, Bergamo</span>
 *       <span class="feed-card__badge">Gratuito</span>
 *     </div>
 *
 *     <a class="feed-card__dettaglio" href="news-detail.php?id=12">Leggi tutto</a>
 *                                                        <- SEMPRE presente, ultimo elemento
 *                                                           della card, FUORI dal body (che ha
 *                                                           white-space: pre-wrap, vedi nota 4).
 *                                                           "Leggi tutto" per le news,
 *                                                           "Dettagli" per gli eventi.
 *                                                           Senza URL di dettaglio (composer
 *                                                           admin) e' uno <span> con la stessa
 *                                                           classe, NON cliccabile — come il
 *                                                           "Continua a leggere".
 *                                                           ⚠️ Sulle card TRONCATE il rimando
 *                                                           al dettaglio compare DUE volte: qui
 *                                                           e in linea dentro il body. E' voluto
 *                                                           (Decisione 4 dell'utente del
 *                                                           2026-09-01: link fisso "a
 *                                                           prescindere dal troncamento").
 *   </article>
 *
 * ---------------------------------------------------------------------------
 * SCHELETRO DELLA PAGINA DEL FEED (news.php ed events.php, M14 / Fase 3, T6)
 * ---------------------------------------------------------------------------
 *
 * Le due pagine pubbliche montano le card dentro un contenitore identificabile,
 * seguito da una sentinella vuota. Sono l'aggancio dello scorrimento infinito di
 * assets/js/feed.js (T7): il data-tipo e' il valore da passare a
 * api/feed-contenuti.php?tipo=..., quindi "news" oppure "eventi" (⚠️ NON il
 * 'news'/'evento' singolare che vuole contenutoRenderCard(): sono due vocabolari
 * diversi di proposito). Chi rinomina l'id qui rinomina anche il JS.
 *
 *   <div id="feed-lista" data-tipo="news">
 *     <article class="feed-card">…</article>   <- le prime 10, rese dal server
 *     …
 *     <p class="feed-vuoto">Nessuna news disponibile al momento.</p>
 *                                              <- SOLO quando non c'e' nessuna
 *                                                 card: al posto della lista, mai
 *                                                 insieme. Stessa classe per il
 *                                                 messaggio di degradazione
 *                                                 quando la lettura dal DB
 *                                                 fallisce (⛔ mai il dettaglio
 *                                                 dell'errore, che va nel log).
 *   </div>
 *   <div id="feed-sentinella"></div>           <- vuota, fuori dalla lista
 *   <nav id="feed-paginazione" class="feed-paginazione">
 *     <a class="feed-paginazione__link" rel="prev" href="news.php?page=1">← Pagina precedente</a>
 *     <a class="feed-paginazione__link" rel="next" href="news.php?page=3">Pagina successiva →</a>
 *   </nav>                                     <- ripiego SENZA JavaScript (Decisione 5
 *                                                 dell'utente del 2026-09-01): link veri,
 *                                                 perche' l'archivio oltre la decima card
 *                                                 resti raggiungibile da chi non esegue JS
 *                                                 e dai motori di ricerca. Ogni link c'e'
 *                                                 solo quando ha senso (niente "precedente"
 *                                                 in prima pagina, niente "successiva" se il
 *                                                 DB ha dato meno righe di quante chieste),
 *                                                 e l'intero <nav> sparisce se non ce n'e'
 *                                                 nessuno. ⛔ MAI "successiva" durante un
 *                                                 errore di lettura: non si sa se ci siano
 *                                                 altre righe.
 *                                                 ⚠️ assets/js/feed.js (T7) lo NASCONDE
 *                                                 appena lo scorrimento infinito parte,
 *                                                 con la proprieta' `hidden` — e per
 *                                                 questo esiste la regola
 *                                                 .feed-paginazione[hidden] piu' sotto,
 *                                                 senza la quale il `display: flex`
 *                                                 vincerebbe. Torna VISIBILE quando una
 *                                                 chiamata dell'endpoint fallisce.
 *
 * Il blocco qui sotto NON e' nell'HTML del server: lo crea assets/js/feed.js (T7)
 * la prima volta che una chiamata a api/feed-contenuti.php fallisce, e lo riusa
 * nascondendolo/rimostrandolo (mai un secondo messaggio).
 * ⚠️ NEL DOM STA FRA #feed-sentinella E IL <nav>, non dopo il <nav>: qui e'
 * stampato in fondo solo perche' e' un blocco aggiunto a runtime. La posizione
 * vera la fissa `insertBefore(messaggio, sentinella.nextSibling)`.
 *
 *   <p class="feed-vuoto feed-errore" role="status">Non è stato possibile caricare
 *      altri contenuti. <button type="button" class="feed-riprova">Riprova</button></p>
 *                                              <- SUBITO DOPO #feed-sentinella, FUORI
 *                                                 da #feed-lista: dentro la lista
 *                                                 falserebbe la regola per cui il JS
 *                                                 NON parte se trova un .feed-vuoto
 *                                                 (lista vuota o INCOMPLETA).
 *                                                 ⛔ Testo generico, mai il dettaglio
 *                                                 dell'errore. Il pulsante rilancia la
 *                                                 STESSA pagina: nessun ritentativo
 *                                                 automatico (decisione dell'utente del
 *                                                 2026-09-03).
 *
 * ⚠️ .feed-vuoto NON e' un alert Bootstrap: decisione dell'utente del 2026-09-01.
 * Le pagine del feed hanno perso le card Bootstrap e i loro <style> in linea, e
 * un riquadro azzurro con l'icona in mezzo a una colonna di card stonerebbe: e'
 * un testo grigio, centrato nella colonna del feed, senza icona.
 *
 * ---------------------------------------------------------------------------
 * NOTE DI PROGETTO (scelte da non dedurre, sono scritte apposta)
 * ---------------------------------------------------------------------------
 *
 * 1. NESSUN FRAMEWORK. Il file e' autosufficiente: non dipende da Bootstrap ne' da
 *    mobile-app.css, perche' deve poter essere caricato anche da pagine pubbliche che
 *    Bootstrap non ce l'hanno. Nessun @import, nessun font esterno: le icone del progetto
 *    (Font Awesome / Bootstrap Icons) arrivano gia' dai CDN caricati nelle pagine.
 *
 * 2. COLORI. Si riusano le variabili di assets/css/mobile-app.css:2-8 quando ci sono
 *    (--app-gold, --app-black, ...), sempre con il valore di riserva nella var():
 *    var(--app-gold, #d4af37). E' lo stesso idioma gia' presente in mobile-app.css:606.
 *    Cosi' la card resta identica anche dove mobile-app.css non viene caricato (admin).
 *
 * 3. FOTO AL RAPPORTO NATURALE (riscritta in M14 / Fase 3, T3).
 *    ⛔ Questa nota diceva "FOTO 4:5" e affermava che tutte le foto salvate dal modulo
 *    immagini sono 1080x1350: dalla Decisione 4 della Fase 3 NON E' PIU' VERO. Il server
 *    non ritaglia piu' le foto di news ed eventi: le rimpicciolisce conservando il rapporto
 *    dell'originale (larghezza max 1080, tetto a 4:5 solo per le immagini piu' alte, mai
 *    ingrandimenti). L'uscita non supera MAI 1080x1350, ma nessuna delle due dimensioni e'
 *    prevedibile: 900x1200 -> 900x1125, 300x300 -> 300x300, 2000x800 -> 1080x432.
 *
 *    Di conseguenza la classe .feed-card__photo (che sta sull'<img> stesso, non su un
 *    contenitore: e' cio' che produce contenutoRenderCard()) NON impone piu' nessun
 *    rapporto: niente aspect-ratio, niente object-fit: cover. La foto si vede intera,
 *    com'e' stata caricata.
 *
 *    ⚠️ max-width: 100% e NON width: 100% — decisione dell'utente del 2026-09-01, presa
 *    sul rilievo del revisore di T3. La card ha 600px di larghezza massima meno 14px di
 *    padding per lato: 572px utili. Con width: 100% una foto piu' STRETTA di 572px
 *    verrebbe stirata a video (una 300x300 a 572x572), disfacendo nel CSS esattamente
 *    il "mai ingrandire" che il modulo immagini rispetta su disco: stessa immagine, piu'
 *    morbida, per nessun guadagno. Con max-width la foto piccola resta della sua misura
 *    e il margin: 0 auto la centra nella colonna. Il prezzo accettato e' una colonna
 *    meno regolare quando compare una foto piccola — caso raro: le grafiche del sito
 *    escono 1080 di larghezza e vengono comunque ridotte.
 *
 *    Lo spazio lo riserva il browser da se', grazie ai width/height ESPLICITI che il PHP
 *    mette sull'<img> leggendoli dal file con getimagesize(). E' MEGLIO di prima: il
 *    calcolo automatico dello spazio da width/height + height:auto funziona anche sui
 *    browser che aspect-ratio non ce l'hanno (Safari < 15, Chrome < 88), dove la vecchia
 *    soluzione degradava.
 *
 *    ⚠️ FOTO ASSENTE DAL DISCO = NESSUN <img>. Se il percorso in DB punta a un file che
 *    non esiste (6 delle 9 news visibili in locale), la getimagesize() fallisce e la foto
 *    si OMETTE: la card esce come post di solo testo, mai un riquadro rotto a piena
 *    larghezza. Regola del PHP, non del CSS, ma sta qui perche' e' parte del contratto.
 *
 * 4. TESTO. .feed-card__body ha white-space: pre-wrap (gli a capo si vedono senza <br>
 *    generati a mano: serve all'anteprima "live" del composer, che scrive con textContent)
 *    e word-break: break-word (un URL lunghissimo incollato non sfonda la card).
 *    ⚠️ CONSEGUENZA per chi genera l'HTML: dentro .feed-card__body NON ci devono essere
 *    spazi ne' a capo fra un tag e l'altro nel sorgente PHP, o si vedono come spazio vero
 *    dentro la card. Vale in particolare per i puntini e il "Continua a leggere", che
 *    vanno attaccati al testo.
 *
 * 5. MOBILE FIRST. Colonna singola, larghezza massima 600px su schermi larghi, angoli
 *    arrotondati solo sopra i 600px (a tutta larghezza sul telefono, come le app di feed).
 */

.feed-card {
  box-sizing: border-box;
  width: 100%;
  max-width: 600px;
  margin: 0 auto 16px;
  padding: 14px;
  background-color: var(--app-white, #ffffff);
  color: var(--app-black, #000000);
  border: 1px solid #e0e0e0;
  border-radius: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  font-size: 0.95rem;
  line-height: 1.45;
}

.feed-card * {
  box-sizing: border-box;
}

/* Intestazione: avatar + nome testata + data */
.feed-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.feed-card__avatar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--app-black, #000000);
  color: var(--app-gold, #d4af37);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  object-fit: cover; /* nel caso l'avatar sia un <img> invece delle iniziali */
}

.feed-card__testata {
  display: flex;
  flex-direction: column;
  min-width: 0; /* consente il troncamento del nome dentro il flex */
}

.feed-card__testata-nome {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--app-black, #000000);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.feed-card__testata-data {
  font-size: 0.78rem;
  color: #6c757d;
}

/* Titolo del post (omesso se vuoto) */
.feed-card__titolo {
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--app-black, #000000);
  word-break: break-word;
}

/* Corpo: testo libero, a capo rispettati */
.feed-card__body {
  margin: 0 0 12px;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  color: var(--app-dark-gray, #333333);
}

.feed-card__body:last-child {
  margin-bottom: 0;
}

.feed-card__body a {
  color: var(--app-gold, #d4af37);
  text-decoration: underline;
}

/* "Continua a leggere" del corpo troncato. Stessa resa da <a> e da <span>: cambiano
   solo il puntatore e la sottolineatura, perche' lo <span> del composer NON e' un link
   e non deve fingere di esserlo. Vedi Decisione 1 della Fase 3.
   ⚠️ COLORE: dal T9 della Fase 3 e' #1a1a1a, lo SCURO del pulsante di dettaglio, per
   decisione dell'utente (2026-09-03) — non piu' l'oro `--app-gold`, e non il rosso
   #e74c3c della prima stesura di T9, rientrata in giornata insieme al pulsante rosso.
   ⛔ Non prendere qui l'oro #cbb74c del pulsante: quell'oro vive SOLO sopra lo sfondo
   scuro (su bianco da' 2,02:1, illeggibile). Cosi' invece siamo a 17,4:1, il punto
   piu' leggibile della card; a distinguerlo come link restano la sottolineatura e il
   peso 600.
   ⛔ Resta un LINK DI TESTO IN LINEA dentro il corpo: NON diventa un pulsante — il
   pulsante e' l'altro rimando, `.feed-card__dettaglio`, ed e' proprio la differenza di
   FORMA (non piu' di colore) a tenerli distinti.
   Su una card troncata compaiono entrambi, ed e' voluto (Decisione 4). */
.feed-card__continua {
  color: #1a1a1a;
  font-weight: 600;
  white-space: nowrap; /* "Continua a leggere" non si spezza su due righe */
}

a.feed-card__continua {
  text-decoration: underline;
  cursor: pointer;
}

span.feed-card__continua {
  text-decoration: none;
  cursor: default;
}

/* Foto del post: rapporto NATURALE, nessun ritaglio. Vedi nota 3 in testa al file.
   Lo spazio lo riserva il browser dai width/height espliciti sull'<img>. */
.feed-card__photo {
  display: block;
  /* `max-width` e NON `width`: una foto piu' stretta della card resta della sua
     misura invece di essere stirata. Vedi la nota 3 in testa al file. Il
     `margin: 0 auto` la centra quando non riempie la colonna. */
  max-width: 100%;
  width: auto;
  height: auto;
  background-color: var(--app-gray, #f5f5f5);
  border-radius: 8px;
  margin: 0 auto 12px;
}

/* Badge degli eventi: data, luogo, prezzo */
.feed-card__event-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

.feed-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 4px 10px;
  border-radius: 999px;
  background-color: var(--app-gray, #f5f5f5);
  border: 1px solid var(--app-gold, #d4af37);
  color: var(--app-dark-gray, #333333);
  font-size: 0.78rem;
  line-height: 1.3;
  /* Niente text-overflow: ellipsis qui. Su un inline-flex non ha effetto (i tre
     puntini valgono per i contenitori di blocco), quindi un badge "luogo" lungo
     verrebbe tagliato di netto senza segnalarlo. Si lascia invece andare a capo:
     meglio un badge su due righe che un indirizzo mozzato. */
  overflow-wrap: break-word;
}

.feed-card__badge i {
  color: var(--app-gold, #d4af37);
}

/* Rimando FISSO al dettaglio, ultimo elemento della card ("Leggi tutto" per le news,
   "Dettagli" per gli eventi). Decisione 4 dell'utente del 2026-09-01: c'e' SEMPRE, a
   prescindere dal troncamento — il "Continua a leggere" compare solo sulle card
   troncate, e sui dati reali non ne esisteva nessuna (descrizione piu' lunga: 189
   caratteri, soglia 200), quindi dal feed non si apriva piu' nessun dettaglio.
   ⚠️ E' un elemento di BLOCCO, staccato dal testo: e' l'azione della card, e va
   distinto a vista dal "Continua a leggere", che invece e' testo in linea dentro il
   corpo. Sulle card troncate compaiono entrambi, ed e' voluto.

   ── ASPETTO, deciso dall'utente il 2026-09-03 (T9 della Fase 3) ──
   E' un PULSANTE SCURO a TUTTA LARGHEZZA della card, col testo centrato:
   sfondo #1a1a1a, bordo #1a1a1a, testo #cbb74c (oro).
   ⚠️ REVISIONE DEL 2026-09-03: la prima versione era un pulsante ROSSO #e74c3c con
   testo bianco. L'utente l'ha cambiata nella stessa giornata. ⛔ Non reintrodurre il
   rosso: nel progetto non e' piu' usato da nessuna parte del feed.
   ⚠️ #cbb74c e' l'oro DECISO DALL'UTENTE per questo pulsante e NON e' `--app-gold`
   (#d4af37, usato altrove nella card): sono due valori diversi di proposito, non un
   refuso da "uniformare".

   CONTRASTO (calcolato, non stimato): #cbb74c su #1a1a1a da' **8,63:1**, che passa AA
   (4,5:1) e anche AAA (7:1) per il testo NORMALE. Il pulsante e' quindi a posto a
   qualunque corpo — ⚠️ a differenza della versione rossa, dove 1.2rem/700 erano
   OBBLIGATORI per stare dentro la soglia del "testo grande". Oggi `1.2rem`/`700`
   restano per scelta grafica (il pulsante e' l'azione della card), non per necessita'
   di accessibilita': chi li ritocca non rompe piu' nessun requisito.
   ⛔ Quello che NON si puo' fare e' mettere #cbb74c su BIANCO: da' 2,02:1, illeggibile.
   L'oro vive solo sopra lo sfondo scuro.
   ⚠️ Niente `width: 100%`: e' un elemento di blocco, la riga la occupa gia' tutta, e
   con `box-sizing: border-box` (regola `.feed-card *`) il padding sta dentro la card
   senza produrre scorrimento orizzontale sugli schermi stretti.

   ⚠️ <a> e <span> qui NON si rendono allo stesso modo, ed e' il punto:
   `.feed-card__dettaglio` e' nel contratto CONDIVISO — le card di news.php e
   events.php, quelle dello scorrimento infinito e l'ANTEPRIMA DEL COMPOSER ADMIN,
   dove render_contenuto.php rende uno <span> perche' il post non ha ancora un id.
   Un pulsante pieno che non si puo' premere sarebbe una bugia a video: l'<a> e' il
   pulsante PIENO (scuro con testo oro), lo <span> lo stesso pulsante IN CONTORNO
   (sfondo trasparente, bordo e testo #1a1a1a, `cursor: default`), che conserva
   ingombro e allineamento senza fingersi azionabile.
   ⛔ Il testo del contorno e' #1a1a1a e NON l'oro: su fondo chiaro l'oro darebbe
   2,02:1. Cosi' invece da' 17,4:1. */
.feed-card__dettaglio {
  display: block;
  margin-top: 12px;
  padding: 10px 14px;
  border: 1px solid #1a1a1a;
  border-radius: 8px;
  background-color: transparent;
  color: #1a1a1a;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
}

/* Pulsante PIENO: e' un link vero, si puo' premere. */
a.feed-card__dettaglio {
  background-color: #1a1a1a;
  color: #cbb74c;
  text-decoration: none;
  cursor: pointer;
}

/* Pulsante IN CONTORNO: l'anteprima del composer, dove NON e' un link. */
span.feed-card__dettaglio {
  text-decoration: none;
  cursor: default;
}

/* Da tablet in su la card smette di essere a tutta larghezza e prende gli angoli tondi */
@media (min-width: 600px) {
  .feed-card {
    border-radius: 10px;
  }
}

/* Stato vuoto del feed: nessun contenuto visibile, oppure lettura del DB fallita.
   Testo discreto, non un alert Bootstrap (vedi lo scheletro della pagina in testa
   al file). Stessa larghezza massima della card, cosi' resta incolonnato con lei
   anche sugli schermi larghi. */
.feed-vuoto {
  box-sizing: border-box;
  width: 100%;
  max-width: 600px;
  margin: 24px auto;
  padding: 0 14px;
  color: #6c757d;
  font-size: 0.95rem;
  line-height: 1.45;
  text-align: center;
}

/* Ripiego paginato senza JavaScript (Decisione 5 dell'utente del 2026-09-01).
   Link VERI, cosi' l'archivio oltre la decima card resta raggiungibile da chi non
   esegue JS e dai motori di ricerca — che sono la ragione con cui il piano
   giustifica la resa lato server.
   ⚠️ T7 deve NASCONDERE #feed-paginazione quando lo scorrimento infinito parte:
   e' l'unico punto in cui le due strategie si sovrappongono. */
.feed-paginazione {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  max-width: 600px;
  margin: 8px auto 24px;
  padding: 0 14px;
}

.feed-paginazione__link {
  color: var(--app-gold, #d4af37);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: underline;
}

/* Con un solo link (prima o ultima pagina) `space-between` lo lascerebbe a
   sinistra: su "successiva" da solo lo si spinge a destra, dove il lettore lo
   cerca. */
/* 🔴 SERVE DAVVERO, non e' ridondante: la regola `[hidden] { display: none }` del
   browser sta nel foglio di stile di default e ha la specificita' piu' bassa, quindi
   il `display: flex` qui sopra la VINCE. Senza questa riga, il `hidden = true` che
   assets/js/feed.js mette su #feed-paginazione quando lo scorrimento infinito parte
   non nasconderebbe assolutamente nulla. */
.feed-paginazione[hidden] {
  display: none;
}

.feed-paginazione__link[rel="next"]:only-child {
  margin-left: auto;
}

/* Messaggio di errore dello scorrimento infinito, creato da assets/js/feed.js
   (M14 / Fase 3, T7) SUBITO DOPO #feed-sentinella, mai dentro #feed-lista.
   Eredita tutto da .feed-vuoto (testo grigio, centrato, max 600px): non serve
   ridichiarare nulla. ⛔ Niente alert Bootstrap, come per .feed-vuoto
   (decisione dell'utente del 2026-09-01).
   🔴 ⛔ NON rimettere qui un `display: block`: e' inutile (un <p> e' gia' di
   blocco) e soprattutto DANNOSO. Una dichiarazione `display` d'autore vince
   sulla regola `[hidden] { display: none }` del foglio di stile del browser —
   la stessa trappola documentata sopra su .feed-paginazione — e il
   `messaggio.hidden = true` con cui feed.js nasconde questo blocco quando il
   lettore preme «Riprova» non nasconderebbe niente: il messaggio d'errore
   resterebbe a video anche dopo un tentativo RIUSCITO. Difetto trovato e
   corretto dall'orchestratore il 2026-09-03, prima della revisione. */
.feed-errore[hidden] {
  display: none;
}

/* «Riprova»: un pulsante VERO (per la tastiera e per i lettori di schermo), ma
   con l'aspetto di un link discreto — ⛔ non deve sembrare un `btn` Bootstrap in
   mezzo a una colonna di card. */
.feed-riprova {
  padding: 0;
  border: 0;
  background: none;
  color: var(--app-gold, #d4af37);
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}