/* Drink With Us — Hero
   Full-bleed banner with an intent picker.

   The background image, colour and scrim only apply when an image is set.
   With no image the module is fully transparent and inherits whatever sits
   behind it — set "Text colour" to match. */

.dwu-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	isolation: isolate;
}

.dwu-hero--has-image {
	background-color: var(--color-inky-green, #0f2e26);
}

.dwu-hero--has-image::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image: var(--dwu-hero-image, none);
	background-size: cover;
	background-position: center var(--dwu-hero-focal, center);
	background-repeat: no-repeat;
}

.dwu-hero--has-image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		to bottom,
		rgba(15, 46, 38, calc(var(--dwu-hero-scrim, 0.45) * 0.85)) 0%,
		rgba(15, 46, 38, calc(var(--dwu-hero-scrim, 0.45) * 0.5)) 38%,
		rgba(15, 46, 38, calc(var(--dwu-hero-scrim, 0.45) + 0.28)) 100%
	);
}

/* Heights */

.dwu-hero--short  { min-height: 46vh; }
.dwu-hero--medium { min-height: 62vh; }
.dwu-hero--tall   { min-height: 78vh; }
.dwu-hero--full   { min-height: 100vh; }

.dwu-hero__inner {
	position: relative;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	padding: var(--space-16, 4rem) var(--space-6, 1.5rem) var(--space-12, 3rem);
}

.dwu-hero--under-header .dwu-hero__inner {
	padding-top: calc(var(--space-16, 4rem) + 120px);
}

.dwu-hero--center {
	align-items: center;
	text-align: center;
}

.dwu-hero--center .dwu-hero__intents {
	max-width: 620px;
	margin-inline: auto;
}

/* Colour variants — one custom property drives everything below */

.dwu-hero--text-light {
	--dwu-hero-ink: var(--color-soft-white, #f9f9f6);
	--dwu-hero-ink-soft: rgba(249, 249, 246, 0.72);
	--dwu-hero-rule: rgba(249, 249, 246, 0.28);
	--dwu-hero-wash: rgba(249, 249, 246, 0.08);
}

.dwu-hero--text-dark {
	--dwu-hero-ink: var(--color-inky-green, #0f2e26);
	--dwu-hero-ink-soft: rgba(15, 46, 38, 0.68);
	--dwu-hero-rule: rgba(15, 46, 38, 0.18);
	--dwu-hero-wash: rgba(15, 46, 38, 0.05);
}

.dwu-hero {
	color: var(--dwu-hero-ink);
}

/* Copy */

/* Eyebrow — visually an h6, semantically a <p>.

   It stays a paragraph so "Northern Willamette Valley · Oregon Wine
   Country" doesn't enter the document outline above the h1. The three-
   class selector is required: .fl-page p sets font-size and line-height
   at 0,2,0 and prints after this file, so anything lower loses. */

.fl-page .dwu-hero .dwu-hero__eyebrow {
	margin: 0 0 var(--space-4, 1rem);
	max-width: none;
	color: var(--dwu-hero-ink);
	font-family: var(--font-body, sans-serif);
	font-weight: var(--font-weight-bold, 400);
	font-size: var(--text-xs, 0.875rem);
	line-height: var(--line-height-tight, 1.2);
	letter-spacing: var(--tracking-label, 0.12em);
	text-transform: uppercase;
	opacity: 0.85;
}

.fl-page .dwu-hero__headline {
	margin: 0;
	color: var(--dwu-hero-ink);
	font-family: var(--font-heading, sans-serif);
	font-size: clamp(2.5rem, 6vw, 4.25rem);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.fl-page .dwu-hero .dwu-hero__intro {
	margin: var(--space-4, 1rem) 0 0;
	max-width: 46ch;
	color: var(--dwu-hero-ink);
	font-size: var(--text-base, 1.125rem);
	line-height: 1.5;
	opacity: 0.9;
}

.dwu-hero--center .dwu-hero__intro {
	margin-inline: auto;
}

/* Intent list */

.dwu-hero__intents {
	list-style: none;
	margin: var(--space-8, 2rem) 0 0;
	padding: 0;
	max-width: 560px;
	border-top: 1px solid var(--dwu-hero-rule);
}

.dwu-hero__intent-item {
	border-bottom: 1px solid var(--dwu-hero-rule);
}

.fl-page a.dwu-hero__intent {
	display: flex;
	align-items: baseline;
	gap: var(--space-3, 0.75rem);
	padding: var(--space-4, 1rem) var(--space-2, 0.5rem);
	color: var(--dwu-hero-ink);
	text-decoration: none;
	transition: padding-left 0.22s ease, background-color 0.22s ease;
}

.fl-page a.dwu-hero__intent:hover,
.fl-page a.dwu-hero__intent:focus-visible {
	padding-left: var(--space-5, 1.25rem);
	background: var(--dwu-hero-wash);
	color: var(--dwu-hero-ink);
	outline: none;
}

.fl-page a.dwu-hero__intent:focus-visible {
	box-shadow: inset 0 0 0 2px var(--dwu-hero-ink);
}

.dwu-hero__intent-label {
	font-family: var(--font-heading, sans-serif);
	font-size: clamp(1.25rem, 2.4vw, 1.6rem);
	line-height: 1.2;
}

.dwu-hero__intent-sub {
	flex: 1;
	color: var(--dwu-hero-ink-soft);
	font-size: var(--text-xs, 0.875rem);
	line-height: 1.4;
}

.dwu-hero__intent-arrow {
	flex: none;
	align-self: center;
	width: 22px;
	height: 8px;
	border-bottom: 1px solid currentColor;
	position: relative;
	opacity: 0.55;
	transition: opacity 0.22s ease, transform 0.22s ease;
}

.dwu-hero__intent-arrow::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -3px;
	width: 6px;
	height: 6px;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	transform: rotate(45deg);
}

.fl-page a.dwu-hero__intent:hover .dwu-hero__intent-arrow,
.fl-page a.dwu-hero__intent:focus-visible .dwu-hero__intent-arrow {
	opacity: 1;
	transform: translateX(4px);
}

.dwu-hero__empty {
	margin-top: var(--space-6, 1.5rem);
	padding: var(--space-4, 1rem);
	border: 1px dashed var(--dwu-hero-rule);
	color: var(--dwu-hero-ink-soft);
	font-size: var(--text-xs, 0.875rem);
}

/* Mobile */

@media (max-width: 767px) {
	.dwu-hero--tall,
	.dwu-hero--full {
		min-height: 88vh;
	}

	.dwu-hero__inner {
		padding-left: var(--space-5, 1.25rem);
		padding-right: var(--space-5, 1.25rem);
	}

	.dwu-hero--under-header .dwu-hero__inner {
		padding-top: calc(var(--space-12, 3rem) + 90px);
	}

	.fl-page a.dwu-hero__intent {
		flex-wrap: wrap;
		padding-block: var(--space-3, 0.75rem);
	}

	.dwu-hero__intent-sub {
		flex-basis: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fl-page a.dwu-hero__intent,
	.dwu-hero__intent-arrow {
		transition: none;
	}
}

@media print {
	.dwu-hero {
		min-height: 0;
		color: #000;
	}

	.dwu-hero--has-image::before,
	.dwu-hero--has-image::after {
		display: none;
	}
}