/* ==========================================================================
   CMS content: blog index, blog posts, and pages.
   Builds on the tokens in base.css / style.css.
   ========================================================================== */

.content-hero {
  text-align: center;
  padding: var(--space-16) 0 var(--space-8);
}
.content-hero h1 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: var(--space-3) 0 var(--space-4);
}
.content-hero .hero-subtitle {
  max-width: var(--content-narrow);
  margin-inline: auto;
}

/* Article / page body ------------------------------------------------------ */
.article {
  max-width: var(--content-narrow);
  margin: 0 auto;
  padding: var(--space-8) 0 var(--space-24);
}
.article-header {
  text-align: center;
  margin-bottom: var(--space-10);
}
.article-header h1 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: var(--space-3) 0 var(--space-4);
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.article-cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  margin-bottom: var(--space-10);
}

.prose {
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--color-text);
}
.prose > * + * { margin-top: var(--space-5); }
.prose h2, .prose h3, .prose h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-top: var(--space-10);
}
.prose h2 { font-size: var(--text-xl); }
.prose h3 { font-size: var(--text-lg); }
.prose h4 { font-size: var(--text-base); }
.prose a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.prose a:hover { color: var(--color-primary-hover); }
.prose ul, .prose ol { padding-left: var(--space-6); }
.prose li + li { margin-top: var(--space-2); }
.prose blockquote {
  border-left: 4px solid var(--color-primary);
  padding: var(--space-2) var(--space-5);
  color: var(--color-text-muted);
  font-style: italic;
  background: var(--color-surface-2);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}
.prose pre {
  background: var(--color-surface-offset);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  overflow-x: auto;
  font-size: var(--text-sm);
}
.prose code {
  font-size: 0.9em;
  background: var(--color-surface-offset);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
}
.prose pre code { background: none; padding: 0; }
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.prose th, .prose td {
  border: 1px solid var(--color-divider);
  padding: var(--space-2) var(--space-3);
  text-align: left;
}
.prose th { background: var(--color-surface-2); font-weight: 700; }
.prose hr { border: 0; border-top: 1px solid var(--color-divider); }

/* Blog index -------------------------------------------------------------- */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-8);
  padding-bottom: var(--space-24);
}
.post-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: transform var(--transition-interactive), box-shadow var(--transition-interactive);
}
.post-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.post-card-image {
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
  background: var(--color-surface-2);
}
.post-card-body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}
.post-card h2 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.post-card h2 a { color: inherit; text-decoration: none; }
.post-card h2 a::after { content: ''; position: absolute; inset: 0; }
.post-card { position: relative; }
.post-card p { color: var(--color-text-muted); font-size: var(--text-sm); }
.post-card .article-meta { justify-content: flex-start; margin-top: auto; }

.empty-state {
  text-align: center;
  color: var(--color-text-muted);
  padding: var(--space-16) 0 var(--space-24);
}

/* Pagination (Laravel's default markup, restyled) --------------------------- */
.pagination-wrap { display: flex; justify-content: center; padding-bottom: var(--space-24); }
.pagination-wrap nav[role="navigation"] > div:first-child { display: none; }
.pagination-wrap .relative.z-0 { display: inline-flex; gap: var(--space-1); }
.pagination-wrap .relative.z-0 a,
.pagination-wrap .relative.z-0 span > span {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text);
  text-decoration: none;
}
.pagination-wrap .relative.z-0 a:hover { background: var(--color-surface-2); }
.pagination-wrap .relative.z-0 span[aria-current="page"] > span {
  background: var(--color-primary);
  color: #fff;
}
.pagination-wrap p { display: none; }