/**
 * Home Page Styles
 *
 * Pattern-specific styles for the homepage. Loaded only on is_front_page()
 * via ad_enqueue_home_page() in functions.php.
 *
 * Includes:
 *   - Home Hero
 *   - Home Services Bar
 *   - Home Statement
 *   - Home Insights cards
 *   - Philosophy split-screen scroll
 *
 * Carved out of custom.css (2026-05-18, batch 2).
 *
 * NOT included here (still in custom.css because they're shared utilities
 * used on multiple pages):
 *   - .hero-header-at-top .ad-header (also used by About hero)
 *   - .ad-home-work, .ad-work-featured { position: relative } (cursor system)
 *   - .ad-cursor-label, .ad-cursor-image (cursor utilities)
 *   - .has-card-link (used by every card-link pattern)
 *   - .ad-query-loop .wp-block-post-template (used on all archive templates)
 *   - .ad-home-work__* (home work showcase — entangled with shared rules)
 *   - .ad-home-services-detail .ad-service-card (shared with branding-related)
 */

/* -----------------------------------------------
   Home Hero
   ----------------------------------------------- */

.ad-home-hero-outer {
	overflow: hidden;
}

/* Content sections overlap the hero after unpin — parallax layering */
.ad-home-hero-outer + * {
	position: relative;
	z-index: 1;
}

.ad-home-hero {
	position: relative;
	flex-wrap: nowrap;
}

/* margin-bottom:auto on the first child pushes the lede + scroll indicator +
   video to the bottom of the 100vh hero. Targeted by class (not :first-child of
   .wp-block-heading) because the headline is a paragraph, not a heading — the
   page's single <h1> is the lede sentence below. */
.ad-home-hero > .ad-home-hero__headline {
	margin-bottom: auto;
}

/* Guarantee a minimum gap between headline and description
   so bottom content never rides up into the headline. */
.ad-home-hero > .wp-block-columns:first-of-type {
	margin-top: clamp(2rem, 6vh, 8rem);
}

/* ── Lede: first sentence is the page <h1>, the rest is a paragraph. Render both
   inline so the two sentences read as one continuous block of text. The column
   caps the measure (inline boxes ignore the per-block max-width the single
   paragraph used to carry). ── */
.ad-home-hero__lede-col {
	max-width: 600px;
}

.ad-home-hero__lede,
.ad-home-hero__lede + p {
	display: inline;
}

/* ── Word-split headline — per-word overflow:hidden masking ── */
.ad-home-hero__headline {
	padding-top: 0.05em;
	padding-bottom: 0.1em;
}

.ad-hero-word {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
	padding-top: 0.15em;
	padding-bottom: 0.12em;
	padding-right: 0.06em;
	margin-right: -0.06em;
}

.ad-hero-word__inner {
	display: inline-block;
}

/* ── Shortcode placeholder (rendered inline in heading by [hero-video]) ── */
.hero-placeholder {
	display: inline-block;
	width: 0;
	height: clamp(3rem, 6vw, 6rem);
	vertical-align: middle;
	margin-left: 0;
	margin-right: 0;
	background: transparent;
	/* Nudge up ~0.19em so the video's bottom edge sits on the headline
	   baseline rather than ~0.19em below it. hero.js positions the video off
	   this placeholder's measured rect (getBoundingClientRect reflects the
	   transform), so the inline video AND its scroll reveal both follow. */
	transform: translateY(-0.19em);
}

/* ── Scroll indicator (inline SVG) ── */
.ad-home-hero__scroll-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ad-scroll-icon {
	flex-shrink: 0;
}

.ad-scroll-icon__dot {
	animation: ad-scroll-bob 1.8s ease-in-out infinite;
}

@keyframes ad-scroll-bob {
	0%   { transform: translateY(0); opacity: 1; }
	75%  { transform: translateY(11px); opacity: 0; }
	100% { transform: translateY(0); opacity: 0; }
}

.scroll-label {
	font-size: 11px;
	letter-spacing: 0.07em;
	color: #9e9e9e;
}

/* ── Bottom meta row (Scroll + "Branding & Marketing Agency") ──
   The meta row is the columns row that immediately follows the lede columns row.
   Pin it to the hero's content bottom so the lede paragraph becomes the last
   in-flow child — the headline's margin-bottom:auto then drops the paragraph to
   the same bottom line, so "Scroll" and the category label bottom-align with the
   bottom of the paragraph. Desktop/tablet only; on phones the columns stack, so
   we leave the row in normal flow. hero.js reveals these columns via GSAP
   transform/opacity, which compose fine with absolute positioning. */
@media (min-width: 782px) {
	/* --ad-hero-bottom-lift clears the fixed pause button (2.75rem tall, sits
	   clamp(1rem,3vw,2rem) off the viewport bottom → top edge ~4.75rem up) with a
	   gap, so the whole bottom cluster sits above the pause button's row. */
	.ad-home-hero {
		--ad-hero-bottom-lift: 4rem;
	}

	.ad-home-hero > .wp-block-columns + .wp-block-columns {
		position: absolute;
		left: 0;
		right: 0;
		bottom: calc(var(--wp--preset--spacing--60) + var(--ad-hero-bottom-lift));
		margin-top: 0;
	}

	/* Lift the lede paragraph by the same amount so it stays bottom-aligned with
	   the Scroll / category row (it's the last in-flow child; margin-bottom raises
	   it off the hero's content bottom and the headline's margin-bottom:auto
	   absorbs the difference). */
	.ad-home-hero > .wp-block-columns:first-of-type {
		margin-bottom: var(--ad-hero-bottom-lift);
	}
}

/* Hide the "Branding & Marketing Agency" label (2nd column of the meta row) on
   mobile, where the row stacks. */
@media (max-width: 781px) {
	.ad-home-hero > .wp-block-columns + .wp-block-columns > .wp-block-column:nth-child(2) {
		display: none;
	}
}

/* ── Video group (native core/group — positioned over placeholder via JS) ── */
.ad-home-hero__video-wrap {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	overflow: hidden;
	will-change: transform, width, height;
	transform-origin: 0 0;
}

.ad-home-hero__video-wrap .wp-block-video {
	position: absolute;
	inset: 0;
}

.ad-home-hero__video-wrap .wp-block-video video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Scrim gradient over video — opacity driven by --scrim-opacity (animated in hero.js) */
.ad-home-hero__video-wrap {
	--scrim-opacity: 0;
}

.ad-home-hero__video-wrap::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0.25) 100%);
	pointer-events: none;
	z-index: 1;
	opacity: var(--scrim-opacity);
}

.ad-home-hero__overlay-headline {
	position: relative;
	z-index: 2;
	color: inherit;
	padding-left: var(--wp--style--root--padding-left);
}

/* Larger hero headline on tablet + mobile (Beth request). The global `display`
   preset is clamp(3.5rem, 7vw, 6.25rem) — its 7vw only clears the 3.5rem floor
   above ~900px, so both hero headlines sit near 3.5rem (~56px) on phones and
   tablets. Bump them here only; the `display` token used elsewhere is untouched.
   !important is required to override WP's own !important on .has-display-font-size. */
@media (max-width: 1023px) {
	.ad-home-hero__headline,
	.ad-home-hero__overlay-headline {
		font-size: clamp(4rem, 9vw, 5rem) !important;
	}
}

.ad-home-hero .ad-pause-btn {
	position: absolute;
	bottom: 0.5rem;
	right: 0.5rem;
	z-index: 2;
	border-radius: 0;
}

/* Fixed hero pause/play. hero.js portals the button to <body> and adds
   .ad-hero-pause--fixed so it sticks to the viewport's bottom-right instead of
   the video container — a position:fixed child of the transformed video-wrap
   would stick to the wrap, not the screen (see the fixed-descendant transform
   trap). Visible from load through the whole hero; hero.js adds
   .ad-hero-pause--hidden to fade it out once the hero pin releases and the next
   section scrolls up. Reduced motion keeps the in-container button above (no
   pin/expand runs, so hero.js never portals it). */
.ad-pause-btn.ad-hero-pause--fixed {
	position: fixed;
	bottom: clamp(1rem, 3vw, 2rem);
	right: clamp(1rem, 3vw, 2rem);
	z-index: 50;
	border-radius: 0;
	transition: opacity 0.4s ease, visibility 0.4s ease;
}

.ad-pause-btn.ad-hero-pause--fixed.ad-hero-pause--hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
	.ad-scroll-icon__dot {
		animation: none;
	}
}

/* -----------------------------------------------
   Home Services Bar
   ----------------------------------------------- */

.ad-home-services .wp-block-heading a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

/* Hover underline removed — these links now use the persistent gradient
   underline from custom.css (.ad-home-services h3 a); a text-decoration
   underline on hover would stack a second line on top of it. */

/* -----------------------------------------------
   Home Statement
   ----------------------------------------------- */

.ad-home-statement__text {
	letter-spacing: -0.01em;
}

/* -----------------------------------------------
   Home Insights card styling moved to custom.css
   (shared by branding-insights & single-related, which don't load home.css).
   ----------------------------------------------- */

/* Tablet: stack the news stories into a single column. custom.css holds the
   grid at 2-up from ≤1024 (a rule shared with the industry insights grids);
   this homepage-only override (home.css loads after custom.css) drops it to a
   single column on tablet without affecting those other pages. */
@media (max-width: 1024px) {
	.ad-home-insights__grid .wp-block-post-template.is-layout-grid {
		grid-template-columns: 1fr !important;
	}
}

/* -----------------------------------------------
   Philosophy — Split-Screen Scroll
   ----------------------------------------------- */

/* Insights sits directly above the pinned philosophy section. Isolate it into
   its own stacking context so its positioned cards, the title-link ::after
   overlay, and any leftover fade-up transforms stay contained and can never
   paint over the philosophy split-screen while it's pinned (position:fixed).
   z-index:0 keeps the whole section below philosophy without disturbing the
   footer's post-pin parallax (which relies on .ad-home-philosophy + *). */
.ad-home-insights {
	position: relative;
	z-index: 0;
	isolation: isolate;
}

.ad-home-philosophy {
	position: relative;
	height: 100vh;
	overflow: clip;
	background-color: var(--wp--preset--color--primary);
}

/* Next section stacks above philosophy during post-pin parallax */
.ad-home-philosophy + * {
	position: relative;
	z-index: 1;
}

.ad-philosophy__label {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	padding: clamp(1rem, 4vw, 4rem);
}

/* #260 — keep the label legible over light photo slides */
.ad-philosophy__label::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(125% 125% at top left, rgba(14, 14, 14, 0.6) 0%, rgba(14, 14, 14, 0) 62%);
	z-index: -1;
	pointer-events: none;
}

.ad-philosophy__slide {
	position: absolute;
	inset: 0;
	display: flex;
}

.ad-philosophy__half {
	width: 50%;
	height: 100vh;
	margin: 0;
	flex-shrink: 0;
}

.ad-philosophy__half img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ad-philosophy__word {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
	margin: 0;
	white-space: nowrap;
	text-shadow: 0 2px 40px rgba(0, 0, 0, 0.3);
}

/* Words are cloned into slide halves by JS — originals hidden.
   No separate word clip-path needed; image masks handle the text. */

/* Tablet + mobile (<=1023px): the 50/50 split is too cramped on narrow
   screens, so each slide shows only its LEFT photo full-bleed and hides the
   right photo. The pinned top-down clip-path wipe still plays between slides.
   The left word-clone already holds the COMPLETE word (desktop just anchors it
   at the 50vw seam via inline left:100%), and it stays clipped by the left
   photo's clip-path — so re-centering it makes the full word wipe in with the
   full-bleed photo, no JS change needed.
   Also promotes the slide + animated half to their own compositor layers so the
   wipe stays smooth on weaker mobile GPUs (the hero video-wrap is already
   promoted via will-change above). */
@media (max-width: 1023px) {
	.ad-philosophy__slide {
		transform: translateZ(0);
	}

	/* Left photo fills the viewport; right photo is hidden. */
	.ad-philosophy__half:first-child {
		width: 100%;
		will-change: clip-path;
	}

	.ad-philosophy__half:nth-child(2) {
		display: none;
	}

	/* Re-center the full word over the now-full-bleed left photo. !important
	   overrides the inline left:100% the JS sets on the clone for the desktop
	   seam layout. */
	.ad-philosophy__half:first-child .ad-philosophy__word {
		left: 50% !important;
	}
}

/* Reduced motion — show first slide + first word only, no animation */
@media (prefers-reduced-motion: reduce) {
	.ad-philosophy__slide:not(:first-of-type) {
		display: none;
	}

	.ad-philosophy__word:first-of-type {
		visibility: visible;
		opacity: 1;
	}
}

/* Editor — disable positioning so all pieces are visible and editable */
.editor-styles-wrapper .ad-home-philosophy {
	height: auto;
	overflow: visible;
}

.editor-styles-wrapper .ad-philosophy__label {
	position: relative;
	padding: clamp(1rem, 4vw, 4rem) 0;
}

.editor-styles-wrapper .ad-philosophy__slide {
	position: relative;
	inset: auto;
}

.editor-styles-wrapper .ad-philosophy__half {
	height: 300px;
}

.editor-styles-wrapper .ad-philosophy__word {
	position: relative;
	top: auto;
	left: auto;
	transform: none;
	visibility: visible !important;
	opacity: 1 !important;
}