/*
 * `nomon-hero` — the element selector outranks WP's `:root :where(.is-layout-constrained) > *` block gap.
 * Breakpoints live here, not as `min-[…]:` utilities: Blockstudio's editor Tailwind scan drops them,
 * and no comment directly before an `@media`: the editor-style prefixer breaks on it.
 */

section.nomon-hero {
	margin-block: 0;
}

.nomon-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, #452ade, rgba(66, 39, 221, 0) 50%);
}

.nomon-hero__content {
	padding: 200px var(--wp--style--root--padding-right) 200px var(--wp--style--root--padding-left);
}

.nomon-hero__inner {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
}

/* No photo: the gradient fades to white, so a text-sized sininen layer keeps the white text AA (as `.page-hero__text`).
 * Selector outranks main.css's editor-only `display: contents` on InnerBlocks wrappers. */
.nomon-hero.nomon-hero--no-image .nomon-hero__inner > .nomon-hero__text {
	display: block;
	position: relative;
	width: fit-content;
	max-width: 100%;
}

.nomon-hero.nomon-hero--no-image .nomon-hero__inner > .nomon-hero__text::before {
	content: "";
	position: absolute;
	inset: -100vh -120px -100vh -100vw;
	z-index: -1;
	background-image: linear-gradient(90deg, rgba(69, 42, 222, 0.85) calc(100% - 120px), rgba(69, 42, 222, 0));
}

.nomon-hero h1 {
	margin: 0;
	color: inherit;
	overflow-wrap: anywhere;
}

.nomon-hero p {
	margin: 15px 0 0;
	font-size: var(--wp--preset--font-size--heading-5);
}

.nomon-hero .nomon-buttons {
	margin-top: 35px;
}

@media (max-width: 767px) {
	.nomon-hero__content {
		padding-block: 100px;
	}
}

[data-type="nomon/hero"]:not(:has(.wp-block)) {
	min-height: 10rem;
	background: var(--wp--preset--color--sininen);
}