/* ==========================================================================
   Insights (/insights/) — knowledge base front end
   --------------------------------------------------------------------------
   Design: design_handoff_insights_page/README.md, 2026-08-23. High fidelity.
   Every value below is measured from that handoff, not approximated.

   Namespacing: everything is ag-ins__*, deliberately NOT the site-wide
   ag-card / ag-chip / ag-filters / ag-kicker / ag-h2 vocabulary. This page
   departs from those components on purpose (cream panels rather than white
   cards, 8px square chips rather than 999px pills, ink headings rather than
   near-black), and re-using the shared class names would mean overriding
   them, which is exactly how /portfolio/ would get dragged along. A separate
   namespace makes a regression there impossible rather than merely unlikely.

   Loaded on /insights/ only, via wp_enqueue_scripts in functions.php.
   ========================================================================== */

.ag-ins {
	/* Colour */
	--ag-ins-canvas: #f6f2e9;
	--ag-ins-surface: #ffffff;
	--ag-ins-ink: #525252;
	--ag-ins-muted: #857f74;
	--ag-ins-madder: #9d3f3f;
	--ag-ins-madder-hover: #833434;
	--ag-ins-highlight: #f3e6e4;
	--ag-ins-green: #3f6e56;
	--ag-ins-hairline: #e6e0d2;
	--ag-ins-hairline-light: #efe9dc;
	--ag-ins-cream: #f6f2e9;
	--ag-ins-cream-muted: #dcd5c6;
	--ag-ins-placeholder: #a09a8e;

	/* Type */
	--ag-ins-h1: clamp(30px, 4.2vw, 46px);
	--ag-ins-h2: clamp(23px, 2.6vw, 30px);
	--ag-ins-h3: clamp(19px, 2vw, 24px);
	--ag-ins-body: clamp(13px, 1.05vw, 14px);
	/* Flat 16px, not a clamp: iOS Safari zooms the page when a focused input is
	   under 16px, and a fluid floor below 16 lands exactly on phones. */
	--ag-ins-input: 16px;
	--ag-ins-chip: clamp(12.5px, 1vw, 13.5px);
	--ag-ins-meta: clamp(11.5px, 0.95vw, 12.5px);
	--ag-ins-kicker: clamp(11px, 0.9vw, 12px);

	/* Geometry */
	--ag-ins-r-panel: 12px;
	--ag-ins-r-surface: 14px;
	--ag-ins-r-small: 8px;
	--ag-ins-shadow: rgba(60, 40, 30, .08) 0 2px 12px;
	--ag-ins-img-w: clamp(220px, 23vw, 300px);
	--ag-ins-img-h: clamp(115px, 12.06vw, 157px);

	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: var(--ag-ins-ink);
}

/* The page is full width inside the Divi row's own 0 2% padding. This block
   adds no horizontal padding of its own: overriding the row is the known
   cause of the Portfolio panel bleed.

   1.6%, not 2%: measured from the prototype, which spaces top-level blocks at
   1.6% and separates the article panels at 2%. */
.ag-ins > * + * {
	margin-top: 1.6%;
}

.ag-ins p {
	margin: 0;
}

 /* One class plus an element. Any anchor that needs its own colour (the
   chips, the CTA button) must therefore be selected as `a.ag-ins__x`, not
   `.ag-ins__x`, or it silently inherits madder. That is how the CTA button
   first shipped as madder text on a madder ground. */
.ag-ins a {
	color: var(--ag-ins-madder);
	text-decoration: none;
}

.ag-ins a:hover,
.ag-ins a:focus-visible {
	color: var(--ag-ins-madder-hover);
	text-decoration: underline;
}

.ag-ins :focus-visible {
	outline: 2px solid var(--ag-ins-madder);
	outline-offset: 2px;
}

/* Kicker / label, shared by every block that carries one. */
.ag-ins__kicker {
	font-size: var(--ag-ins-kicker);
	font-weight: 700;
	letter-spacing: 1.68px;
	text-transform: uppercase;
	color: var(--ag-ins-madder);
	margin: 0 0 10px;
}

/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */

.ag-ins__hero {
	text-align: center;
	padding: 4% 0 2.4%;
}

.ag-ins__h1 {
	font-size: var(--ag-ins-h1);
	font-weight: 700;
	line-height: 1.33;
	letter-spacing: -0.5px;
	color: var(--ag-ins-ink);
	max-width: 24ch;
	margin: 0 auto;
}

/* `.ag-ins p` above is more specific than a lone class, so the centring
   margins need a selector that outranks it. */
.ag-ins p.ag-ins__sub {
	font-size: var(--ag-ins-body);
	line-height: 1.5;
	color: var(--ag-ins-muted);
	max-width: 66ch;
	margin: 18px auto 0;
}

/* --------------------------------------------------------------------------
   2. Count highlights
   Readouts, not controls. Styled deliberately unlike the filter chips below
   so that nobody tries to click one.
   -------------------------------------------------------------------------- */

.ag-ins__counts {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	list-style: none;
	margin: 28px 0 0;
	padding: 0;
}

.ag-ins__count {
	background: var(--ag-ins-green);
	color: var(--ag-ins-cream);
	border: 1.5px solid var(--ag-ins-madder);
	border-radius: var(--ag-ins-r-small);
	padding: clamp(12px, 1.4vw, 16px) clamp(14px, 1.7vw, 20px);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.68px;
	text-transform: uppercase;
	line-height: 1;
}

/* --------------------------------------------------------------------------
   3. Latest Article
   The breakpoint is measured on the card's own width, not the viewport, so
   the card reflows correctly whatever it is placed inside.
   -------------------------------------------------------------------------- */

.ag-ins__latest {
	container-type: inline-size;
	background: var(--ag-ins-canvas);
	border: 1px solid var(--ag-ins-madder);
	border-radius: var(--ag-ins-r-panel);
	padding: clamp(20px, 2.6vw, 32px) clamp(22px, 2.9vw, 36px);
}

/* Narrow is the default, so a browser without container query support gets
   the stacked layout rather than a broken two-column one. */
.ag-ins__latest-grid {
	display: grid;
	grid-template-columns: 1fr;
	row-gap: 0;
	margin-top: 18px;
}

.ag-ins__latest-img   { order: 1; }
.ag-ins__latest-title { order: 2; }
.ag-ins__latest-meta  { order: 3; }
.ag-ins__latest-desc  { order: 4; }

@container (min-width: 640px) {
	.ag-ins__latest-grid {
		grid-template-columns: 1fr auto;
		grid-template-rows: auto auto auto;
		column-gap: 36px;
		row-gap: 0;
	}

	.ag-ins__latest-title { order: 0; grid-column: 1; grid-row: 1; }
	.ag-ins__latest-meta  { order: 0; grid-column: 1; grid-row: 2; }
	.ag-ins__latest-desc  { order: 0; grid-column: 1; grid-row: 3; }
	.ag-ins__latest-img   { order: 0; grid-column: 2; grid-row: 1 / -1; align-self: start; }
}

.ag-ins__latest-title {
	font-size: var(--ag-ins-h3);
	font-weight: 500;
	line-height: 1.33;
	letter-spacing: -0.5px;
	margin: 0;
}

.ag-ins p.ag-ins__latest-meta {
	font-size: var(--ag-ins-meta);
	color: var(--ag-ins-muted);
	margin: 10px 0 0;
}

.ag-ins p.ag-ins__latest-desc {
	font-size: var(--ag-ins-body);
	line-height: 1.5;
	max-width: 68ch;
	margin: 14px 0 0;
}

/* Stacked, the image leads and the explicit top margins would double up. */
@container (max-width: 639px) {
	.ag-ins__latest-grid {
		row-gap: 12px;
	}

	.ag-ins p.ag-ins__latest-meta,
	.ag-ins p.ag-ins__latest-desc {
		margin-top: 0;
	}
}

/* 157.5 crops rather than rounding up, so the card never grows a half pixel. */
.ag-ins__latest-img,
.ag-ins__card {
	width: var(--ag-ins-img-w);
	height: var(--ag-ins-img-h);
	overflow: hidden;
	border-radius: var(--ag-ins-r-small);
	flex: none;
}

/* Imagify rewrites the tag to <picture> and carries the class up onto the
   wrapper, so the rule has to reach the inner <img> as well. Without the
   second selector the image sizes by intrinsic aspect ratio and only looks
   right because the cards happen to be 1.905:1; a card at any other ratio
   would letterbox. */
.ag-ins__latest-thumb,
.ag-ins__card-img,
.ag-ins__card img,
.ag-ins__card picture,
.ag-ins__latest-img img,
.ag-ins__latest-img picture {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	max-width: 100%;
}

/* --------------------------------------------------------------------------
   4. Search
   The one white surface on the page besides the results panel, so the input
   reads as the page's primary control.
   -------------------------------------------------------------------------- */

.ag-ins__search:empty {
	display: none;
}

.ag-ins__search-panel {
	background: var(--ag-ins-surface);
	border: 1px solid var(--ag-ins-hairline);
	border-radius: var(--ag-ins-r-surface);
	box-shadow: var(--ag-ins-shadow);
	padding: clamp(16px, 1.8vw, 22px) clamp(18px, 2vw, 24px);
}

.ag-ins__search-input {
	display: block;
	width: 100%;
	border: 0;
	background: transparent;
	/* 16px minimum: a smaller input triggers automatic zoom on focus in iOS
	   Safari, and on a page whose primary interaction is search that is a
	   visible defect. */
	font-size: var(--ag-ins-input);
	font-family: inherit;
	line-height: 1.5;
	color: var(--ag-ins-ink);
	padding: 0;
}

.ag-ins__search-input::placeholder {
	color: var(--ag-ins-placeholder);
}

.ag-ins__search-input:focus {
	outline: none;
}

.ag-ins__search-status {
	font-size: var(--ag-ins-meta);
	color: var(--ag-ins-muted);
	margin-top: 8px;
}

/* --------------------------------------------------------------------------
   5. Filter chips
   A grid rather than a flex row: equal-width cells keep the chip block from
   ragging, and auto-fill reflows it without a breakpoint rule.
   -------------------------------------------------------------------------- */

/* 12px, measured. The label belongs to the grid below it, so this gap has to
   read as tighter than the 1.6% above the block. */
.ag-ins__filters .ag-ins__kicker {
	margin-bottom: 12px;
}

.ag-ins__chips {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(clamp(134px, 12vw, 144px), 1fr));
	gap: 10px;
}

.ag-ins a.ag-ins__chip {
	display: block;
	text-align: center;
	border: 1.5px solid var(--ag-ins-madder);
	border-radius: var(--ag-ins-r-small);
	padding: clamp(6px, 0.7vw, 8px);
	font-size: var(--ag-ins-chip);
	font-weight: 600;
	letter-spacing: -0.3px;
	line-height: 1.4;
	background: transparent;
	color: var(--ag-ins-madder);
	transition: background-color .12s ease, color .12s ease;
}

.ag-ins a.ag-ins__chip:hover,
.ag-ins a.ag-ins__chip:focus-visible {
	background: var(--ag-ins-highlight);
	color: var(--ag-ins-madder-hover);
	text-decoration: none;
}

.ag-ins a.ag-ins__chip.is-selected {
	background: var(--ag-ins-madder);
	color: #fff;
}

.ag-ins a.ag-ins__chip.is-selected:hover,
.ag-ins a.ag-ins__chip.is-selected:focus-visible {
	background: var(--ag-ins-madder-hover);
	color: #fff;
}

/* Search takes precedence over the chips. While a query is active they are
   dimmed and click-guarded rather than removed, so the control set does not
   jump around under the reader. */
.ag-ins__chips.is-locked .ag-ins__chip {
	opacity: .4;
	cursor: default;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   6. Results panel
   Sits above the article sections and never replaces them.
   -------------------------------------------------------------------------- */

.ag-ins__results[hidden] {
	display: none;
}

.ag-ins__results {
	background: var(--ag-ins-surface);
	border: 1px solid var(--ag-ins-hairline);
	border-radius: var(--ag-ins-r-surface);
	box-shadow: var(--ag-ins-shadow);
	padding: clamp(20px, 2.6vw, 32px) clamp(22px, 2.9vw, 36px);
}

.ag-ins__results-h2 {
	font-size: var(--ag-ins-h2);
	font-weight: 500;
	line-height: 1.33;
	letter-spacing: -0.5px;
	margin: 0 0 4px;
}

.ag-ins__group {
	font-size: var(--ag-ins-h3);
	font-weight: 500;
	line-height: 1.33;
	letter-spacing: -0.5px;
	margin: 32px 0 0;
}

.ag-ins__result {
	border-top: 1px solid var(--ag-ins-hairline-light);
	padding-top: 22px;
	margin-top: 22px;
}

.ag-ins__result-kicker {
	font-size: var(--ag-ins-kicker);
	font-weight: 700;
	letter-spacing: 1.68px;
	text-transform: uppercase;
	color: var(--ag-ins-madder);
	margin: 0 0 6px;
}

.ag-ins__result-title {
	font-size: var(--ag-ins-body);
	font-weight: 400;
	line-height: 1.3;
	margin: 0;
}

.ag-ins__result-excerpt {
	font-size: var(--ag-ins-body);
	line-height: 1.5;
	color: var(--ag-ins-ink);
	max-width: 78ch;
	margin: 6px 0 0;
}

.ag-ins__result-sub {
	font-size: var(--ag-ins-meta);
	color: var(--ag-ins-muted);
	margin: 6px 0 0;
}

.ag-ins mark {
	background: var(--ag-ins-highlight);
	color: inherit;
	padding: 0 1px;
}

.ag-ins__empty {
	font-size: var(--ag-ins-body);
	line-height: 1.5;
	color: var(--ag-ins-ink);
	max-width: 78ch;
}

/* --------------------------------------------------------------------------
   7. Article sections
   The panel is the section, not the article. Twenty-eight article cards, 17
   of them in one section, would swamp the page, and pagination, collapsing
   and truncation are all forbidden: every published article must be present
   in the served HTML.
   -------------------------------------------------------------------------- */

.ag-ins__sections > * + * {
	margin-top: 2%;
}

.ag-ins__panel {
	background: var(--ag-ins-canvas);
	border: 1px solid var(--ag-ins-madder);
	border-radius: var(--ag-ins-r-panel);
	padding: clamp(24px, 3vw, 40px) clamp(22px, 3.2vw, 44px);
}

.ag-ins__card {
	margin-bottom: 30px;
}

/* The H2 repeats the text on the section card by design: the card is an
   image, and the heading is what carries the document structure for search
   and answer engines. Do not hide it. */
.ag-ins__h2 {
	font-size: var(--ag-ins-h2);
	font-weight: 500;
	line-height: 1.33;
	letter-spacing: -0.5px;
	color: var(--ag-ins-ink);
	margin: 10px 0 0;
}

.ag-ins__copy p {
	font-size: var(--ag-ins-body);
	line-height: 1.5;
	max-width: 68ch;
}

.ag-ins__copy p:first-child {
	margin-top: 18px;
}

.ag-ins__copy p + p {
	margin-top: 12px;
}

.ag-ins__related {
	font-size: var(--ag-ins-h3);
	font-weight: 500;
	line-height: 1.33;
	letter-spacing: -0.5px;
	margin: 30px 0 0;
}

.ag-ins__list {
	list-style: none;
	margin: 30px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}

/* Sections past the grid threshold list in columns. Uniform rows throughout:
   no featured title, no emphasised hub. */
.ag-ins__list--grid {
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 14px 40px;
}

.ag-ins__list--related {
	margin-top: 14px;
}

.ag-ins__item {
	font-size: var(--ag-ins-body);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   Divi list reset
   The text module this page renders inside styles bare `ul` and `li` with
   `.et_pb_text_inner ul`, which ties a single class on specificity and is
   emitted from Divi's dynamic CSS, so source order is not ours to rely on.
   Without this the count highlights and every article row carry a bullet and
   a 26px indent. This is the only place in the file that needs !important.
   -------------------------------------------------------------------------- */

.ag-ins__counts,
.ag-ins__list,
.ag-ins__faq-list {
	list-style: none !important;
	padding-inline-start: 0 !important;
	padding-left: 0 !important;
	margin-left: 0 !important;
}

.ag-ins__count,
.ag-ins__item,
.ag-ins__faq {
	list-style: none !important;
	list-style-type: none !important;
}

.ag-ins__count::marker,
.ag-ins__item::marker,
.ag-ins__faq::marker {
	content: "" !important;
}

/* --------------------------------------------------------------------------
   7b. Questions answered in this section

   Every answer's canonical home stays the article that owns it, so these are
   deep links into the accordion on that article and the answer text is never
   reproduced here. That is also why the page emits no FAQPage: there is no
   second copy of an answer for it to describe.
   -------------------------------------------------------------------------- */

.ag-ins__faqs {
	margin-top: 36px;
	border-top: 1px solid var(--ag-ins-hairline-light);
	padding-top: 28px;
}

.ag-ins__faqs-h3 {
	font-size: var(--ag-ins-h3);
	font-weight: 500;
	line-height: 1.33;
	letter-spacing: -0.5px;
	color: var(--ag-ins-ink);
	margin: 0;
}

.ag-ins p.ag-ins__faqs-sub {
	font-size: var(--ag-ins-meta);
	color: var(--ag-ins-muted);
	margin: 8px 0 0;
}

.ag-ins__faq-list {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 12px 40px;
}

.ag-ins__faq {
	font-size: var(--ag-ins-body);
	line-height: 1.3;
}

/* --------------------------------------------------------------------------
   8. Closing CTA
   -------------------------------------------------------------------------- */

.ag-ins__cta {
	background: var(--ag-ins-ink);
	border-radius: var(--ag-ins-r-panel);
	padding: clamp(32px, 4vw, 56px) clamp(24px, 3.2vw, 44px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}

.ag-ins__cta-h2 {
	font-size: var(--ag-ins-h2);
	font-weight: 500;
	line-height: 1.33;
	letter-spacing: -0.5px;
	color: var(--ag-ins-cream);
	margin: 0;
}

.ag-ins__cta-sub {
	font-size: var(--ag-ins-body);
	line-height: 1.5;
	color: var(--ag-ins-cream-muted);
	margin: 8px 0 0;
}

.ag-ins a.ag-ins__cta-btn {
	background: var(--ag-ins-madder);
	color: var(--ag-ins-cream);
	border-radius: var(--ag-ins-r-small);
	padding: clamp(11px, 1.2vw, 14px) clamp(18px, 2.2vw, 26px);
	font-size: var(--ag-ins-chip);
	font-weight: 600;
	letter-spacing: -0.3px;
	white-space: nowrap;
	transition: background-color .12s ease;
}

.ag-ins a.ag-ins__cta-btn:hover,
.ag-ins a.ag-ins__cta-btn:focus-visible {
	background: var(--ag-ins-madder-hover);
	color: var(--ag-ins-cream);
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   Divi typography pin
   MEASURED, not guessed: the Divi text module this page renders inside sets
   its own base font-size to 26px, and styles bare `a`, `li`, `h2` and `h3`
   with `.et_pb_text_inner`-prefixed selectors. Those beat a single class, so
   every link, list row and card title above was inheriting 26px while the
   paragraph-based rules applied correctly. Divi's dynamic CSS load order is
   not ours to control, so specificity alone cannot be relied on and these
   declarations carry !important deliberately.

   `a` is pinned to `inherit` rather than to a size, so a link always takes the
   size of whatever it sits in. The rules below it are more specific, so the
   chip and the button still set their own.
   -------------------------------------------------------------------------- */

.ag-ins a {
	font-size: inherit !important;
	line-height: inherit !important;
	letter-spacing: inherit !important;
	font-weight: inherit !important;
}

.ag-ins a.ag-ins__chip,
.ag-ins a.ag-ins__cta-btn {
	font-size: var(--ag-ins-chip) !important;
	font-weight: 600 !important;
	letter-spacing: -0.3px !important;
	line-height: 1.4 !important;
}

.ag-ins li.ag-ins__item,
.ag-ins li.ag-ins__faq {
	font-size: var(--ag-ins-body) !important;
	font-weight: 400 !important;
	line-height: 1.3 !important;
	letter-spacing: 0 !important;
}

.ag-ins li.ag-ins__count {
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 1.68px !important;
	line-height: 1 !important;
}

.ag-ins h2.ag-ins__latest-title,
.ag-ins h3.ag-ins__related,
.ag-ins h3.ag-ins__group,
.ag-ins h3.ag-ins__faqs-h3 {
	font-size: var(--ag-ins-h3) !important;
	font-weight: 500 !important;
	line-height: 1.33 !important;
	letter-spacing: -0.5px !important;
}

.ag-ins h2.ag-ins__h2,
.ag-ins h2.ag-ins__results-h2,
.ag-ins h2.ag-ins__cta-h2 {
	font-size: var(--ag-ins-h2) !important;
	font-weight: 500 !important;
	line-height: 1.33 !important;
	letter-spacing: -0.5px !important;
}

.ag-ins h1.ag-ins__h1 {
	font-size: var(--ag-ins-h1) !important;
	font-weight: 700 !important;
	line-height: 1.33 !important;
	letter-spacing: -0.5px !important;
}

.ag-ins .ag-ins__result-title {
	font-size: var(--ag-ins-body) !important;
	font-weight: 400 !important;
	line-height: 1.3 !important;
}

.ag-ins .ag-ins__result-excerpt,
.ag-ins .ag-ins__empty,
.ag-ins .ag-ins__copy p,
.ag-ins p.ag-ins__latest-desc,
.ag-ins p.ag-ins__cta-sub {
	font-size: var(--ag-ins-body) !important;
	line-height: 1.5 !important;
}

.ag-ins .ag-ins__kicker,
.ag-ins .ag-ins__result-kicker {
	font-size: var(--ag-ins-kicker) !important;
	font-weight: 700 !important;
	letter-spacing: 1.68px !important;
}

.ag-ins p.ag-ins__latest-meta,
.ag-ins p.ag-ins__result-sub,
.ag-ins p.ag-ins__faqs-sub,
.ag-ins p.ag-ins__search-status {
	font-size: var(--ag-ins-meta) !important;
	line-height: 1.5 !important;
}

.ag-ins input.ag-ins__search-input {
	font-size: var(--ag-ins-input) !important;
	line-height: 1.5 !important;
}

@media (prefers-reduced-motion: reduce) {
	.ag-ins * {
		transition: none !important;
	}
}