/* Hero */
.homepage-hero {
	height: var(--homepage-hero-h);
  overflow: hidden;

	.homepage-hero-inner {
		display: flex;
		height: var(--homepage-hero-h);
		background: var(--homepage-hero-bg-color) var(--homepage-hero-bg-image) no-repeat center bottom / cover;

		.homepage-hero-content {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: flex-end;
			gap: 1rem;
			width: 100%;
			max-width: min(520px, 100vw);
			padding: 3rem 3rem min(120px, 15vw);
			color: #fff;

			span.green {
				color: var(--green);
			}

			h1 {
				font-family: var(--font-display);
				font-size: clamp(2rem, 4vw, 3rem);
				margin: 0;
				margin-bottom: 2rem;
			}

			.homepage-hero-lead {
				font-size: clamp(1.05rem, 2vw, 1.2rem);
				margin-bottom: 2rem;
			}
		}
	}
}

/* Cosa Facciamo */
.homepage-cosa_facciamo {
	.container {
		padding: 0;
	}
}

/* Prima / Dopo */
.homepage-valore {
	.homepage-comparison {
		display: flex;
		flex-direction: column;
		gap: 0;
		padding: 0;
    border: 1px solid #d2d0d2;

		/* Immagini */
		.homepage-comparison-images {
			display: flex;
			align-items: center;
			justify-content: start;
			gap: 1rem;
			width: 100%;
			padding-left: var(--homepage-valore-first-column-width);

			.homepage-comparison-images-inner {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: start;
				gap: 1rem;
				width: 100%;
				padding: 1rem;
				padding-bottom: 0;

				/* Prima / Dopo */
				.homepage-comparison-item {
					display: flex;
					flex-direction: column;
					margin: 0;
					text-align: center;
					gap: 1rem;

					img {
						order: 2;
						display: block;
						width: 100%;
						height: auto;
					}

					figcaption {
						order: 1;
						display: inline-block;

						span {
							color: #fff;
							font-family: var(--font-display);
							text-transform: uppercase;
							border-radius: var(--radius);
							padding: 0.5rem 1rem;

							&.bg-muted {
								background: var(--muted);
							}

							&.bg-green {
								background: var(--green);
							}
						}
					}
				}

				/* Freccia */
				.homepage-comparison-arrow {
					position: absolute;
					top: calc(50% + 25px - 0.5rem); /* 25px è la height di figcaption, 0.5rem è la metà del gap tra immagine e caption */
					left: 50%;
					z-index: 1;
					width: 80px;
					height: 80px;
					transform: translateX(-50%) translateY(-50%);

					img {
						display: block;
						width: 100%;
						height: auto;
					}
				}
			}
		}

		/* Tabella comparazione */
		.homepage-parametri-table-wrap {
			overflow-x: auto;

			.homepage-parametri-table {
				width: 100%;
				/* separate: con collapse il bordo condiviso viene coperto a intermittenza dal bg assoluto di .col-inner */
				border-collapse: separate;
				border-spacing: 0;

				thead,
				tbody {
					th,
					td {
						text-align: center;
						vertical-align: middle;
						padding: 0;
						border-bottom: 0;

						.col-inner {
							display: inline-block;
							width: 100%;
							padding: 0.8rem 0.5rem;
						}

						&.col-prima,
						&.col-dopo {
							position: relative;
							text-align: center;
							border-bottom: 0;

							.col-inner {
								position: absolute;
								top: 0;
								right: auto;
								bottom: 0;
								left: 50%;
								width: 100%;
								max-width: 300px;
								transform: translateX(-50%);
								display: flex;
								align-items: center;
								justify-content: center;
								box-sizing: border-box;
								z-index: 1;
							}
						}

						&.col-prima .col-inner {
							background-color: #f7f7f7;
						}

						&.col-dopo .col-inner {
							background-color: #f0f5f1;
						}
					}
				}

				/* Solo header */
				thead {
					th {
						font-family: var(--font-display);
						text-transform: uppercase;
						text-align: left;
						color: var(--navy);
						position: relative;

						&::after {
							content: "";
							position: absolute;
							left: 0;
							right: 0;
							bottom: 0;
							height: 1px;
							background-color: var(--line);
							pointer-events: none;
							z-index: 2;
						}

						&.col-parametri_valutazione {
							font-size: 20px;
						}
					}
				}

				/* Solo body */
				tbody {
					tr:not(:last-child) {
						th,
						td {
							position: relative;

							&::after {
								content: "";
								position: absolute;
								left: 0;
								right: 0;
								bottom: 0;
								height: 1px;
								background-color: var(--line);
								pointer-events: none;
								z-index: 2;
							}
						}
					}

					th[scope="row"] {
						width: var(--homepage-valore-first-column-width);
						text-align: left;
						font-weight: 600;
						color: var(--navy);

						.homepage-parametro-label {
							display: flex;
							align-items: center;
							justify-content: start;
							gap: 0.5rem;

							.homepage-parametro-icon {
								display: block;
								width: 32px;
								height: 32px;
								flex-shrink: 0;

								img {
									display: block;
									width: 100%;
									height: auto;
								}
							}

							.homepage-parametro-label-text {
								display: flex;
								flex-direction: column;
								align-items: start;
								justify-content: start;
								gap: 0.25rem;
								line-height: 1;

								.homepage-parametro-title {
									font-family: var(--font-body);
									text-transform: uppercase;
									font-size: 18px;
									font-weight: 400;
								}

								.homepage-parametro-description {
									font-family: var(--font-body);
									font-weight: 400;
									font-size: 14px;
								}
							}
						}
					}
				}
			}
		}
	}

	/* Stelle */
	.star-rating {
		display: inline-flex;
		align-items: center;
		gap: 0.15rem;

		.star {
			width: var(--homepage-valore-star-size);
			height: var(--homepage-valore-star-size);
			background: currentColor;
			clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
			color: var(--line);

			&.is-filled {
				color: #e8b923;
			}
		}
	}
}

/* Regia creativa */
.homepage-regia {
	.homepage-regia-inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem 2rem;

		/* Immagine */
		.homepage-regia-visual {
			display: block;
			width: min(400px, 100%);
			flex-shrink: 0;

			img {
				display: block;
				width: 100%;
				height: auto;
			}
		}

		/* Contenuto */
		.homepage-regia-content {
			display: flex;
			flex-direction: column;
			align-items: start;
			justify-content: start;
			gap: 1rem;
			max-width: min(700px, 100%);

			p {
				font-family: var(--font-body);
				font-weight: 400;
				font-size: 18px;
				color: var(--navy);
			}
		}
	}
}

/* Programma */
.homepage-programma {
	.homepage-programma-inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem 2rem;
	}

	/* Contenuto */
	.homepage-programma-content {
		display: flex;
		flex-direction: column;
		align-items: start;
		justify-content: start;
		gap: 1rem;
		max-width: min(700px, 100%);

		p {
			font-family: var(--font-body);
			font-weight: 400;
			font-size: 18px;
			color: var(--navy);
		}
	}

	/* Immagine */
	.homepage-programma-visual {
		display: block;
		width: min(270px, 100%);
		flex-shrink: 0;

		img {
			display: block;
			width: 100%;
			height: auto;
		}
	}
}

/* Richiedi check-up */
.homepage-cta-checkup {
	.homepage-cta-checkup-inner {
		display: flex;
    align-items: center;
    justify-content: start;
    gap: 1rem 2rem;
	}

	/* Immagine */
	.homepage-cta-checkup-visual {
		display: block;
		width: min(270px, 100%);
		flex-shrink: 0;

		img {
			display: block;
			width: 100%;
			height: auto;
		}
	}

	/* Contenuto */
	.homepage-cta-checkup-content {
		display: flex;
		flex-direction: column;
		align-items: start;
		justify-content: start;
		gap: 1rem;
		max-width: min(700px, 100%);

		p {
			font-family: var(--font-body);
			font-weight: 400;
			font-size: 18px;
			color: var(--navy);
		}
	}
}