/**
 * Mesh static heroes — /about/, /contact/, /colophon/, /privacy/, 404
 * Band height from hero-band.css (520px desktop).
 * /essays/ uses video hero — essays-hub.css.
 */

body.studio-page-about :where(.wp-site-blocks) > *:not(header),
body.studio-page-contact :where(.wp-site-blocks) > *:not(header),
body.studio-page-colophon :where(.wp-site-blocks) > *:not(header),
body.studio-page-approach :where(.wp-site-blocks) > *:not(header),
body.studio-page-404 :where(.wp-site-blocks) > *:not(header) {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

body.studio-page-about main.wp-block-group,
body.studio-page-contact main.studio-page-contact,
body.studio-page-colophon main.studio-colophon,
body.studio-page-approach main.studio-page-approach,
body.studio-page-404 main.studio-404 {
	padding-top: 0 !important;
	margin-block-start: 0 !important;
}

body.studio-page-about main.wp-block-group > .studio-hero.alignfull:first-child,
body.studio-page-contact main.studio-page-contact > .studio-hero.alignfull:first-child,
body.studio-page-colophon main.studio-colophon > .studio-hero.alignfull:first-child,
body.studio-page-approach main.studio-page-approach > .studio-hero.alignfull:first-child,
body.studio-page-404 main.studio-404 > .studio-hero.alignfull:first-child {
	margin-block-start: 0 !important;
}

/* Rail heroes — colophon, privacy, approach, 404 */
body.studio-page-colophon main.studio-colophon > .studio-hero.alignfull,
body.studio-page-approach main.studio-page-approach > .studio-hero.alignfull,
body.studio-page-404 main.studio-404 > .studio-hero.alignfull {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	box-sizing: border-box;
}

/* Split heroes — about, contact (shared photo column contract) */
body.studio-page-about {
	--mesh-hero-photo-position: 28% top;
}

body.studio-page-contact {
	/* Same horizontal anchor as /about/ — vertical tuned for landscape office still */
	--mesh-hero-photo-position: 28% 42%;
}

@media (min-width: 783px) {
	body.studio-page-about .studio-hero > .wp-block-columns,
	body.studio-page-contact .studio-hero > .wp-block-columns {
		min-height: inherit;
		align-items: stretch;
		height: 100%;
	}

	body.studio-page-about .studio-hero > .wp-block-columns > .wp-block-column:first-child,
	body.studio-page-contact .studio-hero > .wp-block-columns > .wp-block-column:first-child {
		display: flex;
		flex-direction: column;
		justify-content: center;
		flex-basis: 50% !important;
		max-width: 50%;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		padding-right: var(--wp--preset--spacing--40, 1.5rem) !important;
	}

	body.studio-page-about .studio-hero > .wp-block-columns > .wp-block-column.about-hero-photo,
	body.studio-page-contact .studio-hero > .wp-block-columns > .wp-block-column.about-hero-photo {
		position: relative;
		display: block;
		flex-basis: 50% !important;
		max-width: 50%;
		min-height: 100%;
		padding: 0 !important;
		overflow: hidden;
	}

	body.studio-page-about .studio-hero .about-hero-photo figure,
	body.studio-page-contact .studio-hero .about-hero-photo figure {
		position: absolute;
		inset: 0;
		margin: 0;
		width: 100%;
		height: 100%;
	}

	body.studio-page-about .studio-hero .about-hero-photo .wp-block-image,
	body.studio-page-about .studio-hero .about-hero-photo img,
	body.studio-page-contact .studio-hero .about-hero-photo .wp-block-image,
	body.studio-page-contact .studio-hero .about-hero-photo img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: var(--mesh-hero-photo-position);
		display: block;
	}
}

/* Split mesh — /about/, /contact/ mobile: same band as video heroes; photo fills lower band */
@media (max-width: 782px) {
	body.studio-page-about main.wp-block-group > .studio-hero.alignfull,
	body.studio-page-contact main.studio-page-contact > .studio-hero.alignfull {
		display: flex;
		flex-direction: column;
		min-height: min(52vh, 520px) !important;
		min-height: min(52svh, 520px) !important;
		height: auto !important;
		overflow: hidden !important;
	}

	body.studio-page-about .studio-hero > .wp-block-columns,
	body.studio-page-contact .studio-hero > .wp-block-columns {
		display: flex !important;
		flex: 1 1 auto;
		flex-direction: column !important;
		gap: 0 !important;
		min-height: 0;
		width: 100%;
	}

	body.studio-page-about .studio-hero > .wp-block-columns > .wp-block-column,
	body.studio-page-contact .studio-hero > .wp-block-columns > .wp-block-column {
		flex-basis: auto !important;
		max-width: 100% !important;
		width: 100% !important;
	}

	body.studio-page-about .studio-hero > .wp-block-columns > .wp-block-column:first-child,
	body.studio-page-contact .studio-hero > .wp-block-columns > .wp-block-column:first-child {
		display: flex;
		flex: 0 0 auto;
		flex-direction: column;
		justify-content: flex-start;
		padding-top: clamp(0.85rem, 2.5svh, 1.35rem) !important;
		padding-bottom: var(--wp--preset--spacing--30, 1rem) !important;
		padding-right: max(
			var(--wp--style--root--padding-right, 1.5rem),
			calc((100vw - var(--wp--style--global--wide-size, 1200px)) / 2)
		) !important;
	}

	body.studio-page-about .studio-hero .about-hero-photo,
	body.studio-page-contact .studio-hero .about-hero-photo {
		flex: 1 1 auto;
		margin-top: auto;
		width: 100%;
		min-height: clamp(9rem, 32svh, 16rem);
		display: flex;
		overflow: hidden;
	}

	body.studio-page-about .studio-hero .about-hero-photo figure,
	body.studio-page-contact .studio-hero .about-hero-photo figure {
		flex: 1 1 auto;
		width: 100%;
		height: 100%;
		margin: 0;
		min-height: 0;
	}

	body.studio-page-about .studio-hero .about-hero-photo img,
	body.studio-page-contact .studio-hero .about-hero-photo img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	body.studio-page-about .studio-hero .about-hero-photo img,
	body.studio-page-contact .studio-hero .about-hero-photo img {
		object-position: var(--mesh-hero-photo-position);
	}
}