/* Blog Archive Critical CSS — Task 54B.
 * The Archive/Home-family-only opening structure and the full card/grid
 * component system (featured/lead/standard cards, editorial and standard
 * grids, including their responsive breakpoints). The card component rules
 * are kept together intentionally: identical classes render both the
 * first-viewport cards and later below-fold cards, so they cannot be split
 * without either duplicating declarations or restructuring markup, both of
 * which are out of scope. Loaded blocking only on Blog Home/Category/Tag/
 * Author/Search/404 (vlz_blog_should_enqueue_card_assets()), never on
 * Single Post. See report 56 (Task 54B).
 */

/* Native Blog editorial-card system. The proof page supplies grouping only. */
.vlz-blog-card-demo__main { max-width: 1240px; margin-inline: auto; padding: clamp(1.5rem, 5vw, 5rem) clamp(1rem, 3vw, 2rem); }
.vlz-blog-archive { max-width: 1240px; margin-inline: auto; padding: clamp(2rem, 5vw, 5rem) clamp(1rem, 3vw, 2rem); }
.vlz-blog-archive__header { margin-block-end: clamp(2rem, 5vw, 4rem); border-block-end: 1px solid var(--vlz-color-border); padding-block-end: clamp(1.5rem, 3vw, 2.5rem); }
.vlz-blog-archive__header h1 { margin: 0; color: var(--vlz-color-heading); font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.2; }
.vlz-blog-archive__description, .vlz-blog-archive__count { max-width: 48rem; margin: var(--vlz-space-sm) 0 0; color: var(--vlz-color-text-muted); line-height: 1.75; }
.vlz-blog-archive__description p { margin: var(--vlz-space-sm) 0 0; }
.vlz-blog-archive__author { display: flex; align-items: center; gap: var(--vlz-space-md); max-width: 48rem; margin-block-start: var(--vlz-space-md); }
.vlz-blog-archive__author-avatar { width: 5rem; height: 5rem; border-radius: 50%; object-fit: cover; }
.vlz-blog-archive__author-bio { margin: 0; color: var(--vlz-color-text-muted); line-height: 1.75; }
.vlz-blog-archive__search { margin-block: calc(-1 * clamp(1rem, 3vw, 2rem)) clamp(2rem, 4vw, 3.5rem); }
.vlz-blog-archive__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); grid-auto-rows: 1fr; }
.vlz-blog-archive__empty { max-width: 42rem; border-block: 1px solid var(--vlz-color-border); padding-block: clamp(2rem, 5vw, 4rem); }
.vlz-blog-archive__empty h2, .vlz-blog-archive__empty p { margin: 0; color: var(--vlz-color-heading); }
.vlz-blog-archive__empty p { margin-block-start: var(--vlz-space-sm); color: var(--vlz-color-text-muted); }
.vlz-blog-archive__empty .vlz-blog-search-form { margin-block-start: var(--vlz-space-lg); }
.vlz-blog-index { max-width: 1240px; margin-inline: auto; padding: clamp(2rem, 5vw, 5rem) clamp(1rem, 3vw, 2rem); }
.vlz-blog-index__header { margin-block-end: clamp(2.5rem, 5vw, 4rem); }
.vlz-blog-index__header h1 { margin: 0 0 var(--vlz-space-lg); color: var(--vlz-color-heading); font-size: clamp(2rem, 4vw, 3.25rem); }
.vlz-blog-index__header .vlz-blog-bar { margin-block-start: var(--vlz-space-lg); }

/* Owner Correction Round 4: same Blog Navigation shared across Category, Tag,
   Author and Search (rendered before `.vlz-blog-archive__header`) and Single
   Post (rendered by `vlz_blog_render_single_post_navigation()` ahead of the
   parent theme's own entry-header). Visuals are unchanged (§19 lock) — these
   two rules only give each context correct spacing so the nav never collides
   with the following H1/entry-header and never introduces a duplicate border. */
.vlz-blog-archive__nav { margin-block-end: clamp(1.5rem, 3vw, 2.5rem); }
.vlz-blog-archive__nav .vlz-blog-category-nav { margin-block-start: 0; }
.vlz-blog-editorial > .vlz-blog-card--featured { margin-block-end: clamp(2.25rem, 5vw, 4rem); }
.vlz-blog-editorial__leads, .vlz-blog-editorial__standards { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); }
/* Secondary Articles Desktop expansion (2 → 3 columns); see BLOG-ARCHIVE-RELATED-BLOCK-IMPLEMENTATION-2026-09-11.md. */
.vlz-blog-editorial__leads { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-block-end: clamp(2.5rem, 5vw, 4.5rem); }
/* Regular Grid Desktop expansion (3 → 4 columns); same report. */
.vlz-blog-editorial__standards { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; }
.vlz-blog-card-demo__opening > .vlz-blog-card--featured { margin-block-end: clamp(2.25rem, 5vw, 4rem); }
.vlz-blog-card-demo__opening > .vlz-blog-card-demo__lead-grid { margin-block-end: clamp(2.5rem, 5vw, 4.5rem); }
.vlz-blog-card-demo__lead-grid, .vlz-blog-card-demo__standard-grid { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: stretch; }
.vlz-blog-card-demo__lead-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Shared selector with the live Regular Grid (3 → 4 columns); see BLOG-ARCHIVE-RELATED-BLOCK-IMPLEMENTATION-2026-09-11.md. */
.vlz-blog-card-demo__standard-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; }
.vlz-blog-card { min-width: 0; color: var(--vlz-color-text); }
.vlz-blog-card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--vlz-color-surface-alt); }
.vlz-blog-card__image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.vlz-blog-card__fallback { display: grid; width: 100%; height: 100%; place-items: center; background: var(--vlz-color-surface-alt); color: var(--vlz-color-primary); font-family: var(--vlz-font-sans); font-size: var(--vlz-text-sm); font-weight: 700; letter-spacing: .18em; }
.vlz-blog-card__body { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: var(--vlz-space-xs); }
.vlz-blog-card__category { margin: 0; color: var(--vlz-color-primary); font-size: var(--vlz-text-sm); font-weight: 700; line-height: 1.3; }
.vlz-blog-card__category a { color: inherit; text-decoration: none; }
.vlz-blog-card__category a:hover, .vlz-blog-card__category a:focus-visible { text-decoration: underline; }
.vlz-blog-card__title { margin: 0; color: var(--vlz-color-heading); line-height: 1.34; }
.vlz-blog-card__title a { color: inherit; text-decoration: none; }
.vlz-blog-card__title a:hover { color: var(--vlz-color-link-hover); }
.vlz-blog-card__title a:focus-visible { outline: 3px solid var(--vlz-color-focus); outline-offset: 4px; border-radius: .2rem; }
.vlz-blog-card__excerpt { margin: 0; color: var(--vlz-color-text-muted); line-height: 1.7; }
.vlz-blog-card__meta { display: flex; flex-wrap: wrap; gap: .35rem .7rem; margin-block-start: auto; padding-block-start: var(--vlz-space-sm); color: var(--vlz-color-text-muted); font-size: var(--vlz-text-sm); line-height: 1.45; }
.vlz-blog-card__meta > * + *::before { content: "·"; display: inline-block; margin-inline-end: .7rem; color: var(--vlz-color-border-strong); }
/*
 * Level 1: content-led feature; its media supports rather than dominates.
 * Owner correction round 2: the fixed clamp(20rem,35vw,28rem) min-height
 * forced the row taller than either column needed, leaving the (center-
 * aligned) image floating inside a large empty band above/below it. Row
 * height now follows content — the taller of the text block or the image's
 * own 16:9 height — so the media fills its allocated area with no forced
 * whitespace. Column split stays ~64%/36% (text/image), within the
 * 58-65%/35-42% target.
 */
.vlz-blog-card--featured { display: grid; grid-template-columns: minmax(0, 1.48fr) minmax(13rem, .82fr); overflow: hidden; border-block-start: 4px solid var(--vlz-color-primary); background: var(--vlz-color-surface-alt); }
.vlz-blog-card--featured .vlz-blog-card__body { order: -1; justify-content: center; gap: .65rem; padding: clamp(1.25rem, 2.75vw, 2.5rem); }
.vlz-blog-card--featured .vlz-blog-card__media { align-self: center; block-size: auto; min-block-size: 0; }
.vlz-blog-card--featured .vlz-blog-card__title { font-size: clamp(1.6rem, 2.9vw, 2.75rem); line-height: 1.18; }
.vlz-blog-card--featured .vlz-blog-card__excerpt { max-width: 46rem; font-size: var(--vlz-text-lead); }
.vlz-blog-card--featured .vlz-blog-card__meta { margin-block-start: var(--vlz-space-xs); }
/*
 * Level 2: three deliberate reading choices, typographically above Standard.
 *
 * Owner Visual Correction — Secondary + Category Structure (2026-09-11):
 * the previous horizontal image+text composite (tuned for 2-up) was re-run
 * at 3-up and read badly — the text column narrowed to the point titles
 * wrapped onto many lines and the image shrank to a thumbnail next to a
 * long text column, losing the "featured secondary article" hierarchy. This
 * replaces the composite with a vertical, image-top layout (same structure
 * as `.vlz-blog-card--standard` below: media full card-width, then a
 * flex-column body), so the image keeps its full-width 16:9 weight and the
 * title/excerpt read at natural width instead of a squeezed side column.
 * Kept visually distinct from `.vlz-blog-card--standard` via a slightly
 * larger title (h3 vs h4) and roomier excerpt (base vs sm) — the "Secondary"
 * tier stays typographically above "Standard", just no longer horizontal.
 * See BLOG-ARCHIVE-SECONDARY-CATEGORY-STRUCTURE-CORRECTION-2026-09-11.md.
 */
.vlz-blog-card--lead { display: flex; height: 100%; flex-direction: column; border-block-start: 1px solid var(--vlz-color-border-strong); padding-block-start: var(--vlz-space-md); }
.vlz-blog-card--lead .vlz-blog-card__media { margin-block-end: var(--vlz-space-md); }
.vlz-blog-card--lead .vlz-blog-card__title { font-size: var(--vlz-text-h3); }
.vlz-blog-card--lead .vlz-blog-card__excerpt { font-size: var(--vlz-text-base); }
/* Level 3: light editorial items; equal grid rows and bottom-aligned metadata. */
.vlz-blog-card--standard { display: flex; height: 100%; flex-direction: column; border-block-start: 1px solid var(--vlz-color-border); padding-block-start: var(--vlz-space-sm); }
.vlz-blog-card--standard .vlz-blog-card__media { margin-block-end: var(--vlz-space-md); }
.vlz-blog-card--standard .vlz-blog-card__body { min-block-size: 15rem; }
.vlz-blog-card--standard .vlz-blog-card__title { min-block-size: 4.02em; font-size: var(--vlz-text-h4); }
.vlz-blog-card--standard .vlz-blog-card__excerpt { font-size: var(--vlz-text-sm); }
/* Tablet keeps 2 columns for Leads/Standards/Grid unchanged (Desktop-only 3/4-column expansion above); see BLOG-ARCHIVE-RELATED-BLOCK-IMPLEMENTATION-2026-09-11.md. */
@media (max-width: 900px) { .vlz-blog-card-demo__standard-grid, .vlz-blog-archive__grid, .vlz-blog-editorial__standards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vlz-blog-editorial__leads { grid-template-columns: repeat(3, minmax(0, 1fr)); } .vlz-blog-card--featured { grid-template-columns: minmax(0, 1.3fr) minmax(11rem, .7fr); } }
@media (max-width: 600px) { .vlz-blog-card-demo__lead-grid, .vlz-blog-card-demo__standard-grid, .vlz-blog-archive__grid, .vlz-blog-editorial__leads, .vlz-blog-editorial__standards { grid-template-columns: minmax(0, 1fr); } .vlz-blog-card--featured { display: flex; flex-direction: column; min-height: 0; } .vlz-blog-card--featured .vlz-blog-card__media { order: -1; block-size: auto; align-self: stretch; } .vlz-blog-card--featured .vlz-blog-card__body { order: 0; padding: var(--vlz-space-lg); } .vlz-blog-card--featured .vlz-blog-card__title { font-size: var(--vlz-text-h2); } .vlz-blog-card--standard .vlz-blog-card__body { min-block-size: 0; } }

/* Newsletter submission feedback; hidden until the live region has a message. */
.vlz-blog-newsletter__status { margin: .75rem 0 0; color: var(--vlz-color-text-invert); font-size: .95rem; line-height: 1.6; }
.vlz-blog-newsletter__status[hidden] { display: none; }
.vlz-blog-newsletter__status.is-error { color: var(--vlz-color-text-invert); }