/**
 * Learn Mezcal block (blocks/content/learn-mezcal.php)
 *
 * Centered heading + subtitle over a 3-up grid of blog-post cards
 * (image + category badge + title + arrow) and a Learn More CTA.
 */

.dm-learn {
	padding-block: clamp(3rem, 6vw, 5.5rem);
}

/* Optional tinted band, to separate a section from the page behind it. */
.dm-learn--bg-sand {
	background: var(--dm-bg-default-secondary);
}

.dm-learn__inner {
	padding-inline: 16px;
}

/* ---- Header --------------------------------------------------------- */
.dm-learn__head {
	text-align: center;
	max-width: 42rem;                    /* container for the title + subtitle */
	margin: 0 auto clamp(2.5rem, 4.5vw, 2.5rem);
}

.dm-learn__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 rest */
	/* Figma heading/h3 — 40px / 110% / -0.4px, down to heading-mobile/h3-M (30px). */
	font-size: clamp(1.875rem, 2.8vw, 2.5rem);
	line-height: 1.1;                    /* 110% → 44px */
	letter-spacing: -0.01em;             /* -0.4px at 40px */
}

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

.dm-learn__subtitle {
	margin: 1.4rem auto 0;               /* gap between title and subtitle */
	max-width: 42rem;
	color: var(--dm-fg-default-primary);
	font-family: var(--font-display, "IM Fell Double Pica", serif);
	font-size: 20px;                     /* heading/h6 */
	font-weight: 400;
	line-height: 1.2;                    /* 120% → 24px */
}

/* ---- Cards grid ----------------------------------------------------- */
.dm-learn__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.25rem, 2.4vw, 2.25rem);
}

.dm-learn__card {
	display: block;
	text-decoration: none;
	color: inherit;
}

.dm-learn__card-media {
	display: block;
	overflow: hidden;
	border-radius: 10px;
	aspect-ratio: 5 / 4;                 /* matches the 360×288 card ratio */
	background: var(--color-forest, var(--dm-bg-default-tertiary));
}

.dm-learn__card-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.dm-learn__card-img--empty {
	background: var(--color-forest, var(--dm-bg-default-tertiary));
}

/* Category badge — uppercase pill. Size and spacing are owned here; the colours
   come from the shared map in assets/css/category-badges.css, which the badge
   opts into via its `dm-cat dm-cat--<slug>` classes. */
.dm-learn__badge {
	display: inline-flex;
	align-items: center;                 /* vertically centre the label in the pill */
	margin-top: 0.85rem;                 /* tighter gap between image and badge */
	padding: 0.25rem 0.7rem;             /* pill height comes from lh + this pad */
	border-radius: 4px;
	background: var(--cat-bg, var(--dm-fg-accent-yellow));
	color: var(--cat-fg, var(--dm-fg-default-primary));
	font-family: var(--font-sans, "Roboto Condensed", sans-serif);
	font-size: 12px;                     /* body/xs/strong */
	font-weight: 500;
	text-transform: uppercase;
	line-height: 1.4;                    /* 140% → 16.8px */
}

.dm-learn__card-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 0.9rem;
	color: var(--dm-fg-default-primary);
}

.dm-learn__card-title {
	font-family: var(--font-display, "IM Fell Double Pica", serif);
	font-weight: 400;
	font-style: normal;                  /* heading/h6, roman */
	font-size: 20px;                     /* Figma 20px */
	line-height: 1.2;                    /* 120% → 24px */
}

.dm-learn__arrow {
	flex: 0 0 auto;
	color: var(--dm-fg-default-primary);
	transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Hover: zoom the image, nudge the arrow. */
@media (hover: hover) {
	.dm-learn__card:hover .dm-learn__card-img,
	.dm-learn__card:focus-visible .dm-learn__card-img {
		transform: scale(1.05);
	}

	.dm-learn__card:hover .dm-learn__arrow,
	.dm-learn__card:focus-visible .dm-learn__arrow {
		transform: translateX(5px);
	}
}

/* ---- Featured hero card --------------------------------------------- *
 * The lead card of the `featured` layout overlays its text on the image
 * instead of stacking it underneath. Shared by both breakpoints: on desktop
 * it spans two columns, on mobile it runs full width above the list rows.
 *
 * The card itself is the flex column and the image is what gets positioned,
 * so badge and title stack from the bottom edge and can never collide — an
 * earlier version pinned each to its own `bottom` offset, which overlapped as
 * soon as a title wrapped to two lines. */
.dm-learn__grid--featured .dm-learn__card:first-child {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	gap: 0.75rem;
	padding: 1.25rem;
	box-sizing: border-box;              /* so the padding sits inside the ratio */
	aspect-ratio: 5 / 4;                 /* height no longer comes from the media */
}

.dm-learn__grid--featured .dm-learn__card:first-child .dm-learn__card-media {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;                  /* fills the card instead */
}

.dm-learn__grid--featured .dm-learn__card:first-child::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 10px;                 /* matches .dm-learn__card-media */
	background: linear-gradient(to top, color-mix(in srgb, var(--color-forest) 78%, transparent), transparent 52%);
	pointer-events: none;
}

.dm-learn__grid--featured .dm-learn__card:first-child .dm-learn__badge {
	position: relative;                  /* lifts it over the ::after wash */
	z-index: 2;
	margin: 0;
}

.dm-learn__grid--featured .dm-learn__card:first-child .dm-learn__card-foot {
	position: relative;
	z-index: 2;
	width: 100%;
	margin: 0;
	flex-direction: row;                 /* stays a row even where cards stack */
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.dm-learn__grid--featured .dm-learn__card:first-child .dm-learn__card-title,
.dm-learn__grid--featured .dm-learn__card:first-child .dm-learn__arrow {
	color: var(--dm-fg-default-white);
}

/* ---- Layout variants (desktop) -------------------------------------- */
@media (min-width: 768px) {
	/* 4-up row. */
	.dm-learn__grid--grid-4 {
		grid-template-columns: repeat(4, 1fr);
	}

	/* Featured: one large card (2 columns wide) + two cards on the top right.
	   The cards sit at the top of their column, so the hero runs deliberately
	   taller than them rather than the pair stretching to match it. */
	.dm-learn__grid--featured {
		grid-template-columns: repeat(4, 1fr);
		align-items: start;
	}

	/* Hero card keeps the shared 5/4 media ratio, so at double width it is also
	   double height. */
	.dm-learn__grid--featured .dm-learn__card:first-child {
		grid-column: 1 / span 2;
	}
}

/* ---- CTA ------------------------------------------------------------ */
.dm-learn__cta-wrap {
	margin-top: clamp(2.45rem, 5vw, 2.4rem);
	text-align: center;
}

.dm-learn__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 1.9rem;
	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;
	font-weight: 400;
	line-height: 1.4;
	text-decoration: none;
}

/* ---- Responsive ----------------------------------------------------- */
/* Tablet: single-column stack. */
@media (min-width: 768px) and (max-width: 900px) {
	.dm-learn__grid {
		grid-template-columns: 1fr;
		max-width: 30rem;
		margin-inline: auto;
	}

	/* One column here, so the hero must not still claim two — the span would
	   add an implicit second column and break the 30rem measure. */
	.dm-learn__grid--featured .dm-learn__card:first-child {
		grid-column: auto;
	}
}

/* Mobile: header left, then a vertical stack of cards. No slider — every card
   is reachable by scrolling the page, so the track and its controls are gone. */
@media (max-width: 767px) {
	.dm-learn {
		padding-block: 4rem;             /* more top/bottom air on mobile */
	}

	/* Header aligns left on mobile (centered only on desktop). */
	.dm-learn__head {
		text-align: left;
		max-width: none;
		margin: 0 0 1.75rem;
	}

	.dm-learn__heading {
		max-width: 18ch;                 /* tighter wrap on mobile */
	}

	/* Figma heading-mobile/h6-M: IM FELL Double Pica, 18px, 120%. */
	.dm-learn__subtitle {
		margin: 0.85rem 0 0;             /* left-aligned header on mobile */
		font-size: 18px;
	}

	.dm-learn__grid {
		grid-template-columns: 1fr;
		gap: 1.75rem;
		max-width: none;
		margin-inline: 0;
	}

	/* Cards read as list rows: square thumb on the left, badge + title + arrow
	   stacked beside it. The 1fr spacer rows top and bottom centre that stack
	   against the thumb without needing a wrapper element in the markup. */
	.dm-learn__card {
		display: grid;
		grid-template-columns: 30% 1fr;
		grid-template-rows: 1fr auto auto 1fr;
		column-gap: 1rem;
	}

	.dm-learn__card-media {
		grid-column: 1;
		grid-row: 1 / -1;
		align-self: start;               /* keeps the square; row span would stretch it */
		aspect-ratio: 1 / 1;
	}

	.dm-learn__badge {
		grid-column: 2;
		grid-row: 2;
		justify-self: start;
		margin-top: 0;
		padding: 0.2rem 0.55rem;         /* lighter pill next to a small thumb */
	}

	.dm-learn__card-foot {
		grid-column: 2;
		grid-row: 3;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.35rem;
		margin-top: 0.55rem;
	}

	/* heading-mobile/h6-M — 20px was crowding the row once a title wrapped. */
	.dm-learn__card-title {
		font-size: 18px;
	}

	.dm-learn__arrow {
		width: 20px;
		height: 20px;
	}

	/* CTA sits under the stack, left-aligned with the header. */
	.dm-learn__cta-wrap {
		margin: 2rem 0 0;
		text-align: left;
	}
}

/* ---- Small desktop (1024-1280): match the Figma board ---------------- *
 * Figma "Home Page - Small Desktop" > section container (1987:16271):
 * px-100 py-80; header gap 32 (heading 52/110%/-1.04px, intro 20/120% at
 * 500px); 40px to the card row; cards flex-1 with a 32px gap; 40px to the
 * Learn More button.
 * 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 {
		padding-block: 80px;
	}

	.dm-learn__inner {
		/* The capped 1080 container already provides Figma's 100px gutter. */
		padding-inline: 0;
	}

	.dm-learn__head {
		max-width: none;
		margin-bottom: 40px;
	}

	.dm-learn__heading {
		font-size: 52px;                /* heading/h2 */
		letter-spacing: -0.02em;        /* -1.04px at 52px */
		/* Figma breaks this title after "know" with an explicit line break.
		   Capping the measure forces the same two-line split here, instead of
		   relying on it happening to wrap there at 1080. */
		max-width: 650px;
		margin-inline: auto;
	}

	.dm-learn__subtitle {
		margin-top: 32px;
		max-width: 500px;
	}

	.dm-learn__grid {
		gap: 32px;
	}

	/* Four-up rows (Learn Mezcal "Beyond the Bottle" / "Master the Craft"):
	   at 32 apart the cards drop to 246, so close to 24 for 252. Kept at four
	   rather than the 280-minimum three, which would strand the 4th post. */
	.dm-learn__grid--grid-4 {
		gap: 24px;
	}

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

	/* ui-article-cards (859:13125): 4px image corners; 16 to a 24-tall badge
	   (px-8); 16 to the 20px title, bottom-aligned with a 24 arrow, 16 apart. */
	.dm-learn__card-media {
		border-radius: 4px;
	}

	.dm-learn__badge {
		height: 24px;
		margin-top: 16px;
		padding: 0 8px;
	}

	.dm-learn__card-foot {
		align-items: flex-end;
		gap: 16px;
		margin-top: 16px;
	}

	.dm-learn__arrow {
		width: 24px;
		height: 24px;
	}

	/* Journal's featured band: the lead card overlays its copy, so it takes
	   the same corners and spacing, inset 24 like the board's card padding. */
	.dm-learn__grid--featured .dm-learn__card:first-child {
		gap: 16px;
		padding: 24px;
	}

	.dm-learn__grid--featured .dm-learn__card:first-child::after {
		border-radius: 4px;
	}
}