/* ==========================================================================
   Blocco: Tab a due colonne (csp-tab)
   - .csp-tab        → fascia con colore di fondo (style inline)
   - .csp-tab__head  → titolo + sottotitolo centrati
   - .csp-tab__tabs  → riga di tab a larghezza contenuto (attiva: verde pieno)
   - .csp-tab__panel → griglia a 2 colonne con immagini, testo o video
   ========================================================================== */

.csp-tab {
	box-sizing: border-box;
}

.csp-tab__inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 60px 45px;
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Titolo e sottotitolo
   -------------------------------------------------------------------------- */
.csp-tab__head {
	text-align: center;
	margin-bottom: 30px;
}

.csp-tab .csp-tab__title {
	font-family: "Gelasio";
	font-size: 42px;
	font-weight: 700;
	line-height: 1.25;
	color: #0E693A;
	margin: 0 0 1.25rem;
}

.csp-tab .csp-tab__subtitle {
	font-family: "futura-pt";
	font-size: 17px;
	line-height: 1.75;
	color: #5E6977;
	max-width: 760px;
	margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Tab
   -------------------------------------------------------------------------- */
.csp-tab__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 30px;
}

.csp-tab .csp-tab__tab {
	flex: 1 1 auto;
	font-family: "futura-pt";
	font-size: 16px;
	line-height: 1.2;
	text-transform: uppercase;
	color: #0E693A;
	background-color: #E9F2ED;
	border: 0;
	border-radius: 0;
	padding: 10px 1rem;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* Su fondo colorato le tab inattive sono bianche. */
.csp-tab--has-bg .csp-tab__tab {
	background-color: #fff;
}

.csp-tab .csp-tab__tab:hover {
	background-color: #D5E6DC;
}

.csp-tab .csp-tab__tab.is-active {
	background-color: #0E693A;
	color: #fff;
}

.csp-tab .csp-tab__tab:focus-visible {
	outline: 2px solid #0E693A;
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Pannello
   -------------------------------------------------------------------------- */
.csp-tab__panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: 6px;
}

.csp-tab--60-40 .csp-tab__panel {
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}

.csp-tab--40-60 .csp-tab__panel {
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
}

.csp-tab__panel[hidden] {
	display: none;
}

/* Le colonne sono alte uguali: l'ultima immagine si allunga per riempire. */
.csp-tab__col {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Una sola colonna compilata: occupa tutta la riga. */
.csp-tab__panel--single > .csp-tab__col {
	grid-column: 1 / -1;
}

/* --------------------------------------------------------------------------
   Elementi: immagine
   -------------------------------------------------------------------------- */
.csp-tab .csp-tab__media {
	position: relative;
	margin: 0;
	overflow: hidden;
}

.csp-tab__media:last-child {
	flex-grow: 1;
}

.csp-tab__media img {
	display: block;
	width: 100%;
	height: auto;
}

/* Con proporzione fissa l'immagine copre il riquadro (ritagliata). */
.csp-tab__media--1-1  { aspect-ratio: 1 / 1; }
.csp-tab__media--4-3  { aspect-ratio: 4 / 3; }
.csp-tab__media--16-9 { aspect-ratio: 16 / 9; }
.csp-tab__media--3-4  { aspect-ratio: 3 / 4; }

.csp-tab__media:not(.csp-tab__media--originale) img {
	position: absolute;
	inset: 0;
	height: 100%;
	object-fit: cover;
}

.csp-tab .csp-tab__label {
	position: absolute;
	left: 25px;
	bottom: 25px;
	font-family: "futura-pt";
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	color: #1D1D1B;
	background-color: rgba(255, 255, 255, 0.75);
	padding: 10px 10px;
	margin: 0;
}

/* --------------------------------------------------------------------------
   Elementi: testo
   -------------------------------------------------------------------------- */
.csp-tab__text {
	padding: 30px;
}

.csp-tab .csp-tab__text-title {
	font-family: "Gelasio";
	font-size: 30px;
	font-weight: 700;
	line-height: 1.45;
	color: #0E693A;
	margin: 0 0 1.5rem;
}

.csp-tab .csp-tab__content,
.csp-tab .csp-tab__content p {
	font-family: "Gelasio";
	font-size: 17px;
	line-height: 1.9;
	color: #0E693A;
}

.csp-tab .csp-tab__content p {
	margin: 0 0 1.5rem;
}

.csp-tab .csp-tab__content p:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Elementi: video
   -------------------------------------------------------------------------- */
.csp-tab__video iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.csp-tab .csp-tab__title {
		font-size: 34px;
	}
}

@media (max-width: 767px) {
	.csp-tab__inner {
		padding: 2rem 1.5rem;
	}
	.csp-tab .csp-tab__title {
		font-size: 28px;
	}
	.csp-tab .csp-tab__subtitle {
		font-size: 16px;
	}
	.csp-tab__tabs {
		flex-direction: column;
		margin-bottom: 20px;
	}
	.csp-tab .csp-tab__tab {
		font-size: 15px;
	}
	.csp-tab__panel,
	.csp-tab--60-40 .csp-tab__panel,
	.csp-tab--40-60 .csp-tab__panel {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 6px;
	}
	.csp-tab .csp-tab__label {
		left: 15px;
		bottom: 15px;
		font-size: 15px;
	}
	.csp-tab__text {
		padding: 20px 0;
	}
}