/**
 * Learn Hero block (blocks/content/learn-hero.php)
 *
 * Opening section of the "Learn Mezcal" page: breadcrumb on flat cream, then a
 * large centered display heading (italic lead + roman rest) and a serif intro
 * paragraph.
 *
 * Type sizes are anchored to the block's known-good siblings: the breadcrumb
 * is the shared 14px treatment from style.css (.breadcrumbs.text-forest) and
 * the intro is the 20px Figma h6 used by villages-hero / learn-mezcal. The
 * heading runs larger than either — this is the page title, not a section head.
 */

.dm-learn-hero {
	/* Flat warm cream — no dotted texture here, unlike villages-hero. The
	   dotted field starts with the section below this one. */
	background-color: var(--color-cream);
	padding-top: clamp(1rem, 2vw, 1.5rem);
	padding-bottom: clamp(2.25rem, 4vw, 3.5rem);
	overflow: hidden;
}

/* ---- Breadcrumb ------------------------------------------------------ */
/* Breadcrumb type is centralised in style.css (.breadcrumbs.text-forest).
   The crumb list is a flex row (DaisyUI `.breadcrumbs > ul`), so it packs left
   against the container edge on its own — no alignment override needed here.
   `mx-auto lg:container px-4` on the wrapper puts that edge on the same
   16px gutter as .dm-header-inner, so the crumb lines up with the logo. */

/* ---- Heading + intro ------------------------------------------------- */
.dm-learn-hero__intro {
	margin-top: clamp(1.75rem, 3.5vw, 3rem);
	text-align: center;
	padding-inline: 16px;
}

.dm-learn-hero__heading {
	margin: 0 auto;
	max-width: 46rem;
	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 rest */
	/* Figma heading/h1 — 60px / 110% / -1.2px, down to heading-mobile/h1-M (40px). */
	font-size: clamp(2.5rem, 4.2vw, 3.75rem);
	line-height: 1.1;
	letter-spacing: -0.02em;                         /* -1.2px at 60px */
}

.dm-learn-hero__heading em {
	font-style: italic;                              /* italic lead word */
}

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

@media (max-width: 767px) {
	/* Tighter measure so the intro keeps a readable line length on phones. */
	.dm-learn-hero__text {
		max-width: 23rem;
		margin: 1.6rem auto 0;
	}
}

/* ---- Small desktop (1024-1280) -------------------------------------- *
 * No board for /blog/ or /learn-mezcal/ at this size; this follows the page
 * headers that do have one (All Villages 2023:28734, Village 2024:29103):
 * breadcrumb py-16, then py-64 around a 60px title with 32 down to a
 * 500-wide 20px intro.
 * Must stay at the end of the file: a media query adds no specificity. */
@media (min-width: 1024px) and (max-width: 1280.98px) {
	.dm-learn-hero {
		padding-top: 16px;
		padding-bottom: 64px;
	}

	/* Two classes so this outranks the inline px-4 utility. */
	.dm-learn-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-learn-hero__breadcrumb.breadcrumbs.text-forest li + *::before {
		opacity: 1;
		margin: 0 8px;
	}

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

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

	.dm-learn-hero__heading {
		font-size: 60px;                /* heading/h1 */
	}

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