/*
 * Insights archive + single (2026 redesign).
 * Text measures are min(Nch, px): the px is the signed-off mockup's width, so
 * a wider face (e.g. the current Montserrat test) can't stretch the layout.
 * Plain CSS, enqueued only on insight pages by inc/insights.php -- no build
 * step. Everything is namespaced .ins-* so the legacy Tailwind bundle
 * (.grid, .prose, .container ...) can't collide with it.
 *
 * Font family is inherited from the theme (.font-proxima on <body>), so it
 * follows whatever the site is set to use.
 *
 * Breakpoints match the theme: <768 mobile, 768-1023 tablet, >=1024 desktop.
 */

.ins {
	--ins-ink: #0C1B37;
	--ins-body: #1E293B;
	--ins-slate: #5B6880;
	--ins-blue: #4D73DB;      /* fills, rules, large display only (4.38:1) */
	--ins-blue-ink: #3A5CBF;  /* links + text under 18px (AA) */
	--ins-panel: #ECEEF5;
	--ins-panel-hover: #E2E7F2;
	--ins-line: #D7DCE8;
	--ins-rule: rgba(132, 132, 132, .5);
	--ins-gut: 72px;
	--ins-ease: cubic-bezier(.2, .7, .3, 1);

	display: block;
	color: var(--ins-body);
	font-size: 19.2px;
	line-height: 1.75;
	overflow-x: clip;
}
.ins *, .ins *::before, .ins *::after { box-sizing: border-box; }
.ins img { display: block; max-width: 100%; height: auto; }
.ins h1, .ins h2, .ins h3 { margin: 0; color: var(--ins-ink); letter-spacing: 0; line-height: 1.2; font-weight: 600; }
.ins p { margin: 0; }
.ins a { color: inherit; }
.ins :focus-visible { outline: 2px solid var(--ins-blue-ink); outline-offset: 3px; }
.ins [hidden] { display: none !important; }
.ins [id] { scroll-margin-top: 130px; }

.ins-wrap { max-width: 1440px; margin: 0 auto; padding: 0 var(--ins-gut); }
.ins-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Shared bits ------------------------------------------------------- */

.ins-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 15px; line-height: 1.75; color: var(--ins-slate); }
.ins-pill { line-height: 1.75; font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--ins-blue-ink); background: var(--ins-panel); padding: 6px 12px; }

.ins-more { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; line-height: 1.75; color: var(--ins-blue-ink); margin-top: 22px; }
.ins-more__gl { display: inline-block; transition: transform .24s var(--ins-ease); }
a:hover .ins-more__gl, a:focus-visible .ins-more__gl { transform: translate(4px, 4px); }

.ins-btn {
	display: inline-flex; align-items: center; gap: 12px; border: 0; border-radius: 0; cursor: pointer;
	font: inherit; font-size: 18px; font-weight: 400; line-height: 1.75; padding: 17px 28px;
	text-decoration: none; background: var(--ins-ink); color: #fff;
	transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.ins .ins-btn { color: #fff; }
.ins-btn:hover, .ins-btn:focus-visible { background: #172C50; }
.ins .ins-btn--ghost { background: var(--ins-panel); color: var(--ins-ink); box-shadow: inset 0 0 0 1px var(--ins-line); }
.ins .ins-btn--ghost:hover, .ins .ins-btn--ghost:focus-visible { background: var(--ins-ink); color: #fff; box-shadow: inset 0 0 0 1px var(--ins-ink); }

/* ---- Archive: head ----------------------------------------------------- */

.ins-phead { border-bottom: 1px solid var(--ins-rule); }
.ins-phead .ins-wrap { padding-top: 60px; padding-bottom: 44px; }
.ins-phead h1 { font-size: clamp(38px, 4vw, 57.6px); font-weight: 400; line-height: 1; }
.ins-intro { padding-top: 56px; padding-bottom: 8px; }
.ins-intro p { font-size: 24px; line-height: 1.6; font-weight: 600; color: var(--ins-ink); max-width: min(46ch, 552px); }
.ins-intro p + p { margin-top: .6em; }

/* ---- Archive: featured ------------------------------------------------- */

.ins-feat { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; padding-top: 56px; text-decoration: none; color: inherit; }
.ins-feat, .ins-feat *, .ins-card, .ins-card * { text-decoration: none !important; }
.ins-feat__img { display: block; overflow: hidden; background: var(--ins-panel); }
.ins-feat__img img { width: 100%; height: clamp(300px, 31vw, 440px); object-fit: cover; transition: transform .6s var(--ins-ease); }
.ins-feat:hover .ins-feat__img img, .ins-feat:focus-visible .ins-feat__img img { transform: scale(1.04); }
.ins-feat__body { display: block; }
.ins-feat__title { display: block; font-size: clamp(28px, 2.9vw, 40px); font-weight: 600; line-height: 1.18; margin: 16px 0 14px !important; }
.ins-feat__text { display: block; font-size: 19.2px; line-height: 1.75; color: var(--ins-slate); }

/* ---- Archive: controls ------------------------------------------------- */

.ins-controls { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin: 48px 0 0; padding-top: 40px; border-top: 1px solid var(--ins-rule); }
.ins-search { position: relative; flex: 0 0 320px; max-width: 100%; }
.ins-search input {
	width: 100%; font: inherit; font-size: 17px; line-height: 1.75; padding: 13px 16px 13px 44px;
	border: 1px solid var(--ins-line); border-radius: 0; background: #fff; color: var(--ins-ink);
	-webkit-appearance: none; appearance: none;
}
.ins-search input::placeholder { color: var(--ins-slate); opacity: 1; }
.ins-search input:focus-visible { outline: 2px solid var(--ins-blue-ink); outline-offset: 0; border-color: var(--ins-blue-ink); }
.ins-search svg { position: absolute; left: 15px; top: 50%; margin-top: -9px; pointer-events: none; }
.ins-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.ins-chip {
	font: inherit; font-size: 16px; font-weight: 600; line-height: 1.75; cursor: pointer; border-radius: 0;
	border: 1px solid var(--ins-line); background: #fff; color: var(--ins-body); padding: 10px 16px;
	transition: background .15s, color .15s, border-color .15s;
}
.ins-chip:hover { border-color: var(--ins-ink); }
.ins-chip[aria-pressed="true"] { background: var(--ins-ink); color: #fff; border-color: var(--ins-ink); }
.ins-count { margin-left: auto !important; font-size: 16px; line-height: 1.75; color: var(--ins-slate); white-space: nowrap; }

/* ---- Cards (archive grid + related) ------------------------------------ */

.ins-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 28px; padding-top: 48px; }
.ins-card { display: flex; flex-direction: column; color: inherit; position: relative; }
.ins-card__ph { display: block; overflow: hidden; background: var(--ins-panel); height: 220px; }
.ins-card__ph img { width: 100%; height: 220px; object-fit: cover; transition: transform .6s var(--ins-ease); }
.ins-card:hover .ins-card__ph img, .ins-card:focus-visible .ins-card__ph img { transform: scale(1.05); }
.ins-card__body { background: var(--ins-panel); padding: 24px 26px 26px; flex: 1; display: flex; flex-direction: column; transition: background .18s ease; }
.ins-card:hover .ins-card__body, .ins-card:focus-visible .ins-card__body { background: var(--ins-panel-hover); }
.ins-card__date { font-size: 15px; line-height: 1.75; color: var(--ins-blue-ink); font-weight: 600; }
.ins-card__title { font-size: 21px !important; font-weight: 700 !important; line-height: 1.3 !important; margin: 12px 0 10px !important; }
.ins-card__text { display: block; font-size: 16px; line-height: 1.55; color: var(--ins-slate); margin-bottom: 20px; }
.ins-card .ins-more { margin-top: auto; }
.ins-js .ins-card--beyond { display: none; }

.ins-empty { padding: 70px 0; border-top: 1px solid var(--ins-rule); margin-top: 48px !important; text-align: center; color: var(--ins-slate); }
.ins-loadwrap { display: none; padding-top: 52px; text-align: center; }
.ins-js .ins-loadwrap { display: block; }

/* ---- CTA band ---------------------------------------------------------- */

.ins-cta { background: var(--ins-panel); padding: 88px 0; margin-top: 96px; }
.ins-cta__grid { display: grid; grid-template-columns: 1fr .9fr; gap: 72px; align-items: center; }
.ins-cta h2 { font-size: clamp(28px, 3vw, 43px); font-weight: 600; line-height: 1.12; max-width: min(20ch, 430px); }
.ins-cta p { margin-top: 18px; font-size: 19.2px; color: var(--ins-slate); max-width: min(44ch, 418px); }
.ins-cta__row { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---- Single: head + hero ----------------------------------------------- */

.ins-progress { position: fixed; left: 0; top: 0; height: 3px; width: 0; background: var(--ins-blue, #4D73DB); z-index: 10001; pointer-events: none; }
.ins-art-head { padding-top: 56px; padding-bottom: 40px; }
.ins-crumb { font-size: 16px; line-height: 1.75; color: var(--ins-slate); margin-bottom: 22px; }
.ins-crumb a { color: var(--ins-blue-ink); text-decoration: none; font-weight: 600; }
.ins-crumb a:hover { text-decoration: underline; }
.ins-crumb__sep { margin: 0 .5em; }
.ins-art-head h1 { font-size: clamp(34px, 4vw, 57.6px); font-weight: 400; line-height: 1.05; max-width: min(20ch, 576px); margin-top: 20px; }
.ins-stand { font-size: 24px; line-height: 1.6; color: var(--ins-body); max-width: min(52ch, 624px); margin-top: 26px !important; }
.ins-hero { margin-top: 4px; }
.ins-hero img { width: 100%; height: clamp(280px, 40vw, 560px); object-fit: cover; }

/* ---- Single: grid + contents rail -------------------------------------- */

.ins-art-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 80px; padding-top: 64px; align-items: start; }
.ins-art-grid--solo { grid-template-columns: minmax(0, 1fr); }
.ins-toc { position: sticky; top: 132px; }
.ins-toc__title { font-size: 15px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ins-slate); margin-bottom: 16px !important; line-height: 1.4; }
.ins-toc a { display: block; text-decoration: none; font-size: 16px; line-height: 1.4; color: var(--ins-slate); padding: 9px 0 9px 14px; border-left: 2px solid var(--ins-line); transition: color .15s, border-color .15s; }
.ins-toc a:hover { color: var(--ins-ink); }
.ins-toc a.is-active { color: var(--ins-ink); font-weight: 600; border-left-color: var(--ins-blue); }

/* ---- Single: prose ------------------------------------------------------ */

.ins-prose { max-width: min(68ch, 646px); min-width: 0; }
.ins-prose > :first-child { margin-top: 0 !important; }
.ins-prose h2 { font-size: 24px; font-weight: 600; line-height: 1.5; margin: 48px 0 14px; }
.ins-prose h3 { font-size: 20px; font-weight: 700; line-height: 1.4; margin: 36px 0 10px; }
.ins-prose h4 { font-size: 19.2px; font-weight: 700; color: var(--ins-ink); margin: 28px 0 8px; }
.ins-prose p { font-size: 19.2px; line-height: 1.75; margin: 0 0 1.2em; }
.ins-prose a { color: var(--ins-blue-ink); text-decoration: underline; text-underline-offset: 2px; }
.ins-prose a:hover { color: var(--ins-ink); }
.ins-prose strong, .ins-prose b { font-weight: 700; color: var(--ins-ink); }
.ins-prose ul { margin: 0 0 1.4em; padding: 0; list-style: none; }
.ins-prose ul > li { position: relative; padding-left: 26px; margin-bottom: 12px; font-size: 19.2px; line-height: 1.7; }
.ins-prose ul > li::before { content: ""; position: absolute; left: 0; top: 13px; width: 9px; height: 9px; background: var(--ins-blue); }
.ins-prose ol { margin: 0 0 1.4em; padding-left: 1.4em; list-style: decimal; }
.ins-prose ol > li { margin-bottom: 12px; padding-left: 6px; font-size: 19.2px; line-height: 1.7; }
.ins-prose ol > li::marker { color: var(--ins-blue-ink); font-weight: 600; }
.ins-prose img { height: auto; }
.ins-prose .alignleft, .ins-prose .alignright, .ins-prose .aligncenter { margin: 32px 0; }

.ins-pull { margin: 44px 0; padding: 34px 0; border-top: 2px solid var(--ins-blue); border-bottom: 1px solid var(--ins-line); }
.ins-pull blockquote { margin: 0; }
.ins-pull blockquote p { font-size: 26px; line-height: 1.45; font-weight: 600; color: var(--ins-ink); margin: 0; }
.ins-pull blockquote p + p { margin-top: .6em; }
.ins-pull figcaption { margin-top: 14px; font-size: 16px; line-height: 1.4; color: var(--ins-slate); }

.ins-figure { margin: 44px 0; }
.ins-figure img { width: 100%; }
.ins-figure figcaption { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--ins-slate); }
.ins-figure__title { font-weight: 700; color: var(--ins-ink); margin-bottom: 12px !important; }
.ins-video { position: relative; aspect-ratio: 16 / 9; background: var(--ins-ink); }
.ins-video iframe, .ins-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.ins-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 44px 0; }
.ins-gallery__item { margin: 0; cursor: zoom-in; }
.ins-gallery__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ---- Single: FAQ -------------------------------------------------------- */

.ins-faq { margin-top: 48px; }
.ins-faq__intro { margin-bottom: 14px; }
.ins-faq__list { border-top: 1px solid var(--ins-line); margin-top: 8px; }
.ins-faq details { border-bottom: 1px solid var(--ins-line); }
.ins-faq summary {
	list-style: none; cursor: pointer; padding: 22px 0; display: flex; gap: 24px; align-items: baseline;
	font-size: 20px; font-weight: 700; line-height: 1.4; color: var(--ins-ink);
}
.ins-faq summary::-webkit-details-marker { display: none; }
.ins-faq summary::marker { content: ""; }
.ins-faq summary:hover { color: var(--ins-blue-ink); }
.ins-faq__sign { margin-left: auto; font-size: 24px; font-weight: 300; color: var(--ins-blue-ink); line-height: 1; flex: none; transition: transform .2s; }
.ins-faq details[open] .ins-faq__sign { transform: rotate(45deg); }
.ins-faq__a { padding: 0 44px 26px 0; max-width: min(62ch, 589px); }
.ins-faq__a p { font-size: 18px; line-height: 1.7; color: var(--ins-slate); margin: 0 0 .8em; }
.ins-faq__a > :last-child { margin-bottom: 0; }

/* ---- Single: share + related ------------------------------------------- */

.ins-share { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--ins-rule); }
.ins-share__label { font-size: 16px; color: var(--ins-slate); margin-right: 4px; }
.ins-share a, .ins-share button {
	font: inherit; font-size: 16px; font-weight: 600; line-height: 1.75; cursor: pointer; border-radius: 0;
	border: 1px solid var(--ins-line); background: #fff; color: var(--ins-ink); padding: 10px 16px;
	text-decoration: none; transition: background .15s, color .15s, border-color .15s;
}
.ins-share a:hover, .ins-share button:hover { background: var(--ins-ink); color: #fff; border-color: var(--ins-ink); }

.ins-related { border-top: 1px solid var(--ins-rule); margin-top: 96px; padding-top: 64px; }
.ins-related h2 { font-size: 24px; font-weight: 600; margin-bottom: 8px; }

/* ---- Tablet: < 1024 ------------------------------------------------------ */

@media (max-width: 1023.98px) {
	.ins { --ins-gut: 40px; }
	.ins-feat, .ins-cta__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.ins-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ins-art-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 48px; }
	.ins-toc { position: static; border-bottom: 1px solid var(--ins-rule); padding-bottom: 24px; }
	.ins-toc a { display: inline-block; border-left: 0; border-bottom: 2px solid var(--ins-line); padding: 6px 0; margin-right: 22px; }
	.ins-toc a.is-active { border-bottom-color: var(--ins-blue); }
}

/* ---- Mobile: < 768 ------------------------------------------------------- */

@media (max-width: 767.98px) {
	.ins { --ins-gut: 22px; }
	.ins-phead .ins-wrap { padding-top: 40px; padding-bottom: 32px; }
	.ins-intro { padding-top: 40px; }
	.ins-intro p { font-size: 21px; }
	.ins-feat { padding-top: 40px; }
	.ins-grid { grid-template-columns: minmax(0, 1fr); }
	.ins-search { flex: 1 1 100%; }
	.ins-count { margin-left: 0 !important; }
	.ins-art-head { padding-top: 40px; }
	.ins-stand { font-size: 20px; }
	.ins-pull blockquote p { font-size: 21px; }
	.ins-faq__a { padding-right: 0; }
	.ins-cta { padding: 64px 0; margin-top: 72px; }
	.ins-gallery { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Reduced motion: no transitions, no progress bar, static rail ------ */

@media (prefers-reduced-motion: reduce) {
	.ins *, .ins *::before, .ins *::after { animation: none !important; transition: none !important; }
	.ins-feat:hover .ins-feat__img img, .ins-card:hover .ins-card__ph img,
	.ins-feat:focus-visible .ins-feat__img img, .ins-card:focus-visible .ins-card__ph img { transform: none; }
	a:hover .ins-more__gl { transform: none; }
	.ins-progress { display: none; }
	html { scroll-behavior: auto !important; }
}