/* ==========================================================================
   Hero Section — styles for the "Home hero" block (acf/mro-hero)
   ========================================================================== */
.mro-hero {
	position: relative;
	isolation: isolate;
	overflow-x: clip;
	padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--100);
	background: var(--wp--preset--color--base);
}

.mro-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: var(--wp--preset--spacing--80);
	align-items: center;
	width: 100%;
	max-width: var(--wp--custom--container--base);
	margin-inline: auto;
	padding-inline: var(--wp--custom--gutter);
}

.mro-hero__place {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--muted);
	font-weight: var(--wp--custom--weight--medium);
}
.mro-hero__place .mro-icon { flex: none; color: var(--wp--preset--color--accent-strong); }

.mro-hero .mro-hero__title {
	margin-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	max-width: 11ch;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xxxl);
	font-weight: var(--wp--custom--weight--regular);
	line-height: var(--wp--custom--leading--tight);
	letter-spacing: var(--wp--custom--tracking--display);
	text-transform: lowercase;
	color: var(--wp--preset--color--contrast);
	text-wrap: balance;
}

.mro-hero__lead {
	max-width: 48ch;
	font-size: var(--wp--preset--font-size--md);
	color: var(--wp--preset--color--muted);
}

.mro-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--60);
}

.mro-hero__note {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--50);
	max-width: var(--wp--custom--measure--narrow);
	font-size: var(--wp--preset--font-size--sm);
}
.mro-hero__note .mro-icon { flex: none; margin-top: 0.2em; color: var(--wp--preset--color--accent); }

/* ---------- Photos, wash and badge ---------- */
.mro-hero__visual {
	position: relative;
	isolation: isolate;
	padding-bottom: var(--wp--preset--spacing--60);
}

.mro-hero__wash {
	position: absolute;
	z-index: -1;
	top: -12%;
	right: -18%;
	width: 95%;
	aspect-ratio: 600 / 520;
	color: var(--wp--preset--color--mint);
	animation: mro-drift var(--wp--custom--duration--drift) var(--wp--custom--ease--sway) infinite alternate;
}
.mro-hero__wash svg { width: 100%; height: 100%; overflow: visible; }

.mro-hero .mro-hero__arch {
	width: 78%;
	margin: 0 0 0 auto;
	aspect-ratio: 4 / 5;
	border-radius: var(--wp--custom--radius--arch);
	overflow: hidden;
	box-shadow: var(--wp--preset--shadow--lift);
}
.mro-hero .mro-hero__arch img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 40% center;
}

.mro-hero .mro-hero__round {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 42%;
	margin: 0;
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	border: 8px solid var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--soft);
}
.mro-hero .mro-hero__round img { width: 100%; height: 100%; object-fit: cover; }

.mro-hero__badge {
	position: absolute;
	top: 4%;
	left: 2%;
	width: 8.5rem;
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--wp--preset--color--mint);
	box-shadow: var(--wp--preset--shadow--soft);
}
.mro-hero .mro-hero__badge-ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	animation: mro-spin var(--wp--custom--duration--spin) linear infinite;
}
.mro-hero__badge-ring text {
	font-family: var(--wp--preset--font-family--body);
	font-size: 9.5px;
	font-weight: var(--wp--custom--weight--bold);
	fill: var(--wp--preset--color--contrast);
}
.mro-hero__badge-core {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xxl);
	line-height: 1;
	color: var(--wp--preset--color--accent-stronger);
}

/* hand-drawn Sigiriya Rock and palms, bottom-left */
.mro-hero .mro-hero__sketch {
	position: absolute;
	left: max(var(--wp--custom--gutter), calc((100% - var(--wp--custom--container--base)) / 2 + var(--wp--custom--gutter)));
	bottom: var(--wp--preset--spacing--20);
	width: clamp(15rem, 30vw, 27rem);
	height: auto;
	z-index: -1;
}

/* the one orchestrated moment: copy settles in, the rock draws itself
   (front end only, so the editor preview doesn't replay it on every edit) */
body:not(.editor-styles-wrapper) .mro-hero__copy > * {
	animation: mro-settle var(--wp--custom--duration--slow) var(--wp--custom--ease--gentle) both;
}
body:not(.editor-styles-wrapper) .mro-hero__copy > :nth-child(2) { animation-delay: 120ms; }
body:not(.editor-styles-wrapper) .mro-hero__copy > :nth-child(3) { animation-delay: 240ms; }
body:not(.editor-styles-wrapper) .mro-hero__copy > :nth-child(4) { animation-delay: 360ms; }
body:not(.editor-styles-wrapper) .mro-hero__copy > :nth-child(5) { animation-delay: 480ms; }
body:not(.editor-styles-wrapper) .mro-hero__visual {
	animation: mro-settle calc(var(--wp--custom--duration--slow) * 1.4) var(--wp--custom--ease--gentle) 200ms both;
}
body:not(.editor-styles-wrapper) .mro-hero__sketch .mro-sketch-line {
	stroke-dasharray: 1400;
	stroke-dashoffset: 1400;
	animation: mro-draw 3.2s var(--wp--custom--ease--gentle) 600ms forwards;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.mro-hero__inner { gap: var(--wp--preset--spacing--60); }
}

@media (max-width: 860px) {
	.mro-hero { padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--90); }
	.mro-hero__inner { grid-template-columns: minmax(0, 1fr); }
	.mro-hero__visual { max-width: 30rem; margin-inline: auto; width: 100%; }
	.mro-hero__badge { width: 6.5rem; }
	.mro-hero .mro-hero__sketch { width: 16rem; opacity: 0.6; }
}

@media (max-width: 640px) {
	.mro-hero__actions .mro-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	body:not(.editor-styles-wrapper) .mro-hero__sketch .mro-sketch-line { stroke-dashoffset: 0; }
}