/**
 * Insights archive (/insights) corrections over the carried Webflow baseline.
 *
 * The markup reuses the live Webflow classes verbatim, so webflow.css styles it
 * pixel-for-pixel. This file only holds the WP-context delta:
 *
 *   1. Interior-page header clearance is redundant here. home-figma.css applies
 *      `body:not(.home) #main { padding-top: 120px }` to every interior page to
 *      clear the fixed header, but the live /insights page gives its #main NO
 *      top padding — the hero's own `.padding-vertical` (64px) sits under the
 *      fixed nav exactly like live. The global 120px therefore pushes the whole
 *      hero down by 120px and makes the hero block look oversized. Zero it.
 *      Must out-specify home-figma's `body:not(.home) #main` (1,1,1) and load
 *      after it, so the insight `#main.main-content` selector (1,2,1) wins.
 *
 * Loaded only on the insights archive, after home-figma.css, so it wins.
 */

body.post-type-archive-insight #main.main-content {
	padding-top: 0;
}

/* Insights hero — match the Figma design (node 4489:1285): a CENTERED column,
 * not the carried left-aligned side-by-side row. Title Archivo 76/80 centered,
 * strapline Geist 20/28 centered below it (16px gap, ~954px max width). */
.insights-hero_component {
	flex-direction: column;
	align-items: center;
	text-align: center;
	row-gap: 16px;
	column-gap: 0;
}
.insights-hero_component .spacer-16 { display: none; }
.insights-hero_component .text-block-34 {
	font-family: Archivo, sans-serif;
	font-weight: 500;
	font-size: 76px;
	line-height: 80px;
	text-align: center;
}
.insights-hero_component .text-block-35 {
	font-family: Geist, sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 28px;
	text-align: center;
	align-self: center;
	max-width: 954px;
}
@media (max-width: 767px) {
	.insights-hero_component .text-block-34 { font-size: 44px; line-height: 48px; }
	.insights-hero_component .text-block-35 { font-size: 16px; line-height: 24px; }
	/* Anastasiia/Sandro — the hero carried the DESKTOP top padding (160px) on
	   mobile too, leaving a huge empty band above "Insights" + loose gaps to the
	   filter tabs. Tighten the hero to a mobile-appropriate clearance. Must match
	   the body-scoped 160px rule's specificity (0,2,1) to win. */
	body.post-type-archive-insight .insights-hero_component {
		padding-top: 72px;
		padding-bottom: 16px;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Single playbook/insight ARTICLE — editorial template (Figma "Playbook" 4817:1923)
 * Phase 1: hero (back-link + title + subtitle + meta + divider), centred reading
 * column, body typography, dark pull-quote. Scoped to .ld-insight.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero head ── */
.ld-insight .ld-insight__hero { background: #f7f7f7; }
.ld-insight .ld-insight__hero .home-hero { padding-top: 56px; padding-bottom: 0; }
.ld-insight .ld-insight__head {
	display: flex; flex-direction: column; align-items: flex-start;
	gap: 24px; text-align: left;
	padding-bottom: 48px; border-bottom: 1px solid #e6e9ee;
}
.ld-insight .ld-insight__back {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: "DM Mono", monospace; font-weight: 500; font-size: 14px;
	line-height: 20px; text-transform: uppercase; color: #5d4af5; text-decoration: none;
}
.ld-insight .ld-insight__back:hover { text-decoration: underline; }
.ld-insight .ld-insight__title {
	font-family: Archivo, sans-serif; font-weight: 400;
	font-size: 64px; line-height: 72px; color: #1a1a1a;
	max-width: 740px; margin: 0; text-align: left;
}
.ld-insight .ld-insight__subtitle {
	font-family: Geist, sans-serif; font-weight: 400;
	font-size: 28px; line-height: 40px; color: #1a1a1a;
	max-width: 740px; margin: 0;
}
.ld-insight .ld-insight__meta {
	display: flex; flex-wrap: wrap; gap: 36px; padding-top: 4px;
	font-family: Geist, sans-serif; font-size: 14px; line-height: 20px;
	text-transform: uppercase; letter-spacing: .02em; color: #686868;
}

/* ── Body: centred reading column + typography ── */
.ld-insight .sections_collection-page .home-features { padding-top: 60px; }
.ld-insight .insights-posts { max-width: 700px; margin: 0 auto; font-family: Geist, sans-serif; text-align: left; }
.ld-insight .insights-posts > * { max-width: 700px; margin-left: auto; margin-right: auto; }
.ld-insight .insights-posts p {
	font-size: 20px; line-height: 30px; color: #1a1a1a; margin: 0 0 24px;
}
.ld-insight .insights-posts h2 {
	font-family: Archivo, sans-serif; font-weight: 400; font-size: 40px;
	line-height: 48px; color: #1a1a1a; margin: 48px 0 16px;
}
.ld-insight .insights-posts h3,
.ld-insight .insights-posts h4,
.ld-insight .insights-posts h5,
.ld-insight .insights-posts h6 {
	font-family: Archivo, sans-serif; font-weight: 400; font-size: 32px;
	line-height: 40px; color: #1a1a1a; margin: 44px 0 16px;
}
.ld-insight .insights-posts h2 strong,
.ld-insight .insights-posts h3 strong,
.ld-insight .insights-posts h4 strong,
.ld-insight .insights-posts h5 strong { font-weight: 400; }
.ld-insight .insights-posts strong { font-weight: 600; }
.ld-insight .insights-posts a { color: #5d4af5; text-decoration: underline; }

/* lists → bulleted with the brand dot */
.ld-insight .insights-posts ul { list-style: none; padding: 0; margin: 0 0 24px; }
.ld-insight .insights-posts ul li {
	position: relative; padding-left: 28px; font-size: 20px; line-height: 30px;
	color: #1a1a1a; margin-bottom: 12px;
}
.ld-insight .insights-posts ul li::before {
	content: ""; position: absolute; left: 4px; top: 12px;
	width: 6px; height: 6px; border-radius: 50%; background: #5d4af5;
}
.ld-insight .insights-posts ol { padding-left: 22px; margin: 0 0 24px; }
.ld-insight .insights-posts ol li { font-size: 20px; line-height: 30px; color: #1a1a1a; margin-bottom: 12px; }

/* collapse the Webflow zero-width-space spacer <p>‍</p> rhythm */
.ld-insight .insights-posts p:only-child:empty { display: none; }

/* images in the body */
.ld-insight .insights-posts img,
.ld-insight .insights-posts figure { max-width: 100%; height: auto; border-radius: 6px; margin: 32px auto; display: block; }

/* dark pull-quote (Figma "quote" #1A1A1A) — ready for <blockquote> content */
.ld-insight .insights-posts blockquote {
	background: #1a1a1a; color: #fdfdfc; border: 0; border-radius: 6px;
	padding: 40px; margin: 48px auto;
	font-family: Geist, sans-serif; font-weight: 600; font-size: 20px; line-height: 28px;
}
.ld-insight .insights-posts blockquote p { color: #fdfdfc; font-weight: 600; font-size: 20px; line-height: 28px; margin: 0; }

/* tablet / mobile */
@media (max-width: 991px) {
	.ld-insight .ld-insight__title { font-size: 48px; line-height: 56px; }
	.ld-insight .ld-insight__subtitle { font-size: 22px; line-height: 32px; }
}
@media (max-width: 767px) {
	.ld-insight .ld-insight__hero .home-hero { padding-top: 32px; }
	.ld-insight .ld-insight__head { gap: 16px; padding-bottom: 32px; }
	.ld-insight .ld-insight__title { font-size: 36px; line-height: 42px; }
	.ld-insight .ld-insight__subtitle { font-size: 18px; line-height: 26px; }
	.ld-insight .ld-insight__meta { gap: 20px; }
	.ld-insight .insights-posts p,
	.ld-insight .insights-posts ul li,
	.ld-insight .insights-posts ol li { font-size: 17px; line-height: 26px; }
	.ld-insight .insights-posts h2 { font-size: 30px; line-height: 36px; }
	.ld-insight .insights-posts h3,
	.ld-insight .insights-posts h4,
	.ld-insight .insights-posts h5 { font-size: 24px; line-height: 30px; }
	.ld-insight .insights-posts blockquote { padding: 28px; }
}

/* ── Table of contents "What's on this page" (Figma eyebrow DM Mono) ── */
.ld-insight .ld-insight__toc { max-width: 700px; margin: 0 auto 48px; }
.ld-insight .ld-insight__toc-title {
	font-family: "DM Mono", monospace; font-weight: 500; font-size: 28px;
	line-height: 36px; color: #1a1a1a; margin: 0 0 20px;
}
.ld-insight .ld-insight__toc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ld-insight .ld-insight__toc-list li { position: relative; padding-left: 24px; }
.ld-insight .ld-insight__toc-list li::before { content: "\2192"; position: absolute; left: 0; top: 0; color: #5d4af5; }
.ld-insight .ld-insight__toc-list a {
	font-family: Geist, sans-serif; font-size: 16px; line-height: 24px;
	color: #5d4af5; text-decoration: none;
}
.ld-insight .ld-insight__toc-list a:hover { text-decoration: underline; }
/* anchor scroll offset for the fixed header */
.ld-insight .insights-posts h2,
.ld-insight .insights-posts h3,
.ld-insight .insights-posts h4,
.ld-insight .insights-posts h5 { scroll-margin-top: 120px; }
@media (max-width: 767px) {
	.ld-insight .ld-insight__toc { margin-bottom: 32px; }
	.ld-insight .ld-insight__toc-title { font-size: 20px; line-height: 28px; }
}

/* ─── C3 (Anastasiia row18) — insights hero excessive top padding ────────────
   .insights-hero_component carried 240px top padding → ~204px visible empty
   block above the "Insights" heading. Figma (4489:1285) places the heading
   ~121px below the navbar (cap-top y225). Reduce to match. Archive page only. */
body.post-type-archive-insight .insights-hero_component { padding-top: 160px; }
/* C3 cont. — tighten the excessive gap between the intro and the filter tabs
   (was ~193px). Trim the hero's bottom padding + the filter section's top. */
body.post-type-archive-insight .insights-hero_component { padding-bottom: 24px; }
body.post-type-archive-insight .section_home-deliver .padding-vertical { padding-top: 0; }

/* C3 mobile (Anastasiia/Sandro) — the 160px above is the DESKTOP clearance; on
   mobile it left a huge empty band above "Insights" and loose gaps to the filter
   tabs. Tighten the hero on phones. Placed after the desktop rules so it wins. */
@media (max-width: 767px) {
	body.post-type-archive-insight .insights-hero_component {
		padding-top: 72px;
		padding-bottom: 0px;
	}

	body.post-type-archive-insight .main-wrapper .padding-vertical {
		padding-bottom: 40px;
	}

	body.post-type-archive-insight .insights-collection-list {
		padding-top: 20px;
	}
}

/* ─── r18 (Anastasiia Design Audit 4) — insight card internals. The gap between a
   card's summary text and its date/meta row must be 12px (Figma card 4454-7148); the
   carried `.spacer-20` that sits right after the summary renders 20px. Trim just that
   one spacer (the sibling adjacent to the summary), leaving the other `.spacer-20`
   utilities untouched. The card-to-card gap is already 24px (grid-row-gap), confirmed
   live, so nothing else changes. */
.collection_post-summary + .spacer-20 {
	padding-top: 12px;
}

/* ─── r21 (Anastasiia Design Audit 4) — the "Load more" pagination button must become
   the UI-kit **Outlined** button (Figma 7727:15170): transparent fill, 1px #5D4AF5
   border, 4px radius, 8px 24px padding, DM Mono 500 14/20 uppercase #5D4AF5 label, and
   NO icon. The carried `.w-pagination-next` ships a filled/grey Webflow pagination
   button with a leading icon. Same on desktop + mobile (not breakpoint-scoped). */
body.post-type-archive-insight .w-pagination-next {
	background-color: transparent;
	border: 1px solid #5d4af5;
	border-radius: 4px;
	padding: 8px 24px;
	margin: 0;
	color: #5d4af5;
	font-family: "DM Mono", ui-monospace, monospace;
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	transition: background-color .2s ease, color .2s ease;
}
body.post-type-archive-insight .w-pagination-next:hover {
	background-color: #5d4af5;
	color: #fdfdfc;
}
/* Outlined variant carries no icon */
body.post-type-archive-insight .w-pagination-next .pagination-icon-1x1-medium {
	display: none;
}
/* the carried label block ships `padding-top:6px` (which pushed "LOAD MORE" down so it
   read low, not vertically centred) + `font-size:1rem`. Reset both: no top padding and
   the Figma 14/20 so the label sits dead-centre in the button. */
body.post-type-archive-insight .w-pagination-next .pagination_text-block {
	padding-top: 0;
	font-size: 14px;
	line-height: 20px;
}

/* ─── (Anastasiia Design Audit 4 — /insights mobile) — the single-column insight card
   carries max-width:343px, so on wider phones (iPhone Pro/Max, ~402–430px) it stops at
   343px and left-aligns inside its column → a bigger gap on the RIGHT than the left.
   Let it fill the column on phones so it stays centred with equal gutters at every phone
   width (matching the title + tabs above). Phone breakpoint only (single column). */
@media (max-width: 479px) {
	body.post-type-archive-insight .insights-collections-item {
		max-width: none;
	}
	/* the card's thumbnail image is itself capped at max-width:343px on phones, so it
	   stayed 343px and left-aligned inside the now-wider card → 35px empty gap on the
	   right of the violet thumbnail. Let it fill the card too. */
	body.post-type-archive-insight .collection-main_image {
		max-width: none;
		width: 100%;
	}
}