/**
 * Accordion Module
 * Left intro column + single-open vertical accordion on the right.
 */

/* ===========================
   # Section
=========================== */

.accordion-module {
	background: var(--nec-light-grey);
	padding:    80px 0;
}
.accordion-module.accordion-module--narrow {padding: 80px 100px;}



/* ===========================
   # Layout row
=========================== */

.accordion__row {
	--bs-gutter-x: 4rem;
	align-items:   flex-start;
}

/* ===========================
   # Left column
=========================== */

.accordion__left {
	padding-top: 8px; /* align with first accordion item border */
}

.accordion__heading {
	margin-bottom: 24px;
	color:         var(--nec-grey);
}

.accordion__intro {
	color:       var(--nec-grey);
	line-height: 1.7;
}

.accordion__intro p:first-child {
	margin-top: 0;
}

.accordion__intro p:last-child {
	margin-bottom: 0;
}

/* ===========================
   # Right column
=========================== */

.accordion__right {
	padding-top: 0;
}

/* ===========================
   # Accordion list
=========================== */

.accordion__list {
	width: 100%;
}

/* ===========================
   # Accordion item
=========================== */

.accordion__item {
	border-top: 1px solid #d4d4d6;
}

.accordion__item:last-child {
	border-bottom: 1px solid #d4d4d6;
}

/* ===========================
   # Trigger button
=========================== */

.accordion__trigger {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             16px;
	width:           100%;
	padding:         20px 0;
	background:      none;
	border:          none;
	cursor:          pointer;
	text-align:      left;
}

.accordion__trigger:focus-visible {
	outline:        2px solid var(--nec-orange);
	outline-offset: 2px;
	border-radius:  2px;
}

.accordion__item-heading {
	font-family:  var(--nec-font);
	font-size:    clamp(0.9375rem, calc(0.894rem + 0.188vw), 1.0625rem);
	font-weight:  500;
	color:        var(--nec-grey);
	line-height:  1.3;
	flex:         1;
}

/* ===========================
   # Toggle icons
=========================== */

.accordion__icon {
	flex-shrink: 0;
	display:     flex;
	align-items: center;
}

.accordion__icon svg {
	width:  20px;
	height: 20px;
	display: block;
}

/* Show closed icon by default, open icon when active */
.accordion__icon--open {
	display: none;
}

.accordion__item.is-active .accordion__icon--open {
	display: flex;
}

.accordion__item.is-active .accordion__icon--closed {
	display: none;
}

/* ===========================
   # Panel (content)
   Uses CSS grid trick for smooth height animation.
=========================== */

.accordion__panel {
	display:              grid;
	grid-template-rows:   0fr;
	transition:           grid-template-rows 0.35s ease;
}

.accordion__item.is-active .accordion__panel {
	grid-template-rows: 1fr;
}

.accordion__panel-inner {
	overflow: hidden;
}

.accordion__panel-body {
	padding-bottom: 24px;
	color:          var(--nec-grey);
	line-height:    1.7;
}

.accordion__panel-body p:first-child {
	margin-top: 0;
}

.accordion__panel-body p:last-child {
	margin-bottom: 0;
}

/* ===========================
   # Centered layout
   Optional modifier (accordion_centered_layout) — collapses the two
   columns into one, centered at 60% width, with accordion__intro stacked
   above accordion__list instead of split left/right. Markup/columns are
   unchanged; this just overrides the Bootstrap grid widths so the columns
   stack full-width inside a narrower, centered row.
=========================== */

.accordion-module--centered .accordion__row {
	max-width:     60%;
	margin-left:   auto;
	margin-right:  auto;
	flex-direction: column;
}

.accordion-module--centered .accordion__left,
.accordion-module--centered .accordion__right {
	width:    100%;
	max-width: 100%;
	flex:     0 0 100%;
}

.accordion-module--centered .accordion__left {
	padding-bottom: 40px;
}

/* Bootstrap spacer column between left/right — not needed once stacked. */
.accordion-module--centered .accordion__row > .col-lg-1 {
	display: none;
}

/* ===========================
   # Responsive — 1280px
=========================== */

@media (max-width: 1280px) {
	.accordion-module {
		padding: 64px 0;
	}

	.accordion__row {
		--bs-gutter-x: 3rem;
	}
}

/* ===========================
   # Responsive — 991px
=========================== */

@media (max-width: 991px) {
	.accordion-module {
		padding: 48px 0;
	}

	.accordion__row {
		--bs-gutter-x: 1.5rem;
	}

	.accordion__left {
		padding-top:    0;
		padding-bottom: 40px;
	}

	.accordion-module.accordion-module--narrow {padding: 80px 0px;}

	/* 60% is too narrow once the row wraps to a single column at this
	   breakpoint anyway — let it use the full container width instead. */
	.accordion-module--centered .accordion__row {
		max-width: 100%;
	}
}

/* ===========================
   # Responsive — 599px
=========================== */

@media (max-width: 599px) {
	.accordion-module {
		padding: 36px 0;
	}

	.accordion__left {
		padding-bottom: 28px;
	}

	.accordion__icon svg {
		width:  36px;
		height: 36px;
	}

	.accordion__trigger {
		padding: 16px 0;
	}
}