/* ==========================================================================
   Connecting Bz — layout e componenti
   Consuma i token di tokens.css. Le classi cbz-* si applicano dai campi
   "Classe CSS" dei moduli Divi.
   ========================================================================== */

/* --- Base ---------------------------------------------------------------- */

body,
body.et-db #et-boc .et-l {
	background: var(--cbz-bg);
	color: var(--cbz-text);
	font-family: var(--cbz-font-body);
	-webkit-font-smoothing: antialiased;
}

/* :not(.cbz-btn) — altrimenti ".cbz a" (specificità 0,1,1) vincerebbe su
   ".cbz-btn--primary" (0,1,0) e il testo dei bottoni prenderebbe il rosso-link
   invece del bianco, sparendo sul fondo rosso. */
.cbz a:not(.cbz-btn) { color: var(--cbz-accent-soft); text-decoration: none; }
.cbz a:not(.cbz-btn):hover { color: var(--cbz-accent-light); }
::selection { background: var(--cbz-accent); color: var(--cbz-ink); }

.cbz h1, .cbz h2, .cbz h3,
.cbz-display {
	font-family: var(--cbz-font-display);
	font-weight: 700;
	color: var(--cbz-text);
}

.cbz-wrap        { max-width: var(--cbz-max); margin-inline: auto; }
.cbz-wrap--narrow { max-width: var(--cbz-max-narrow); margin-inline: auto; }

.cbz-section {
	padding: var(--cbz-section-y) var(--cbz-section-x);
}
.cbz-section--alt {
	background: var(--cbz-bg-alt);
	border-top: 1px solid var(--cbz-border);
}

.cbz-kicker {
	font-family: var(--cbz-font-mono);
	font-size: var(--cbz-kicker);
	letter-spacing: var(--cbz-kicker-ls);
	text-transform: uppercase;
	color: var(--cbz-secondary-dark);
}

.cbz-h1 {
	font-size: var(--cbz-h1);
	line-height: 1.02;
	letter-spacing: var(--cbz-h1-ls);
	max-width: 900px;
	text-wrap: balance;
}
.cbz-h1 .cbz-accent { color: var(--cbz-accent); }

.cbz-h2 {
	font-size: var(--cbz-h2);
	letter-spacing: var(--cbz-h2-ls);
	line-height: 1.1;
	margin-top: 14px;
}
.cbz-h2--col {
	font-size: var(--cbz-h2-col);
	letter-spacing: var(--cbz-h2-col-ls);
	line-height: 1.15;
}

.cbz-lead {
	font-size: var(--cbz-lead);
	line-height: 1.6;
	color: var(--cbz-text-2);
	max-width: 720px;
	text-wrap: pretty;
}

/* --- Bottoni ------------------------------------------------------------- */

.cbz-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 17px 34px;
	border-radius: var(--cbz-radius-pill);
	font-weight: 600;
	font-size: 18px;
	line-height: 1;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.cbz-btn--primary  { background: var(--cbz-accent); color: var(--cbz-ink); }
.cbz-btn--primary:hover { background: var(--cbz-accent-hover); color: var(--cbz-ink); }
.cbz-btn--ghost    { background: transparent; color: var(--cbz-text); border: 1px solid var(--cbz-border-ghost); }
.cbz-btn--ghost:hover { border-color: var(--cbz-border-white); color: var(--cbz-display); }
.cbz-btn--soft {
	background: var(--cbz-fill-accent);
	border: 1px solid var(--cbz-border-accent);
	color: var(--cbz-accent-pale);
	padding: 14px 24px;
	font-size: 16px;
}
.cbz-btn--sm { padding: 13px 24px; font-size: 16px; }

/* --- Header -------------------------------------------------------------- */

.cbz-nav {
	position: sticky;
	top: 0;
	z-index: 50;
	border-top: 3px solid var(--cbz-accent);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: var(--cbz-nav-y) var(--cbz-nav-x);
	background: var(--cbz-nav-bg);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--cbz-border);
}
.cbz-nav__links { display: flex; gap: 26px; font-size: var(--cbz-body-sm); font-weight: 500; }
.cbz-nav__links a { color: var(--cbz-text-nav); }
.cbz-nav__links a:hover { color: var(--cbz-display); }

.cbz-logo { display: flex; align-items: center; gap: 14px; color: var(--cbz-secondary); }
.cbz-logo__mark { width: 34px; height: 34px; flex-shrink: 0; }
.cbz-logo__text {
	font-family: var(--cbz-font-display);
	font-weight: 700;
	font-size: 22px;
	letter-spacing: -.5px;
}
.cbz-logo__text span { color: var(--cbz-accent); }

/* Switch lingua. I 44px di altezza su touch sono un requisito, non un vezzo:
   nel prototipo le pill stanno a ~30px, sotto la soglia raccomandata. */
.cbz-lang {
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 3px;
	background: var(--cbz-fill-white);
	border-radius: var(--cbz-radius-pill);
}
.cbz-lang__pill {
	padding: 6px 14px;
	border-radius: var(--cbz-radius-pill);
	font-family: var(--cbz-font-mono);
	font-size: 14px;
	font-weight: 600;
	color: var(--cbz-text-4);
	transition: background-color .2s ease, color .2s ease;
}
.cbz-lang__pill.is-active { background: var(--cbz-accent); color: var(--cbz-ink); }
.cbz-lang__pill:not(.is-active):hover { color: var(--cbz-text); }

@media (max-width: 980px) {
	.cbz-lang__pill { padding: 10px 16px; }
	.cbz-logo__mark { width: 28px; height: 28px; }
	.cbz-logo__text { font-size: 18px; }
	.cbz-nav__links { display: none; }  /* passa nell'hamburger di Divi */
}

/* --- Hero ----------------------------------------------------------------
   Nessuno sfondo qui: lo dà la Section di Divi. L'header è trasparente e porta
   solo padding e il contenuto. Se la Section ha già il suo padding, azzera
   quello della Section o togli la classe cbz-hero. */

.cbz-hero {
	position: relative;
	padding: var(--cbz-hero-top) var(--cbz-section-x) var(--cbz-hero-bottom);
}
.cbz-hero__inner { position: relative; z-index: 2; max-width: var(--cbz-max); margin-inline: auto; text-align: center; }

/*
 * Colore del testo hero — due opzioni:
 *   • default: testo scuro (per sfondi chiari).
 *   • .cbz-hero--light: testo bianco (per sfondi scuri). Aggiungi la classe nel
 *     campo "Classe CSS" della Section Divi che contiene il modulo hero.
 * La parola accentata del titolo resta rossa in entrambe (è il brand).
 * Per un colore diverso dal bianco, sovrascrivi --cbz-hero-fg nella Section.
 */
.cbz-hero--light {
	--cbz-hero-fg: #ffffff;
	--cbz-hero-fg-2: rgba(255, 255, 255, 0.94);
	--cbz-hero-fg-3: rgba(255, 255, 255, 0.86);
	--cbz-hero-line: rgba(255, 255, 255, 0.65);
}
.cbz-hero--light .cbz-h1,
.cbz-hero--light .cbz-stats__num { color: var(--cbz-hero-fg); }
.cbz-hero--light .cbz-hero__sub { color: var(--cbz-hero-fg-2); }
.cbz-hero--light .cbz-stats__label { color: var(--cbz-hero-fg-3); }
.cbz-hero--light .cbz-badge {
	color: var(--cbz-hero-fg);
	background: rgba(255, 255, 255, 0.12);
	border-color: var(--cbz-hero-line);
}
.cbz-hero--light .cbz-btn--ghost { color: var(--cbz-hero-fg); border-color: var(--cbz-hero-line); }
.cbz-hero--light .cbz-btn--ghost:hover { color: var(--cbz-hero-fg); border-color: var(--cbz-hero-fg); }

.cbz-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 16px;
	background: var(--cbz-fill-accent);
	border: 1px solid var(--cbz-border-accent);
	border-radius: var(--cbz-radius-pill);
	font-family: var(--cbz-font-mono);
	font-size: var(--cbz-kicker);
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--cbz-accent-light);
}
.cbz-badge__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cbz-accent); }

/* Hero centrato: titolo e sottotitolo al centro (il testo lo allinea
   .cbz-hero__inner; qui centriamo i blocchi con max-width). */
.cbz-h1 { margin-inline: auto; }

.cbz-hero__sub {
	margin: 26px auto 0;
	font-size: var(--cbz-hero-sub);
	line-height: 1.5;
	color: var(--cbz-text-2);
	max-width: 620px;
	text-wrap: pretty;
}
.cbz-hero__actions { display: flex; gap: 16px; margin-top: 40px; flex-wrap: wrap; justify-content: center; }

/* Statistiche: numeri grandi, centrati, su tre colonne. */
.cbz-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--cbz-gap-stats);
	max-width: 760px;
	margin: 64px auto 0;
}
.cbz-stats > div { text-align: center; }
.cbz-stats__num {
	font-family: var(--cbz-font-display);
	font-weight: 700;
	font-size: var(--cbz-stat);
	color: var(--cbz-display);
}
.cbz-stats__label {
	font-family: var(--cbz-font-mono);
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--cbz-muted);
	margin-top: 4px;
}
@media (max-width: 767px) {
	/* Su telefono i numeri grandi a 3 colonne si accavallano e i testi vanno a
	   capo: li mettiamo in colonna singola, centrati. */
	.cbz-stats { grid-template-columns: 1fr; gap: 20px; max-width: 320px; }
	.cbz-hero__actions .cbz-btn { flex: 1 1 100%; }
}

/* --- Griglie ------------------------------------------------------------- */

.cbz-grid { display: grid; gap: var(--cbz-gap); }
.cbz-grid--3 { grid-template-columns: repeat(3, 1fr); }
.cbz-grid--4 { grid-template-columns: repeat(4, 1fr); }
.cbz-grid--2 { grid-template-columns: 1fr 1fr; gap: var(--cbz-gap-col); }

@media (max-width: 980px) {
	.cbz-grid--3,
	.cbz-grid--4 { grid-template-columns: 1fr 1fr; }
	.cbz-grid--2 { grid-template-columns: 1fr; }
	/* La terza card di una griglia da 3 occupa entrambe le colonne anziché
	   restare orfana a metà riga. */
	.cbz-grid--3 > :nth-child(3):last-child { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
	.cbz-grid--3,
	.cbz-grid--4 { grid-template-columns: 1fr; }
	.cbz-grid--3 > :nth-child(3):last-child { grid-column: auto; }
}

/* --- Card ---------------------------------------------------------------- */

.cbz-card {
	padding: var(--cbz-card-pad);
	background: var(--cbz-card);
	border: 1px solid var(--cbz-border);
	border-radius: var(--cbz-radius);
	box-shadow: var(--cbz-shadow);
}
.cbz-card__num {
	font-family: var(--cbz-font-display);
	font-weight: 700;
	font-size: var(--cbz-body-sm);
	color: var(--cbz-accent);
}
/* Icona al posto del numero: SVG inline in rosso (currentColor) su un box
   rosso tenue. La misura la impone il box; l'SVG riempie 28px. */
.cbz-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: var(--cbz-fill-accent);
	color: var(--cbz-accent);
}
.cbz-card__icon svg { width: 28px; height: 28px; display: block; }
.cbz-card__title {
	font-family: var(--cbz-font-display);
	font-weight: 600;
	font-size: var(--cbz-card-title-sm);
	margin-top: 14px;
	line-height: 1.2;
}
.cbz-card__text {
	font-size: var(--cbz-body-sm);
	line-height: 1.6;
	color: var(--cbz-text-3);
	margin-top: 12px;
	text-wrap: pretty;
}

/* Protagonisti: lista con bullet d'accento */
.cbz-list { display: flex; flex-direction: column; margin-top: 26px; }
.cbz-list__item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid var(--cbz-border);
	font-size: var(--cbz-body);
	color: var(--cbz-text-list);
}
.cbz-list__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cbz-accent); flex-shrink: 0; }

/* Target: box compatti */
.cbz-boxes { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; }
.cbz-box {
	padding: 16px 18px;
	background: var(--cbz-bg-alt);
	border: 1px solid var(--cbz-border);
	border-radius: var(--cbz-radius-sm);
}
.cbz-box__title { font-weight: 600; font-size: 18px; color: var(--cbz-text-strong); }
.cbz-box__text  { font-size: 16px; color: var(--cbz-text-4); margin-top: 3px; }

/* Su tablet la sezione va a colonna singola: tenere i 6 box in fila verticale
   aggiungerebbe ~400px di scroll per niente, ogni box è due righe. */
@media (max-width: 980px) and (min-width: 768px) {
	.cbz-boxes { display: grid; grid-template-columns: 1fr 1fr; }
}

/* --- Card giornata (home) — layout orizzontale --------------------------- */

.cbz-days { display: flex; flex-direction: column; gap: var(--cbz-gap); }

.cbz-day {
	display: grid;
	grid-template-columns: 300px 1fr;
	padding: 0;               /* i pannelli hanno il proprio padding */
	overflow: hidden;
	transition: transform .22s ease, box-shadow .22s ease;
}
.cbz-day:hover {
	transform: translateY(-4px);
	box-shadow: 0 6px 16px rgba(31, 40, 48, .08), 0 18px 40px rgba(31, 40, 48, .10);
}

/* Lato sinistro: data grande, grafica, pulsante. */
.cbz-day__side {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding: var(--cbz-card-pad);
	background: var(--cbz-bg-alt);
	border-right: 1px solid var(--cbz-border);
	overflow: hidden;
}
/* Numero-filigrana decorativo dietro il contenuto. */
.cbz-day__ghost {
	position: absolute;
	top: -22px;
	right: -6px;
	font-family: var(--cbz-font-display);
	font-weight: 700;
	font-size: 150px;
	line-height: 1;
	color: var(--cbz-fill-accent);
	pointer-events: none;
	user-select: none;
	transition: transform .22s ease;
}
.cbz-day:hover .cbz-day__ghost { transform: scale(1.06) translateY(2px); }

.cbz-day__num {
	position: relative;
	font-family: var(--cbz-font-display);
	font-weight: 700;
	font-size: var(--cbz-day-number);
	line-height: .9;
	letter-spacing: var(--cbz-day-number-ls);
	color: var(--cbz-accent);
}
.cbz-day__name {
	position: relative;
	font-family: var(--cbz-font-display);
	font-weight: 600;
	font-size: var(--cbz-day-name);
	color: var(--cbz-text);
	line-height: 1;
}
.cbz-day__when {
	position: relative;
	font-family: var(--cbz-font-mono);
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--cbz-secondary-dark);
	margin-top: 2px;
}
.cbz-day__media {
	position: relative;
	width: 100%;
	height: 120px;
	margin-top: 16px;
}
.cbz-day__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	border-radius: var(--cbz-radius-sm);
}
.cbz-day__cta { position: relative; margin-top: auto; padding-top: 22px; width: 100%; }
.cbz-day__cta .cbz-btn { width: 100%; }
.cbz-day__arrow { transition: transform .22s ease; }
.cbz-day:hover .cbz-day__arrow { transform: translateX(4px); }

/* Lato destro: elenco degli eventi con orario. */
.cbz-day__main { padding: var(--cbz-card-pad); display: flex; align-items: center; }
.cbz-day__items { width: 100%; display: flex; flex-direction: column; }
.cbz-day__item {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding: 12px 0;
	border-top: 1px solid var(--cbz-border);
	font-size: var(--cbz-body);
	line-height: 1.35;
	color: var(--cbz-text);
}
.cbz-day__item:first-child { border-top: 0; }
.cbz-day__time {
	flex-shrink: 0;
	width: 54px;
	font-family: var(--cbz-font-mono);
	font-size: 14px;
	font-weight: 500;
	color: var(--cbz-accent);
}
.cbz-day__da {
	display: block;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.4px;
	text-transform: lowercase;
	color: var(--cbz-text-3);
}
.cbz-day__evtitle { font-weight: 500; }

.cbz-pill {
	display: inline-block;
	align-self: flex-start;
	margin-top: 14px;
	padding: 5px 12px;
	background: var(--cbz-fill-accent-2);
	border-radius: var(--cbz-radius-pill);
	font-size: var(--cbz-kicker);
	font-weight: 600;
	color: var(--cbz-accent-light);
	position: relative;
}

/* Tablet/phone: la card giornata si impila (lato sopra, elenco sotto). */
@media (max-width: 767px) {
	.cbz-day { grid-template-columns: 1fr; }
	.cbz-day__side { border-right: 0; border-bottom: 1px solid var(--cbz-border); }
	.cbz-day__main { display: block; }
}

/* --- Macrotemi ----------------------------------------------------------- */

.cbz-tema {
	padding: 28px;
	background: var(--cbz-gradient-tema);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--cbz-radius);
	box-shadow: var(--cbz-shadow);
}
.cbz-tema__name {
	font-family: var(--cbz-font-display);
	font-weight: 700;
	font-size: var(--cbz-tema);
	color: var(--cbz-ink);
	line-height: 1.1;
}
.cbz-tema__desc { font-size: 16px; line-height: 1.55; color: rgba(255,255,255,.95); margin-top: 12px; text-wrap: pretty; }

.cbz-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; }
.cbz-tag {
	padding: 8px 14px;
	background: var(--cbz-fill-white);
	border: 1px solid var(--cbz-border);
	border-radius: var(--cbz-radius-pill);
	font-size: 16px;
	color: var(--cbz-text-3);
}

/* --- Relatori ------------------------------------------------------------ */

/*
 * Griglia relatori — flexbox centrato (non grid): così l'ultima riga incompleta
 * resta centrata invece di allinearsi a sinistra. Il numero di colonne lo
 * decide lo shortcode (classe cbz-speakers--4/3/2/1, da cbz_griglia_colonne)
 * per non lasciare mai un relatore da solo. La larghezza per colonna è calcolata
 * togliendo i gap.
 */
.cbz-speakers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 32px var(--cbz-gap);
	margin-top: 44px;
}
/* flex-grow 0 + basi che sommano al 100% con i gap = esattamente C per riga.
   Niente max-width sullo speaker, altrimenti gli item si stringono e ne entra
   uno in più per riga, rompendo il conteggio colonne. */
.cbz-speakers--4 .cbz-speaker { flex: 0 0 calc((100% - 3 * var(--cbz-gap)) / 4); }
.cbz-speakers--3 .cbz-speaker { flex: 0 0 calc((100% - 2 * var(--cbz-gap)) / 3); }
.cbz-speakers--2 .cbz-speaker { flex: 0 0 calc((100% - 1 * var(--cbz-gap)) / 2); }
.cbz-speakers--1 .cbz-speaker { flex: 0 0 260px; }

/* Tablet: mai più di 3 colonne. Phone: 2. Il centraggio via justify-content
   tiene comunque in ordine le ultime righe. */
@media (max-width: 980px) {
	.cbz-speakers--4 .cbz-speaker,
	.cbz-speakers--3 .cbz-speaker { flex: 0 0 calc((100% - 2 * var(--cbz-gap)) / 3); }
	.cbz-speakers .cbz-speaker { --cbz-avatar-size: 160px; }
}
@media (max-width: 767px) {
	/* Due colonne su ~343px di contenuto: oltre i 140px l'avatar toccherebbe
	   i bordi della sua colonna. */
	.cbz-speakers .cbz-speaker {
		flex: 0 0 calc((100% - 1 * var(--cbz-gap)) / 2);
		--cbz-avatar-size: 140px;
	}
}

/* Elenco completo [cbz_relatori_tutti]: in ordine alfabetico l'ultima riga va
   a sinistra, non centrata, altrimenti la lettura salta. Colonne come sopra:
   4 o 3 su desktop, 3 su tablet, 2 su phone. */
.cbz-speakers--elenco {
	justify-content: flex-start;
	row-gap: 44px;
	margin-top: 0;
}

/* La misura dell'avatar sta in una variabile perché la stessa cifra serve
   anche all'attributo `sizes` dell'immagine (inc/shortcodes.php): se cambia
   qui, va cambiata anche là, altrimenti il browser scarica il ritaglio
   sbagliato. */
.cbz-speaker {
	text-align: center;
	--cbz-avatar-size: 180px;
}
.cbz-speaker__photo {
	width: var(--cbz-avatar-size); height: var(--cbz-avatar-size);
	border-radius: 50%;
	object-fit: cover;
	margin-inline: auto;
	background: var(--cbz-gradient-avatar);
	border: 4px solid var(--cbz-card);
	box-shadow: 0 0 0 1px var(--cbz-border), var(--cbz-shadow);
	transition: transform .2s ease, box-shadow .2s ease;
}
.cbz-speaker__photo:hover {
	transform: translateY(-3px);
	box-shadow: 0 0 0 2px var(--cbz-accent), 0 8px 22px rgba(31, 40, 48, .12);
}
/* Placeholder iniziali quando il relatore non ha foto (indipendente dal chip
   della timeline, che ha dimensioni sue). La misura viene da .cbz-speaker__photo. */
.cbz-speaker__initials {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--cbz-font-display);
	font-weight: 700;
	font-size: calc(var(--cbz-avatar-size) / 3);
	color: var(--cbz-ink);
}
.cbz-speaker__name { font-weight: 600; font-size: 21px; color: var(--cbz-text-strong); margin-top: 20px; line-height: 1.25; }
.cbz-speaker__role { font-size: 16px; color: var(--cbz-text-4); margin-top: 5px; line-height: 1.4; }

/* Chip relatore dentro la card evento */
/* Un relatore per riga: affiancati, i chip si spezzavano su due righe a
   larghezze intermedie e il nome andava a capo dentro la pillola. */
.cbz-chips {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 10px;
	margin-top: 12px;
}
.cbz-chip {
	padding: 8px 20px 8px 8px;
	background: var(--cbz-fill-chip);
	border: 1px solid var(--cbz-border-chip);
	border-radius: var(--cbz-radius-pill);
}
/* La testata è la riga avatar + nome: da sola nel chip statico, dentro
   <summary> quando il chip apre la bio a tendina. */
.cbz-chip__head {
	display: flex;
	align-items: center;
	gap: 13px;
	list-style: none;
}
.cbz-chip__head::-webkit-details-marker { display: none; }
.cbz-chip__avatar {
	width: 48px; height: 48px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--cbz-gradient-avatar);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--cbz-font-display);
	font-size: 17px;
	font-weight: 700;
	color: var(--cbz-ink);
	flex-shrink: 0;
}
.cbz-chip { max-width: 100%; }
.cbz-chip__name { font-size: 17px; font-weight: 600; color: var(--cbz-text); line-height: 1.2; }
.cbz-chip__role { font-size: 15px; color: var(--cbz-text-4); line-height: 1.2; margin-top: 1px; }

.cbz-label {
	font-family: var(--cbz-font-mono);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--cbz-muted);
}

/* --- Timeline eventi (pagina giornata) ----------------------------------- */

.cbz-timeline__row {
	display: grid;
	grid-template-columns: var(--cbz-time-col) 1fr;
	gap: 28px;
	padding: 28px 0;
	border-top: 1px solid var(--cbz-border-chip);
}
/*
 * Gli item di una griglia hanno min-width:auto: se il contenuto ha una
 * larghezza minima maggiore della traccia, la traccia si allarga e la card
 * esce dallo schermo invece di comprimersi. Con il pannello a due colonne
 * (testo + bottoni) succede sotto i 400px. min-width:0 restituisce il
 * comando alla griglia.
 */
.cbz-timeline__row > * { min-width: 0; }
.cbz-timeline__time {
	font-family: var(--cbz-font-display);
	font-weight: 700;
	font-size: var(--cbz-time);
	color: var(--cbz-display);
}
.cbz-timeline__da {
	display: block;
	font-family: var(--cbz-font-mono);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.4px;
	text-transform: lowercase;
	color: var(--cbz-text-3);
}
.cbz-timeline__format {
	display: inline-block;
	margin-top: 10px;
	padding: 4px 11px;
	background: var(--cbz-fill-accent-2);
	border-radius: var(--cbz-radius-pill);
	font-family: var(--cbz-font-mono);
	font-size: 13px;
	font-weight: 600;
	color: var(--cbz-accent-light);
}

.cbz-event {
	background: var(--cbz-card);
	border: 1px solid var(--cbz-border);
	border-radius: var(--cbz-radius);
	box-shadow: var(--cbz-shadow);
	padding: var(--cbz-card-pad);
}
.cbz-event__loc {
	font-family: var(--cbz-font-mono);
	font-size: var(--cbz-kicker);
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--cbz-muted);
}
.cbz-event__title {
	font-family: var(--cbz-font-display);
	font-weight: 600;
	font-size: var(--cbz-card-title);
	margin-top: 8px;
	line-height: 1.2;
	overflow-wrap: anywhere;  /* un titolo con un URL dentro non sfonda la card */
}
.cbz-event__text {
	font-size: var(--cbz-body-sm);
	line-height: 1.6;
	color: var(--cbz-text-3);
	margin-top: 12px;
	max-width: 560px;
	text-wrap: pretty;
}

/*
 * Descrizione estesa in HTML (editor dell'evento): immagini responsive più i
 * ritmi tipografici di base. Vale ovunque si renda contenuto redazionale ricco.
 */
.cbz-richtext > :first-child { margin-top: 0; }
.cbz-richtext p { margin-top: 12px; }
.cbz-richtext img {
	max-width: 100%;
	height: auto;
	display: block;
	border-radius: var(--cbz-radius-sm);
	margin: 16px 0;
}
.cbz-richtext a { color: var(--cbz-accent-soft); text-decoration: underline; }
.cbz-richtext a:hover { color: var(--cbz-accent-light); }
.cbz-richtext ul,
.cbz-richtext ol { margin: 12px 0 12px 20px; }
.cbz-richtext li { margin-top: 6px; }
.cbz-richtext h3,
.cbz-richtext h4 {
	font-family: var(--cbz-font-display);
	font-weight: 600;
	color: var(--cbz-text);
	margin-top: 18px;
	line-height: 1.25;
}
.cbz-richtext figure { margin: 16px 0; }
.cbz-richtext figcaption {
	font-size: 14px;
	color: var(--cbz-muted);
	margin-top: 6px;
}
.cbz-richtext strong { color: var(--cbz-text); }

.cbz-event__speakers { margin-top: 18px; }
.cbz-event__cta {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	margin-top: 16px;
}

/*
 * Phone: le due colonne diventano una, e orario + formato passano in una riga
 * sopra la card. A 767px la colonna destra avrebbe ~210px utili — il titolo a
 * 24px andrebbe a capo tre volte e i chip non starebbero affiancati. Portando
 * il "quando" sopra, la card riprende tutta la larghezza e l'ordine di lettura
 * resta quello giusto: quando → cosa.
 */
@media (max-width: 767px) {
	.cbz-timeline__row {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.cbz-timeline__meta {
		display: flex;
		align-items: center;
		gap: 12px;
		margin-bottom: 12px;
	}
	.cbz-timeline__format { margin-top: 0; }
}

/* --- Navigazione alle altre giornate (fondo pagina giornata) ------------- */

.cbz-daynav { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--cbz-border); }
.cbz-daynav__links { display: flex; gap: var(--cbz-gap); margin-top: 20px; flex-wrap: wrap; }
.cbz-daynav__item {
	flex: 1 1 220px;
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding: 22px 24px;
	background: var(--cbz-card);
	border: 1px solid var(--cbz-border);
	border-radius: var(--cbz-radius);
	box-shadow: var(--cbz-shadow);
	transition: transform .2s ease, box-shadow .2s ease;
}
.cbz-daynav__item:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 10px rgba(31, 40, 48, .07), 0 12px 30px rgba(31, 40, 48, .08);
}
.cbz-daynav__num {
	font-family: var(--cbz-font-display);
	font-weight: 700;
	font-size: var(--cbz-card-number);
	color: var(--cbz-accent);
	line-height: 1;
}
.cbz-daynav__name {
	font-family: var(--cbz-font-display);
	font-weight: 600;
	font-size: var(--cbz-card-title-sm);
	color: var(--cbz-text);
}
.cbz-daynav__arrow { margin-left: auto; color: var(--cbz-accent); font-size: 20px; align-self: center; }

/* --- Hero pagina giornata ------------------------------------------------ */

.cbz-dayhero { position: relative; padding: 80px var(--cbz-section-x) 56px; max-width: var(--cbz-max-narrow); margin-inline: auto; }
.cbz-dayhero__glow {
	position: absolute;
	top: -40px; right: -100px;
	width: 460px; height: 460px;
	background: radial-gradient(circle, var(--cbz-glow-soft), transparent 68%);
	pointer-events: none;
}
.cbz-dayhero__head { position: relative; display: flex; align-items: flex-end; gap: 24px; margin-top: 26px; flex-wrap: wrap; }
.cbz-dayhero__num {
	font-family: var(--cbz-font-display);
	font-weight: 700;
	font-size: var(--cbz-day-number);
	line-height: .85;
	letter-spacing: var(--cbz-day-number-ls);
	color: var(--cbz-accent);
}
.cbz-dayhero__name { font-size: var(--cbz-day-name); letter-spacing: -1px; line-height: 1; }
.cbz-dayhero__month { font-size: var(--cbz-lead); color: var(--cbz-text-2); margin-top: 8px; }
.cbz-dayhero__meta { position: relative; display: flex; gap: 24px; margin-top: 28px; flex-wrap: wrap; }
.cbz-dayhero__metaitem {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--cbz-font-mono);
	font-size: 16px;
	color: var(--cbz-text-4);
}
.cbz-dayhero__metaitem::before { content: "◆"; color: var(--cbz-accent); }

.cbz-dayimage { height: var(--cbz-img-day-hero); }
.cbz-dayimage img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }

/* --- Lightbox prenotazioni (JotForm) ------------------------------------- */

/*
 * <dialog> nativo: gestisce da solo focus trap, Esc e backdrop. L'iframe parte
 * vuoto e riceve l'URL del modulo solo all'apertura (vedi lightbox.js).
 */
.cbz-lightbox {
	width: min(680px, 94vw);
	max-width: 94vw;
	height: min(860px, 92vh);
	padding: 0;
	border: 1px solid var(--cbz-border-strong);
	border-radius: var(--cbz-radius-lg);
	background: var(--cbz-card);
	color: var(--cbz-text);
	box-shadow: 0 20px 60px rgba(31,40,48,.25);
	overflow: hidden;
}
.cbz-lightbox::backdrop {
	background: rgba(0, 0, 0, .6);
	backdrop-filter: blur(2px);
}
/* Fallback per browser senza showModal(): lo rendiamo overlay centrato. */
.cbz-lightbox[open] {
	position: fixed;
	inset: 0;
	margin: auto;
	z-index: 1000;
}
.cbz-lightbox__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: 52px;
	padding: 0 12px 0 18px;
	border-bottom: 1px solid var(--cbz-border);
}
.cbz-lightbox__title {
	font-family: var(--cbz-font-display);
	font-weight: 600;
	font-size: 16px;
	color: var(--cbz-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.cbz-lightbox__close {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--cbz-fill-white);
	border: none;
	border-radius: var(--cbz-radius-pill);
	color: var(--cbz-text);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s ease;
}
.cbz-lightbox__close:hover { background: var(--cbz-fill-chip); }
.cbz-lightbox__frame {
	display: block;
	width: 100%;
	height: calc(100% - 52px);
	border: 0;
	/* I moduli JotForm sono su fondo chiaro: evita il lampo scuro→chiaro al caricamento. */
	background: #fff;
}

/* --- Footer -------------------------------------------------------------- */

.cbz-footer {
	padding: 56px var(--cbz-section-x);
	border-top: 1px solid var(--cbz-border-strong);
	background: var(--cbz-footer);
}
.cbz-footer__inner {
	max-width: var(--cbz-max);
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
.cbz-footer__note   { font-size: 16px; color: var(--cbz-muted); }
.cbz-footer__credit { font-family: var(--cbz-font-mono); font-size: var(--cbz-kicker); color: var(--cbz-muted); }

@media (max-width: 767px) {
	.cbz-footer { padding: 40px var(--cbz-section-x); }
	.cbz-footer__inner { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/*
 * Footer loghi (patrocini e collaborazioni), costruito nel Theme Builder.
 * Classe "cbz-loghi" sulla Section. Divi distanzia le righe con tre cose
 * insieme — padding Section (62px), padding Row (~27px) e gap del flex —
 * quindi si azzerano tutte e tre. Il selettore ricalca quello di Divi
 * (.et-db #et-boc .et-l …) per vincere senza !important.
 */
.et-db #et-boc .et-l .et_pb_section.cbz-loghi {
	padding: 25px 0;
	row-gap: 0;
}
.et-db #et-boc .et-l .cbz-loghi .et_pb_row {
	padding: 6px 0;
	row-gap: 12px; /* loghi impilati su phone */
}
.et-db #et-boc .et-l .cbz-loghi .et_pb_module {
	margin-bottom: 0;
}
/* Un po' d'aria solo prima dei titoli "Con il patrocinio" / "In collaborazione". */
.et-db #et-boc .et-l .cbz-loghi .et_pb_row:has(.et_pb_text) {
	padding-top: 20px;
	padding-bottom: 4px;
}
.et-db #et-boc .et-l .cbz-loghi .et_pb_row:first-child {
	padding-top: 0;
}

/* --- Stato vuoto --------------------------------------------------------- */

.cbz-empty {
	padding: 40px;
	border: 1px dashed var(--cbz-border-strong);
	border-radius: var(--cbz-radius);
	color: var(--cbz-text-4);
	text-align: center;
	font-size: var(--cbz-body);
}

/* --- Card evento: tendina (<details>) ------------------------------------ */
/*
 * Chiusa si leggono solo luogo e titolo; descrizione, relatori e bottoni stanno
 * nel pannello. Nessun JavaScript: <details>/<summary> gestisce apertura,
 * tastiera e stato per lo screen reader da sé, e in stampa il contenuto esce
 * comunque. Il default chiuso è deciso lato PHP (campo "Tendina aperta").
 */

.cbz-event__head {
	display: flex;
	/* flex-end: bottone e freccia scendono all'altezza del titolo, cioe' in
	   fondo al blocco luogo+titolo — e a card chiusa in fondo al box. */
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	cursor: pointer;
	list-style: none;  /* toglie il triangolino nativo (Firefox, Safari) */
}
.cbz-event__heading { flex: 1; }
.cbz-event__head::-webkit-details-marker { display: none; }
.cbz-event__heading { min-width: 0; }
/* Il pannello torna a due colonne come la card di prima: descrizione e
   relatori a sinistra, bottoni incolonnati a destra e allineati in alto —
   cioe' subito sotto la riga che apre la tendina. */
.cbz-event__panel {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	padding-top: 2px;
}
.cbz-event__body { flex: 1 1 260px; min-width: 0; }

/* Card senza niente da nascondere: resta un box statico, senza freccia né
   area cliccabile che non porterebbe da nessuna parte. */
.cbz-event--static .cbz-event__head { cursor: default; }
.cbz-event--static .cbz-event__panel { display: none; }

.cbz-event__chev {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px; height: 34px;
	border-radius: 50%;
	color: var(--cbz-accent);
	background: var(--cbz-fill-accent);
	transition: transform .25s ease, background-color .2s ease;
}
.cbz-event__head:hover .cbz-event__chev { background: var(--cbz-fill-accent-2); }
.cbz-event__fold[open] > .cbz-event__head .cbz-event__chev { transform: rotate(180deg); }

/* Prenota: nella testata, non nel pannello — resta visibile a card chiusa.
   Nel flusso e non in posizione assoluta, cosi' il titolo gli lascia posto
   qualunque sia la lunghezza dell'etichetta (Prenota / Reservieren). */
.cbz-event__book { flex-shrink: 0; }
.cbz-event__book .cbz-btn { white-space: nowrap; }

/*
 * Apertura animata dove il browser la supporta (::details-content, Chrome 131+
 * e Safari 18.4+). Altrove la tendina scatta aperta di colpo: è il
 * comportamento nativo, corretto comunque. interpolate-size sta sulla card e
 * non su :root per non cambiare il calcolo delle altezze altrove.
 */
@supports selector(::details-content) {
	.cbz-event__fold { interpolate-size: allow-keywords; }
	.cbz-event__fold::details-content {
		block-size: 0;
		overflow: clip;
		transition: block-size .3s ease, content-visibility .3s;
		transition-behavior: allow-discrete;
	}
	.cbz-event__fold[open]::details-content { block-size: auto; }
}

/* --- Chip relatore: bio a tendina ---------------------------------------- */

.cbz-chip--bio .cbz-chip__head { cursor: pointer; }
/* flex:1 tiene la freccia in fondo alla riga quando il chip si allarga da
   aperto; sul chip chiuso, largo quanto il contenuto, non cambia nulla. */
.cbz-chip__ident { flex: 1; min-width: 0; }
.cbz-chip__chev {
	display: inline-flex;
	margin-left: 4px;
	flex-shrink: 0;
	color: var(--cbz-accent);
	transition: transform .25s ease;
}
.cbz-chip--bio[open] {
	/* Aperto, il chip si allarga a tutta la colonna: la bio a larghezza di
	   pillola sarebbe una colonna di tre parole. In flex verticale la
	   larghezza si prende con align-self, non con flex-basis. */
	align-self: stretch;
	border-radius: var(--cbz-radius);
	padding-bottom: 14px;
	background: var(--cbz-card);
	border-color: var(--cbz-border-strong);
}
.cbz-chip--bio[open] .cbz-chip__chev { transform: rotate(180deg); }
.cbz-chip__bio {
	padding: 12px 10px 0 69px;  /* 69px = avatar 48 + gap 13 + padding 8: la bio si allinea al nome */
	font-size: var(--cbz-body-sm);
	line-height: 1.6;
	color: var(--cbz-text-3);
	max-width: 640px;
}
.cbz-chip__bio > :first-child { margin-top: 0; }

@media (max-width: 767px) {
	.cbz-chip__bio { padding-left: 10px; }
}

/* --- Evento in evidenza (serale): card rossa, testi bianchi -------------- */
/*
 * Bianco su #e30613 dà 4.88:1 — AA anche per il testo piccolo, ma solo a piena
 * opacità: qualunque rgba(255,255,255,.8) scende sotto la soglia. Per questo la
 * gerarchia qui la fanno corpo e dimensione, non l'opacità, e i chip relatore
 * diventano bianchi pieni invece che un velo chiaro sul rosso.
 */

.cbz-timeline__row--hl .cbz-timeline__time { color: var(--cbz-accent); }

.cbz-event--hl {
	background: var(--cbz-accent);
	border-color: var(--cbz-accent-deep);
	box-shadow: 0 10px 30px rgba(227, 6, 19, 0.22);
}
.cbz-event--hl .cbz-event__loc,
.cbz-event--hl .cbz-event__title,
.cbz-event--hl .cbz-event__text,
.cbz-event--hl .cbz-label,
.cbz-event--hl .cbz-richtext strong,
.cbz-event--hl .cbz-richtext h3,
.cbz-event--hl .cbz-richtext h4 { color: var(--cbz-ink); }
.cbz-event--hl .cbz-event__loc { opacity: 1; }
.cbz-event--hl .cbz-richtext a { color: var(--cbz-ink); }
.cbz-event--hl .cbz-richtext a:hover { color: var(--cbz-ink); text-decoration-thickness: 2px; }

.cbz-event--hl .cbz-event__chev { background: rgba(255, 255, 255, 0.18); color: var(--cbz-ink); }
.cbz-event--hl .cbz-event__head:hover .cbz-event__chev { background: rgba(255, 255, 255, 0.3); }

.cbz-event--hl .cbz-chip { background: #fff; border-color: #fff; }
.cbz-event--hl .cbz-chip__chev { color: var(--cbz-accent); }

/* Il bottone pieno si inverte: rosso su rosso sparirebbe. */
.cbz-event--hl .cbz-btn--primary { background: #fff; color: var(--cbz-accent); }
.cbz-event--hl .cbz-btn--primary:hover { background: rgba(255, 255, 255, 0.86); color: var(--cbz-accent); }
.cbz-event--hl .cbz-btn--ghost { color: var(--cbz-ink); border-color: rgba(255, 255, 255, 0.6); }
.cbz-event--hl .cbz-btn--ghost:hover { color: var(--cbz-ink); border-color: #fff; }
.cbz-event--hl :focus-visible { outline-color: #fff; }

/* --- [cbz_evidenza]: gli eventi in evidenza in home --------------------- */
/*
 * Le card sono quelle della timeline, disposte in griglia. Il numero di
 * colonne lo decide lo shortcode (classe cbz-evidenza--3/2/1, da
 * cbz_colonne_evidenza) in base a quanti eventi sono.
 */

.cbz-evidenza {
	display: grid;
	gap: var(--cbz-gap);
	align-items: stretch;
}
.cbz-evidenza--3 { grid-template-columns: repeat(3, 1fr); }
.cbz-evidenza--2 { grid-template-columns: repeat(2, 1fr); }
.cbz-evidenza--1 { grid-template-columns: 1fr; }

/* In colonna stretta l'orario non sta accanto alla card: passa sopra, come
   fa la timeline su telefono. Via anche il filetto divisorio, qui le card
   sono gia' separate dalla griglia. */
.cbz-evidenza .cbz-timeline__row {
	grid-template-columns: 1fr;
	/* auto 1fr, non due righe automatiche: le celle della griglia hanno tutte
	   l'altezza della piu' alta, e senza questo lo spazio in piu' finirebbe
	   anche nella riga dell'orario, che scenderebbe piu' in basso nelle card
	   corte. L'orario resta in cima, la card si prende il resto. */
	grid-template-rows: auto 1fr;
	align-content: start;
	gap: 0;
	padding: 0;
	border-top: 0;
	height: 100%;
}
.cbz-evidenza .cbz-timeline__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 12px;
	margin-bottom: 12px;
}
.cbz-evidenza .cbz-timeline__format { margin-top: 0; }
.cbz-evidenza .cbz-timeline__da { display: inline; }

/* Card alte uguali sulla stessa riga: senza, due card affiancate con testi di
   lunghezza diversa finiscono sfalsate in basso. */
.cbz-evidenza .cbz-event { height: 100%; }

/* Il giorno davanti all'orario: in home serve a dire di quale dei tre si
   tratta. */
.cbz-timeline__day {
	font-family: var(--cbz-font-mono);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--cbz-accent);
}
.cbz-evidenza .cbz-timeline__day { order: -1; }

/*
 * Quando la cella e' stretta la card prende le scelte del telefono: titolo a
 * riga piena, bottone e freccia sotto, "Scopri di piu'" a tutta larghezza.
 * La soglia e' la larghezza della CELLA, non quella della finestra: a tre
 * colonne su desktop una cella sta sui 380px, ma due colonne su un tablet da
 * 900 ne danno 410 — stesso problema, viewport diverso. Con @container la
 * regola segue la cella e non serve indovinare le combinazioni.
 */
.cbz-evidenza .cbz-timeline__row { container-type: inline-size; }

@container (max-width: 520px) {
	.cbz-event__head { flex-wrap: wrap; }
	.cbz-event__heading { flex: 1 1 100%; }
	.cbz-event__book { margin-left: auto; }
	.cbz-event__body { flex-basis: 100%; }
	.cbz-event__cta { width: 100%; }
	.cbz-event__cta .cbz-btn { width: 100%; }
}

/* Browser senza container query: si ripiega sul conteggio delle colonne, che
   e' l'approssimazione buona nel caso piu' comune (tre colonne su desktop). */
@supports not (container-type: inline-size) {
	@media (min-width: 981px) {
		.cbz-evidenza--3 .cbz-event__head { flex-wrap: wrap; }
		.cbz-evidenza--3 .cbz-event__heading { flex: 1 1 100%; }
		.cbz-evidenza--3 .cbz-event__book { margin-left: auto; }
		.cbz-evidenza--3 .cbz-event__body { flex-basis: 100%; }
		.cbz-evidenza--3 .cbz-event__cta { width: 100%; }
		.cbz-evidenza--3 .cbz-event__cta .cbz-btn { width: 100%; }
	}
}

@media (max-width: 980px) {
	/* Tre card da ~230px sarebbero strette come un telefono ma senza il suo
	   spazio verticale: a tablet si scende a due. */
	.cbz-evidenza--3 { grid-template-columns: repeat(2, 1fr); }
	/* La terza card di una griglia da 3 prende la riga intera invece di
	   restare orfana a meta'. */
	.cbz-evidenza--3 > :nth-child(3):last-child { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
	.cbz-evidenza--3,
	.cbz-evidenza--2 { grid-template-columns: 1fr; }
	.cbz-evidenza--3 > :nth-child(3):last-child { grid-column: auto; }
}

/* --- Card evento su telefono -------------------------------------------- */
/*
 * Sta qui e non nel @media della timeline piu' sopra: le regole base della
 * card sono definite dopo quel blocco e, a parita' di specificita', vincono
 * per posizione. Un override telefono va scritto dopo cio' che deve battere.
 */
@media (max-width: 767px) {
	/* A colonna singola il testo prende la riga intera e "Scopri di piu'" va
	   sotto: con flex-basis 260px il pannello pretendeva piu' spazio del
	   telefono. */
	.cbz-event__body { flex-basis: 100%; }
	.cbz-event__cta { width: 100%; margin-top: 18px; }
	.cbz-event__cta .cbz-btn { width: 100%; }

	/* Titolo, Prenota e freccia sulla stessa riga lascerebbero al titolo un
	   centinaio di pixel a 360px: il titolo si prende la riga e la coppia
	   bottone+freccia scende sotto, allineata a destra. */
	.cbz-event__head { gap: 12px; flex-wrap: wrap; }
	.cbz-event__heading { flex: 1 1 100%; }
	.cbz-event__book { margin-left: auto; }
	.cbz-event__chev { width: 30px; height: 30px; }
	.cbz-chips { gap: 8px; }
}

/* --- Archivio dei sotto-eventi (pagina di un evento contenitore) --------- */
/*
 * La pagina riusa per intero l'impaginato della giornata (.cbz-dayhero,
 * .cbz-timeline, .cbz-daynav): qui restano solo i pochi elementi che la
 * giornata non ha — l'introduzione presa dall'editor, la prenotazione del
 * contenitore e i suoi relatori.
 */

.cbz-evento__intro { max-width: 620px; margin-top: 24px; }
.cbz-evento__cta { position: relative; margin-top: 28px; }
.cbz-evento__speakers { margin-bottom: 36px; }

/* --- Accessibilità ------------------------------------------------------- */

.cbz :focus-visible {
	outline: 2px solid var(--cbz-accent-light);
	outline-offset: 3px;
	border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.cbz *,
	.cbz *::before,
	.cbz *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}