/* ============================================================
   AgeInnovate — blog.css
   Styles for: page-blog.php (listing) + single.php (post view)
   Follows DESIGN-SYSTEM-AND-STANDARDS.md tokens from style.css
   ============================================================ */


/* ============================================================
   BLOG HERO — listing page header
   Dark navy, same pattern as other page heroes
   ============================================================ */

.blog-hero {
  background-color: var(--color-surface-dark);
  padding-block: var(--space-9) var(--space-8);
}

.blog-hero .eyebrow {
  color: var(--color-accent);
}

.blog-hero h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-4xl);
  color: var(--color-ink-light);
  margin-block: var(--space-3) var(--space-4);
  line-height: var(--lh-tight);
}

.blog-hero__sub {
  font-size: var(--fs-lg);
  color: var(--color-ink-muted-dark);
  max-width: 52ch;
}

@media (min-width: 768px) {
  .blog-hero h1 {
    font-size: var(--fs-5xl);
  }
}


/* ============================================================
   BLOG INDEX — post grid
   Light gray background, 3-column card grid
   ============================================================ */

.blog-index {
  background-color: var(--color-surface-light);
  padding-block: var(--space-8) var(--space-9);
}

.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 640px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .blog-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* ============================================================
   BLOG CARD
   Dark card on light bg — matches existing .card pattern
   but with image support
   ============================================================ */

.blog-card {
  background-color: var(--color-surface-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}

.blog-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

/* Featured image */
.blog-card__img-wrap {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.blog-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.blog-card:hover .blog-card__img {
  transform: scale(1.03);
}

/* Card body */
.blog-card__body {
  padding: var(--space-5) var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

.blog-card__date {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
}

.blog-card__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--color-ink);
  margin: 0;
}

.blog-card__title a {
  text-decoration: none;
  color: inherit;
}

.blog-card__title a:hover {
  color: var(--color-accent-dark);
}

.blog-card__title a:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.blog-card__excerpt {
  font-size: var(--fs-base);
  color: var(--color-ink-muted);
  line-height: var(--lh-normal);
  flex: 1;
}

/* push link-arrow to bottom of card */
.blog-card .link-arrow {
  margin-top: auto;
}


/* ============================================================
   BLOG EMPTY STATE
   ============================================================ */

.blog-empty {
  text-align: center;
  padding-block: var(--space-9);
  color: var(--color-ink-muted);
  font-size: var(--fs-lg);
}


/* ============================================================
   BLOG PAGINATION
   ============================================================ */

.blog-pagination {
  margin-top: var(--space-8);
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.blog-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding-inline: var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  color: var(--color-ink);
  background-color: var(--color-surface-white);
  border: 1px solid var(--color-line);
  transition: background-color var(--duration-fast), color var(--duration-fast);
}

.blog-pagination .page-numbers:hover {
  background-color: var(--color-accent-tint);
  border-color: var(--color-accent);
  color: var(--color-accent-dark);
}

.blog-pagination .page-numbers.current {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-surface-dark);
  font-weight: var(--fw-bold);
}

.blog-pagination .page-numbers:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}


/* ============================================================
   POST HERO — single post header
   Dark navy, similar to blog-hero
   ============================================================ */

.post-hero {
  background-color: var(--color-surface-dark);
  padding-block: var(--space-8) var(--space-7);
}

.post-hero__inner {
  max-width: 72ch;
}

.post-hero__back {
  display: inline-block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-ink-muted-dark);
  text-decoration: none;
  margin-bottom: var(--space-5);
  transition: color var(--duration-fast);
}

.post-hero__back:hover {
  color: var(--color-accent);
}

.post-hero .eyebrow {
  color: var(--color-accent);
}

.post-hero__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-3xl);
  color: var(--color-ink-light);
  line-height: var(--lh-snug);
  margin-block: var(--space-3) var(--space-4);
}

.post-hero__meta {
  font-size: var(--fs-sm);
  color: var(--color-ink-muted-dark);
  font-weight: var(--fw-medium);
}

@media (min-width: 768px) {
  .post-hero__title {
    font-size: var(--fs-4xl);
  }
}

@media (min-width: 1024px) {
  .post-hero__title {
    font-size: var(--fs-5xl);
  }
}


/* ============================================================
   POST FEATURED IMAGE
   ============================================================ */

.post-featured-img {
  background-color: var(--color-surface-darker);
  padding-block: var(--space-6);
}

.post-featured-img__img {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  border-radius: var(--radius-lg);
}


/* ============================================================
   POST BODY — the actual article content
   White background, readable measure (~70ch)
   ============================================================ */

.post-body {
  background-color: var(--color-surface-white);
  padding-block: var(--space-8) var(--space-9);
}

/* Constrain readable width */
.post-content {
  max-width: 72ch;
}

/* Typography for post content — all elements your coworker
   might add in the WP editor */

.post-content p {
  font-size: var(--fs-lg);
  line-height: var(--lh-loose);
  color: var(--color-ink);
  margin-bottom: var(--space-5);
}

.post-content h2 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  margin-top: var(--space-7);
  margin-bottom: var(--space-4);
  line-height: var(--lh-snug);
}

.post-content h3 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
  line-height: var(--lh-snug);
}

.post-content ul,
.post-content ol {
  list-style: revert; /* restore browser bullets/numbers inside post content only */
  padding-left: var(--space-6);
  margin-bottom: var(--space-5);
}

.post-content li {
  font-size: var(--fs-lg);
  line-height: var(--lh-loose);
  color: var(--color-ink);
  margin-bottom: var(--space-2);
}

.post-content a {
  color: var(--color-accent-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.post-content a:hover {
  color: var(--color-accent);
  text-decoration: none;
}

.post-content blockquote {
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-5);
  margin-block: var(--space-6);
  color: var(--color-ink-muted);
  font-size: var(--fs-xl);
  font-style: italic;
}

.post-content img {
  width: 100%;
  border-radius: var(--radius-md);
  margin-block: var(--space-5);
}

.post-content hr {
  border: none;
  border-top: 1px solid var(--color-line);
  margin-block: var(--space-7);
}

/* Strong / em */
.post-content strong { font-weight: var(--fw-semibold); }
.post-content em { font-style: italic; }


/* ============================================================
   POST FOOTER — back link
   ============================================================ */

.post-footer {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-line);
}

.post-footer__back {
  color: var(--color-ink-muted);
  text-decoration: none;
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: color var(--duration-fast);
}

.post-footer__back:hover {
  color: var(--color-accent-dark);
}