/* Hero — Web Mockup. Illustrated device frame holding a screenshot,
   corner-pinned into the illustration's screen shape via a projective
   transform computed in assets/js/conditional/heroes/hero-web-mockup.js.
   Ported from the standalone corner-pin prototype — see that file's header
   comment for how the homography/scroll-link/draw-in pieces fit together.

   Mobile, Tablet, and Desktop are the device options and all three render
   real markup (.mockupStage, not .mockupStage--placeholder) — the
   placeholder below is just a safety net for an unexpected field value. */

/* GP (core or Premium's Page Header module) still renders its own featured
   image ahead of this hero — unhooking it in PHP doesn't reach Premium's
   render path (see assets/css/conditional/heroes/hero-v1.css), so hide it
   here too. This style renders its own screenshot, so GP's copy is always
   redundant. */
#SD.hero-style-web-mockup .page-header-image
{
	display: none;
}

.heroWebMockup
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(2rem, 5vw, 4rem);
	max-width: var(--content-max-width, 1400px);
	margin: 0 auto;
	padding: clamp(2rem, 6vw, 5rem) clamp(1.25rem, 4vw, 3rem);
}

.heroWebMockup-text
{
	flex: 1 1 360px;
	min-width: 280px;
}

/* Name borrows Split Grid's Type Label Type Role (the small uppercase
   label above the title) by default — same override path as below.
   #SD-prefixed because Name is an <h1> (SEO) and the global #SD H1 rules
   (SDstandards.css, headings.css) would otherwise win on size/weight/
   line-height/color and blow it up to headline size. */
#SD .heroWebMockup-name
{
	margin: 0 0 0.5rem;
	font-family: var(--hero-web-mockup-name-family, var(--hero-split-grid-type-family, inherit));
	font-weight: var(--hero-web-mockup-name-weight, var(--hero-split-grid-type-weight, 600));
	font-style: var(--hero-web-mockup-name-style, var(--hero-split-grid-type-style, normal));
	font-size: var(--hero-web-mockup-name-size, var(--hero-split-grid-type-size, clamp(0.8rem, 1.2vw, 1.1rem)));
	line-height: var(--hero-web-mockup-name-line-height, var(--hero-split-grid-type-line-height, normal));
	letter-spacing: var(--hero-web-mockup-name-letter-spacing, var(--hero-split-grid-type-letter-spacing, normal));
	text-transform: var(--hero-web-mockup-name-text-transform, var(--hero-split-grid-type-text-transform, none));
	color: var(--hero-web-mockup-name-color, var(--hero-split-grid-type-color, inherit));
}

/* Headline borrows Split Grid's Client Type Role (the big bold title) by
   default — Design Tokens → Heroes → Web Mockup can override with its own
   Type Role; see inc/hero-tokens.php's shew_render_hero_tokens(). */
.heroWebMockup-headline H1,
.heroWebMockup-headline
{
	margin: 0 0 0.75rem;
	font-family: var(--hero-web-mockup-headline-family, var(--hero-split-grid-client-family, inherit));
	font-weight: var(--hero-web-mockup-headline-weight, var(--hero-split-grid-client-weight, 800));
	font-style: var(--hero-web-mockup-headline-style, var(--hero-split-grid-client-style, normal));
	font-size: var(--hero-web-mockup-headline-size, var(--hero-split-grid-client-size, clamp(2rem, 5vw, 5.5rem)));
	line-height: var(--hero-web-mockup-headline-line-height, var(--hero-split-grid-client-line-height, 0.93));
	letter-spacing: var(--hero-web-mockup-headline-letter-spacing, var(--hero-split-grid-client-letter-spacing, normal));
	text-transform: var(--hero-web-mockup-headline-text-transform, var(--hero-split-grid-client-text-transform, none));
	color: var(--hero-web-mockup-headline-color, var(--hero-split-grid-client-color, inherit));
}

/* Introduction borrows Split Grid's Headline Type Role (its body-style
   intro copy) by default — same override path as above. */
.heroWebMockup-introduction
{
	max-width: 42ch;
	font-family: var(--hero-web-mockup-introduction-family, var(--hero-split-grid-headline-family, inherit));
	font-weight: var(--hero-web-mockup-introduction-weight, var(--hero-split-grid-headline-weight, normal));
	font-style: var(--hero-web-mockup-introduction-style, var(--hero-split-grid-headline-style, normal));
	font-size: var(--hero-web-mockup-introduction-size, var(--hero-split-grid-headline-size, clamp(1.1rem, 2vw, 2.25rem)));
	line-height: var(--hero-web-mockup-introduction-line-height, var(--hero-split-grid-headline-line-height, 1.4));
	letter-spacing: var(--hero-web-mockup-introduction-letter-spacing, var(--hero-split-grid-headline-letter-spacing, normal));
	text-transform: var(--hero-web-mockup-introduction-text-transform, var(--hero-split-grid-headline-text-transform, none));
	color: var(--hero-web-mockup-introduction-color, var(--hero-split-grid-headline-color, inherit));
}

/* ── Mockup stage (Tablet — corner-pinned) ─────────────────────────────── */

.mockupStage
{
	position: relative;
	flex: 1 1 420px;
	width: 100%;
	max-width: 640px;
	aspect-ratio: var(--mockup-aspect-w, 1180.57) / var(--mockup-aspect-h, 1505.37);
	margin: 0 auto;
}

/* Holds the per-device <clipPath> only — never rendered, so it's collapsed
   out of layout rather than just visually hidden. */
.mockupClipDefs
{
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.mockupScreenshotMask
{
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.mockupScreenshotLayer
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	transform-origin: 0 0;
	will-change: transform;
}

.mockupScrollInner
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

/* Default: width:100%, height:auto — the screenshot is scaled to the
   mask's width and left at its natural (taller) height so the rest can
   scroll into view (see hero-web-mockup.js). When a screenshot is short
   enough that width-scaling would leave a gap at the bottom of the mask,
   hero-web-mockup.js switches this to a fixed pixel height + width:auto
   (via .mockupScrollInner.is-covering) so the image scales up by height
   instead, cropping the sides via the mask's clip-path/overflow rather
   than leaving blank space — percentage heights can't express that
   "whichever dimension fills the frame" swap, so JS measures the actual
   image and mask size and sets it directly. */
.mockupScrollInner IMG
{
	display: block;
	width: 100%;
	height: auto;
}

.mockupScrollInner.is-covering IMG
{
	position: relative;
	width: auto;
	max-width: none;
	left: 50%;
	transform: translateX(-50%);
}

/* Provisional per-page override (inc/hero.php
   shew_hero_web_mockup_contain_post_ids()) — whole screenshot always
   visible, scaled to fit entirely inside the frame rather than cropped
   (.is-covering) or left to scroll (the default). Letterboxes rather than
   distorts when the image's own aspect doesn't exactly match the frame. */
.mockupScrollInner.is-contain
{
	position: absolute;
	inset: 0;
	width: auto;
}
.mockupScrollInner.is-contain IMG
{
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center top;
}

/* Provisional per-page override (inc/hero.php
   shew_hero_web_mockup_stretch_post_ids()) — top/left/right/bottom all
   matched exactly to the frame, aspect ratio disregarded entirely
   (object-fit: fill). No crop, no letterbox, the image is distorted to fit
   instead. */
.mockupScrollInner.is-stretch
{
	position: absolute;
	inset: 0;
	width: auto;
}
.mockupScrollInner.is-stretch IMG
{
	width: 100%;
	height: 100%;
	object-fit: fill;
}

.mockupLineart
{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* ── Entrance animation (hero-web-mockup.js playEntrance()) ─────────────
   An inline script in hero-web-mockup.php adds .is-entrance-pending as
   soon as the hero is parsed, so nothing flashes fully drawn before the
   animation sets its starting states; the JS removes it once they're set.
   Without JS the class is never added. The keyframe is a failsafe: if the
   JS never runs, everything shows anyway after 3s. */
.heroWebMockup.is-entrance-pending .heroWebMockup-text > *,
.heroWebMockup.is-entrance-pending .mockupLineart,
.heroWebMockup.is-entrance-pending .mockupScreenshotMask
{
	visibility: hidden;
	animation: heroWebMockupFailsafe 0s 3s forwards;
}

@keyframes heroWebMockupFailsafe
{
	to { visibility: visible; }
}

/* Word masks for the title/subhead/intro line reveal — removed (original
   markup restored) once the animation finishes. */
.heroWebMockup-word
{
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding-bottom: 0.12em;
	margin-bottom: -0.12em;
}

.heroWebMockup-wordInner
{
	display: inline-block;
}

/* Glare sweep across the screen glass after it powers on. */
.mockupGlare
{
	position: absolute;
	inset: -20% -60%;
	background: linear-gradient(105deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 60%);
	opacity: 0;
	pointer-events: none;
}

/* ── Background band (per page, inc/hero.php shew_hero_web_mockup_bg_settings()) ──
   Full-width wrapper around the hero, only rendered for pages listed there.
   Layers: pale brand base → blurred photo → white wash → grain. Brand
   colors come from the page's Page Backgrounds (--sbg-brand-*). */
.heroWebMockupBand
{
	position: relative;
	isolation: isolate;
	overflow: hidden;
	/* Matches the paragraph margin below the intro text (p: 1.5em of 20px), so the copy sits evenly between the hero and the first section. */
	margin-bottom: 30px;
}

.heroWebMockupBg
{
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	background: color-mix(in srgb, var(--sbg-brand-light, #dfe6e2) 55%, #ffffff);
}

.heroWebMockupBg > *
{
	position: absolute;
	inset: 0;
}

.heroWebMockupBg-media IMG
{
	position: absolute;
	inset: -24px;
	width: calc(100% + 48px);
	height: calc(100% + 48px);
	max-width: none;
	object-fit: cover;
	object-position: var(--hwm-bg-focus, 50%) 50%;
	filter: blur(var(--hwm-bg-blur, 6px)) saturate(0.8);
}

.heroWebMockupBg-tint
{
	background: #ffffff;
	opacity: var(--hwm-bg-tint-opacity, 0.74);
}

/* Soft light glow behind the device, and a white halo on the (always black)
   line art — same treatment as background sections (sectionBackground.css). */
.heroWebMockupBg-glow
{
	background: radial-gradient(ellipse 36% 62% at 72% 50%, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.34) 45%, rgba(255, 255, 255, 0) 100%);
}

.heroWebMockupBand .mockupLineart
{
	filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 4px rgba(255, 255, 255, 0.55));
}

.heroWebMockupBg-texture
{
	opacity: var(--hwm-bg-texture, 0.2);
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Frosted panel behind the title, subhead and intro. */
.heroWebMockupBand--frost .heroWebMockup-text
{
	position: relative;
	z-index: 0;
}

.heroWebMockupBand--frost .heroWebMockup-text::before
{
	content: "";
	position: absolute;
	inset: -32px -36px;
	z-index: -1;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.5);
	-webkit-backdrop-filter: blur(16px) saturate(1.2);
	backdrop-filter: blur(16px) saturate(1.2);
}

@media only screen and (max-width: 782px)
{
	/* Stacked: the device sits below the copy. */
	.heroWebMockupBg-glow
	{
		background: radial-gradient(ellipse 60% 30% at 50% 74%, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.34) 45%, rgba(255, 255, 255, 0) 100%);
	}

	.heroWebMockupBg-media IMG
	{
		filter: blur(calc(var(--hwm-bg-blur, 6px) / 2)) saturate(0.8);
	}

	.heroWebMockupBand--frost .heroWebMockup-text::before
	{
		inset: -18px -12px;
	}
}

/* ── Mockup stage (placeholder — unexpected device value, shouldn't occur) ── */

.mockupStage--placeholder
{
	display: flex;
	align-items: flex-start;
	justify-content: center;
	max-width: 480px;
	aspect-ratio: 4 / 3;
	border: 1px solid var(--border-color, #ddd);
	border-radius: 12px;
	overflow: hidden;
	background: var(--bg-subtle, #f4f4f2);
}

.mockupPlaceholderImg
{
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	object-position: top;
}

/* Mobile/tablet: the breadcrumb trail is position:absolute and floats over
   the top of the page (SDheaderNavRegion.css), so the hero's own top
   padding has to clear it — same --breadcrumb-mobile-clearance pattern as
   the other heroes/templates (hero-split-grid.css, hero-default-image.css).
   max() keeps the normal padding whenever it's already the larger value. */
@media only screen and (max-width: 999px)
{
	.heroWebMockup
	{
		padding-top: max(clamp(2rem, 6vw, 5rem), var(--breadcrumb-mobile-clearance));
	}
}

@media only screen and (max-width: 782px)
{
	.heroWebMockup
	{
		flex-direction: column;
		text-align: center;
	}

	.heroWebMockup-introduction
	{
		margin: 0 auto;
	}
}