/**
 * Armchair Journal — Front Page Template Styles
 * Hero grid, Orientation strip, Discover sliders, Debate, Bias meter, Toolkit, CTA.
 */

/* ─── Front Page Hero Eyebrow Bar ─── */
.aj-front-eyebrow-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	padding-bottom: 18px;
	margin-bottom: 28px;
	border-bottom: 1px solid var(--aj-color-border-default, #dfe3ea);
}

.aj-front-eyebrow-text {
	font-family: var(--aj-font-mono, 'IBM Plex Mono', monospace);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--aj-color-text-muted, #5f697a);
}

.aj-front-eyebrow-toggle-wrap {
	display: flex;
	align-items: center;
	gap: 12px;
}

.aj-front-eyebrow-toggle-label {
	font-family: var(--aj-font-mono, 'IBM Plex Mono', monospace);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--aj-color-text-muted, #8a94a3);
}

/* ─── Hero Grid ─── */
.aj-front-hero-grid {
	display: grid;
	grid-template-columns: 1.55fr 1fr;
	gap: 0 48px;
	align-items: start;
	margin-bottom: 48px;
}

.aj-front-hero-lead {
	border-right: 1px solid var(--aj-color-border-default, #dfe3ea);
	padding-right: 48px;
}

.aj-front-hero-rail-header {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--aj-color-text-muted, #5f697a);
	padding-bottom: 12px;
	border-bottom: 1px solid var(--aj-color-border-default, #dfe3ea);
	margin-bottom: 0;
}

.aj-front-hero-rail-list {
	display: flex;
	flex-direction: column;
}

/* ─── Orientation / How It Works Strip ─── */
.aj-orientation-strip {
	background-color: var(--aj-color-bg-alt, #f6f7fa);
	border-top: 1px solid var(--aj-color-border-light, #eef1f6);
	border-bottom: 1px solid var(--aj-color-border-light, #eef1f6);
	padding: 32px 0;
}

.aj-orientation-content {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.aj-orientation-text {
	font-family: var(--aj-font-serif, 'EB Garamond', serif);
	font-style: italic;
	font-size: 18px;
	line-height: 1.45;
	color: var(--aj-color-navy-light, #1a3d74);
	max-width: 620px;
}

.aj-orientation-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

/* ─── Slide Your Article (Discover) ─── */
.aj-discover-section {
	background-color: #ffffff;
	border-bottom: 1px solid var(--aj-color-border-light, #eef1f6);
	padding: 64px 0 68px;
}

.aj-section-header {
	max-width: 760px;
	margin-bottom: 32px;
}

.aj-section-tag {
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--aj-color-crimson, #c33d29);
	margin-bottom: 10px;
}

.aj-section-title {
	font-family: var(--aj-font-serif, 'EB Garamond', serif);
	font-size: 37px;
	line-height: 1.15;
	font-weight: 500;
	color: var(--aj-color-navy-light, #1a3d74);
	letter-spacing: -0.015em;
	margin: 0 0 12px;
}

.aj-section-dek {
	font-family: var(--aj-font-serif, 'EB Garamond', serif);
	font-style: italic;
	font-size: 17px;
	line-height: 1.6;
	color: var(--aj-color-text-secondary, #616a78);
	text-wrap: pretty;
}

.aj-find-grid {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 0 52px;
	align-items: start;
}

.aj-find-config {
	border-right: 1px solid var(--aj-color-border-default, #dfe3ea);
	padding-right: 52px;
}

.aj-find-sliders-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px 22px;
	margin-bottom: 28px;
}

.aj-find-slider-card {
	background-color: transparent;
	border-radius: 6px;
	padding: 4px 6px 4px 0;
	transition: opacity 0.2s ease;
}

.aj-find-slider-top {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 6px;
}

.aj-find-checkbox {
	width: 18px;
	height: 18px;
	border-radius: 4px;
	border: 1.5px solid var(--aj-color-border-default, #ccd3dd);
	background-color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
	transition: all 0.2s ease;
}

.aj-find-slider-card.active .aj-find-checkbox {
	background-color: var(--aj-color-navy-light, #1a3d74);
	border-color: var(--aj-color-navy-light, #1a3d74);
}

.aj-find-slider-name {
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--aj-color-text-primary, #16233a);
	white-space: nowrap;
}

.aj-find-range-wrap {
	position: relative;
	height: 30px;
	display: flex;
	align-items: center;
}

.aj-find-range-track {
	position: absolute;
	left: 0;
	right: 0;
	height: 5px;
	border-radius: 3px;
	background: linear-gradient(90deg, #0c7180, #dfe3ea 50%, #b04f37);
	box-shadow: inset 0 1px 2px rgba(19, 41, 75, 0.12);
}

.aj-find-range-center {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 1px;
	height: 13px;
	background-color: #ccd3dd;
	pointer-events: none;
}

.aj-find-range-input {
	position: absolute;
	left: 0;
	right: 0;
	width: 100%;
	height: 30px;
	opacity: 0;
	cursor: pointer;
	z-index: 2;
	margin: 0;
}

.aj-find-range-thumb {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background-color: #ffffff;
	border: 2px solid var(--aj-color-navy-light, #1a3d74);
	box-shadow: 0 2px 6px rgba(19, 41, 75, 0.14);
	pointer-events: none;
	z-index: 1;
	transition: border-color 0.25s ease;
}

.aj-find-poles-labels {
	display: flex;
	justify-content: space-between;
	margin-top: 3px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: -0.005em;
	color: var(--aj-color-text-secondary, #616a78);
}

.aj-find-chips-box {
	padding: 13px 15px;
	background-color: var(--aj-color-bg-alt, #f6f7fa);
	border: 1px solid var(--aj-color-border-default, #dfe3ea);
	margin-bottom: 14px;
}

.aj-find-chips-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
	font-size: 11px;
	color: var(--aj-color-text-muted, #5f697a);
}

.aj-find-chips-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.aj-find-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background-color: var(--aj-color-navy-light, #1a3d74);
	border-radius: 20px;
	padding: 4px 9px 4px 10px;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #ffffff;
}

.aj-find-chip-close {
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.24);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	/* It is a <button>, so the reset's own font and colour have to be overridden. */
	font-family: inherit;
	font-size: 11px;
	line-height: 1;
	color: inherit;
	padding: 0;
	border: 0;
	flex: none;
}

.aj-find-chip-close:hover,
.aj-find-chip-close:focus {
	background-color: rgba(0, 0, 0, 0.24);
	color: inherit;
}

.aj-find-results-col {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.aj-find-results-label {
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--aj-color-crimson, #c33d29);
	padding-bottom: 12px;
	border-bottom: 1px solid var(--aj-color-border-default, #dfe3ea);
	margin-bottom: 0;
}

.aj-find-results-scroll {
	max-height: 520px;
	overflow-y: auto;
	padding-right: 6px;
}

/* ─── Today's Debate Section ─── */
.aj-debate-section {
	background-color: var(--aj-color-navy-hero, #14304f);
	color: #eef1f5;
	padding: 64px 0 68px;
}

.aj-debate-grid {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: 0;
}

.aj-debate-left {
	padding: 36px 32px;
	border-right: 1px solid rgba(255, 255, 255, 0.1);
	display: flex;
	flex-direction: column;
}

.aj-debate-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #e89687;
}

.aj-debate-title {
	font-family: var(--aj-font-serif, 'EB Garamond', serif);
	font-size: 37px;
	color: #ffffff;
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: -0.015em;
	margin: 0 0 26px;
}

.aj-debate-caption {
	font-family: var(--aj-font-serif, 'EB Garamond', serif);
	font-style: italic;
	font-size: 17px;
	line-height: 1.6;
	color: #a8bcda;
	margin-bottom: 28px;
	text-wrap: pretty;
}

.aj-debate-dims-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.aj-debate-right {
	padding: 36px 40px;
	display: flex;
	flex-direction: column;
}

/* The inactive stored lens is hidden by the shared lens-state component. */
.aj-debate-curve {
	margin-bottom: 24px;
}

.aj-debate-stats-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin-bottom: 26px;
	padding: 16px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.aj-debate-stat-item {
	padding: 0 30px;
	border-right: 1px solid rgba(255, 255, 255, 0.16);
}

.aj-debate-stat-item:first-child {
	padding-left: 0;
}

.aj-debate-stat-item:last-child {
	border-right: none;
}

.aj-debate-stat-val {
	font-family: var(--aj-font-serif, 'EB Garamond', serif);
	font-size: 30px;
	font-weight: 600;
	color: #ffffff;
	line-height: 1;
}

.aj-debate-stat-lbl {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255,255,255,.8);
	margin-top: 6px;
}

/* ─── Our Own Bias (Bias Meter) ─── */
.aj-meter-section {
	background-color: #ffffff;
	border-bottom: 1px solid var(--aj-color-border-light, #eef1f6);
	padding: 56px 0 0;
}

.aj-meter-verdict-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px 40px;
	flex-wrap: wrap;
	padding-bottom: 22px;
	border-bottom: 2px solid var(--aj-color-navy-dark, #16233a);
}

.aj-meter-verdict-title {
	font-family: var(--aj-font-serif, 'EB Garamond', serif);
	font-size: 46px;
	color: var(--aj-color-navy-light, #1a3d74);
	font-weight: 500;
	line-height: 1.02;
	letter-spacing: -0.01em;
	margin: 0 0 11px;
}

.aj-meter-verdict-dek {
	font-family: var(--aj-font-serif, 'EB Garamond', serif);
	font-style: italic;
	font-size: 16.5px;
	color: var(--aj-color-text-secondary, #616a78);
	line-height: 1.55;
	max-width: 560px;
	text-wrap: pretty;
}

.aj-meter-stats-wrap {
	display: flex;
	align-items: flex-end;
	gap: 18px 28px;
	flex-wrap: wrap;
}

.aj-meter-curves-stack {
	display: flex;
	flex-direction: column;
	gap: 30px;
	margin-top: 26px;
}

.aj-meter-curves-stack[hidden] {
	display: none !important;
}

#bias-meter [data-aj-ob-period][aria-pressed="true"] {
	background: var(--aj-color-navy-light, #1a3d74) !important;
	color: #fff !important;
	font-weight: 700 !important;
}

#bias-meter [data-aj-ob-period][aria-pressed="false"] {
	background: transparent !important;
	color: #5f697a !important;
	font-weight: 600 !important;
}

.aj-meter-curves-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px 32px;
	flex-wrap: wrap;
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--aj-color-border-light, #eef1f6);
	padding-bottom: 30px;
}

.aj-meter-disclaimer-strip {
	padding: 13px 24px;
	background-color: var(--aj-color-bg-alt, #f6f7fa);
	border-top: 1px solid var(--aj-color-border-light, #eef1f6);
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 11px;
	color: var(--aj-color-text-muted, #5f697a);
	line-height: 1.6;
}

/* ─── Toolkit Grid ─── */
.aj-toolkit-section {
	background-color: var(--aj-color-bg-alt, #f6f7fa);
	border-bottom: 1px solid var(--aj-color-border-light, #eef1f6);
	padding: 64px 0 70px;
}

.aj-toolkit-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	border-top: 3px solid var(--aj-color-navy-dark, #16233a);
	padding-top: 22px;
}

/* ─── Closing CTA Band ─── */
.aj-closing-cta-section {
	background-color: var(--aj-color-navy-light, #1a3d74);
	color: #f6f7fa;
	padding: 40px 0 44px;
}

.aj-closing-cta-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
}

.aj-closing-cta-text {
	max-width: 640px;
}

.aj-closing-cta-eyebrow {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #e89687;
	margin-bottom: 13px;
}

.aj-closing-cta-title {
	font-family: var(--aj-font-serif, 'EB Garamond', serif);
	font-size: 28px;
	color: #ffffff;
	font-weight: 500;
	line-height: 1.25;
	text-wrap: pretty;
	margin: 0 0 9px;
}

.aj-closing-cta-dek {
	font-size: 15px;
	color: #9fb4d4;
	line-height: 1.6;
	text-wrap: pretty;
}

/* ─── Responsive Media Queries ─── */
@media (max-width: 900px) {
	.aj-front-hero-grid {
		grid-template-columns: 1fr;
		gap: 32px 0;
	}
	.aj-front-hero-lead {
		border-right: none;
		padding-right: 0;
		border-bottom: 1px solid var(--aj-color-border-default, #dfe3ea);
		padding-bottom: 32px;
	}
	.aj-find-grid {
		grid-template-columns: 1fr;
		gap: 32px 0;
	}
	.aj-find-config {
		border-right: none;
		padding-right: 0;
		border-bottom: 1px solid var(--aj-color-border-default, #dfe3ea);
		padding-bottom: 32px;
	}
	.aj-debate-grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.aj-debate-left {
		border-right: none;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}
	.aj-debate-left,
	.aj-debate-right {
		min-width: 0;
	}
	.aj-toolkit-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.aj-find-sliders-grid {
		grid-template-columns: 1fr;
	}
	.aj-debate-dims-grid {
		grid-template-columns: 1fr;
	}
	.aj-toolkit-grid {
		grid-template-columns: 1fr;
	}
}

/* ─────────────────────────────────────────────────────────────────────
 * LOCAL PATCH, 5 September 2026. Not from Sairam's repo.
 * Hero column separation, back to the design handoff.
 * Delete this block once he folds the same change into the theme.
 * ───────────────────────────────────────────────────────────────────── */

/* Design: grid gap 0, lead padded 36px right, rail carrying the rule on
   its left and padded 36px. The theme used a 48px gap plus a further 48px
   of lead padding, so 96px of air where the design asks for 72px. That
   24px came straight out of the two columns, and the rail is the narrow
   one, which is where the crowding showed.
   Scoped above the 900px breakpoint so the stacked layout is untouched. */
@media (min-width: 901px) {
	.aj-front-hero-grid {
		gap: 0;
	}

	.aj-front-hero-lead {
		border-right: none;
		padding-right: 36px;
	}

	.aj-front-hero-rail {
		border-left: 1px solid var(--aj-color-border-default, #dfe3ea);
		padding-left: 36px;
	}
}