/* ==========================================================================
   OIB Solutions Hero — dark banner-style hero with optional image bg
   ========================================================================== */

.oib-shero {
	--oib-shero-pt: 120px;
	--oib-shero-pb: 120px;

	position: relative;
	padding: var(--oib-shero-pt) 24px var(--oib-shero-pb);
	background-color: #0b1424;
	font-family: var(--oib-font, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
	-webkit-font-smoothing: antialiased;
	overflow: hidden;
	isolation: isolate;
}

/* Optional background image layer (set inline via style="background-image: ...") */
.oib-shero__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 0;
	pointer-events: none;
}

/* Dark overlay sits between bg image and content — its opacity is editable */
.oib-shero__overlay {
	position: absolute;
	inset: 0;
	background-color: #0b1424;
	opacity: 0.8;
	z-index: 1;
	pointer-events: none;
}

/* When there's no bg image, the overlay is effectively just the section color */
.oib-shero:not(:has(.oib-shero__bg)) .oib-shero__overlay {
	opacity: 1;
}

/* Inner content — always above bg + overlay */
.oib-shero__inner {
	position: relative;
	z-index: 2;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.oib-shero__inner--narrow { max-width: 880px;  }
.oib-shero__inner--wide   { max-width: 1024px; }
.oib-shero__inner--full   { max-width: calc(100% - 32px); }

.oib-shero__inner.is-left   { align-items: flex-start; text-align: left;   }
.oib-shero__inner.is-center { align-items: center;     text-align: center; }

/* ==========================================================================
   Eyebrow
   ========================================================================== */

.oib-shero__eyebrow {
	margin: 0 0 22px;
	color: #7E5D74;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.4;
}

/* ==========================================================================
   Heading + subtitle
   ========================================================================== */

.oib-shero__heading {
	margin: 0 0 24px;
	color: #ffffff;
	font-size: clamp(34px, 5.6vw, 64px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.025em;
}

.oib-shero__subtitle {
	margin: 0 0 40px;
	color: #94a3b8;
	font-size: clamp(15px, 1.2vw, 18px);
	line-height: 1.6;
	max-width: 720px;
}

.oib-shero__inner.is-left .oib-shero__subtitle { max-width: 720px; }

/* ==========================================================================
   Button
   ========================================================================== */

.oib-shero__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 18px 32px;
	border-radius: 12px;
	background: #7E5D74;
	color: #ffffff;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.2),
		0 12px 28px -12px rgba(126, 93, 116, 0.55);
}

.oib-shero__btn:hover,
.oib-shero__btn:focus-visible {
	background: #6A4960;
	transform: translateY(-2px);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.25),
		0 18px 36px -14px rgba(126, 93, 116, 0.7);
	outline: none;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
	.oib-shero {
		padding: clamp(72px, 14vw, 100px) 20px clamp(72px, 14vw, 100px);
	}

	.oib-shero__eyebrow {
		font-size: 12px;
		margin-bottom: 18px;
	}

	.oib-shero__heading {
		font-size: clamp(28px, 7vw, 40px);
		margin-bottom: 18px;
	}

	.oib-shero__subtitle {
		font-size: 15px;
		margin-bottom: 32px;
	}

	.oib-shero__btn {
		padding: 15px 26px;
		font-size: 14.5px;
	}
}

@media (max-width: 480px) {
	.oib-shero__btn {
		width: 100%;
		justify-content: center;
	}
}

/* ==========================================================================
   A11y / motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.oib-shero__btn { transition: none !important; }
	.oib-shero__btn:hover { transform: none; }
}