/* ==========================================================================
   Blocco: Tab con card e testo (csp-tct)
   - .csp-tct__tabs  → riga di tab a larghezza uguale (attiva: verde pieno)
   - .csp-tct__panel → griglia a 2 colonne: card a sinistra, testo a destra
   - .csp-tct-card   → card orizzontale: immagine a sinistra, testo su
                       fondo verde chiaro a destra
   ========================================================================== */

.csp-tct {
	max-width: 1320px;
	margin: 0 auto;
	padding: 2rem;
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Tab
   -------------------------------------------------------------------------- */
.csp-tct__tabs {
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	gap: 10px;
	margin-bottom: 40px;
}

.csp-tct .csp-tct__tab {
	font-family: "futura-pt";
	font-size: 17px;
	line-height: 1.2;
	text-transform: uppercase;
	color: #0E693A;
	background-color: #E9F2ED;
	border: 0;
	border-radius: 0;
	padding: 13px 1rem;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.csp-tct .csp-tct__tab:hover {
	background-color: #D5E6DC;
}

.csp-tct .csp-tct__tab.is-active {
	background-color: #0E693A;
	color: #fff;
}

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

/* --------------------------------------------------------------------------
   Pannello
   -------------------------------------------------------------------------- */
.csp-tct__panel {
	display: grid;
	grid-template-columns: minmax(0, 720fr) minmax(0, 540fr);
	column-gap: 50px;
	align-items: start;
}

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

/* Pannello senza card: il testo occupa tutta la riga. */
.csp-tct__panel > .csp-tct__text:only-child {
	grid-column: 1 / -1;
}

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */
.csp-tct__cards {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.csp-tct-card {
	display: grid;
	grid-template-columns: minmax(0, 330fr) minmax(0, 390fr);
	background-color: #E9F2ED;
}

/* Card senza immagine: il testo occupa tutta la card. */
.csp-tct-card > .csp-tct-card__body:only-child {
	grid-column: 1 / -1;
}

.csp-tct-card__img img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 160px;
	object-fit: cover;
}

.csp-tct-card__body {
	padding: 22px 30px 22px 40px;
}

.csp-tct .csp-tct-card__title {
	font-family: "futura-pt";
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: #0E693A;
	margin: 0 0 10px;
}

.csp-tct .csp-tct-card__text {
	font-family: "futura-pt";
	font-size: 16px;
	line-height: 1.4;
	color: #5E6977;
	margin: 0;
}

/* --------------------------------------------------------------------------
   Colonna destra
   -------------------------------------------------------------------------- */
.csp-tct .csp-tct__title {
	font-family: "Gelasio";
	font-size: 30px;
	font-weight: 700;
	line-height: 1.45;
	color: #0E693A;
	margin: 0 0 1.5rem;
}

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

.csp-tct .csp-tct__content p {
	margin: 0 0 2rem;
}

.csp-tct .csp-tct__content p:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.csp-tct__panel {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 40px;
	}
	/* Su schermi stretti il testo va prima delle card. */
	.csp-tct__text {
		order: -1;
	}
}

@media (max-width: 767px) {
	.csp-tct {
		padding: 1.5rem;
	}
	.csp-tct__tabs {
		grid-auto-flow: row;
		margin-bottom: 30px;
	}
	.csp-tct .csp-tct__tab {
		font-size: 15px;
	}
	.csp-tct-card {
		grid-template-columns: minmax(0, 1fr);
	}
	.csp-tct-card__img img {
		height: auto;
		aspect-ratio: 330 / 160;
	}
	.csp-tct-card__body {
		padding: 20px;
	}
	.csp-tct .csp-tct__title {
		font-size: 26px;
	}
}