/**
 * Villages Collage block (blocks/content/villages-collage.php)
 *
 * Centered display heading (roman + inline italic) + intro + CTA, flanked by two
 * columns of three staggered village photos.
 */

.dm-villages {
	padding-block: clamp(3.5rem, 7vw, 6.5rem);
	overflow: hidden;
	background: var(--dm-bg-default-secondary);
}

.dm-villages__inner {
	display: grid;
	/* Side clusters sized to their own width (auto) and centered, so the photos
	   sit near the text instead of the viewport edges. */
	grid-template-columns: auto minmax(300px, 32rem) auto;
	justify-content: center;
	align-items: center;
	gap: clamp(1.5rem, 3.5vw, 4rem);
	padding-inline: 16px;
}

/* ---- Center text ---------------------------------------------------- */
.dm-villages__center {
	text-align: center;
}

.dm-villages__heading {
	margin: 0;
	color: var(--dm-fg-default-primary);                      /* Semantics/fg/default/primary */
	font-family: var(--font-display, "IM Fell Double Pica", serif);
	font-weight: 400;
	font-style: normal;                  /* roman */
	font-size: clamp(2.25rem, 4.2vw, 3.25rem); /* caps at Figma 52px */
	line-height: 1.1;                    /* 110% */
	letter-spacing: -0.02em;             /* -1.04px at 52px */
}

.dm-villages__heading em {
	font-style: italic;
}

.dm-villages__intro {
	margin: 1rem auto 0;
	max-width: 27rem;
	color: var(--dm-fg-default-primary);
	font-family: var(--font-sans, "Roboto Condensed", sans-serif);
	font-size: 18px;                     /* body/lg/regular */
	font-weight: 400;
	line-height: 1.4;                    /* 140% → 25.2px */
}

.dm-villages__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	margin-top: clamp(1.45rem, 3vw, 2.5rem);
	padding: 0 1.75rem;
	border-radius: 999px;
	background: var(--dm-bg-default-tertiary);
	color: var(--dm-fg-default-white);
	font-family: var(--font-sans, "Roboto Condensed", sans-serif);
	font-size: 16px;                     /* body/md/regular */
	font-weight: 400;
	line-height: 1.4;
	text-decoration: none;
}

/* ---- Image columns -------------------------------------------------- */
.dm-villages__col {
	display: flex;
	flex-direction: column;
	gap: clamp(0.75rem, 1.2vw, 1.25rem);
	/* Wider than a photo so the middle image can jut out to the cluster edge. */
	width: clamp(290px, 26vw, 390px);
}

.dm-villages__figure {
	position: relative;
	z-index: 1;
	margin: 0;
	width: clamp(215px, 18vw, 275px);
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 18px 36px color-mix(in srgb, var(--color-forest) 13%, transparent);
	will-change: transform;              /* JS mouse-parallax writes transform here */
	transition: box-shadow 0.3s ease;
	cursor: pointer;                     /* opens the lightbox */
}

.dm-villages__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Hover: zoom the photo and lift the card forward. */
@media (hover: hover) {
	.dm-villages__figure:hover {
		box-shadow: 0 26px 52px color-mix(in srgb, var(--color-forest) 24%, transparent);
	}

	.dm-villages__figure:hover .dm-villages__img {
		transform: scale(1.06);
	}
}

/* Stagger: the middle photo juts to the OUTER edge of the cluster; the top and
   bottom photos align to the INNER edge (nearest the text). */
.dm-villages__col--left .dm-villages__figure:nth-child(1) { align-self: flex-end; }
.dm-villages__col--left .dm-villages__figure:nth-child(2) { align-self: flex-start; }
.dm-villages__col--left .dm-villages__figure:nth-child(3) { align-self: flex-end; }

.dm-villages__col--right .dm-villages__figure:nth-child(1) { align-self: flex-start; }
.dm-villages__col--right .dm-villages__figure:nth-child(2) { align-self: flex-end; }
.dm-villages__col--right .dm-villages__figure:nth-child(3) { align-self: flex-start; }

/* Middle (jutting) photo is a touch larger and overlaps the top & bottom ones. */
.dm-villages__col .dm-villages__figure:nth-child(2) {
	width: clamp(240px, 20vw, 305px);
	margin-block: clamp(-2.5rem, -2.6vw, -1.25rem);
	z-index: 2;                          /* sits on top of its neighbours */
}

/* ---- Responsive: text on top, photos in a centered row below -------- */
@media (max-width: 1024px) {
	.dm-villages__inner {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	/* Natural DOM order (left col -> center -> right col) gives the same
	   stacked design the phone uses: a 3-photo row, the text, a second row.
	   Hoisting the text above both rows leaves a 6-photo wall instead. */
	.dm-villages__center {
		order: 0;
	}

	.dm-villages__heading {
		margin-inline: auto;
		text-align: center;
	}

	.dm-villages__col {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: flex-start;
		justify-content: center;
		gap: 1rem;
		margin-top: 0;
		/* Reset the desktop cluster width, or the photos stay trapped in a
		   290px left-aligned column and wrap into a vertical stack. */
		width: 100%;
	}

	.dm-villages__figure {
		align-self: auto !important;
		transform: none !important;
		flex: 0 1 auto;
		min-width: 0;
		width: clamp(130px, 29vw, 215px);
	}

	/* Middle photo juts out, as on desktop and phone: up on the top row,
	   down on the bottom row. */
	.dm-villages__col--left .dm-villages__figure:nth-child(2) {
		margin-top: -1.5rem;
	}

	.dm-villages__col--right .dm-villages__figure:nth-child(2) {
		margin-top: 1.5rem;
	}
}

/* ---- Phone: photo row on top, text, photo row below --------------- *
 * Natural DOM order (left col → center → right col) gives the stacked
 * design: a 3-photo row, the heading/intro/CTA, then a second 3-photo row.
 * The centre photo of each row is a touch taller so it juts out. */
@media (max-width: 767px) {
	.dm-villages {
		padding-block: 5.5rem;
	}

	.dm-villages__inner {
		gap: clamp(2.5rem, 8vw, 3.5rem);
	}

	/* Keep the text between the two rows (undo the tablet reorder). */
	.dm-villages__center {
		order: 0;
	}

	.dm-villages__heading {
		max-width: 18ch;
		margin: 1.5rem auto 0;           /* more space above + centre the block */
		text-align: center;
	}

	.dm-villages__intro {
		max-width: 25rem;
	}

	/* Three equal photos across; the middle one is nudged slightly upward. */
	.dm-villages__col {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: flex-start;
		justify-content: center;
		gap: 10px;
		width: 100%;
	}

	/* All photos the same size, sized in vw so the row is wider than the screen.
	   Centred, so the middle stays in view while the 1st & 3rd bleed ~20% of
	   their width off the left/right edges (clipped by overflow:hidden). */
	.dm-villages__col .dm-villages__figure {
		flex: 0 0 auto;
		width: 36vw !important;
		min-width: 0;
	}

	.dm-villages__col .dm-villages__figure:nth-child(2) {
		z-index: 2;
	}

	/* Top row: middle photo sits a touch higher than its neighbours. */
	.dm-villages__col--left .dm-villages__figure:nth-child(2) {
		margin-top: -1.25rem;
	}

	/* Bottom row: middle photo sits a touch lower than its neighbours. */
	.dm-villages__col--right .dm-villages__figure:nth-child(2) {
		margin-top: 1.25rem;
	}
}

/* ---- Lightbox (DaisyUI .modal / native <dialog>) -------------------- */
.dm-villages__lightbox-box {
	position: relative;
	width: auto;
	max-width: 92vw;
	padding: 0;
	background: transparent;
	box-shadow: none;
	overflow: visible;
}

/* Show at native resolution — only ever scale DOWN to fit the viewport, never up,
   so the photo stays crisp instead of being blurred by upscaling. */
.dm-villages__lightbox-img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 88vh;
	border-radius: 8px;
	box-shadow: 0 30px 80px color-mix(in srgb, var(--dm-ext-black) 50%, transparent);
}

.dm-villages__lightbox-close {
	position: absolute;
	top: -16px;
	right: -16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 999px;
	background: var(--dm-bg-default-white);
	color: var(--dm-fg-default-primary);
	cursor: pointer;
	box-shadow: 0 6px 18px color-mix(in srgb, var(--dm-ext-black) 35%, transparent);
	transition: transform 0.18s ease;
}

.dm-villages__lightbox-close:hover {
	transform: scale(1.08);
}

/* Open animation: fade + scale-up (in addition to the modal backdrop fade). */
.dm-villages__lightbox[open] .dm-villages__lightbox-box {
	animation: dm-villages-lightbox-in 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes dm-villages-lightbox-in {
	from {
		opacity: 0;
		transform: scale(0.9) translateY(12px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dm-villages__lightbox[open] .dm-villages__lightbox-box {
		animation: none;
	}
}

/* ---- Small desktop (1025-1280): match the Figma board ---------------- *
 * Figma "Home Page - Small Desktop" > image-text-container (1987:16259).
 * The collage deliberately breaks out of the 1080 container: the photos start
 * at x=40, so the section measures 1200 wide at a 1280 board.
 *   left cluster   40..307   (267 wide: 211 middle at x=40, 179 outers at 128)
 *   centre text   258..1022
 *   right cluster 958..1240
 * Figma overlaps the text over the clusters; a grid can't, so the columns are
 * pinned at 267 and the centre takes the remaining 666 - enough for the
 * heading to break as the board does ("each mezcal tells the story" on one
 * line) instead of the 326px column the container cap was forcing.
 *
 * Starts at 1025, not 1024: the tablet block above owns `max-width: 1024px`
 * (text between two photo rows) and must keep that width to itself.
 * Must stay at the end of the file: a media query adds no specificity. */
@media (min-width: 1025px) and (max-width: 1280.98px) {
	.dm-villages {
		padding-block: 40px;
	}

	.dm-villages__inner {
		/* Override the 1080 container cap - this section is 1200 wide. */
		max-width: 1200px;
		padding-inline: 0;
		grid-template-columns: 267px minmax(0, 1fr) 267px;
		gap: 0;
	}

	.dm-villages__col {
		width: 267px;                   /* cluster width, not 333 */
	}

	.dm-villages__figure {
		width: 179px;                   /* outer photos */
	}

	.dm-villages__col .dm-villages__figure:nth-child(2) {
		width: 211px;                   /* middle photo juts out, and is larger */
	}

	.dm-villages__heading {
		font-size: 52px;                /* heading/h2 */
	}

	.dm-villages__intro {
		margin-top: 32px;
		max-width: none;
	}

	.dm-villages__cta {
		margin-top: 40px;
	}
}