/* ==========================================================================
   GrowthStudioz — home hero

   Slides are stacked in one grid cell and cross-faded. No transform track, so
   there is nothing to re-measure on resize and no horizontal overflow to guard
   against.
   ========================================================================== */

/* Full bleed. The hero breaks out of main's gutter with a negative margin
   matching it, and drops the block-gap margin WP puts above every sibling
   block, so it meets the header edge to edge with nothing above it.

   !important because core's constrained-layout rule centres children of
   .wp-block-post-content with `margin-left: auto !important`; a normal
   declaration cannot outrank that at any specificity.

   The copy inside still uses .gs-container, so only the media goes full width
   while the text stays on the site's gutter. */
.gs-hero {
	margin-block-start: 0 !important;
	margin-inline: calc(var(--gs-gutter) * -1) !important;
	/* Core also caps constrained children with max-width. Without lifting it the
	   negative margin shifts the hero left but cannot widen it, leaving it
	   short by exactly the two gutters. */
	max-width: none !important;
	position: relative;
	/* dvh, not vh: on iOS Safari vh includes the collapsing toolbar, so a 100vh
	   hero jumps by ~60px as the user scrolls. min-height keeps tall content
	   from being clipped. */
	min-height: min(78dvh, 760px);
	display: grid;
	background: var(--gs-black);
	color: var(--gs-on-dark);
	overflow: hidden;
	isolation: isolate;
}

.gs-hero__track {
	display: grid;
	grid-template-areas: "slide";
	min-height: inherit;
}

.gs-hero__slide {
	grid-area: slide;
	position: relative;
	display: grid;
	align-content: center;
	min-height: inherit;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity var(--gs-dur-enter) var(--gs-ease-out),
		visibility 0s linear var(--gs-dur-enter);
}

.gs-hero__slide.is-active {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

@media (min-width: 768px) {
	.gs-hero {
		margin-inline: calc(var(--gs-gutter-md) * -1) !important;
	}
}

@media (min-width: 1024px) {
	.gs-hero {
		margin-inline: calc(var(--gs-gutter-lg) * -1) !important;
	}
}

/* --- media ---------------------------------------------------------------- */

.gs-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	/* object-fit is what lets one asset serve every aspect ratio without
	   letterboxing. Both <img> and <video> take it. */
	object-fit: cover;
	object-position: center;
}

/* Scrim. Without it, white type over an unknown photo or video is a coin
   flip — the client can upload anything. Weighted to the bottom, where the
   copy sits. */
.gs-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		180deg,
		rgb(0 0 0 / 30%) 0%,
		rgb(0 0 0 / 45%) 45%,
		rgb(0 0 0 / 75%) 100%
	);
}

/* --- copy ----------------------------------------------------------------- */

.gs-hero__body {
	position: relative;
	z-index: 2;
	padding-block: var(--gs-space-9);
	max-width: none;
}

.gs-hero__heading {
	max-width: 18ch;
	color: var(--gs-on-dark);
	font-size: clamp(2.25rem, 1.2rem + 4.2vw, var(--gs-h1));
	text-wrap: balance;
}

.gs-hero__sub {
	margin-block-start: var(--gs-space-4);
	max-width: 52ch;
	color: var(--gs-on-dark-muted);
	font-size: var(--gs-b2);
}

/* Everything this button IS now comes from .gs-btn--accent in base.css. All
   that is left here is where it sits in the hero. */
.gs-hero__cta {
	margin-block-start: var(--gs-space-6);
}

/* --- pagination ----------------------------------------------------------- */

.gs-hero__pagination {
	position: absolute;
	inset-inline: 0;
	bottom: var(--gs-space-6);
	z-index: 3;
	max-width: none;
}

.gs-hero__dots {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0;
}

/* The button is the hit area, the span is the mark. Height stays at 44px so the
   touch target survives; width is just the mark plus 4px either side, which is
   the minimum gap asked for. The negative margins that used to pull the
   buttons together are gone — with gap:0 they only caused overlap. */
.gs-hero__dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding-inline: var(--gs-space-1);
	border: 0;
	background: none;
	cursor: pointer;
}

.gs-hero__dot span {
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgb(255 255 255 / 45%);
	transition:
		width var(--gs-dur-hover) var(--gs-ease-out),
		background-color var(--gs-dur-hover) ease;
}

/* Active dot stretches into a bar rather than changing colour alone: it reads
   at a glance and survives a busy photo behind it. */
.gs-hero__dot.is-active span {
	width: 28px;
	border-radius: 999px;
	background: var(--gs-white);
}

.gs-hero__dot:focus-visible {
	outline: 2px solid var(--gs-white);
	outline-offset: -8px;
	border-radius: var(--gs-radius-sm);
}

/* --- editor-only empty state ---------------------------------------------- */

.gs-hero--empty {
	display: grid;
	place-items: center;
	min-height: 240px;
	padding: var(--gs-space-6);
	border: 1px dashed var(--gs-border);
	background: var(--gs-surface-alt);
	color: var(--gs-body);
}

.gs-hero--empty p {
	margin: 0;
	max-width: none;
}

/* ==========================================================================
   Phones
   ========================================================================== */

@media (max-width: 767px) {
	.gs-hero {
		min-height: min(68dvh, 560px);
	}

	/* The copy sits at the bottom left, under the picture rather than over
	   its middle (Adarsh, 7th October 2026). The scrim is darkest there. */
	.gs-hero__slide {
		align-content: end;
	}

	.gs-hero__body {
		padding-block: var(--gs-space-8) var(--gs-space-6);
	}

	.gs-hero__sub {
		font-size: var(--gs-b3);
	}

	/* Width is the one thing a section still sets. Full-bleed on phones. */
	.gs-hero__cta {
		width: 100%;
	}
}

/* ==========================================================================
   Reduced motion

   The slider stops auto-advancing in JS; here the cross-fade becomes a cut, so
   changing slides by hand still works without movement.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.gs-hero__slide {
		transition: none;
	}

	.gs-hero__dot span {
		transition: none;
	}
}