/* =========================================================================
   StarFroid — hero (brief §5: single lightweight banner, no heavy slider)
   ========================================================================= */

.sf-hero {
	background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-700) 100%);
	color: #fff;
	overflow: hidden;
}
.sf-hero__inner {
	display: grid;
	gap: var(--space-5);
	align-items: center;
	padding-block: var(--space-7);
}
.sf-hero__title {
	color: #fff;
	font-size: var(--fs-500);
	margin: 0 0 var(--space-3);
}
.sf-hero__title .sf-hl { color: var(--c-fresh); }
.sf-hero__sub {
	color: rgba(255, 255, 255, .85);
	font-size: var(--fs-300);
	max-width: 48ch;
	margin: 0 0 var(--space-5);
}
.sf-hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.sf-hero__badge { margin-block-start: var(--space-5); }
.sf-hero__badge .sf-cod-badge {
	background: rgba(255, 255, 255, .12);
	color: #fff;
}

.sf-hero__media {
	border-radius: var(--radius-card);
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: rgba(255, 255, 255, .06);
}
.sf-hero__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}

@media (min-width: 768px) {
	.sf-hero__title { font-size: var(--fs-700); }
	.sf-hero__inner {
		grid-template-columns: 1.1fr 0.9fr;
		gap: var(--space-7);
		padding-block: var(--space-8);
	}
}

/* Full-bleed hero (see base.css .home .ast-container): the navy background now
   spans edge-to-edge; give the content a comfortable wide cap. */
.sf-hero > .sf-container { max-width: 1760px; }