/* ============================================================================
   MULTIDIALOGO — Webinar & Multi Talk — pagina elenco
   Loads AFTER colors_and_type.css and webinar.css (reuses .wb-header,
   .wb-footer, .wb-btn, .wb-container, hero gradient tokens).
   ========================================================================= */

/* ---------- macro section ---------- */
.wl-sec { padding:84px 0 88px; background:#fff; }
.wl-sec + .wl-sec { border-top:1px solid var(--border); }
.wl-sec-head { max-width:680px; margin-bottom:46px; }
.wl-kicker { font-family:var(--font-sans); font-weight:800; font-size:12.5px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--accent);
  display:inline-flex; align-items:center; gap:9px; }
.wl-kicker i { width:16px; height:16px; }
.wl-sec h2 { font-family:var(--font-sans); font-weight:800; font-size:40px; line-height:1.06;
  letter-spacing:.005em; text-transform:uppercase; color:var(--md-principale); margin-top:14px; }
.wl-sec-intro { font-size:16px; font-weight:500; line-height:1.55; color:var(--md-testo);
  margin-top:16px; }

/* ---------- sub-group (In programma / Passati) ---------- */
.wl-subgroup + .wl-subgroup { margin-top:56px; }
.wl-subhead { display:flex; align-items:center; gap:18px; margin:0 0 26px; }
.wl-subhead h3 { font-family:var(--font-sans); font-weight:800; font-size:14px; letter-spacing:.14em;
  text-transform:uppercase; color:#7c8a99; white-space:nowrap; }
.wl-subhead::after { content:""; height:1px; background:var(--border); flex:1; }

/* ---------- card grid ---------- */
.wl-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; }

.wl-card { display:flex; flex-direction:column; background:#fff; border-radius:20px; overflow:hidden;
  border:1px solid var(--border); box-shadow:0 14px 34px rgba(20,46,86,.07);
  transition:transform .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.wl-card:hover { transform:translateY(-4px); box-shadow:0 26px 52px rgba(20,46,86,.14); }

.wl-card-banner { position:relative; display:block; aspect-ratio:16/10; background:#0a3160; overflow:hidden; }
.wl-card-banner image-slot,
.wl-card-banner img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .4s var(--ease-out); }
.wl-card:hover .wl-card-banner img { transform:scale(1.05); }
.wl-card-banner::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(6,33,63,0) 45%, rgba(6,33,63,.32) 100%); }

/* status badge */
.wl-status { position:absolute; top:14px; left:14px; z-index:3; display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-sans); font-weight:800; font-size:11px; letter-spacing:.07em; text-transform:uppercase;
  padding:7px 14px; border-radius:999px; }
.wl-status.live { background:var(--accent); color:#fff; box-shadow:0 6px 16px rgba(217,106,43,.34); }
.wl-status.done { background:rgba(31,42,55,.82); color:#fff; }
.wl-status i { width:13px; height:13px; }

/* episode badge */
.wl-ep-tag { position:absolute; bottom:14px; right:16px; z-index:3; font-family:var(--font-sans);
  font-weight:900; font-size:13px; letter-spacing:.06em; color:var(--gold); text-shadow:0 1px 8px rgba(0,0,0,.55); }

/* play overlay (registrazione) */
.wl-play { position:absolute; z-index:3; inset:0; margin:auto; width:62px; height:62px; border-radius:999px;
  background:rgba(255,255,255,.94); display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(0,0,0,.30); transition:transform .18s var(--ease-out), background .18s var(--ease-out); }
.wl-play i { width:26px; height:26px; color:var(--md-principale); fill:var(--md-principale); margin-left:3px; }
.wl-card-banner:hover .wl-play { transform:scale(1.08); background:#fff; }

/* card body */
.wl-card-body { display:flex; flex-direction:column; flex:1; padding:24px 26px 26px; }
.wl-cat { font-family:var(--font-sans); font-weight:800; font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent); }
.wl-card-title { font-family:var(--font-sans); font-weight:800; font-size:19px; line-height:1.24;
  letter-spacing:.003em; text-transform:uppercase; color:var(--md-principale); margin:12px 0 0; }
.wl-card-title a:hover { color:var(--accent); }
.wl-card-desc { font-size:14px; font-weight:500; line-height:1.55; color:var(--md-testo); margin-top:12px; }
.wl-meta { display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:18px; }
.wl-meta span { display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700;
  color:var(--md-principale); }
.wl-meta i { width:16px; height:16px; color:var(--accent); }
.wl-card-foot { display:flex; flex-direction:row; align-items:center; flex-wrap:wrap; gap:12px; margin-top:auto; padding-top:22px; }
.wl-card-foot .wb-btn { padding:13px 22px; font-size:14px; }
.wl-card-foot .wl-btn-cta { flex:0 0 auto; }
.wl-card-foot .wl-cal { flex:1 0 auto; }

/* primary CTA — brand orange */
.wl-btn-cta { background:var(--cta-bg); color:var(--cta-fg); box-shadow:var(--shadow-cta); }
.wl-btn-cta:hover { background:var(--cta-bg-hover); }

/* "Aggiungi al calendario" — pill on desktop, icon-only on mobile */
.wl-cal { background:var(--cal-bg,#fff); color:var(--md-principale); border:1.5px solid var(--border-strong); font-weight:700; }
.wl-cal:hover { border-color:var(--accent); color:var(--accent); }
.wl-cal i { width:17px; height:17px; }
@media (max-width:620px){
  .wl-card-foot { flex-direction:row; align-items:center; }
  .wl-card-foot .wl-btn-cta { flex:1; width:auto; }
  .wl-cal { flex:none; width:50px; padding:0; justify-content:center; }
  .wl-cal span { display:none; }
}

/* ============================================================================
   PROSSIMO IN EVIDENZA (banner orizzontale) + ARCHIVIO repliche (griglia compatta)
   Il prossimo appuntamento è un banner a tutta larghezza (navy + pannello bianco,
   bordo arancio); le repliche dei webinar passati stanno sotto, in card compatte
   con copertina "spenta" (torna a colori all'hover) e CTA come link testuale.
   ========================================================================= */

/* --- lista dei featured (uno per prossimo appuntamento) --- */
.wl-featured-list { display:flex; flex-direction:column; gap:16px; }

.wl-featured { display:grid; grid-template-columns:1fr 1fr; background:#fff;
  border:1.5px solid var(--accent); border-radius:22px; overflow:hidden;
  box-shadow:0 20px 44px rgba(217,106,43,.13); }
.wl-feat-cover { position:relative; display:block; min-height:290px; overflow:hidden;
  background:radial-gradient(120% 130% at 12% 8%, #2b5f9e 0%, #123a6b 44%, #0a2b52 100%); }
.wl-feat-cover img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.wl-feat-cover::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:radial-gradient(70% 90% at 90% 95%, rgba(217,106,43,.5), transparent 60%),
            repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 24px); }
.wl-feat-cam { position:absolute; left:22px; top:20px; z-index:2; width:32px; height:32px; color:rgba(255,255,255,.92); }
.wl-feat-live { position:absolute; left:22px; bottom:22px; z-index:3; display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-sans); font-weight:800; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#fff;
  background:var(--accent); padding:9px 16px; border-radius:999px; box-shadow:0 8px 20px rgba(217,106,43,.4); }
.wl-blink { width:7px; height:7px; border-radius:999px; background:#fff; animation:wl-blink 1.4s var(--ease-out) infinite; }
@keyframes wl-blink { 0%,100%{opacity:1} 50%{opacity:.3} }
.wl-feat-body { padding:40px 46px; display:flex; flex-direction:column; justify-content:center; }
.wl-feat-eye { font-family:var(--font-sans); font-weight:800; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.wl-feat-title { font-family:var(--font-sans); font-weight:800; font-size:29px; line-height:1.16; letter-spacing:.002em;
  color:var(--md-principale); margin:12px 0 0; text-wrap:balance; }
.wl-feat-title a { color:inherit; text-decoration:none; }
.wl-feat-title a:hover { color:var(--accent); }
.wl-feat-meta { display:flex; align-items:center; gap:9px; margin-top:18px; font-weight:700; font-size:14px; color:var(--md-principale); }
.wl-feat-meta i { width:17px; height:17px; color:var(--accent); }
.wl-feat-foot { display:flex; align-items:center; gap:12px; margin-top:26px; }
.wl-feat-foot .wl-btn-cta { padding:14px 26px; font-size:15px; }
.wl-cal--ico { padding:14px; }
.wl-cal--ico i { margin:0; }

/* --- header archivio --- */
.wl-archive-head { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin:46px 0 24px; }
.wl-kicker--muted { color:var(--md-principale-70, #51606e); }
.wl-kicker--muted i { color:var(--md-principale-70, #51606e); }
.wl-arch-title { font-family:var(--font-sans); font-weight:800; font-size:23px; letter-spacing:.005em;
  text-transform:uppercase; color:var(--md-principale); margin:8px 0 0; }
.wl-arch-count { font-weight:600; font-size:13px; color:var(--md-principale-70, #51606e); }

/* --- card replica compatta --- */
.wl-grid--archive { gap:20px; }
.wl-rep { display:flex; flex-direction:column; background:#fff; border:1px solid var(--border);
  border-radius:14px; overflow:hidden; box-shadow:0 6px 16px rgba(20,46,86,.05);
  transition:transform .18s var(--ease-out), box-shadow .18s var(--ease-out); }
.wl-rep:hover { transform:translateY(-3px); box-shadow:0 16px 32px rgba(20,46,86,.12); }
.wl-rep-cover { position:relative; display:block; aspect-ratio:16/10; overflow:hidden;
  background:linear-gradient(160deg, #3a6ea5 0%, #1f4f86 55%, #123a6b 100%);
  /* "spento" ma con un accenno dei colori originali (torna pieno all'hover) */
  filter:grayscale(.62) brightness(.9) saturate(.85); transition:filter .4s var(--ease-out); }
.wl-rep-cover img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.wl-rep-cover::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(20,30,42,.15), rgba(20,30,42,.4)); }
.wl-rep:hover .wl-rep-cover { filter:none; }
.wl-rep-pill { position:absolute; left:12px; top:12px; z-index:3; font-family:var(--font-sans); font-weight:800;
  font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--md-principale);
  background:rgba(255,255,255,.9); padding:6px 11px; border-radius:999px; }
.wl-rep-play { position:absolute; inset:0; margin:auto; z-index:3; width:50px; height:50px; border-radius:999px;
  display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.94); box-shadow:0 8px 22px rgba(0,0,0,.28); }
.wl-rep-play i { width:20px; height:20px; color:var(--md-principale); fill:var(--md-principale); margin-left:2px; }
.wl-rep-body { display:flex; flex-direction:column; flex:1; padding:15px 17px 17px; }
.wl-rep-meta { font-family:var(--font-sans); font-weight:800; font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--md-principale-70, #51606e); }
.wl-rep-title { font-family:var(--font-sans); font-weight:800; font-size:15px; line-height:1.3; color:var(--md-principale); margin:9px 0 0; }
.wl-rep-title a { color:inherit; text-decoration:none; }
.wl-rep-title a:hover { color:var(--accent); }
.wl-rep-link { margin-top:16px; align-self:flex-start; font-family:var(--font-sans); font-weight:800; font-size:13px;
  background:var(--cta-bg); color:var(--cta-fg); box-shadow:var(--shadow-cta); text-decoration:none; white-space:nowrap;
  display:inline-flex; align-items:center; gap:8px; padding:11px 16px; border-radius:999px;
  transition:transform .14s var(--ease-out), background .14s var(--ease-out); }
.wl-rep-link:hover { background:var(--cta-bg-hover); transform:translateY(-1px); }
.wl-rep-link i { width:15px; height:15px; color:#fff; }

@media (max-width:760px){
  .wl-featured { grid-template-columns:1fr; }
  .wl-feat-cover { min-height:190px; }
  .wl-feat-body { padding:28px 26px; }
  .wl-feat-title { font-size:24px; }
}
@media (prefers-reduced-motion: reduce){
  .wl-blink { animation:none; }
  .wl-rep-cover { transition:none; }
}

/* dark theme */
[data-theme="dark"] .wl-featured { background:#1E2530; }
[data-theme="dark"] .wl-rep { background:#1E2530; box-shadow:0 6px 16px rgba(0,0,0,.38); }
[data-theme="dark"] .wl-rep-pill { background:rgba(30,37,48,.92); color:#EAF0F6; }

/* ============================================================================
   SEZIONE "DARK" (Multi Talk) — sfondo sfumato nero → antracite, testi bianchi.
   Vale in entrambi i temi (è una scelta cromatica della sezione, non del tema).
   ========================================================================= */
.wl-sec--dark { background:linear-gradient(160deg, #0c0e11 0%, #171a1f 46%, #2b3037 100%); border-top:0; }
.wl-sec--dark .wl-sec h2, .wl-sec--dark h2 { color:#fff; }
.wl-sec--dark .wl-sec-intro { color:rgba(255,255,255,.72); }
.wl-sec--dark .wl-kicker { color:var(--accent); }
.wl-sec--dark .wl-kicker i { color:var(--accent); }
/* card scure su fondo scuro */
.wl-sec--dark .wl-rep { background:#1b1f25; border-color:rgba(255,255,255,.10); box-shadow:0 10px 26px rgba(0,0,0,.45); }
.wl-sec--dark .wl-rep-title, .wl-sec--dark .wl-rep-title a { color:#fff; }
.wl-sec--dark .wl-rep-title a:hover { color:var(--accent); }
.wl-sec--dark .wl-rep-meta { color:rgba(255,255,255,.6); }
.wl-sec--dark .wl-rep-pill { background:rgba(15,17,20,.82); color:#fff; }

/* ============================================================================
   HERO — navy, solo titolo + intro + quick nav
   ========================================================================= */
.wl-hero { position:relative; overflow:hidden;
  background:radial-gradient(120% 100% at 50% -20%, #0f4078 0%, #0a3160 40%, #062a52 72%, #05213f 100%); }
.wl-hero-in { position:relative; z-index:1; padding-top:80px; padding-bottom:72px; text-align:center; }
.wl-hero-eye { font-family:var(--font-sans); font-weight:700; font-size:13px; letter-spacing:.24em;
  text-transform:uppercase; color:rgba(255,255,255,.72); }
.wl-hero h1 { font-family:var(--font-sans); font-weight:800; font-size:50px; line-height:1.07;
  letter-spacing:.004em; text-transform:uppercase; color:#fff; margin:18px auto 0; max-width:18ch; }
.wl-hero-lead { font-size:18px; font-weight:500; line-height:1.55; color:#cfe0f1; margin:22px auto 0;
  max-width:600px; }
.wl-hero-nav { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:36px; }
.wl-chip { display:inline-flex; align-items:center; gap:9px; padding:11px 22px; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); color:#eaf2fb;
  font-family:var(--font-sans); font-weight:700; font-size:14px; letter-spacing:.01em;
  transition:background .14s var(--ease-out), border-color .14s var(--ease-out); }
.wl-chip i { width:17px; height:17px; color:var(--gold); }
.wl-chip:hover { background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.32); }

/* ============================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:1080px){ .wl-grid { grid-template-columns:repeat(3, 1fr); } }
@media (max-width:820px){ .wl-grid { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:980px){
  .wl-hero h1 { font-size:38px; }
  .wl-sec h2 { font-size:31px; }
}
@media (max-width:620px){
  .wl-grid { grid-template-columns:1fr; }
  .wl-sec { padding:58px 0 62px; }
  .wl-hero h1 { font-size:30px; }
}

/* ============================================================================
   DARK THEME — list-specific surfaces (token flips live in webinar.css).
   The navy hero (.wl-hero) and navy card banners stay dark in both themes.
   ========================================================================= */
[data-theme="dark"] .wl-sec { background:#14181E; }
[data-theme="dark"] .wl-card { background:#1E2530; box-shadow:0 14px 34px rgba(0,0,0,.42); }
[data-theme="dark"]{ --cal-bg:#1E2530; }

/* icona play dentro la CTA "Guarda la registrazione" (era style inline nel prototipo) */
.wl-btn-cta i { width:15px; height:15px; fill:currentColor; }