/* Blog — posts index (/blog/), category/pillar archives, search, single post.
 * Ports src/pages/Blog.tsx (index + BlogPostDetail). Loaded only on blog views.
 * Term colors arrive as CSS vars from inc/blog.php (xq_color term meta):
 *   --xq-cat / --xq-cat-bg / --xq-cat-bw on .category-<slug>
 *   --xq-pil / --xq-pil-bg / --xq-pil-bw on .pillar-<slug>
 * React tints were `${color}NN` hex alpha: 12≈7.06%, 28≈15.69%, 0f≈5.88%,
 * 22≈13.33%, 14≈7.84%, 40≈25.1%. */

.xq-main--blog { padding-top: 64px; }
.xq-main--blog > * { margin-block: 0; }

/* Shared type bits: React's inline text inherits body line-height 1.6. */
.xq-blog-hero, .xq-blog-list, .xq-blog-post { line-height: 1.6; }
.xq-blog-hero a, .xq-blog-list a, .xq-blog-post a { text-decoration: none; }

/* ══ Hero (Blog.tsx 320-385) ══ */
/* React gives this section className="grid-bg" but also an inline
 * `background: var(--bg-base)`, which wins — so no grid is painted. Same
 * for the single-post section. */
.xq-blog-hero {
  background: var(--wp--preset--color--bg-base);
  padding-top: var(--wp--preset--spacing--section-80); padding-bottom: 0;
  border-bottom: 1px solid var(--wp--preset--color--border);
}
.xq-blog-hero > * { margin-block: 0; }
.xq-blog-hero > .xq-blog-hero-copy { margin-bottom: 56px; }
.xq-blog-hero-copy.xq-aos { transform: translateY(20px); transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.xq-blog-hero-copy.xq-aos.xq-in { transform: none; }
.xq-blog-hero-copy > * { margin-block: 0; }
.xq-blog-hero-copy > .xq-t-h2 { margin-bottom: 16px; }
.xq-blog-hero-copy > .xq-t-body-lg { max-width: 560px; }
.xq-blog-hero-copy > .xq-blog-hero-lede > p { margin: 0; }

/* Featured "Latest post" panel (Blog.tsx 339-382) */
.xq-blog-featured-query > *, .xq-blog-featured-list, .xq-blog-featured-list > li { margin: 0; padding: 0; }
.xq-blog-featured-list { list-style: none; }
.xq-blog-featured {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border: 1px solid var(--wp--preset--color--border); border-bottom: none;
  border-radius: 6px 6px 0 0; overflow: hidden;
}
.xq-blog-featured.xq-aos { transform: none; transition: opacity 0.6s ease 0.15s; }
.xq-blog-featured > * { margin: 0; }
.xq-blog-featured-visual {
  position: relative; overflow: hidden;
  background: var(--wp--preset--color--bg-surface);
  padding: 56px 48px; display: flex; flex-direction: column; justify-content: center;
  border-right: 1px solid var(--wp--preset--color--border);
}
.xq-blog-featured-visual::before {
  content: ''; position: absolute; inset: 0; opacity: 0.4; pointer-events: none;
  background-image:
    linear-gradient(rgba(17,24,39,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,24,39,0.04) 1px, transparent 1px);
  background-size: 80px 80px;
}
.xq-blog-featured-visual > * { position: relative; margin: 0; }
.xq-blog-featured-visual > .xq-blog-featured-kicker {
  font-family: var(--wp--preset--font-family--mono); font-size: 9px; letter-spacing: 0.14em;
  color: var(--wp--preset--color--accent-dark); margin-bottom: 20px;
}
.xq-blog-featured-title {
  font-family: var(--wp--preset--font-family--display); font-size: clamp(28px, 3vw, 40px);
  font-weight: 800; color: var(--wp--preset--color--text-0); line-height: 1.15;
  letter-spacing: -0.025em; max-width: 380px;
}
.xq-blog-featured-content {
  padding: 40px 48px; background: var(--wp--preset--color--bg-base);
  display: flex; flex-direction: column; justify-content: space-between;
}
.xq-blog-featured-content > *, .xq-blog-featured-top > * { margin: 0; }
.xq-blog-featured-top > .xq-blog-featured-meta { gap: 10px; margin-bottom: 20px; align-items: stretch; flex-wrap: nowrap; }
.xq-blog-featured-meta .xq-blog-date { margin-left: 0; }
.xq-blog-featured-excerpt, .xq-blog-featured-excerpt p {
  font-size: var(--wp--preset--font-size--body); line-height: 1.7; color: var(--wp--preset--color--text-1); margin: 0;
}
.xq-blog-featured-top > .xq-blog-featured-excerpt { margin-bottom: 28px; }
.xq-blog-featured-footer {
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--wp--preset--color--border); padding-top: 20px;
}
.xq-blog-featured-footer > * { margin: 0; }
.xq-blog-featured-author {
  font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--caption); color: var(--wp--preset--color--text-2);
}
.xq-blog-featured-footer .xq-blog-featured-more,
.xq-blog-featured-footer .xq-blog-featured-more:hover {
  font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--small); font-weight: 600; line-height: 1.6;
  color: var(--wp--preset--color--accent-dark); background: none;
  border: 1px solid var(--wp--preset--color--border); padding: 8px 18px; border-radius: 6px;
  cursor: pointer; display: inline-block;
}
.xq-blog-featured-more .screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ══ Meta badges (shared by cards, featured panel, single post) ══ */
.xq-blog-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.xq-blog-meta > * { margin: 0; }
.xq-blog-badge-cat, .xq-blog-badge-pil { display: flex; gap: 8px; }
.xq-blog-badge-cat .wp-block-post-terms__separator, .xq-blog-badge-pil .wp-block-post-terms__separator { display: none; }
.xq-blog-badge-cat a, .xq-blog-badge-cat a:hover {
  display: block; font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--micro); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.6;
  color: var(--xq-cat, var(--wp--preset--color--accent));
  background: var(--xq-cat-bg, color-mix(in srgb, var(--xq-cat) 7.06%, transparent));
  border: var(--xq-cat-bw, 1px) solid color-mix(in srgb, var(--xq-cat, var(--wp--preset--color--accent)) 15.69%, transparent);
  padding: 3px 9px; border-radius: 6px;
}
.xq-blog-badge-pil a, .xq-blog-badge-pil a:hover {
  display: block; font-family: var(--wp--preset--font-family--display);
  font-size: 9px; font-weight: 600; letter-spacing: 0.06em; line-height: 1.6;
  color: var(--xq-pil, var(--wp--preset--color--text-2));
  background: var(--xq-pil-bg, color-mix(in srgb, var(--xq-pil) 5.88%, transparent));
  border: var(--xq-pil-bw, 1px) solid color-mix(in srgb, var(--xq-pil, var(--wp--preset--color--text-2)) 13.33%, transparent);
  padding: 3px 8px; border-radius: 6px;
}
.xq-blog-date {
  font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro); line-height: 1.6;
  color: var(--wp--preset--color--text-2); margin-left: auto;
}

/* ══ List section (Blog.tsx 388-500) ══ */
.xq-blog-list { padding-top: var(--wp--preset--spacing--section-56); padding-bottom: var(--wp--preset--spacing--section-96); }
.xq-blog-list > * { margin-block: 0; }

/* Filter bar */
.xq-blog-list > .xq-blog-filter { display: flex; align-items: center; gap: 12px; margin-bottom: 40px; flex-wrap: wrap; }
.xq-blog-search { position: relative; margin: 0 8px 0 0; }
.xq-blog-search-input {
  font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--small); line-height: 1.6;
  color: var(--wp--preset--color--text-0); background: var(--wp--preset--color--bg-base);
  border: 1px solid var(--wp--preset--color--border); border-radius: 6px;
  padding: 8px 12px 8px 32px; outline: none; width: 200px; margin: 0; display: block;
}
.xq-blog-search-input::placeholder { opacity: 1; color: color-mix(in oklab, currentcolor 50%, transparent); }
.xq-blog-search-icon {
  position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  color: var(--wp--preset--color--text-2); pointer-events: none; --xq-icon-size: 14px;
}
.xq-blog-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.xq-blog-pill, .xq-blog-pill:hover {
  display: block; font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--meta); font-weight: 600; letter-spacing: 0.08em; line-height: 1.6;
  padding: 6px 14px; border-radius: 6px; cursor: pointer; transition: all 0.15s;
  background: none; border: 1px solid var(--wp--preset--color--border);
  color: var(--wp--preset--color--text-2);
}
.xq-blog-pill--all { --xq-cat: var(--wp--preset--color--accent-dark); --xq-cat-bg: transparent; --xq-cat-bw: 0px; }
.xq-blog-pill.is-active {
  background: var(--xq-cat-bg, color-mix(in srgb, var(--xq-cat) 7.84%, transparent));
  border: var(--xq-cat-bw, 1px) solid color-mix(in srgb, var(--xq-cat) 25.1%, transparent);
  color: var(--xq-cat);
}
.xq-blog-count {
  margin-left: auto; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro);
  color: var(--wp--preset--color--text-2); letter-spacing: 0.08em;
}

/* Grid + cards (Blog.tsx 149-223) */
.xq-blog-query > * { margin-block: 0; }
.xq-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; list-style: none; margin: 0; padding: 0; }
.xq-blog-grid > li { display: flex; margin: 0; min-width: 0; }
/* Every post renders at once (client-side filtering), so skip layout and paint for
 * cards far off-screen until they scroll near; `auto` remembers each card's real size. */
.xq-blog-grid > li { content-visibility: auto; contain-intrinsic-size: auto 340px; }
.xq-blog-grid > li[hidden] { display: none; }
/* Scroll reveal (blog.js): with JS, each card fades and rises in as it enters
 * the viewport, staggered (index % 3) * 0.08s across a row. Without JS the
 * cards are simply visible. */
.xq-blog-grid--js > li > .xq-blog-card { opacity: 0; transform: translateY(16px); }
.xq-blog-grid--js > li.xq-in > .xq-blog-card { opacity: 1; transform: none; }
.xq-blog-grid--js > li.xq-in > .xq-blog-card:hover { transform: translateY(-3px); }
.xq-blog-grid--js > li.xq-noanim > .xq-blog-card { transition: none; }
.xq-blog-card {
  position: relative; flex: 1; display: flex; flex-direction: column; margin: 0;
  border: 1px solid var(--wp--preset--color--border); border-radius: 6px; overflow: hidden;
  background: var(--wp--preset--color--bg-base);
  transition: opacity 0.55s ease var(--xq-d, 0s), border-color 0.55s ease var(--xq-d, 0s), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) var(--xq-d, 0s);
}
@media (prefers-reduced-motion: reduce) {
  .xq-blog-grid--js > li > .xq-blog-card { opacity: 1; transform: none; transition: none; }
}
.xq-blog-card::before {
  content: ''; display: block; height: 3px; flex-shrink: 0;
  background: var(--xq-cat, var(--wp--preset--color--accent)); opacity: 0.4; transition: opacity 0.2s;
}
.xq-blog-card:hover { border-color: var(--wp--preset--color--border-mid); transform: translateY(-3px); }
.xq-blog-card:hover::before { opacity: 1; }
.xq-blog-card > * { margin: 0; }
.xq-blog-card-body { padding: 24px 28px; flex: 1; display: flex; flex-direction: column; }
.xq-blog-card-body > * { margin: 0; }
.xq-blog-card-body > .xq-blog-meta { margin-bottom: 14px; }
.xq-blog-card-body > .xq-blog-card-title {
  font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--body); font-weight: 600;
  color: var(--wp--preset--color--text-0); line-height: 1.4; letter-spacing: -0.01em;
  margin-bottom: 12px; flex: 1;
}
.xq-blog-card-title a, .xq-blog-card-title a:hover { color: inherit; }
/* Whole card is the link (React: onClick on the <article>). */
.xq-blog-card-title a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.xq-blog-card-title a:focus { outline: none; }
.xq-blog-card-title a:focus-visible::after { outline: 2px solid var(--wp--preset--color--accent); outline-offset: -2px; border-radius: 6px; }
.xq-blog-card-body > .xq-blog-card-excerpt { margin-bottom: 20px; }
.xq-blog-card-excerpt, .xq-blog-card-excerpt p { font-size: var(--wp--preset--font-size--small); line-height: 1.65; color: var(--wp--preset--color--text-2); margin: 0; }
.xq-blog-card-footer {
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--wp--preset--color--border); padding-top: 14px;
}
.xq-blog-card-footer > * { margin: 0; }
.xq-blog-card-author { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--meta); font-weight: 500; color: var(--wp--preset--color--text-2); }
.xq-blog-card-more {
  font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--caption); font-weight: 600;
  color: var(--wp--preset--color--text-2); transition: color 0.15s;
}
.xq-blog-card-more::after { content: ' \2192'; }
.xq-blog-card:hover .xq-blog-card-more { color: var(--xq-cat, var(--wp--preset--color--accent)); }
.xq-blog-card:hover .xq-blog-card-more::after { content: ' \2014\2014\203A'; }

/* Empty state (client-side filter, or a search with no results) */
.xq-blog-empty, .xq-blog-query .wp-block-query-no-results > .xq-blog-empty {
  padding: 64px 0; margin: 0; text-align: center;
  font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--h-4); color: var(--wp--preset--color--text-2);
}
.xq-blog-empty[hidden] { display: none; }
.xq-blog-query .wp-block-query-no-results { margin: 0; }

/* Newsletter (Blog.tsx 457-500) */
.xq-blog-list > .xq-blog-newsletter {
  margin-top: 80px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;
  border-top: 1px solid var(--wp--preset--color--border); padding-top: 64px;
}
.xq-blog-newsletter > *, .xq-blog-newsletter-copy > * { margin: 0; }
.xq-blog-newsletter-copy > .xq-blog-newsletter-title {
  font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--title-xl); font-weight: 700; line-height: 1.6;
  color: var(--wp--preset--color--text-0); letter-spacing: -0.02em; margin-bottom: 12px;
}
.xq-blog-newsletter-text { font-size: var(--wp--preset--font-size--ui); color: var(--wp--preset--color--text-1); line-height: 1.7; }

/* ══ Single post (BlogPostDetail, Blog.tsx 227-275) ══ */
.xq-blog-post { background: var(--wp--preset--color--bg-base); padding-top: 64px; padding-bottom: var(--wp--preset--spacing--section-96); }
.xq-blog-post > * { margin-block: 0; }
.xq-blog-post > .xq-blog-back-row { margin-bottom: 32px; }
.xq-blog-back-row a, .xq-blog-back-row a:hover {
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 1px solid var(--wp--preset--color--border); border-radius: 6px;
  color: var(--wp--preset--color--text-2); font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--caption); font-weight: 600; line-height: 1.6; padding: 7px 16px; cursor: pointer;
}
.xq-blog-post > .xq-blog-post-meta { margin-bottom: 20px; }
.xq-blog-post-meta .xq-blog-date { font-size: var(--wp--preset--font-size--meta); margin-left: 0; }
.xq-blog-post > .xq-blog-post-title { margin-bottom: 20px; }
.xq-blog-post > .xq-blog-post-byline {
  font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--text-2);
  margin-bottom: 40px;
}
.xq-blog-post-body { font-size: var(--wp--preset--font-size--body-lg); line-height: 1.8; color: var(--wp--preset--color--text-1); }
.xq-blog-post-body > * { margin-block: 0; }
.xq-blog-post-body > * + * { margin-top: 1.2em; }
.xq-blog-post-cta {
  margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--wp--preset--color--border);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.xq-blog-post > .xq-blog-post-cta { margin-top: 56px; }

/* Related reading (xq/related-posts): same-topic posts + the solution page. */
.xq-blog-post > .xq-related { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--wp--preset--color--border); }
.xq-related-title { margin: 0 0 16px; font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--h-4); font-weight: 600; letter-spacing: normal; color: var(--wp--preset--color--text-0); }
.xq-related-list { list-style: none; margin: 0 0 20px; padding: 0; }
.xq-related-item { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--wp--preset--color--border); }
.xq-related-item a { color: var(--wp--preset--color--text-0); font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--ui); font-weight: 500; line-height: 1.45; text-decoration: none; }
.xq-related-item a:hover, .xq-related-item a:focus-visible { color: var(--wp--preset--color--accent-dark); text-decoration: underline; }
.xq-related-item time { flex: none; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro); color: var(--wp--preset--color--text-2); }
.xq-related-solution { margin: 0; font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--small); font-weight: 600; }
.xq-related-solution a { color: var(--wp--preset--color--accent-dark); text-decoration: none; }
@media (max-width: 600px) { .xq-related-item { flex-direction: column; gap: 4px; } }
.xq-blog-post-cta-text { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--text-2); }
.xq-blog-post-cta > * { margin: 0; }
.xq-blog-post-cta-btn a, .xq-blog-post-cta-btn a:hover {
  display: inline-block; text-decoration: none;
  font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--small); font-weight: 600; line-height: 1.6;
  color: var(--wp--preset--color--text-0); background: var(--wp--preset--color--accent);
  border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer;
}

/* ══ Responsive — React keeps the desktop grids at every width; stack
 * below 900px, where the 2-/3-column layouts can't fit. ══ */
@media (max-width: 900px) {
  .xq-blog-featured { grid-template-columns: minmax(0, 1fr); }
  .xq-blog-featured-visual { border-right: 0; border-bottom: 1px solid var(--wp--preset--color--border); padding: 40px 28px; }
  .xq-blog-featured-content { padding: 32px 28px; }
  .xq-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xq-blog-list > .xq-blog-newsletter { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 600px) {
  .xq-blog-hero { padding-top: var(--wp--preset--spacing--section-56); }
  .xq-blog-grid { grid-template-columns: minmax(0, 1fr); }
  .xq-blog-search { flex: 1 1 100%; margin-right: 0; }
  .xq-blog-search-input { width: 100%; }
  .xq-blog-featured-footer { gap: 12px; }
  .xq-blog-post { padding-top: 40px; padding-bottom: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .xq-blog-card, .xq-blog-card::before, .xq-blog-card-more { transition: none; }
  .xq-blog-card:hover { transform: none; }
}

/* Per-article FAQ (import-oldblog.php, data/blog-faqs.json): the site's FAQ
 * rows, sized for the article column. */
.xq-blog-post-body > .xq-post-faq { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--wp--preset--color--border); }
.xq-post-faq > * { margin-block: 0; }
.xq-post-faq > .xq-post-faq-title { margin-bottom: 16px; font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--title-lg); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--wp--preset--color--text-0); }
.xq-post-faq .xq-faq-item summary { font-size: var(--wp--preset--font-size--body-lg); }
.xq-post-faq .xq-faq-item p { font-size: var(--wp--preset--font-size--body); line-height: 1.7; }

/* Resource pages: space between the lead (excerpt) and the body that follows. */
.xq-resource-post .xq-resource-post-lead + .xq-blog-post-body { margin-top: 32px !important; }

/* Resource download button (inc/content-resources.php). */
.xq-resource-post .xq-resource-download { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 28px !important; margin-bottom: 0 !important; } /* top/bottom only: the constrained layout centres it */
.xq-resource-download-meta { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--caption); color: var(--wp--preset--color--text-2); }
.xq-blog-post-cta .xq-blog-post-cta-alt { margin: 0 !important; }
.xq-blog-post-cta .xq-blog-post-cta-alt a { color: var(--wp--preset--color--text-1); font-size: var(--wp--preset--font-size--small); text-decoration: underline; text-underline-offset: 2px; }