/* ================================================
   blog.css
   Styles for:
     - Blog listing page (The Watchers)
     - Individual post pages
     - Pagination

   Shared component styles (post-card, buttons,
   section headers) live in components.css.
   ================================================ */


/* ------------------------------------------------
   BLOG HERO
   Full-width banner at top of /blog/ page.

   TO CHANGE THE HERO IMAGE:
   Update the url() value in .blog-hero below.
   ------------------------------------------------ */
.blog-hero {
  position: relative;
  min-height: 50vh;
  display: flex;
  align-items: flex-end;

  /* Playground/cemetery image — most fitting for
     "The Watchers" theme. Swap as desired. */
  background-image: url('../images/hero-playground.jpg');
  background-size: cover;
  background-position: center 40%;
  padding-top: var(--header-height);
}

.blog-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(14, 13, 11, 0.5) 0%,
    rgba(14, 13, 11, 0.85) 100%
  );
}

.blog-hero-content {
  position: relative;
  z-index: 1;
  max-width: var(--max-width);
  width: 100%;
  margin: 0 auto;
  padding: var(--space-16) var(--space-8);
  text-align: center;
}

.blog-hero-title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 5vw, var(--text-3xl));
  font-weight: 300;
  letter-spacing: 0.05em;
  color: var(--color-white);
  margin-bottom: var(--space-4);
}

.blog-hero-subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  line-height: 1.6;
}


/* ------------------------------------------------
   BLOG LISTING GRID
   Wider 3-column grid specific to the blog page.
   (components.css has the base .post-grid)
   ------------------------------------------------ */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-10);
}

/* Blog page post cards are stacked vertically
   (image above text) rather than side-by-side */
.blog-listing .post-card-link {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.blog-listing .post-card-image-wrap {
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: var(--radius-sm);
}

.blog-listing .post-card-body {
  flex: 1;
}

/* Date label above post card title */
.post-card-date {
  display: block;
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

/* Placeholder when post has no image */
.post-card-image--placeholder {
  width: 100%;
  height: 100%;
  background: var(--color-surface);
  background-image: linear-gradient(
    135deg,
    var(--color-bg-raised) 0%,
    var(--color-surface) 100%
  );
}

/* Empty state */
.blog-empty {
  text-align: center;
  font-style: italic;
  color: var(--color-text-muted);
  padding: var(--space-16) 0;
}


/* ------------------------------------------------
   PAGINATION
   ------------------------------------------------ */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-16);
  padding-top: var(--space-8);
  border-top: var(--border-subtle);
}

.pagination-pages {
  display: flex;
  gap: var(--space-2);
}

.pagination-page {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  border: var(--border-subtle);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.pagination-page:hover,
.pagination-page.active {
  color: var(--color-accent);
  border-color: var(--color-accent-dim);
}

.pagination-disabled {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  padding: 0.85em 1.5em;
  border: 1px solid var(--color-text-faint);
  border-radius: var(--radius-sm);
  cursor: default;
}


/* ------------------------------------------------
   INDIVIDUAL POST PAGE
   ------------------------------------------------ */

/* Post hero — similar to blog hero but taller */
.post-hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center 40%;
  padding-top: var(--header-height);
}

/* Fallback when no image is set */
.post-hero--no-image {
  min-height: 40vh;
  background: var(--color-bg-raised);
  align-items: center;
}

.post-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(14, 13, 11, 0.4) 0%,
    rgba(14, 13, 11, 0.9) 100%
  );
}

.post-hero--no-image .post-hero-overlay {
  background: transparent;
}

.post-hero-content {
  position: relative;
  z-index: 1;
  max-width: var(--content-width);
  width: 100%;
  margin: 0 auto;
  padding: var(--space-12) var(--space-8);
}

/* Breadcrumb */
.post-breadcrumb {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.post-breadcrumb a {
  color: var(--color-accent);
  transition: opacity var(--transition-fast);
}

.post-breadcrumb a:hover {
  opacity: 0.7;
}

.post-title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl));
  font-weight: 300;
  color: var(--color-white);
  margin-bottom: var(--space-4);
  line-height: 1.1;
}

.post-hero--no-image .post-title {
  color: var(--color-text);
}

.post-description {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
  max-width: 600px;
  line-height: 1.5;
}

.post-meta {
  display: flex;
  gap: var(--space-4);
  align-items: center;
}

.post-date {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}


/* ------------------------------------------------
   POST BODY — PROSE CONTENT
   Styles for markdown-rendered content.
   All typography for the actual article text.
   ------------------------------------------------ */
.post-body {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-16) var(--space-8);
}

/* Prose container */
.post-content {
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.85;
  color: var(--color-text);
}

/* Headings inside post content */
.post-content h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--color-text);
  margin: var(--space-12) 0 var(--space-4);
  padding-top: var(--space-8);
  border-top: var(--border-subtle);
}

.post-content h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 300;
  color: var(--color-text);
  margin: var(--space-8) 0 var(--space-3);
}

/* Paragraphs */
.post-content p {
  margin-bottom: var(--space-6);
  font-size: 1.2rem;
}

/* Lead paragraph — first p after h1 or section start */
.post-content > p:first-child {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  font-style: italic;
}

/* Blockquote */
.post-content blockquote {
  border-left: 2px solid var(--color-accent-dim);
  margin: var(--space-8) 0;
  padding: var(--space-4) var(--space-8);
  font-style: italic;
  color: var(--color-text-muted);
  font-size: var(--text-lg);
}

.post-content blockquote p {
  margin: 0;
  font-size: inherit;
}

/* Inline code */
.post-content code {
  font-family: monospace;
  font-size: 0.9em;
  background: var(--color-bg-raised);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-sm);
  color: var(--color-accent);
}

/* Links */
.post-content a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-color: var(--color-accent-dim);
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}

.post-content a:hover {
  color: #caa968;
}

/* Horizontal rule */
.post-content hr {
  border: none;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--color-accent-dim), transparent);
  margin: var(--space-12) 0;
}

/* Lists */
.post-content ul,
.post-content ol {
  margin: var(--space-6) 0;
  padding-left: var(--space-8);
}

.post-content li {
  margin-bottom: var(--space-2);
  list-style: disc;
}

.post-content ol li {
  list-style: decimal;
}

/* Post footer */
.post-footer {
  margin-top: var(--space-16);
  padding-top: var(--space-8);
}

.post-rule {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--color-accent-dim), transparent);
  margin-bottom: var(--space-8);
}


/* ------------------------------------------------
   MORE POSTS SECTION (bottom of post page)
   ------------------------------------------------ */
.more-posts {
  background-color: var(--color-surface);
}


/* ------------------------------------------------
   RESPONSIVE
   ------------------------------------------------ */
@media (max-width: 900px) {

  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {

  .blog-grid {
    grid-template-columns: 1fr;
  }

  .post-body {
    padding: var(--space-8) var(--space-4);
  }

  .post-content {
    font-size: 1.05rem;
  }

  .pagination {
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .pagination-pages {
    order: -1;
    width: 100%;
    justify-content: center;
  }
}