/**
 * Bananchal Farms — home film section.
 *
 * Styles template-parts/home/section-video.php and the Bootstrap modal it ships
 * with. Loaded after style.css, so every token below comes from :root there.
 *
 * rgba() values repeat the RGB of --bf-green-darker (#12301b) and --bf-amber
 * (#f5b715); custom properties cannot be used inside rgba() without separate
 * channel tokens, which is how style.css and slider.css handle their scrims too.
 *
 * 1. Band + scrim
 * 2. Copy
 * 3. Play button
 * 4. Modal
 * 5. Responsive
 * 6. Motion
 */

/* ==========================================================================
   1. Band + scrim
   ========================================================================== */

.bf-film {
	position: relative;
	/* Cream above and sand below, so this beat has to read as darkness. */
	background-color: var(--bf-green-darker);
	color: rgba(255, 255, 255, 0.82);
	overflow: hidden;
	/* A touch taller than the neighbours: the section is one held image. */
	padding-top: calc(var(--bf-section-y) * 1.15);
	padding-bottom: calc(var(--bf-section-y) * 1.15);
	text-align: center;
}

.bf-film__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-position: center 42%;
	background-repeat: no-repeat;
	background-size: cover;
}

/*
 * The green scrim used to live here — a vertical layer compounded with a
 * radial darkening in the middle, both tuned for the worst-possible poster
 * the client could upload. Removed: the client wants the poster photograph
 * fully visible, and the content (heading, copy, play button) now sits on a
 * translucent white card (.bf-film__content below) that gives white text
 * its own ground. Kept in the DOM and hidden, so the template is unchanged
 * and the old look is one line away.
 */
.bf-film__scrim {
	display: none;
}

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

/* ==========================================================================
   2. Copy
   ========================================================================== */

.bf-film__content {
	max-width: 46rem;
	margin: 0 auto;
	/*
	 * Translucent white card matching the bandhavgarh treatment: the poster
	 * photograph stays the subject of the section, and the white text has
	 * its own ground to read against. Second pass: 0.1 was too faint and
	 * the white text washed out; 0.25 keeps the poster visible while
	 * giving the body copy a ground it can sit on. A hairline border and
	 * soft radius give the card an edge.
	 */
	background-color: rgba(255, 255, 255, 0.25);
	padding: 1.75rem 2rem 2rem;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: var(--bf-radius-lg);
}

/*
 * White, not amber. The gold reads fine over the poster that ships (5.6:1) but
 * falls to 4.2:1 over a bright frame the client could upload, and this field is
 * client-editable. The flanking rules stay gold — they are decorative and carry no
 * contrast requirement, so the brand cue survives. Same call as the Bandhavgarh hero.
 */
.bf-film__eyebrow {
	color: var(--bf-white);
}

.bf-film__title {
	max-width: 22ch;
	margin: 0 auto 1.1rem;
	color: var(--bf-white);
	/* Font size inherited from the global h2 step; the hero stays the one oversized
	   heading on the page. */
	font-weight: 500;
	line-height: 1.1;
	text-wrap: balance;
	text-shadow: 0 2px 26px rgba(18, 48, 27, 0.42);
}

.bf-film__text {
	max-width: 52ch;
	margin: 0 auto;
	/* Lifted from 0.84 to 0.92 for the lighter white card. The card does the
	   contrast work, so the body copy only needs a small bump to clear the
	   small text threshold. */
	color: rgba(255, 255, 255, 0.92);
	font-size: clamp(1rem, 1.4vw, 1.125rem);
	line-height: 1.85;
}

/* ==========================================================================
   3. Play button
   ========================================================================== */

.bf-film__play {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	margin-top: 2.5rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--bf-white);
	cursor: pointer;
}

.bf-film__disc {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	background-color: var(--bf-amber);
	color: var(--bf-charcoal);
	font-size: 2.5rem;
	line-height: 1;
	box-shadow: var(--bf-shadow-lg);
	transition: background-color var(--bf-transition), transform var(--bf-transition);
}

/* The glyph's own bounding box is wider than its triangle, so it sits left of centre. */
.bf-film__disc .bi {
	transform: translateX(2px);
}

/* Static ring — the soft amber halo the button reads against. */
.bf-film__disc::before {
	content: '';
	position: absolute;
	inset: -13px;
	border: 1px solid rgba(245, 183, 21, 0.55);
	border-radius: 50%;
}

/* Second ring, animated in section 6 only where motion is welcome. */
.bf-film__disc::after {
	content: '';
	position: absolute;
	inset: -13px;
	border: 1px solid rgba(245, 183, 21, 0.5);
	border-radius: 50%;
	opacity: 0;
}

.bf-film__play:hover .bf-film__disc {
	background-color: var(--bf-amber-dark);
	transform: scale(1.06);
}

/*
 * The global focus ring is amber, which would vanish against the amber disc, and
 * it would trace the whole flex column rather than the control the eye is on.
 */
.bf-film__play:focus-visible {
	outline: none;
}

.bf-film__play:focus-visible .bf-film__disc {
	outline: 2px solid var(--bf-white);
	outline-offset: 7px;
}

.bf-film__play-label {
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--bf-white);
	transition: color var(--bf-transition);
}

.bf-film__play:hover .bf-film__play-label {
	color: var(--bf-amber);
}

/* 0.78 rather than the 0.62 this would take on a fixed background: it is the
   smallest text in the band, and it has to clear 4.5:1 over a pale poster too.
   Second pass: lifted to 0.9 for the white card — the card carries the
   contrast, this just needs to clear the small-text threshold on a milky
   ground. */
.bf-film__caption {
	margin: 1.15rem 0 0;
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.9);
}

/* ==========================================================================
   4. Modal
   ========================================================================== */

.bf-film__modal {
	/* Bootstrap's default is white; a sheet of it around a film is a flashbang. */
	--bs-modal-bg: transparent;
}

.bf-film__dialog {
	max-width: min(1080px, calc(100vw - 1.5rem));
}

.bf-film__panel {
	border: 0;
	border-radius: var(--bf-radius-lg);
	background-color: var(--bf-green-darker);
	box-shadow: var(--bf-shadow-lg);
	/* Clips the player's own square corners to the panel's radius. */
	overflow: hidden;
}

.bf-film__frame {
	background-color: var(--bf-green-darker);
}

.bf-film__frame > .bf-film__embed,
.bf-film__frame > .bf-film__video {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	background-color: var(--bf-green-darker);
}

/* Letterbox a portrait or square upload rather than stretching it to 16:9. */
.bf-film__frame > .bf-film__video {
	object-fit: contain;
}

.bf-film__close {
	position: absolute;
	top: 0.7rem;
	right: 0.7rem;
	z-index: 3;
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 50%;
	/* Longhand after Bootstrap's background shorthand, so the X icon survives. */
	background-color: rgba(18, 48, 27, 0.7);
	background-size: 0.85rem;
	opacity: 1;
	transition: background-color var(--bf-transition);
}

.bf-film__close:hover,
.bf-film__close:focus {
	background-color: var(--bf-green);
	opacity: 1;
}

/* ==========================================================================
   5. Responsive
   ========================================================================== */

@media (max-width: 991.98px) {

	.bf-film {
		padding-top: calc(var(--bf-section-y) * 1.05);
		padding-bottom: calc(var(--bf-section-y) * 1.05);
	}

	.bf-film__title {
		max-width: 24ch;
	}
}

@media (max-width: 575.98px) {

	.bf-film__disc {
		width: 78px;
		height: 78px;
		font-size: 2rem;
	}

	.bf-film__play {
		margin-top: 2rem;
		gap: 0.9rem;
	}

	.bf-film__play-label {
		letter-spacing: 0.16em;
	}

	/* Full-bleed at phone widths: 16:9 in a 320px column is already only 180px tall. */
	.bf-film__dialog {
		max-width: none;
		margin: 0.5rem;
	}
}

/* ==========================================================================
   6. Motion
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

	.bf-film__disc::after {
		animation: bf-film-pulse 3s var(--bf-ease) infinite;
	}
}

@keyframes bf-film-pulse {
	0% {
		opacity: 0.7;
		transform: scale(1);
	}

	70%,
	100% {
		opacity: 0;
		transform: scale(1.34);
	}
}

@media (prefers-reduced-motion: reduce) {

	.bf-film__disc,
	.bf-film__play-label,
	.bf-film__close {
		transition: none;
	}

	.bf-film__play:hover .bf-film__disc {
		transform: none;
	}
}