/* =============================================================================
   4 Estates — Blog Hero Widget  |  hero-widget.css
   All values here are DEFAULTS. Elementor inline styles override via specificity.
   ============================================================================= */

/* Google Fonts — loaded here as fallback; add via Elementor Custom Fonts for perf */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&family=Montserrat:wght@300;400;500;600&display=swap');

/* ── WRAPPER ─────────────────────────────────────────────────────────────── */
.fe-hero {
	display: flex;
	min-height: 520px;
	overflow: hidden;
	position: relative;
	width: 100%;
}

/* ── LEFT PANE ───────────────────────────────────────────────────────────── */
.fe-hero__left {
	flex: 0 0 45%;
	background-color: #0D0D0D;
	display: flex;
	align-items: center;
	padding: 70px 56px;
	position: relative;
	z-index: 2;
	box-sizing: border-box;
}

/* Gold separator line — only present when --separator modifier applied */
.fe-hero__left--separator::after {
	content: '';
	position: absolute;
	right: 0;
	top: 8%;
	bottom: 8%;
	width: 1px;
	background: linear-gradient(to bottom, transparent, rgba(201, 168, 76, 0.4), transparent);
	pointer-events: none;
}

.fe-hero__left-inner {
	width: 100%;
}

/* ── EYEBROW ─────────────────────────────────────────────────────────────── */
.fe-hero__eyebrow {
	font-family: 'Montserrat', sans-serif;
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: #C9A84C;
	margin: 0 0 22px 0;
	display: flex;
	align-items: center;
	gap: 12px;
	line-height: 1.4;
}

/* Short gold rule before eyebrow text */
.fe-hero__eyebrow::before {
	content: '';
	display: inline-block;
	flex-shrink: 0;
	width: 32px;
	height: 1px;
	background-color: #C9A84C;
}

/* ── HERO TITLE ──────────────────────────────────────────────────────────── */
.fe-hero__title {
	font-family: 'Cormorant Garamond', serif;
	font-size: 52px;
	font-weight: 300;
	line-height: 1.15;
	letter-spacing: 0.5px;
	color: #ffffff;
	margin: 0 0 28px 0;
	padding: 0;
}

.fe-hero__title em {
	font-style: italic;
	color: #E2C97E;
}

/* ── META ROW ────────────────────────────────────────────────────────────── */
.fe-hero__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px;
	margin: 0;
}

.fe-hero__meta-item {
	font-family: 'Montserrat', sans-serif;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #888888;
}

.fe-hero__meta-dot {
	display: inline-block;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background-color: #C9A84C;
	opacity: 0.6;
	flex-shrink: 0;
}

/* ── RIGHT PANE ──────────────────────────────────────────────────────────── */
.fe-hero__right {
	flex: 0 0 55%;
	position: relative;
	overflow: hidden;
}

/* Full-bleed background image */
.fe-hero__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	filter: brightness(60%) saturate(85%);
	transition: transform 8s ease;
	will-change: transform;
}

.fe-hero:hover .fe-hero__bg {
	transform: scale(1.03);
}

/* Gradient overlay — dark left to transparent right */
.fe-hero__image-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to right, #0D0D0D 0%, transparent 45%);
	pointer-events: none;
}

/* ── OVERLAY GLASS CARD ──────────────────────────────────────────────────── */
.fe-hero__card {
	position: absolute;
	bottom: 36px;
	left: 36px;
	z-index: 10;
	background-color: rgba(10, 10, 10, 0.80);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(201, 168, 76, 0.28);
	border-radius: 4px;
	padding: 22px 28px;
	max-width: 290px;
	box-sizing: border-box;
}

.fe-hero__card-eyebrow {
	font-family: 'Montserrat', sans-serif;
	font-size: 9px;
	font-weight: 300;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: #C9A84C;
	margin: 0 0 10px 0;
	padding: 0;
}

.fe-hero__card-title {
	font-family: 'Cormorant Garamond', serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.3;
	color: #ffffff;
	margin: 0 0 12px 0;
	padding: 0;
}

.fe-hero__card-divider {
	width: 36px;
	height: 1px;
	background-color: #C9A84C;
	margin-bottom: 12px;
	border: none;
}

.fe-hero__card-desc {
	font-family: 'Montserrat', sans-serif;
	font-size: 11px;
	font-weight: 300;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.5);
	letter-spacing: 0.3px;
	margin: 0;
	padding: 0;
}

.fe-hero__card-logo {
	margin-top: 16px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.fe-hero__card-logo-icon {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	border: 1px solid rgba(201, 168, 76, 0.5);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	color: rgba(255, 255, 255, 0.55);
}

.fe-hero__card-logo-text {
	font-family: 'Cormorant Garamond', serif;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */

/* Tablet — stack columns vertically */
@media (max-width: 1024px) {
	.fe-hero {
		flex-direction: column;
	}

	.fe-hero__left,
	.fe-hero__right {
		flex: none;
		width: 100%;
	}

	.fe-hero__left {
		padding: 50px 40px;
	}

	.fe-hero__left--separator::after {
		display: none;
	}

	.fe-hero__right {
		min-height: 320px;
	}

	/* Card goes static below the image */
	.fe-hero__card {
		position: relative;
		bottom: auto;
		left: auto;
		max-width: 100%;
		margin: -1px 0 0 0;
		border-radius: 0;
		border-top: none;
	}

	.fe-hero__title {
		font-size: 38px;
	}
}

/* Mobile */
@media (max-width: 480px) {
	.fe-hero__left {
		padding: 40px 24px;
	}

	.fe-hero__title {
		font-size: 30px;
	}

	.fe-hero__right {
		min-height: 220px;
	}

	.fe-hero__card {
		padding: 18px 20px;
	}
}