/* Original, local SVG scenes. The matching page class selects just one artwork. */
body.amk-hero-art-branding { --amk-hero-artwork: url("../images/hero/branding.svg"); }
body.amk-hero-art-campaigns { --amk-hero-artwork: url("../images/hero/campaigns.svg"); }
body.amk-hero-art-social { --amk-hero-artwork: url("../images/hero/social.svg"); }
body.amk-hero-art-websites { --amk-hero-artwork: url("../images/hero/websites.svg"); }
body.amk-hero-art-print { --amk-hero-artwork: url("../images/hero/print.svg"); }
body.amk-hero-art-signage { --amk-hero-artwork: url("../images/hero/signage.svg"); }
body.amk-hero-art-merchandise { --amk-hero-artwork: url("../images/hero/merchandise.svg"); }
body.amk-hero-art-apps { --amk-hero-artwork: url("../images/hero/apps.svg"); }
body.amk-hero-art-region { --amk-hero-artwork: url("../images/hero/region.svg"); }
body.amk-hero-art-portfolio { --amk-hero-artwork: url("../images/hero/portfolio.svg"); }
body.amk-hero-art-editorial { --amk-hero-artwork: url("../images/hero/editorial.svg"); }
body.amk-hero-art-contact { --amk-hero-artwork: url("../images/hero/contact.svg"); }
body.amk-hero-art-documents { --amk-hero-artwork: url("../images/hero/documents.svg"); }

/* Only plain AMK bands: an explicitly chosen photo/cover keeps its own background. */
body.amk-illustrated-hero .amk-main .amk-band:not(.wp-block-cover):not(.has-background-image):not([style*="background-image"]) {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	box-sizing: border-box;
	min-height: clamp(250px, 25vw, 340px);
	--wp--style--global--content-size: var(--wp--style--global--wide-size, 1200px);
}

body.amk-illustrated-hero .amk-main .amk-band:not(.wp-block-cover):not(.has-background-image):not([style*="background-image"])::before,
body.amk-illustrated-hero .amk-main .amk-band:not(.wp-block-cover):not(.has-background-image):not([style*="background-image"])::after {
	content: "";
	position: absolute;
	inset: 0;
	width: auto;
	height: auto;
	max-width: none;
	margin: 0;
	pointer-events: none;
	z-index: -1;
}

body.amk-illustrated-hero .amk-main .amk-band:not(.wp-block-cover):not(.has-background-image):not([style*="background-image"])::before {
	background:
		radial-gradient(ellipse at 88% 30%, rgba(123, 61, 255, .2), transparent 54%),
		radial-gradient(ellipse at 94% 92%, rgba(255, 46, 126, .13), transparent 46%),
		linear-gradient(112deg, rgba(9, 9, 13, .96) 16%, rgba(19, 14, 27, .78) 60%, rgba(29, 17, 35, .72));
}

body.amk-illustrated-hero .amk-main .amk-band:not(.wp-block-cover):not(.has-background-image):not([style*="background-image"])::after {
	left: auto;
	width: min(1120px, 95%);
	background-image: var(--amk-hero-artwork);
	background-repeat: no-repeat;
	background-size: auto 116%;
	background-position: right center;
	opacity: .78;
	-webkit-mask-image: linear-gradient(90deg, transparent 4%, rgba(0, 0, 0, .2) 32%, #000 82%);
	mask-image: linear-gradient(90deg, transparent 4%, rgba(0, 0, 0, .2) 32%, #000 82%);
}

/* Illustration layers never narrow the existing text or button container. */
body.amk-illustrated-hero .amk-main .amk-band > * {
	position: relative;
}

body.amk-illustrated-hero .amk-main .amk-band :is(h1, .wp-block-post-title, .wp-block-query-title) {
	max-width: var(--wp--style--global--wide-size, 1200px);
	font-size: clamp(32px, 24px + 2vw, 48px);
	line-height: 1.16;
	letter-spacing: -.025em;
	text-wrap: pretty;
}

body.amk-illustrated-hero .amk-main .amk-band :is(h1, .amk-lead, .amk-sec-lead, .wp-block-post-excerpt) {
	text-shadow: 0 2px 20px rgba(8, 7, 13, .7);
}

body.amk-illustrated-hero .amk-main .amk-band :is(.amk-lead, .amk-sec-lead) {
	max-width: none;
	width: 100%;
}

@media (max-width: 900px) {
	body.amk-illustrated-hero .amk-main .amk-band:not(.wp-block-cover):not(.has-background-image):not([style*="background-image"])::after {
		right: -70px;
		width: 105%;
		background-size: auto 104%;
		opacity: .55;
	}
}

@media (max-width: 600px) {
	body.amk-illustrated-hero .amk-main .amk-band:not(.wp-block-cover):not(.has-background-image):not([style*="background-image"]) {
		min-height: 240px;
	}
	body.amk-illustrated-hero .amk-main .amk-band:not(.wp-block-cover):not(.has-background-image):not([style*="background-image"])::after {
		right: -130px;
		width: calc(100% + 180px);
		background-size: auto 100%;
		opacity: .38;
		-webkit-mask-image: linear-gradient(90deg, transparent 5%, rgba(0, 0, 0, .4) 42%, #000 88%);
		mask-image: linear-gradient(90deg, transparent 5%, rgba(0, 0, 0, .4) 42%, #000 88%);
	}
}

@media print {
	body.amk-illustrated-hero .amk-main .amk-band::before,
	body.amk-illustrated-hero .amk-main .amk-band::after {
		display: none;
	}
}