/**
 * Homepage hero.
 *
 * The headline sits in a translucent panel rather than floating directly on the
 * photo. That lets the Cover's overlay stay light (40% instead of 50%) so the
 * rig photography still reads, while the panel supplies strong local contrast
 * exactly where the text is — better legibility AND a less washed-out image.
 *
 * Selectors are deliberately over-specific (.wp-block-group.pd-hero-panel,
 * h1.pd-hero-title) so they outrank core's constrained-layout rules and
 * theme.json's :root :where(h1), which would otherwise tie and fall to load
 * order.
 */

/**
 * .pd-hero-row is an intentional wrapper, not redundant nesting.
 *
 * Core's constrained layout emits `margin-left:auto !important` on every DIRECT
 * child of .wp-container-core-cover-is-layout-*, which no specificity can beat —
 * so a narrow panel placed directly in the Cover is forced dead centre. The row
 * absorbs that rule (it takes the full 1200px and is centred, which is what we
 * want), and because the row uses flow layout its own children are free of the
 * !important. That lets the panel sit flush with the row's left edge, which is
 * the same edge as the header logo — so hero text and logo line up.
 *
 * It also carries the hero's vertical breathing room. The angled white section
 * lives INSIDE this Cover (it has to, so its clip-path can reveal the photo
 * through the cut corner), so it sits directly after the panel with only the
 * default 1.5rem block gap — crowding the hero and pulling itself up into the
 * fold. The min-height reserves space for the photograph; the bottom padding
 * keeps the wedge off the panel's bottom edge.
 *
 * vh-based so the hero scales with the viewport, clamped so it neither collapses
 * on a short laptop nor leaves a dead zone on a tall monitor.
 */

.wp-block-group.pd-hero-row {
	min-height: clamp( 320px, 64vh, 660px );
	padding-bottom: clamp( 2rem, 7vh, 5.5rem );
}

.wp-block-group.pd-hero-panel {
	/* Sized so "Specialized Drilling Equipment" fits on one line at the headline's
	   max font size — narrower and "Equipment" orphans onto a line of its own. */
	max-width: 700px;

	/* Flush with the row's left edge. No !important needed: the row is a flow
	   container, so core sets no inline margins on this element. */
	margin-left: 0;
	margin-right: auto;

	padding: clamp( 1.5rem, 3.5vw, 2.75rem );
	border-left: 4px solid var( --wp--preset--color--gold );
	border-radius: 2px;

	/* --dark at 78%. The Cover's overlay is now 0% so the photo runs at full
	   strength — the panel is the ONLY thing separating the text from a bright,
	   busy image, hence the higher opacity than when the overlay helped.
	   The rgba line is the fallback; color-mix keeps the panel tied to the
	   palette so a change to --dark carries through. */
	background-color: rgba( 36, 34, 45, 0.78 );
	background-color: color-mix( in srgb, var( --wp--preset--color--dark ) 78%, transparent );

	-webkit-backdrop-filter: blur( 4px );
	backdrop-filter: blur( 4px );
}

/**
 * Hero headline. Larger and tighter than the global h1 (xx-large, capped at
 * 2.625rem) — a hero carries more weight than a section heading.
 */
h1.pd-hero-title {
	/* Max is tuned so "Specialized Drilling Equipment" (the longest forced line)
	   fits the panel's 612px content width. Raising it orphans "Equipment". */
	font-size: clamp( 1.75rem, 3.1vw, 2.5rem );
	line-height: 1.08;
	letter-spacing: -0.015em;

	/* `pretty` rather than `balance`: the headline carries a manual <br>, and
	   balance would fight it by re-evening the forced segments. pretty just
	   prevents orphans within each segment. */
	text-wrap: pretty;
}

/**
 * The headline's manual <br> is tuned for the panel at desktop width. On narrow
 * screens the line is already short enough to wrap on its own, and forcing the
 * break there strands "for Complex..." awkwardly — so drop it.
 */
@media ( max-width: 600px ) {
	h1.pd-hero-title br {
		display: none;
	}
}

/* Uppercase lead-in above the headline. */
.pd-hero-panel > .pd-hero-kicker {
	margin-top: 0;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-weight: 700;
}

/* Below the wide breakpoint the panel spans the container, so let it breathe. */
@media ( max-width: 781px ) {
	.wp-block-group.pd-hero-panel {
		max-width: none;
	}
}