/**
 * The "Our Story" section.
 *
 * Loaded on the front page and on the About Us page (see bananchal_assets()),
 * because the two render the same template part — the About page is that section
 * and nothing else. Depends on the tokens and helpers in assets/css/style.css,
 * which is always enqueued first.
 *
 * 1. Media stack
 * 2. Main frame slider
 * 3. Floating badge
 * 4. Copy column
 * 5. Read more toggle
 * 6. Responsive
 */

/* ==========================================================================
   1. Media stack — portrait hero with a smaller frame breaking out of its corner
   ========================================================================== */

.about-media {
	position: relative;
	/* Room above for the gold rule to overhang the corner. */
	padding-top: 2rem;
	/*
	 * Wider than the old upright frame. A landscape photo is much shorter for the
	 * same width, so at 520px it sat as a small tile beside a tall column of
	 * story; 600 brings the two columns back into balance.
	 */
	max-width: 600px;
	margin: 0 auto;
}

/* Thin gold rule set behind the top-left corner — echoes the sunset disc rule. */
.about-media::before {
	content: '';
	position: absolute;
	top: 0;
	left: -0.75rem;
	width: 46%;
	height: 32%;
	border: 1px solid var(--bf-amber);
	border-radius: var(--bf-radius-lg);
	z-index: 0;
	pointer-events: none;
}

.about-media__frame {
	position: relative;
	overflow: hidden;
	border-radius: var(--bf-radius-lg);
	background-color: var(--bf-sand);
	box-shadow: var(--bf-shadow);
}

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

/*
 * Landscape, and the full width of the column. 4:3 because the photographs come
 * off a camera or a phone, which is the shape they arrive in; object-fit crops a
 * 16:9 or an upright shot into it rather than letterboxing.
 */
.about-media__frame--main {
	z-index: 1;
	width: 100%;
	aspect-ratio: 4 / 3;
}

.about-media:hover .about-media__frame img {
	transform: scale(1.06);
}

/* ==========================================================================
   2. Main frame slider
   ========================================================================== */

/*
 * The carousel has to inherit the frame's height rather than derive its own,
 * otherwise the 3/4 aspect-ratio on the frame is satisfied by an empty box and
 * the photographs hang out below it. Every level down to the item needs saying.
 */
.about-media__carousel,
.about-media__carousel .carousel-inner,
.about-media__carousel .carousel-item {
	height: 100%;
}

/*
 * Both arrows paired in the TOP RIGHT corner.
 *
 * Not along the bottom, and not centred on the side edges either. The white badge
 * is a fixed 15rem (13rem on phones) while this frame is a percentage of the
 * column, so as the column narrows the badge comes to span most of the frame AND
 * the frame gets shorter — being landscape, it loses height fastest of all. On a
 * 320px phone a side-centred arrow ends up within about 10px of the badge, and
 * closer still if the client writes a badge label long enough to wrap to three
 * lines. The top right corner is the one region the badge can never reach, and
 * the gold rule sits at the opposite corner.
 */
.about-media__nav {
	position: absolute;
	top: 0.75rem;
	/*
	 * Only orders the arrows against the carousel items beside them. The main
	 * frame carries z-index: 1 and so opens its own stacking context, which means
	 * no value here can lift a child of it above the badge — a bigger number would
	 * just be a misleading one.
	 */
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.85);
	color: var(--bf-green-dark);
	font-size: 1.1rem;
	line-height: 1;
	box-shadow: var(--bf-shadow-sm);
	cursor: pointer;
	transition: background-color var(--bf-transition), color var(--bf-transition);
}

/* 0.75rem inset + 40px sibling + 8px gap. */
.about-media__nav--prev {
	right: 3.75rem;
}

.about-media__nav--next {
	right: 0.75rem;
}

.about-media__nav:hover,
.about-media__nav:focus-visible {
	background-color: var(--bf-white);
	color: var(--bf-green);
}

/*
 * The frame clips its own overflow, so a default outline on a button pressed
 * against the edge would be shaved off. Inset it instead.
 *
 * Dark green rather than the usual amber: the inset ring is drawn on top of the
 * button, which goes white on focus, and amber on white is about 1.8:1 — under
 * the 3:1 a focus indicator needs. Green-dark on white is roughly 11:1.
 */
.about-media__nav:focus-visible {
	outline: 2px solid var(--bf-green-dark);
	outline-offset: -4px;
}

/*
 * Bootstrap fades between items by holding both in place and animating opacity.
 * Its own .carousel-fade rules already do this; the transition duration is
 * lengthened here so the change reads as a dissolve rather than a flicker.
 */
.about-media__carousel.carousel-fade .carousel-item {
	transition: opacity 0.9s var(--bf-ease);
}

/* A little smaller on the narrowest phones, where the frame itself is short. */
@media (max-width: 359.98px) {

	.about-media__nav {
		width: 34px;
		height: 34px;
		font-size: 1rem;
	}

	/* 0.75rem inset + 34px sibling + 8px gap. */
	.about-media__nav--prev {
		right: 3.375rem;
	}
}

/* ==========================================================================
   3. Floating badge
   ========================================================================== */

.about-badge {
	position: absolute;
	left: 0;
	bottom: 1.5rem;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 0.85rem;
	max-width: 15rem;
	padding: 0.85rem 1.15rem;
	background-color: var(--bf-white);
	border-radius: var(--bf-radius-lg);
	box-shadow: var(--bf-shadow-lg);
}

.about-badge__disc {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--bf-amber);
	color: var(--bf-charcoal);
	font-size: 1.05rem;
	line-height: 1;
}

.about-badge__text {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.about-badge__value {
	font-family: var(--bf-font-display);
	font-size: 1.4rem;
	font-weight: 600;
	color: var(--bf-green-dark);
}

.about-badge__label {
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bf-muted);
}

/* ==========================================================================
   4. Copy column
   ========================================================================== */

.about-copy {
	max-width: 40rem;
}

/* Stagger the two columns as they fade in. */
.about-copy.reveal {
	transition-delay: 0.12s;
}

.about-copy__title {
	margin-bottom: 1rem;
}

.about-copy__tagline {
	font-family: var(--bf-font-display);
	font-size: clamp(1.2rem, 2vw, 1.55rem);
	font-style: italic;
	line-height: 1.5;
	color: var(--bf-green);
	border-left: 2px solid var(--bf-amber);
	padding-left: 1.1rem;
	margin-bottom: 1.9rem;
}

.about-copy__subheading {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	font-size: clamp(1.35rem, 2.2vw, 1.8rem);
	margin-bottom: 1.1rem;
}

.about-copy__subheading::after {
	content: '';
	flex: 1 1 auto;
	height: 1px;
	background-color: var(--bf-line);
}

.about-copy__body {
	color: var(--bf-ink);
}

/*
 * Collapsible tail of the story. Expanded by default so the text is readable
 * without JS; the inline script adds .is-collapsed on load.
 */
.about-copy__more {
	overflow: hidden;
	transition: height 0.5s var(--bf-ease), opacity 0.35s var(--bf-ease), visibility 0s linear 0s;
}

/*
 * Height is driven in pixels by the inline script; this class only handles the
 * fade and, once the collapse has finished, takes the prose out of the
 * accessibility tree — hence the delay on visibility.
 */
.about-copy__more.is-collapsed {
	height: 0;
	opacity: 0;
	visibility: hidden;
	transition: height 0.5s var(--bf-ease), opacity 0.35s var(--bf-ease), visibility 0s linear 0.5s;
}

/* overflow:hidden above makes this margin the gap between intro and tail. */
.about-copy__more-inner > *:first-child {
	margin-top: 1.15rem;
}

.about-copy__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem 2rem;
	margin-top: 1.9rem;
}

/* ==========================================================================
   5. Read more toggle
   ========================================================================== */

.about-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--bf-font-body);
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bf-green-dark);
	cursor: pointer;
	transition: color var(--bf-transition);
}

/* The class rule above would otherwise defeat the hidden attribute. */
.about-toggle[hidden] {
	display: none;
}

.about-toggle:hover,
.about-toggle:focus-visible {
	color: var(--bf-amber-dark);
}

.about-toggle__label {
	position: relative;
	padding-bottom: 4px;
}

.about-toggle__label::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background-color: var(--bf-amber);
	transform: scaleX(1);
	transform-origin: left center;
	transition: transform var(--bf-transition);
}

.about-toggle:hover .about-toggle__label::after {
	transform: scaleX(0.4);
}

.about-toggle__icon {
	font-size: 0.95rem;
	line-height: 1;
	transition: transform var(--bf-transition);
}

.about-toggle[aria-expanded='true'] .about-toggle__icon {
	transform: rotate(180deg);
}

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

/* Column separation lives here rather than on a gx-* utility, see the template. */
@media (min-width: 992px) {
	.about-copy {
		padding-left: 1.75rem;
	}
}

@media (min-width: 1200px) {
	.about-media::before {
		left: -1.25rem;
	}

	.about-badge {
		left: -1.25rem;
	}

	.about-copy {
		padding-left: 3rem;
	}
}

@media (max-width: 991.98px) {
	.about-media {
		max-width: 460px;
		margin-bottom: 0.5rem;
	}

	.about-copy {
		max-width: none;
	}
}

@media (max-width: 575.98px) {
	.about-media {
		padding-top: 2rem;
	}

	.about-badge {
		max-width: 13rem;
		gap: 0.65rem;
		padding: 0.7rem 0.9rem;
		bottom: 1rem;
	}

	.about-badge__disc {
		width: 34px;
		height: 34px;
		font-size: 0.9rem;
	}

	.about-badge__value {
		font-size: 1.2rem;
	}

	.about-badge__label {
		font-size: 0.66rem;
	}

	.about-copy__tagline {
		padding-left: 0.9rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.about-media__frame img,
	.about-media:hover .about-media__frame img {
		transition: none;
		transform: none;
	}

	/*
	 * Autoplay is already withheld in slider.js, but the visitor can still work
	 * the arrows — so the change itself has to be instant rather than a dissolve.
	 */
	.about-media__carousel.carousel-fade .carousel-item {
		transition: none;
	}

	/*
	 * Only the transition goes. The arrows keep their transform, which is doing
	 * the vertical centring, not an animation.
	 */
	.about-media__nav {
		transition: none;
	}

	/* .is-collapsed carries its own transition shorthand, so it needs naming too. */
	.about-copy__more,
	.about-copy__more.is-collapsed,
	.about-toggle,
	.about-toggle__icon,
	.about-toggle__label::after {
		transition: none;
	}
}