/* yj_eventi.css — modulo Eventi Yuujou (14/7/2026)
   Stile coerente col tema Edge: card bianche, ombre leggere, accenti sobri.
   Usato da eventi.html, evento.html, evento_edit.html. */

.yjev_wrap{ max-width:1060px; margin:0 auto; padding:0 12px 60px; }

/* --- testata --- */
.yjev_head{ text-align:center; padding:6px 0 2px; }
.yjev_head .signature{ margin-bottom:14px; }

/* --- barra filtri + crea --- */
.yjev_bar{
    display:flex; flex-wrap:wrap; gap:10px; align-items:center;
    justify-content:center; margin:6px 0 22px;
}
.yjev_bar select{
    height:34px; padding:6px 10px; font-size:14px;
    border:1px solid #d5d5d5; border-radius:4px; background:#fff; color:#333;
    max-width:230px;
}
.yjev_btn_create{
    display:inline-block; padding:7px 16px; border-radius:4px;
    background:#5cb85c; color:#fff !important; font-size:14px;
    text-decoration:none !important; border:0; white-space:nowrap;
}
.yjev_btn_create:hover{ background:#4cae4c; color:#fff; }
.yjev_bar .yjev_past_link{ font-size:13px; white-space:nowrap; }
.yjev_bar .yjev_link_on{
    background:#eef7f0; border:1px solid #bfe3c8; border-radius:12px;
    padding:3px 10px; color:#2f8f5b !important;
}

/* --- griglia card --- */
.yjev_grid{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:18px;
}
@media (max-width: 991px){ .yjev_grid{ grid-template-columns:repeat(2, 1fr);} }
@media (max-width: 640px){ .yjev_grid{ grid-template-columns:1fr;} }

.yjev_card{
    background:#fff; border:1px solid #e7e7e7; border-radius:6px;
    overflow:hidden; display:flex; flex-direction:column;
    box-shadow:0 1px 2px rgba(0,0,0,.04);
    transition:box-shadow .15s ease, transform .15s ease;
    color:inherit; text-decoration:none !important;
}
.yjev_card:hover{ box-shadow:0 6px 18px rgba(0,0,0,.10); transform:translateY(-2px); }

.yjev_card_img{
    position:relative; width:100%; aspect-ratio:16/9; overflow:hidden;
    background:#f2f0ea;
}
.yjev_card_img img{ width:100%; height:100%; object-fit:cover; display:block; }
.yjev_card_img .yjev_ph{
    width:100%; height:100%; display:flex; align-items:center; justify-content:center;
    font-size:52px;
    background:linear-gradient(135deg,#f7f5ef 0%,#ece7db 100%);
}
.yjev_badge_ongoing{
    position:absolute; top:10px; left:10px; padding:3px 9px; border-radius:3px;
    background:#d9534f; color:#fff; font-size:11px; font-weight:bold;
    letter-spacing:.03em;
}
.yjev_card_body{ padding:12px 14px 10px; flex:1; display:flex; flex-direction:column; }
.yjev_card_date{
    font-size:12.5px; font-weight:bold; color:#c0392b;
    text-transform:uppercase; letter-spacing:.02em; margin-bottom:4px;
}
.yjev_card_title{
    font-size:16px; font-weight:bold; color:#333; line-height:1.3;
    margin:0 0 6px; display:-webkit-box; -webkit-line-clamp:2;
    -webkit-box-orient:vertical; overflow:hidden;
}
.yjev_card_where{ font-size:13px; color:#777; margin-bottom:10px; }
.yjev_card_where .fa{ margin-right:4px; color:#999; }
.yjev_card_foot{
    margin-top:auto; display:flex; align-items:center; justify-content:space-between;
    font-size:12px; color:#888; border-top:1px solid #f0f0f0; padding-top:8px;
}
.yjev_chip{
    background:#f4f2ec; border-radius:12px; padding:2px 10px; color:#6f685c;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:60%;
}
.yjev_card_foot .fa{ margin-right:3px; }

.yjev_empty{
    text-align:center; color:#888; padding:44px 16px; font-size:15px;
}
.yjev_empty .yjev_empty_emoji{ font-size:44px; display:block; margin-bottom:10px; }

/* --- dettaglio evento --- */
.yjev_detail{
    max-width:760px; margin:0 auto; background:#fff;
    border:1px solid #e7e7e7; border-radius:6px; overflow:hidden;
    box-shadow:0 1px 2px rgba(0,0,0,.04);
}
/* con le colonne (utenti loggati) la scheda riempie il wall centrale, per
   restare coerente con lista e calendario; a colonna unica (ospiti) resta
   la scheda 760px centrata, piu' adatta alla lettura. Il margin-top da' respiro
   alla copertina dalla barra grigia delle statistiche che ricompare col layout
   a colonne (il gap del tema, 42px, basta per un titolo ma non per un'immagine
   a tutta larghezza). */
.wall_wrapper .yjev_detail{ max-width:none; margin-top:0; }
/* --- HERO cinematografico con titolo in sovraimpressione ---
   Pattern dei migliori siti eventi (Luma/Eventbrite moderno/editoriale):
   immagine a proporzione fissa (object-fit:cover, niente crop casuali),
   sfumatura di leggibilità in basso, categoria + badge in alto, titolo e
   "quando · dove" sovrapposti. Funziona anche senza foto (placeholder scuro). */
.yjev_hero{
    position:relative; width:100%;
    aspect-ratio:16/9; max-height:460px; overflow:hidden;
    background:#20242b;
}
/* position:relative (senza z-index!) tiene l'immagine SOPRA il fondo sfocato ma
   SOTTO lo scrim nero: lo scrim scuro in basso deve coprire l'immagine perche' il
   bianco del titolo risalti. Un z-index sull'img la alzava sopra lo scrim. */
.yjev_hero img{ width:100%; height:100%; object-fit:cover; display:block; position:relative; }
/* copertina principale SEMPRE intera (contain) su fondo sfocato di se stessa:
   verticale = poster con sfocato ai lati, orizzontale = completa (Alain 17/7) */
.yjev_hero_bg{
    position:absolute; inset:0; z-index:0;
    background-size:cover; background-position:center;
    filter:blur(26px) brightness(.80); transform:scale(1.14);
}
.yjev_hero_contain img{ object-fit:contain; }
.yjev_hero .yjev_ph{
    width:100%; height:100%; display:flex; align-items:center; justify-content:center;
    font-size:120px; line-height:1;
    background:linear-gradient(135deg,#464f5e 0%,#242b36 100%);
    text-shadow:0 6px 24px rgba(0,0,0,.35);
}
.yjev_hero_scrim{
    position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(to top,
        rgba(0,0,0,.80) 0%, rgba(0,0,0,.48) 26%,
        rgba(0,0,0,.10) 52%, rgba(0,0,0,0) 72%);
}
/* CATEGORIA: eyebrow editoriale a sinistra, ENTITA' SEPARATA sopra la card (Alain
   17/7) — fuori dalla cornice, non sovrapposto all'immagine. Allineato al bordo
   sinistro della copertina; piccolo spazio sotto verso la card. Maiuscoletto
   spaziato = etichetta "progettata". Segue la stessa larghezza della card
   (760px centrata per gli ospiti, colonna piena per i loggati). */
.yjev_topcat{ max-width:760px; margin:0 auto; padding:2px 4px 11px; text-align:left; }
.wall_wrapper .yjev_topcat{ max-width:none; margin-top:22px; }
.yjev_topcat_e{ display:inline-flex; align-items:baseline; }
.yjev_topcat_emo{ font-size:15px; margin-right:8px; line-height:1; }
.yjev_topcat_lbl{
    font-size:12.5px; font-weight:800; color:#7a7268;
    text-transform:uppercase; letter-spacing:.14em;
}
.yjev_hero_badge{ position:absolute; top:16px; right:16px; z-index:2; }
.yjev_hero_body{
    position:absolute; left:0; right:0; bottom:0; z-index:2;
    padding:28px 30px 22px; color:#fff;
}
.yjev_hero_body h1{
    font-size:30px; line-height:1.15; font-weight:800; margin:0 0 9px; color:#fff;
    letter-spacing:-.01em; text-shadow:0 2px 16px rgba(0,0,0,.55);
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.yjev_hero_sub{
    display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center;
    font-size:15px; font-weight:600; color:rgba(255,255,255,.94);
    text-shadow:0 1px 10px rgba(0,0,0,.55);
}
.yjev_hero_sub .fa{ margin-right:6px; opacity:.9; }

.yjev_detail_body{ padding:22px 26px 26px; }
.yjev_detail .yjev_chip{ max-width:none; }
.yjev_meta{ margin:14px 0 6px; }
.yjev_meta_row{ display:flex; gap:10px; margin-bottom:10px; font-size:14.5px; color:#444; }
.yjev_meta_row .fa{
    width:20px; text-align:center; color:#b3aa97; font-size:16px; margin-top:2px; flex:none;
}
.yjev_meta_row a{ word-break:break-all; }
.yjev_meta_main{ font-weight:bold; color:#333; }
.yjev_meta_sub{ color:#777; font-size:13.5px; }
.yjev_maplink{ font-size:13px; margin-left:6px; white-space:nowrap; }

/* --- PARTECIPO (ridisegnato 7/8/2026) ---------------------------------------
   Prima: pulsante verde Bootstrap #5cb85c in grassetto dentro un riquadro grigio.
   Su una pagina editoriale di grigi caldi (#b3aa97, #eeece5, #3a3a38) erano due
   linguaggi diversi, e il riquadro lo faceva sembrare un widget incollato.
   Adesso: niente pannello — solo un filetto che separa — e una pastiglia piccola
   e sobria, parente delle .yjev_chip gia' presenti nelle card. Iscriversi e' un
   impegno tranquillo, non un acquisto: non deve gridare.
   Lo stato "on" non e' un pulsante piu' forte, e' un fatto assodato: pieno scuro,
   nessun bordo. --------------------------------------------------------------- */
.yjev_attend_box{
    display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    border-top:1px solid #efece4; padding:14px 0 0; margin:20px 0 4px;
}
.yjev_btn_attend{
    padding:7px 16px; border-radius:999px; cursor:pointer;
    border:1px solid #ddd9cd; background:transparent; color:#55534c;
    font-size:13px; font-weight:500; line-height:1.3; letter-spacing:.01em;
    transition:background-color .14s ease, border-color .14s ease, color .14s ease;
}
.yjev_btn_attend:hover{ background:#faf9f5; border-color:#b3aa97; }
.yjev_btn_attend:focus-visible{ outline:2px solid #b3aa97; outline-offset:2px; }
.yjev_btn_attend.on{ background:#3a3a38; border-color:#3a3a38; color:#fff; }
.yjev_btn_attend.on:hover{ background:#4a4844; border-color:#4a4844; }
.yjev_attend_count{ font-size:13px; color:#8a877e; }
/* CHI PARTECIPA (ridisegnato 9/8/2026): non un elenco da consultare ma un
   GRUPPO da leggere a colpo d'occhio — quindi volti in PILA sovrapposta, come
   ovunque si mostri «chi c'e'», e non affiancati come una griglia di membri.
   Il bordo bianco spesso e' cio' che rende leggibile la sovrapposizione; al
   passaggio il volto sale sopra gli altri e si stacca. */
.yjev_guests{ display:flex; flex-wrap:wrap; align-items:center; margin-top:4px; padding-left:3px; }
.yjev_guests a{
    width:32px; height:32px; border-radius:50%; overflow:hidden; display:block;
    border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.07);
    background-size:cover; background-position:center; background-color:#efece4;
    margin-left:-8px; position:relative; z-index:1;
    transition:transform .14s ease, z-index 0s;
}
.yjev_guests a:hover{ transform:translateY(-2px) scale(1.06); z-index:4; }
/* chi non ci sta: un numero, cosi' il blocco non cresce mai */
.yjev_guests_more{
    display:flex; align-items:center; justify-content:center;
    min-width:32px; height:32px; padding:0 8px; margin-left:-8px;
    border-radius:999px; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.07);
    background:#efece4; color:#6b675e; font-size:12px; font-weight:600; position:relative; z-index:0;
}

/* Selettore In presenza / Online: due pastiglie affiancate, stessa famiglia del
   pulsante Partecipo. La scelta attiva e' un pieno scuro — si vede da lontano
   quale delle due e' in vigore, che e' tutto il punto di un selettore. */
.yjev_seg{ display:inline-flex; border:1px solid #ddd9cd; border-radius:999px; padding:2px; gap:2px; }
.yjev_seg_opt{ margin:0; cursor:pointer; }
.yjev_seg_opt input{ position:absolute; opacity:0; width:0; height:0; }
.yjev_seg_opt span{
    display:block; padding:6px 16px; border-radius:999px; font-size:13px; font-weight:500;
    color:#55534c; line-height:1.3; white-space:nowrap;
    transition:background-color .14s ease, color .14s ease;
}
.yjev_seg_opt:hover span{ background:#faf9f5; }
.yjev_seg_opt input:checked + span{ background:#3a3a38; color:#fff; }
.yjev_seg_opt input:focus-visible + span{ outline:2px solid #b3aa97; outline-offset:2px; }

/* I TRE OROLOGI del form (Roma · Tokyo · New York). La citta' sta SOPRA il suo
   orario e in carattere piccolo: cosi' non si puo' confondere quale ora e' quale.
   Lo scarto di giorno («−1 giorno») e' l'unica cosa colorata, perche' e' l'unica
   che, se non la leggi, ti fa sbagliare l'evento di 24 ore. */
.yjev_clocks{ display:flex; gap:16px; flex-wrap:wrap; align-items:flex-start; }
.yjev_clock{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.yjev_clock_city{
    font-size:12px; color:#8a877e; letter-spacing:.03em; text-transform:uppercase;
}
.yjev_clock input[type=time]{ width:8.5em; }
.yjev_clock_shift{ font-size:11.5px; color:#a8701a; min-height:15px; line-height:15px; }

/* la riga delle tre citta' sulla scheda: la citta' e' l'etichetta, l'ora e' il dato */
.yjev_clockline{ color:#333; }
.yjev_clockline_c{
    font-size:12px; color:#8a877e; letter-spacing:.03em; text-transform:uppercase;
}
.yjev_clockline_sep{ color:#cfcabb; margin:0 3px; }
.yjev_descr{
    font-size:15px; color:#3a3a38; line-height:1.6; margin:18px 0 6px;
    white-space:normal; word-wrap:break-word;
}
.yjev_organizer{
    display:flex; align-items:center; gap:10px; margin-top:20px;
    padding-top:16px; border-top:1px solid #f0f0f0; font-size:13.5px; color:#777;
}
.yjev_organizer a.yjev_org_photo{
    width:42px; height:42px; border-radius:50%; overflow:hidden; display:block;
    background-size:cover; background-position:center; border:1px solid #e2e0d8; flex:none;
}
.yjev_owner_actions{ margin-left:auto; font-size:13px; white-space:nowrap; }
.yjev_owner_actions a{ margin-left:12px; }
.yjev_back{ text-align:center; margin:18px 0 0; font-size:13.5px; }

/* --- form --- */
.yjev_form{
    max-width:640px; margin:0 auto; background:#fff;
    border:1px solid #e7e7e7; border-radius:6px;
    padding:24px 26px 26px;
    box-shadow:0 1px 2px rgba(0,0,0,.04);
}
/* dentro le colonne il form riempie la colonna centrale (come .yjev_detail) ma
   NIENTE bordo-card: il bordo netto accanto al divisore verticale faceva due
   linee parallele brutte (Alain 15/7). Soluzione da prodotto moderno
   (Stripe/Linear/Notion): pannello "carta" morbido — sfondo caldo, angoli
   arrotondati, ombra impercettibile, ZERO bordo → ancora il form come superficie
   curata senza nessuna linea. I campi diventano bianchi per staccarsi sul
   pannello. Titolo+sottotitolo restano fuori, centrati sulla colonna pulita. */
.wall_wrapper .yjev_form{
    max-width:none;
    background:#f7f5f0; border:0; border-radius:12px;
    box-shadow:0 1px 3px rgba(0,0,0,.05);
    padding:28px 30px 30px;
}
.wall_wrapper .yjev_form input[type=text], .wall_wrapper .yjev_form input[type=url],
.wall_wrapper .yjev_form input[type=date], .wall_wrapper .yjev_form input[type=time],
.wall_wrapper .yjev_form select, .wall_wrapper .yjev_form textarea{
    background:#fff; border-color:#e2e0d8;
}
.yjev_form h1{ font-size:21px; font-weight:bold; margin:0 0 18px; color:#2f2e2c; }
/* sottotitolo del form: stessa .signature della lista (coerenza) ma un filo
   piu' vicino al titolo e con respiro sotto, prima dei campi */
.yjev_head .yjev_form_lead{ margin:2px 0 26px; }
.yjev_field{ margin-bottom:19px; }
.yjev_field label{ display:block; font-size:13px; font-weight:600; color:#5b5952; margin-bottom:6px; }
.yjev_field .yjev_note{ font-weight:400; color:#a6a49b; font-size:12px; margin-left:6px; }
/* nota sotto la casella (non nell'etichetta): non sposta l'input, cosi' data
   inizio e data fine restano perfettamente allineate (Alain 17/7) */
.yjev_field .yjev_note_below{ display:block; margin:6px 2px 0; line-height:1.35; }
.yjev_field input[type=text], .yjev_field input[type=url],
.yjev_field input[type=date], .yjev_field input[type=time],
.yjev_field select, .yjev_field textarea{
    width:100%; height:42px; padding:9px 13px; font-size:14.5px;
    border:1px solid #dcdbd3; border-radius:7px; background:#fcfbf9; color:#33322f;
    transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
/* stato di focus: bordo e alone verde del marchio (lo stesso del bottone Crea):
   dice "sei qui" e lega il form all'identita' del sito */
.yjev_field input:focus, .yjev_field select:focus, .yjev_field textarea:focus{
    outline:none; border-color:#5cb85c; background:#fff;
    box-shadow:0 0 0 3px rgba(92,184,92,.15);
}
.yjev_field input::placeholder, .yjev_field textarea::placeholder{ color:#b4b2a8; }
.yjev_field textarea{ height:140px; resize:vertical; line-height:1.5; }
.yjev_row2{ display:flex; gap:16px; }
.yjev_row2 .yjev_field{ flex:1; }
.yjev_err{
    background:#f8d7da; color:#842029; border:1px solid #f1aeb5;
    border-radius:4px; padding:9px 13px; font-size:13.5px; margin-bottom:16px;
}
.yjev_form_actions{ display:flex; align-items:center; gap:18px; margin-top:28px; flex-wrap:wrap; }
.yjev_form_actions .yjev_btn_create{ font-size:15px; padding:11px 30px; border-radius:7px; }
.yjev_del_link{ color:#c0392b !important; margin-left:auto; font-size:13px; }
.yjev_cur_photo{ display:flex; align-items:center; gap:14px; margin-top:8px; }
.yjev_cur_photo img{ width:120px; border-radius:4px; border:1px solid #e2e0d8; }
.yjev_photo_del{ font-size:12.5px; color:#777; font-weight:normal !important; }
/* checkbox "Condividi nel feed" (solo in creazione): riga pulita, cliccabile */
.yjev_share_field .yjev_share_lbl{ display:flex; align-items:flex-start; gap:10px; cursor:pointer; margin:0; font-weight:normal; }
.yjev_share_field input[type=checkbox]{ width:18px; height:18px; margin:2px 0 0; flex:0 0 auto; accent-color:#5cb85c; cursor:pointer; }
.yjev_share_field .yjev_share_lbl > span{ display:block; }
.yjev_share_field .yjev_share_lbl b{ font-size:13.5px; color:#3d3b37; }
.yjev_share_field .yjev_note{ display:block; margin:2px 0 0; }

/* autocompletamento citta' */
.yjev_city_box{ position:relative; }
.yjev_city_list{
    position:absolute; z-index:30; left:0; right:0; top:100%;
    background:#fff; border:1px solid #d5d5d5; border-top:0;
    border-radius:0 0 4px 4px; max-height:240px; overflow-y:auto;
    box-shadow:0 8px 18px rgba(0,0,0,.12);
}
.yjev_city_list div{ padding:8px 12px; font-size:14px; cursor:pointer; }
.yjev_city_list div:hover{ background:#f4f2ec; }
.yjev_city_list small{ color:#999; margin-left:6px; }

@media (max-width: 640px){
    .yjev_detail_body{ padding:16px 14px 20px; }
    .yjev_form{ padding:18px 14px 20px; }
    .yjev_row2{ flex-direction:column; gap:0; }
    /* su telefono: input a 16px (evita lo zoom automatico di iOS al focus) e
       piu' alti per un tap target comodo */
    .yjev_field input[type=text], .yjev_field input[type=url],
    .yjev_field input[type=date], .yjev_field input[type=time],
    .yjev_field select, .yjev_field textarea{ height:46px; font-size:16px; }
    .yjev_head .yjev_form_lead{ margin:2px 0 20px; }
    /* pannello: padding piu' contenuto sul telefono */
    .wall_wrapper .yjev_form{ padding:20px 16px 22px; border-radius:10px; }

    /* hero: su telefono il 16:9 e' troppo basso, il 4:3 da' presenza */
    .yjev_hero{ aspect-ratio:4/3; max-height:360px; }
    .yjev_hero .yjev_ph{ font-size:84px; }
    .yjev_hero_body{ padding:18px 16px 15px; }
    .yjev_hero_body h1{ font-size:23px; margin-bottom:7px; }
    .yjev_hero_sub{ font-size:13.5px; gap:4px 14px; }
    .yjev_hero_cat{ top:12px; left:12px; font-size:12px; padding:4px 11px; }
    .yjev_hero_badge{ top:12px; right:12px; }
}