/**
 * Bandhavgarh — home teaser + the full Bandhavgarh page.
 *
 * One stylesheet serves both (see bananchal_assets()), so every selector is
 * namespaced: .bf-bandhav-teaser__* belongs to the front page only, every other
 * .bf-bandhav-* block belongs to the page only. Depends on the tokens in
 * assets/css/style.css, which is always enqueued first.
 *
 * Brand colours appear as rgba() literals wherever a translucent layer is needed —
 * the tokens are hex, and this matches how style.css handles its own scrims.
 *
 * 1. Home teaser
 * 2. Page hero
 * 3. Intro
 * 4. At a Glance
 * 5. In Visit
 * 6. Closing CTA
 * 7. Responsive
 * 8. Reduced motion
 */

/* ==========================================================================
   1. Home teaser — forest ground, so it reads as a break from the cream About
   ========================================================================== */

/*
 * A full-bleed band with the photograph behind the words. The dark green stays
 * as the base colour so the section is never a white flash while the photograph
 * is still loading.
 */
.bf-bandhav-teaser {
	position: relative;
	overflow: hidden;
	background-color: var(--bf-green-darker);
	color: var(--bf-white);
	padding-top: clamp(4.5rem, 9vw, 7.5rem);
	padding-bottom: clamp(4.5rem, 9vw, 7.5rem);
}

/*
 * background-attachment: fixed is what holds the photograph still while the page
 * moves over it. Two things to know about it:
 *
 * — iOS Safari ignores it outright and paints the background as though it
 *   scrolled. That is a graceful loss, not a break: the band still shows the
 *   photograph, just without the parallax.
 * — On any touch device it is expensive, because the browser has to repaint the
 *   whole layer on every scroll frame. So it is switched off below, where there
 *   is no hover — a phone gains nothing from the effect and pays for it in jank.
 */
.bf-bandhav-teaser__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
}

/*
 * The green scrim used to live here — weighted to the left, thinning to the
 * right so the tiger photograph could come through. Removed: the client wants
 * the photograph fully visible across the whole band, and the content now
 * sits on a translucent white card (.bf-bandhav-teaser__copy below) that
 * gives the white text its own ground to read against. The element is kept
 * in the DOM and just hidden, so the template does not need to change and
 * restoring the old look is one line away.
 */
.bf-bandhav-teaser__scrim {
	display: none;
}

.bf-bandhav-teaser__inner {
	position: relative;
	z-index: 2;
}

/*
 * The band used to carry .section--forest, which is what turned its headings
 * white. It does not any more — the photograph is the background now — so the
 * heading has to be set here, or the global "h2 is dark green" rule leaves it
 * near-invisible on the dark ground.
 */
.bf-bandhav-teaser h2,
.bf-bandhav-teaser h3 {
	color: var(--bf-white);
	/*
	 * Subtle dark shadow under the heading so it lifts off the milky card
	 * even where the photograph behind the card is bright. A flat text-shadow
	 * with a small offset is enough — too heavy and it muddies the serif.
	 */
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

/* The gold rule and the amber eyebrow both need to lift off the dark ground. */
.bf-bandhav-teaser .eyebrow {
	color: var(--bf-amber);
}

.bf-bandhav-teaser__copy {
	/*
	 * Translucent white card so the white text has its own ground and the
	 * background photograph shows through everywhere else. 0.25 is the
	 * second pass — 0.1 was too faint over the brighter parts of the
	 * photograph and the white text washed out. 0.25 keeps the tiger as the
	 * section's subject while giving the body copy a ground it can sit on.
	 * The hairline border and a soft radius give the card an edge without
	 * competing with the photograph.
	 */
	background-color: rgba(255, 255, 255, 0.25);
	padding: 1.5rem 1.75rem 1.75rem;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: var(--bf-radius-lg);
}

/* .lead-text is tuned for cream grounds; on forest it needs the opposite end. */
.bf-bandhav-teaser__lead {
	color: rgba(255, 255, 255, 0.86);
	border-left: 2px solid var(--bf-amber);
	padding-left: 1.1rem;
	margin-bottom: 1.5rem;
}

.bf-bandhav-teaser__text {
	/*
	 * Tuned for the white card on a photograph that can be any colour the
	 * client uploads. Was 0.74 against the dark scrim; with the lighter card
	 * 0.85 keeps the body copy readable across dark and bright parts of the
	 * photograph alike. The card itself does most of the contrast work.
	 */
	color: rgba(255, 255, 255, 0.88);
}

.bf-bandhav-teaser__cta {
	margin-top: 2.1rem;
}

/* ==========================================================================
   2. Page hero
   ========================================================================== */

.bf-bandhav-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 320px;
	padding: 2rem 0 2.5rem;
	background-color: var(--bf-green-dark);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: var(--bf-white);
	overflow: hidden;
}

@media (min-width: 768px) {
	.bf-bandhav-hero {
		min-height: 380px;
		padding: 2.5rem 0 3rem;
	}
}

.bf-bandhav-hero__inner {
	width: 100%;
}

/* Reserved class, kept neutral so the markup still validates if it's ever present. */
.bf-bandhav-hero__scrim { display: none; }

.bf-bandhav-hero__title {
	margin: 0;
	color: var(--bf-white);
	font-size: clamp(2rem, 5vw, 3.25rem);
	font-weight: 500;
	line-height: 1.1;
	max-width: 720px;
	text-wrap: balance;
	text-shadow: 0 2px 26px rgba(18, 48, 27, 0.42);
}

/* ==========================================================================
   3. Intro — editorial two column, the fort photograph beside the story
   ========================================================================== */

.bf-bandhav-intro__figure {
	position: relative;
	max-width: 520px;
	margin: 0 auto;
	/* Mirror image of the teaser frame: the rule breaks out top left here. */
	padding: 2rem 0 0 2rem;
}

.bf-bandhav-intro__figure::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 60%;
	height: 55%;
	border: 1px solid var(--bf-amber);
	border-radius: var(--bf-radius-lg);
	z-index: 0;
	pointer-events: none;
}

.bf-bandhav-intro__frame {
	position: relative;
	z-index: 1;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	border-radius: var(--bf-radius-lg);
	background-color: var(--bf-sand);
	box-shadow: var(--bf-shadow);
}

.bf-bandhav-intro__frame img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s var(--bf-ease);
}

.bf-bandhav-intro__figure:hover .bf-bandhav-intro__frame img {
	transform: scale(1.04);
}

.bf-bandhav-intro__caption {
	position: relative;
	z-index: 1;
	margin-top: 1rem;
	font-family: var(--bf-font-display);
	font-size: 1.02rem;
	font-style: italic;
	line-height: 1.5;
	color: var(--bf-muted);
}

.bf-bandhav-intro__copy {
	max-width: 40rem;
	color: var(--bf-ink);
}

.bf-bandhav-intro__copy.reveal {
	transition-delay: 0.12s;
}

/* Restrained drop cap — the page opens on prose, so it needs a way in. */
.bf-bandhav-intro__copy p:first-of-type::first-letter {
	float: left;
	margin: 0.32rem 0.6rem 0 0;
	font-family: var(--bf-font-display);
	font-size: 3.4rem;
	font-weight: 600;
	line-height: 0.78;
	color: var(--bf-green);
}

.bf-bandhav-intro__copy p + p {
	margin-top: 1.15rem;
}

/* ==========================================================================
   4. At a Glance — spec panel, two definition columns on desktop
   ========================================================================== */

.bf-bandhav-glance__panel {
	padding: clamp(1.6rem, 4vw, 3rem);
	border: 1px solid var(--bf-line);
	border-radius: var(--bf-radius-lg);
	background-color: var(--bf-white);
	box-shadow: var(--bf-shadow);
}

.bf-bandhav-glance__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: 3rem;
	margin: 0;
}

.bf-bandhav-glance__row {
	padding: 1.15rem 0;
	border-bottom: 1px solid var(--bf-line);
}

.bf-bandhav-glance__row:first-child {
	padding-top: 0;
}

.bf-bandhav-glance__row:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.bf-bandhav-glance__term {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin-bottom: 0.45rem;
	font-family: var(--bf-font-body);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bf-muted);
}

.bf-bandhav-glance__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: var(--bf-sand);
	color: var(--bf-green);
	font-size: 1rem;
	line-height: 1;
	transition: background-color var(--bf-transition), color var(--bf-transition);
}


/* Indent the value to the label's text, not the disc. */
.bf-bandhav-glance__desc {
	margin: 0;
	padding-left: calc(36px + 0.8rem);
	font-family: var(--bf-font-display);
	font-size: clamp(1.12rem, 1.7vw, 1.38rem);
	font-weight: 600;
	line-height: 1.35;
	color: var(--bf-green-dark);
}

/* The season line is prose, not a spec — it gets its own full-width callout. */
.bf-bandhav-glance__note {
	display: flex;
	align-items: flex-start;
	gap: 1.1rem;
	margin-top: 2rem;
	padding: 1.35rem 1.5rem;
	border-left: 3px solid var(--bf-amber);
	border-radius: 0 var(--bf-radius) var(--bf-radius) 0;
	background-color: var(--bf-cream);
}

.bf-bandhav-glance__note-icon {
	flex: 0 0 auto;
	margin-top: 0.2rem;
	color: var(--bf-amber-dark);
	font-size: 1.3rem;
	line-height: 1;
}

.bf-bandhav-glance__note-text {
	margin: 0;
	color: var(--bf-ink);
}

/* ==========================================================================
   5. In Visit — alternating rows
   ========================================================================== */

/*
 * One attraction per row, photograph and text side by side, the sides swapping
 * as you go down. The swap is done with Bootstrap's order-lg-* utilities in the
 * template, so below lg the columns simply stack and every entry reads
 * picture-then-words.
 */
.bf-bandhav-visit__row + .bf-bandhav-visit__row {
	margin-top: clamp(2.5rem, 5vw, 4.5rem);
}

.bf-bandhav-visit__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--bf-radius-lg);
	background-color: var(--bf-sand);
	box-shadow: var(--bf-shadow);
}

.bf-bandhav-visit__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s var(--bf-ease);
}

/*
 * Nothing here is clickable, so this is not a hover affordance — only the same
 * slow drift the other photographs on the site have, to keep the page of a piece.
 */
.bf-bandhav-visit__media:hover img {
	transform: scale(1.05);
}

/* Dark foot, so the numeral always has something to sit on. */
.bf-bandhav-visit__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(18, 48, 27, 0) 55%, rgba(18, 48, 27, 0.55) 100%);
	pointer-events: none;
}

.bf-bandhav-visit__num {
	position: absolute;
	left: 1rem;
	bottom: 1rem;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: var(--bf-amber);
	color: var(--bf-charcoal);
	font-family: var(--bf-font-display);
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1;
	box-shadow: var(--bf-shadow-sm);
}

/*
 * No card around the text any more, so the padding that used to sit inside one
 * becomes breathing room beside the photograph — and only from lg, where the two
 * are actually side by side. Stacked on a phone the text needs no inset at all.
 */
.bf-bandhav-visit__body {
	max-width: 34rem;
}

.bf-bandhav-visit__title {
	margin-bottom: 0.9rem;
	font-size: clamp(1.45rem, 2.4vw, 1.9rem);
	line-height: 1.2;
}

/*
 * A short gold rule under the heading, the same one the other editorial sections
 * use. It gives the text column an edge to start from now that it has no card.
 */
.bf-bandhav-visit__title::after {
	content: '';
	display: block;
	width: 3rem;
	height: 2px;
	margin-top: 0.9rem;
	background-color: var(--bf-amber);
}

.bf-bandhav-visit__text {
	margin: 0;
	font-size: 1.02rem;
	line-height: 1.8;
	color: var(--bf-ink);
}

@media (min-width: 992px) {

	.bf-bandhav-visit__body {
		padding-left: 1.25rem;
	}

	/* Text on the left of a flipped row: the inset belongs on the other side. */
	.order-lg-1 .bf-bandhav-visit__body {
		padding-right: 1.25rem;
		padding-left: 0;
		margin-left: auto;
	}
}

/* ==========================================================================
   6. Responsive
   ========================================================================== */

@media (min-width: 768px) {
	.bf-bandhav-glance__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/*
	 * Anchored to the first row of each column rather than the last: with an odd
	 * number of facts the final grid row holds one item, so a :nth-last-child
	 * rule would strip the rule from its row-mate too.
	 */
	.bf-bandhav-glance__row {
		padding-top: 0;
		padding-bottom: 0;
		border-bottom: 0;
		border-top: 1px solid var(--bf-line);
		padding-block: 1.15rem;
	}

	.bf-bandhav-glance__row:nth-child(-n + 2) {
		border-top: 0;
		padding-top: 0;
	}
}

@media (min-width: 992px) {
	.bf-bandhav-teaser__copy,
	.bf-bandhav-intro__copy {
		padding-left: 1.75rem;
	}
}

@media (min-width: 1200px) {
	.bf-bandhav-teaser__copy,
	.bf-bandhav-intro__copy {
		padding-left: 3rem;
	}
}

@media (max-width: 991.98px) {
	.bf-bandhav-teaser__copy,
	.bf-bandhav-intro__copy {
		padding-left: 0;
	}

	.bf-bandhav-intro__figure {
		max-width: 460px;
	}

	.bf-bandhav-intro__frame {
		aspect-ratio: 4 / 3;
	}
}

@media (max-width: 575.98px) {
	.bf-bandhav-teaser__copy,
	.bf-bandhav-intro__copy {
		padding: 1.25rem 1.1rem;
	}

	.bf-bandhav-teaser__lead {
		padding-left: 0.9rem;
	}

	.bf-bandhav-intro__figure {
		padding: 1.25rem 0 0 1.25rem;
	}

	.bf-bandhav-intro__copy p:first-of-type::first-letter {
		font-size: 2.9rem;
	}

	.bf-bandhav-glance__note {
		padding: 1.15rem 1.15rem;
	}
}

/*
 * No hover means a touch device, where a fixed background is repainted on every
 * scroll frame for an effect iOS does not even honour. Let it scroll instead.
 */
@media (hover: none) {
	.bf-bandhav-teaser__bg {
		background-attachment: scroll;
	}
}

/* ==========================================================================
   8. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.bf-bandhav-intro__frame img,
	.bf-bandhav-intro__figure:hover .bf-bandhav-intro__frame img,
	.bf-bandhav-visit__media img,
	.bf-bandhav-visit__media:hover img {
		transition: none;
		transform: none;
	}

	.bf-bandhav-glance__icon {
		transition: none;
	}

	/*
	 * A background that stays put while the page moves over it is a parallax
	 * effect, whatever it is built from — so it scrolls with everything else here.
	 */
	.bf-bandhav-teaser__bg {
		background-attachment: scroll;
	}
}