/* =========================================================
   EDS Elements – Industry & Capability Explorer  v1.0.0
   eDesign Space | https://edesignspace.com/

   All selectors are scoped under .eds-explorer / .eds-explorer-*
   so they cannot collide with the Blog Carousel widget
   (which uses .eds-bc-* selectors exclusively).
   ========================================================= */

/* ── Root grid ──────────────────────────────────────────── */

.eds-explorer {
	position: relative;
	width: 100%;
}

.eds-explorer-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 480px;
	border-radius: 14px;
	overflow: hidden;
}

/* ── Left column ────────────────────────────────────────── */

.eds-explorer-left {
	background-color: #d8f3dc;
	padding: 60px 50px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.eds-explorer-heading {
	margin: 0 0 14px;
	font-size: 36px;
	font-weight: 600;
	line-height: 1.2;
	color: #111827;
}

.eds-explorer-desc {
	margin: 0 0 32px;
	font-size: 16px;
	line-height: 1.55;
	color: #4b5563;
	max-width: 460px;
}

/* ── Controls row ───────────────────────────────────────── */

.eds-explorer-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* ── Dropdown ──────────────────────────────────────────── */

.eds-explorer-dd {
	position: relative;
	flex: 1 1 200px;
}

.eds-explorer-dd-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 12px 22px;
	border: 1.5px solid #1a3a1a;
	border-radius: 50px;
	background-color: #ffffff;
	color: #1a3a1a;
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	text-align: left;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.eds-explorer-dd-toggle:hover {
	background-color: rgba(26, 58, 26, 0.06);
}

/* Active state — applied when this dropdown holds the
   currently selected item (controlled by JS). */
.eds-explorer-dd.is-active .eds-explorer-dd-toggle {
	background-color: #1a3a1a;
	color: #ffffff;
	border-color: #1a3a1a;
}

.eds-explorer-dd-label {
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* CSS chevron — points down by default, flips to up when open */
.eds-explorer-dd-arrow {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 0.2s ease;
	flex-shrink: 0;
}

.eds-explorer-dd.is-open .eds-explorer-dd-arrow {
	transform: rotate(-135deg) translate(-2px, -2px);
}

/* ── Menu ───────────────────────────────────────────────── */

.eds-explorer-dd-menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 30;
	list-style: none;
	margin: 0;
	padding: 6px;
	background-color: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 16px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
	max-height: 280px;
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition:
		opacity    0.2s ease,
		transform  0.2s ease,
		visibility 0s linear 0.2s;
}

.eds-explorer-dd.is-open .eds-explorer-dd-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition:
		opacity    0.2s ease,
		transform  0.2s ease,
		visibility 0s;
}

.eds-explorer-dd-option {
	padding: 10px 16px;
	font-size: 14px;
	color: #1a3a1a;
	cursor: pointer;
	border-radius: 50px;
	transition: background-color 0.15s ease, color 0.15s ease;
	user-select: none;
}

.eds-explorer-dd-option:hover,
.eds-explorer-dd-option.is-selected {
	background-color: #1a3a1a;
	color: #ffffff;
}

/* ── Right column ──────────────────────────────────────── */

.eds-explorer-right {
	position: relative;
	min-height: 480px;
	overflow: hidden;
	background-color: #1f2937;
}

/* Background image layer — fades during content swap */
.eds-explorer-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center center;
	transition: opacity 0.36s ease;
}

.eds-explorer.is-changing .eds-explorer-bg {
	opacity: 0.5;
}

/* ── Glass card ────────────────────────────────────────── */

.eds-explorer-card {
	position: absolute;
	bottom: 40px;
	left: 40px;
	right: 40px;
	z-index: 2;
	padding: 28px 32px;
	background: rgba(255, 255, 255, 0.55);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 14px;
	transition: opacity 0.36s ease, transform 0.36s ease;
}

.eds-explorer.is-changing .eds-explorer-card {
	opacity: 0.35;
	transform: translateY(8px);
}

.eds-explorer-title {
	margin: 0 0 12px;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.25;
	color: #111827;
}

.eds-explorer-summary {
	margin: 0 0 22px;
	font-size: 15px;
	line-height: 1.55;
	color: rgba(0, 0, 0, 0.72);
}

/* ── CTA ───────────────────────────────────────────────── */

.eds-explorer-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 24px;
	background-color: #5ce65c;
	color: #0d1a0d;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 50px;
	line-height: 1;
	transition: filter 0.2s ease, transform 0.2s ease;
}

.eds-explorer-cta:hover {
	filter: brightness(0.9);
	transform: translateX(3px);
}

/* CSS chevron arrow on the button (pseudo-element keeps DOM clean) */
.eds-explorer-cta::after {
	content: '';
	display: inline-block;
	width: 8px;
	height: 8px;
	border-top:   2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
	flex-shrink: 0;
}

/* ── Responsive ────────────────────────────────────────── */

@media (max-width: 900px) {
	.eds-explorer-grid {
		grid-template-columns: 1fr;
	}
	.eds-explorer-left {
		padding: 40px 24px;
	}
	.eds-explorer-heading { font-size: 26px; }
	.eds-explorer-right   { min-height: 380px; }
	.eds-explorer-card {
		bottom: 20px;
		left:   20px;
		right:  20px;
		padding: 20px 22px;
	}
	.eds-explorer-title   { font-size: 19px; }
	.eds-explorer-summary { font-size: 14px; }
}