/* Category / shop banner with H1 (inc/category-banner.php) */
.senax-archive-hero { margin: 24px 0 8px; }
.senax-archive-hero__inner { position: relative; overflow: hidden; border-radius: 8px; }

.senax-archive-hero__media,
.senax-archive-hero__img { display: block; width: 100%; }
.senax-archive-hero__img { aspect-ratio: 4 / 1; height: auto; object-fit: cover; }

.senax-archive-hero__title {
	margin: 0;
	color: #1a1a1a;
	font-size: clamp(26px, 3.2vw, 44px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.01em;
}
.senax-archive-hero__subtitle { margin: 8px 0 0; color: #404040; font-size: 16px; max-width: 60ch; }

/* With image: title over the left side of the banner, on a dark fade for contrast */
.has-image .senax-archive-hero__text {
	position: absolute;
	inset: 0 auto 0 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: min(60%, 640px);
	padding: 24px 40px;
	background: linear-gradient(90deg, rgba(26, 26, 26, .78) 0%, rgba(26, 26, 26, .45) 65%, rgba(26, 26, 26, 0) 100%);
}
.has-image .senax-archive-hero__title { color: #fff; }
.has-image .senax-archive-hero__title::after {
	content: "";
	display: block;
	width: 48px;
	height: 3px;
	margin-top: 14px;
	border-radius: 2px;
	background: #ff0000; /* Senax Red */
}
.has-image .senax-archive-hero__subtitle { color: #e5e5e5; }

/* Without image: simple title bar */
.no-image .senax-archive-hero__inner { padding: 4px 0 16px; border-radius: 0; border-bottom: 1px solid #e5e5e5; }
.no-image .senax-archive-hero__title::after {
	content: "";
	display: block;
	width: 48px;
	height: 3px;
	margin-top: 12px;
	border-radius: 2px;
	background: #ff0000;
}

@media (max-width: 767px) {
	.senax-archive-hero { margin-top: 16px; }
	.senax-archive-hero__img { aspect-ratio: 4 / 3; }
	.has-image .senax-archive-hero__text {
		inset: auto 0 0 0;
		width: 100%;
		padding: 48px 20px 20px;
		background: linear-gradient(0deg, rgba(26, 26, 26, .82) 0%, rgba(26, 26, 26, 0) 100%);
	}
	.senax-archive-hero__subtitle { font-size: 14px; }
}