/*
 * Brightway Consultancy — insights.css
 * Insights archive (archive-bwc_insight.php) + single (single-bwc_insight.php).
 * Inherits the gabarit homepage visual language. Gold remains the
 * primary decor (CTA, drop cap, hairlines, trim-marks). Emerald is
 * introduced here as a secondary editorial accent (test): topic chips
 * and the category label in each meta line / single hero.
 *
 * Scope:
 *   ARCHIVE (/insights/)
 *     1. .bwc-insights-hero            — editorial publication opener
 *     2. .bwc-insights-featured        — large featured card
 *     3. .bwc-insights-grid            — 6/6 grid of remaining articles
 *        + .bwc-insights-card          — small card pattern
 *        + .bwc-insights-card__meta    — meta line (topic · date · minutes)
 *     4. .bwc-insights-topics          — chips row
 *     5. .bwc-insights-finale          — closing CTA
 *
 *   SINGLE (/insights/{slug}/)
 *     1. .bwc-insight-hero             — meta + title + dek
 *     2. .bwc-insight-body             — long-form prose (Fraunces, drop cap)
 *     3. .bwc-insight-author           — byline + placeholder bio
 *     4. .bwc-insight-cta              — inline CTA
 *     5. .bwc-insight-related          — 2 related cards (.bwc-insights-card pattern)
 *
 * Universal contract: hover gated, exact transitions, logical
 * properties, tokens only, prefers-reduced-motion handled in
 * utilities.css §4.
 */

/* ===========================================================================
 * SHARED — meta line pattern used on archive + single + related.
 * Topic · date · "N min read" separated by middots.
 * ========================================================================= */

.bwc-insights-card__meta,
.bwc-insight-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4em;
	font-family: var(--bwc-font-body);
	font-size: var(--bwc-fs-xs);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bwc-text-muted);
}

.bwc-insights-card__meta > * + *::before,
.bwc-insight-hero__meta > * + *::before {
	content: '·';
	margin-inline-end: 0.4em;
	color: var(--bwc-text-subtle);
}

/* Category label — emerald secondary accent (gold stays everywhere else). */
.bwc-insights-card__meta-topic,
.bwc-insight-hero__meta-topic {
	color: var(--bwc-accent-emerald-text);
}

/* ===========================================================================
 * ARCHIVE — 1. HERO
 * ========================================================================= */

.bwc-insights-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-block-start: clamp(8rem, 6rem + 8vw, 14rem);
	padding-block-end: clamp(4rem, 3rem + 5vw, 7rem);
}

.bwc-insights-hero::before {
	content: '';
	position: absolute;
	inset-block-start: -10rem;
	inset-inline-end: -12rem;
	inline-size: 56rem;
	block-size: 56rem;
	background: radial-gradient(
		circle at center,
		color-mix(in srgb, var(--bwc-accent-gold) 16%, transparent) 0%,
		color-mix(in srgb, var(--bwc-accent-gold) 5%, transparent) 35%,
		transparent 65%
	);
	pointer-events: none;
	z-index: 0;
}

.bwc-insights-hero::after {
	content: '';
	position: absolute;
	inset-block-start: clamp(4rem, 4vw + 2rem, 7rem);
	inset-inline-start: clamp(1rem, 4vw, 4rem);
	inline-size: 21rem;
	block-size: 33rem;
	pointer-events: none;
	z-index: 0;

	background-image:
		radial-gradient(circle at 3.75rem 5.25rem,  var(--bwc-accent-gold) 3px, transparent 4px),
		radial-gradient(circle at 9.75rem 12.75rem, var(--bwc-accent-gold) 3px, transparent 4px),
		radial-gradient(circle at 15.75rem 8.25rem, var(--bwc-accent-gold) 3px, transparent 4px),
		radial-gradient(circle at 6.75rem 20.25rem, var(--bwc-accent-gold) 3px, transparent 4px),
		radial-gradient(circle at 17.25rem 24.75rem, var(--bwc-accent-gold) 3px, transparent 4px),
		radial-gradient(circle at 11.25rem 30.75rem, var(--bwc-accent-gold) 3px, transparent 4px),
		radial-gradient(circle at center, rgba(245, 241, 232, 0.14) 2px, transparent 3px);
	background-size:
		100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%,
		1.5rem 1.5rem;
	background-repeat:
		no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat,
		repeat;
}

@media (max-width: 767px) {
	.bwc-insights-hero::after {
		display: none;
	}
}

.bwc-insights-hero > .bwc-container {
	position: relative;
	z-index: 1;
}

.bwc-insights-hero__inner {
	max-inline-size: 64ch;
	margin-inline-start: auto;
}

@media (min-width: 1024px) {
	.bwc-insights-hero__inner {
		margin-inline-start: 38%;
	}
}

.bwc-insights-hero__inner > * + * {
	margin-block-start: var(--bwc-space-3);
}

.bwc-insights-hero h1 {
	margin-block-start: var(--bwc-space-1);
}

.bwc-insights-hero__lede {
	color: var(--bwc-text-muted);
	font-size: var(--bwc-fs-lg);
	line-height: 1.5;
}

/* ===========================================================================
 * ARCHIVE — 2. FEATURED CARD (large Double-Bezel + trim-mark)
 * ========================================================================= */

.bwc-insights-featured-card {
	display: block;
	color: var(--bwc-text);
	text-decoration: none;
	transition: transform var(--bwc-dur-dropdown) var(--bwc-ease-out);
}

.bwc-insights-featured-card .bwc-card__inner {
	position: relative;
	padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem);
	padding-inline: clamp(2rem, 1.5rem + 2vw, 3.5rem);
	box-shadow: inset 0 1px 1px rgba(245, 241, 232, 0.06);
	transition: box-shadow var(--bwc-dur-tooltip) var(--bwc-ease-out);
}

.bwc-insights-featured-card .bwc-card__inner::before {
	content: '';
	position: absolute;
	inset-block-start: 1rem;
	inset-inline-end: 1rem;
	inline-size: 1.125rem;
	block-size: 1.125rem;
	border-block-start: 1px solid var(--bwc-accent-gold-40);
	border-inline-end: 1px solid var(--bwc-accent-gold-40);
	pointer-events: none;
	transition: border-color var(--bwc-dur-tooltip) var(--bwc-ease-out);
}

.bwc-insights-featured-card__title {
	margin: var(--bwc-space-3) 0 0;
	font-family: var(--bwc-font-display);
	font-size: var(--bwc-fs-3xl);
	font-weight: 480;
	line-height: 1.1;
	color: var(--bwc-text);
}

.bwc-insights-featured-card__dek {
	max-inline-size: 64ch;
	margin: var(--bwc-space-3) 0 0;
	color: var(--bwc-text-muted);
	font-size: var(--bwc-fs-lg);
	line-height: 1.5;
}

.bwc-insights-featured-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin-block-start: var(--bwc-space-4);
	color: var(--bwc-accent-gold);
	font-family: var(--bwc-font-body);
	font-size: var(--bwc-fs-sm);
	font-weight: 500;
	letter-spacing: 0.02em;
	transition: gap var(--bwc-dur-tooltip) var(--bwc-ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.bwc-insights-featured-card:hover {
		transform: translateY(-2px);
	}
	.bwc-insights-featured-card:hover .bwc-card__inner {
		box-shadow: inset 0 1px 2px rgba(245, 241, 232, 0.12);
	}
	.bwc-insights-featured-card:hover .bwc-card__inner::before {
		border-color: var(--bwc-accent-gold);
	}
	.bwc-insights-featured-card:hover .bwc-insights-featured-card__cta {
		gap: 0.7em;
	}
}

.bwc-insights-featured-card:focus-visible {
	outline: 2px solid var(--bwc-accent-gold);
	outline-offset: 4px;
	border-radius: var(--bwc-radius-outer);
}

/* ===========================================================================
 * ARCHIVE — 3. GRID OF REMAINING (6/6 cards)
 * ========================================================================= */

.bwc-insights-grid__list {
	list-style: none;
	margin: 0;
	padding: 0;
	row-gap: var(--bwc-space-4);
}

.bwc-insights-grid__item {
	display: flex;
}

.bwc-insights-card {
	display: block;
	inline-size: 100%;
	color: var(--bwc-text);
	text-decoration: none;
	transition: transform var(--bwc-dur-dropdown) var(--bwc-ease-out);
}

.bwc-insights-card .bwc-card__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--bwc-space-2);
	block-size: 100%;
	padding-block: var(--bwc-space-4);
	padding-inline: var(--bwc-space-4);
	box-shadow: inset 0 1px 1px rgba(245, 241, 232, 0.06);
	transition: box-shadow var(--bwc-dur-tooltip) var(--bwc-ease-out);
}

.bwc-insights-card .bwc-card__inner::before {
	content: '';
	position: absolute;
	inset-block-start: 0.875rem;
	inset-inline-end: 0.875rem;
	inline-size: 1rem;
	block-size: 1rem;
	border-block-start: 1px solid var(--bwc-accent-gold-40);
	border-inline-end: 1px solid var(--bwc-accent-gold-40);
	pointer-events: none;
	transition: border-color var(--bwc-dur-tooltip) var(--bwc-ease-out);
}

.bwc-insights-card__title {
	font-family: var(--bwc-font-display);
	font-size: var(--bwc-fs-xl);
	font-weight: 480;
	line-height: 1.2;
	margin: var(--bwc-space-1) 0 0;
	color: var(--bwc-text);
}

.bwc-insights-card__dek {
	color: var(--bwc-text-muted);
	font-size: var(--bwc-fs-base);
	line-height: 1.55;
	margin: 0;
}

.bwc-insights-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin-block-start: auto;
	padding-block-start: var(--bwc-space-2);
	color: var(--bwc-accent-gold);
	font-family: var(--bwc-font-body);
	font-size: var(--bwc-fs-sm);
	font-weight: 500;
	letter-spacing: 0.02em;
	transition: gap var(--bwc-dur-tooltip) var(--bwc-ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.bwc-insights-card:hover {
		transform: translateY(-2px);
	}
	.bwc-insights-card:hover .bwc-card__inner {
		box-shadow: inset 0 1px 2px rgba(245, 241, 232, 0.12);
	}
	.bwc-insights-card:hover .bwc-card__inner::before {
		border-color: var(--bwc-accent-gold);
	}
	.bwc-insights-card:hover .bwc-insights-card__cta {
		gap: 0.7em;
	}
}

.bwc-insights-card:focus-visible {
	outline: 2px solid var(--bwc-accent-gold);
	outline-offset: 4px;
	border-radius: var(--bwc-radius-outer);
}

/* ===========================================================================
 * ARCHIVE — 4. TOPICS chips
 * ========================================================================= */

.bwc-insights-topics__heading {
	font-family: var(--bwc-font-body);
	font-size: var(--bwc-fs-xs);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bwc-text-muted);
	margin: 0 0 var(--bwc-space-3);
}

.bwc-insights-topics__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--bwc-space-1);
}

.bwc-insights-topics__chip {
	display: inline-block;
	font-family: var(--bwc-font-body);
	font-size: var(--bwc-fs-xs);
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--bwc-accent-emerald-text);
	background-color: var(--bwc-accent-emerald-tint);
	border: 1px solid var(--bwc-accent-emerald-border);
	padding-block: 0.375rem;
	padding-inline: 0.875rem;
	border-radius: 999px;
}

/* ===========================================================================
 * ARCHIVE — 5. FINALE (mirror of homepage finale)
 * ========================================================================= */

.bwc-insights-finale {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.bwc-insights-finale::before {
	content: '';
	position: absolute;
	inset-block-start: -8rem;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	inline-size: 56rem;
	block-size: 44rem;
	background: radial-gradient(
		ellipse at center,
		color-mix(in srgb, var(--bwc-accent-gold) 12%, transparent) 0%,
		color-mix(in srgb, var(--bwc-accent-gold) 3%, transparent) 40%,
		transparent 65%
	);
	pointer-events: none;
	z-index: 0;
}

.bwc-insights-finale > .bwc-container {
	position: relative;
	z-index: 1;
}

.bwc-insights-finale__inner {
	max-inline-size: 56ch;
	margin-inline: auto;
	text-align: center;
}

.bwc-insights-finale__inner > * + * {
	margin-block-start: var(--bwc-space-3);
}

.bwc-insights-finale__lede {
	color: var(--bwc-text-muted);
	font-size: var(--bwc-fs-lg);
	line-height: 1.5;
}

.bwc-insights-finale__cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--bwc-space-2);
	margin-block-start: var(--bwc-space-5);
}

/* ===========================================================================
 * SINGLE — 1. HERO (meta + title + dek)
 * ========================================================================= */

.bwc-insight-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-block-start: clamp(8rem, 6rem + 8vw, 14rem);
	padding-block-end: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.bwc-insight-hero::before {
	content: '';
	position: absolute;
	inset-block-start: -10rem;
	inset-inline-end: -10rem;
	inline-size: 46rem;
	block-size: 46rem;
	background: radial-gradient(
		circle at center,
		color-mix(in srgb, var(--bwc-accent-gold) 10%, transparent) 0%,
		color-mix(in srgb, var(--bwc-accent-gold) 3%, transparent) 35%,
		transparent 65%
	);
	pointer-events: none;
	z-index: 0;
}

.bwc-insight-hero > .bwc-container {
	position: relative;
	z-index: 1;
}

.bwc-insight-hero__inner > * + * {
	margin-block-start: var(--bwc-space-3);
}

.bwc-insight-hero__title {
	font-family: var(--bwc-font-display);
	font-size: var(--bwc-fs-3xl);
	font-weight: 480;
	line-height: 1.1;
	color: var(--bwc-text);
	letter-spacing: -0.015em;
}

.bwc-insight-hero__dek {
	max-inline-size: 60ch;
	color: var(--bwc-text-muted);
	font-family: var(--bwc-font-display);
	font-size: var(--bwc-fs-lg);
	font-weight: 460;
	font-style: italic;
	line-height: 1.45;
}

/* ===========================================================================
 * SINGLE — 2. BODY (Fraunces body, drop cap on first paragraph)
 *
 *    the_content() emits paragraphs / headings / lists. We scope the
 *    prose styles to .bwc-insight-body__prose so they don't leak into
 *    headers/footers/cards elsewhere on the single template.
 * ========================================================================= */

.bwc-insight-body {
	padding-block-start: clamp(1.5rem, 1rem + 2vw, 3rem);
	padding-block-end: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.bwc-insight-body__prose {
	font-family: var(--bwc-font-display);
	font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.1875rem); /* 17–19px */
	line-height: 1.78;
	color: var(--bwc-text);
	font-weight: 400;
}

/* Generous paragraph rhythm — real breathing room between blocks.
 * Headings keep their own larger leading (h2/h3 rules below win on
 * specificity), so this governs paragraph-to-paragraph spacing. */
.bwc-insight-body__prose > * + * {
	margin-block-start: var(--bwc-space-4);
}

/* Justified measure with automatic hyphenation — relies on the document
 * lang attribute (set by WordPress language_attributes()) for break points. */
.bwc-insight-body__prose p {
	margin: 0;
	text-align: justify;
	hyphens: auto;
}

.bwc-insight-body__prose h2 {
	margin-block-start: var(--bwc-space-6);
	font-size: var(--bwc-fs-xl);
	line-height: 1.25;
	color: var(--bwc-text);
	letter-spacing: -0.01em;
}

.bwc-insight-body__prose h3 {
	margin-block-start: var(--bwc-space-5);
	font-size: var(--bwc-fs-lg);
	line-height: 1.3;
	color: var(--bwc-text);
}

.bwc-insight-body__prose ul,
.bwc-insight-body__prose ol {
	padding-inline-start: var(--bwc-space-4);
}

.bwc-insight-body__prose li + li {
	margin-block-start: var(--bwc-space-1);
}

.bwc-insight-body__prose a {
	color: var(--bwc-text);
	text-decoration: underline;
	text-decoration-color: var(--bwc-accent-gold-hairline);
	text-underline-offset: 0.2em;
	transition: text-decoration-color var(--bwc-dur-tooltip) var(--bwc-ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.bwc-insight-body__prose a:hover {
		text-decoration-color: var(--bwc-accent-gold);
	}
}

.bwc-insight-body__prose blockquote {
	margin: var(--bwc-space-4) 0;
	padding-block: var(--bwc-space-1);
	padding-inline-start: var(--bwc-space-3);
	border-inline-start: 2px solid var(--bwc-accent-gold-40);
	color: var(--bwc-text-muted);
	font-style: italic;
}

/* Drop cap — first letter of the first paragraph, Fraunces display,
 * gold, 4-line height. Editorial signature. */
.bwc-insight-body__prose > p:first-of-type::first-letter {
	float: left;
	font-family: var(--bwc-font-display);
	font-weight: 520;
	font-size: 4.25em;
	line-height: 0.85;
	padding-inline-end: 0.1em;
	padding-block-start: 0.06em;
	color: var(--bwc-accent-gold);
}

/* ===========================================================================
 * SINGLE — 3. AUTHOR
 * ========================================================================= */

.bwc-insight-author {
	padding-block: clamp(1rem, 1vw + 0.5rem, 2rem);
}

.bwc-insight-author .bwc-hairline {
	margin-block: 0 var(--bwc-space-4);
}

.bwc-insight-author__byline {
	font-family: var(--bwc-font-body);
	font-size: var(--bwc-fs-xs);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bwc-accent-gold);
	margin: 0 0 var(--bwc-space-1);
}

.bwc-insight-author__byline em {
	font-style: italic;
	color: var(--bwc-text-subtle);
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: none;
}

.bwc-insight-author__bio {
	color: var(--bwc-text-muted);
	font-size: var(--bwc-fs-base);
	line-height: 1.6;
	margin: 0;
}

.bwc-insight-author__link {
	display: inline-flex;
	align-items: baseline;
	gap: 0.5em;
	margin-block-start: var(--bwc-space-2);
	color: var(--bwc-accent-gold);
	font-family: var(--bwc-font-body);
	font-size: var(--bwc-fs-sm);
	font-weight: 500;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: gap var(--bwc-dur-tooltip) var(--bwc-ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.bwc-insight-author__link:hover {
		gap: 0.7em;
	}
}

.bwc-insight-author__link-note {
	color: var(--bwc-text-subtle);
	font-family: var(--bwc-font-mono);
	font-size: var(--bwc-fs-xs);
	letter-spacing: 0;
}

/* ===========================================================================
 * SINGLE — 4. INLINE CTA
 *    Soft-bordered editorial block. Not a card, not a banner — sits
 *    inside the column flow as a discreet "take action" beat.
 * ========================================================================= */

.bwc-insight-cta {
	padding-block-start: clamp(1.5rem, 1rem + 1.5vw, 3rem);
	padding-block-end: clamp(2rem, 1.5rem + 2vw, 4rem);
}

.bwc-insight-cta__inner {
	padding-block: var(--bwc-space-5);
	padding-inline: var(--bwc-space-5);
	background-color: rgba(245, 241, 232, 0.03);
	border-block-start: 1px solid var(--bwc-accent-gold-hairline);
	border-block-end: 1px solid var(--bwc-accent-gold-hairline);
}

.bwc-insight-cta__heading {
	margin: 0;
	font-family: var(--bwc-font-display);
	font-size: var(--bwc-fs-xl);
	font-weight: 480;
	line-height: 1.25;
	color: var(--bwc-text);
}

.bwc-insight-cta__lede {
	margin: var(--bwc-space-2) 0 var(--bwc-space-4);
	color: var(--bwc-text-muted);
	font-size: var(--bwc-fs-base);
	line-height: 1.55;
}

/* ===========================================================================
 * SINGLE — 5. RELATED ARTICLES (reuses .bwc-insights-card pattern)
 * ========================================================================= */

.bwc-insight-related__list {
	list-style: none;
	margin: 0;
	padding: 0;
	row-gap: var(--bwc-space-4);
}