/**
 * Artist Category Template ( SDN-968 )
 * Front-end styles for hero, content block, on-page heading and video regions,
 * plus the artist-page layout ( no filter sidebar, full-width grid ).
 *
 * Loaded only on product-category archives ( see inc/enqueue.php ).
 *
 * Units: layout dimensions use em so they scale with font-size ( 1em = 16px at
 * the default root size ). Decorative sub-pixel values ( text-shadow,
 * underline-offset ) and the mobile breakpoint stay in px on purpose.
 */

:root {
	/* Consistent horizontal gutter for artist-page content. */
	--sd-ac-gutter: 1.25em; /* 20px */
}

/* One gutter for all artist-page content ( grid, sort, sections ) instead of
   per-section side padding. Scoped to artist pages so standard category pages
   are unchanged. The hero escapes this gutter below. */
body.sd-artist-category .woocommerce {
	padding-left: var( --sd-ac-gutter );
	padding-right: var( --sd-ac-gutter );
}

/* --- Hero banner ------------------------------------------------------- */
.sd-ac-hero {
	position: relative; /* for the ::after gradient */
	width: 100vw;
	/* Negative margin escapes the .woocommerce gutter ( and any centring ) so
	   the hero stretches the full viewport width. */
	margin-left: calc( 50% - 50vw );
	margin-right: calc( 50% - 50vw );
	min-height: 28.75em;
	display: flex;
	align-items: center;
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-color: #111;
	color: #fff;
}
.sd-ac-hero.has-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( to right, rgba( 0, 0, 0, 0.6 ) 0%, rgba( 0, 0, 0, 0.2 ) 55%, rgba( 0, 0, 0, 0 ) 100% );
	pointer-events: none;
}
.sd-ac-hero-inner {
	position: relative;
	z-index: 1;
	max-width: 80em;
	width: 100%;
	margin: 0 auto;
	padding: 2.5em var( --sd-ac-gutter );
}
/* Colours forced ( theme has many `#444 !important` rules on p/headings ) so
   the hero text stays high-contrast white on the dark banner ( ADA ). */
.sd-ac-hero .sd-ac-hero-heading {
	margin: 0;
	color: #fff !important;
	/* Match the product page header ( .pickup-heading, innerStyle.css ). */
	font-family: 'BebasNeuePro-Regular', 'Lato', sans-serif;
	font-size: clamp( 3rem, 7.5vw, 6.5rem );
	font-weight: 400;
	font-stretch: extra-condensed;
	line-height: 0.9;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	text-shadow: 0 2px 14px rgba( 0, 0, 0, 0.45 );
}
.sd-ac-hero .sd-ac-hero-subheading[class*="sd-ac-hero-subheading"] {
	margin: 0.5em 0 0;
	color: #fff !important;
	font-size: clamp( 1rem, 1.8vw, 1.6rem ) !important;
	font-weight: 400 !important;
	letter-spacing: 0.01em !important;
	text-shadow: 0 1px 10px rgba( 0, 0, 0, 0.6 );
}
.sd-ac-hero .sd-ac-breadcrumb {
	margin: 0 0 1.125em;
	font-size: 0.85rem;
	letter-spacing: 0.02em;
	color: #fff !important;
	text-shadow: 0 1px 8px rgba( 0, 0, 0, 0.65 );
}
.sd-ac-hero .sd-ac-breadcrumb a {
	color: #fff !important;
	text-decoration: none;
	transition: opacity 0.15s ease;
}
.sd-ac-hero .sd-ac-breadcrumb a:hover,
.sd-ac-hero .sd-ac-breadcrumb a:focus {
	text-decoration: underline;
	text-underline-offset: 3px;
	opacity: 0.85;
}

/* --- Content block ----------------------------------------------------- */
.sd-ac-content {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 3.125em;
	max-width: 67.5em;
	margin: 3.75em auto;
}
.sd-ac-content.is-flipped {
	flex-direction: row-reverse;
}
.sd-ac-content-media {
	flex: 0 1 42%;
	min-width: 0;
}
.sd-ac-content-text {
	flex: 1 1 48%;
	min-width: 0;
	line-height: 1.7;
}
.sd-ac-content-img {
	display: block;
	width: 100%;
	height: auto;
}
/* Full-width content ( no image ) — e.g. a [content_block] shortcode. */
.sd-ac-content--full {
	display: block;
}
.sd-ac-content--full .sd-ac-content-text {
	flex: none;
	width: 100%;
}

/* --- On-page heading --------------------------------------------------- */
.sd-ac-onpage {
	text-align: center;
	max-width: 56.25em;
	margin: 3.125em auto 1.875em;
}
.sd-ac-onpage-heading {
	margin: 0;
	/* Match the product page header font. */
	font-family: 'BebasNeuePro-Regular', 'Lato', sans-serif;
	font-weight: 400;
	font-stretch: extra-condensed;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: clamp( 2rem, 3.5vw, 3rem );
}
.sd-ac-onpage-subheading {
	margin: 0.5em 0 0;
	font-size: 1.15rem;
	text-align: center !important;
}

/* Artist pages: mockup shows only the Sort control, no "Showing N results". */
body.sd-artist-category .woocommerce-result-count {
	display: none;
}

/* --- Video embeds ------------------------------------------------------ */
.sd-ac-videos {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 26.25em, 1fr ) );
	gap: 2.5em;
	max-width: 67.5em;
	margin: 3.75em auto;
}
.sd-ac-video {
	position: relative;
	aspect-ratio: 16 / 9;
}
.sd-ac-video iframe,
.sd-ac-video embed,
.sd-ac-video object,
.sd-ac-video video {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
}

/* --- Artist page: no filter sidebar, full-width grid ------------------- */
body.sd-artist-category .category-filters-wrapper,
body.sd-artist-category .sidebar-cat,
body.sd-artist-category .category-filters,
body.sd-artist-category .woof_container,
body.sd-artist-category .filter-row-list {
	display: none !important;
}
/* Drop the theme's empty "banner-for-single" bar above the hero on artist pages
   ( it renders an empty [content_block id=1288] fallback → black bar ). */
body.sd-artist-category .banner-for-single {
	display: none !important;
}
body.sd-artist-category ul.products {
	width: 100%;
	margin-left: 0;
}

/* --- Mobile ------------------------------------------------------------ */
@media ( max-width: 767px ) {
	.sd-ac-onpage {
		display: block;
	}
	.sd-ac-hero {
		min-height: 17.5em;
	}
	.sd-ac-hero-inner {
		padding: 1.75em var( --sd-ac-gutter );
	}
	/* Stack image over text ( DOM order: media then text ), flip included. */
	.sd-ac-content,
	.sd-ac-content.is-flipped {
		flex-direction: column;
		gap: 1.75em;
		margin: 2.5em auto;
	}
	.sd-ac-content-media,
	.sd-ac-content-text {
		flex-basis: auto;
		width: 100%;
	}
	.sd-ac-videos {
		grid-template-columns: 1fr;
		gap: 1.75em;
		margin: 2.5em auto;
	}
}