/**
 * Annalee Term Header — frontend styles.
 *
 * Renders the category archive header with an optional background image that
 * fades into a solid accent color. The accent color is passed via the
 * --term-header-color custom property set as an inline style on the wrapper.
 */

/* ── Container ───────────────────────────────────────────────────────────────*/

.annalee-term-header {
	--term-header-color: #333;
	--term-header-text-color: #fff;
	background-color: var(--term-header-color);
	border-radius: 0 0 var(--border-radius-image, 10px) var(--border-radius-image, 10px);
	margin: var(--space-large, 1.5rem) auto;
	overflow: hidden;
	position: relative;
	max-width: var(--max-width-wide, 1200px);
}

.annalee-term-header .entry-title {
	padding-left: 2.5vw;
	font-family: display, sans-serif;
	font-size: 2.0625rem;
	font-style: normal;
	font-weight: 500;
	line-height: 1.21; /* 121.212% */
}

/* ── Background image layers ─────────────────────────────────────────────────*/

.term-header-bg {
	inset: 0;
	position: absolute;
}

.term-header-bg-image {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	inset: 0;
	position: absolute;
}

/* Hidden <img> inside the image div (SEO / screen-reader accessible). */
.term-header-bg-image img {
	opacity: 0;
	position: absolute;
	z-index: -1;
}

/* Keep a consistent horizontal fade at all breakpoints:
   solid color (left) to transparent (right). */
.term-header-bg-image::before {
	--term-header-solid-stop: 50%;
	background: linear-gradient(
		90deg,
		var(--term-header-color) 0%,
		var(--term-header-color) var(--term-header-solid-stop),
		transparent 100%
	);
	bottom: 0;
	content: "";
	display: block;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;
}

/* On very small viewports, extend the solid portion for title readability. */
@media (max-width: 30em) {

	.term-header-bg-image::before {
		--term-header-solid-stop: 60%;
	}
}

/* ── Inner content ───────────────────────────────────────────────────────────*/

.term-header-inner {
	padding: 2.5rem var(--gutter-width, 5vw) 2rem;
	position: relative;
	z-index: 2;
}

/* Add global gutter only once the max-width container would otherwise touch edges. */
@media (max-width: 75em) {

	.annalee-term-header {
		margin-left: var(--gutter-width, 5vw);
		margin-right: var(--gutter-width, 5vw);
	}
}

.annalee-term-header.has-image {
	display: flex;
	align-items: flex-end;
}

.term-header-title {
	color: var(--term-header-text-color, #fff);
	margin: 0;
}

/* ── Desktop layout (≥ 45 em) ─────────────────────────────────────────────── */

@media (min-width: 45em) {

	.annalee-term-header.has-image {
		align-items: center;
	}

	.annalee-term-header.has-image .term-header-inner {
		min-height: inherit;
	}

	/* On desktop the image is pinned to the right side of the container. */
	.term-header-bg-image {
		bottom: 0;
		left: auto;
		min-width: 70%;
		position: absolute;
		right: 0;
		top: 0;
	}

	.term-header-inner {
		padding: 3rem var(--gutter-width, 5vw);
	}
}