/**
 * Horizon Core: the CUTOUT hero (tenant setting `hero_overlay` = 'cutout'), HORIZON-20261002-060.
 *
 * Loaded ONLY when hero_overlay is 'cutout' (Render/hero-cutout.php), after the theme and the phone header
 * (priority 1002), so plain source order wins and the rules need no extra weight. HOME ONLY: her other pages' dark
 * banners stay in the inline string in Skin/skin-registry.php, byte for byte, so this move cannot touch them. ⭐ Today exactly one tenant uses
 * it (one creator site today): every other site never downloads this file, so nothing here can move them.
 *
 * Moved here from the inline string in Skin/skin-registry.php (HORIZON-20261001-013 / -023), which printed BEFORE the
 * theme sheets and needed selector tricks to win. Same intent, rebuilt from the Phase 1a review
 * (the client's home-hardening review, 2026-10-02, rows R1 R2 R3 W2 W3 G1):
 *
 *   STACKED  phones, and tablets held upright: the words, then her transparent cutout directly under them (its top
 *            tucked a little behind the tagline, as her old phone page did), the hero about one screen tall so the
 *            diagonal shows on the first screen. Her old site's three bands: phone to 767, tablet to 1024.
 *   SPLIT    from 1025px, or from 900px when the screen is LANDSCAPE (a 1024x768 tablet keeps the side-by-side
 *            layout it had): words left, figure right. ⛔ 1024 PORTRAIT is no longer split: it showed ~500px of empty
 *            white above the words and the second button ran under her hair.
 *
 * ⛔ Every !important below overrides an INLINE style the theme prints (the img's object-position, the title's
 * max-width:none, the hero inner's text-align:left) or a Core phone rule that uses !important. Nothing else.
 */

/* ── Every width, home ─────────────────────────────────────────────────────────────────────────────────── */

body.home .hp-hero .hp-hero__overlay { display: none; }

body.home .hp-hero .hp-hero__bg img {
	object-fit: contain;
	object-position: center bottom !important;
	-webkit-mask-image: none;
	mask-image: none;
}

/* GeneratePress puts 20px under every top-level section; the black diagonal must meet the black band. */
body.home .hp-hero { margin-bottom: 0 !important; }

/* Her DIAGONAL black edge under the photo (her old Elementor shape divider, path M737.9,94.7 L0,0 v100 h1000 V0 z),
   in the band's own colour, over the photo. */
body.home .hp-hero::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -1px;
	width: max(100%, 578px);
	transform: translateX(-50%);
	height: clamp(39px, 9.4vw, 135px);
	background: var(--hp-band-bg, var(--hp-bg-surface));
	clip-path: polygon(0 0, 73.79% 94.7%, 100% 0, 100% 100%, 0 100%);
	z-index: 3;
	pointer-events: none;
}

/* The eyebrow in her display face, as her old page set it (Montserrat 700); the theme uses the body face (W3). */
body.home .hp-hero .hp-hero__eyebrow {
	font-family: var(--hp-font-display, inherit);
	font-weight: 700;
}

/* No white seam where a section meets a black band (G1): her old bands butted against each other. */
body.home .site-main > .hp-feature-cards--band,
body.home .site-main > .hp-book-me-cta,
body.home .site-main > :has(+ .hp-book-me-cta),
body.home .site-main > :has(+ .hp-feature-cards--band) {
	margin-bottom: 0;
}

/* ── STACKED: phones, and tablets held upright ─────────────────────────────────────────────────────────── */

@media (max-width: 899.98px), (max-width: 1024.98px) and (orientation: portrait) {
	body.home .hp-hero {
		/* One screen tall, so the diagonal and the top of the black band show on the first screen. */
		min-height: var(--hp-cutout-hero-h, 84svh) !important;
		justify-content: flex-start;
	}
	body.home .hp-hero .hp-hero__inner {
		order: 1;
		position: relative;
		z-index: 2;
		transform: none;
		text-align: center !important;
		padding-top: calc(var(--hp-header-h, 72px) + var(--hp-sp-4, 16px));
		padding-bottom: 0;
	}
	body.home .hp-hero .hp-hero__title,
	body.home .hp-hero .hp-hero__tagline {
		margin-left: auto;
		margin-right: auto;
	}
	body.home .hp-hero .hp-hero__tagline { margin-bottom: var(--hp-sp-4, 16px) !important; }
	body.home .hp-hero .hp-hero__cta { justify-content: center; margin-bottom: var(--hp-sp-2, 8px); }

	/* The photo fills what is left of the hero, in flow under the words, its top tucked behind the tagline. */
	body.home .hp-hero .hp-hero__bg {
		position: relative;
		inset: auto;
		order: 2;
		z-index: 0;
		flex: 1 1 0;
		min-height: clamp(240px, 42svh, 560px);
		margin-top: calc(-1 * var(--hp-cutout-tuck, 24px));
	}
	body.home .hp-hero .hp-hero__bg img {
		position: absolute;
		inset: 0;
		display: block;
		width: 100%;
		height: 100%;
		max-height: none;
	}
	/* Under a button the photo starts clear of it: tucked behind a button, her raised arm ran into its edge. */
	body.home .hp-hero:has(.hp-hero__cta a) .hp-hero__bg { margin-top: 0; }
}

/* Tablets and landscape phones: a button keeps its own width, centred, instead of stretching across the column (the
   theme gives the buttons flex:1 at exactly 768, which drew one Shop Merch button 720px wide; a 667px landscape phone
   drew it 619px). Upright phones keep the full-width button, the easiest tap. */
@media (min-width: 768px) and (max-width: 1024.98px) and (orientation: portrait), (max-width: 899.98px) and (orientation: landscape) {
	body.home .hp-hero .hp-hero__cta .hp-btn { flex: 0 0 auto; min-width: 240px; }
}

/* Tablets held upright: a little taller, and her name sized for the column (hers was 42px; the shared `sharp`
   scale gave 69-74px). */
@media (min-width: 768px) and (max-width: 1024.98px) and (orientation: portrait) {
	body.home .hp-hero { --hp-cutout-hero-h: 88svh; }
	body.home .hp-hero .hp-hero__title { font-size: clamp(48px, 6.4vw, 64px); line-height: 1; }
	body.home .hp-hero .hp-hero__bg { min-height: clamp(320px, 50svh, 760px); }
}

/* ── SPLIT: from 1025px, or from 900px in landscape ────────────────────────────────────────────────────── */

@media (min-width: 1025px), (min-width: 900px) and (orientation: landscape) {
	body.home .hp-hero { justify-content: center; }
	/* SHE IS THE FOCAL POINT, ON HER OLD PAGE'S DIAGONAL (Alex, 2026-10-02, her old hero as the reference:
	   "her becoming the focal point, not shoved off to the side", then "something is visually unbalanced").
	   Measured on his screenshot (1905x948): her face at ~31% of the screen height, her raised arm running to the top
	   edge behind the header, the words' middle at ~56%: face HIGH on the right, name LOW on the left. 1.41.78 had her
	   start under the header (face ~41%) and the words centred at ~47%, so the two sat level and the page looked static.
	   - The figure: centred in the RIGHT HALF OF THE CONTENT COLUMN (the 1280 container), from the hero's top edge,
	     115% of the screen's height and anchored at the top, so the lower part runs off the hero's foot (clipped) with
	     the diagonal across her thighs. Her elbow sits in the transparent header band between the logo and the icons,
	     as on her old page; the menu items and icons stay clear of her (measured at 1025-1920).
	   - The words: padded by the header plus 8% of the screen, which puts their middle at ~55-56% at every height. */
	body.home .hp-hero .hp-hero__bg {
		inset: 0 auto 0 50%;
		width: min(50%, calc(var(--hp-content-max, 1280px) / 2));
	}
	body.home .hp-hero .hp-hero__bg img {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 115%;
		object-position: center top !important;
	}
	body.home .hp-hero .hp-hero__inner {
		padding-top: calc(var(--hp-header-h, 72px) + 8svh);
		padding-bottom: var(--hp-sp-16, 64px);
	}
	body.home .hp-hero .hp-hero__title {
		font-size: clamp(64px, 7vw, 100px);
		line-height: 0.85;
		max-width: 9ch !important;
	}
	body.home .hp-hero .hp-hero__tagline { max-width: min(42rem, 40vw) !important; }
	/* The buttons stay in the words' column: where the two do not fit side by side, the second wraps under the
	   first instead of running under the photo. */
	body.home .hp-hero .hp-hero__cta { max-width: calc(50vw - var(--hp-content-pad, 24px) - 24px); }
	body.home .hp-hero .hp-hero__eyebrow { font-size: 14px; }
}

/* ── A PRODUCT RAIL (hero lead) INSIDE THE CUTOUT HERO (HORIZON-20261005-010) ──────────────────────────────────────
   Only a home layout that keeps the skeleton's hero lead prints one (`merch-first`); `links-first` prints none, so on
   it nothing below matches and her page does not move. Every rule is keyed on `.hp-hero-lead` being present.

   STACKED: the rail must not sit between the words and the button, which pushes the button and her figure ~240px down
   a phone (the cost Alex refused for a second button, HORIZON-20261002-060). It is lifted out of the words column and
   pinned to the FOOT of the hero, on the band's black ground under the diagonal, so the first screen keeps her words,
   her one button and her figure, and the products rise into view at its foot, running straight into the black proof
   band below. The rail has a fixed height (cards have a capped width and one-line captions), so the hero can reserve
   exactly that much and the diagonal can sit on top of it.
   SPLIT: in flow, inside the words column, between tagline and button, capped to the tagline's width. */

@media (max-width: 899.98px), (max-width: 1024.98px) and (orientation: portrait) {
	body.home .hp-hero:has(.hp-hero-lead) {
		--hp-cutout-rail-h: 212px;
		padding-bottom: var(--hp-cutout-rail-h);
	}
	body.home .hp-hero:has(.hp-hero-lead)::after { bottom: calc(var(--hp-cutout-rail-h) - 1px); }
	/* The rail's containing block becomes the hero; the words keep their stacking above the figure. */
	body.home .hp-hero:has(.hp-hero-lead) .hp-hero__inner { position: static; }
	body.home .hp-hero:has(.hp-hero-lead) .hp-hero__inner > * { position: relative; z-index: 2; }
	body.home .hp-hero:has(.hp-hero-lead) .hp-hero__inner > .hp-hero-lead {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 4;
		height: var(--hp-cutout-rail-h);
		max-width: none;
		margin: 0;
		padding: var(--hp-sp-3, 12px) var(--hp-content-pad, 16px) 0;
		border-top: 0;
		background: var(--hp-band-bg, #000);
		text-align: center;
	}
	body.home .hp-hero .hp-hero-lead .hp-hero-lead__cards {
		justify-content: center;
		overflow: visible;
		max-width: var(--hp-content-max, 1280px);
		margin: 0 auto;
		padding: 0;
	}
	body.home .hp-hero .hp-hero-lead .hp-hero-lead__card { width: min(112px, calc((100% - 2 * var(--hp-sp-3, 12px)) / 3)); }
	body.home .hp-hero .hp-hero-lead .hp-hero-lead__thumb { box-shadow: none; }
	body.home .hp-hero .hp-hero-lead .hp-hero-lead__card-title,
	body.home .hp-hero .hp-hero-lead .hp-hero-lead__card-meta { color: var(--hp-band-fg, #fff); }
}

/* Upright tablets: Core's lead sheet draws 150px cards from 768, so the rail is taller. */
@media (min-width: 768px) and (max-width: 1024.98px) and (orientation: portrait) {
	body.home .hp-hero:has(.hp-hero-lead) { --hp-cutout-rail-h: 268px; }
	body.home .hp-hero .hp-hero-lead .hp-hero-lead__card { width: 150px; }
}

@media (min-width: 1025px), (min-width: 900px) and (orientation: landscape) {
	/* Measured in the staged render at 1440x900: with the default 150px cards and the words' usual top padding, the
	   button landed ON the black diagonal (~y 750-800). Smaller cards and half the extra top padding keep the button
	   clear of it, while the words keep their place low-left against her face high-right. */
	body.home .hp-hero:has(.hp-hero-lead) .hp-hero__inner { padding-top: calc(var(--hp-header-h, 72px) + 4svh); }
	body.home .hp-hero .hp-hero-lead {
		max-width: min(42rem, 40vw);
		margin-bottom: var(--hp-sp-5, 20px);
		padding-top: var(--hp-sp-4, 16px);
	}
	body.home .hp-hero .hp-hero-lead .hp-hero-lead__card { width: min(118px, calc((100% - 2 * var(--hp-sp-3, 12px)) / 3)); }
}