/*!
 * @be-partner-labs/ds v1.8.0 — components/hero
 * © 2026 Be Partner Labs. MIT License.
 *
 * CDN:  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@be-partner-labs/ds@1.8.0/dist/components/hero.min.css">
 * npm:  @import "@be-partner-labs/ds/components/hero";
 * Docs: https://ds.bepartnerlabs.com/components/hero/
 */
@layer bp-tokens, bp-reset, bp-grid, bp-components, bp-utilities;

@layer bp-components {
	/**
	 * .bp-hero
	 * Page hero section with entrance animation via @starting-style.
	 * Public API:
	 *   --hero-background          Background color or gradient
	 *   --hero-min-height  Minimum section height
	 *   --hero-align       Content alignment: center | left | right
	 */
	.bp-hero {
		--_background: var(--hero-background, var(--bp-color-bg));
		--_min-height: var(--hero-min-height, 80dvh);
		--_align: var(--hero-align, center);

		display: flex;
		align-items: center;
		min-height: var(--_min-height);
		background: var(--_background);
		padding-block: var(--bp-space-20);
	}

	.bp-hero__inner {
		width: 100%;
		max-width: 64rem;
		margin-inline: auto;
		padding-inline: var(--bp-space-6);
		text-align: var(--_align);
		display: flex;
		flex-direction: column;
		gap: var(--bp-space-6);

		/* Entrance animation */
		transition:
			opacity var(--bp-duration-slow) var(--bp-ease),
			transform var(--bp-duration-slow) var(--bp-ease);
	}

	@starting-style {
		.bp-hero__inner {
			opacity: 0;
			transform: translateY(1.5rem);
		}
	}

	.bp-hero__eyebrow {
		display: inline-flex;
		align-items: center;
		gap: var(--bp-space-2);
		font-size: var(--bp-text-sm);
		font-weight: var(--bp-font-weight-semibold);
		color: var(--bp-primary);
		text-transform: uppercase;
		letter-spacing: 0.08em;
	}

	.bp-hero__headline {
		font-size: var(--bp-text-5xl);
		font-weight: var(--bp-font-weight-bold);
		line-height: var(--bp-leading-tight);
		color: var(--bp-color-text);
		letter-spacing: -0.02em;
	}

	.bp-hero__subheading {
		font-size: var(--bp-text-xl);
		color: var(--bp-color-text-muted);
		line-height: var(--bp-leading-loose);
		max-width: 48rem;
	}

	/* cqi fluid type — only fires when inside a container context */
	@container (inline-size > 0) {
		.bp-hero__headline {
			font-size: clamp(var(--bp-text-2xl), 8cqi, var(--bp-text-5xl));
		}
		.bp-hero__subheading {
			font-size: clamp(var(--bp-text-base), 3cqi, var(--bp-text-xl));
		}
	}

	.bp-hero--center .bp-hero__subheading {
		margin-inline: auto;
	}

	.bp-hero__actions {
		display: flex;
		flex-wrap: wrap;
		gap: var(--bp-space-4);
		align-items: center;
		justify-content: var(--_align);
	}

	/* --- Variant: left-aligned --- */
	.bp-hero--left {
		--hero-align: left;
	}

	/* --- Variant: with-image --- */
	.bp-hero--with-image .bp-hero__inner {
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: center;
		text-align: start;
		max-width: 80rem;
	}

	.bp-hero--with-image .bp-hero__content {
		display: flex;
		flex-direction: column;
		gap: var(--bp-space-6);
	}

	.bp-hero--with-image .bp-hero__image {
		border-radius: var(--bp-radius-xl);
		overflow: hidden;
	}

	.bp-hero--with-image .bp-hero__actions {
		justify-content: flex-start;
	}

	@media (max-width: 48rem) {
		.bp-hero--with-image .bp-hero__inner {
			grid-template-columns: 1fr;
		}
	}
}