/**
 * Intelliguard Elements — Stakeholder Tabs (canonical widget) styles.
 *
 * Faithful port of src/components/StakeholderTabs.tsx. All selectors are
 * scoped under the `ig-stk` prefix; brand tokens live on the `.ig-stk`
 * wrapper (never :root) so the widget can't leak into the theme and the
 * theme can't override the tokens.
 *
 * Design facts reproduced from the React source:
 *   - Tabs: rounded-xl bordered card; active = gold border + card bg + shadow,
 *     inactive = muted (border-border, bg-card/50) with a gold-40% hover.
 *   - Marker on every tab AND panel title is a VERTICAL GOLD BAR (h-8 w-2,
 *     rounded-full) — gold when active, muted-gray when inactive.
 *   - Panel points list: each <li> is a single teal ROUND dot (h-1.5 w-1.5)
 *     + text, list-style:none, no ::marker/disc. Exactly one dot per point.
 *   - Mobile: tabs are a horizontal row; desktop (>=768px): 3-col grid,
 *     tabs 1/3, content 2/3, tabs stacked vertically.
 */

/* =========================================================================
   Brand tokens + box-sizing (scoped to the wrapper — no :root)
   ========================================================================= */
.ig-stk {
	--ig-navy: hsl(225 70% 17%);
	--ig-navy-light: hsl(225 50% 30%);
	--ig-gold: hsl(38 91% 55%);
	--ig-gold-light: hsl(38 91% 70%);
	--ig-teal: hsl(174 60% 42%);
	--ig-teal-light: hsl(174 50% 60%);
	--ig-background: var(--ig-surface, hsl(0 0% 100%));
	--ig-foreground: var(--ig-ink, hsl(225 70% 17%));
	--ig-muted: hsl(220 20% 96%);
	--ig-muted-foreground: hsl(220 10% 46%);
	--ig-border: hsl(220 20% 90%);
	--ig-card: hsl(0 0% 100%);
	--ig-radius: 0.75rem;

	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	box-sizing: border-box;
	padding: 5rem 0;
	background: var(--ig-surface, var(--ig-muted));
}

.ig-stk * {
	box-sizing: border-box;
}

/* Container — matches the centered marketing container (max 72rem, 2rem pad). */
.ig-stk__container {
	width: 100%;
	max-width: 72rem;
	margin-left: auto;
	margin-right: auto;
	padding-left: 2rem;
	padding-right: 2rem;
}

/* =========================================================================
   Section head
   ========================================================================= */
.ig-stk__head {
	text-align: center;
	margin-bottom: 4rem;
}

.ig-stk__eyebrow {
	display: inline-block;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ig-teal);
	margin-bottom: 0.75rem;
}

.ig-stk__heading {
	font-size: clamp(1.875rem, 4vw, 2.25rem);
	font-weight: 700;
	color: var(--ig-navy);
	margin: 0.75rem 0 1rem;
}

.ig-stk__intro {
	color: var(--ig-muted-foreground);
	max-width: 42rem;
	margin: 0 auto;
	line-height: 1.7;
}

/* =========================================================================
   Grid: tabs (1/3) + content (2/3). Mobile stacks; >=768px is 3 columns.
   (React: grid gap-8 md:grid-cols-3)
   ========================================================================= */
.ig-stk__grid {
	display: grid;
	gap: 2rem;
}

@media (min-width: 768px) {
	.ig-stk__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.ig-stk__content {
		grid-column: span 2;
	}
}

/* -------------------------------------------------------------------------
   Tabs (left). Stacked full-width vertical column at every size: on mobile a
   horizontal row squeezed the three tabs into thirds of the viewport and the
   labels wrapped/squashed; stacking keeps each label on one comfortable line.
   ------------------------------------------------------------------------- */
.ig-stk__tabs {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

@media (min-width: 768px) {
	.ig-stk__tabs {
		gap: 0.75rem;
	}
}

.ig-stk__tab {
	position: relative;
	flex: none;
	overflow: hidden;
	border-radius: 0.75rem;
	border: 1px solid var(--ig-border);
	background: hsl(0 0% 100% / 0.5);
	padding: 1rem 1.25rem;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.ig-stk__tab:hover {
	border-color: hsl(38 91% 55% / 0.4);
	background: var(--ig-card);
}

.ig-stk__tab.is-active {
	border-color: var(--ig-gold);
	background: var(--ig-card);
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.ig-stk__tab-inner {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

/* Vertical GOLD BAR marker — h-8 w-2 rounded-full. Muted when inactive. */
.ig-stk__bar {
	width: 0.5rem;
	height: 2rem;
	border-radius: 9999px;
	background: var(--ig-muted);
	flex-shrink: 0;
	transition: background-color 0.2s ease;
}

.ig-stk__tab.is-active .ig-stk__bar {
	background: var(--ig-gold);
}

.ig-stk__tab-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--ig-muted-foreground);
	font-size: 1.125rem;
	line-height: 1;
	flex-shrink: 0;
	transition: color 0.2s ease;
}

.ig-stk__tab-icon svg,
.ig-stk__tab-icon i {
	width: 1.125rem;
	height: 1.125rem;
	font-size: 1.125rem;
}

.ig-stk__tab.is-active .ig-stk__tab-icon {
	color: var(--ig-gold);
}

.ig-stk__tab-label {
	font-size: 1rem;
	font-weight: 700;
	color: var(--ig-muted-foreground);
	transition: color 0.2s ease;
}

.ig-stk__tab.is-active .ig-stk__tab-label {
	color: var(--ig-navy);
}

/* -------------------------------------------------------------------------
   Content panel (right). rounded-2xl card, min-height, shadow.
   ------------------------------------------------------------------------- */
.ig-stk__content {
	position: relative;
	min-height: 200px;
	border-radius: 1rem;
	border: 1px solid var(--ig-border);
	background: var(--ig-card);
	padding: 2rem;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

@media (min-width: 768px) {
	.ig-stk__content {
		padding: 2.5rem;
	}
}

.ig-stk__panel {
	display: none;
	animation: ig-stk-fade-up 0.4s ease-out both;
}

.ig-stk__panel.is-active {
	display: block;
}

/* Panel title: same vertical GOLD BAR (always gold) + role/headline. */
.ig-stk__panel-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--ig-navy);
	margin: 0 0 1.25rem;
}

.ig-stk__panel-title .ig-stk__bar {
	background: var(--ig-gold);
}

.ig-stk__panel-body {
	font-size: 1rem;
	line-height: 1.7;
	color: var(--ig-muted-foreground);
	margin: 0;
}

/* -------------------------------------------------------------------------
   Points list — ONE teal round dot per point, no disc/::marker leak.
   Reset applied to ul, li AND ::marker to defeat any theme list styling.
   ------------------------------------------------------------------------- */
.ig-stk__points {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.ig-stk__point {
	list-style: none;
	display: flex;
	gap: 0.75rem;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--ig-muted-foreground);
}

/* Kill any inherited/theme ::marker (the reported "stray bullet dot"). */
.ig-stk__points > .ig-stk__point::marker {
	content: "";
	font-size: 0;
}

.ig-stk__point-text {
	display: block;
}

/* The single intended marker: a small teal ROUND dot (h-1.5 w-1.5). */
.ig-stk__dot {
	margin-top: 0.6rem;
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 9999px;
	background: var(--ig-teal);
	flex-shrink: 0;
}

.ig-stk__panel-body + .ig-stk__points {
	margin-top: 1rem;
}

.ig-stk__stat {
	margin: 1.25rem 0 0;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--ig-teal);
}

/* =========================================================================
   Motion
   ========================================================================= */
@keyframes ig-stk-fade-up {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ig-stk__panel,
	.ig-stk__panel.is-active {
		animation: none !important;
	}

	.ig-stk__tab,
	.ig-stk__bar,
	.ig-stk__tab-icon,
	.ig-stk__tab-label {
		transition: none !important;
	}
}