/**
 * Storefront category / Master Shop hero banner — contained (CDS-style).
 *
 * Matches the reference layout: centered ~1080px container, padding that
 * creates clear space under the site header, image inside (not full-bleed).
 */

.winchesters-category-hero {
	--winchesters-hero-ratio: 21 / 6;
	--winchesters-hero-min-h: 180px;
	--winchesters-hero-max-h: 420px;
	--winchesters-hero-object-position: left center;
	--winchesters-hero-max-w: 1080px;
	--winchesters-hero-pad-x: 1rem;
	--winchesters-hero-pad-y: 3rem;

	position: relative;
	width: 100%;
	max-width: calc(var(--winchesters-hero-max-w) + (var(--winchesters-hero-pad-x) * 2));
	margin: 0 auto 1.5rem;
	padding: var(--winchesters-hero-pad-y) var(--winchesters-hero-pad-x) 0;
	box-sizing: border-box;
	background: transparent;
}

.winchesters-category-hero-media {
	position: relative;
	width: 100%;
	min-height: var(--winchesters-hero-min-h);
	max-height: var(--winchesters-hero-max-h);
	aspect-ratio: var(--winchesters-hero-ratio);
	overflow: hidden;
	background: #ece4e0;
}

.winchesters-category-hero-image {
	display: block;
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: none !important;
	margin: 0;
	padding: 0;
	border: 0;
	object-fit: cover;
	object-position: var(--winchesters-hero-object-position);
	/* Override WP attachment width/height attributes. */
	aspect-ratio: auto;
}

.winchesters-category-hero-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	padding: clamp(0.85rem, 3vw, 1.5rem);
	/* No gradient shade — the hero sits clean on the page background. */
	background: none;
	pointer-events: none;
	box-sizing: border-box;
}

.winchesters-category-hero-title {
	margin: 0;
	max-width: 100%;
	font-family: inherit;
	font-size: clamp(1.25rem, 4.5vw, 2.25rem);
	font-weight: 600;
	line-height: 1.2;
	color: #fff;
	/* Stronger shadow keeps the title readable now that the gradient is gone. */
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 2px 8px rgba(0, 0, 0, 0.6);
	overflow-wrap: anywhere;
	word-break: break-word;
}

/*
 * Page canvas: soft taupe behind hero / copy / filters.
 * Product grids keep their own white panel (see storefront-grid.css).
 */
body.winchesters-storefront-page {
	--winchesters-page-bg: #ece4e0;
	background-color: var(--winchesters-page-bg) !important;
}

body.winchesters-storefront-page .site,
body.winchesters-storefront-page .site-content,
body.winchesters-storefront-page .site-main,
body.winchesters-storefront-page #page,
body.winchesters-storefront-page #content,
body.winchesters-storefront-page #primary,
body.winchesters-storefront-page #main,
body.winchesters-storefront-page .content-area,
body.winchesters-storefront-page .entry-content,
body.winchesters-storefront-page article.page,
body.winchesters-storefront-page article.type-page,
body.winchesters-storefront-page .hentry,
body.winchesters-storefront-page .ast-container,
body.winchesters-storefront-page .ast-article-single {
	background-color: transparent !important;
	background-image: none !important;
}

/* Ensure Winchesters product grids stay on a white panel. */
body.winchesters-storefront-page .winchesters-grid-wrap,
body.winchesters-storefront-page .winchesters-product-grid {
	background-color: #fff !important;
}

/*
 * Hide the theme page title on Winchesters storefront pages.
 * Hero (and grid) already identify the category — duplicate H1 is noise.
 */
body.winchesters-storefront-page .entry-title,
body.winchesters-storefront-page .page-title,
body.winchesters-storefront-page .wp-block-post-title,
body.winchesters-storefront-page header.entry-header,
body.winchesters-storefront-page .page-header .entry-title,
body.winchesters-storefront-page .page-header h1,
body.winchesters-storefront-page .ast-page-title-wrap,
body.winchesters-storefront-page .ast-archive-title,
body.winchesters-storefront-page .elementor-widget-theme-post-title,
body.winchesters-storefront-page .elementor-page-title,
body.winchesters-storefront-page article.page > h1,
body.winchesters-storefront-page article.type-page > h1,
body.winchesters-storefront-page .hentry > h1,
body.winchesters-storefront-page .entry-content > h1:first-child,
body.winchesters-storefront-page .site-main > h1,
body.winchesters-storefront-page #content > h1,
body.winchesters-storefront-page #primary > h1,
body.winchesters-storefront-page .content-area > h1 {
	display: none !important;
}

/* Tablet — match reference: tighter padding, stay wide. */
@media (max-width: 1024px) {
	.winchesters-category-hero {
		--winchesters-hero-ratio: 21 / 7;
		--winchesters-hero-max-h: 360px;
		--winchesters-hero-pad-y: 1rem;
	}
}

/* Mobile — wide banner ratio + full artwork (no left-edge logo crop). */
@media (max-width: 782px) {
	.winchesters-category-hero {
		--winchesters-hero-ratio: 2.4 / 1;
		--winchesters-hero-min-h: 110px;
		--winchesters-hero-max-h: 200px;
		--winchesters-hero-pad-y: 1rem;
		--winchesters-hero-pad-x: 1rem;
		margin-bottom: 1rem;
	}

	.winchesters-category-hero-image {
		object-fit: contain;
		object-position: left center;
		background: #ece4e0;
	}

	.winchesters-category-hero-media {
		background: #ece4e0;
	}

	.winchesters-category-hero-overlay {
		display: none;
	}
}

/* Small phones */
@media (max-width: 480px) {
	.winchesters-category-hero {
		--winchesters-hero-ratio: 2.15 / 1;
		--winchesters-hero-min-h: 100px;
		--winchesters-hero-max-h: 180px;
		--winchesters-hero-pad-x: 0.75rem;
	}
}

/* Prefer reduced height when the device is short (landscape phones). */
@media (max-height: 500px) and (orientation: landscape) {
	.winchesters-category-hero {
		--winchesters-hero-min-h: 100px;
		--winchesters-hero-max-h: 160px;
		--winchesters-hero-ratio: 21 / 5;
		--winchesters-hero-pad-y: 0.75rem;
	}
}