/**
 * Block: Hero Header — Styles
 *
 * Front-end and editor styles for the acf/hero-header block.
 *
 * @block   acf/hero-header
 * @package SociosComponents
 */

/* ─── Base ────────────────────────────────────────────────────────────────── */

.sc-hero {
	display: flex;
	justify-content: space-between;
	gap: 32px;
	padding: 32px;
	border-radius: 20px;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	min-height: 80vh;
	max-height: 80vh;
	position: relative;
	overflow: hidden;
}

/* ─── Text color modifiers ───────────────────────────────────────────────── */

.sc-hero--text-white {
	color: var(--light-neutral-0);
}

.sc-hero--text-white .sc-hero__eyebrow,
.sc-hero--text-white .sc-hero__title,
.sc-hero--text-white .sc-hero__subtitle {
	color: var(--light-neutral-0);
}

.sc-hero--text-black {
	color: var(--dark-neutral-500);
}

.sc-hero--text-black .sc-hero__eyebrow,
.sc-hero--text-black .sc-hero__title,
.sc-hero--text-black .sc-hero__subtitle {
	color: var(--dark-neutral-500);
}

/* ─── Text alignment ──────────────────────────────────────────────────────── */

.sc-hero--align-left .sc-hero__column-1 {
	text-align: left;
	align-items: flex-start;
}

.sc-hero--align-center .sc-hero__column-1 {
	text-align: center;
	align-items: center;
}

.sc-hero--align-center .sc-hero__ctas {
	justify-content: center;
}

/* ─── Column 1 (content) ──────────────────────────────────────────────────── */

.sc-hero__column-1 {
	flex: 1;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
	position: relative;
	z-index: 2;
}

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

.sc-hero__eyebrow {
	font-family: var(--font-family-display);
	font-size: 18px;
	font-weight: 500;
	line-height: 120%;
	text-transform: uppercase;
}

.sc-hero .sc-hero__eyebrow--black {
	color: var(--dark-neutral-500);
}

.sc-hero .sc-hero__eyebrow--white {
	color: var(--light-neutral-0);
}

.sc-hero .sc-hero__eyebrow--blue {
	color: var(--blue-500);
}

.sc-hero .sc-hero__eyebrow--orange {
	color: var(--orange-500);
}

/* ─── Headline ────────────────────────────────────────────────────────────── */

/* Mirrors the theme h1 (style-global.css) so the hero headline keeps the same
 * scale whatever heading level the editor picks. */
.sc-hero__title {
	font-family: var(--font-family-display);
	font-weight: 600;
	font-size: var(--font-size-60);
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: uppercase;
	margin: 0;
}

/* ─── Subheading / Body ───────────────────────────────────────────────────── */

.sc-hero__subtitle {
	margin-top: 8px;
}

/* Drop the shared utility's `margin: 0 auto` so the subtitle follows the hero's
 * own text alignment instead of being centered. */
.sc-hero .sc-block-subtitle {
	margin: 0;
}

/* ─── CTAs ────────────────────────────────────────────────────────────────── */

.sc-hero__ctas {
	display: flex;
	gap: 16px;
	margin-top: 24px;
}

.sc-hero__ctas .sc-hero__primary-cta,
.sc-hero__ctas .sc-hero__secondary-cta {
	display: flex;
	padding: 16px 40px;
	justify-content: center;
	align-items: center;
	gap: 8px;
	border-radius: 100px;
	border: 1.5px solid transparent;
	text-align: center;
	font-family: var(--font-family-display);
	text-decoration: none !important;
	font-size: 18px;
	font-weight: 500;
	line-height: 100%;
	letter-spacing: 0.5px;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

/* Primary CTA — Blue */
.sc-hero__primary-cta--blue {
	background: var(--blue-500);
	color: var(--light-neutral-0);
	border-color: var(--blue-500) !important;
}

.sc-hero__primary-cta--blue:hover {
	color: var(--light-neutral-0);
	opacity: 0.9;
}

/* Primary CTA — Orange */
.sc-hero__primary-cta--orange {
	background: var(--orange-500);
	color: var(--light-neutral-0);
	border-color: var(--orange-500) !important;
}

.sc-hero__primary-cta--orange:hover {
	color: var(--light-neutral-0);
	opacity: 0.9;
}

/* Secondary CTA */
.sc-hero__secondary-cta {
	background: var(--light-neutral-0);
	border-color: var(--blue-500) !important;
	color: var(--blue-500);
}

.sc-hero__secondary-cta:hover {
	color: var(--blue-500);
	opacity: 0.9;
}

/* ─── Column 2 (side media) ───────────────────────────────────────────────── */

.sc-hero__column-2 {
	flex: 1;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	z-index: 2;
}

.sc-hero__media {
	width: 100%;
	height: 100%;
}

.sc-hero__media .sc-hero__media-asset {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: 16px;
}

.sc-hero__media video.sc-hero__media-asset {
	object-fit: contain;
}

/* ─── Object-fit contain modifier ─────────────────────────────────────────── */

.sc-hero--fit-contain .sc-hero__media-asset {
	object-fit: contain;
}

/* ─── Full-width media below (header-above) ───────────────────────────────── */

.sc-hero__media-below {
	width: 100%;
}

.sc-hero__media-below .sc-hero__media-asset {
	width: 100%;
	height: auto;
	object-fit: cover;
	object-position: center;
	border-radius: 16px;
}

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

.sc-hero__bg-video,
.sc-hero__bg-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	z-index: 0;
	border-radius: 20px;
}

/* ─── Responsive media visibility ─────────────────────────────────────────── */

.sc-hero__mobile-only {
	display: none;
}

/* ─── Placeholder (editor only) ───────────────────────────────────────────── */

.sc-hero__placeholder {
	position: relative;
	z-index: 1;
	padding: 48px;
	text-align: center;
	font-style: italic;
	opacity: 0.7;
}

/* ═════════════════════════════════════════════════════════════════════════════
 * Template: Default
 * ═════════════════════════════════════════════════════════════════════════════ */

/* Side media on the left → reversed columns. */
.sc-hero--default.sc-hero--media-left {
	flex-direction: row-reverse;
}

/* Background media overlay — color driven by CSS custom property. */
.sc-hero--default.sc-hero--background-media::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--sc-hero-overlay-color, rgba(0, 0, 0, 0.45));
	border-radius: 20px;
	pointer-events: none;
	z-index: 1;
}

/* ═════════════════════════════════════════════════════════════════════════════
 * Template: Header above image
 * ═════════════════════════════════════════════════════════════════════════════ */

.sc-hero--header-above {
	flex-direction: column;
	background-color: transparent;
	min-height: auto;
	max-height: none;
	padding: 0px;
}

.sc-hero--header-above .sc-hero__column-1 {
	text-align: center;
	align-items: center;
}

.sc-hero--header-above .sc-hero__ctas {
	justify-content: center;
}

/* ═════════════════════════════════════════════════════════════════════════════
 * Responsive — max-width: 1024px
 * ═════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
	.sc-hero {
		flex-direction: column;
		gap: 16px;
		max-height: inherit;
		min-height: 50vh;
	}

	/* Side media left: keep reversed stacking vertically. */
	.sc-hero--default.sc-hero--media-left {
		flex-direction: column-reverse;
	}

	.sc-hero.sc-hero--header-above {
		padding: 0;
	}

	.sc-hero__subtitle {
		font-size: 18px;
	}

	.sc-hero--align-center .sc-hero__ctas,
	.sc-hero--header-above .sc-hero__ctas {
		align-items: center;
	}

	/* Swap desktop / mobile media. */
	.sc-hero__desktop-only {
		display: none;
	}

	.sc-hero__mobile-only {
		display: block;
	}
}

/* ═════════════════════════════════════════════════════════════════════════════
 * Responsive — max-width: 767px (matches the theme h1 breakpoint)
 * ═════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
	.sc-hero__title {
		font-size: var(--font-size-40);
	}
}

@media (max-width: 768px) {
	.sc-hero__ctas {
		flex-direction: column;
		align-items: start;
		width: 100%;
	}

	.sc-hero__primary-cta,
	.sc-hero__secondary-cta {
		width: 100%;
	}
}