/* =====================================================================
   LeadsNimble Blog — the post grid for the /blog/ listing page.

   RESKINNED 2026-07-30 onto the project's real design system. The first
   port of this file carried the PRE-RESET palette (brand #3f65b0 →
   #42a2da, an italic Instrument Serif accent, a system-ui font stack and
   its own dotted-grid surface), which no longer matches anything on the
   site. Every token below is now the aurora-nightfall system as resolved
   in lnew-faq.css / lnew-industries.css, so the Blog reads as part of the
   same family as the nav, footer, FAQ and pricing:

     type      DM Sans (body) + Parkinsans (headings), never a serif
     accent    linear-gradient(100deg, #6366f1 0%, #a855f7 52%, #22d3ee 100%)
     light     bg #dde2f4 · ink #12122a · body #454a63 · muted #6b7089
     dark      bg #0a0a12 · ink #f5f6ff · body #b8bed6 · muted #949bbb
     surface   #ffffff / rgba(255,255,255,.045) glass in dark
     line      #e7e9f4 / rgba(255,255,255,.10) in dark
     eyebrow   the dim indicator-lamp pill (5.2s lit/unlit cycle)
     card      radius 24px, 0 18px 34px -16px rgba(20,20,55,.34)

   LIGHT is the default mode and [data-mode="dark"] flips the palette —
   the same switch the nav writes, matching every other widget here.

   Section rhythm is the reference's own, shared with lnew-faq.css:
     section  112px block padding (84 / 64 / 54 at 1040 / 760 / 460)
     wrap     1360px max-width, 28px gutter (24 / 20 / 16)
     head     56px bottom margin (44 / 34 / 28), centred
     title    Parkinsans 500, clamp(31px, 3.6vw, 47px), lh 1.12, -.02em

   No extra top padding to clear the header: the site's .lnew-nav2 is
   `position: sticky`, so it occupies layout space rather than overlaying
   the page. (The floating-pill .lnew-nav is what needs the --nav-flow
   offset hero2 carries; this page is not built on it.)

   Idle motion is the eyebrow lamp only — the grid is static. A GSAP
   entrance reveal and pointer aura-parallax layer on top via blog.js,
   both degrading to the finished CSS when GSAP is absent or the visitor
   prefers reduced motion. The [data-anim*] / [data-bl-parallax] hooks and
   the .lnew-has-gsap class are blog.js's contract — do not rename them.
   ===================================================================== */

/* Local reset. Wrapped in :where() so it carries ZERO specificity — see
   [[nav-widget-feature]] for the four cascade traps this avoids. Do not
   unwrap: a bare `.lnew-blog svg {}` is (0,1,1) and would outrank the
   component rules it is meant to sit under. */
.lnew-blog, .lnew-blog *, .lnew-blog *::before, .lnew-blog *::after { box-sizing: border-box; }
:where(.lnew-blog) :where(a) { color: inherit; text-decoration: none; }
:where(.lnew-blog) :where(p) { margin: 0; }
:where(.lnew-blog) :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
:where(.lnew-blog) :where(svg) { display: block; }
:where(.lnew-blog) :where(h1, h2, h3, h4, h5, h6) { margin: 0; }
:where(.lnew-blog) :where(img) { max-width: 100%; }

.lnew-blog {
  /* ---- motion ---- */
  --lnbl-ease: cubic-bezier(.22,1,.36,1);
  --lnbl-dur-fast: .2s;
  --lnbl-dur-base: .3s;
  --lnbl-dur-slow: .5s;

  /* ---- geometry ---- */
  --lnbl-maxw: 1360px;
  --lnbl-gutter: 28px;
  --lnbl-title-size: clamp(31px, 3.6vw, 47px);
  --lnbl-head-align: center;

  --lnbl-cols: 3;
  --lnbl-grid-gap: 26px;
  --lnbl-img-ratio: 16 / 9;   /* the no-image placeholder shape only */

  --lnbl-radius: 24px;
  --lnbl-radius-md: 14px;
  --lnbl-radius-pill: 100px;
  --lnbl-lift: -6px;

  --lnbl-card-pad: 22px;
  --lnbl-card-t-size: 19px;
  --lnbl-excerpt-size: 15.5px;
  --lnbl-meta-size: 13px;

  /* ---- type ---- */
  --lnbl-font-sans: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --lnbl-font-head: 'Parkinsans', 'DM Sans', sans-serif;

  /* ---- palette · LIGHT (the site's default mode) ---- */
  --lnbl-bg: #dde2f4;
  --lnbl-ink: #12122a;
  --lnbl-body: #454a63;
  --lnbl-muted: #6b7089;

  --lnbl-eyebrow-bg: #eef0ff;
  --lnbl-eyebrow-ink: #5b46e0;
  --lnbl-eyebrow-border: #e0e3ff;

  --lnbl-grad-1: #6366f1;
  --lnbl-grad-2: #a855f7;
  --lnbl-grad-3: #22d3ee;
  --lnbl-accent-grad: linear-gradient(100deg, var(--lnbl-grad-1) 0%, var(--lnbl-grad-2) 52%, var(--lnbl-grad-3) 100%);
  --lnbl-accent: #6d5cf5;
  --lnbl-accent-halo: rgba(139,124,255,.28);

  --lnbl-surface: #ffffff;
  --lnbl-surface-2: #f3f5fd;
  --lnbl-line: #e7e9f4;
  --lnbl-card-shadow: 0 18px 34px -16px rgba(20,20,55,.34);
  --lnbl-shadow-lg: 0 30px 70px rgba(30,30,80,.16);
  --lnbl-blur: none;
  --lnbl-glass-hi: transparent;

  position: relative;
  width: 100%;
  overflow-x: clip;
  isolation: isolate;
  padding-top: 112px;
  padding-bottom: 112px;
  background: var(--lnbl-bg);
  font-family: var(--lnbl-font-sans);
  color: var(--lnbl-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- palette · DARK ([data-mode="dark"] on <html>, written by the nav) ----
   The aurora dark tokens, plus the theme's glassmorphism treatment for the
   cards (translucent surface + backdrop blur + an inset highlight instead
   of the flat light shadow), same as lnew-faq.css does for .faq__item. */
[data-mode="dark"] .lnew-blog {
  --lnbl-bg: #0a0a12;
  --lnbl-ink: #f5f6ff;
  --lnbl-body: #b8bed6;
  --lnbl-muted: #949bbb;

  --lnbl-eyebrow-bg: rgba(255,255,255,.05);
  --lnbl-eyebrow-ink: #cdc6ff;
  --lnbl-eyebrow-border: rgba(255,255,255,.12);

  --lnbl-accent: #8b7cff;
  --lnbl-accent-halo: rgba(139,124,255,.28);

  --lnbl-surface: rgba(255,255,255,.045);
  --lnbl-surface-2: rgba(255,255,255,.03);
  --lnbl-line: rgba(255,255,255,.10);
  --lnbl-glass-hi: rgba(255,255,255,.10);
  --lnbl-card-shadow: 0 18px 34px -16px rgba(0,0,0,.5);
  --lnbl-shadow-lg: 0 34px 74px rgba(0,0,0,.62);
  --lnbl-blur: blur(14px);
}

/* =====================================================================
   Decorative auras — parallaxed by blog.js via [data-bl-parallax].
   Tuned to the aurora accents so they tint the surface the same way the
   rest of the family's glows do.
   ===================================================================== */
.lnew-blog__aura {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(66px);
  opacity: .5;
  pointer-events: none;
  will-change: transform;
}
.lnew-blog__aura--top {
  top: -6%; right: -8%;
  width: 44%; height: 44%;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--lnbl-grad-1) 22%, transparent),
    color-mix(in srgb, var(--lnbl-grad-2) 11%, transparent) 60%,
    transparent 80%);
}
.lnew-blog__aura--btm {
  bottom: -8%; left: -10%;
  width: 50%; height: 50%;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--lnbl-grad-3) 20%, transparent),
    color-mix(in srgb, var(--lnbl-grad-1) 12%, transparent) 60%,
    transparent 80%);
}
[data-mode="dark"] .lnew-blog__aura { opacity: .38; }

/* =====================================================================
   Layout
   ===================================================================== */
.lnew-blog__wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--lnbl-maxw);
  margin-inline: auto;
  padding-inline: var(--lnbl-gutter);
}

.lnew-blog__head {
  max-width: none;
  margin-inline: auto;
  margin-bottom: 56px;
  text-align: var(--lnbl-head-align);
}

/* =====================================================================
   Eyebrow — the dim indicator lamp. Kept dim on purpose: a continuous
   sine pulse reads as decoration, a lit/unlit cycle reads as a status
   light. Identical metrics and cadence to lnew-faq.css.
   ===================================================================== */
.lnew-blog .lnew-blog__eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--lnbl-font-sans);
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
  color: var(--lnbl-eyebrow-ink);
  background: var(--lnbl-eyebrow-bg);
  border: 1px solid var(--lnbl-eyebrow-border);
  padding: 7px 14px; border-radius: var(--lnbl-radius-pill);
  line-height: 1.6;
  text-transform: none;
}
.lnew-blog__eyebrow-dot {
  width: 7px; height: 7px; flex: none; border-radius: 50%;
  background: var(--lnbl-accent);
  box-shadow: 0 0 0 4px var(--lnbl-accent-halo);
  opacity: .45;
  animation: lnbl-dot-lamp 5.2s ease-in-out infinite;
}
@keyframes lnbl-dot-lamp {
  0%        { opacity: .35; box-shadow: 0 0 0 4px var(--lnbl-accent-halo), 0 0 0 0 transparent; }
  8%        { opacity: 1;   box-shadow: 0 0 0 4px var(--lnbl-accent-halo), 0 0 7px 1px var(--lnbl-accent); }
  22%       { opacity: 1;   box-shadow: 0 0 0 4px var(--lnbl-accent-halo), 0 0 7px 1px var(--lnbl-accent); }
  40%, 100% { opacity: .35; box-shadow: 0 0 0 4px var(--lnbl-accent-halo), 0 0 0 0 transparent; }
}

/* =====================================================================
   Section title — Parkinsans, with the gradient-clipped accent span.
   The accent is NOT a serif italic here: this system's highlight is the
   three-stop aurora gradient clipped to the text, same as every other
   section head on the site.
   ===================================================================== */
.lnew-blog .lnew-blog__title {
  font-family: var(--lnbl-font-head);
  font-weight: 500;
  font-size: var(--lnbl-title-size);
  margin-top: 18px;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--lnbl-ink);
  text-wrap: balance;
}
.lnew-blog__title-lead,
.lnew-blog__title-tail { color: inherit; }
.lnew-blog .lnew-blog__accent {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  background: var(--lnbl-accent-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.lnew-blog .lnew-blog__subtitle {
  margin-top: 18px;
  margin-inline: auto;
  max-width: 680px;
  font-size: 18px;
  font-weight: 400;
  color: var(--lnbl-muted);
  line-height: 1.65;
  text-wrap: balance;
}

/* =====================================================================
   Post grid
   ===================================================================== */
.lnew-blog__grid {
  display: grid;
  grid-template-columns: repeat(var(--lnbl-cols), minmax(0, 1fr));
  gap: var(--lnbl-grid-gap);
  align-items: stretch;
}
.lnew-blog__item { display: flex; min-width: 0; }

/* =====================================================================
   Post card — the family's surface slab: white in light, translucent
   glass in dark, 24px radius, soft shadow, lift + accent-tinted glow on
   hover (the same gesture lnew-industries.css uses for its photo cards).
   ===================================================================== */
.lnew-blog__card {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  background: var(--lnbl-surface);
  border: 1px solid var(--lnbl-line);
  border-radius: var(--lnbl-radius);
  box-shadow: var(--lnbl-card-shadow), inset 0 1px 0 var(--lnbl-glass-hi);
  -webkit-backdrop-filter: var(--lnbl-blur);
          backdrop-filter: var(--lnbl-blur);
  transition: transform var(--lnbl-dur-slow) var(--lnbl-ease),
              box-shadow var(--lnbl-dur-slow) var(--lnbl-ease),
              border-color var(--lnbl-dur-slow) var(--lnbl-ease);
}
.lnew-blog__card:hover {
  transform: translateY(var(--lnbl-lift));
  box-shadow: var(--lnbl-shadow-lg), 0 24px 60px -26px var(--lnbl-accent-halo);
  border-color: color-mix(in srgb, var(--lnbl-accent) 26%, var(--lnbl-line));
}
/* Keyboard focus surfaces the same affordance as hover. */
.lnew-blog__card:focus-within {
  border-color: color-mix(in srgb, var(--lnbl-accent) 55%, transparent);
  box-shadow: 0 0 0 3px var(--lnbl-accent-halo);
}

/* ----- Thumbnail ----- */
.lnew-blog__media {
  position: relative;
  display: block;
  background: var(--lnbl-surface-2);
  overflow: hidden;
}
/* The image defines the media height, so the holder always matches it
   exactly — the whole image shows (never cropped) with no gap, whatever
   its aspect ratio. --lnbl-img-ratio shapes the placeholder only. */
.lnew-blog__img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: transform var(--lnbl-dur-slow) var(--lnbl-ease);
}
.lnew-blog__card:hover .lnew-blog__img { transform: scale(1.04); }

/* Placeholder when a post has no featured image. */
.lnew-blog__media--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: var(--lnbl-img-ratio);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--lnbl-grad-1) 12%, var(--lnbl-surface)),
    color-mix(in srgb, var(--lnbl-grad-3) 8%, var(--lnbl-surface)));
}
.lnew-blog__media--empty svg {
  width: 38px; height: 38px;
  color: var(--lnbl-accent);
  opacity: .55;
}

/* ----- Body ----- */
.lnew-blog__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: var(--lnbl-card-pad);
  flex: 1;
}

/* ----- Category badge — the accent-tinted pill ----- */
.lnew-blog__cats { display: flex; flex-wrap: wrap; gap: 8px; }
.lnew-blog__cat {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lnbl-eyebrow-ink);
  background: var(--lnbl-eyebrow-bg);
  border: 1px solid var(--lnbl-eyebrow-border);
  border-radius: var(--lnbl-radius-pill);
  line-height: 1.4;
}

/* ----- Card title ----- */
.lnew-blog .lnew-blog__card-title {
  font-family: var(--lnbl-font-head);
  font-size: var(--lnbl-card-t-size);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--lnbl-ink);
}
.lnew-blog .lnew-blog__card-title a {
  color: inherit;
  transition: color var(--lnbl-dur-fast) var(--lnbl-ease);
}
.lnew-blog .lnew-blog__card-title a:hover { color: var(--lnbl-accent); }
/* Stretched link — the whole card is clickable while the accessible link
   text stays on the post title. */
.lnew-blog__card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* ----- Excerpt ----- */
.lnew-blog .lnew-blog__excerpt {
  font-size: var(--lnbl-excerpt-size);
  font-weight: 400;
  line-height: 1.6;
  color: var(--lnbl-body);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ----- Meta row (date · author · read time) ----- */
.lnew-blog__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: var(--lnbl-meta-size);
  font-weight: 500;
  color: var(--lnbl-muted);
}
.lnew-blog__meta-item { display: inline-flex; align-items: center; gap: 5px; }
.lnew-blog__meta-item svg { width: 14px; height: 14px; flex: none; }
.lnew-blog__meta-sep {
  width: 3px; height: 3px; flex: none;
  border-radius: 50%;
  background: currentColor;
  opacity: .5;
}
.lnew-blog__avatar {
  width: 20px; height: 20px; flex: none;
  border-radius: 50%;
  object-fit: cover;
}

/* ----- Read more ----- */
.lnew-blog__more {
  position: relative;
  z-index: 2;   /* above the stretched-link overlay, so it stays hoverable */
  margin-top: auto;
  padding-top: 2px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--lnbl-accent);
  transition: gap var(--lnbl-dur-fast) var(--lnbl-ease);
}
.lnew-blog__more svg {
  width: 16px; height: 16px; flex: none;
  transition: transform var(--lnbl-dur-fast) var(--lnbl-ease);
}
.lnew-blog__card:hover .lnew-blog__more { gap: 10px; }
.lnew-blog__card:hover .lnew-blog__more svg { transform: translateX(2px); }

/* =====================================================================
   Empty state
   ===================================================================== */
.lnew-blog__empty {
  max-width: 460px;
  margin-inline: auto;
  text-align: center;
  padding: 56px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.lnew-blog__empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px; height: 58px;
  border-radius: 16px;
  color: var(--lnbl-accent);
  background: var(--lnbl-eyebrow-bg);
  border: 1px solid var(--lnbl-eyebrow-border);
}
.lnew-blog__empty-icon svg { width: 26px; height: 26px; }
.lnew-blog .lnew-blog__empty-text {
  font-size: 16px;
  color: var(--lnbl-muted);
}

/* =====================================================================
   Pagination — neutral slabs, the active page filled with the aurora
   gradient (the family's "this one is live" treatment).
   ===================================================================== */
.lnew-blog__pagination {
  margin-top: 48px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.lnew-blog__pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 13px;
  border-radius: var(--lnbl-radius-md);
  border: 1px solid var(--lnbl-line);
  background: var(--lnbl-surface);
  color: var(--lnbl-ink);
  font-size: 15px;
  font-weight: 600;
  -webkit-backdrop-filter: var(--lnbl-blur);
          backdrop-filter: var(--lnbl-blur);
  transition: background-color var(--lnbl-dur-fast) var(--lnbl-ease),
              border-color var(--lnbl-dur-fast) var(--lnbl-ease),
              color var(--lnbl-dur-fast) var(--lnbl-ease),
              box-shadow var(--lnbl-dur-fast) var(--lnbl-ease);
}
.lnew-blog__pagination a.page-numbers:hover {
  border-color: color-mix(in srgb, var(--lnbl-accent) 40%, transparent);
  color: var(--lnbl-accent);
  box-shadow: 0 8px 20px -12px var(--lnbl-accent-halo);
}
.lnew-blog__pagination .page-numbers.current {
  background: var(--lnbl-accent-grad);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 12px 26px -12px var(--lnbl-accent-halo);
}
.lnew-blog__pagination .page-numbers.dots {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--lnbl-muted);
}
.lnew-blog__pagination .page-numbers:focus-visible {
  outline: 2px solid var(--lnbl-accent);
  outline-offset: 3px;
}

/* =====================================================================
   GSAP pre-hide hint — only while GSAP will drive the reveal (blog.js
   adds .lnew-has-gsap once it has confirmed the library is present).
   ===================================================================== */
.lnew-blog.lnew-has-gsap [data-anim],
.lnew-blog.lnew-has-gsap [data-anim-item] { will-change: transform, opacity; }

/* =====================================================================
   Responsive — the reference's own steps (1040 / 760 / 460) for the
   section rhythm, plus the grid's own column steps.
   ===================================================================== */
@media (max-width: 1040px) {
  .lnew-blog { --lnbl-gutter: 24px; padding-top: 84px; padding-bottom: 84px; }
  .lnew-blog__head { margin-bottom: 44px; }
  .lnew-blog__grid { --lnbl-cols: 2; }
}

@media (max-width: 760px) {
  .lnew-blog { --lnbl-gutter: 20px; padding-top: 64px; padding-bottom: 64px; }
  .lnew-blog__head { margin-bottom: 34px; }
  .lnew-blog .lnew-blog__subtitle { font-size: 16.5px; }
}

@media (max-width: 600px) {
  .lnew-blog__grid { --lnbl-cols: 1; }
}

@media (max-width: 460px) {
  .lnew-blog { --lnbl-gutter: 16px; padding-top: 54px; padding-bottom: 54px; }
  .lnew-blog__head { margin-bottom: 28px; }
}

/* Reduced motion — no lamp, no hover lift, no thumbnail zoom. */
@media (prefers-reduced-motion: reduce) {
  .lnew-blog__eyebrow-dot { animation: none !important; opacity: 1; }
  .lnew-blog__card { transition: none !important; }
  .lnew-blog__card:hover { transform: none; }
  .lnew-blog__card:hover .lnew-blog__img { transform: none; }
  .lnew-blog__img { transition: none !important; }
}