/*
 * Mission & Vision — About Us page tab section.
 *
 * Deliberately reuses assets/css/home/industries.css's own structure/values
 * almost verbatim (background #F5F5F5, 24px panel radius, 48px panel
 * padding, pill/card typography+sizing) — see that file for the shared
 * baseline, INCLUDING expanding in place at the clicked item's own list
 * position (no `order` reshuffling) so the expanded card pushes later
 * items downward instead of jumping above earlier ones. Differences from
 * Industries, all requested for this build:
 *
 *   1. STRUCTURE: this is NOT a two-column (flex/grid) layout. The
 *      illustration is not a "right column" at all — .mission-vision-
 *      section__panel-inner holds the card+tabs in normal block flow at
 *      their own natural width, and .mission-vision-section__right is a
 *      SEPARATE, independently absolutely-positioned sibling laid on top
 *      of the whole panel (position:relative on the panel/panel-inner is
 *      only there to give that absolute element a containing block — it
 *      plays no part in sizing or aligning the card/tabs). It's sized to
 *      ~58% of the panel's width and deliberately overlaps ~160px into
 *      the card, sitting IN FRONT of it (z-index:5 vs the card's
 *      z-index:2) — the opposite of a normal "content on top" stack, per
 *      the Figma showing the illustration overlapping the card. Nothing
 *      clips it: overflow:visible on both the panel and panel-inner.
 *   2. Fade timing is 300ms (Industries uses 400ms) — this build's own
 *      spec calls that out explicitly.
 *
 * Tablet/mobile switch .panel-inner to a column flex layout (scoped to
 * those breakpoints only) purely so `order` can move the image above the
 * card and the two stack with a normal gap — the desktop rule above is
 * NOT flex, by design.
 *
 * Container/panel/card numbers below (1376px container, 80px panel
 * padding, 800px card width, 24px card radius, 1px #FFFFFF card border)
 * are taken directly from the Figma component's own inspect panel
 * (Component 248), not estimated.
 *
 * @package Greenova
 */

.mission-vision-section {
	padding-block: 64px;
}

.mission-vision-section__inner {
	max-width: 1376px;
	margin:    0 auto;
}

/* =============================================================================
   Panel
   ============================================================================= */

.mission-vision-section__panel {
	position:      relative;
	z-index:       1;
	overflow:      visible; /* The illustration is allowed to visually overlap past this panel's own edges — never clip it. */
	background:    #F5F5F5;
	border-radius: 24px;
	box-sizing:    border-box;
}

/*
 * position:relative purely to give .mission-vision-section__right (an
 * absolutely-positioned sibling, NOT a flex/grid column) a containing
 * block. This is plain block flow otherwise — .left sizes itself to its
 * own natural width, nothing here lays it out in a row.
 * overflow:visible (not the default anyway, but explicit here) so the
 * overlapping illustration is never clipped.
 */
.mission-vision-section__panel-inner {
	position:   relative;
	overflow:   visible;
	padding:    80px; /* Exact Figma value (was 48px, an Industries-borrowed guess). */
	box-sizing: border-box;
}

/* =============================================================================
   Content card + nav pills — a normal block element, NOT a flex column.
   ============================================================================= */

.mission-vision-section__left {
	position:       relative;
	z-index:        2; /* Above the overlapping illustration — see .mission-vision-section__right below. */
	display:        flex;
	flex-direction: column;
	gap:            16px;
	width:          800px; /* Exact Figma value (was 423px, an Industries-borrowed guess — the real card is nearly twice as wide). */
	max-width:      100%;
}

.mission-vision-section__nav {
	list-style:     none;
	margin:         0;
	padding:        0;
	display:        flex;
	flex-direction: column;
	gap:            12px;
}

/*
 * Each nav item carries BOTH its collapsed (pill) and expanded (card)
 * content up front — only one is ever displayed, toggled purely by the
 * .is-active class the JS puts on the <li>, identical technique to
 * Industries — including expanding IN PLACE at the item's own position in
 * the list (no `order` reshuffling), so the expanded card always pushes
 * the items below it downward instead of jumping above earlier ones.
 */

/*
 * Collapsed (default) size is an EXACT Figma value — 270x52px, NOT a
 * full-width bar stretching the 800px card's own width (the earlier
 * 100%-wide/padding-sized button was reading as "too small" against the
 * Figma precisely because it wasn't actually this size at all).
 */
.mission-vision-section__nav-btn {
	display:       flex;
	align-items:   center;
	width:         270px;
	max-width:     100%;
	height:        52px;
	background:    #F3F4F5;
	border:        1px solid #B6B9CE;
	border-radius: 28px;
	padding:       0 16px;
	box-sizing:    border-box;
	cursor:        pointer;
	text-align:    left;
	/*
	 * Structural (size/shape) properties get a slower, eased transition so
	 * the expand/collapse itself reads as a smooth grow rather than a snap
	 * — background/border-color stay on their own quicker timing since
	 * those also drive the (unrelated, should stay snappy) hover feedback
	 * on the still-collapsed pills.
	 */
	transition:
		background-color 0.15s ease,
		border-color      0.15s ease,
		width             0.7s cubic-bezier(0.4, 0, 0.2, 1),
		height            0.7s cubic-bezier(0.4, 0, 0.2, 1),
		padding           0.7s cubic-bezier(0.4, 0, 0.2, 1),
		border-radius     0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.mission-vision-section__nav-item:not(.is-active) .mission-vision-section__nav-btn:hover {
	border-color:     #219FD6;
	background-color: rgba(33, 159, 214, 0.06);
}

/* --- Collapsed (default): icon + label pill --- */

.mission-vision-section__nav-collapsed {
	display:     flex;
	align-items: center;
	gap:         10px;
}

.mission-vision-section__nav-icon {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           20px;
	height:          20px;
	flex-shrink:     0;
}

.mission-vision-section__nav-icon img {
	width:   100%;
	height:  100%;
	display: block;
}

.mission-vision-section__nav-label {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:   14px;
	font-weight: 400;
	line-height: 1.3;
	color:       #1B250E;
}

/* --- Expanded (active item only): the info card, hidden until active --- */

.mission-vision-section__nav-expanded {
	display:        none;
	flex-direction: column;
	gap:            8px;
}

.mission-vision-section__card-title {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:   16px;
	font-weight: 400;
	line-height: 20px;
	color:       #000000;
}

.mission-vision-section__card-desc {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:   14px;
	font-weight: 400;
	line-height: 22.4px;
	color:       #7C7B7B;
}

.mission-vision-section__card-desc p {
	margin: 0 0 12px;
}

.mission-vision-section__card-desc > *:last-child {
	margin-bottom: 0;
}

/* --- Active item: button becomes the white info card --- */

.mission-vision-section__nav-item.is-active .mission-vision-section__nav-btn {
	width:           100%; /* Overrides the collapsed pill's fixed 270px — expanded, it's the full-width card. */
	height:          auto; /* Overrides the collapsed pill's fixed 52px — content-driven height instead. */
	min-height:      128px;
	background:      #FFFFFF;
	border:          1px solid #FFFFFF; /* Exact Figma value. */
	border-radius:   24px;
	padding:         30px 50px 30px 50px;
	cursor:          default;
	display:         flex;
	flex-direction:  column;
	justify-content: center;
}

.mission-vision-section__nav-item.is-active .mission-vision-section__nav-collapsed {
	display: none;
}

.mission-vision-section__nav-item.is-active .mission-vision-section__nav-expanded {
	display: flex;
	/*
	 * display:none -> flex can't be transitioned, so this fades the content
	 * in via a small keyframe animation instead, timed to start once the
	 * box's own width/height transition above is mostly done growing —
	 * without this the text would pop in instantly partway through what's
	 * now a much slower expand, reading as broken rather than smooth.
	 */
	animation: mission-vision-content-in 0.4s ease-out both;
	animation-delay: 0.35s;
}

@keyframes mission-vision-content-in {
	from {
		opacity:   0;
		transform: translateY(4px);
	}
	to {
		opacity:   1;
		transform: translateY(0);
	}
}

/* =============================================================================
   Illustration — cross-fading image stack. ABSOLUTELY POSITIONED and
   entirely independent of the card/tabs' layout (not a flex/grid column,
   not sized or aligned relative to any "right column" — its position is
   just a fixed offset from the panel-inner's own left/top edges). Sits IN
   FRONT of the card (z-index:5, above .mission-vision-section__left's
   z-index:2), unlike Industries where content always stays on top.
   ============================================================================= */

.mission-vision-section__right {
	position:     absolute;
	bottom:       24px; /* Bottom-aligned to sit on the panel's bottom edge, per the Figma — NOT vertically centered. */
	left:         740px; /* .left ends at 80px padding + 800px width = 880px; 730px overlaps ~150px into that column. */
	width:        52%;   /* Reduced from 58% — was rendering noticeably larger than the Figma (one confirmed sub-image inside the illustration is ~41% of the 1376px container on its own). */
	aspect-ratio: 2 / 1;  /* Matches these illustrations' own natural proportions; height is never fixed in px so it scales with the width above. */
	z-index:      5;
	pointer-events: none; /* Purely decorative overlap — never blocks clicks on the pill buttons/card underneath it. */
}

.mission-vision-section__image {
	position:   absolute;
	inset:      0;
	width:      100%;
	height:     100%;
	object-fit: contain;
	opacity:    0;
	transition: opacity 0.3s ease; /* 300ms, per this build's spec (Industries itself uses 400ms). */
}

/*
 * One-off exception for the "Our Mission" tab (index 0) ONLY — it's a
 * wider multi-window composite whose visible artwork sits closer to the
 * left edge of its own source file than the other tabs' (more centered,
 * single-illustration) images, so the shared box position every other tab
 * uses reaches far enough left to cover this card's text. :has() scopes
 * this override to only fire while THIS tab's button is
 * aria-selected="true" (kept in sync by mission-vision.js), repositioning
 * the shared .mission-vision-section__right wrapper just for that state —
 * tabs 1 and 2 keep the original shared position/size untouched.
 */
.mission-vision-section__panel-inner:has([data-mission-vision-index="0"][aria-selected="true"]) .mission-vision-section__right {
	position:     absolute;
	bottom:       24px; /* Bottom-aligned, matching the shared rule above — NOT vertically centered. */
	left:         848px; /* .left ends at 80px padding + 800px width = 880px. */
	width:        39%;
	aspect-ratio: 2 / 1;
	z-index:      5;
	pointer-events: none;
}

.mission-vision-section__image.is-active {
	opacity: 1;
}

/* =============================================================================
   Responsive
   ============================================================================= */

@media ( max-width: 1199.98px ) {
	.mission-vision-section__inner {
		padding-inline: 24px;
	}
}

@media ( max-width: 991.98px ) {
	.mission-vision-section {
		padding-block: 48px;
	}

	/*
	 * Below this breakpoint the illustration stacks with the card instead
	 * of overlapping it (absolute positioning only makes sense alongside a
	 * fixed-width card) — switching to a column flex layout here (and ONLY
	 * here; the desktop rule is plain block flow) is what lets `order`
	 * move it above the card at the mobile breakpoint below.
	 */
	.mission-vision-section__panel-inner {
		display:        flex;
		flex-direction: column;
		padding:        32px;
		gap:            32px;
	}

	.mission-vision-section__left {
		width: 100%;
		flex:  1 1 auto;
	}

	.mission-vision-section__right,
	.mission-vision-section__panel-inner:has([data-mission-vision-index="0"][aria-selected="true"]) .mission-vision-section__right {
		position:      relative;
		bottom:        auto;
		left:          auto;
		right:         auto;
		width:         100%;
		aspect-ratio:  4 / 3;
		min-height:    240px;
		margin-top:    -24px;
	}
}

@media ( max-width: 767.98px ) {
	.mission-vision-section__panel-inner {
		padding: 20px;
		gap:     20px;
	}

	/* No overlap on mobile — image sits as a normal full-width block above
	   the nav list (order:-1 puts it first, ahead of the pills/card). */
	.mission-vision-section__right {
		order:      -1;
		margin-top: 0;
		aspect-ratio: 1 / 1;
		min-height:   220px;
	}

	.mission-vision-section__panel {
		border-radius: 16px;
	}

	.mission-vision-section__nav-item.is-active .mission-vision-section__nav-btn {
		border-radius: 16px;
		padding:       16px;
		min-height:    0;
	}
}