/* =====================================================================
   Phartenaas — hero.css
   Framed-editorial hero: foto-in-mat, tekst boven + onder
   Geen overlay, geen gradient, geen split.
   ===================================================================== */

.hero--framed {
	background: var(--c-bg);
	padding: var(--s-96) 0 var(--s-64);
	text-align: center;
	min-height: 75vh;
	display: flex;
	align-items: center;
}

.hero--framed--sm {
	min-height: 45vh;
	padding: var(--s-80) 0 var(--s-48);
}

.hero--framed .hero__container {
	width: 100%;
	max-width: var(--max-w);
	margin: 0 auto;
	padding-left: var(--s-24);
	padding-right: var(--s-24);
}

.hero--framed .hero__kicker {
	font-family: var(--f-body);
	font-weight: 500;
	font-size: 0.75rem;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--c-accent-sec);
	margin-bottom: var(--s-24);
	display: block;
}

.hero--framed h1 {
	font-family: var(--f-heading);
	font-weight: 600;
	font-size: clamp(2.25rem, 5vw, 3.75rem);
	line-height: 1.1;
	margin-bottom: var(--s-40);
	color: var(--c-white);
}

.hero--framed h1 em {
	font-style: italic;
	font-weight: 500;
}

.hero--framed .hero__frame {
	display: block;
	padding: var(--s-40);
	background: var(--c-surface);
	border-radius: var(--r-lg);
	margin: 0 auto var(--s-40);
	max-width: 900px;
}

.hero--framed .hero__frame img {
	width: 100%;
	height: auto;
	max-height: 480px;
	object-fit: cover;
	border-radius: var(--r-md);
	display: block;
}

.hero--framed--sm .hero__frame img {
	max-height: 320px;
}

.hero--framed .hero__subtitle {
	font-size: 1.125rem;
	line-height: 1.7;
	color: var(--c-text-dim);
	max-width: 640px;
	margin: 0 auto var(--s-32);
}

.hero--framed .hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-24);
	justify-content: center;
	align-items: center;
	margin-bottom: var(--s-32);
}

/* Prevent generic a.hero styles from affecting CTA buttons */
.hero a:not(.btn-primary):not(.btn-secondary):not(.btn-tertiary):not(.inline-arrow) {
	color: var(--c-text);
}

.hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-16);
	justify-content: center;
	margin-top: var(--s-16);
}

@media (max-width: 767px) {
	.hero--framed {
		padding: var(--s-80) 0 var(--s-48);
	}
	.hero--framed .hero__frame {
		padding: var(--s-24);
	}
	.hero--framed .hero__frame img {
		max-height: 320px;
	}
	.hero--framed h1 {
		margin-bottom: var(--s-32);
	}
}

@media (min-width: 768px) {
	.hero--framed .hero__frame {
		padding: var(--s-56);
	}
}