/* ==========================================================================
   Department archive hero — full-width banner (inc/brina-department-hero.php)
   Loaded only on the 7 homepage "Shop by Department" product-category
   archives. The hero lives inside the fallback archive's 1100px container;
   it breaks out to the full viewport width without changing that container
   (products below keep their layout).
   ========================================================================== */

/* Full-bleed break-out: 100vw can exceed the visible width by the scrollbar,
   so horizontal overflow is clipped on these 7 pages only (clip, unlike
   hidden, creates no scroll container — sticky headers keep working). */
body.tax-product_cat:has(.brina-dept-hero) {
	overflow-x: clip;
}

/* The title wrapper now only holds the hero: flush under the navigation,
   space before the products. */
.tax-product_cat .bricks-archive-title-wrapper:has(> .brina-dept-hero) {
	margin-top: 0;
	margin-bottom: clamp(24px, 2.6vw, 36px);
	padding: 0;
	text-align: left;
}

.brina-dept-hero {
	--dh-content: 1100px;                           /* the archive container */
	--dh-ink-shade: 7, 26, 43;                      /* Brina navy #071a2b */
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	width: 100vw;
	max-width: none;
	min-height: clamp(280px, 25vw, 400px);
	margin: 0 calc(50% - 50vw);
	overflow: hidden;
	background-color: rgb(var(--dh-ink-shade));
	font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; /* Brina UI font */
	text-align: left;
}

/* The department photograph fills the banner (never stretched). */
.brina-dept-hero__img {
	position: absolute;
	inset: 0;
	z-index: -2;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var(--dh-pos, center);
}

/* Readability: a restrained navy gradient from the text side only. */
.brina-dept-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg,
		rgba(var(--dh-ink-shade), 0.88) 0%,
		rgba(var(--dh-ink-shade), 0.74) 30%,
		rgba(var(--dh-ink-shade), 0.32) 56%,
		rgba(var(--dh-ink-shade), 0) 78%);
	pointer-events: none;
}

/* Text aligned to the product content edge below. */
.brina-dept-hero__inner {
	box-sizing: border-box;
	width: 100%;
	padding: clamp(32px, 3.4vw, 52px) max(24px, calc((100% - var(--dh-content)) / 2 + 15px));
}

.brina-dept-hero__text {
	max-width: min(560px, 52%);
}

.brina-dept-hero__eyebrow {
	margin: 0 0 12px;
	color: #c9a45c;                                 /* Brina gold accent */
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.brina-dept-hero__title {
	margin: 0;
	color: #ffffff;
	font-size: clamp(34px, 2.6vw + 12px, 54px);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -0.02em;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
	text-wrap: balance;
	text-shadow: 0 1px 18px rgba(var(--dh-ink-shade), 0.35);
}

.brina-dept-hero__desc {
	max-width: 46ch;
	margin: 14px 0 0;
	color: rgba(241, 244, 250, 0.92);
	font-size: 16px;
	line-height: 1.6;
	text-shadow: 0 1px 12px rgba(var(--dh-ink-shade), 0.35);
}

/* Tablet portrait: wider text share, slightly stronger shade. */
@media (max-width: 1023.98px) {
	.brina-dept-hero::before {
		background: linear-gradient(90deg,
			rgba(var(--dh-ink-shade), 0.9) 0%,
			rgba(var(--dh-ink-shade), 0.82) 44%,
			rgba(var(--dh-ink-shade), 0.5) 66%,
			rgba(var(--dh-ink-shade), 0.12) 88%);
	}

	.brina-dept-hero__text {
		max-width: min(380px, 50%);
	}

	.brina-dept-hero__title {
		font-size: clamp(30px, 2.4vw + 12px, 36px);
	}

	.brina-dept-hero__desc {
		font-size: 15px;
	}
}

/* Phone: the photo's subject shows in the upper part; text sits at the
   bottom over a vertical shade. Taller, near-square banner suits the
   square/portrait department photos. */
@media (max-width: 767.98px) {
	.brina-dept-hero {
		align-items: flex-end;
		min-height: clamp(340px, 96vw, 440px);
	}

	.brina-dept-hero__img {
		object-position: var(--dh-pos-m, var(--dh-pos, center));
	}

	.brina-dept-hero::before {
		background: linear-gradient(0deg,
			rgba(var(--dh-ink-shade), 0.92) 0%,
			rgba(var(--dh-ink-shade), 0.78) 30%,
			rgba(var(--dh-ink-shade), 0.3) 56%,
			rgba(var(--dh-ink-shade), 0) 74%);
	}

	.brina-dept-hero__inner {
		padding: 24px 20px 26px;
	}

	.brina-dept-hero__text {
		max-width: none;
	}

	.brina-dept-hero__eyebrow {
		margin-bottom: 8px;
		font-size: 11px;
	}

	.brina-dept-hero__title {
		font-size: clamp(28px, 4vw + 13px, 34px);
	}

	.brina-dept-hero__desc {
		margin-top: 10px;
		font-size: 14px;
		line-height: 1.55;
	}
}