.evento-container {
	--background-color: var(--scheda-attiva-bg-color);
	--quicklink-background-color: #d4d4d4;
	--border-outer-color: var(--scheda-attiva-border-color);
	--border-inner-color: #E8E8E8;
	--padding-y: 0.5rem;
	--padding-x: 0.35rem;

	article.evento-container__article {
		background-color: var(--background-color);
		border: 1px solid var(--border-outer-color);
		padding: 0;
	}

	/* Header */
	.evento-container__header {
		position: sticky;
		top: calc(var(--layout-background-height, 0px) + var(--layout-header-height, 0px));
		display: flex;
    flex-direction: column;
    width: 100%;
		padding: 0 var(--padding-x);
		background-color: var(--background-color);
		z-index: 99;

		&.is-sticked {
			border-top: 1px solid var(--border-outer-color);
		}

		/* Header - Principale */
		.evento-container__header-main {
			display: flex;
			align-items: start;
			justify-content: start;
			gap: 0.25rem 0.5rem;
			padding: var(--padding-y) 0;
			padding-bottom: 1rem;

			a {
				display: flex;
        align-items: center;
        justify-content: start;
				text-decoration: none;
			}

			button,
			.btn {
				display: flex;
        align-items: center;
				padding: 0;
			}

			h1 {
				font-family: var(--font-condensed);
			}

			&,
			button,
			.btn {
				--body-font-size: 15px;
        font-family: "Roboto Condensed";
        font-size: var(--body-font-size);
        letter-spacing: 0;
			}

			.icon-container,
			.evento-container--icon {
				display: flex;
				align-items: center;
				justify-content: center;
				width: var(--icon-size, 16px);
				height: var(--icon-size, 16px);

				svg {
					width: 100%;
					height: 100%;
				}
			}

			/* Left (Minibanner + Label) */
			.evento-container__header-main--left {
				--minibanner-width: 235px;
				--minibanner-height: 95px;

				width: calc(var(--minibanner-width) + 2px);
				height: calc(var(--minibanner-height) + 2px);
				flex: 0 0 var(--minibanner-width);

				.evento-container__minibanner {
					img {
						width: var(--minibanner-width, 100%);
						height: var(--minibanner-height, auto);
						border: 1px solid var(--border-color);
					}
				}
			}

			/* Centrale (Titolo + Date + Luogo) */
			.evento-container__header-main--center {
				display: flex;
				flex-direction: column;
				align-items: start;
				justify-content: start;
				flex: 1 1 auto;
				gap: 0.25rem 0.5rem;

				i {
					font-size: 14px;
					color: var(--icon-color);
				}

				/* Titolo */
				h1.evento-container__title {
					font-size: 26px;
					margin-bottom: 0.5rem;
				}

				/* Date */
				.evento-container__dates {
					align-items: center !important;

					.evento-show__date-line:last-of-type {
						width: auto !important;
					}
				}
			}

			/* Right (Share + Utilities) */
			.evento-container__header-main--right {
				display: flex;
				flex-direction: column;
				align-items: start;
				justify-content: start;
				gap: 0.75rem 0.5rem;
				flex: 0 0 max-content;
				padding: 0.35rem 0;

				&,
				a,
				button,
				.btn {
					--body-font-size: 12px;
					font-size: var(--body-font-size);
				}

				/* Pulsanti di condivisione */
				.evento-container__share {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;

					.evento-container__share-item {
						display: inline-flex;

						a {
							--background-color: var(--icon-color);

							display: inline-flex;
							align-items: center;
							justify-content: center;
							width: 24px;
							height: 24px;
							border-radius: 50%;
							background-color: var(--background-color);
							color: #fff;
							font-size: 16px;
							text-decoration: none;

							/* &.evento-container__share-link--whatsapp {
								--background-color: #2ca51d;
							}

							&.evento-container__share-link--facebook {
								--background-color: #4267b2;
							}

							&.evento-container__share-link--twitter {
								--background-color: #000;
							} */
						}
					}
				}

				/* Altri link utili */
				.evento-container__utility-links {
					display: flex;
					flex-direction: column;
					gap: 0.75rem 0.5rem;
					width: 100%;

					.evento-container__utility-link,
					.evento-container__utility {
						display: flex;
						align-items: center;
						justify-content: start;
						gap: 0.2rem;
						width: 100%;
						text-align: start;
						padding: 0;
					}
				}
			}
		}

		/* Quick actions */
		.evento-container__header-quick-actions {
			position: relative;
			display: flex;
			align-items: start;
			justify-content: center;
			width: 100%;

			&::after {
				position: absolute;
        left: 0;
				right: 0;
				bottom: 0;
				content: '-';
				width: 100%;
				text-indent: -9999px;
				border-bottom: 1px solid var(--border-inner-color);
				z-index: -1;
			}

			.evento-container__header-quick-actions--inner {
				display: flex;
				align-items: start;
				justify-content: center;
				gap: 0.5rem;

				.evento-container__header-quick-actions--item {
					display: flex;
					align-items: center;
					justify-content: center;
					gap: 0.3rem;
					padding: 0.25rem 0.5rem;
					color: #fff;
					border: 1px solid var(--quicklink-background-color);
					background-color: var(--quicklink-background-color);

					&.is-active {
						color: #000;
						background-color: #fff;
						border-bottom-color: #fff;
						pointer-events: none;
					}
				}
			}

			a {
				display: inline-flex;
				gap: 0.25rem;
				font-family: var(--font-condensed);
				font-size: 14px;
				text-decoration: none;
			}
		}
	}

	/* Body */
	.evento-container__body {
		margin-top: -2px;
		padding: 1px var(--padding-x);
		padding-bottom: var(--padding-y);

		.evento-container__body-inner {
			display: flex;
			flex-direction: column;
			gap: 4rem 1rem;
			padding: 1rem 0.75rem;
			border: 1px solid var(--border-inner-color);
			background-color: #fff;
			font-family: var(--font-sans);
			font-size: 14px;

			/* Sezioni */
			section.evento-container__panel {
				display: flex;
				flex-direction: column;
				align-items: start;
				justify-content: start;
				gap: 0.5rem;
				padding: 0;

				.evento-container__panel--header {
					display: flex;
					align-items: center;
					justify-content: start;
					gap: 0.5rem;
					width: 100%;
					border-bottom: 1px solid var(--quicklink-background-color);
          margin-bottom: 0.5rem;

					h2 {
						display: flex;
						align-items: center;
						justify-content: start;
						gap: 0.5rem;
						font-family: var(--font-condensed);
						font-size: 24px;
						color: #000;
						padding: 0.5rem 0;
						background-color: #fff;
					}
				}

				.evento-container__panel--body {
					width: 100%;
					max-width: 100%;
					min-width: 0;

					p {
						margin-bottom: 0.5rem;
					}

					/* Contenuti HTML (programma, menù, descrizione) */
					.evento-container__panel--body__html {
						max-width: 100%;
						min-width: 0;
						overflow-x: auto;
						-webkit-overflow-scrolling: touch;

						img,
						iframe,
						video {
							max-width: 100%;
							height: auto;
						}

						/* Tabelle programma e menù */
						table {
							width: 100% !important;
							max-width: 100%;
							margin-bottom: 2.5rem;

							td {
								padding-bottom: 0.75rem;

								&.data-title {
									font-size: 16px;
									padding-bottom: 1rem;
								}

								/* Orchestre */
								img {
									max-width: 140px;
									height: auto;
									margin-top: 0.35rem;
								}
							}
						}
					}
				}
			}
		}
	}

	/* Scheda non attiva */
	&.is_scheda_non_attiva {
		background-color: var(--scheda-non-attiva-bg-color);
	}
}

/* Date (sia dentro Evento che Modal) */
.evento-container__dates {
	display: flex;
	flex-wrap: wrap;
	align-items: start;
	justify-content: start;
	gap: 0.2rem;
	width: 100%;

	.evento-show__date-line {
		display: inline-flex;
		align-items: center;
		justify-content: start;
		gap: 0.2rem;
		width: 100%;

		.card__label {
			display: inline-flex;
			margin-left: 0.5rem;
			align-items: center;
		}

		.evento-container--icon {
			svg {
				width: 13px !important;
			}
		}
	}
}

/* Modale Date */
#evento-date-modal {
	--icon-size: 14px;
	--bs-modal-width: 600px;

	.evento-container__dates {
		display: grid !important;
		--icon-size: inherit;
		gap: 0.5rem;

		.inline-date {
			display: flex;
			align-items: center;
			gap: 0.25rem;
			line-height: 1;

			&.is-past {
				color: #bababa;
			}

			i {
				font-size: var(--icon-size);
			}

			img,
			svg {
				width: auto;
				height: var(--icon-size);
				margin-top: -2px;
			}
		}
	}
}

/* Location */
.evento-container__location {
	display: block;
	width: 100%;

	a {
		gap: 0.25rem;
	}
}

/* Modale Qr Code */
#evento-qrcode-modal {
	--bs-modal-width: 495px;
	--bs-modal-padding: 0.5rem;

	.modal-body {
		padding: 0;
		padding-left: var(--bs-modal-padding);

		p.message {
			font-size: 24px;
			color: #e75029 !important;
			text-transform: uppercase;
			text-align: center;
			padding: var(--bs-modal-padding);
		}

		.qrcode-container {
			position: relative;
			width: var(--bs-modal-width);
			height: 311px;
			background-image: url('../../../images/ui/qrcode-bg.png');
			background-repeat: no-repeat;
			background-position: -10px -10px;

			.qrcode-image {
				position: absolute;
				top: 60px;
				left: 75px;
				width: 132px;
				height: 132px;
			}
		}

	}
}

/*
|---------------------------
| MOBILE
|---------------------------
*/
/* max-width: 1024px */
@media (max-width: 1024px) {
	/* Layout Columns */
	.frontend-layouts-columns {
		padding: 0;
	}

	/* Evento */
	.evento-container {
		max-width: 100%;
		min-width: 0;
		overflow-x: clip;

		article.evento-container__article {
  		border: 0;

			.evento-container__header {
				top: calc(var(--layout-background-height, 0px) + var(--layout-header-height, 0px));
				padding: 0.5rem 0.5rem;
				padding-bottom: 0 !important;

				.evento-container__header-main {
					flex-wrap: wrap;
					gap: 0 2rem;
					justify-content: start;
					padding: 0;
					margin-bottom: 1rem;

					.evento-container__header-main--left,
					.evento-container__header-main--center,
					.evento-container__header-main--right {
						transition: all 500ms linear;
					}

					.evento-container__header-main--left,
					.evento-container__header-main--right {
						margin-bottom: 0.75rem;
					}

					.evento-container__header-main--left {
						order: 1;
					}

					.evento-container__header-main--center {
						order: 3;
						width: 100%;

						.evento-container__title {
							margin-bottom: 0.25rem;
						}

						.evento-container__dates {
							.card__labels {
								display: none !important;
							}
						}

						&,
						button,
						.btn {
							--body-font-size: 16px;
						}
					}

					.evento-container__header-main--right {
						order: 2;
					}
				}

				/* Quick actions */
				.evento-container__header-quick-actions {
					.evento-container__header-quick-actions--inner {
						gap: 0.75rem;

						.evento-container__header-quick-actions--item {
							font-size: 22px;

							span {
								display: none !important;
							}
						}
					}
				}

				/* Nascondo le colonne laterali quando è sticked */
				&.is-sticked {
					.evento-container__header-main--left {
						--minibanner-width: auto;
						--minibanner-height: 40px;
						display: none;
					}

					.evento-container__header-main--center {
						h1 {
							font-size: 22px;
						}
					}

					.evento-container__header-main--right {
						display: none;
					}
				}
			}

			.evento-container__body {
				.evento-container__body-inner {
					padding: 0.5rem;
				}
			}
		}
	}

	/* Modale Date */
	#evento-date-modal {
		.evento-show__date-line {
			display: flex;
			flex-wrap: wrap;
			align-items: baseline;
			gap: 0.2rem 0;

			.card__label {
				margin-left: 19px; /* per fare in modo che, se va a capo, sia allineato alla data e non all'icona */
			}
		}
	}
}

/* max-width: 420px */
@media (max-width: 420px) {
	/* Container evento */
	.evento-container {
		.evento-container__header {
			.evento-container__header-main {
				gap: 0 0.75rem !important;

				.evento-container__header-main--left {
					--minibanner-width: auto;
					--minibanner-height: 90px;
				}
			}

			/* Quick actions */
			.evento-container__header-quick-actions {
				.evento-container__header-quick-actions--inner {
					gap: 0.5rem !important;

					.evento-container__header-quick-actions--item {
						font-size: 18px !important;
					}
				}
			}
		}
	}
}

/* max-width: 380px */
@media (max-width: 380px) {
	.evento-container {
		.evento-container__header {
			.evento-container__header-main {
				gap: 0 0.5rem !important;

				.evento-container__header-main--left {
					--minibanner-width: auto;
					--minibanner-height: 90px;
				}
			}

			/* Quick actions */
			.evento-container__header-quick-actions {
				.evento-container__header-quick-actions--inner {
					gap: 0.35rem !important;

					.evento-container__header-quick-actions--item {
						font-size: 18px !important;
					}
				}
			}
		}
	}

	/* Modale Date */
	#evento-date-modal {
		.evento-container__dates {
			font-size: 12px;
		}
	}
}

/* Desktop | max-width: 1200px */
@media (min-width: 1025px) and (max-width: 1200px) {
	.evento-container {
		.evento-container__header {
			.evento-container__header-quick-actions {
				.evento-container__header-quick-actions--inner {
					gap: 0.3rem;

					.evento-container__header-quick-actions--item {
						gap: 0.2rem;
          	padding: 0.2rem 0.3rem;

						i,
						a {
							font-size: 12px;
						}
					}
				}
			}
		}
	}
}

/* Mobile */
@media (max-width: 1024px) {
	.evento-container__panel--body {
		table {
			margin-bottom: 4rem !important;

			&,
			tbody,
			thead,
			tr,
			td {
				float: unset !important;
				display: block !important;
				width: 100% !important;
				min-width: 100% !important;
				max-width: 100% !important;
			}

			tr {
				margin-bottom: 1rem !important;

				td {
					padding-bottom: 0 !important;
					margin-bottom: 0.25rem !important;

					&:last-child {
						margin-bottom: 1rem !important;
					}

					&.data-title {
						font-size: 18px !important;
						/* color: #E7502A !important; */
					}
				}
			}
		}
	}
}

/* max-width: 350px */
@media (max-width: 350px) {
	.evento-container {
		.evento-container__header {
			.evento-container__header-main {
				padding: 0.25rem 0.25rem;

				.evento-container__header-main--left {
					--minibanner-height: 80px;
				}
			}
		}
	}
}

/* max-width: 330px */
@media (max-width: 330px) {
	.evento-container {
		.evento-container__header {
			.evento-container__header-main {
				.evento-container__header-main--left {
					--minibanner-height: 70px;
				}
			}

			/* Quick actions */
			.evento-container__header-quick-actions {
				.evento-container__header-quick-actions--inner {
					gap: 0.25rem !important;

					.evento-container__header-quick-actions--item {
						font-size: 17px !important;
					}
				}
			}
		}
	}
}