/*
 * industries.css — Home page: Industries section.
 *
 * Eyebrow + heading, then a gray panel with a white info card + vertical
 * pill nav on the left, and a cross-fading image stack on the right.
 * Switching is handled by assets/js/home/industries.js; this file owns
 * every visual — no inline styles in the template.
 *
 * Only enqueued on the front page / Home Page template (see inc/enqueue.php).
 *
 * @package Greenova
 */

.industries {
	padding-block: 64px;
}

/* =============================================================================
   Eyebrow + Heading
   ============================================================================= */

.industries__eyebrow {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:   16px;
	font-weight: 400;
	line-height: 20px;
	color:       #000000;
	text-align:  center;
	margin:      0 0 8px;
}

.industries__heading {
	font-family:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:      48px;
	font-weight:    500;
	line-height:    52.8px;
	letter-spacing: -1.92px;
	color:          #000000;
	text-align:     center;
	max-width:      760px;
	margin:         0 auto 40px;
}

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

.industries__panel {
	background:    #F5F5F5;
	border-radius: 24px;
	max-width:     1376px;
	margin-inline: auto;
	box-sizing:    border-box;
}

/*
 * No fixed/min height here — the row sizes to the LEFT column's real
 * content (nav pills + the one expanded card), which is the only column
 * that contributes natural height: .industries__image is absolutely
 * positioned, so .industries__right has no content height of its own.
 * align-items:stretch then matches the right column's height to that,
 * so the image area is always exactly as tall as the nav list currently
 * is — never an oversized box with empty space below it.
 */
.industries__panel-inner {
	display:     flex;
	align-items: stretch;
	gap:         40px;
	padding:     48px;
	box-sizing:  border-box;
}

/* =============================================================================
   Left column: info card + nav pills
   ============================================================================= */

.industries__left {
	display:        flex;
	flex-direction: column;
	gap:            16px;
	flex:           0 0 423px;
	width:          423px;
}

.industries__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>. This is what makes the active
 * item expand IN PLACE at its own position in the list, instead of a
 * separate fixed card living above the list.
 */

.industries__nav-btn {
	display:        inline-flex;
	align-items:    center;
	width:          270px;
	height:         52px;
	max-width:      100%;
	background:     #F3F4F5;
	border:         1px solid #B6B9CE;
	border-radius:  28px;
	padding:        10px 16px;
	box-sizing:     border-box;
	cursor:         pointer;
	text-align:     left;
	transition:     background-color 0.15s ease, border-color 0.15s ease, border-radius 0.15s ease, padding 0.15s ease;
}

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

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

.industries__nav-collapsed {
	display:     flex;
	align-items: center;
	gap:         10px;
}

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

.industries__nav-icon img {
	width:   100%;
	height:  100%;
	display: block;
}

.industries__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 --- */

.industries__nav-expanded {
	display:        none;
	flex-direction: column;
	gap:            8px;
}

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

.industries__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;
}

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

.industries__nav-item.is-active .industries__nav-btn {
	width:         100%;
	height:        auto;
	min-height:    128px;
	background:    #FFFFFF;
	border-color:  transparent;
	border-radius: 24px;
	padding:       24px;
	cursor:        default;
	display:       flex;
	flex-direction: column;
	justify-content: center;
}

.industries__nav-item.is-active .industries__nav-collapsed {
	display: none;
}

.industries__nav-item.is-active .industries__nav-expanded {
	display: flex;
}

/* =============================================================================
   Right column: cross-fading image stack
   ============================================================================= */

.industries__right {
	position: relative;
	flex:     1 1 auto;
	min-width: 0;
}

.industries__image {
	position:   absolute;
	inset:      0;
	width:      100%;
	height:     100%;
	object-fit: contain;
	opacity:    0;
	z-index:    1;
	transition: opacity 0.4s ease;
}

.industries__image.is-active {
	opacity: 1;
	z-index: 2;
}

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

@media ( max-width: 1399.98px ) {
	.industries__panel {
		max-width: calc(100% - 48px);
	}
}

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

	.industries__heading {
		font-size:      2rem;
		line-height:    1.2;
		letter-spacing: -0.02em;
		max-width:      560px;
	}

	.industries__panel {
		max-width: calc(100% - 32px);
	}

	.industries__panel-inner {
		flex-direction: column;
		padding:        32px;
		gap:            32px;
	}

	.industries__left {
		width: 100%;
		flex:  1 1 auto;
	}

	.industries__right {
		width:        100%;
		aspect-ratio: 4 / 3;
		min-height:   280px;
	}
}

@media ( max-width: 575.98px ) {
	.industries {
		padding-block: 36px;
	}

	.industries__eyebrow {
		font-size: 14px;
	}

	.industries__heading {
		font-size:   1.625rem;
		line-height: 1.25;
		max-width:   none;
	}

	.industries__panel {
		max-width:     calc(100% - 16px);
		border-radius: 16px;
	}

	.industries__panel-inner {
		padding: 20px;
		gap:     20px;
	}

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

	.industries__right {
		aspect-ratio: 1 / 1;
		min-height:   220px;
	}
}