/*
 * AMP MICI — Internal hero system
 * D5 visual foundation for standard, split, service, image and minimal heroes.
 * All heroes remain native Gutenberg patterns and keep their content editable.
 */

.amp-hero.amp-section {
	position: relative;
	isolation: isolate;
	overflow: clip;
	max-inline-size: none;
	margin-block: 0;
	padding-block: clamp(3.5rem, 6vw, 6.5rem);
	padding-inline: var(--wp--custom--layout--gutter);
}

.amp-hero.amp-section::before,
.amp-hero.amp-section::after {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
	border-radius: 999px;
}

.amp-hero.amp-section::before {
	inline-size: clamp(13rem, 24vw, 24rem);
	block-size: clamp(13rem, 24vw, 24rem);
	inset-inline-end: clamp(-9rem, -8vw, -4rem);
	inset-block-start: clamp(-10rem, -8vw, -5rem);
	background: color-mix(in srgb, var(--wp--preset--color--primary) 8%, transparent);
}

.amp-hero.amp-section::after {
	inline-size: clamp(7rem, 13vw, 13rem);
	block-size: clamp(7rem, 13vw, 13rem);
	inset-inline-start: clamp(-5rem, -4vw, -2rem);
	inset-block-end: clamp(-6rem, -5vw, -3rem);
	background: color-mix(in srgb, var(--wp--preset--color--accent) 9%, transparent);
}

.amp-hero > .amp-container.wp-block-group,
.amp-hero .wp-block-cover__inner-container > .amp-container.wp-block-group {
	position: relative;
	z-index: 1;
}

.amp-hero .amp-hero-copy.wp-block-group {
	max-inline-size: 48rem;
	margin-inline: auto;
}

.amp-hero-copy > :first-child { margin-block-start: 0; }
.amp-hero-copy > :last-child { margin-block-end: 0; }
.amp-hero-copy > * + * { margin-block-start: var(--wp--preset--spacing--40); }

.is-style-amp-hero-title {
	max-inline-size: 18ch;
	margin-inline: auto;
	font-size: clamp(2.35rem, 5.25vw, 4.65rem);
	font-weight: 800;
	line-height: 1.14;
	letter-spacing: -0.025em;
	text-wrap: balance;
	overflow-wrap: anywhere;
	color: var(--wp--preset--color--dark);
}

.amp-hero-copy > p:not(.is-style-amp-eyebrow) {
	max-inline-size: 46rem;
	margin-inline: auto;
	font-size: clamp(1.05rem, 1.6vw, 1.3rem);
	line-height: 1.9;
	color: color-mix(in srgb, var(--wp--preset--color--dark) 78%, white);
	text-wrap: pretty;
}

.is-style-amp-eyebrow,
.amp-hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	inline-size: fit-content;
	margin-block: 0;
	padding: 0.42rem 0.8rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 16%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, var(--wp--preset--color--primary) 7%, white);
	font-size: 0.86rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--wp--preset--color--primary);
}

.is-style-amp-eyebrow::before,
.amp-hero-eyebrow::before {
	content: "";
	flex: 0 0 auto;
	inline-size: 0.45rem;
	block-size: 0.45rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
}

.amp-hero .wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--50);
}

.wp-site-blocks .amp-hero .wp-block-buttons:not(.editor-styles-wrapper *):not(:has(.wp-block-button)) { display: none; }

.amp-hero--center { text-align: center; }
.amp-hero--center .wp-block-buttons { justify-content: center; }
.amp-hero--center .is-style-amp-eyebrow,
.amp-hero--center .amp-hero-eyebrow { margin-inline: auto; }

/* Standard page title hero: calmer than editorial/manual heroes. */
.amp-hero--page.amp-section {
	padding-block: clamp(3rem, 4.8vw, 5rem);
}

.amp-hero--page .amp-hero-copy.wp-block-group {
	max-inline-size: 58rem;
}

.amp-hero--page .is-style-amp-hero-title {
	font-size: clamp(2.15rem, 4vw, 3.75rem);
}

/* Split hero -------------------------------------------------------------- */
.amp-hero--split .amp-container.wp-block-group {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(20rem, 0.95fr);
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: center;
}

.amp-hero--split .amp-container > * {
	min-inline-size: 0;
	margin-block: 0;
}

.amp-hero--split .amp-hero-copy.wp-block-group {
	max-inline-size: 42rem;
	margin-inline: 0;
}

.amp-hero--split .is-style-amp-hero-title,
.amp-hero--split .amp-hero-copy > p:not(.is-style-amp-eyebrow) {
	margin-inline: 0;
}

.amp-hero--split .is-style-amp-hero-title {
	max-inline-size: 14ch;
}

.amp-hero-media.wp-block-group {
	position: relative;
	min-block-size: 18rem;
}

.amp-hero-media.wp-block-group::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 9% -5% -7% 9%;
	border-radius: clamp(1.75rem, 4vw, 3.25rem);
	background: linear-gradient(135deg,
		color-mix(in srgb, var(--wp--preset--color--primary) 11%, white),
		color-mix(in srgb, var(--wp--preset--color--accent) 12%, white));
}

.amp-hero-media figure { margin: 0; }

.is-style-amp-hero-image img,
.amp-hero-media .wp-block-post-featured-image img {
	display: block;
	inline-size: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent);
	border-radius: clamp(1.5rem, 3.5vw, 2.75rem);
	box-shadow: 0 1.6rem 4rem color-mix(in srgb, var(--wp--preset--color--dark) 14%, transparent);
}

/* Service template gets a slightly warmer accent while reusing the same system. */
.amp-hero--service.amp-section::after {
	background: color-mix(in srgb, var(--wp--preset--color--green) 10%, transparent);
}



/* Native empty image blocks stay available in the editor without leaving a
 * blank frontend column. Featured-image based heroes behave the same way. */
.amp-hero-media:not(:has(img[src]:not([src=""]))) { display: none; }
.amp-hero--split .amp-container:not(:has(.amp-hero-media img[src]:not([src=""]))) {
	grid-template-columns: minmax(0, 1fr);
}
.amp-hero--split .amp-container:not(:has(.amp-hero-media img[src]:not([src=""]))) .amp-hero-copy {
	max-inline-size: 52rem;
	margin-inline: auto;
	text-align: center;
}
.amp-hero--split .amp-container:not(:has(.amp-hero-media img[src]:not([src=""]))) .is-style-amp-hero-title,
.amp-hero--split .amp-container:not(:has(.amp-hero-media img[src]:not([src=""]))) .amp-hero-copy > p:not(.is-style-amp-eyebrow) {
	margin-inline: auto;
}
.amp-hero--split .amp-container:not(:has(.amp-hero-media img[src]:not([src=""]))) .wp-block-buttons {
	justify-content: center;
}
.amp-hero--split .amp-container:not(:has(.amp-hero-media img[src]:not([src=""]))) .is-style-amp-eyebrow {
	margin-inline: auto;
}
.editor-styles-wrapper .amp-hero-media:not(:has(img[src]:not([src=""]))) {
	display: block;
	min-block-size: 16rem;
	border: 2px dashed color-mix(in srgb, var(--wp--preset--color--primary) 18%, transparent);
	border-radius: var(--wp--custom--radius--large);
}
.editor-styles-wrapper .amp-hero--split .amp-container:not(:has(.amp-hero-media img[src]:not([src=""]))) {
	grid-template-columns: minmax(0, 1.05fr) minmax(20rem, 0.95fr);
}
.editor-styles-wrapper .amp-hero--split .amp-container:not(:has(.amp-hero-media img[src]:not([src=""]))) .amp-hero-copy {
	max-inline-size: 42rem;
	margin-inline: 0;
	text-align: start;
}

/* Cover/image hero -------------------------------------------------------- */
.amp-hero.is-style-amp-section-image {
	min-block-size: clamp(26rem, 48vw, 40rem);
	display: grid;
	place-items: center;
}

.amp-hero.is-style-amp-section-image::before,
.amp-hero.is-style-amp-section-image::after { display: none; }

.amp-hero.is-style-amp-section-image .amp-hero-copy {
	max-inline-size: 50rem;
}

.amp-hero.is-style-amp-section-image .is-style-amp-hero-title,
.amp-hero.is-style-amp-section-image .amp-hero-copy > p:not(.is-style-amp-eyebrow) {
	color: var(--amp-surface-heading);
	text-shadow: 0 0.15rem 1.2rem color-mix(in srgb, var(--wp--preset--color--black) 18%, transparent);
}

/* Minimal hero ------------------------------------------------------------ */
.amp-page-minimal .amp-hero,
.amp-hero--minimal.amp-section {
	padding-block: clamp(2.25rem, 4vw, 3.75rem);
	background-image: none;
	background-color: var(--wp--preset--color--white);
	text-align: start;
}

.amp-page-minimal .amp-hero::before,
.amp-page-minimal .amp-hero::after,
.amp-hero--minimal.amp-section::before,
.amp-hero--minimal.amp-section::after { display: none; }

.amp-page-minimal .amp-hero .amp-hero-copy.wp-block-group,
.amp-hero--minimal .amp-hero-copy.wp-block-group {
	max-inline-size: 52rem;
	margin-inline: 0;
}

.amp-page-minimal .is-style-amp-hero-title,
.amp-hero--minimal .is-style-amp-hero-title {
	max-inline-size: 18ch;
	margin-inline: 0;
	font-size: clamp(2rem, 3.5vw, 3.15rem);
}

.amp-page-minimal .amp-hero-copy > p:not(.is-style-amp-eyebrow),
.amp-hero--minimal .amp-hero-copy > p:not(.is-style-amp-eyebrow) {
	margin-inline: 0;
}

.amp-site-main > .amp-hero + .wp-block-post-content,
.amp-site-main > .amp-page-header + .wp-block-post-content { margin-block-start: 0; }

@media (max-width: 64rem) {
	.amp-hero--split .amp-container.wp-block-group {
		grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.82fr);
		gap: clamp(2rem, 4vw, 3.5rem);
	}
	.is-style-amp-hero-title { font-size: clamp(2.25rem, 5.4vw, 3.75rem); }
}

@media (max-width: 48rem) {
	.amp-hero.amp-section {
		padding-block: clamp(3rem, 10vw, 4.5rem);
	}
	.amp-hero--split .amp-container.wp-block-group,
	.editor-styles-wrapper .amp-hero--split .amp-container:not(:has(.amp-hero-media img[src]:not([src=""]))) {
		grid-template-columns: minmax(0, 1fr);
	}
	.amp-hero--split .amp-hero-copy.wp-block-group,
	.editor-styles-wrapper .amp-hero--split .amp-container:not(:has(.amp-hero-media img[src]:not([src=""]))) .amp-hero-copy {
		max-inline-size: none;
	}
	.amp-hero--split .amp-hero-media { max-inline-size: 38rem; margin-inline: auto; }
	.amp-hero-media.wp-block-group::before { inset: 7% 3% -5% 9%; }
}

@media (max-width: 36rem) {
	.amp-hero.amp-section { padding-block: 2.75rem; }
	.is-style-amp-hero-title,
	.amp-hero--page .is-style-amp-hero-title { font-size: clamp(2rem, 10vw, 2.85rem); }
	.amp-hero-copy > p:not(.is-style-amp-eyebrow) { font-size: 1rem; line-height: 1.8; }
	.amp-hero .wp-block-buttons { inline-size: 100%; }
	.amp-hero .wp-block-button { inline-size: 100%; }
	.amp-hero .wp-block-button__link { inline-size: 100%; text-align: center; }
}

/* Reference heroes reuse the section, split, media and action primitives. */
.amp-reference-hero .amp-reference-heading h1 {
 margin-block: 0;
 color: var(--wp--preset--color--primary);
 font-size: var(--wp--preset--font-size--display);
 line-height: 1.3;
 text-wrap: balance;
}
.amp-reference-hero .amp-reference-heading > p:not(.amp-reference-kicker):not(.amp-reference-error-code) { color: var(--wp--custom--surface--muted); }
.amp-reference-hero--compact.amp-section { padding-block: var(--wp--preset--spacing--70); }
.amp-reference-hero--compact .amp-reference-heading { margin-block-end: 0; max-inline-size: var(--wp--custom--layout--narrow); }
.amp-reference-hero--compact .amp-reference-heading h1 { font-size: var(--wp--preset--font-size--heading); }
.amp-reference-hero .wp-block-term-description { color: var(--wp--custom--surface--muted); font-size: var(--wp--preset--font-size--large); line-height: 1.8; }
.amp-reference-hero .wp-block-term-description:empty { display: none; }
.wp-site-blocks .amp-reference-hero .amp-reference-split:not(:has(img[src]:not([src=""]))) .amp-reference-copy { max-inline-size: var(--wp--custom--layout--narrow); margin-inline: auto; text-align: center; }
.wp-site-blocks .amp-reference-hero .amp-reference-split:not(:has(img[src]:not([src=""]))) .amp-reference-heading { text-align: center; }
.amp-reference-notfound .amp-reference-heading > .amp-reference-error-code {
 margin: 0;
 color: color-mix(in srgb, var(--wp--preset--color--primary) 20%, var(--wp--preset--color--white));
 font-size: clamp(5rem, 12vw, 9rem);
 font-weight: 700;
 line-height: 1;
 direction: ltr;
}
.amp-reference-notfound .amp-reference-actions { max-inline-size: 26rem; margin-inline: auto; }

/* Image-only banners preserve the complete artwork at every viewport size. */
.amp-hero-image-banner.wp-block-group {
	min-inline-size: 0;
	max-inline-size: none;
	margin-block: 0;
	padding: 0;
}
.amp-hero-image-banner__media.wp-block-image {
	inline-size: 100%;
	max-inline-size: none;
	margin: 0;
}
.amp-hero-image-banner__media img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: auto;
	object-fit: contain;
	border-radius: 0;
	box-shadow: none;
}
.wp-site-blocks .amp-hero-image-banner:not(.editor-styles-wrapper *):not(:has(.amp-hero-image-banner__media img[src]:not([src=""]))) {
	display: none;
}