/* ==========================================================================
   Etna Today — Programmazione
   Widget Elementor custom. Stesso rendering in editor e frontend.
   ========================================================================== */

.etprog-header,
.etprog-card,
.etprog-note {
	--etprog-accent: #ec1c26;
	--etprog-ink: #14181f;
	--etprog-text: #4a5260;
	--etprog-muted: #8a93a2;
	--etprog-line: #e7eaef;
	--etprog-card-bg: #ffffff;
	--etprog-radius: 20px;
	--etprog-surface: #f6f7f9;

	box-sizing: border-box;
	font-family: inherit;
	-webkit-font-smoothing: antialiased;
}

.etprog-header *,
.etprog-card *,
.etprog-note * {
	box-sizing: border-box;
}

/* ==========================================================================
   1. INTESTAZIONE
   ========================================================================== */

.etprog-header {
	position: relative;
	padding: 8px 0 4px;
	color: var(--etprog-text);
}

.etprog-eyebrow {
	display: inline-block;
	margin: 0 0 14px;
	padding: 6px 14px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--etprog-accent) 10%, transparent);
	color: var(--etprog-accent);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.4;
}

.etprog-header__title {
	margin: 0 0 10px;
	color: var(--etprog-ink);
	font-size: clamp(28px, 4.4vw, 46px);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.02em;
}

.etprog-header__period {
	position: relative;
	display: inline-block;
	margin: 0 0 26px;
	padding-bottom: 12px;
	color: var(--etprog-accent);
	font-size: clamp(15px, 1.7vw, 19px);
	font-weight: 600;
	letter-spacing: 0.02em;
}

.etprog-header__period::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 56px;
	height: 3px;
	transform: translateX(-50%);
	border-radius: 999px;
	background: linear-gradient(90deg, var(--etprog-accent), color-mix(in srgb, var(--etprog-accent) 35%, transparent));
}

/* Contatti in flusso inline: cosi' seguono il controllo "Allineamento"
   di Elementor, che agisce via text-align sul contenitore. */
.etprog-header__contacts {
	display: block;
}

.etprog-header__contacts-label {
	display: block;
	margin-bottom: 10px;
	color: var(--etprog-muted);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.etprog-chips {
	display: block;
	margin: -5px;
}

.etprog-chip {
	margin: 5px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border: 1px solid var(--etprog-line);
	border-radius: 999px;
	background: #fff;
	color: var(--etprog-ink);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.etprog-chip:hover,
.etprog-chip:focus-visible {
	transform: translateY(-2px);
	border-color: color-mix(in srgb, var(--etprog-accent) 40%, var(--etprog-line));
	color: var(--etprog-accent);
	box-shadow: 0 8px 20px -8px rgba(16, 24, 40, 0.22);
	text-decoration: none;
}

.etprog-chip:focus-visible {
	outline: 2px solid var(--etprog-accent);
	outline-offset: 2px;
}

.etprog-chip__ico {
	width: 16px;
	height: 16px;
	flex: none;
	fill: var(--etprog-accent);
}

.etprog-chip--wa .etprog-chip__ico {
	fill: #25d366;
}

/* ==========================================================================
   2. SCHEDA STRUTTURA
   ========================================================================== */

.etprog-card {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--etprog-line);
	border-radius: var(--etprog-radius);
	background: var(--etprog-card-bg);
	color: var(--etprog-text);
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 32px -18px rgba(16, 24, 40, 0.28);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.etprog-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: linear-gradient(90deg, var(--etprog-accent), color-mix(in srgb, var(--etprog-accent) 25%, transparent));
	z-index: 2;
}

.etprog-card:hover {
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 22px 48px -22px rgba(16, 24, 40, 0.34);
}

.etprog-card__media {
	position: relative;
	margin: 0;
	aspect-ratio: 21 / 9;
	overflow: hidden;
	background: var(--etprog-surface);
}

.etprog-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.etprog-card:hover .etprog-card__media img {
	transform: scale(1.03);
}

.etprog-card__body {
	padding: clamp(22px, 3vw, 34px);
}

/* --- testata --- */

.etprog-card__head {
	margin-bottom: 22px;
}

.etprog-card__title {
	margin: 0 0 8px;
	color: var(--etprog-ink);
	font-size: clamp(19px, 2.2vw, 25px);
	font-weight: 750;
	line-height: 1.25;
	letter-spacing: -0.015em;
}

.etprog-card__sub {
	margin: 0;
	color: var(--etprog-muted);
	font-size: 15px;
	line-height: 1.6;
}

.etprog-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	padding: 7px 14px 7px 12px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.01em;
}

.etprog-badge__dot {
	width: 7px;
	height: 7px;
	flex: none;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent);
}

.etprog-badge--obbligatoria {
	background: #fef2f2;
	color: #c5221f;
}

.etprog-badge--non-necessaria {
	background: #ecfdf3;
	color: #067647;
}

.etprog-badge--consigliata {
	background: #fffaeb;
	color: #b54708;
}

/* --- info rapide --- */

.etprog-info {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 2px;
	margin-bottom: 26px;
	padding: 4px;
	border-radius: 14px;
	background: var(--etprog-surface);
}

.etprog-info__item {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	padding: 14px 16px;
	border-radius: 11px;
	background: transparent;
	transition: background 0.2s ease;
}

.etprog-info__item:hover {
	background: #fff;
}

.etprog-info__ico {
	width: 18px;
	height: 18px;
	flex: none;
	margin-top: 2px;
	fill: var(--etprog-accent);
	opacity: 0.9;
}

.etprog-info__txt {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.etprog-info__label {
	color: var(--etprog-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.3;
}

.etprog-info__value {
	color: var(--etprog-ink);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

/* --- programma --- */

.etprog-sched {
	display: flex;
	flex-direction: column;
}

.etprog-sched__period {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px 12px;
	margin: 22px 0 6px;
	padding-bottom: 10px;
	border-bottom: 2px solid color-mix(in srgb, var(--etprog-accent) 16%, transparent);
}

.etprog-sched__period:first-child {
	margin-top: 0;
}

.etprog-sched__period-name {
	color: var(--etprog-ink);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.etprog-sched__period-note {
	color: var(--etprog-muted);
	font-size: 13px;
	font-weight: 500;
	font-style: italic;
}

.etprog-row {
	display: grid;
	grid-template-columns: minmax(150px, 0.9fr) 1fr auto;
	align-items: baseline;
	gap: 6px 20px;
	padding: 15px 14px;
	margin: 0 -14px;
	border-radius: 12px;
	border-bottom: 1px solid var(--etprog-line);
	transition: background 0.2s ease;
}

.etprog-row:last-child {
	border-bottom: 0;
}

.etprog-row:hover {
	background: var(--etprog-surface);
}

.etprog-row.is-highlight {
	background: color-mix(in srgb, var(--etprog-accent) 6%, transparent);
	border-bottom-color: transparent;
	box-shadow: inset 3px 0 0 var(--etprog-accent);
}

.etprog-row__when {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.etprog-row__date {
	color: var(--etprog-ink);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
}

.etprog-row__time {
	color: var(--etprog-accent);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
}

.etprog-row__what {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.etprog-row__title {
	color: var(--etprog-ink);
	font-size: 15.5px;
	font-weight: 650;
	line-height: 1.45;
}

.etprog-row__desc {
	color: var(--etprog-muted);
	font-size: 13.5px;
	line-height: 1.55;
}

.etprog-row__badge {
	justify-self: end;
	align-self: center;
	padding: 5px 12px;
	border: 1px solid color-mix(in srgb, var(--etprog-accent) 25%, var(--etprog-line));
	border-radius: 999px;
	background: color-mix(in srgb, var(--etprog-accent) 7%, #fff);
	color: var(--etprog-accent);
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
}

/* --- nota di chiusura scheda --- */

.etprog-card__note {
	margin: 22px 0 0;
	padding-top: 18px;
	border-top: 1px dashed var(--etprog-line);
	color: var(--etprog-muted);
	font-size: 13.5px;
	line-height: 1.65;
}

/* ==========================================================================
   3. AVVISO
   ========================================================================== */

.etprog-note {
	--etprog-note: #2563eb;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 18px 20px;
	border: 1px solid color-mix(in srgb, var(--etprog-note) 22%, transparent);
	border-left: 4px solid var(--etprog-note);
	border-radius: 16px;
	background: color-mix(in srgb, var(--etprog-note) 5%, #fff);
	color: var(--etprog-text);
}

.etprog-note--warning {
	--etprog-note: #d97706;
}

.etprog-note--danger {
	--etprog-note: #dc2626;
}

.etprog-note--success {
	--etprog-note: #059669;
}

.etprog-note__ico {
	width: 20px;
	height: 20px;
	flex: none;
	margin-top: 1px;
	fill: var(--etprog-note);
}

.etprog-note__body {
	min-width: 0;
}

.etprog-note__title {
	display: block;
	margin-bottom: 4px;
	color: var(--etprog-ink);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
}

.etprog-note__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.65;
}

.etprog-note__list {
	margin: 8px 0 0;
	padding-left: 18px;
	font-size: 14px;
	line-height: 1.65;
}

.etprog-note__list li {
	margin-bottom: 4px;
}

/* ==========================================================================
   4. RESPONSIVE
   ========================================================================== */

@media (max-width: 767px) {

	.etprog-info {
		grid-template-columns: 1fr;
	}

	.etprog-row {
		grid-template-columns: 1fr;
		gap: 6px;
		padding: 14px 12px;
		margin: 0 -12px;
	}

	.etprog-row__badge {
		justify-self: start;
		margin-top: 4px;
	}

	.etprog-row.is-highlight {
		box-shadow: inset 3px 0 0 var(--etprog-accent);
	}

	.etprog-header__contacts {
		flex-direction: column;
		gap: 12px;
	}

	.etprog-chip {
		font-size: 13.5px;
		padding: 9px 14px;
	}
}

/* ==========================================================================
   5. STAMPA
   ========================================================================== */

@media print {

	.etprog-card {
		box-shadow: none;
		border: 1px solid #ccc;
		break-inside: avoid;
	}

	.etprog-card__media,
	.etprog-chip {
		display: none;
	}

	.etprog-row {
		break-inside: avoid;
	}
}

/* ==========================================================================
   6. RIDUZIONE MOVIMENTO
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	.etprog-chip,
	.etprog-card,
	.etprog-card__media img,
	.etprog-info__item,
	.etprog-row {
		transition: none;
	}

	.etprog-chip:hover,
	.etprog-chip:focus-visible {
		transform: none;
	}

	.etprog-card:hover .etprog-card__media img {
		transform: none;
	}
}