/*
 * Blocks2 Hero — daisyUI "hero" aesthetics in vanilla CSS.
 * Registered as the block's style handle, so it loads on the front end and
 * inside the iframed editor canvas alike. Every color/space/radius/shadow
 * value resolves from theme.json presets (with plain fallbacks).
 *
 * Contrast notes (WCAG 1.4.3 AA):
 * - No image: base-content #111827 on base-200 #f3f4f6 ≈ 15:1.
 * - With image: see the per-level scrim math at the overlay rules below.
 *   Text over the image is solid white — no opacity, which would eat the
 *   margin.
 */

.blocks2-hero {
	position: relative;
	overflow: hidden;
	display: grid;
	place-items: center;
	min-height: min(24rem, 80svh);
	padding: var(--wp--preset--spacing--20, 5rem) var(--wp--preset--spacing--6, 1.5rem);
	background-color: var(--wp--preset--color--base-200, #f3f4f6);
	border-radius: var(--wp--custom--radius--box, 1rem);
	box-shadow: var(--wp--preset--shadow--sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
	text-align: center;
}

/* Full-width heroes drop the card look. */
.blocks2-hero.alignfull {
	border-radius: 0;
	box-shadow: none;
}

/* Background image as a real <img> so alt text is expressible; empty alt
 * marks it decorative. */
.blocks2-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Scrim above the image so text stays readable regardless of the picture.
 * Worst case for contrast is a pure-white image under the gradient's
 * weakest (top) stop; solid white text must stay ≥ 4.5:1 (WCAG 1.4.3).
 * Per level (floor = top stop; blend = #111827 @ floor over #ffffff):
 * - subtle,   floor 0.60 → blend #70747d, white text 4.68:1 ✓
 *   (0.60 is the computed minimum: a 0.59 floor blends to 4.49:1 ✗)
 * - standard, floor 0.68 → blend #5d626c, white text 6.12:1 ✓
 * - deep,     floor 0.77 → blend #484d59, white text 8.46:1 ✓
 * - dramatic, floor 0.85 → blend #353b47, white text 11.24:1 ✓
 * Floors step evenly from the computed minimum to 0.85; each gradient
 * runs floor → floor + 0.10. 'standard' is the default (no class).
 */
.blocks2-hero--has-image::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		to bottom,
		rgb(17 24 39 / 0.68),
		rgb(17 24 39 / 0.78)
	);
}

.blocks2-hero--overlay-subtle::before {
	background: linear-gradient(
		to bottom,
		rgb(17 24 39 / 0.6),
		rgb(17 24 39 / 0.7)
	);
}

.blocks2-hero--overlay-deep::before {
	background: linear-gradient(
		to bottom,
		rgb(17 24 39 / 0.77),
		rgb(17 24 39 / 0.87)
	);
}

.blocks2-hero--overlay-dramatic::before {
	background: linear-gradient(
		to bottom,
		rgb(17 24 39 / 0.85),
		rgb(17 24 39 / 0.95)
	);
}

.blocks2-hero__inner {
	position: relative;
	z-index: 2;
	max-width: var(--wp--style--global--content-size, 42rem);
	display: grid;
	gap: var(--wp--preset--spacing--4, 1rem);
	justify-items: center;
}

.blocks2-hero__heading {
	margin: 0;
	/* Preset sizes are fluid (theme.json "fluid": true); the fallback clamp
	 * keeps mobile sane if the var is unavailable. */
	font-size: var(--wp--preset--font-size--5-xl, clamp(2rem, 1.25rem + 3vw, 3rem));
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.025em;
	overflow-wrap: break-word;
	color: var(--wp--preset--color--base-content, #111827);
}

.blocks2-hero__subheading {
	margin: 0;
	font-size: var(--wp--preset--font-size--lg, 1.125rem);
	line-height: 1.6;
	color: var(--wp--preset--color--base-content, #111827);
	opacity: 0.8;
}

/* Over an image: solid white, full opacity — the scrim provides the
 * contrast, and text opacity would erode it. */
.blocks2-hero--has-image .blocks2-hero__heading,
.blocks2-hero--has-image .blocks2-hero__subheading {
	color: var(--wp--preset--color--base-100, #ffffff);
	opacity: 1;
}

.blocks2-hero__actions {
	margin-top: var(--wp--preset--spacing--2, 0.5rem);
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3, 0.75rem);
	justify-content: center;
}

/* .wp-element-button carries the theme.json button styles (primary bg,
 * primary-content text, field radius, shadow). Only layout niceties here. */
.blocks2-hero__button {
	display: inline-block;
	text-decoration: none;
}

/*
 * Outline (secondary) variant. Keeps .wp-element-button so it inherits
 * the theme.json radius/weight/padding and the shared motion + focus
 * rules; the double class selector out-specifies the element styles.
 * Border eats into the box, so padding compensates by the border width
 * to keep both buttons the same height.
 * Contrast (WCAG 1.4.3 text / 1.4.11 border ≥ 3:1):
 * - no image: primary #4f46e5 text+border on base-200 #f3f4f6 = 5.71:1 ✓;
 *   hover fills primary with primary-content text = 5.62:1 ✓
 * - over image: base-100 #ffffff text+border on the subtle worst-case
 *   blend #70747d = 4.68:1 ✓ (stronger at every other level);
 *   hover fills base-100 with neutral #1f2937 text = 13.34:1 ✓
 */
.blocks2-hero .blocks2-hero__button--outline {
	background: transparent;
	color: var(--wp--preset--color--primary, #4f46e5);
	border: 2px solid currentColor;
	box-shadow: none;
	padding: calc(var(--wp--preset--spacing--3, 0.75rem) - 2px)
		calc(var(--wp--preset--spacing--6, 1.5rem) - 2px);
}

.blocks2-hero .blocks2-hero__button--outline:hover {
	background: var(--wp--preset--color--primary, #4f46e5);
	color: var(--wp--preset--color--primary-content, #eef2ff);
}

.blocks2-hero--has-image .blocks2-hero__button--outline {
	color: var(--wp--preset--color--base-100, #ffffff);
}

.blocks2-hero--has-image .blocks2-hero__button--outline:hover {
	background: var(--wp--preset--color--base-100, #ffffff);
	color: var(--wp--preset--color--neutral, #1f2937);
}

@media (max-width: 40rem) {
	.blocks2-hero {
		padding: var(--wp--preset--spacing--12, 3rem) var(--wp--preset--spacing--4, 1rem);
	}
}