/* Layout a colonne */
.frontend-geo-localita-show {
	--layout-two-column-column-left-width: var(--adsense-vertical-width);

	.frontend-layouts-column__right {
		padding-right: 0.5rem;
	}
}

/* Contenuto pagina principale */
.frontend-geo-localita-show__content {
	display: block;
	width: 100%;

	.frontend-geo-localita-show__content--inner {
		display: flex;
		align-items: start;
		justify-content: space-between;
		gap: 2rem;
	}

	/* Contenuti */
	.frontend-geo-localita-show {
		--color: #000 !important;
		--bg-color: #ABABAB !important;
		--border-color: #ABABAB !important;

		/* Container */
		display: flex;
		flex-direction: column;
    gap: 2rem;
		width: 100%;
		order: 1;

		/* Tabs + Contenuto */
		.localita-contenuti-tabs {
			display: block;
			width: 100%;

			/* Tabs */
			.localita-contenuti-tabs__nav {
				display: flex;
				gap: 1rem;
				width: 100%;

				.localita-contenuti-tabs__tab {
					--opacity-hover-default: 1;
					--default-btn-color: var(--color);
					--default-btn-bg: var(--bg-color);
					--default-btn-border-color: var(--border-color);
					--default-btn-hover-bg: #ABABAB;

					position: relative;
					border-radius: 0.5rem 0.5rem 0 0;
					border: 1px solid var(--border-color) !important;
					z-index: 10;

					&.is-active {
						background-color: #fff !important;
						border-bottom-color: #fff !important;
					}
				}
			}

			/* Panels */
			.localita-contenuti-tabs__panels {
				position: relative;
				display: block;
				width: 100%;
				padding: 1rem;
				border: 1px solid var(--border-color);
				margin-top: -1px;
				z-index: 5;

				.localita-contenuti-tabs__body {
					> div,
					> p,
					table td {
						padding: 1rem;
					}

					td img {
						max-width: unset;
					}
				}
			}
		}
	}

	/* Eventi in evidenza */
	.localita-eventi-evidenza {
		--header-color: #fff;
		--header-bg-color: #323052;
		--header-border-color: #323052;
		--body-color: #000;
		--body-bg-color: #fff;
		--body-border-color: #323052;

		display: flex;
		flex-direction: column;
		flex-shrink: 0;
		gap: 3rem;
		width: var(--banner-box-width);
		max-width: 100%;
		min-width: 0;
		order: 2;

		.localita-eventi-evidenza__section {
			--header-body-spacing: 21px;
			--card-image-width: 214px;
			--card-image-height: 88px;

			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 0;
			padding: 0;
			margin: 0;

			.localita-eventi-evidenza__header {
				display: flex;
				width: fit-content;
				color: var(--header-color);
				background-color: var(--header-bg-color);
				padding: 0.5rem 0.75rem;
				padding-right: 0.85rem;
				margin: 0;
				z-index: 20;

				h2 {
					display: flex;
					align-items: center;
					justify-content: start;
					gap: 0.25rem;
					font-family: var(--font-condensed);
					color: var(--header-color);
					margin: 0;
					text-transform: uppercase;
					font-size: 20px;

					i {
						font-size: 20px;
						margin-top: -2px;
					}
				}
			}

			.localita-eventi-evidenza__items {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				gap: 2rem;
				width: 100%;
				padding: 1rem 0.5rem;
        padding-top: calc(1rem + 20px); /* 20px è la height dell'header */
				margin-top: -20px; /* 20px è la height dell'header */
				border: 1px solid var(--body-border-color);
				z-index: 10;

				.localita-eventi-evidenza__item {
					display: flex;
					flex-direction: column;
					min-width: 0;
					max-width: 100%;

					.card,
					.card__body,
					.card__link {
						min-width: 0;
						max-width: 100%;
					}

					.card__body,
					.card__link {
						--font-family-title: var(--font-condensed);
						--font-family-body: var(--font-condensed);
						--font-family-description: var(--font-condensed);

						--font-size-title: 14px;
						--font-size-body: 14px;
						--font-size-description: 14px;
						letter-spacing: -0.015rem;
						gap: 0.25rem;

						.card__image-wrapper {
							max-width: 100%;
							box-sizing: border-box;

							img {
								max-width: 100%;
								object-fit: cover;
							}
						}

						.card__content {
							padding-left: 1px;
						}

						.card__title {
							font-size: var(--font-size-title);
						}
					}
				}
			}
		}
	}
}

/* Media queries */
@media (max-width: 1024px) {
	:root {
		--main-title-height: 36px;
	}

	/* Layout a colonne */
	.frontend-geo-localita-show {
		.frontend-layouts-column__left {
			display: none !important;
		}

		.frontend-layouts-column__right {
			padding: 0;

			.frontend-layouts-column__content {
				gap: 0 !important;
			}
		}
	}

	/* Titolo */
	.frontend-geo-localita-show__title {
		--main-title-color: #fff;
		--main-title-font-size: 20px;
		position: sticky;
		top: var(--layout-header-height);
		width: 100%;
		height: var(--main-title-height);
		background-color: #323052;
		padding: 0.5rem;
		z-index: 100;
	}

	/* Contenuto */
	.frontend-geo-localita-show__content {

		.frontend-geo-localita-show__content--inner {
			flex-direction: column;
		}

		.frontend-geo-localita-show {
			--color: #000 !important;
			--bg-color: #fff !important;
			--border-color: #fff !important;

			/* Tabs + Contenuto */
			.localita-contenuti-tabs {
				width: 100%;

				/* Tabs */
				.localita-contenuti-tabs__nav {
					position: sticky;
					top: calc(var(--layout-header-height) + var(--main-title-height));
					display: flex;
          align-items: start;
          justify-content: start;
					gap: 0;
					width: 100%;
					height: 40px;
					overflow: scroll;
					white-space: nowrap;
					padding: 0.5rem;
					background-color: #8ebb2c;
					z-index: 90;

					.localita-contenuti-tabs__tab-wrapper {
						display: flex;
						align-items: center;
						justify-content: start;

						&:not(:last-child) {
							padding-right: 0.5rem;
							border-right: 1px solid #fff;
						}

						&:not(:first-child) {
							padding-left: 0.5rem;
						}
					}

					.localita-contenuti-tabs__tab {
						--default-btn-color: #fff;
						--default-btn-bg: transparent;
						--default-btn-border-color: transparent;
						--default-btn-hover-bg: transparent;
						--default-btn-font-size: 12px;
						padding: 0.25rem 0.5rem;
            border-radius: 0;
						border: none !important;
						line-height: 1;

						&.is-active {
							background-color: #658e0d !important;
						}
					}
				}

				/* Contenuto tabs */
				.localita-contenuti-tabs__panels {
					padding: 0.5rem;

					table,
					tbody,
					tr,
					td,
					div,
					p {
						display: block !important;
						width: 100% !important;
						padding: 0 !important;
					}

					td,
					td > div,
					td > p {
						padding: 0.25rem !important;
					}

					ul {
						padding-left: 0;
						list-style-position: inside;
					}
				}
			}
		}

		/* Eventi in evidenza */
		.localita-eventi-evidenza {
			--body-border-color: #fff;
			width: 100% !important;

			.localita-eventi-evidenza__header {
				position: sticky;
				top: calc(var(--layout-header-height) + var(--main-title-height));
				justify-content: center;
				width: 100% !important;
				z-index: 90;
			}
		}
	}
}