/* blog.css — Pass 45. Styling for the Posts Page (index.php), category/
   tag archives (archive.php), and single posts (single.php).

   STRUCTURE was ported from a reference theme (Independent Spirit); this
   CSS was not — it is written fresh against OSTA's own tokens
   (tokens.css) and reuses .container/.card/.card-grid/.btn/.page-header
   wherever they already do the job, per this pass's own instruction.
   Nothing here introduces a second design system: no new colors outside
   tokens.css, no new type scale, --color-accent (green) never used as
   text or a link color anywhere below.

   Loaded only on the pages that need it — see inc/enqueue.php's
   osta_is_blog_page(). */

/* ==========================================================================
   1. HERO — reuses .page-header as-is (page.php's own component); this
   only adds the small eyebrow label the reference used to name the
   archive type (Category/Tag/Archive), which .page-header didn't have a
   slot for yet.
   ========================================================================== */

.blog-hero__eyebrow {
  display: inline-block;
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  margin-bottom: var(--space-1);
}

/* Found during Pass 45's own overflow self-check: .page-header__title/
   __description (global.css, reused as-is here) have no word-break
   protection, and a title or taxonomy description with one long
   unbroken run of characters (a long URL, a hyphen-free compound word)
   forces the whole row past the viewport at narrow widths — confirmed
   with a test post/category description containing exactly that.
   .page-header__text itself carries no rules of its own anywhere in the
   theme, so this is safe to scope here without touching the ~15 other
   templates that reuse .page-header — blog.css only loads on the three
   blog templates (see inc/enqueue.php's osta_is_blog_page()). */
.page-header__text {
  min-width: 0;
}

.page-header__title,
.page-header__description {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ==========================================================================
   2. CARD GRID — reuses .card-grid (Pass 21) and .card as-is. Only the
   blog-specific pieces (thumbnail, meta line, "read more") are new.
   ========================================================================== */

.blog-card {
  display: flex;
  flex-direction: column;
  /* Grid items default to min-width: auto, same as flex items — without
     this a long unbroken excerpt/title (see .page-header__text above)
     forces the whole grid track wider than the viewport instead of
     wrapping inside the card. */
  min-width: 0;
}

.blog-card__thumb {
  display: block;
  /* Bleed the image to the card's own edges — .card has padding on
     every side by default (global.css), so this cancels it on the top
     three sides only, leaving the bottom gap before the body text. */
  margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) var(--space-3);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--color-surface-alt);
}

.blog-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-card__meta,
.related-posts__meta {
  font-size: var(--text-small);
  color: var(--color-muted);
  margin-bottom: var(--space-1);
}

.blog-card .card__heading {
  font-size: var(--text-h4);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.blog-card__excerpt {
  color: var(--color-body);
  flex-grow: 1;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.blog-card__more {
  margin-top: var(--space-2);
}

/* ==========================================================================
   3. PAGINATION — the exact same component inner-pages.css already
   scopes to .minimal-page .pagination for archive.php/search.php;
   re-scoped here to the blog page's own wrapper so it applies without
   also pulling in .minimal-page's narrow measure-width layout, which
   would fight the full-width card grid.
   ========================================================================== */

.blog-pagination-wrap .pagination {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.blog-pagination-wrap .pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-brand);
  text-decoration: none;
}

.blog-pagination-wrap .pagination .page-numbers.current {
  background: var(--color-brand);
  color: var(--color-surface);
  border-color: var(--color-brand);
}

.blog-pagination-wrap .pagination .page-numbers.dots {
  border: none;
  min-width: auto;
}

/* ==========================================================================
   4. SINGLE POST — breadcrumbs, header, featured image, share row,
   content measure, tags, author bio, related posts.
   ========================================================================== */

.blog-breadcrumbs {
  font-size: var(--text-small);
  color: var(--color-muted);
  margin-bottom: var(--space-3);
}

.blog-breadcrumbs a {
  /* PASS "Fix the accessibility failures found by the component
     inventory", item 3 — had no sizing at all. */
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--color-muted);
}

.blog-breadcrumbs__sep {
  margin: 0 var(--space-1);
}

.blog-breadcrumbs__current {
  color: var(--color-body);
}

.post-header {
  max-width: var(--measure-max);
  margin-bottom: var(--space-4);
}

.post-header__eyebrow {
  display: inline-block;
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-brand);
  text-decoration: none;
  margin-bottom: var(--space-2);
}

.post-header__eyebrow:hover {
  color: var(--color-brand-hover);
}

.post-header__title {
  margin: 0 0 var(--space-2);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-muted);
  font-size: var(--text-small);
}

.post-meta__sep {
  color: var(--color-border);
}

.post-featured {
  margin: 0 0 var(--space-4);
}

.post-featured img {
  width: 100%;
  border-radius: var(--radius-md);
}

.post-featured figcaption {
  font-size: var(--text-small);
  color: var(--color-muted);
  margin-top: var(--space-1);
}

.post-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.post-share__label {
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  color: var(--color-muted);
}

.post-share__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--tap-min);
  /* PASS "Fix the accessibility failures found by the component
     inventory", item 3 — min-height alone let an icon-only button (no
     label text) shrink to ~28px wide. global.css's .footer-social__link
     already fixed this exact problem the same way. */
  min-width: var(--tap-min);
  padding: 0 var(--space-2);
  /* Item 4 — border was --color-border (1.53:1 on white). */
  border: 1px solid var(--color-muted);
  border-radius: var(--radius-sm);
  color: var(--color-brand);
  text-decoration: none;
  font-size: var(--text-small);
}

.post-share__btn:hover {
  background: var(--color-brand-wash);
}

.entry-content {
  max-width: var(--measure-max);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.entry-content > *:first-child {
  margin-top: 0;
}

.post-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  max-width: var(--measure-max);
  margin-top: var(--space-4);
}

.post-tags__label {
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  color: var(--color-muted);
}

.post-tags__tag {
  display: inline-flex;
  align-items: center;
  /* PASS "Fix the accessibility failures found by the component
     inventory", item 3 — was 36px, under --tap-min. */
  min-height: var(--tap-min);
  padding: 0 var(--space-2);
  border-radius: 999px;
  background: var(--color-brand-wash);
  color: var(--color-brand);
  text-decoration: none;
  font-size: var(--text-small);
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.post-tags__tag:hover {
  background: var(--color-surface-alt);
}

/* Author bio — name and text only. No avatar image anywhere in this
   file; see this pass's own report for why. */
.post-author {
  max-width: var(--measure-max);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-soft);
}

.post-author__name {
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
  margin-bottom: var(--space-1);
}

.post-author__bio {
  color: var(--color-body);
  margin-bottom: 0;
}

.related-posts-heading {
  margin-bottom: var(--space-4);
}

/* ==========================================================================
   5. READING PROGRESS BAR — decorative only, aria-hidden, inert without
   JavaScript (no width is ever set except by assets/js/reading-
   progress.js, so a no-JS visitor sees a plain empty 3px strip, never a
   full or broken-looking bar).
   ========================================================================== */

.post-progress {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 3px;
  background: var(--color-border-soft);
}

.post-progress__bar {
  height: 100%;
  width: 0;
  background: var(--color-brand);
}

@media (prefers-reduced-motion: no-preference) {
  .post-progress__bar {
    transition: width 100ms linear;
  }
}

.osta-review-magazine .osta-review-print {
  position: relative;
  overflow: hidden;
  margin-bottom: var(--space-6);
  padding: var(--space-4);
  color: var(--color-surface);
  background: linear-gradient(135deg, var(--color-brand-hover) 0%, var(--color-brand) 70%);
  border: 1px solid var(--color-brand);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md, 0 8px 24px rgba(26, 34, 85, 0.18));
}

.osta-review-magazine .osta-review-print__watermark {
  position: absolute;
  right: -0.25em;
  bottom: -0.2em;
  z-index: 0;
  margin: 0;
  font-size: clamp(5rem, 18vw, 11rem);
  font-weight: var(--weight-extrabold, 800);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--color-surface);
  opacity: 0.08;
  pointer-events: none;
  user-select: none;
}

.osta-review-magazine .osta-review-print__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.osta-review-magazine .osta-review-print__copy {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  flex: 1 1 28rem;
  min-width: 0;
}

.osta-review-magazine .osta-review-print__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  color: var(--color-accent);
  background: rgba(255, 255, 255, 0.12);
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-md);
}

.osta-review-magazine .osta-review-print__text {
  min-width: 0;
}

.osta-review-magazine .osta-review-print__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0 0 var(--space-2);
  padding: 4px 14px;
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-surface);
  background: rgba(138, 195, 78, 0.18);
  border: 1px solid rgba(138, 195, 78, 0.45);
  border-radius: 999px;
}

.osta-review-magazine .osta-review-print__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
}

.osta-review-magazine .osta-review-print__title {
  margin: 0 0 var(--space-2);
  color: var(--color-surface);
}

.osta-review-magazine .osta-review-print__lead,
.osta-review-magazine .osta-review-print__meta {
  margin: 0 0 var(--space-2);
  max-width: 40rem;
  color: var(--color-brand-on-dark);
}

.osta-review-magazine .osta-review-print__meta {
  margin-bottom: 0;
  font-weight: var(--weight-semibold);
}

.osta-review-magazine .osta-review-print__actions {
  margin: 0;
  flex-shrink: 0;
}