/* =============================================================================
 * Section — Instagram (Accueil)
 * Cream background. 6 square tiles in 3×2 grid (3-up on tablet, 2-up on mobile).
 * Hover: sage overlay + caption.
 * ========================================================================== */

.exspa-ig {
	background: var(--exspa-cream, #F5F1E8);
	color: var(--exspa-sage-deep, #2A3325);
	/* Top padding for the heading, but ZERO horizontal padding so the photo
	   strip can take the entire page width. */
	padding: clamp(96px, 12vw, 180px) 0 0;
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.exspa-ig__header {
	padding: 0 clamp(24px, 5vw, 80px);
}

.exspa-ig__header {
	max-width: 760px;
	margin: 0 auto clamp(56px, 8vw, 96px);
	text-align: center;
}

.exspa-ig__eyebrow {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	margin: 0 0 24px;
	color: var(--exspa-sage, #3F4D38);
	opacity: 0.75;
}

.exspa-ig__heading {
	font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
	font-size: clamp(36px, 6vw, 72px);
	font-weight: 400;
	font-style: italic;
	line-height: 1;
	margin: 0 0 24px;
	color: var(--exspa-sage-deep, #2A3325);
}

.exspa-ig__handle {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-size: 100% 1px;
	background-repeat: no-repeat;
	transition: background-size 300ms ease;
	padding-bottom: 4px;
}

.exspa-ig__handle:hover {
	background-size: 100% 2px;
}

.exspa-ig__lede {
	font-size: 17.5px;
	line-height: 1.65;
	max-width: 48ch;
	margin: 0 auto;
	color: var(--exspa-sage-deep, #2A3325);
	opacity: 0.75;
}

.exspa-ig__grid {
	/* Full-bleed: 6 photos in ONE row, edge-to-edge, smaller. */
	max-width: none;
	width: 100%;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 0;
}

.exspa-ig__tile {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--exspa-sage, #3F4D38);
	text-decoration: none;
	color: var(--exspa-cream, #F5F1E8);
}

.exspa-ig__tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.exspa-ig__tile:hover img {
	transform: scale(1.06);
}

.exspa-ig__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(42, 51, 37, 0) 0%, rgba(42, 51, 37, 0.85) 100%);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	gap: 8px;
	padding: 20px;
	opacity: 0;
	transition: opacity 350ms ease;
}

.exspa-ig__tile:hover .exspa-ig__overlay {
	opacity: 1;
}

.exspa-ig__icon {
	width: 22px;
	height: 22px;
	color: var(--exspa-cream, #F5F1E8);
}

.exspa-ig__cap {
	font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
	font-size: 17px;
	font-style: italic;
	line-height: 1.2;
	color: var(--exspa-cream, #F5F1E8);
}

@media (max-width: 900px) {
	.exspa-ig__grid {
		grid-template-columns: repeat(3, 1fr); /* on tablet, 3 per row */
		gap: 0;
	}
	.exspa-ig__cap { font-size: 17px; }
	.exspa-ig__overlay { padding: 14px; }
}

@media (max-width: 540px) {
	.exspa-ig {
		padding: 72px 0 0;
	}
	.exspa-ig__header { padding: 0 16px; }
	.exspa-ig__grid {
		grid-template-columns: repeat(3, 1fr); /* on phone, stay 3 per row */
		gap: 0;
	}
	/* On touch, show the overlay/caption always (no hover) */
	.exspa-ig__overlay {
		opacity: 1;
		background: linear-gradient(180deg, rgba(42, 51, 37, 0) 40%, rgba(42, 51, 37, 0.7) 100%);
	}
}