/* Homepage */
/* Blocchi homepage (Sezioni + Separatori) */
.frontend-home__blocks {
	display: flex;
	flex-direction: column;
	align-items: start;
	justify-content: start;
	gap: 3rem;
	width: 100%;
	padding: 0px 1rem;
	margin-bottom: 3rem;

	/* Blocchi homepage */
	.frontend-home__block {
		--header-text-color: var(--bs-body-color);
		--header-bg-color: var(--bs-body-bg);
		--body-text-color: var(--bs-body-color);
		--body-bg-color: var(--bs-body-bg);
		--header-body-spacing: 21px; /* metà altezza header */
		--card-image-width: 235px;
		--card-image-height: 95px;
		--card-width: calc(var(--card-image-width) + 2px); /* 2px per border delle immagini */
		--card-height: auto;

		position: relative;
		display: flex;
		flex-direction: column;
		align-items: start;
		justify-content: start;
		gap: 0;
		width: 100%;

		/* Aggiusto width e height per umbria da visitare */
		&#umbria_da_visitare {
			--card-image-width: 160px;
			--card-image-height: 160px;
		}

		/* Aggiusto width e height per ricette tipiche umbre */
		&#ricette_tipiche_umbre {
			--card-image-width: 145px;
			--card-image-height: 145px;
		}

		/* Contenuto del blocco */
		.frontend-home__block__header,
		.frontend-home__block__body {
			display: flex;
			width: 100%;
		}

		/* Header del blocco */
		.frontend-home__block__header {
			align-items: center;
			justify-content: center;
			gap: 0;
			margin-bottom: calc(var(--header-body-spacing) * -1);
			z-index: 20;

			h2 {
				display: inline-flex;
				align-items: center;
				gap: 0.5rem;
				font-size: 20px;
				color: var(--header-text-color);
				background-color: var(--header-bg-color);
				padding: 0.5rem 0.75rem;
				padding-right: 0.85rem;
				margin: 0;

				.frontend-home__block__icon-wrapper,
				.frontend-home__block__title-label {
					display: inline-flex;
					align-items: center;
				}

				.frontend-home__block__icon-wrapper {
					flex-shrink: 0;

					svg {
						width: 1.25em;
						height: 1.25em;
						color: currentColor;
					}
				}

				.frontend-home__block__title-label {
					font-family: "Poppins", "Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif !important;
					font-weight: 400 !important;
					color: var(--header-text-color);
				}
			}
		}

		/* Body del blocco */
		.frontend-home__block__body {
			display: grid;
			grid-template-columns: repeat(var(--items-per-row), var(--card-image-width));
			justify-content: space-evenly;
			gap: 2rem 1rem;
			color: var(--body-text-color);
			background-color: var(--body-bg-color);
			padding: 1rem;
			padding-top: calc(1.5rem + var(--header-body-spacing));
			padding-bottom: 1.5rem;
			z-index: 10;

			/* Card Eventi | Tag Eventi */
			.card {
				display: flex;
        flex-direction: column;
        gap: 0.5rem;
			}
		}
	}
}

/*
|---------------------------
| MOBILE
|---------------------------
*/
/* max-width: 1024px */
@media (max-width: 1024px) {
	.frontend-home__blocks {
		padding: 0;

		.frontend-home__block {
			.frontend-home__block__header {
				position: sticky;
				top: calc(var(--layout-background-height, 0px) + var(--layout-header-height, 0px));
			}

			.frontend-home__block__body {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 100%;

				.card {
					width: 100%;
					align-items: center;

					.card__body {
						width: 100%;
						height: auto;
						align-items: center;

						.card__labels {
							justify-content: center;
						}
					}
				}
			}
		}
	}
}