/* ══════════════════════════════════════════════════════
   Blog — Catalog + Post styles
   All values use --efie-* design tokens from efie-tokens.css
   ══════════════════════════════════════════════════════ */

/* ── Blog Catalog ─────────────────────────────────────── */

.blog-catalog {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: var(--efie-space-4);
  padding-block: var(--efie-space-3);
}

/* ── Blog Card (glass pattern) ────────────────────────── */

.blog-card {
  background: var(--efie-color-surface-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--efie-color-border-glass);
  border-radius: var(--efie-radius-medium);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
  color: inherit;
  display: block;
}

.blog-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px var(--efie-color-shadow);
}

/* Card thumbnail — only rendered when image exists */
.blog-card__thumbnail {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* Card body */
.blog-card__body {
  padding: var(--efie-space-3);
}

.blog-card__title {
  font-family: var(--efie-font-family-display);
  font-weight: var(--efie-font-weight-bold);
  font-size: 1.25rem;
  line-height: var(--efie-line-height-heading);
  margin: 0 0 var(--efie-space-1);
  color: var(--efie-color-text-primary);
}

.blog-card__meta {
  font-size: 0.875rem;
  color: var(--efie-color-text-muted);
  margin: 0 0 var(--efie-space-2);
}

.blog-card__excerpt {
  font-size: var(--efie-font-size-body);
  line-height: var(--efie-line-height-body);
  color: var(--efie-color-text-muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Blog Post Hero Image ─────────────────────────────── */

.blog-post-hero {
  width: 100%;
  height: 25vh;
  min-height: 200px;
  max-height: 400px;
  object-fit: cover;
  display: block;
  border-radius: 0 0 var(--efie-radius-large) var(--efie-radius-large);
}

/* ── Eyebrow row (post view) ──────────────────────────── */

.blog-eyebrow-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--efie-space-3);
}

/* ── Blog Post Body ───────────────────────────────────── */

.blog-post-article {
  max-width: 42rem;
  margin-inline: auto;
  padding: var(--efie-space-2) var(--efie-space-3) var(--efie-space-4);
}

.blog-post-article h1 {
  font-family: var(--efie-font-family-display);
  font-weight: var(--efie-font-weight-extrabold);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: var(--efie-line-height-heading);
  margin: 0 0 var(--efie-space-2);
  color: var(--efie-color-text-primary);
}

.blog-post-meta {
  font-size: 0.875rem;
  color: var(--efie-color-text-muted);
  margin: 0 0 var(--efie-space-4);
  padding-bottom: var(--efie-space-3);
  border-bottom: 1px solid var(--efie-color-border);
}

.blog-post-meta--no-border {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.blog-post-socials {
  display: flex;
  align-items: center;
  gap: var(--efie-space-2);
  padding-bottom: var(--efie-space-3);
  border-bottom: 1px solid var(--efie-color-border);
  margin-bottom: var(--efie-space-5);
}

.blog-post-socials__link {
  display: inline-flex;
  align-items: center;
  color: var(--efie-color-text-muted);
  transition: color 0.2s ease;
  text-decoration: none;
}

.blog-post-socials__link:hover {
  color: var(--efie-color-text-primary);
}

.blog-post-socials__link svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* ── Blog content body — typography for Quill HTML output ── */

.blog-post-content {
  font-family: var(--efie-font-family-sans);
  font-size: var(--efie-font-size-body);
  line-height: var(--efie-line-height-body);
  color: var(--efie-color-text-primary);
}

.blog-post-content h2 {
  font-family: var(--efie-font-family-display);
  font-weight: var(--efie-font-weight-bold);
  font-size: 1.5rem;
  margin: var(--efie-space-5) 0 var(--efie-space-2);
}

.blog-post-content h3 {
  font-family: var(--efie-font-family-display);
  font-weight: var(--efie-font-weight-semibold);
  font-size: 1.25rem;
  margin: var(--efie-space-4) 0 var(--efie-space-2);
}

.blog-post-content p {
  margin: 0 0 var(--efie-space-3);
}

.blog-post-content blockquote {
  border-left: 3px solid var(--efie-color-accent-indigo);
  padding-left: var(--efie-space-3);
  margin: var(--efie-space-3) 0;
  color: var(--efie-color-text-muted);
  font-style: italic;
}

.blog-post-content ul,
.blog-post-content ol {
  margin: 0 0 var(--efie-space-3);
  padding-left: var(--efie-space-4);
}

.blog-post-content li {
  margin-bottom: var(--efie-space-1);
}

.blog-post-content a {
  color: var(--efie-color-accent-indigo);
  text-decoration: underline;
}

.blog-post-content img {
  max-width: 100%;
  border-radius: var(--efie-radius-small);
}

/* ── Empty state ──────────────────────────────────────── */

.blog-empty {
  text-align: center;
  padding: var(--efie-space-7) var(--efie-space-3);
  color: var(--efie-color-text-muted);
}

.blog-empty__icon {
  font-size: 3rem;
  margin-bottom: var(--efie-space-3);
  opacity: 0.5;
}

.blog-empty__title {
  font-size: 1.5rem;
  font-weight: var(--efie-font-weight-semibold);
  margin-bottom: var(--efie-space-2);
  color: var(--efie-color-text-primary);
}

/* ── Back link ────────────────────────────────────────── */

.blog-back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--efie-space-1);
  color: var(--efie-color-accent-indigo);
  text-decoration: none;
  font-weight: var(--efie-font-weight-medium);
  font-size: 0.875rem;
  white-space: nowrap;
  margin-bottom: var(--efie-space-3);
}

.blog-eyebrow-row .blog-back-link {
  margin-bottom: 0;
}

.blog-back-link:hover {
  text-decoration: underline;
}

/* ── Loading state ────────────────────────────────────── */

.blog-loading {
  text-align: center;
  padding: var(--efie-space-7);
  color: var(--efie-color-text-muted);
}

/* ── 404 / not-found state ────────────────────────────── */

.blog-not-found {
  text-align: center;
  padding: var(--efie-space-7) var(--efie-space-3);
}

/* ══════════════════════════════════════════════════════
   Dark mode — dual selector pattern from efie-tokens.css
   ══════════════════════════════════════════════════════ */

[data-theme="dark"] .blog-card {
  background: var(--efie-color-surface-glass);
  border-color: var(--efie-color-border);
}

[data-theme="dark"] .blog-post-content a {
  color: var(--efie-color-accent-teal);
}

[data-theme="dark"] .blog-back-link {
  color: var(--efie-color-accent-teal);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .blog-card {
    background: var(--efie-color-surface-glass);
    border-color: var(--efie-color-border);
  }

  :root:not([data-theme="light"]) .blog-post-content a {
    color: var(--efie-color-accent-teal);
  }

  :root:not([data-theme="light"]) .blog-back-link {
    color: var(--efie-color-accent-teal);
  }
}

/* ══════════════════════════════════════════════════════
   Responsive breakpoints (match efie.css pattern)
   ══════════════════════════════════════════════════════ */

@media (min-width: 48rem) {
  .blog-catalog {
    gap: var(--efie-space-5);
  }

  .blog-post-article {
    padding: var(--efie-space-5) var(--efie-space-4);
  }

}

@media (min-width: 64rem) {
  .blog-catalog {
    grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
  }

  .blog-post-article {
    padding: var(--efie-space-6) var(--efie-space-3);
  }
}