/**
 * Villages Hero block (blocks/content/villages-hero.php)
 *
 * Opening section of the "Our Villages" page: centered display heading (roman
 * lead + inline italic) + intro paragraph, over a full-bleed landscape image.
 */

.dm-villages-hero {
	background-color: var(--color-cream);
	padding-top: clamp(0.25rem, 3vw, 0.6rem);
	overflow: hidden;
}

/* Flat cream, no texture. A no-op since the dotted texture was removed
   site-wide, but kept so the block's `background_texture` toggle (and the
   pages already saved with it off) keep resolving to a real rule. */
.dm-villages-hero--flat {
	background-image: none;
}

/* ---- Breadcrumb (same treatment as the product / cocktail PDP) ------ */
/* Breadcrumb type is centralised in style.css (.breadcrumbs.text-forest). */

/* Extra space between the breadcrumb and the centered heading block. */
.dm-villages-hero__intro {
	margin-top: clamp(2rem, 5vw, 4rem);
}

/* ---- Intro text ----------------------------------------------------- */
.dm-villages-hero__intro {
	text-align: center;
	padding-inline: 16px;
}

.dm-villages-hero__heading {
	margin: 0 auto;
	max-width: 23rem;                                /* constrain width (adjustable) */
	color: var(--dm-bg-default-tertiary);                                  /* Semantics/fg/default/primary */
	text-align: center;
	font-family: var(--font-display, "IM Fell Double Pica", serif);
	font-weight: 400;
	font-style: normal;                              /* roman */
	font-size: clamp(2.5rem, 4.6vw, 3.75rem);        /* Figma h1: 40px mobile -> 60px caps */
	line-height: 1.1;                                /* 110% -> 66px */
	letter-spacing: -0.02em;                         /* = -1.2px @ 60px */
}

.dm-villages-hero__heading em {
	font-style: italic;
}

.dm-villages-hero__text {
	margin: 1.75rem auto 0;
	max-width: 31rem;
	color: var(--dm-fg-default-primary);
	text-align: center;
	font-family: var(--font-display, "IM Fell Double Pica", serif);
	font-size: clamp(1.125rem, 1.6vw, 1.25rem);      /* Figma h6: 18px mobile -> 20px desktop */
	font-weight: 400;
	line-height: 1.2;                                /* 120% */
}

/* ---- Full-bleed image ----------------------------------------------- */
.dm-villages-hero__figure {
	margin: clamp(2rem, 5vw, 3.75rem) 0 0;
	width: 100%;
}

.dm-villages-hero__img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 78vh;
	object-fit: cover;
}

/* Desktop-only heading line breaks; on mobile the heading wraps naturally. */
@media (max-width: 767px) {
	.dm-villages-hero__br {
		display: none;
	}

	/* Tighter heading measure so it wraps to the intended 3 lines on mobile. */
	.dm-villages-hero__heading {
		max-width: 17rem;
	}

	/* Hold the Figma image proportion on mobile (430 x 360) instead of a fixed
	   viewport height, so it scales with the screen width but keeps its shape. */
	.dm-villages-hero__img {
		height: auto;
		max-height: none;
		aspect-ratio: 430 / 360;
		object-fit: cover;
	}
}

/* ---- Small desktop (1024-1280): match the Figma board ---------------- *
 * Figma "All Villages - Small Desktop" (2023:28704):
 *   breadcrumbs (2023:28733)  py-16
 *   Header (2023:28734)       py-64, 32 between the 60px heading and the
 *                             500-wide 20px intro
 *   image (2023:28738)        full bleed, 500 tall
 * Must stay at the end of the file: a media query adds no specificity. */
@media (min-width: 1024px) and (max-width: 1280.98px) {
	.dm-villages-hero {
		padding-top: 16px;
	}

	/* The capped 1080 container already provides Figma's 100px gutter. */
	/* Two classes so this outranks the inline px-4 utility. */
	.dm-villages-hero__breadcrumb.breadcrumbs {
		padding-inline: 0;
	}

	/* Breadcrumb as on every board: 8 between items, pipes full strength,
	   current page at 70% (style.css defaults to 0.4 / 0.5). */
	.dm-villages-hero__breadcrumb.breadcrumbs.text-forest li + *::before {
		opacity: 1;
		margin: 0 8px;
	}

	.dm-villages-hero__breadcrumb.breadcrumbs.text-forest li:last-child {
		opacity: 0.7;
	}

	/* 16 under the breadcrumb + the header's 64 top padding. */
	.dm-villages-hero__intro {
		margin-top: 80px;
	}

	.dm-villages-hero__heading {
		font-size: 60px;
	}

	.dm-villages-hero__text {
		margin-top: 32px;
		max-width: 500px;
		font-size: 20px;
	}

	.dm-villages-hero__figure {
		margin-top: 64px;
	}

	.dm-villages-hero__img {
		height: 500px;
		max-height: none;
	}
}