/**
 * Section 7: Heritage — Deepak Sales.
 *
 * Mobile-first. Depends on tokens.css + base.css. Reuses existing design
 * tokens only (oxblood, gold, ivory) — no new global variables. Two-column
 * layout: story + timeline + trust cards on the left; image with floating
 * statistic cards on the right. Entrance animation is CSS-only and respects
 * prefers-reduced-motion.
 */

/* ==========================================================================
   1. Section shell + backdrop
   ========================================================================== */
.ds-heritage {
	position: relative;
	overflow: clip;
	padding-block: var(--ds-section-y);
	background-color: var(--ds-paper);
	isolation: isolate;
}

.ds-heritage__backdrop {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	overflow: clip;
}

.ds-heritage__glow {
	position: absolute;
	top: -12%;
	right: -8%;
	width: 34rem;
	height: 34rem;
	border-radius: 50%;
	filter: blur(70px);
	opacity: 0.4;
	background: radial-gradient(circle, color-mix(in srgb, var(--ds-gold) 32%, transparent), transparent 66%);
}

/* ==========================================================================
   2. Layout grid
   ========================================================================== */
.ds-heritage__inner {
	display: grid;
	grid-template-columns: 1fr; /* mobile / tablet: stacked */
	gap: clamp(2.5rem, 1.5rem + 4vw, 4rem);
	align-items: center;
}

/* ==========================================================================
   3. Content column
   ========================================================================== */
.ds-heritage__eyebrow {
	margin-bottom: var(--ds-space-sm);
	font-family: var(--ds-font-mono);
	font-size: var(--ds-fs-eyebrow);
	font-weight: var(--ds-fw-label);
	letter-spacing: var(--ds-ls-wide);
	text-transform: uppercase;
	color: var(--ds-oxblood);
}

.ds-heritage__title {
	margin-bottom: var(--ds-space-lg);
	font-family: var(--ds-font-display);
	font-size: var(--ds-fs-h2);
	font-weight: var(--ds-fw-section);
	line-height: var(--ds-lh-snug);
	letter-spacing: -0.02em;
	color: var(--ds-heading);
}

.ds-heritage__story {
	display: flex;
	flex-direction: column;
	gap: var(--ds-space-md);
	max-width: 52ch;
	margin-bottom: clamp(1.75rem, 1rem + 2vw, 2.5rem);
}

.ds-heritage__para {
	font-size: var(--ds-fs-body);
	line-height: var(--ds-lh-body);
	color: var(--ds-body);
}

/* ---- Timeline ------------------------------------------------------------- */
.ds-heritage__timeline {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--ds-space-lg);
	margin-bottom: clamp(1.75rem, 1rem + 2vw, 2.5rem);
	padding-left: 1.75rem;
}

.ds-heritage__milestone {
	position: relative;
}

/* Dot */
.ds-heritage__milestone::before {
	content: "";
	position: absolute;
	left: -1.75rem;
	top: 0.35rem;
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 50%;
	background: var(--ds-oxblood);
	box-shadow: 0 0 0 3px var(--ds-gold-tint);
}

/* Connector line */
.ds-heritage__milestone:not(:last-child)::after {
	content: "";
	position: absolute;
	left: calc(-1.75rem + 0.32rem);
	top: 1.1rem;
	bottom: calc(var(--ds-space-lg) * -1);
	width: 1px;
	background: var(--ds-line-strong);
}

.ds-heritage__milestone-year {
	display: block;
	font-family: var(--ds-font-mono);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: var(--ds-ls-wide);
	color: var(--ds-gold);
}

.ds-heritage__milestone-label {
	display: block;
	font-family: var(--ds-font-display);
	font-size: var(--ds-fs-body);
	font-weight: 500;
	color: var(--ds-ink);
}

/* ---- Trust cards ---------------------------------------------------------- */
.ds-heritage__trust {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--ds-space-sm);
}

.ds-heritage__trust-card {
	display: flex;
	align-items: center;
	gap: var(--ds-space-sm);
	padding: var(--ds-space-md);
	border: 1px solid var(--ds-line);
	border-radius: var(--ds-radius-md);
	background-color: var(--ds-surface);
	box-shadow: var(--ds-shadow-sm);
	transition:
		transform var(--ds-dur) var(--ds-ease),
		border-color var(--ds-dur) var(--ds-ease),
		box-shadow var(--ds-dur) var(--ds-ease);
}

.ds-heritage__trust-card:hover {
	transform: translateY(-3px);
	border-color: color-mix(in srgb, var(--ds-gold) 55%, var(--ds-line));
	box-shadow: var(--ds-shadow-md);
}

.ds-heritage__trust-ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	flex: 0 0 auto;
	border-radius: var(--ds-radius-sm);
	background: var(--ds-gold-tint);
	color: var(--ds-oxblood);
}

.ds-heritage__trust-label {
	font-size: var(--ds-fs-small);
	font-weight: 600;
	line-height: var(--ds-lh-snug);
	color: var(--ds-ink);
}

/* ==========================================================================
   4. Visual column — image + floating stats
   ========================================================================== */
.ds-heritage__visual {
	position: relative;
}

.ds-heritage__figure {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border: 1px solid var(--ds-line);
	border-radius: var(--ds-radius-lg);
	background-color: var(--ds-paper-2);
	box-shadow: var(--ds-shadow-lg);
}

.ds-heritage__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Fallback panel when no image is set */
.ds-heritage__placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--ds-space-sm);
	width: 100%;
	height: 100%;
	color: var(--ds-on-accent);
	background:
		radial-gradient(120% 90% at 80% 0%, color-mix(in srgb, var(--ds-gold) 24%, transparent), transparent 55%),
		linear-gradient(160deg, var(--ds-oxblood), var(--ds-oxblood-deep));
}

.ds-heritage__placeholder-seal {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 5rem;
	height: 5rem;
	border: 1.5px solid var(--ds-gold);
	border-radius: 50%;
	font-family: var(--ds-font-display);
	font-size: 2rem;
	font-weight: 600;
	color: var(--ds-gold-soft);
	box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--ds-oxblood) 60%, transparent);
}

.ds-heritage__placeholder-note {
	font-family: var(--ds-font-mono);
	font-size: var(--ds-fs-eyebrow);
	font-weight: var(--ds-fw-label);
	letter-spacing: var(--ds-ls-wide);
	text-transform: uppercase;
	color: var(--ds-gold-soft);
}

/* ---- Floating stat cards -------------------------------------------------- */
.ds-heritage__stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--ds-space-sm);
	margin-top: var(--ds-space-sm);
}

.ds-heritage__stat {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	padding: var(--ds-space-md);
	border: 1px solid var(--ds-line);
	border-radius: var(--ds-radius-md);
	background-color: var(--ds-surface);
	box-shadow: var(--ds-shadow-md);
	transition:
		transform var(--ds-dur) var(--ds-ease),
		box-shadow var(--ds-dur) var(--ds-ease);
}

.ds-heritage__stat:hover {
	transform: translateY(-3px);
	box-shadow: var(--ds-shadow-lg);
}

.ds-heritage__stat-value {
	font-family: var(--ds-font-display);
	font-size: clamp(1.4rem, 1.1rem + 1.4vw, 1.9rem);
	font-weight: 600;
	line-height: 1;
	color: var(--ds-oxblood);
}

.ds-heritage__stat-label {
	font-family: var(--ds-font-mono);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: var(--ds-ls-wide);
	text-transform: uppercase;
	color: var(--ds-muted);
}

/* ==========================================================================
   5. Entrance animation (fade up — CSS only).
   Hidden state lives in the keyframe so content stays visible if disabled.
   ========================================================================== */
@keyframes ds-heritage-rise {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.ds-heritage__content,
.ds-heritage__visual {
	animation: ds-heritage-rise 0.6s var(--ds-ease) both;
}

.ds-heritage__visual {
	animation-delay: 0.12s;
}

/* ==========================================================================
   6. Responsive — two columns; float the stats over the image on desktop
   ========================================================================== */
/* 62em (992px) -- the theme's formal desktop tier (see header.css/hero.css), replacing the previous 64em guess. */
@media (min-width: 62em) {
	.ds-heritage__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: clamp(3rem, 1.5rem + 4vw, 5rem);
	}

	.ds-heritage__visual {
		padding: clamp(1rem, 0.5rem + 2vw, 2.25rem);
	}

	.ds-heritage__stats {
		display: block;
		margin-top: 0;
	}

	.ds-heritage__stat {
		position: absolute;
		z-index: 2;
		width: max-content;
		min-width: 8.5rem;
	}

	.ds-heritage__stat--1 { top: 0; left: 0; }
	.ds-heritage__stat--2 { top: 12%; right: 0; }
	.ds-heritage__stat--3 { bottom: 12%; left: 0; }
	.ds-heritage__stat--4 { bottom: 0; right: 0; }
}

/* ==========================================================================
   7. Reduced motion — settle to the final, visible state.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.ds-heritage__content,
	.ds-heritage__visual {
		animation: none;
		opacity: 1;
		transform: none;
	}

	.ds-heritage__trust-card:hover,
	.ds-heritage__stat:hover {
		transform: none;
	}
}