/* Blog Archive Non-Critical CSS — Task 54B.
 * CTA band, Newsletter (base component — also consumed by Single Post's
 * own end-of-article newsletter block via vlz_blog_render_newsletter()),
 * Pagination, and other proven below-fold/zero-first-viewport sections
 * extracted from blog-archive.css. Delivered non-blocking via the same
 * media='print' -> onload='this.media="all"' + <noscript> pattern Task 54A
 * established for single-post-noncritical.css. Enqueued non-blocking on
 * Blog Archive-family surfaces and, for the shared Newsletter rules only,
 * on Single Post (dependency ordered before single-post-noncritical.css so
 * cascade/document order — which governs CSS application order regardless
 * of async load timing — is preserved). See report 56 (Task 54B).
 */

.vlz-blog-pagination { margin-block-start: clamp(2.5rem, 5vw, 4rem); }
.vlz-blog-pagination .page-numbers { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.vlz-blog-pagination a, .vlz-blog-pagination span { display: inline-flex; min-width: 2.5rem; min-height: 2.5rem; align-items: center; justify-content: center; border: 1px solid var(--vlz-color-border); padding-inline: .65rem; color: var(--vlz-color-heading); text-decoration: none; }
.vlz-blog-pagination a:hover { color: var(--vlz-color-link-hover); border-color: var(--vlz-color-primary); }
.vlz-blog-pagination a:focus-visible { outline: 3px solid var(--vlz-color-focus); outline-offset: 3px; }
.vlz-blog-pagination .current { border-color: var(--vlz-color-primary); color: #fff; background: var(--vlz-color-primary); }
.vlz-blog-topic { margin-block-start: clamp(4rem, 8vw, 7rem); }
.vlz-blog-topic > h2 { margin: 0 0 clamp(1.25rem, 3vw, 2rem); color: var(--vlz-color-heading); font-size: var(--vlz-text-h2); }
/*
 * CTA Band — Blog-scoped composition (Owner-rejected the shared
 * `.vlz-ctaunit--soft-panel` plugin component here: a 528px-tall panel with
 * a large fixed decorative background image tuned for a different page
 * family). Compact horizontal band: content ~70%, optional visual ~30%,
 * using existing brand tokens only (--vlz-color-primary-soft / -primary).
 */
.vlz-blog-cta { display: flex; align-items: center; gap: clamp(1.5rem, 4vw, 3rem); margin-block: clamp(3rem, 6vw, 5rem); padding: clamp(1.75rem, 3vw, 2.75rem); background: var(--vlz-color-primary-soft); border-radius: var(--vlz-radius-lg, .75rem); }
.vlz-blog-cta__content { flex: 1 1 65%; min-width: 0; }
.vlz-blog-cta--with-visual .vlz-blog-cta__content { flex-basis: 68%; }
.vlz-blog-cta__title { margin: 0; color: var(--vlz-color-heading); font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1.25; }
.vlz-blog-cta__body { margin-block-start: .5rem; color: var(--vlz-color-text); max-width: 42rem; }
.vlz-blog-cta__body p { margin: 0; }
.vlz-blog-cta__action { margin: 1.1rem 0 0; }
/*
 * Owner Correction Round 3 §4/§5 — CTA button text disappeared on
 * hover/focus. Root cause: the button's own `:hover`/`:focus-visible` rule
 * never set `color`, so the `color` property fell through to the global
 * `a:hover, a:focus-visible { color: var(--vlz-color-link-hover) }` rule in
 * base.css — which out-specifies the base `.vlz-blog-cta__button { color }`
 * rule on an <a> element. `--vlz-color-link-hover` resolves to the exact
 * same token as this button's own hover/focus `background`
 * (`--vlz-color-primary-strong`), so the text and its background became
 * identical: readable-looking markup, invisible in the browser. Every state
 * below now sets `color` explicitly on the component's own selector so it
 * can never again inherit an unrelated global link color.
 */
.vlz-blog-cta__button { display: inline-flex; align-items: center; justify-content: center; border: 0; padding: .8rem 1.6rem; color: #fff; background: var(--vlz-color-primary); font: inherit; font-weight: 700; border-radius: var(--vlz-radius-pill, 999px); text-decoration: none; }
.vlz-blog-cta__button:visited { color: #fff; }
.vlz-blog-cta__button:hover, .vlz-blog-cta__button:focus-visible { color: #fff; background: var(--vlz-color-primary-strong); outline: 3px solid var(--vlz-color-focus); outline-offset: 3px; }
.vlz-blog-cta__button:active { color: #fff; background: var(--vlz-color-primary-strong); outline: 3px solid var(--vlz-color-focus); outline-offset: 3px; }
.vlz-blog-cta__visual { flex: 0 1 30%; align-self: stretch; display: flex; align-items: center; }
.vlz-blog-cta__visual img { display: block; width: 100%; height: 100%; max-height: 220px; object-fit: cover; border-radius: var(--vlz-radius-md, .5rem); }
@media (max-width: 782px) { .vlz-blog-cta { flex-direction: column; align-items: stretch; } .vlz-blog-cta__visual { order: -1; flex-basis: auto; max-height: 180px; } .vlz-blog-cta__visual img { max-height: 180px; } }
/*
 * Newsletter — redesigned to a strong branded dark surface (Owner rejected
 * the previous generic gray/white form-card look). Uses the existing
 * invert tokens (--vlz-color-surface-invert / --vlz-color-text-invert),
 * the same pairing GeneratePress-bridge components already use for a dark
 * brand surface elsewhere in this theme, so no new palette is introduced.
 */
.vlz-blog-newsletter { display: flex; align-items: center; gap: clamp(1.5rem, 4vw, 3rem); margin-block-start: clamp(3.5rem, 7vw, 6rem); padding: clamp(2rem, 4vw, 3.25rem); background: var(--vlz-color-surface-invert); border-radius: var(--vlz-radius-lg, .75rem); }
.vlz-blog-newsletter__content { flex: 1 1 66%; min-width: 0; }
.vlz-blog-newsletter--with-visual .vlz-blog-newsletter__content { flex-basis: 62%; }
.vlz-blog-newsletter__title { margin: 0; color: var(--vlz-color-text-invert); font-size: clamp(1.6rem, 2.75vw, 2.25rem); line-height: 1.2; }
.vlz-blog-newsletter__body { margin-block-start: .5rem; color: var(--vlz-color-text-invert-muted); max-width: 40rem; }
.vlz-blog-newsletter__body p { margin: 0; }
.vlz-blog-newsletter__form { display: flex; gap: var(--vlz-space-sm); margin-block: 1.25rem; max-width: 32rem; }
.vlz-blog-newsletter__form input { flex: 1; min-width: 0; border: 0; padding: .85rem 1.1rem; border-radius: var(--vlz-radius-md, .5rem); font: inherit; }
.vlz-blog-newsletter__form input:focus-visible { outline: 3px solid var(--vlz-color-focus-invert); outline-offset: 2px; }
/*
 * Owner Correction Round 3 §7/§8 — wider, slightly shorter, without a
 * redesign: horizontal padding increased (~1.5rem → 1.8rem, ~+20%) and a
 * `min-width` added so the button reads as a real, comfortable action next
 * to the email field even on short labels; vertical padding reduced
 * (~.85rem → .7rem, ~-18%) with `line-height: 1` so the button sits
 * slightly shorter and better balanced against the input's own height.
 */
.vlz-blog-newsletter__button { border: 0; min-width: 9rem; padding: .7rem 1.8rem; line-height: 1; color: var(--vlz-color-ink); background: #fff; font: inherit; font-weight: 700; border-radius: var(--vlz-radius-pill, 999px); cursor: pointer; }
.vlz-blog-newsletter__button:disabled { cursor: not-allowed; opacity: .6; }
.vlz-blog-newsletter__button:not(:disabled):hover, .vlz-blog-newsletter__button:focus-visible, .vlz-blog-newsletter__button:not(:disabled):active { color: var(--vlz-color-ink); outline: 3px solid var(--vlz-color-focus-invert); outline-offset: 3px; }
.vlz-blog-newsletter__consent, .vlz-blog-newsletter__consent p { margin: 0; color: var(--vlz-color-text-invert-muted); font-size: .875em; line-height: 1.6; }
.vlz-blog-newsletter__visual { flex: 0 1 30%; align-self: stretch; display: flex; align-items: center; }
.vlz-blog-newsletter__visual img { display: block; width: 100%; height: 100%; max-height: 240px; object-fit: cover; border-radius: var(--vlz-radius-md, .5rem); }
@media (max-width: 782px) { .vlz-blog-newsletter { flex-direction: column; align-items: stretch; } .vlz-blog-newsletter__visual { order: -1; max-height: 180px; } .vlz-blog-newsletter__visual img { max-height: 180px; } }
.vlz-blog-archive__remaining { margin-block-start: clamp(3rem, 6vw, 5rem); }
.vlz-blog-card-demo__topic { margin-block-start: clamp(4rem, 8vw, 7rem); }
.vlz-blog-card-demo__topic-title { margin: 0 0 clamp(1.25rem, 3vw, 2rem); color: var(--vlz-color-heading); font-size: var(--vlz-text-h2); }
@media (max-width: 600px) { .vlz-blog-card-demo__topic-title, .vlz-blog-topic > h2 { font-size: var(--vlz-text-h3); } .vlz-blog-newsletter__form { align-items: stretch; flex-direction: column; } }