/* Generous vertical breathing room around the .divider-grid bands on
   the blog index, EXCEPT where a divider-grid is adjacent to the
   bottom CTA — those two should sit flush against the CTA on both
   sides for a continuous band. Scoped via chunk load (blog.css only
   fires here). */
.divider-grid { margin: 80px 0; }
.divider-grid:has(+ .cta-band)    { margin-bottom: 0; }
/* The divider-grid between </main> and <footer> needs BOTH margins
   zeroed: top so it stays flush against the CTA above, bottom so the
   footer's own padding-top is the only gap below (matching every
   other page on the site, none of which apply this blog margin). */
.divider-grid:has(+ .site-footer) { margin: 0; }
@media (max-width: 768px) {
  .divider-grid { margin: 56px 0; }
  .divider-grid:has(+ .cta-band)    { margin-bottom: 0; }
  .divider-grid:has(+ .site-footer) { margin: 0; }
}

/* ============================================================
   Blog chunk — blog index, archive, search.

   Section order: hero · featured (3 latest) · filter bar · grid
   (paginated) · CTA band (shared).

   All decorative `gt-*` and `.ft-*` thumbnail variants from the
   redesign source are intentionally skipped — they were
   placeholders for the static demo. WordPress cards use the
   post's featured image (`.blog-card-thumb img`); cards without
   one show a tinted fallback block.
   ============================================================ */

/* Compact hero variants — same look, less padding, no decorative
   floats. Used on search results, category/tag/date archives, and 404. */
.blog-hero--search,
.blog-hero--archive,
.blog-hero--404 { padding: 56px 40px 56px; }
.blog-hero--search .blog-float,
.blog-hero--archive .blog-float,
.blog-hero--404 .blog-float { display: none; }
@media (max-width: 768px) {
  .blog-hero--search,
  .blog-hero--archive,
  .blog-hero--404 { padding: 40px 20px 40px; }
}

/* Center the breadcrumb above the hero H1 (visual identity of these
   pages is centered, so the breadcrumb follows). */
.blog-hero .blog-breadcrumb p { justify-content: center; }

/* 404 page — popular pages list + recent posts heading. */
.four-oh-four { padding-top: 32px; padding-bottom: 80px; }
.four-oh-four__heading {
  font-size: 1.1rem; font-weight: 600;
  margin: 32px 0 16px;
}
.four-oh-four__services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}
.four-oh-four__service {
  display: block;
  padding: 24px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.four-oh-four__service:hover {
  border-color: var(--color-border);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}
.four-oh-four__service h3 {
  font-size: 1rem; font-weight: 600;
  margin: 0 0 6px;
  color: var(--color-text);
}
.four-oh-four__service p {
  font-size: .88rem; line-height: 1.5;
  margin: 0;
  color: var(--color-text-muted);
}
@media (max-width: 768px) {
  .four-oh-four__services { grid-template-columns: 1fr; }
}

/* Tighten the 404 hero search form (uses the theme's searchform.php). */
.blog-hero--404 .search-form {
  display: flex; gap: 8px;
  max-width: 480px; margin: 24px auto 0;
}
.blog-hero--404 .search-form input[type="search"] {
  flex: 1; padding: 10px 14px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  font-size: .95rem;
}
.blog-hero--404 .search-form button {
  padding: 10px 18px;
  background: var(--color-accent); color: var(--color-bg);
  border: none; border-radius: var(--radius-sm);
  font-weight: 600; cursor: pointer;
}
.blog-hero--404 .search-form button:hover { background: var(--color-accent-hover); }

/* ─── HERO ───
   Bottom padding holds enough air to separate the hero from the
   featured row below without needing a horizontal divider. */
.blog-hero {
  position: relative;
  padding: 88px 40px 96px;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.blog-hero-dot-bg {
  position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(circle, rgba(0,0,0,.08) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: .6;
}
.blog-hero-content { position: relative; }
.blog-hero h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.15;
  margin: 0 auto 14px;
  max-width: 820px;
}
.blog-hero p {
  font-size: 1rem;
  color: var(--color-text-muted);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}

/* Floating decorative math symbols — single shared keyframe with
   staggered animation-delays per --N modifier. */
@keyframes blog-float-drift {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-14px) rotate(2deg); }
}
.blog-float {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  pointer-events: none;
  animation: blog-float-drift 7s ease-in-out infinite;
  opacity: .85;
}
.blog-float--1 { top:  18%; left:  10%; color: var(--color-green); }
.blog-float--2 { top:  22%; right: 12%; color: var(--color-accent); font-family: 'Courier New', monospace; animation-delay: -1.4s; }
.blog-float--3 { bottom: 22%; left:  14%; color: var(--color-purple); font-family: 'Courier New', monospace; animation-delay: -2.8s; }
.blog-float--4 { bottom: 26%; right: 10%; color: var(--color-blue); animation-delay: -4.2s; }

@media (max-width: 768px) {
  .blog-hero { padding: 56px 20px 64px; }
  .blog-float { display: none; }
}

/* ─── FEATURED ───
   1 large left card + 2 stacked side cards in an asymmetric grid. */
.blog-featured { padding-bottom: 56px; }
.blog-feat-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: start;
}
.feat-card,
.feat-side-item {
  display: block;
  color: inherit;
  text-decoration: none;
}
.feat-thumb {
  position: relative;
  aspect-ratio: 1000 / 450;
  background: var(--color-bg-warm);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.feat-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.feat-card:hover .feat-thumb,
.feat-side-item:hover .feat-thumb { opacity: .92; }

.feat-body { padding: 16px 0 0; }
.feat-body time {
  display: block;
  font-size: .78rem;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-bottom: 8px;
  letter-spacing: .02em;
}
/* Large featured card title — scoped by parent class so both card
   variants can keep <h3> markup (correct hierarchy under the section
   <h2 class="screen-reader-text">Featured Posts</h2>) while retaining
   their distinct visual weight. */
.feat-card .feat-body h3 {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 10px;
}
.feat-side-item .feat-body h3 {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
}
.feat-excerpt {
  font-size: .92rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}
.blog-feat-side { display: flex; flex-direction: column; }
.feat-side-item:first-child { padding-bottom: 24px; }
.feat-side-item + .feat-side-item {
  padding-top: 24px;
  border-top: 1px solid var(--color-border-subtle);
}
.feat-side-item .feat-thumb { aspect-ratio: 1000 / 350; }

@media (max-width: 900px) {
  .blog-feat-grid { grid-template-columns: 1fr; }
}

/* ─── FILTER BAR ─── */
.blog-filter-bar {
  display: flex; align-items: center;
  gap: 16px; flex-wrap: wrap;
  padding: 40px 0 24px;
}
.blog-filter-tabs {
  display: flex; align-items: center; gap: 4px;
  flex-wrap: wrap; flex: 1;
}
.blog-filter-tab {
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: .8rem; font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.blog-filter-tab:hover {
  background: var(--color-bg-sand);
  color: var(--color-text);
}
.blog-filter-tab.active {
  background: var(--color-text);
  color: var(--color-bg);
  border-color: var(--color-text);
}

.blog-search-wrap {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-pill);
  min-width: 220px;
}
.blog-search-wrap svg {
  color: var(--color-text-muted);
  flex-shrink: 0;
}
.blog-search-wrap input {
  flex: 1;
  padding: 8px 0;
  background: transparent;
  border: none; outline: none;
  font: inherit;
  font-size: .85rem;
}
.blog-search-wrap input::placeholder { color: var(--color-text-muted); }

@media (max-width: 600px) {
  .blog-filter-bar { flex-direction: column; align-items: stretch; }
  .blog-search-wrap { min-width: 0; }
  /* Compact pills so the 4 tabs (View all + top 3) fit in 1–2 rows
     instead of stacking 4 tall. */
  .blog-filter-tabs { gap: 6px; }
  .blog-filter-tab  { padding: 6px 10px; font-size: .72rem; }
}

/* ─── GRID ─── */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 24px;
  padding-bottom: 40px;
}
/* Trailing gap on the grid wrapper — sits between the last grid row
   (or pagination, if it renders) and the .divider-grid above the
   closing CTA band. */
.blog-grid-section { padding-bottom: 48px; }
/* .blog-card cluster lives in style.css (global) — shared with the
   single-post Related section and any future page that needs a card
   linking to a post. Only the JS filter state stays scoped here. */
.blog-card.is-hidden { display: none; }

.blog-empty {
  padding: 40px 0;
  text-align: center;
  color: var(--color-text-muted);
}
.blog-empty[hidden] { display: none; }
.blog-empty a {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}

@media (max-width: 900px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .blog-grid { grid-template-columns: 1fr; } }

/* ─── PAGINATION ─── */
.blog-pagination {
  display: flex; justify-content: center;
}
.blog-pagination .page-numbers {
  display: flex; align-items: center; gap: 4px;
  list-style: none; padding: 0; margin: 0;
}
.blog-pagination .page-numbers li { list-style: none; }
.blog-pagination .page-numbers a,
.blog-pagination .page-numbers span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px;
  padding: 0 10px;
  background: var(--color-bg);
  border: 1px solid var(--color-border-subtle);
  border-radius: 8px;
  font-size: .85rem; font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.blog-pagination .page-numbers a:hover {
  background: var(--color-bg-sand);
  color: var(--color-text);
}
.blog-pagination .page-numbers .current {
  background: var(--color-text);
  color: var(--color-bg);
  border-color: var(--color-text);
}
.blog-pagination .page-numbers .dots {
  border-color: transparent;
  background: transparent;
}