/* ══════════════════════════════════════════
   runevents.css — Layout pagina tickets.php + tema dei widget run.events
   Compatibile con il sistema di variabili CSS di style.css (var(--accent), var(--bg2)…)

   I widget run.events (<runevents-tickets>, <runevents-agenda>, <runevents-sponsors>,
   <runevents-single-sponsorship>) NON usano Shadow DOM: le classi qui sotto sono
   documentate ufficialmente (community.run.events/knowledge-base) e funzionano con
   normali selettori CSS globali. Sono scoped ai container in cui iniettiamo i widget
   (#runevents-tickets-container, #agenda-container, #sponsors-container) perché alcune
   di quelle classi — es. .card, .title — sono generiche e potrebbero altrimenti
   sovrascrivere stili non correlati altrove nel sito.
══════════════════════════════════════════ */

/* ─── Chrome pagina tickets.php ─────────── */
.re-page-header {
  padding: 24px 0;
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, .08));
}
.re-page-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.re-back-link {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: var(--transition);
  white-space: nowrap;
}
.re-back-link:hover { color: var(--neon); }

.re-tickets-hero {
  padding: 64px 0 24px;
  text-align: center;
}
.re-tickets-hero .section-label { text-align: center; }
.re-tickets-title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  color: var(--text);
  margin-bottom: 8px;
}
.re-tickets-meta {
  font-family: var(--font-mono);
  color: var(--text-muted);
  font-size: 0.9rem;
}

.re-tickets-section { padding: 32px 0 120px; }
.re-tickets-section .container { max-width: 900px; }

/* ─── runevents-tickets ──────────────────── */
#runevents-tickets-container .re-tickets {
  font-family: var(--font-display) !important;
  background: var(--surface, #111c30) !important;
  border: 1px solid var(--border, rgba(255, 255, 255, .08));
  border-radius: var(--radius, 12px) !important;
  padding: 32px !important;
}
#runevents-tickets-container .re-tickets .section h2 {
  font-family: var(--font-display) !important;
  color: var(--text) !important;
}
#runevents-tickets-container .re-tickets h4 {
  font-family: var(--font-display) !important;
  color: var(--text) !important;
  white-space: initial;
}
#runevents-tickets-container .re-tickets small {
  color: var(--text-muted) !important;
}
#runevents-tickets-container .re-tickets .btn {
  background: var(--accent) !important;
  border: 1px solid var(--accent) !important;
  color: #fff !important;
  font-family: var(--font-mono) !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em;
  border-radius: 8px !important;
  transition: var(--transition);
}
#runevents-tickets-container .re-tickets .btn:hover {
  background: var(--neon) !important;
  border-color: var(--neon) !important;
  color: var(--bg) !important;
}
#runevents-tickets-container .re-tickets .redirect-footer {
  color: var(--text-muted) !important;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

/* ─── runevents-agenda (dentro #agenda-container in index.php) ── */
#agenda-container .agenda-component {
  font-family: var(--font-display) !important;
  color: var(--text) !important;
}
/* Tab dei giorni (Angular Material) — di default hanno un loro sfondo chiaro che
   stona sul tema scuro: lo neutralizziamo e usiamo i colori del sito. */
#agenda-container .mdc-tab {
  background: transparent !important;
}
#agenda-container .mdc-tab__text-label {
  font-family: var(--font-mono) !important;
  color: var(--text-muted) !important;
  background: transparent !important;
  letter-spacing: 0.03em;
}
#agenda-container .mdc-tab--active .mdc-tab__text-label {
  color: var(--neon) !important;
}
#agenda-container .mdc-tab-indicator__content--underline {
  border-color: var(--neon) !important;
}
#agenda-container .agenda-component .session h3 {
  color: var(--neon) !important;
  background: transparent !important;
  font-family: var(--font-mono) !important;
}
#agenda-container .agenda-component .session h4 {
  color: var(--text) !important;
  font-family: var(--font-display) !important;
  background: transparent !important;
}
#agenda-container .session-content {
  background: var(--surface, #111c30) !important;
  color: var(--text) !important;
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-radius: var(--radius, 12px) !important;
}
#agenda-container .session-content:hover {
  background: var(--surface2, #162338) !important;
}
#agenda-container .non-content {
  background: var(--bg2, #0b1220) !important;
  color: var(--text-muted) !important;
  border-radius: var(--radius, 12px) !important;
}
#agenda-container .agenda-component .label,
#agenda-container .agenda-component .content-item {
  font-family: var(--font-mono) !important;
  color: var(--text-muted) !important;
  background: transparent !important;
}
/* Il widget run.events divide l'agenda in due colonne: agenda + Card Sidebar.
   Sul sito pubblico non vogliamo ricerca/filtri: nascondiamo completamente la sidebar
   e restituiamo tutta la larghezza disponibile alla timeline. */
#agenda-container card-sidebar,
#agenda-container .card-sidebar {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  flex: 0 0 0 !important;
  overflow: hidden !important;
}

#agenda-container runevents-agenda,
#agenda-container runevents-agenda > *,
#agenda-container .agenda-component {
  width: 100% !important;
  max-width: none !important;
}

#agenda-container .agenda-component {
  flex: 1 1 100% !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Evita che il layout interno conservi la colonna vuota della sidebar. */
#agenda-container runevents-agenda > div,
#agenda-container runevents-agenda [class*="agenda-wrapper"],
#agenda-container runevents-agenda [class*="container"] {
  max-width: 100% !important;
}

/* Le card run.events hanno un margin-right pensato per il layout con sidebar. */
#agenda-container .session-content,
#agenda-container .non-content {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-right: 0 !important;
  padding: 20px 24px !important;
}

/* Timeline più compatta e leggibile, coerente con le card native del sito. */
#agenda-container .agenda-component .session {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#agenda-container .agenda-component .session h3 {
  margin: 32px 0 14px !important;
  font-size: clamp(1.15rem, 2vw, 1.45rem) !important;
  font-weight: 800 !important;
}

#agenda-container .agenda-component .session h4 {
  font-size: clamp(1rem, 1.6vw, 1.15rem) !important;
  line-height: 1.35 !important;
  margin-bottom: 8px !important;
}

#agenda-container .session-content {
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease !important;
}

#agenda-container .session-content:hover {
  transform: translateY(-2px);
  border-color: var(--border-hover, rgba(0,212,255,.35)) !important;
  box-shadow: var(--shadow-neon, none) !important;
}

/* Giorno/data: niente blocchi bianchi o larghezze artificiali. */
#agenda-container .mat-mdc-tab-header,
#agenda-container .mat-mdc-tab-body-wrapper,
#agenda-container .mat-mdc-tab-body,
#agenda-container .mat-mdc-tab-body-content {
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
}

/* Search input di sicurezza: anche se una futura versione del widget lo emettesse
   fuori dal card-sidebar, non deve comparire nell'agenda pubblica. */
#agenda-container .session-search-input,
#agenda-container input[type="search"] {
  display: none !important;
}


@media (max-width: 768px) {
  #agenda-container .session-content,
  #agenda-container .non-content {
    padding: 16px !important;
  }

  #agenda-container .agenda-component .session h3 {
    margin-top: 24px !important;
  }
}

/* ─── runevents-sponsors / runevents-single-sponsorship ── */
#sponsors-container .card h4 {
  font-family: var(--font-display) !important;
  color: var(--text) !important;
}

/* ══════════════════════════════════════════
   RUN.EVENTS — SESSIONI & SPEAKER
   I widget ereditano il linguaggio visivo del template invece di apparire come
   componenti esterni. Tutti i selettori sono scoped alle sezioni pubbliche.
══════════════════════════════════════════ */
#sessions runevents-sessions,
#speakers runevents-speakers,
#agenda runevents-agenda {
  display: block;
  width: 100%;
  font-family: var(--font-display) !important;
  color: var(--text) !important;
}

/* Quando il provider è run.events il custom element gestisce già il layout interno. */
#sessions .runevents-grid-host,
#speakers .runevents-grid-host {
  display: block !important;
}

/* Card: copertura volutamente ampia ma limitata ai widget run.events. */
#sessions runevents-sessions .card,
#sessions runevents-sessions .session,
#sessions runevents-sessions .session-card,
#speakers runevents-speakers .card,
#speakers runevents-speakers .speaker,
#speakers runevents-speakers .speaker-card {
  background: var(--surface, #111c30) !important;
  color: var(--text) !important;
  border: 1px solid var(--border, rgba(255,255,255,.08)) !important;
  border-radius: var(--radius, 12px) !important;
  box-shadow: var(--shadow-neon, none) !important;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

#sessions runevents-sessions .card:hover,
#sessions runevents-sessions .session:hover,
#sessions runevents-sessions .session-card:hover,
#speakers runevents-speakers .card:hover,
#speakers runevents-speakers .speaker:hover,
#speakers runevents-speakers .speaker-card:hover {
  transform: translateY(-2px);
  background: var(--surface2, #162338) !important;
  border-color: var(--border-hover, rgba(0,212,255,.35)) !important;
}

#sessions runevents-sessions h1,
#sessions runevents-sessions h2,
#sessions runevents-sessions h3,
#sessions runevents-sessions h4,
#speakers runevents-speakers h1,
#speakers runevents-speakers h2,
#speakers runevents-speakers h3,
#speakers runevents-speakers h4 {
  color: var(--text) !important;
  font-family: var(--font-display) !important;
  background: transparent !important;
}

#sessions runevents-sessions small,
#sessions runevents-sessions p,
#speakers runevents-speakers small,
#speakers runevents-speakers p {
  color: var(--text-muted) !important;
}

#sessions runevents-sessions .label,
#sessions runevents-sessions .badge,
#speakers runevents-speakers .label,
#speakers runevents-speakers .badge {
  font-family: var(--font-mono) !important;
  color: var(--neon) !important;
  border-color: var(--border-hover) !important;
  background: color-mix(in srgb, var(--accent) 12%, transparent) !important;
}

#sessions runevents-sessions input,
#sessions runevents-sessions select,
#speakers runevents-speakers input,
#speakers runevents-speakers select {
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  font-family: var(--font-display) !important;
}

#sessions runevents-sessions button,
#speakers runevents-speakers button {
  font-family: var(--font-mono) !important;
}

/* Modali prodotte dai widget: mantieni superfici e tipografia del sito. */
#sessions .modal-content,
#speakers .modal-content,
#sessions .mat-mdc-dialog-surface,
#speakers .mat-mdc-dialog-surface {
  background: var(--bg2, #0b1220) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius, 12px) !important;
}

@media (max-width: 768px) {
  #sessions runevents-sessions .card,
  #sessions runevents-sessions .session,
  #sessions runevents-sessions .session-card,
  #speakers runevents-speakers .card,
  #speakers runevents-speakers .speaker,
  #speakers runevents-speakers .speaker-card,
  #agenda .session-content {
    border-radius: 10px !important;
  }

  #sessions runevents-sessions,
  #speakers runevents-speakers,
  #agenda runevents-agenda {
    font-size: .92rem;
  }
}

/* ══════════════════════════════════════════
   RUN.EVENTS — DIALOG / MODAL FIX
   I dialog Angular CDK vengono montati direttamente sotto <body>, fuori da
   #sessions/#speakers: devono quindi essere tematizzati a livello globale.
══════════════════════════════════════════ */

/* Overlay sempre sopra navbar, sezioni, cookie banner e pannelli del sito. */
.cdk-overlay-container {
  position: fixed !important;
  inset: 0 !important;
  z-index: 12000 !important;
  pointer-events: none !important;
}

.cdk-global-overlay-wrapper,
.cdk-overlay-connected-position-bounding-box {
  position: absolute !important;
  inset: 0 !important;
  z-index: 12000 !important;
  pointer-events: none !important;
}

.cdk-global-overlay-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
}

.cdk-overlay-pane {
  position: relative !important;
  z-index: 12001 !important;
  pointer-events: auto !important;
  max-width: min(920px, calc(100vw - 48px)) !important;
  max-height: calc(100vh - 48px) !important;
}

.cdk-overlay-backdrop {
  position: absolute !important;
  inset: 0 !important;
  z-index: 11999 !important;
  pointer-events: auto !important;
  background: rgba(0, 0, 0, .78) !important;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* Superficie del dettaglio speaker/sessione. */
.cdk-overlay-container .mat-mdc-dialog-container,
.cdk-overlay-container .mat-dialog-container,
.cdk-overlay-container .mat-mdc-dialog-surface,
.cdk-overlay-container .modal-content {
  position: relative !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-height: calc(100vh - 48px) !important;
  overflow: hidden !important;
  background: var(--bg2, #0b1220) !important;
  color: var(--text, #e8f4fd) !important;
  border: 1px solid var(--border, rgba(255,255,255,.12)) !important;
  border-radius: 16px !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.72), var(--shadow-neon, none) !important;
}

/* Il contenuto lungo scorre DENTRO la modale, non sotto le sezioni della pagina. */
.cdk-overlay-container .mat-mdc-dialog-content,
.cdk-overlay-container .mat-dialog-content,
.cdk-overlay-container [class*="dialog-content"],
.cdk-overlay-container .modal-body {
  box-sizing: border-box !important;
  max-height: calc(100vh - 110px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

/* Alcuni widget run.events mettono il contenuto direttamente nella surface. */
.cdk-overlay-container .mat-mdc-dialog-surface {
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

/* Tipografia run.events nella modale: coerente col tema del sito. */
.cdk-overlay-container h1,
.cdk-overlay-container h2,
.cdk-overlay-container h3,
.cdk-overlay-container h4 {
  font-family: var(--font-display) !important;
  color: var(--text) !important;
}

.cdk-overlay-container p,
.cdk-overlay-container li,
.cdk-overlay-container .description,
.cdk-overlay-container .bio {
  color: var(--text-muted) !important;
}

.cdk-overlay-container a {
  color: var(--neon) !important;
}

/* Rende sempre visibile/cliccabile il comando di chiusura fornito dal widget. */
.cdk-overlay-container button,
.cdk-overlay-container [role="button"] {
  pointer-events: auto !important;
}

.cdk-overlay-container button[aria-label*="close" i],
.cdk-overlay-container button[title*="close" i],
.cdk-overlay-container button[aria-label*="chiudi" i],
.cdk-overlay-container .close,
.cdk-overlay-container .close-button,
.cdk-overlay-container .modal-close,
.cdk-overlay-container [class*="close"] {
  position: sticky !important;
  top: 12px !important;
  float: right !important;
  z-index: 30 !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--surface, #111c30) !important;
  color: var(--text, #e8f4fd) !important;
  border: 1px solid var(--border-hover, rgba(255,255,255,.2)) !important;
  border-radius: 50% !important;
  opacity: 1 !important;
  visibility: visible !important;
  cursor: pointer !important;
  box-shadow: 0 4px 18px rgba(0,0,0,.35) !important;
}

.cdk-overlay-container button[aria-label*="close" i]:hover,
.cdk-overlay-container button[title*="close" i]:hover,
.cdk-overlay-container .close:hover,
.cdk-overlay-container .close-button:hover,
.cdk-overlay-container .modal-close:hover,
.cdk-overlay-container [class*="close"]:hover {
  color: var(--neon) !important;
  border-color: var(--neon) !important;
}

/* Evita che trasformazioni/overflow delle sezioni del sito taglino un dialog. */
body:has(.cdk-overlay-container .cdk-overlay-pane) {
  overflow: hidden;
}

@media (max-width: 768px) {
  .cdk-global-overlay-wrapper {
    padding: 10px !important;
    align-items: flex-start !important;
  }

  .cdk-overlay-pane {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    margin-top: 10px !important;
  }

  .cdk-overlay-container .mat-mdc-dialog-container,
  .cdk-overlay-container .mat-dialog-container,
  .cdk-overlay-container .mat-mdc-dialog-surface,
  .cdk-overlay-container .modal-content {
    max-height: calc(100dvh - 20px) !important;
    border-radius: 12px !important;
  }

  .cdk-overlay-container .mat-mdc-dialog-content,
  .cdk-overlay-container .mat-dialog-content,
  .cdk-overlay-container [class*="dialog-content"],
  .cdk-overlay-container .modal-body {
    max-height: calc(100dvh - 80px) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   RUN.EVENTS AGENDA — FULL WIDTH / NO SIDEBAR
   Il custom element card-sidebar può essere montato dal widget fuori
   da #agenda-container: per questo il selettore è intenzionalmente globale.
   ═══════════════════════════════════════════════════════════════ */

card-sidebar,
.card-sidebar {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 0 !important;
  overflow: hidden !important;
}

/* Il custom element e tutti i principali wrapper dell'agenda devono usare
   l'intera larghezza del container del sito. */
runevents-agenda,
runevents-agenda .agenda-component,
.agenda-component {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
  box-sizing: border-box !important;
}

runevents-agenda > div,
runevents-agenda > section,
runevents-agenda .mat-mdc-tab-group,
runevents-agenda .mat-mdc-tab-body-wrapper,
runevents-agenda .mat-mdc-tab-body,
runevents-agenda .mat-mdc-tab-body-content {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Niente ricerca anche nel caso in cui una futura release la emetta
   separatamente dal card-sidebar. */
runevents-agenda .session-search-input,
runevents-agenda input[type="search"],
runevents-agenda input[placeholder*="search" i],
runevents-agenda input[placeholder*="quick" i] {
  display: none !important;
}

/* Timeline: card realmente full-width e allineate al resto del sito. */
runevents-agenda .agenda-component .session,
runevents-agenda .session-content,
runevents-agenda .non-content {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

runevents-agenda .session-content,
runevents-agenda .non-content {
  padding: 22px 26px !important;
}

/* Migliora la gerarchia visuale dell'orario senza lasciare enormi vuoti. */
runevents-agenda .agenda-component .session h3 {
  margin: 28px 0 12px !important;
  font-size: clamp(1.2rem, 2vw, 1.5rem) !important;
  line-height: 1.15 !important;
}

runevents-agenda .agenda-component .session h4 {
  margin: 0 0 8px !important;
  line-height: 1.35 !important;
}

@media (max-width: 768px) {
  runevents-agenda .session-content,
  runevents-agenda .non-content {
    padding: 16px 18px !important;
  }
}

/* FINAL FIX — run.events agenda: il pannello Search/Filter non deve mai apparire. */
body card-sidebar,
body .card-sidebar,
runevents-agenda card-sidebar,
runevents-agenda .card-sidebar,
runevents-agenda [class*="sidebar" i] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  flex: 0 0 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Recupera lo spazio lasciato dal sidebar nella struttura flex/grid del widget. */
runevents-agenda,
runevents-agenda > *,
runevents-agenda .agenda-component {
  width: 100% !important;
  max-width: 100% !important;
}