/* ═══════════════════════════════════════════════════════════════════
   blog-static — shared blog stylesheet ("Blacktop Editorial" system)
   Theme per client by overriding the --blog-* variables at the top.
   Copy this file to the client site root as blog.css; the build copies
   it to dist/blog/blog.css and every blog page links it AFTER the
   site's own chrome CSS.

   The agent block catalog at the bottom (callout / comparison /
   checklist / disclaimer) is a hard contract with the blog agent's
   rewrite step — every client blog must style all of it.
   ═══════════════════════════════════════════════════════════════════ */

.lf-blog {
  /* ── theme tokens: override these per client ─────────────────── */
  --blog-primary: #1c63b8;        /* links, primary buttons */
  --blog-primary-dark: #154f96;
  --blog-accent: #f0a500;         /* kickers, rules, highlights */
  --blog-accent-dark: #d4920a;
  --blog-ink: #0a0d14;            /* darkest surface (hero overlay base) */
  --blog-surface-dark: #1e2330;   /* quote blocks, dark bands */
  --blog-surface: #f4f6f9;        /* light section background */
  --blog-card: #ffffff;
  --blog-text: #1e2330;
  --blog-text-light: #5a6075;
  --blog-border: #e2e6ef;
  --blog-font-heading: 'Barlow Condensed', sans-serif;
  --blog-font-body: 'Barlow', sans-serif;
  --blog-radius: 6px;
  --blog-radius-lg: 12px;
  --blog-transition: 0.22s ease;
  --blog-max-width: 1200px;
  --blog-prose-width: 720px;
  /* heading treatment — uppercase suits condensed grotesques; set to
     none + adjust letter-spacing for serif/humanist brands */
  --blog-heading-transform: uppercase;
  --blog-heading-weight: 900;
}

/* ── scaffolding ─────────────────────────────────────────────────── */
#lf-blog-main { font-family: var(--blog-font-body); color: var(--blog-text); line-height: 1.65; }
#lf-blog-main *, #lf-blog-main *::before, #lf-blog-main *::after { box-sizing: border-box; }
.lf-blog :where(#lf-blog-main img) { max-width: 100%; height: auto; display: block; }
#lf-blog-main a { text-decoration: none; color: inherit; }
#lf-blog-main ul { list-style: none; margin: 0; padding: 0; }
/* Class-scoped, :where()-wrapped so this reset carries the specificity of a
   single class and never out-ranks the layout rules below. An ID-scoped reset
   (#lf-blog-main p) silently beat every `.lf-blog .x .sub { margin-top }`
   rule and collapsed the hero spacing. */
.lf-blog :where(#lf-blog-main h1, #lf-blog-main h2, #lf-blog-main h3, #lf-blog-main p) { margin: 0; }
/* Same ID-specificity trap as above — the unwrapped #lf-blog-main .container
   padding:0 24px silently beat .art-hero .inner's padding-top (3 classes)
   below, collapsing the article header's clearance under the fixed nav. */
.lf-blog :where(#lf-blog-main .container) { max-width: var(--blog-max-width); margin: 0 auto; padding: 0 24px; }

.lf-blog .eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--blog-font-heading); font-size: 12px;
  font-weight: 800; letter-spacing: 3.5px; text-transform: uppercase;
  color: var(--blog-accent);
}
.lf-blog .eyebrow::before { content: ''; width: 20px; height: 2px; background: var(--blog-accent); }

.lf-blog .kicker {
  display: inline-block; background: var(--blog-accent); color: var(--blog-ink);
  font-family: var(--blog-font-heading); font-size: 11.5px; font-weight: 900;
  letter-spacing: 2px; text-transform: uppercase;
  padding: 4px 10px; border-radius: 3px;
}
.lf-blog .kicker.blue { background: var(--blog-primary); color: #fff; }

.lf-blog .meta {
  font-size: 12.5px; font-weight: 600; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--blog-text-light);
}

.lf-blog .blog-btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--blog-font-heading); font-size: 14px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase;
  padding: 13px 26px; border-radius: var(--blog-radius);
  background: var(--blog-primary); color: #fff;
  transition: background var(--blog-transition), transform var(--blog-transition);
}
.lf-blog .blog-btn:hover { background: var(--blog-primary-dark); transform: translateY(-1px); }

/* ── LISTING: hero masthead ──────────────────────────────────────── */
.lf-blog .blog-hero {
  position: relative; color: #fff; overflow: hidden;
  background: var(--blog-surface-dark);
  padding: 96px 0 0;
}
.lf-blog .blog-hero .bg { position: absolute; inset: 0; }
.lf-blog .blog-hero .bg img { width: 100%; height: 100%; object-fit: cover; }
.lf-blog .blog-hero .bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,13,20,.99) 10%, rgba(10,13,20,.86) 45%, rgba(10,13,20,.62) 100%);
}
.lf-blog .blog-hero .inner { position: relative; z-index: 1; }
.lf-blog .blog-hero h1 {
  font-family: var(--blog-font-heading); font-weight: var(--blog-heading-weight);
  text-transform: var(--blog-heading-transform);
  font-size: clamp(48px, 8vw, 104px); line-height: .87; letter-spacing: -1.5px;
  margin: 14px 0 0; max-width: 14ch;
}
.lf-blog .blog-hero .sub {
  max-width: 540px; margin-top: 34px; color: rgba(255,255,255,.72);
  font-size: 16.5px; line-height: 1.7;
}

/* featured card docked into hero bottom */
.lf-blog .feat-card {
  margin-top: 52px; display: grid; grid-template-columns: 1.25fr 1fr;
  background: var(--blog-card); color: var(--blog-text);
  border-radius: var(--blog-radius-lg) var(--blog-radius-lg) 0 0; overflow: hidden;
  box-shadow: 0 -20px 60px rgba(0,0,0,.3);
}
.lf-blog .feat-card .media { position: relative; min-height: 320px; display: block; }
.lf-blog .feat-card .media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lf-blog .feat-card .media .kicker { position: absolute; top: 18px; left: 18px; z-index: 1; }
.lf-blog .feat-card .body { padding: 40px 44px 44px; display: flex; flex-direction: column; }
.lf-blog .feat-card .meta { margin-bottom: 12px; }
.lf-blog .feat-card h2 {
  font-family: var(--blog-font-heading); font-weight: var(--blog-heading-weight);
  text-transform: var(--blog-heading-transform);
  font-size: clamp(26px, 2.8vw, 38px); line-height: .98; letter-spacing: -.4px;
}
.lf-blog .feat-card h2 a:hover { color: var(--blog-primary); }
.lf-blog .feat-card p { color: var(--blog-text-light); font-size: 15.5px; line-height: 1.7; margin: 22px 0 24px; flex: 1; }
.lf-blog .feat-card .read {
  font-family: var(--blog-font-heading); font-size: 13px; font-weight: 800;
  letter-spacing: 2px; text-transform: uppercase; color: var(--blog-primary);
  display: inline-flex; align-items: center; gap: 8px;
}
.lf-blog .feat-card .read::after { content: '→'; transition: transform var(--blog-transition); }
.lf-blog .feat-card .read:hover::after { transform: translateX(4px); }

/* ── LISTING: filter tabs ────────────────────────────────────────── */
.lf-blog .blog-filters { background: var(--blog-card); border-bottom: 1px solid var(--blog-border); position: sticky; top: 0; z-index: 50; }
.lf-blog .blog-filters .inner { display: flex; align-items: center; gap: 28px; overflow-x: auto; scrollbar-width: none; }
.lf-blog .blog-filters .inner::-webkit-scrollbar { display: none; }
.lf-blog .filter {
  flex-shrink: 0; background: none; border: 0; cursor: pointer;
  font-family: var(--blog-font-heading); font-size: 13.5px; font-weight: 800;
  letter-spacing: 1.8px; text-transform: uppercase; color: var(--blog-text-light);
  padding: 17px 0 14px; border-bottom: 3px solid transparent;
  transition: var(--blog-transition);
}
.lf-blog .filter:hover { color: var(--blog-text); }
.lf-blog .filter.on { color: var(--blog-text); border-bottom-color: var(--blog-accent); }

/* ── LISTING: magazine grid ──────────────────────────────────────── */
.lf-blog .blog-mag { padding: 72px 0 96px; background: var(--blog-surface); }
.lf-blog .mag-head { margin-bottom: 36px; }
.lf-blog .mag-head h2 {
  font-family: var(--blog-font-heading); font-weight: var(--blog-heading-weight);
  text-transform: var(--blog-heading-transform);
  font-size: clamp(28px, 3.2vw, 44px); line-height: .95; letter-spacing: -.5px; margin-top: 10px;
}
.lf-blog .cards { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.lf-blog .card {
  background: var(--blog-card); border-radius: var(--blog-radius-lg); overflow: hidden;
  display: flex; flex-direction: column; grid-column: span 4;
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
  transition: transform var(--blog-transition), box-shadow var(--blog-transition);
}
.lf-blog .card:hover { transform: translateY(-4px); box-shadow: 0 16px 44px rgba(0,0,0,.12); }
.lf-blog .card .media { position: relative; overflow: hidden; display: block; }
.lf-blog .card .media img { width: 100%; object-fit: cover; transition: transform .5s ease; aspect-ratio: 16/9; }
.lf-blog .card:hover .media img { transform: scale(1.04); }
.lf-blog .card .media .kicker { position: absolute; top: 14px; left: 14px; }
.lf-blog .card .body { padding: 24px 26px; display: flex; flex-direction: column; flex: 1; }
.lf-blog .card h3 {
  font-family: var(--blog-font-heading); font-weight: 800;
  text-transform: var(--blog-heading-transform);
  line-height: 1.02; letter-spacing: -.2px; font-size: 24px;
}
.lf-blog .card h3 a:hover { color: var(--blog-primary); }
.lf-blog .card p { color: var(--blog-text-light); font-size: 14.5px; line-height: 1.66; margin: 16px 0 18px; flex: 1; }
.lf-blog .card .meta { margin-top: auto; }
.lf-blog .card.lg { grid-column: span 7; }
.lf-blog .card.lg .media img { aspect-ratio: 16/8.5; }
.lf-blog .card.lg h3 { font-size: clamp(26px, 2.6vw, 34px); }
.lf-blog .card.md { grid-column: span 5; }
.lf-blog .card.sm { grid-column: span 4; }

.lf-blog .blog-empty { text-align: center; padding: 80px 0; color: var(--blog-text-light); font-size: 17px; }
/* Single-post state: the grid is empty but the docked featured card still
   needs the light band beneath it — otherwise it sits flush on the footer. */
.lf-blog .blog-mag.empty-spacer { padding: 56px 0; }

/* ── ARTICLE: hero ───────────────────────────────────────────────── */
.lf-blog .art-hero { position: relative; color: #fff; min-height: 62vh; display: flex; align-items: flex-end; background: var(--blog-surface-dark); }
.lf-blog .art-hero .bg { position: absolute; inset: 0; overflow: hidden; }
.lf-blog .art-hero .bg img, .lf-blog .art-hero .bg video { width: 100%; height: 100%; object-fit: cover; }
.lf-blog .art-hero .bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,13,20,.99) 8%, rgba(10,13,20,.82) 52%, rgba(10,13,20,.58) 100%);
}
.lf-blog .art-hero .inner { position: relative; z-index: 1; width: 100%; padding: 120px 0 52px; }
.lf-blog .art-hero .crumbs {
  font-size: 12.5px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase;
  color: rgba(255,255,255,.55); margin-bottom: 18px;
}
.lf-blog .art-hero .crumbs a:hover { color: var(--blog-accent); }
.lf-blog .art-hero h1 {
  font-family: var(--blog-font-heading); font-weight: var(--blog-heading-weight);
  text-transform: var(--blog-heading-transform);
  font-size: clamp(36px, 5.6vw, 76px); line-height: .9; letter-spacing: -1px;
  max-width: 17ch; margin: 14px 0 0;
}
.lf-blog .byline { display: flex; align-items: center; gap: 14px; margin-top: 34px; }
.lf-blog .byline .disc {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: var(--blog-accent); color: var(--blog-ink);
  font-family: var(--blog-font-heading); font-weight: 900; font-size: 17px;
  display: flex; align-items: center; justify-content: center; letter-spacing: .5px;
}
.lf-blog .byline .who { line-height: 1.3; }
.lf-blog .byline .who strong { display: block; font-size: 15px; font-weight: 600; }
.lf-blog .byline .who span { font-size: 12.5px; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255,255,255,.55); }

/* ── ARTICLE: body ───────────────────────────────────────────────── */
.lf-blog .art-body-wrap { padding: 68px 0 56px; background: var(--blog-card); }
.lf-blog .article-body {
  max-width: var(--blog-prose-width); margin: 0 auto;
  font-size: 17.5px; line-height: 1.8; color: #2a2f3c;
}
.lf-blog .article-body > * + * { margin-top: 1.2em; }
.lf-blog .article-body > p:first-child { font-size: 20.5px; line-height: 1.72; color: var(--blog-text); }
.lf-blog .article-body > p:first-child::first-letter {
  font-family: var(--blog-font-heading); font-weight: 900; font-size: 74px; line-height: .78;
  float: left; padding: 8px 12px 0 0; color: var(--blog-primary);
}
.lf-blog .article-body h2 {
  font-family: var(--blog-font-heading); font-weight: var(--blog-heading-weight);
  text-transform: var(--blog-heading-transform);
  font-size: clamp(26px, 2.8vw, 36px); line-height: 1.02; letter-spacing: -.3px;
  color: var(--blog-text); margin-top: 2em;
  display: flex; align-items: baseline; gap: 14px;
}
.lf-blog .article-body h2::before {
  content: ''; flex-shrink: 0; align-self: center;
  width: 26px; height: 4px; background: var(--blog-accent);
}
.lf-blog .article-body h3 {
  font-family: var(--blog-font-heading); font-size: 23px; font-weight: 800;
  text-transform: var(--blog-heading-transform); letter-spacing: .2px;
  margin-top: 1.7em; color: var(--blog-text);
}
.lf-blog .article-body a {
  color: var(--blog-primary); text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--blog-primary) 35%, transparent);
  text-decoration-thickness: 2px; text-underline-offset: 3px;
  transition: var(--blog-transition);
}
.lf-blog .article-body a:hover { text-decoration-color: var(--blog-primary); }
.lf-blog .article-body strong { font-weight: 600; color: var(--blog-text); }
.lf-blog .article-body ul { padding-left: 0; }
.lf-blog .article-body ul > li { position: relative; padding-left: 24px; margin-top: .55em; }
.lf-blog .article-body ul > li::before {
  content: ''; position: absolute; left: 2px; top: .66em;
  width: 7px; height: 7px; background: var(--blog-accent); border-radius: 1.5px;
  transform: rotate(45deg);
}
.lf-blog .article-body ol { list-style: none; counter-reset: lf-step; margin: 0; padding: 0; }
.lf-blog .article-body ol > li { counter-increment: lf-step; position: relative; padding-left: 44px; margin-top: .9em; }
.lf-blog .article-body ol > li::before {
  content: counter(lf-step, decimal-leading-zero);
  position: absolute; left: 0; top: .18em;
  font-family: var(--blog-font-heading); font-weight: 900; font-size: 15px;
  color: var(--blog-primary); letter-spacing: 1px;
}
.lf-blog .article-body img { border-radius: var(--blog-radius-lg); margin: 2em 0; }
.lf-blog .article-body blockquote {
  margin: 2.1em -40px; padding: 34px 40px;
  background: var(--blog-surface-dark); color: #fff; border-radius: var(--blog-radius-lg);
  font-family: var(--blog-font-heading); font-size: 27px; font-weight: 700; font-style: italic;
  line-height: 1.22; text-transform: var(--blog-heading-transform); letter-spacing: -.2px;
  position: relative;
}
.lf-blog .article-body blockquote::before {
  content: '\201C'; position: absolute; top: -6px; left: 18px;
  font-size: 110px; color: var(--blog-accent); opacity: .5; font-style: normal;
}
.lf-blog .article-body blockquote p { margin: 0; }
.lf-blog .article-body code {
  font-size: .88em; background: var(--blog-surface);
  border: 1px solid var(--blog-border); border-radius: 3px; padding: 1px 5px;
}
.lf-blog .article-body pre {
  background: var(--blog-ink); color: #dfe4ee; padding: 20px 22px;
  border-radius: var(--blog-radius); overflow-x: auto; font-size: 14px; line-height: 1.6;
}
.lf-blog .article-body pre code { background: none; border: 0; padding: 0; }

/* ── AGENT BLOCK CATALOG — hard contract with the blog agent ─────── */
.lf-blog .article-body .callout {
  border-radius: var(--blog-radius-lg); padding: 26px 30px; margin: 2em 0;
  background: color-mix(in srgb, var(--blog-primary) 8%, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blog-primary) 18%, transparent);
  border: 0;
}
.lf-blog .article-body .callout::before {
  display: inline-block; font-family: var(--blog-font-heading); font-size: 12px;
  font-weight: 900; letter-spacing: 2.4px; text-transform: uppercase;
  background: var(--blog-primary); color: #fff; border-radius: 3px;
  padding: 3px 10px; margin-bottom: 12px;
}
.lf-blog .article-body .callout > *:first-of-type { margin-top: 0; }
.lf-blog .article-body .callout-takeaway::before { content: 'Key Takeaway'; }
.lf-blog .article-body .callout-warning {
  background: #fdf1f1; box-shadow: inset 0 0 0 1px rgba(165,28,28,.2);
}
.lf-blog .article-body .callout-warning::before { content: '\26A0  Important'; background: #a51c1c; }
.lf-blog .article-body .callout-tip {
  background: color-mix(in srgb, var(--blog-accent) 11%, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blog-accent-dark) 28%, transparent);
}
.lf-blog .article-body .callout-tip::before { content: 'Pro Tip'; background: var(--blog-accent); color: var(--blog-ink); }

.lf-blog .article-body .comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 2em 0; }
.lf-blog .article-body .comparison-col {
  background: var(--blog-card); border: 1px solid var(--blog-border);
  border-top: 5px solid var(--blog-primary);
  border-radius: var(--blog-radius); padding: 24px 26px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.lf-blog .article-body .comparison-col + .comparison-col { border-top-color: var(--blog-accent); }
.lf-blog .article-body .comparison-col > *:first-child { margin-top: 0; }
.lf-blog .article-body .comparison-col h3,
.lf-blog .article-body .comparison-col h4 {
  font-family: var(--blog-font-heading); font-size: 19px; font-weight: 900;
  text-transform: uppercase; letter-spacing: .8px; margin: 0 0 12px; color: var(--blog-text);
}
.lf-blog .article-body .comparison-col p,
.lf-blog .article-body .comparison-col li { font-size: 15px; line-height: 1.62; }

.lf-blog .article-body ul.checklist { margin: 1.8em 0; }
.lf-blog .article-body ul.checklist > li {
  background: var(--blog-card); border: 1px solid var(--blog-border); border-radius: var(--blog-radius);
  padding: 14px 18px 14px 48px; margin-top: 8px; font-size: 16px;
}
.lf-blog .article-body ul.checklist > li::before {
  content: '\2713'; width: auto; height: auto; background: none; transform: none;
  left: 18px; top: 13px;
  font-family: var(--blog-font-heading); font-weight: 900; font-size: 17px;
  color: var(--blog-accent-dark);
}

.lf-blog .article-body .disclaimer {
  background: var(--blog-surface); border-radius: var(--blog-radius);
  padding: 18px 22px; margin: 2.4em 0 0;
  font-size: 13.5px; line-height: 1.65; color: var(--blog-text-light);
}
.lf-blog .article-body .disclaimer::before {
  display: block; content: 'Disclaimer';
  font-family: var(--blog-font-heading); font-size: 11px; font-weight: 800;
  letter-spacing: 2.2px; text-transform: uppercase; margin-bottom: 6px;
}

/* ── ARTICLE: related ────────────────────────────────────────────── */
.lf-blog .art-related { padding: 72px 0 96px; background: var(--blog-surface); }
.lf-blog .art-related .cards .card { grid-column: span 4; }

/* ── RESPONSIVE ──────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .lf-blog .card.lg, .lf-blog .card.md, .lf-blog .card.sm,
  .lf-blog .art-related .cards .card { grid-column: span 6; }
  .lf-blog .article-body blockquote { margin-inline: 0; }
}
@media (max-width: 768px) {
  .lf-blog .feat-card { grid-template-columns: 1fr; }
  .lf-blog .feat-card .media { min-height: 230px; }
  .lf-blog .feat-card .body { padding: 28px 26px 32px; }
  .lf-blog .card.lg, .lf-blog .card.md, .lf-blog .card.sm,
  .lf-blog .art-related .cards .card { grid-column: span 12; }
  .lf-blog .blog-hero { padding-top: 72px; }
  .lf-blog .article-body .comparison { grid-template-columns: 1fr; }
  .lf-blog .art-hero .inner { padding: 96px 0 40px; }
}