/**
 * Native media block finishing for Hera.
 */

:where(body.actorshop, .editor-styles-wrapper) :where(.wp-block-image.is-style-hera-framed, .wp-block-gallery.is-style-hera-grid, .wp-block-media-text.is-style-hera-editorial) {
	--actorshop-media-line: var(--actorshop-line, #d6d6d6);
	--actorshop-media-text: var(--actorshop-text, #111111);
}

:where(body.actorshop, .editor-styles-wrapper) :where(.wp-block-image.is-style-hera-framed img) {
	display: block;
	width: 100%;
	border: 1px solid var(--actorshop-media-line);
	border-radius: 0;
}

:where(body.actorshop, .editor-styles-wrapper) :where(.wp-block-image.is-style-hera-framed figcaption) {
	margin: 10px 0 0;
	color: var(--actorshop-muted, #626262);
	font-family: var(--actorshop-font-ui, inherit);
	font-size: var(--actorshop-p3-size, 13px);
}

:where(body.actorshop, .editor-styles-wrapper) :where(.wp-block-gallery.is-style-hera-grid) {
	display: grid;
	gap: clamp(10px, 1.6vw, 16px);
}

:where(body.actorshop, .editor-styles-wrapper) :where(.wp-block-gallery.is-style-hera-grid .wp-block-image) {
	overflow: hidden;
	border: 1px solid var(--actorshop-media-line);
	background: #ffffff;
}

:where(body.actorshop, .editor-styles-wrapper) :where(.wp-block-gallery.is-style-hera-grid img) {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform 220ms ease;
}

:where(body.actorshop, .editor-styles-wrapper) :where(.wp-block-gallery.is-style-hera-grid .wp-block-image:hover img) {
	transform: scale(1.02);
}

:where(body.actorshop, .editor-styles-wrapper) :where(.wp-block-cover.is-style-hera-hero, .wp-block-cover.is-style-hera-editorial) {
	position: relative;
	display: grid;
	align-content: end;
	min-height: clamp(360px, 52vw, 680px);
	padding: clamp(28px, 6vw, 72px);
	border-radius: 0;
	overflow: hidden;
	isolation: isolate;
}

:where(body.actorshop, .editor-styles-wrapper) :where(.wp-block-cover.is-style-hera-hero)::after,
:where(body.actorshop, .editor-styles-wrapper) :where(.wp-block-cover.is-style-hera-editorial)::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.72));
	pointer-events: none;
}

:where(body.actorshop, .editor-styles-wrapper) :where(.wp-block-cover.is-style-hera-hero .wp-block-cover__inner-container, .wp-block-cover.is-style-hera-editorial .wp-block-cover__inner-container) {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 16px;
	max-width: 760px;
	color: #ffffff;
}

:where(body.actorshop, .editor-styles-wrapper) :where(.wp-block-cover.is-style-hera-hero .wp-block-heading, .wp-block-cover.is-style-hera-editorial .wp-block-heading) {
	max-width: 12ch;
	margin: 0;
	color: inherit;
	font-family: var(--actorshop-font-display, Inter, ui-sans-serif, system-ui, sans-serif);
	font-size: clamp(42px, 8vw, 96px);
	font-weight: var(--actorshop-weight-display, 900);
	line-height: 0.92;
	text-transform: uppercase;
}

:where(body.actorshop, .editor-styles-wrapper) :where(.wp-block-cover.is-style-hera-hero p, .wp-block-cover.is-style-hera-editorial p) {
	max-width: 620px;
	color: rgba(255, 255, 255, 0.84);
}

:where(body.actorshop, .editor-styles-wrapper) :where(.wp-block-media-text.is-style-hera-editorial) {
	gap: clamp(20px, 4vw, 48px);
	align-items: stretch;
}

:where(body.actorshop, .editor-styles-wrapper) :where(.wp-block-media-text.is-style-hera-editorial .wp-block-media-text__media) {
	border: 1px solid var(--actorshop-media-line);
	background: #ffffff;
}

:where(body.actorshop, .editor-styles-wrapper) :where(.wp-block-media-text.is-style-hera-editorial .wp-block-media-text__media img) {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

:where(body.actorshop, .editor-styles-wrapper) :where(.wp-block-media-text.is-style-hera-editorial .wp-block-media-text__content) {
	display: grid;
	align-content: center;
	gap: 16px;
	padding: clamp(22px, 4vw, 52px);
	border: 1px solid var(--actorshop-media-line);
	background: var(--actorshop-surface, #ffffff);
}

@media (max-width: 680px) {
	:where(body.actorshop, .editor-styles-wrapper) :where(.wp-block-cover.is-style-hera-hero, .wp-block-cover.is-style-hera-editorial) {
		min-height: clamp(320px, 84vw, 520px);
		padding: 24px 20px;
	}

	:where(body.actorshop, .editor-styles-wrapper) :where(.wp-block-media-text.is-style-hera-editorial .wp-block-media-text__content) {
		padding: 18px;
	}
}