/* =============================================================================
   HERO — Arnout Rebel Photography
   .ar-hero-*  gebruikt in hero-home.php en about-hero.php
   ============================================================================= */

/* ── Homepage hero ── */
.ar-hero {
	position: relative;
	min-height: 480px;
	display: flex;
	align-items: flex-end;
}

.ar-hero .wp-block-cover__inner-container {
	position: absolute !important;
	top: 0;
	left: 50% !important;
	right: auto !important;
	bottom: 0;
	transform: translateX(-50%);
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-start !important;
	align-items: flex-start !important;
	width: 100% !important;
	max-width: 1200px !important;
	margin: 0 !important;
	padding: 1.5rem 3rem 3rem !important;
}

/* Override WordPress is-layout-constrained: verwijder auto-centering van alle kinderen */
.ar-hero .wp-block-cover__inner-container.is-layout-constrained > *,
.ar-hero .wp-block-cover__inner-container > * {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Badge specifiek naar rechts */
.ar-hero .wp-block-cover__inner-container > .ar-hero__location {
	margin-left: auto !important;
	margin-right: 0 !important;
}

/* Tekst links uitlijnen */
.ar-hero .wp-block-cover__inner-container .wp-block-paragraph,
.ar-hero .wp-block-cover__inner-container .wp-block-heading {
	text-align: left !important;
	width: 100%;
}

.ar-hero__eyebrow {
	font-size: 0.5625rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
	margin-bottom: 0.75rem;
}

.ar-hero__tagline {
	font-style: italic;
	font-weight: 300;
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	color: #fff;
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin-bottom: 1.25rem;
	max-width: 640px;
}

.ar-hero__cta a {
	font-size: 0.5625rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
	border-bottom: 0.5px solid rgba(255, 255, 255, 0.4);
	padding-bottom: 2px;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.ar-hero__cta a:hover {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.8);
}

.ar-hero__location {
	display: inline-block !important;
	align-self: flex-end !important;
	margin-left: auto !important;
	margin-bottom: auto !important;
	font-size: 0.5625rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
	background: rgba(0, 0, 0, 0.45);
	padding: 5px 12px;
	border-radius: 100px;
	line-height: 1;
}

/* ── Over mij hero ── */
.ar-about-hero {
	position: relative;
	min-height: 70vh;
	display: flex;
	align-items: flex-end;
	margin-top: 64px;
}

.ar-about-hero .wp-block-cover__inner-container {
	width: 100%;
	padding: 0 3rem 3.25rem;
	max-width: 1100px;
	margin: 0 auto;
}

.ar-about-hero__label {
	font-size: 0.6875rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
	margin-bottom: 0.875rem;
}

.ar-about-hero__title {
	font-size: clamp(1.5rem, 4vw, 2.5rem);
	font-weight: 300;
	font-style: italic;
	color: #fff;
	line-height: 1.2;
	letter-spacing: -0.01em;
	max-width: 680px;
	margin-bottom: 1rem;
}

.ar-about-hero__sub {
	font-size: 0.875rem;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.55);
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media (max-width: 767px) {
	.ar-hero .wp-block-cover__inner-container,
	.ar-about-hero .wp-block-cover__inner-container {
		padding: 0 1.25rem 2.5rem;
	}

	.ar-about-hero {
		min-height: 50vh;
	}
}