/* ────────────────────────────────────────────────────────────────────────────
   Podere Colleprimo — section-esperienze.css

   Stili condivisi per la sezione .esperienze-section (tablist esperienze
   + pannello immagini). Caricato su:
     - homepage (templates/homepage.php)
     - singola esperienza (single-esperienza.php)
   Estratto da home.css per essere riutilizzabile su più template.
   ──────────────────────────────────────────────────────────────────────────── */

/* ── Layout container ────────────────────────────────────────────────────── */

.esperienze-section .container {
	justify-content: space-between;
	align-items: start;
}

/* ── Pannello immagini ───────────────────────────────────────────────────── */

.esperienze-section .esperienze-section__immagini {
	flex: 0 0 50%;
	display: flex;
	justify-content: center;
	position: relative;
}

/* Tutti i gruppi: sovrapposti, nascosti — GSAP gestisce opacity */
.esperienze-section__immagini .exp-images-group {
	display: flex;
	gap: 10px;
	align-items: flex-end;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	pointer-events: none;
}

/* Gruppo attivo: visibile */
.esperienze-section__immagini .exp-images-group.is-active {
	opacity: 1;
	pointer-events: auto;
}

.esperienze-section__immagini .exp-images-group img {
	border-radius: 12px;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.esperienze-section__immagini .exp-images-group__figura {
	margin: 0;
	position: relative;
	aspect-ratio: 310 / 450;
	flex: 0 0 50%;
	display: flex;
	align-items: flex-end;
}

.esperienze-section__immagini .exp-images-group figure:last-child {
	margin-bottom: -50px;
	aspect-ratio: 310 / 330;
}

.esperienze-section__immagini .exp-images-group__figura figcaption {
	text-transform: uppercase;
	color: var(--g);
	letter-spacing: 1.6px;
	font-size: 10px;
	position: relative;
	transform: translateY(calc(100% + 10px));
}

/* ── Lista esperienze (tablist) ──────────────────────────────────────────── */

.esperienze-section .experiences {
	margin-top: 80px;
}

.exp-item {
	cursor: pointer;
	transition: opacity 0.5s ease;
}

.exp-item:not(:last-child) {
	padding-bottom: 30px;
	border-bottom: 1px solid #c6bdb0;
	margin-bottom: 30px;
}

.exp-item:not(.is-active) {
	opacity: 0.4;
}

.exp-item:not(.is-active) h3 {
	cursor: pointer;
}

.exp-item h3 {
	color: var(--3);
	font-weight: 400;
	font-size: 22px;
	text-transform: uppercase;
	letter-spacing: 3.5px;
	margin: 0 0 10px;
}

.exp-item .exp-item__price {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--g);
	display: block;
	margin-bottom: 30px;
}

.exp-item .exp-item__desc {
	margin: 0 0 20px;
	font-size: 16px;
	color: var(--g);
	line-height: 1.6;
}

/* Price, desc, cta: max-height + opacity invece di display:none */
.exp-item .exp-item__price,
.exp-item .exp-item__desc,
.exp-item .exp-cta {
	display: block;
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	visibility: hidden;
	margin-bottom: 0;
	transition:
		max-height    0.55s cubic-bezier(0.16, 1, 0.3, 1),
		opacity       0.4s  ease,
		visibility    0s    linear 0.4s,
		margin-bottom 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.exp-item.is-active .exp-item__price {
	max-height: 80px;
	opacity: 1;
	visibility: visible;
	margin-bottom: 30px;
	transition:
		max-height    0.55s cubic-bezier(0.16, 1, 0.3, 1),
		opacity       0.4s  ease 0.1s,
		visibility    0s    linear,
		margin-bottom 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.exp-item.is-active .exp-item__desc {
	max-height: 200px;
	opacity: 1;
	visibility: visible;
	margin-bottom: 20px;
	transition:
		max-height    0.55s cubic-bezier(0.16, 1, 0.3, 1),
		opacity       0.4s  ease 0.15s,
		visibility    0s    linear,
		margin-bottom 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.exp-item.is-active .exp-cta {
	max-height: 60px;
	opacity: 1;
	visibility: visible;
	transition:
		max-height    0.55s cubic-bezier(0.16, 1, 0.3, 1),
		opacity       0.4s  ease 0.2s,
		visibility    0s    linear;
}

@media screen and (max-width: 1024px) {
	.esperienze-section .experiences {
		margin-top: 20px;
	}
	
	.esperienze-section .esperienze-section__immagini {
		display: none;
	}
}