/**
 * Mezcal Banner block (blocks/content/mezcal-banner.php)
 *
 * Full-bleed override for the shared .dm-mezcal-banner (base styles live in
 * mezcales-listing.css). On the page the banner spans edge-to-edge with square
 * corners, instead of the rounded card used inside the listing grid.
 */

.dm-mezcal-banner-block {
	width: 100%;
}

.dm-mezcal-banner-block .dm-mezcal-banner {
	border-radius: 0;                   /* full-bleed, not a rounded card */
}

/* Keep the right-hand content aligned with the site container on very wide
   screens so it doesn't drift to the extreme edge. */
@media (min-width: 1536px) {
	.dm-mezcal-banner-block .dm-mezcal-banner__inner {
		max-width: 96rem;               /* matches the site container cap */
		margin-inline: auto;
	}
}

/* ---- Small desktop (1280+): match the Figma board -------------------- *
 * Figma "Home Page - Small Desktop" > banner-container (1987:16220):
 * outer py-64 (full-bleed horizontally); the image band is 1280x492 with
 * px-120; the copy sits in a 520px column pinned right, vertically centred,
 * with 32px between heading and button.
 *
 * `.dm-mezcal-banner` already carries `width: 100%`, so the aspect-ratio here
 * can only resolve to a height — never backwards into a width. */
@media (min-width: 1024px) and (max-width: 1280.98px) {
	.dm-mezcal-banner-block {
		padding-block: 64px;
	}

	.dm-mezcal-banner-block .dm-mezcal-banner {
		aspect-ratio: 1280 / 492;
	}

	.dm-mezcal-banner-block .dm-mezcal-banner__inner {
		padding: 0 120px;
	}

	.dm-mezcal-banner-block .dm-mezcal-banner__content {
		max-width: 520px;
		margin-left: auto;              /* pin the column to the right gutter */
	}

	.dm-mezcal-banner-block .dm-mezcal-banner__title {
		margin-bottom: 32px;            /* Figma gap between heading and button */
	}

	.dm-mezcal-banner-block .dm-mezcal-banner__btn {
		min-height: 48px;
		padding: 0 24px;
	}
}