/*
 * Home hero — server-rendered, bilingual (RO exact / EN clean), notranslate.
 * Matches the client reference (home.jpeg). Self-contained; uses theme tokens
 * from theme.css (:root). Namespace: .achero
 */

/*
 * Flat page background on the home page. The theme's body background is a
 * radial+linear gradient; once the hero and Elementor sections are transparent
 * it shows through as several visible tonal bands. A single flat tone keeps the
 * whole page uniform (this stylesheet only loads on the front page).
 */
body {
	background: var(--bg) !important;
}

.achero {
	position: relative;
	background: transparent;
	overflow: hidden;
	padding: clamp(32px, 5vw, 72px) 0 clamp(48px, 5vw, 84px);
}

/*
 * The hero is rendered as a full-width PHP section above the Elementor home
 * container. Let the page's body gradient flow continuously through both so
 * there is no color seam where the hero meets the first Elementor section,
 * and give the first cards room to breathe.
 */
.elementor-7 .ac-native-home,
.elementor-7 .ac-native-frame {
	background: transparent !important;
}

/* stats ("years of experience") sit before the Soul/Mind/Body pillars (DOM order) */
.elementor-7 .ac-native-stats > .e-con-inner {
	padding-top: clamp(12px, 3vw, 44px) !important;
}

.elementor-7 .ac-native-pillars > .e-con-inner {
	padding-top: clamp(12px, 2.4vw, 34px) !important;
}

/* align the green "explore" links to the same bottom line across the 3 cards */
.elementor-7 .ac-native-pillar-content {
	align-self: stretch !important;
	height: 100% !important;
}

.elementor-7 .ac-native-pillar-content > .e-con-inner {
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
}

.elementor-7 .ac-native-pillar-content .elementor-widget-button {
	margin-top: auto !important;
}

/* soft warm glow behind the photo — kept well inside the section so it never
   clips against the section's bottom edge (which read as a hard line) */
.achero::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 62%;
	background: radial-gradient(46% 60% at 80% 40%, rgba(201, 164, 106, 0.14), transparent 72%);
	pointer-events: none;
}

.achero__wrap {
	position: relative;
	z-index: 1;
	width: var(--container);
	margin: 0 auto;
}

.achero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
	gap: clamp(28px, 4vw, 60px);
	align-items: center;
}

/* faint eucalyptus branch behind the copy, like the reference */
.achero__leaf {
	position: absolute;
	top: 30px;
	left: 6px;
	width: 200px;
	height: 900px;
	max-height: calc(100% - 56px);
	color: #8a9b70;
	opacity: 0.42;
	filter: blur(0.5px);
	pointer-events: none;
	z-index: 0;
}

.achero__leaf svg {
	width: 100%;
	height: 100%;
}

/* ---------- copy column ---------- */
.achero__copy {
	max-width: 620px;
}

.achero__eyebrow {
	margin: 0 0 18px;
	font-family: "Inter", sans-serif;
	font-weight: 600;
	font-size: 0.82rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--terracotta);
}

.achero .achero__title {
	margin: 0;
	font-family: "Playfair Display", Georgia, serif;
	font-weight: 600;
	font-size: clamp(1.95rem, 2.85vw, 2.8rem);
	line-height: 1.16;
	letter-spacing: -0.01em;
	color: var(--text);
}

.achero__ornament {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 26px 0 22px;
	color: var(--gold);
}

.achero__ornament span {
	display: block;
	height: 1px;
	width: 62px;
	background: linear-gradient(90deg, transparent, currentColor);
}

.achero__ornament span:last-child {
	background: linear-gradient(90deg, currentColor, transparent);
}

.achero__ornament svg {
	width: 15px;
	height: 15px;
	flex: none;
}

.achero__lead {
	margin: 0;
	max-width: 42ch;
	font-family: "Inter", sans-serif;
	font-size: 1.04rem;
	line-height: 1.75;
	color: var(--muted);
}

/* ---------- "not sure where to start" note ---------- */
.achero__note {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin: 28px 0 26px;
	padding: 18px 22px;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: rgba(255, 255, 255, 0.55);
}

.achero__note-icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(95, 111, 78, 0.35);
	color: var(--olive);
}

.achero__note-icon svg {
	width: 22px;
	height: 22px;
}

.achero__note-title {
	margin: 0 0 4px;
	font-family: "Inter", sans-serif;
	font-weight: 600;
	font-size: 1rem;
	color: var(--text);
}

.achero__note-text {
	margin: 0;
	font-family: "Inter", sans-serif;
	font-size: 0.93rem;
	line-height: 1.6;
	color: var(--muted);
}

/* ---------- CTA ---------- */
.achero__cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 16px 32px;
	border-radius: 999px;
	background: var(--olive-deep);
	color: #fff;
	font-family: "Inter", sans-serif;
	font-weight: 600;
	font-size: 0.82rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: 0 16px 30px rgba(63, 74, 50, 0.22);
	transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.achero__cta:hover,
.achero__cta:focus-visible {
	background: #34402a;
	transform: translateY(-2px);
	box-shadow: 0 20px 36px rgba(63, 74, 50, 0.28);
}

.achero__cta svg {
	width: 20px;
	height: 20px;
	flex: none;
}

.achero__hint {
	margin: 14px 0 0;
	font-family: "Inter", sans-serif;
	font-style: italic;
	font-size: 0.92rem;
	color: var(--olive-soft);
}

/* ---------- media column ---------- */
.achero__media {
	position: relative;
	justify-self: end;
	width: 100%;
	max-width: 560px;
}

.achero__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 916 / 1024;
	object-fit: cover;
	border-radius: 30px;
	box-shadow: var(--shadow-card);
}

/* ---------- credentials strip ---------- */
.achero__creds {
	list-style: none;
	margin: clamp(34px, 4vw, 52px) 0 0;
	padding: clamp(20px, 2.4vw, 30px) clamp(16px, 2vw, 26px);
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: rgba(255, 255, 255, 0.5);
	box-shadow: var(--shadow-soft);
}

.achero__cred {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	column-gap: 13px;
	row-gap: 12px;
	align-items: center;
	padding: 4px clamp(14px, 1.5vw, 24px);
}

.achero__cred + .achero__cred {
	border-left: 1px solid var(--border);
}

.achero__cred-icon {
	grid-row: 1;
	grid-column: 1;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid currentColor;
	color: var(--olive);
}

.achero__cred-icon svg {
	width: 27px;
	height: 27px;
}

/* tone: olive vs terracotta rings (matches the reference mockup) */
.achero__cred-icon--olive {
	color: var(--olive);
	border-color: rgba(95, 111, 78, 0.32);
}

.achero__cred-icon--terracotta {
	color: var(--terracotta);
	border-color: rgba(182, 119, 89, 0.4);
}

/* icons that read better without an enclosing ring (shield, brain) */
.achero__cred-icon--bare {
	width: 48px;
	height: 48px;
	border: 0;
}

.achero__cred-icon--bare svg {
	width: 42px;
	height: 42px;
}

.achero__cred-label {
	grid-row: 1;
	grid-column: 2;
	align-self: center;
	margin: 0;
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 0.8rem;
	line-height: 1.28;
	letter-spacing: 0.035em;
	text-transform: uppercase;
	color: var(--olive-deep);
}

.achero__cred-desc {
	grid-row: 2;
	grid-column: 1 / -1;
	margin: 0;
	font-family: "Inter", sans-serif;
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--muted);
}

/* ---------- responsive ---------- */
@media (max-width: 980px) {
	/* the branch is a left-column decoration; hide it once the hero stacks */
	.achero__leaf {
		display: none;
	}

	.achero__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.achero__copy {
		max-width: none;
		order: 1;
	}

	.achero__media {
		order: 2;
		justself: center;
		justify-self: center;
		max-width: 420px;
	}

	.achero__creds {
		grid-template-columns: repeat(2, 1fr);
		gap: 22px 0;
	}

	.achero__cred:nth-child(odd) {
		border-left: 0;
	}

	.achero__cred:nth-child(n + 3) {
		padding-top: 22px;
		border-top: 1px solid var(--border);
	}
}

@media (max-width: 560px) {
	.achero__creds {
		grid-template-columns: 1fr;
	}

	.achero__cred {
		border-left: 0 !important;
	}

	.achero__cred + .achero__cred {
		padding-top: 20px;
		border-top: 1px solid var(--border);
	}

	.achero__cta {
		width: 100%;
		justify-content: center;
	}
}