/* ============================================================================
   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; }
}

/* ============================================================================
   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; }