/*
 * BBI Principles — frontend styles.
 *
 * Same rules as about.css "HOW WE WORK" section, but every selector is
 * qualified with the .how-we-work parent for higher specificity, and the
 * critical visual properties (display, layout, color, background) carry
 * !important so a WordPress theme can't override them via .entry-content
 * button {...} or similar broad rules.
 *
 * Self-contained: design tokens and the .container / .eyebrow / h2 base
 * styles the section depends on are bundled in, scoped under .how-we-work.
 */

/* ---- Scoped design tokens ---- */
.how-we-work {
	--navy-900:    #444342;
	--teal-600:    #295E7E;
	--teal-700:    #3f7378;
	--orange-500:  #E58351;
	--font-display: "Archivo Black", "Archivo", system-ui, sans-serif;
	--font-heading: "Archivo", system-ui, sans-serif;
	--font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--container:   1360px;
	--gutter:      clamp(1.25rem, 3.5vw, 2.5rem);
	--radius:      4px;
	--ease:        cubic-bezier(.4, 0, .2, 1);
}

/* ---- Section base ---- */
.how-we-work {
	background: var(--hww-bg, #295E7E) !important;
	color: var(--hww-text, #fff) !important;
	padding-block: clamp(4rem, 7vw, 6.5rem) !important;
	position: relative;
	overflow: hidden;
	font-family: var(--font-body) !important;
}
.how-we-work::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
	background-size: 48px 48px;
	-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 40%, transparent 100%);
	        mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 40%, transparent 100%);
	pointer-events: none;
}

/* ---- Container helper (scoped) ---- */
.how-we-work .container {
	width: 100% !important;
	max-width: var(--container) !important;
	margin: 0 auto !important;
	padding-inline: var(--gutter) !important;
	position: relative;
	z-index: 1;
}

/* ---- Header ---- */
.how-we-work .hww-header {
	text-align: center !important;
	margin-bottom: clamp(2.5rem, 4vw, 3.5rem) !important;
	position: relative;
	z-index: 1;
}
.how-we-work .hww-header .eyebrow {
	font-family: var(--font-body) !important;
	font-size: .82rem !important;
	font-weight: 600 !important;
	letter-spacing: .18em !important;
	text-transform: uppercase !important;
	color: var(--orange-500) !important;
	margin: 0 0 1em !important;
	padding-left: 2.5rem !important;
	position: relative;
	display: inline-block !important;
}
.how-we-work .hww-header .eyebrow::before {
	content: "" !important;
	position: absolute !important;
	left: 0 !important;
	top: 50% !important;
	width: 2rem !important;
	height: 2px !important;
	background: var(--orange-500) !important;
	transform: translateY(-50%);
}
.how-we-work .hww-header h2 {
	color: var(--hww-text, #fff) !important;
	font-family: var(--font-display) !important;
	font-weight: 400 !important;
	text-transform: none !important;
	letter-spacing: -.01em !important;
	font-size: clamp(2rem, 3.4vw, 3rem) !important;
	line-height: 1.05 !important;
	margin: 0 0 .85rem !important;
}
.how-we-work .hww-intro {
	color: rgba(255,255,255,.75) !important;
	max-width: 56ch !important;
	margin: 0 auto !important;
	font-size: 1.15rem !important;
	line-height: 1.55 !important;
	font-family: var(--font-body) !important;
}

/* ---- The horizontal stack ---- */
.how-we-work .values-stack {
	position: relative;
	z-index: 1;
	display: grid !important;
	grid-template-columns: 4fr 1fr 1fr 1fr 1fr !important;
	gap: .65rem !important;
	transition: grid-template-columns .6s var(--ease);
	align-items: stretch !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
.how-we-work .values-stack:has(.value-panel[data-i="0"].is-active) { grid-template-columns: 4fr 1fr 1fr 1fr 1fr !important; }
.how-we-work .values-stack:has(.value-panel[data-i="1"].is-active) { grid-template-columns: 1fr 4fr 1fr 1fr 1fr !important; }
.how-we-work .values-stack:has(.value-panel[data-i="2"].is-active) { grid-template-columns: 1fr 1fr 4fr 1fr 1fr !important; }
.how-we-work .values-stack:has(.value-panel[data-i="3"].is-active) { grid-template-columns: 1fr 1fr 1fr 4fr 1fr !important; }
.how-we-work .values-stack:has(.value-panel[data-i="4"].is-active) { grid-template-columns: 1fr 1fr 1fr 1fr 4fr !important; }

/* ---- Each panel ---- */
.how-we-work .values-stack .value-panel {
	/* Hard reset of theme button styles */
	-webkit-appearance: none !important;
	appearance: none !important;
	font: inherit;
	box-shadow: none;

	position: relative;
	display: flex !important;
	flex-direction: column !important;
	gap: .85rem !important;
	align-items: stretch !important;
	justify-content: flex-start !important;

	background: rgba(255,255,255,.04) !important;
	color: var(--hww-text, #fff) !important;
	text-align: left !important;
	padding: 1.5rem 1.25rem 1.75rem !important;
	border: 0 !important;
	border-top: 4px solid var(--accent, var(--orange-500)) !important;
	border-radius: 4px !important;
	cursor: pointer !important;
	overflow: hidden !important;
	transition: background .35s var(--ease), transform .35s var(--ease);
	font-family: var(--font-body) !important;
	width: auto !important;
	height: auto !important;
	min-height: 0;
	text-decoration: none !important;
	text-transform: none !important;
}
.how-we-work .values-stack .value-panel:hover:not(.is-active) {
	background: rgba(255,255,255,.08) !important;
}
.how-we-work .values-stack .value-panel.is-active {
	background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02)) !important;
	box-shadow: 0 24px 56px -24px rgba(0,0,0,.6) !important;
	padding: 1.75rem 2rem 2rem !important;
}
.how-we-work .values-stack .value-panel:focus-visible {
	outline: 2px solid var(--hww-text, #fff) !important;
	outline-offset: -3px !important;
}

/* ---- Number ---- */
.how-we-work .values-stack .value-panel .value-number {
	font-family: var(--font-heading) !important;
	font-size: 1rem !important;
	letter-spacing: .14em !important;
	color: var(--accent, var(--orange-500)) !important;
	font-weight: 700 !important;
	text-transform: none !important;
	margin: 0 !important;
	display: block !important;
}

/* ---- Label ---- */
.how-we-work .values-stack .value-panel .value-label {
	font-family: var(--font-display) !important;
	font-size: clamp(1.25rem, 1.9vw, 1.75rem) !important;
	font-weight: 400 !important;
	letter-spacing: -.005em !important;
	text-transform: uppercase !important;
	line-height: 1 !important;
	color: var(--hww-text, #fff) !important;
	writing-mode: vertical-rl !important;
	-webkit-writing-mode: vertical-rl;
	transform: rotate(180deg) !important;
	transition: font-size .3s var(--ease);
	margin: .5rem 0 0 !important;
	display: block !important;
}
.how-we-work .values-stack .value-panel.is-active .value-label {
	writing-mode: horizontal-tb !important;
	-webkit-writing-mode: horizontal-tb;
	transform: rotate(0) !important;
	font-size: clamp(2rem, 3.6vw, 3.25rem) !important;
	line-height: .95 !important;
	margin: 0 0 .25rem !important;
}

/* ---- Body (collapsed = hidden) ---- */
.how-we-work .values-stack .value-panel .value-detail {
	display: none !important;
	flex-direction: column;
	gap: .65rem;
	max-width: 460px;
	opacity: 0;
	transform: translateX(-12px);
	transition: opacity .35s var(--ease) .15s, transform .45s var(--ease) .15s;
}
.how-we-work .values-stack .value-panel.is-active .value-detail {
	display: flex !important;
	opacity: 1 !important;
	transform: translateX(0) !important;
}

.how-we-work .values-stack .value-panel .value-headline {
	font-family: var(--font-heading) !important;
	font-size: clamp(1.4rem, 2.2vw, 1.9rem) !important;
	font-weight: 700 !important;
	color: var(--hww-text, #fff) !important;
	text-transform: none !important;
	letter-spacing: -.005em !important;
	line-height: 1.15 !important;
	margin: 0 !important;
	display: block !important;
}
.how-we-work .values-stack .value-panel .value-tagline {
	font-family: var(--font-body) !important;
	font-size: 1.1rem !important;
	font-weight: 500 !important;
	color: white !important;
	font-style: italic !important;
	margin: 0 !important;
	display: block !important;
}
.how-we-work .values-stack .value-panel .value-rule {
	width: 40px !important;
	height: 3px !important;
	background: var(--accent, var(--orange-500)) !important;
	margin: .15rem 0 !important;
	display: block !important;
	border: 0 !important;
}
.how-we-work .values-stack .value-panel .value-copy {
	font-size: 1.02rem !important;
	line-height: 1.65 !important;
	color: rgba(255,255,255,.78) !important;
	margin: 0 !important;
	display: block !important;
}
.how-we-work .values-stack .value-panel .value-copy br {
	display: block;
	content: "";
	margin-top: .35rem;
}

/* ---- Responsive: vertical accordion below 1024px ---- */
@media (max-width: 1024px) {
	.how-we-work .values-stack,
	.how-we-work .values-stack:has(.value-panel.is-active) {
		grid-template-columns: 1fr !important;
		grid-template-rows: auto !important;
	}
	.how-we-work .values-stack .value-panel {
		min-height: 0 !important;
		padding: 1.5rem !important;
	}
	.how-we-work .values-stack .value-panel .value-label {
		writing-mode: horizontal-tb !important;
		-webkit-writing-mode: horizontal-tb;
		transform: none !important;
		font-size: clamp(1.65rem, 4vw, 2.25rem) !important;
		align-self: start !important;
		margin-top: 0 !important;
	}
	.how-we-work .values-stack .value-panel.is-active .value-label {
		font-size: clamp(1.85rem, 5vw, 2.75rem) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.how-we-work .values-stack,
	.how-we-work .values-stack .value-panel,
	.how-we-work .values-stack .value-panel .value-label,
	.how-we-work .values-stack .value-panel .value-detail {
		transition: none !important;
	}
}

/* ---- Plugin-only empty state for editors ---- */
.how-we-work .bbi-principles-empty {
	max-width: 600px;
	margin: 0 auto;
	padding: 1.5rem;
	background: rgba(255, 255, 255, .05);
	border-left: 4px solid var(--orange-500);
	border-radius: 4px;
	font-size: .95rem;
	color: var(--hww-text, #fff);
	position: relative;
	z-index: 1;
}