/* yj_event_feed.css — card viva dell'evento dentro il feed (Eventi, 15/7/2026)
   Il post di stato che annuncia l'evento viene "vestito" da yj_event_feed.js con
   questa card. Stile coerente con le card della lista (css/yj_eventi.css).
   Dal 28/9/2026 in formato VERTICALE (vedi .yjev_fc_media). */

/* La riga d'azione "Nome ha pubblicato su 📅 Eventi" NON ha CSS proprio: usa
   ESATTAMENTE il pattern nativo del feed. yj_event_feed.js rimpiazza il contenuto
   dell'intestazione del post (.user_wall_info .info .name) col template localizzato,
   come fa il CMS per "ha caricato una foto". Font, dimensioni, grassetti e colori
   sono quindi quelli nativi, senza una sola riga di stile in piu'. */

.yjev_fc{
    /* 28/9/2026 (Alain): la «schedina» degli eventi di Peatix, misurata col browser a
       1920x1080 — 343 px, angoli 6 px, niente ombra. Loro stanno su fondo grigio chiaro;
       i nostri post sono bianchi, quindi al posto del contrasto di fondo un filo di bordo. */
    max-width:344px; border:1px solid #e8e5de; border-radius:6px; overflow:hidden;
    background:#fff; margin:2px 0 4px; position:relative;
}
.yjev_fc_main{
    display:flex; flex-direction:column; align-items:stretch;
    text-decoration:none !important; color:inherit;
}
.yjev_fc_main:hover{ text-decoration:none; }
.yjev_fc_main:hover .yjev_fc_title{ color:#3a6ea5; }

/* 28/9/2026 (Alain): scheda VERTICALE, come le miniature degli eventi su Peatix —
   copertina in alto, forma 2:1 come la loro (una copertina 16:9 perde solo un filo
   in basso), e sotto data, titolo, luogo; larga al massimo 360 px (vedi .yjev_fc). La scheda orizzontale del 17/7 (immagine
   13:10 a sinistra, tagliata in alto a sinistra) sul telefono mozzava la copertina
   a meta' e il titolo a «Conversazio…». Stesso markup nelle tre rese (template,
   yj_event_feed.js, yjEv_feedCardHtml): il cambio e' tutto qui. */
.yjev_fc_media{ position:relative; width:100%; aspect-ratio:2/1; }
/* <img> reale (come le immagini native del feed): riempie il riquadro; una
   copertina non 16:9 si taglia in basso, mai in alto (li' stanno i titoli) */
.yjev_fc_img{
    position:absolute; inset:0; display:block; width:100%; height:100%;
    object-fit:cover; object-position:center top;
    background-color:#f0ede6;
}
.yjev_fc_ph{
    display:flex; align-items:center; justify-content:center; font-size:44px;
    background:linear-gradient(135deg,#5b5750,#2f2c28);
}
/* copertina verticale (locandina): intera (contain) su fondo sfocato di se stessa */
.yjev_fc_bg{
    position:absolute; inset:0;
    background-size:cover; background-position:center;
    filter:blur(16px) brightness(.86); transform:scale(1.16);
}
.yjev_fc_contain{ background-size:contain !important; }
.yjev_fc_badge{
    position:absolute; top:8px; left:8px; z-index:2;
    background:#e0483f; color:#fff; font-size:11px; font-weight:bold;
    padding:3px 9px; border-radius:20px; letter-spacing:.02em;
}
.yjev_fc_badge.yjev_fc_fin{ background:#8a8a8a; }

/* il testo sotto la copertina con le MISURE di Peatix, misurate col browser:
   margine 16 px, 4 px fra le righe, data 12/18, titolo 14/21 #353538 peso 500,
   luogo 12/18 #65646a. Caratteri, data ROSSA e mondino restano i nostri (Alain
   28/9 sera: «il tuo rosso era piu' bello»). Selettori a due classi dove
   yj_tipografia.css (caricato dopo) imporrebbe le misure della scheda grande.
   Al buio i colori li decide yj_dark.css. */
.yjev_fc_body{
    min-width:0; padding:16px;
    display:flex; flex-direction:column; justify-content:flex-start; gap:4px;
}
.yjev_fc .yjev_fc_date{ font-size:12px; line-height:18px; margin:0; }
.yjev_fc .yjev_fc_title{
    font-size:14px; line-height:21px; font-weight:500; color:#353538; letter-spacing:normal;
}
/* la riga del luogo (con la pillola «Partecipo» accanto) scende di 6 px in piu':
   con un titolo di una riga sola, a 4 px stava attaccata al titolo (Alain) */
.yjev_fc .yjev_fc_where{ font-size:12px; line-height:18px; color:#65646a; margin:6px 0 0; }
/* la categoria sta nella pagina dell'evento: la schedina resta pulita come la loro.
   La riga in fondo compare solo se ci sono partecipanti da mostrare. */
.yjev_fc .yjev_fc_chip{ display:none; }
.yjev_fc .yjev_fc_foot{ margin:4px 0 0; font-size:12px; }
.yjev_fc .yjev_fc_foot:not(:has(.yjev_fc_guests:not(.yjev_hide))){ display:none; }
.yjev_fc_date{
    font-size:12px; font-weight:700; color:#c0392b;
    text-transform:uppercase; letter-spacing:.07em; margin-bottom:6px;
}
.yjev_fc_title{
    font-size:18px; font-weight:800; color:#23221f; line-height:1.2; letter-spacing:-.01em;
    overflow:hidden; text-overflow:ellipsis; display:-webkit-box;
    -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.yjev_fc_where{
    font-size:13px; color:#7c7973; margin-top:7px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.yjev_fc_where i{ margin-right:6px; color:#b7b3ab; }
.yjev_fc_foot{
    display:flex; align-items:center; gap:10px; margin-top:10px;
    font-size:12.5px; color:#8a8681;
}
.yjev_fc_chip{
    background:#f4f2ec; border-radius:100px; padding:3px 11px; color:#5c5952; font-weight:600;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:70%;
}
.yjev_fc_guests i{ margin-right:4px; }
.yjev_fc_guests.yjev_hide{ display:none; }

/* 28/9/2026: niente piu' barra sotto la schedina (la faceva 33 px piu' alta di quella
   di Peatix): il pulsante diventa una pillola in basso a destra, sulla riga del luogo.
   Sta FUORI dal link della card (un pulsante dentro un <a> non e' HTML valido), quindi
   si posiziona sopra il corpo; il luogo gli lascia lo spazio solo quando c'e'. */
.yjev_fc .yjev_fc_actions{
    position:absolute; right:12px; bottom:11px; padding:0; border:0; background:none;
}
.yjev_fc:has(.yjev_fc_attend) .yjev_fc_where{ padding-right:124px; }
.yjev_fc .yjev_fc_attend{ padding:4px 14px; font-size:12px; line-height:18px; }

/* AZIONE della card (9/8/2026). Il pulsante stava FUORI dalla riga
   immagine+testo: ricadeva sotto la copertina e sembrava appeso alla foto.
   Ora ha una barra propria, separata da un filo, con l'azione AL CENTRO
   (nata quando la card era orizzontale; resta giusta anche in verticale:
   chiude la scheda come il pulsante delle miniature di Peatix).
   COLORE: 常磐色 (tokiwa-iro), il «verde eterno» dei sempreverdi. Nella
   tradizione giapponese e' il colore della costanza e della quiete — non il
   verde acceso da pulsante che c'era prima (#5cb85c, bootstrap), che urlava.
   Per un appuntamento che torna ogni settimana e' anche il significato giusto. */
.yjev_fc_actions{
    display:flex; justify-content:center; align-items:center;
    padding:7px 12px; border-top:1px solid #f1eee7; background:transparent;
}
.yjev_fc_attend{
    display:inline-block; padding:8px 26px;
    border:1px solid rgba(0,123,67,.34); border-radius:999px; background:transparent;
    color:#007b43 !important; font-size:13px; font-weight:600; line-height:1.25;
    letter-spacing:.01em; cursor:pointer; text-decoration:none !important;
    transition:background-color .14s ease, border-color .14s ease, color .14s ease;
}
.yjev_fc_attend:hover{ background:rgba(0,123,67,.07); border-color:rgba(0,123,67,.6); }
.yjev_fc_attend:focus-visible{ outline:2px solid rgba(0,123,67,.55); outline-offset:2px; }
/* gia' iscritto = fatto assodato: pieno e quieto, non un invito piu' forte */
.yjev_fc_attend.on{ background:#007b43 !important; border-color:#007b43; color:#fff !important; }
.yjev_fc_attend.on:hover{ background:#00693a !important; border-color:#00693a; }
/* per gli ospiti e' solo un invito ad accedere: non deve pesare come un'azione */
.yjev_fc_attend.yjev_fc_login{
    border-color:transparent; background:transparent; color:#8a877e !important; font-weight:500;
}
.yjev_fc_attend.yjev_fc_login:hover{ background:#f4f2ec; color:#55534c !important; }

@media (max-width: 520px){
    .yjev_fc{ max-width:none; }
    /* Su schermo stretto la categoria e' sola sulla sua riga (il conteggio
       partecipanti e' spento): il tetto del 70%, che serve ad affiancarli,
       qui tagliava senza motivo — "Festival e sagre" diventava "Festiva...".
       Le si lascia tutta la riga e un filo di respiro in meno ai lati. */
    .yjev_fc_chip{ max-width:100%; padding:3px 9px; }
}