/**
 * ZB Lite — Listing partial (hero, archive/author/search header, grid, cards).
 * Loaded on: homepage, archive, author, search.
 * @package ZeroBloat
 */

/* ============================================================
   HERO — heroes/hero-lite (dedicated, not shared)
   Application Matrix identity: site-level headline + command-style search.
   ============================================================ */
.zb-core .zb-hero-lite { padding-block: 80px 0; text-align: center; }
.zb-core .zb-hero-lite__eyebrow {
  font-family: var(--zbl-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--zbl-spine); margin: 0 0 18px; font-weight: 600;
}
.zb-core .zb-hero-lite__title {
  margin: 0 0 32px; font-size: clamp(2.1rem, 4.8vw, 3.2rem); font-weight: 800;
  line-height: 1.08; letter-spacing: -0.025em; color: var(--zbl-ink); max-width: 20ch; margin-inline: auto;
}
.zb-core .zb-hero-lite__search { position: relative; display: flex; max-width: 480px; margin: 0 auto; }
.zb-core .zb-hero-lite__search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--zbl-faint); pointer-events: none; }
.zb-core .zb-hero-lite__search .search-field { flex: 1; padding-left: 42px; border-radius: 8px 0 0 8px; border-right: 0; }
.zb-core .zb-hero-lite__search .search-submit { border-radius: 0 8px 8px 0; }

/* ============================================================
   DATA MATRIX STRIP — special/matrix-strip-lite (dedicated)
   Real, live WP metrics — no simulated data.
   ============================================================ */
.zb-core .zb-matrix-strip { margin-top: 44px; border-top: 1px solid var(--zbl-line); border-bottom: 1px solid var(--zbl-line); background: var(--zbl-surface-alt); }
.zb-core .zb-matrix-strip__list {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px;
  margin: 0; padding: 13px 0; list-style: none;
  font-family: var(--zbl-mono); font-size: 12px; color: var(--zbl-muted);
}
.zb-core .zb-matrix-strip__item { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.zb-core .zb-matrix-strip__icon { color: var(--zbl-spine); font-size: 10px; }

/* ============================================================
   CATEGORY INDEX — special/category-index-lite (dedicated)
   Real taxonomy as a browsable structural map, not decoration.
   ============================================================ */
.zb-core .zb-category-index { margin-top: 44px; }
.zb-core .zb-category-index__eyebrow {
  margin: 0 0 14px; font-family: var(--zbl-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--zbl-faint); font-weight: 600;
}
.zb-core .zb-category-index__list {
  display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none;
}
.zb-core .zb-category-index__link {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--zbl-line); border-left: var(--zbl-spine-w) solid var(--zbl-spine);
  border-radius: 4px; padding: 10px 16px; text-decoration: none; background: var(--zbl-surface);
  transition: border-color .15s, background-color .15s;
}
.zb-core .zb-category-index__link:hover { background: var(--zbl-surface-alt); }
.zb-core .zb-category-index__name { font-size: .9rem; font-weight: 600; color: var(--zbl-ink); }
.zb-core .zb-category-index__count {
  font-family: var(--zbl-mono); font-size: 11px; color: var(--zbl-faint);
}

/* ============================================================
   CTA BANNER — cta/cta-banner-lite (dedicated)
   ============================================================ */
.zb-core .zb-cta-banner__box {
  border: 1px solid var(--zbl-line); border-left: var(--zbl-spine-w) solid var(--zbl-spine);
  border-radius: 4px; background: var(--zbl-surface-alt); padding: 44px 32px; text-align: center;
}
.zb-core .zb-cta-banner__label {
  margin: 0 0 10px; font-family: var(--zbl-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--zbl-faint);
}
.zb-core .zb-cta-banner__heading { margin: 0 0 22px; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.015em; color: var(--zbl-ink); }
.zb-core .zb-cta-banner__button {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px;
  color: var(--zbl-accent-ink); background: var(--zbl-spine); border-radius: 6px; padding: 12px 26px; text-decoration: none;
}
.zb-core .zb-cta-banner__button:hover { background: var(--zbl-spine-dark); }

/* ============================================================
   CARDS — cards/card-lite + cards/card-list-lite (dedicated)
   Icon-tile feature cards (Application Matrix identity) — flat, hairline,
   spine as the left rule (same motif as widget-author/TOC/comments), no
   shadow at rest, no photos.
   ============================================================ */
.zb-core .zb-card-lite {
  display: flex; flex-direction: column; height: 100%;
  background: var(--zbl-surface); border: 1px solid var(--zbl-line);
  border-left: var(--zbl-spine-w) solid var(--zbl-line); border-radius: 4px;
  overflow: hidden; transition: border-color .15s;
}
.zb-core .zb-card-lite:hover { border-color: var(--zbl-spine); border-left-color: var(--zbl-spine); }
.zb-core .zb-card-lite__icon {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; margin: 20px 20px 0;
  border: 1px solid var(--zbl-line); border-radius: 4px;
  color: var(--zbl-spine); background: var(--zbl-surface-alt);
}
.zb-core .zb-card-lite__body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 16px 20px 20px; }

.zb-core .zb-card-lite__badge,
.zb-core .zb-card-list-lite__badge {
  align-self: flex-start; font-family: var(--zbl-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--zbl-spine); text-decoration: none;
}
.zb-core .zb-card-lite__title,
.zb-core .zb-card-list-lite__title { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.35; color: var(--zbl-ink); }
.zb-core .zb-card-lite__title a,
.zb-core .zb-card-list-lite__title a { color: inherit; text-decoration: none; }
.zb-core .zb-card-lite__title a:hover, .zb-core .zb-card-lite__badge:hover,
.zb-core .zb-card-list-lite__title a:hover, .zb-core .zb-card-list-lite__badge:hover { color: var(--zbl-spine); }
.zb-core .zb-card-lite__excerpt,
.zb-core .zb-card-list-lite__excerpt { margin: 0; color: var(--zbl-muted); font-size: .9rem; line-height: 1.55; }
.zb-core .zb-card-lite__excerpt { font-size: .85rem; }
.zb-core .zb-card-lite__meta,
.zb-core .zb-card-list-lite__meta { margin-top: auto; padding-top: 4px; font-family: var(--zbl-mono); font-size: 11px; color: var(--zbl-faint); }

.zb-core .zb-card-list-lite {
  display: flex; background: var(--zbl-surface); border: 1px solid var(--zbl-line);
  border-left: var(--zbl-spine-w) solid var(--zbl-line); border-radius: 4px;
  overflow: hidden; transition: border-color .15s;
}
.zb-core .zb-card-list-lite:hover { border-color: var(--zbl-spine); border-left-color: var(--zbl-spine); }
.zb-core .zb-card-list-lite__image { flex: none; width: 220px; }
.zb-core .zb-card-list-lite__body { flex: 1; min-width: 0; padding: 20px; display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 640px) {
  .zb-core .zb-card-list-lite { flex-direction: column; }
  .zb-core .zb-card-list-lite__image { width: 100%; }
}

/* ============================================================
   HOME GRID — grids/grid-lite (dedicated, not shared)
   ============================================================ */
.zb-core .zb-grid-lite__grid { display: grid; gap: 24px; margin-top: 24px; }
.zb-core .zb-grid-lite__grid--2-col { grid-template-columns: repeat(2, 1fr); }
.zb-core .zb-grid-lite__grid--3-col { grid-template-columns: repeat(3, 1fr); }
.zb-core .zb-grid-lite__grid--4-col { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) {
  .zb-core .zb-grid-lite__grid--3-col, .zb-core .zb-grid-lite__grid--4-col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .zb-core .zb-grid-lite__grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   ARCHIVE HEADER + GRID — archive-layouts/archive-grid-lite
   (dedicated, not shared)
   ============================================================ */
.zb-core .zb-archive-header { margin-bottom: 32px; }
.zb-core .zb-archive-header__title { font-size: clamp(1.6rem, 3.4vw, 2.1rem); margin: 0 0 10px; }
.zb-core .zb-archive-header__desc { color: var(--zbl-muted); max-width: 60ch; line-height: 1.6; margin: 0 0 6px; }
.zb-core .zb-archive-header__count { font-family: var(--zbl-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--zbl-faint); }
.zb-core .zb-archive-header__eyebrow {
  display: block; margin-bottom: 8px; font-family: var(--zbl-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--zbl-spine);
}
.zb-core .zb-archive-empty { padding: 8px 0 4px; }
.zb-core .zb-archive-empty__prompt {
  margin: 24px 0 12px; font-family: var(--zbl-mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--zbl-faint);
}
.zb-core .zb-archive-empty__cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.zb-core .zb-archive-empty__cats a {
  display: inline-block; border: 1px solid var(--zbl-line); border-left: var(--zbl-spine-w) solid var(--zbl-spine);
  border-radius: 4px; padding: 8px 14px; font-size: .85rem; font-weight: 600; color: var(--zbl-ink); text-decoration: none;
}
.zb-core .zb-archive-empty__cats a:hover { background: var(--zbl-surface-alt); }
/* Empty search/archive: the section band's default 64px block padding is
   tuned for a full card grid, not two lines of text — collapse it so the
   footer doesn't get stranded far below a near-empty page. */
.zb-section-wrapper:has(> .zb-container > .zb-slot > .zb-archive-grid-lite--empty),
.zb-section-wrapper:has(> .zb-slot > .zb-archive-grid-lite--empty) {
  padding-block: 32px;
}
.zb-core .zb-archive-header--person { display: flex; gap: 20px; align-items: center; }
.zb-core .zb-archive-header__avatar { flex: none; width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 1px solid var(--zbl-line); }
.zb-core .zb-archive-header__person-body { min-width: 0; }
@media (max-width: 480px) { .zb-core .zb-archive-header--person { flex-direction: column; align-items: flex-start; } }

.zb-core .zb-archive-grid-lite__search { display: flex; gap: 8px; max-width: 480px; margin-bottom: 28px; }
.zb-core .zb-archive-grid-lite__grid { display: grid; gap: 24px; margin-bottom: 40px; }
.zb-core .zb-archive-grid-lite__grid--1-col { grid-template-columns: 1fr; }
.zb-core .zb-archive-grid-lite__grid--2-col { grid-template-columns: repeat(2, 1fr); }
.zb-core .zb-archive-grid-lite__grid--3-col { grid-template-columns: repeat(3, 1fr); }
.zb-core .zb-archive-grid-lite__grid--4-col { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) {
  .zb-core .zb-archive-grid-lite__grid--3-col, .zb-core .zb-archive-grid-lite__grid--4-col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .zb-core .zb-archive-grid-lite__grid { grid-template-columns: 1fr !important; }
}
.zb-core .zb-archive-grid-lite__pagination { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 28px; border-top: 1px solid var(--zbl-line); }