/*
 * Front-page hero.
 *
 * Sizing is deliberately intrinsic — min-height and clamp() rather than fixed
 * boxes — because GTranslate swaps the text for languages with very different
 * string lengths. Nothing here assumes Persian.
 *
 * Alignment uses logical properties so the layout flips with dir automatically.
 * Rules are scoped under .rb-hero because Woodmart's global heading styles
 * outrank a bare class and would otherwise reset font-size and line-height.
 */

/*
 * Deliberately contained rather than full-bleed.
 *
 * The source is 720p. Capping the frame at 1200px means it never upscales on
 * any display, since the video is 1280px wide. Keeping it short matters just as
 * much: a tall box forces object-fit: cover to zoom into a 16:9 source to fill
 * the height, and that magnification is what reads as softness. The inset and
 * rounded corners are the visual dividend.
 */
.rb-hero {
	position: relative;
	width: min(1200px, 100% - clamp(1rem, 2.4vw, 2.5rem));
	min-height: clamp(15rem, 33vh, 21rem);
	/*
	 * The video is 16:9 (1.78). Left to size itself the box came out at 2.79:1,
	 * which made object-fit: cover discard 36% of the frame's height.
	 *
	 * 2.7:1 keeps the hero compact while trimming the crop a little. The
	 * remaining crop is handled by object-position rather than by growing the
	 * box, since height is the thing being kept down.
	 *
	 * min-height stays as the floor, so short viewports never get a tall hero.
	 */
	aspect-ratio: 2.7 / 1;
	/*
	 * Starts below the overlay header rather than under it, so the cart, logo
	 * and burger sit on the white page and stay legible. --rb-header-h is
	 * measured by hero.js; the fallback covers the moment before it runs.
	 */
	margin-block-start: calc(var(--rb-header-h, 60px) + 10px);
	margin-block-end: clamp(0.5rem, 1.2vw, 1.25rem);
	margin-inline: auto;
	display: flex;
	align-items: center;
	overflow: hidden;
	border-radius: clamp(14px, 1.8vw, 28px);
	background: #171008;
	isolation: isolate;
}

@media (max-width: 767px) {
	.rb-hero {
		margin-inline: 0.5rem;
		border-radius: 14px;
	}
}

/*
 * The theme allows the logo 90px on desktop, which is oversized next to a
 * compact hero and inflates the whole header row with it. Trimming it shrinks
 * the logo and the gap beneath it in one move. Left untouched below 1025px,
 * where the header already drops to 60px and the proportions are right.
 */
@media (min-width: 1025px) {
	.whb-header .wd-logo img {
		max-height: 62px;
	}
}

/* Media ------------------------------------------------------------------ */

.rb-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.rb-hero__poster,
.rb-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/*
	 * Biased hard toward the bottom of the frame.
	 *
	 * The source has empty wet slate below the chocolate, and that gap is what
	 * makes the shot feel composed rather than cropped. Anything near 50% eats
	 * it and the chocolate ends up flush against the lower edge. Higher
	 * percentages keep the bottom of the frame; lower ones keep the top.
	 */
	object-position: center 88%;
}

.rb-hero__video {
	opacity: 0;
	transition: opacity 900ms ease;
}

.rb-hero__video.is-active {
	opacity: 1;
}

/*
 * The intro's pour falls in from the top of the frame, so it needs the opposite
 * bias to the loop — pinned to the bottom, the ribbon would be cropped away
 * before it enters.
 */
.rb-hero__video--intro {
	object-position: center 62%;
}

/* Set on the intro-to-loop swap, which must not crossfade. See hero.js. */
.rb-hero__video.is-instant {
	transition: none;
}

/* Direction-agnostic scrim: a flat veil plus gradients from top and bottom.
   Avoids a side gradient, which would sit on the wrong edge in LTR. */
.rb-hero__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to bottom, rgba(12, 8, 4, 0.82) 0%, rgba(12, 8, 4, 0.28) 42%, rgba(12, 8, 4, 0.14) 62%, rgba(12, 8, 4, 0.66) 100%),
		rgba(12, 8, 4, 0.22);
}

/* Brand pattern ----------------------------------------------------------- */

/*
 * Anchored to the inline-end edge, so it sits opposite the text in both
 * directions: left of the copy in Persian, right of it once translated.
 * Rises from the lower edge, as the original did.
 */
.rb-ltr .rb-hero__pattern {
	--rb-pattern-flip: scaleX(-1);
}

.rb-hero__pattern {
	position: absolute;
	z-index: 1;
	inset-block-end: 0;
	inset-inline-end: 0;
	width: clamp(16rem, 34vw, 30rem);
	pointer-events: none;
	opacity: 0.75;
	mix-blend-mode: screen;
}

.rb-hero__pattern img {
	display: block;
	width: 100%;
	height: auto;
	/*
	 * Mirrored for left-to-right languages.
	 *
	 * The artwork's lines are denser toward one side. Anchored to the
	 * inline-end edge that dense side faces outward in RTL, but once the
	 * layout flips it would face inward and the pattern would look inset from
	 * the banner edge. Flipping the same image keeps it hugging the outer edge
	 * in both directions.
	 */
	transform: var(--rb-pattern-flip, none);
	/* Fades out before the text column begins. */
	-webkit-mask-image: linear-gradient(to top, #000 30%, transparent 100%);
	mask-image: linear-gradient(to top, #000 30%, transparent 100%);
}

/* Content ---------------------------------------------------------------- */

.rb-hero .rb-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1400px;
	margin-inline: auto;
	/*
	 * No longer has to clear the header — the hero now starts below it — so the
	 * copy sits centred in the frame instead of pushed to the bottom.
	 */
	padding: clamp(2rem, 5vh, 3rem) clamp(1.25rem, 5vw, 3.5rem);
}

/*
 * Measure is set in rem, not ch: the Persian webfont has a very narrow zero
 * glyph, so 34ch resolves to about 256px and collapses the whole column.
 */
.rb-hero .rb-hero__content {
	max-width: min(36rem, 100%);
	text-align: start;
	color: #fff;
}

.rb-hero .rb-hero__eyebrow {
	margin: 0 0 clamp(0.5rem, 1.4vw, 1rem);
	font-size: clamp(0.8rem, 1.15vw, 0.95rem);
	letter-spacing: 0.14em;
	color: #e2c188;
	text-transform: uppercase;
}

.rb-hero .rb-hero__title {
	margin: 0 0 clamp(0.75rem, 1.8vw, 1.25rem);
	font-size: clamp(2.1rem, 4.4vw, 3.6rem);
	line-height: 1.28;
	font-weight: 700;
	color: #fff;
	text-wrap: balance;
	text-shadow: 0 2px 28px rgba(0, 0, 0, 0.55);
}

.rb-hero .rb-hero__title em {
	font-style: normal;
	color: #d9b06a;
}

.rb-hero .rb-hero__lede {
	margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
	font-size: clamp(0.95rem, 1.45vw, 1.2rem);
	line-height: 1.85;
	color: rgba(255, 255, 255, 0.86);
	text-shadow: 0 1px 16px rgba(0, 0, 0, 0.5);
}

/* Actions ---------------------------------------------------------------- */

.rb-hero .rb-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(0.6rem, 1.4vw, 1rem);
}

.rb-hero .rb-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	min-height: 3rem;
	padding: 0.85em 1.9em;
	border-radius: 999px;
	font-size: clamp(0.9rem, 1.15vw, 1.02rem);
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	transition: transform 220ms ease, background-color 220ms ease, box-shadow 220ms ease;
}

.rb-hero .rb-btn--primary {
	background: #d2ac67;
	color: #241704;
	box-shadow: 0 10px 30px rgba(210, 172, 103, 0.28);
}

.rb-btn--primary:hover,
.rb-btn--primary:focus-visible {
	background: #e2c188;
	color: #241704;
	transform: translateY(-2px);
}

.rb-hero .rb-btn--ghost {
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.42);
	backdrop-filter: blur(6px);
}

.rb-btn--ghost:hover,
.rb-btn--ghost:focus-visible {
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
	transform: translateY(-2px);
}

.rb-btn:focus-visible {
	outline: 3px solid #e2c188;
	outline-offset: 3px;
}

.rb-btn__icon {
	font-size: 1.1em;
	line-height: 1;
}

/* Scroll handoff to the white page below ---------------------------------- */

.rb-hero__media,
.rb-hero__content {
	will-change: transform, opacity;
}

/* Retire the original Elementor hero on the front page. */
.home .elementor-element-6623f70 {
	display: none !important;
}

/* Reduced motion: still shows the scene, just never moves. */
@media (prefers-reduced-motion: reduce) {
	.rb-hero__video {
		display: none;
	}

	.rb-hero .rb-btn {
		transition: none;
	}
}

@media (max-width: 767px) {
	/*
	 * No fixed ratio on phones. 2.7:1 at 375px wide is a 139px box, and even
	 * lifted to the min-height it cannot hold the eyebrow, title, lede and two
	 * buttons — combined with overflow:hidden the buttons were being cut off.
	 * Height is driven by the content instead, and the video crops to suit.
	 *
	 * Taller than it needs to be, on purpose. Measured at 412x820 the box came
	 * to 377px against 319px of copy: 58px of video, split into two ~29px
	 * slivers above and below the text, which reads as no video at all. The
	 * extra height is what buys back a band of visible footage.
	 *
	 * Not taller still: the source is 16:9, so in a portrait box object-fit
	 * covers by height and crops the *width*. Every pixel of height narrows the
	 * horizontal field of view, which is the zoomed-in look. 60vh is the point
	 * where the video reads clearly without the crop getting tight.
	 */
	.rb-hero {
		aspect-ratio: auto;
		min-height: clamp(24rem, 64vh, 32rem);
		/*
		 * Copy sits at the bottom rather than centred, so the reclaimed height
		 * pools into one continuous band of video above it instead of being
		 * halved into two thin strips.
		 */
		align-items: flex-end;
	}

	/*
	 * Landscape phones. 60vh of a 400px-tall viewport is 240px, below the 24rem
	 * floor, so the hero would otherwise be taller than the screen it sits on.
	 */
	@media (max-height: 520px) {
		.rb-hero {
			min-height: 17rem;
		}
	}

	/*
	 * A portrait box against a 16:9 source is height-constrained, so there is no
	 * vertical crop left to bias — the full height of the frame is already in
	 * view. Kept centred; the value is inert here but correct if the box ever
	 * becomes wider than 16:9 again.
	 */
	.rb-hero__poster,
	.rb-hero__video,
	.rb-hero__video--intro {
		object-position: center 55%;
	}

	/*
	 * Rebalanced for text over video rather than text over a dark panel: much
	 * lighter across the top third, where the footage now shows, and heavier at
	 * the bottom, where the copy sits and still has to stay legible.
	 */
	.rb-hero__scrim {
		background:
			linear-gradient(to bottom, rgba(12, 8, 4, 0.42) 0%, rgba(12, 8, 4, 0.1) 26%, rgba(12, 8, 4, 0.34) 55%, rgba(12, 8, 4, 0.88) 100%),
			rgba(12, 8, 4, 0.1);
	}

	.rb-hero .rb-hero__inner {
		padding: 1.5rem 1.25rem 1.75rem;
	}

	.rb-hero .rb-hero__content {
		max-width: 100%;
	}

	/* Type trimmed a step: the copy is the thing crowding out the video. */
	.rb-hero .rb-hero__eyebrow {
		margin-block-end: 0.4rem;
		font-size: 0.72rem;
		letter-spacing: 0.1em;
	}

	.rb-hero .rb-hero__title {
		margin-block-end: 0.5rem;
		font-size: clamp(1.55rem, 7vw, 1.95rem);
		line-height: 1.24;
	}

	.rb-hero .rb-hero__lede {
		margin-block-end: 1.1rem;
		font-size: 0.9rem;
		line-height: 1.7;
	}

	.rb-hero .rb-btn {
		min-height: 2.75rem;
		padding: 0.7em 1.35em;
		font-size: 0.88rem;
	}

	.rb-hero .rb-hero__actions .rb-btn {
		flex: 1 1 auto;
		justify-content: center;
	}
}