/*
 * Hero.
 *
 * Same rules as every component stylesheet: design-system `--btx-*` tokens
 * only, a fallback on every var(). See cta-button/style.css for the full note.
 *
 * The background colour/gradient/image/video and the minimum height are set
 * inline by the render callback. Only structural layout and typography tokens
 * live here.
 *
 * Two knobs a host template may set on the element from outside:
 *
 *   --btxc-hero-offset-top   extra top padding inside the content, for a hero
 *                            sitting under a header that overlays it. Never
 *                            given a value here, only a fallback at the point
 *                            of use — a default declared in this layer would
 *                            beat a theme's, which is always the earlier layer.
 *   --btxc-hero-cols         the split grid's track sizes; set by the renderer.
 */

@layer bertex-components {

	/* ── Outer shell ───────────────────────────────────────────────────── */

	/*
	 * The section is the background box, and it sizes itself rather than
	 * relying on a container: `--width-wide` caps it at the design system's max
	 * width, `--width-full` lets it run to whatever its parent gives it, which
	 * in a page's content flow is the viewport.
	 *
	 * Centred rather than top-aligned, so a min-height taller than the content
	 * puts the leftover room above and below it instead of all underneath.
	 */
	.btxc-hero {
		position: relative;
		overflow: hidden;
		box-sizing: border-box;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.btxc-hero--width-wide {
		max-width: var(--btx-max-width, 1440px);
		margin-inline: auto;
	}

	.btxc-hero--width-full {
		max-width: none;
	}

	/* ── Background video ──────────────────────────────────────────────── */

	.btxc-hero__video {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		z-index: 0;
	}

	/* ── Dark overlay (image / video) ──────────────────────────────────── */

	.btxc-hero__overlay {
		position: absolute;
		inset: 0;
		background: #000;
		z-index: 1;
		pointer-events: none;
	}

	/* ── Inner — constrained width, stacks above video/overlay ────────── */

	.btxc-hero__inner {
		position: relative;
		z-index: 2;
		box-sizing: border-box;
		width: 100%;
		max-width: var(--btx-max-width, 1440px);
		margin-inline: auto;

		/*
		 * Split rather than shorthand: the top edge also has to clear a header
		 * overlaying the hero, and only the host template knows whether one is
		 * there or how tall it is.
		 */
		padding-block-start: calc(
			var(--btx-section-spacing, 5rem) + var(--btxc-hero-offset-top, 0px)
		);
		padding-block-end: var(--btx-section-spacing, 5rem);
		padding-inline: var(--btx-section-padding, 2rem);

		display: flex;
		flex-direction: column;
		gap: var(--btx-spacing-xl, 3rem);
		align-items: flex-start;
	}

	/* Split layout: two-column grid driven by --btxc-hero-cols */

	.btxc-hero__inner--split {
		display: grid;
		grid-template-columns: var(--btxc-hero-cols, 1fr 1fr);
		align-items: center;
		gap: var(--btx-spacing-xxl, 4rem);
	}

	/* ── Content column ────────────────────────────────────────────────── */

	/*
	 * No width of its own: `__inner` above is what caps and centres the content,
	 * and in the split layout this is a grid track. Capping it here as well only
	 * looks like the thing keeping the content off the screen edge.
	 */
	.btxc-hero__content {
		display: flex;
		flex-direction: column;
		gap: var(--btx-spacing-lg, 2rem);
	}

	/* ── Eyebrow ───────────────────────────────────────────────────────── */

	.btxc-hero__eyebrow {
		margin: 0;
		/* Default colour; overridden by inline style when a custom value is set. */
		color: var(--btx-color-primary-1, #1a2744);
		font-family: var(--btx-font-body-family, system-ui, sans-serif);
		font-size: var(--btx-font-body-xs, 0.8rem);
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	/* Dark scheme: lighten the eyebrow default */
	.btxc-hero--dark .btxc-hero__eyebrow {
		color: var(--btx-color-primary-1-light-20, #24355d);
	}

	/* ── Heading ───────────────────────────────────────────────────────── */

	.btxc-hero__heading {
		margin: 0;
		font-family: var(--btx-font-heading-family, georgia, serif);
		font-size: var(--btx-font-heading-xxl, 3rem);
		line-height: var(--btx-line-height-heading, 1.1);
		color: var(--btx-color-primary-1, #1a2744);
	}

	.btxc-hero--dark .btxc-hero__heading {
		color: var(--btx-color-text-bg-1, #f6f3ee);
	}

	/* ── Heading highlight span ────────────────────────────────────────── */

	.btxc-hero__heading-span {
		/* Inherits colour from the heading unless overridden. */
		display: inline;
	}

	/* Underline style: decorative, accent-coloured underline */
	.btxc-hero__heading-span--underline {
		text-decoration: underline;
		text-decoration-color: var(--btx-color-primary-1, #1a2744);
		text-underline-offset: 0.12em;
		text-decoration-thickness: 0.06em;
	}

	.btxc-hero--dark .btxc-hero__heading-span--underline {
		text-decoration-color: var(--btx-color-primary-1-light-20, #24355d);
	}

	/* ── Sub-text ──────────────────────────────────────────────────────── */

	.btxc-hero__subtext {
		margin: 0;
		max-width: 54ch;
		font-family: var(--btx-font-body-family, system-ui, sans-serif);
		font-size: var(--btx-font-body-lg, 1.125rem);
		line-height: var(--btx-line-height-body, 1.6);
		color: var(--btx-color-primary-1-light-40, #2e4578);
	}

	.btxc-hero--dark .btxc-hero__subtext {
		color: var(--btx-color-text-bg-1-dark-20, rgba(246, 243, 238, 0.7));
	}

	/* ── CTA group ─────────────────────────────────────────────────────── */

	.btxc-hero__ctas {
		display: flex;
		flex-wrap: wrap;
		gap: var(--btx-spacing-m, 1rem);
		align-items: center;
	}

	/* ── Hero CTAs (base) ──────────────────────────────────────────────── */

	.btxc-hero__cta {
		/*
		 * Set through --bertex-btn-*, then consumed below. These buttons carry
		 * `wp-element-button`, and WordPress prints an unlayered rule from
		 * theme.json that owns background, border, padding and typography on
		 * that class — declaring them directly here would lose to it silently.
		 * Consuming them as well is what keeps the hero right in the admin
		 * gallery, where that unlayered rule is not present.
		 * See cta-button/style.css for the full note.
		 */
		--bertex-btn-bg: transparent;
		--bertex-btn-radius: var(--btx-border-radius-m, 0.375rem);
		--bertex-btn-border-width: 2px;
		--bertex-btn-border-color: transparent;
		--bertex-btn-family: var(--btx-font-body-family, system-ui, sans-serif);
		--bertex-btn-size: var(--btx-font-body-m, 1rem);
		--bertex-btn-weight: 700;
		--bertex-btn-leading: 1.2;
		--bertex-btn-padding-block: var(--btx-button-spacing, 0.55rem);
		--bertex-btn-padding-inline: calc(var(--btx-button-spacing, 0.55rem) * 2.5);

		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--btx-spacing-xs, 0.45rem);

		box-sizing: border-box;
		padding: var(--bertex-btn-padding-block) var(--bertex-btn-padding-inline);
		border: var(--bertex-btn-border-width) solid var(--bertex-btn-border-color);
		border-radius: var(--bertex-btn-radius);

		background-color: var(--bertex-btn-bg);
		color: var(--bertex-btn-text);

		font-family: var(--bertex-btn-family);
		font-size: var(--bertex-btn-size);
		font-weight: var(--bertex-btn-weight);
		line-height: var(--bertex-btn-leading);
		text-align: center;
		text-decoration: none;
		cursor: pointer;

		transition:
			background-color 0.15s ease,
			border-color 0.15s ease,
			color 0.15s ease;
	}

	.btxc-hero__cta:hover,
	.btxc-hero__cta:focus-visible {
		background-color: var(--bertex-btn-bg-hover);
		color: var(--bertex-btn-text);
	}

	.btxc-hero__cta:focus-visible {
		outline: 2px solid var(--btx-color-primary-1, #1a2744);
		outline-offset: 3px;
	}

	/* ── Primary CTA ───────────────────────────────────────────────────── */

	.btxc-hero__cta--primary {
		--bertex-btn-bg: var(--btx-color-primary-1, #1a2744);
		--bertex-btn-bg-hover: var(--btx-color-primary-1-dark-20, #08173b);
		--bertex-btn-text: var(--btx-color-text-bg-1, #f6f3ee);
	}

	/* Override: green primary on dark hero (matches the screenshot) */
	.btxc-hero--dark .btxc-hero__cta--primary {
		--bertex-btn-bg: var(--btx-color-secondary-1, #00c262);
		--bertex-btn-bg-hover: var(--btx-color-secondary-1-dark-20, #009e50);
		--bertex-btn-text: #000;
	}

	/* ── Ghost CTA ─────────────────────────────────────────────────────── */

	.btxc-hero__cta--ghost {
		--bertex-btn-bg: transparent;
		--bertex-btn-bg-hover: var(--btx-color-primary-1, #1a2744);
		--bertex-btn-border-color: var(--btx-color-primary-1, #1a2744);
		--bertex-btn-text: var(--btx-color-primary-1, #1a2744);
	}

	.btxc-hero__cta--ghost:hover,
	.btxc-hero__cta--ghost:focus-visible {
		--bertex-btn-text: var(--btx-color-text-bg-1, #f6f3ee);
	}

	/* Ghost on dark background: white border */
	.btxc-hero--dark .btxc-hero__cta--ghost {
		--bertex-btn-bg-hover: var(--btx-color-text-bg-1, #f6f3ee);
		--bertex-btn-border-color: var(--btx-color-text-bg-1, #f6f3ee);
		--bertex-btn-text: var(--btx-color-text-bg-1, #f6f3ee);
	}

	.btxc-hero--dark .btxc-hero__cta--ghost:hover,
	.btxc-hero--dark .btxc-hero__cta--ghost:focus-visible {
		--bertex-btn-text: var(--btx-color-primary-1, #1a2744);
	}

	/* ── CTA arrow ─────────────────────────────────────────────────────── */

	.btxc-hero__cta-arrow {
		flex: none;
		transition: transform 0.15s ease;
	}

	.btxc-hero__cta:hover .btxc-hero__cta-arrow {
		transform: translateX(0.15em);
	}

	/* ── Screen-reader only ────────────────────────────────────────────── */

	.btxc-hero__sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	/* ── Image panel ───────────────────────────────────────────────────── */

	.btxc-hero__media {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/*
	 * A component in the panel gets the whole track instead of being centred at
	 * its content width. The flex centring above is right for an image, which
	 * has an intrinsic size worth respecting; a component sizes itself to what
	 * it is given, and centring one leaves it shrunk to its minimum with air on
	 * both sides. `min-width: 0` because a grid track's default `auto` minimum
	 * refuses to shrink below the content's min-content width, which is how a
	 * wide panel pushes the text column narrow instead of narrowing itself.
	 */
	.btxc-hero__media--component {
		display: block;
		min-width: 0;
	}

	.btxc-hero__image {
		display: block;
		width: 100%;
		height: auto;
		max-width: 100%;
		border-radius: var(--btx-border-radius-lg, 0.5rem);
	}

	/* ── Responsive ────────────────────────────────────────────────────── */

	@media (max-width: 860px) {
		.btxc-hero__inner--split {
			/* Stack columns; image moves below the content. */
			grid-template-columns: 1fr;
		}

		.btxc-hero__heading {
			font-size: var(--btx-font-heading-xl, 2.25rem);
		}
	}

	@media (max-width: 480px) {
		.btxc-hero__inner {
			padding-block-start: calc(
				var(--btx-spacing-xl, 3rem) + var(--btxc-hero-offset-top, 0px)
			);
			padding-block-end: var(--btx-spacing-xl, 3rem);
		}

		.btxc-hero__heading {
			font-size: var(--btx-font-heading-lg, 1.75rem);
		}

		.btxc-hero__ctas {
			flex-direction: column;
			align-items: stretch;
		}

		.btxc-hero__cta {
			justify-content: center;
		}
	}
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	@layer bertex-components {
		.btxc-hero__cta,
		.btxc-hero__cta-arrow {
			transition-duration: 0.01ms;
		}

		.btxc-hero__cta:hover .btxc-hero__cta-arrow {
			transform: none;
		}

		/* Pause background video for users who prefer reduced motion. */
		.btxc-hero__video {
			animation-play-state: paused;
		}
	}
}