/* ===================== SINGLE POST PAGE ===================== */

.post-hero {
  background: var(--navy);
  padding: 160px var(--gutter) var(--sp-5);
}

.post-hero-inner { max-width: 800px; margin: 0 auto; }

.post-hero-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  flex-wrap: wrap;
}

.post-hero-tag {
  display: inline-block;
  background: var(--gold);
  color: var(--navy);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 6px 12px;
}

.post-hero-tag.literacy { background: var(--green); color: var(--white); }
.post-hero-tag.spotlight { background: var(--gold-deep); color: var(--white); }

.post-hero-date { font-size: 13px; color: rgba(255,255,255,0.5); font-weight: 500; }

.post-hero h1 {
  color: var(--white);
  font-size: clamp(32px, 4.5vw, 56px);
  line-height: 1.08;
  margin-bottom: var(--sp-3);
}

.post-hero-subtitle {
  font-size: 18px;
  color: rgba(255,255,255,0.65);
  line-height: 1.65;
  max-width: 680px;
}

/* FEATURED IMAGE — fixed ratio, not a fixed pixel height.
   This wraps in two layers, same as the hero/body: an outer full-width
   band that supplies the side gutter, and an inner max-width:800px box
   that's centered inside it. That keeps the image's edges lined up with
   the hero headline and article text above and below it. Previously the
   gutter padding lived on the same element as max-width:800px, which
   quietly shrank the image ~96px narrower than the text around it. */
.post-featured-image {
  padding: 0 var(--gutter);
  margin-top: calc(-1 * var(--sp-4));
  position: relative;
  z-index: 2;
}

.post-featured-image-inner {
  max-width: 800px;
  margin: 0 auto;
}

.post-featured-image-inner .img-placeholder,
.post-featured-image-inner img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.post-img-caption {
  font-size: 12px;
  color: var(--gray-warm);
  padding: var(--sp-1) 0;
  letter-spacing: 0.04em;
  font-style: italic;
}

/* POST BODY */
.post-body-section { padding: var(--sp-5) var(--gutter) var(--sp-7); background: var(--cream); }

.post-body-inner {
  max-width: 800px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: var(--sp-6);
  align-items: start;
}

/* ARTICLE CONTENT */
.post-article h2 { font-size: 28px; margin: var(--sp-4) 0 var(--sp-2); line-height: 1.2; }
.post-article h2:first-child { margin-top: 0; }

.post-article p { font-size: 16px; color: var(--charcoal); line-height: 1.85; margin-bottom: var(--sp-2); }

.post-article blockquote {
  border-left: 3px solid var(--gold);
  padding: 4px 0 4px var(--sp-3);
  margin: var(--sp-4) 0;
}

.post-article blockquote p {
  font-style: italic;
  font-weight: 500;
  font-size: 20px;
  color: var(--navy);
  line-height: 1.6;
  margin: 0;
}

/* INLINE PHOTO GRID */
.post-photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-1); margin: var(--sp-4) 0; }
.post-photo-grid .img-placeholder,
.post-photo-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }

.post-photo-single { margin: var(--sp-4) 0; }
.post-photo-single .img-placeholder,
.post-photo-single img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }

/* STATS MOSAIC — for data-heavy literacy posts */
.stats-full-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
  margin: var(--sp-4) 0;
}

.sfg-card { background: var(--navy); padding: var(--sp-3); }

.sfg-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 52px;
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
  margin-bottom: var(--sp-1);
}

.sfg-label { font-size: 14px; color: rgba(255,255,255,0.7); line-height: 1.6; }

@media (max-width: 600px) {
  .stats-full-grid { grid-template-columns: 1fr; }
}

/* STAT CALLOUT */
.post-stat-callout {
  background: var(--navy);
  padding: var(--sp-3);
  margin: var(--sp-4) 0;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}

.psc-number {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 52px;
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
  flex-shrink: 0;
}

.psc-text { font-size: 15px; color: rgba(255,255,255,0.75); line-height: 1.6; padding-top: 4px; }

/* SIDEBAR */
.post-sidebar { position: sticky; top: 96px; }

.sidebar-card {
  background: var(--white);
  border: 1px solid var(--line);
  padding: var(--sp-3);
  margin-bottom: var(--sp-2);
}

.sidebar-card h4 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: var(--sp-2);
}

.sidebar-card p { font-size: 14px; color: var(--gray-warm); line-height: 1.7; }

.sidebar-session-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 64px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 4px;
}

.sidebar-links { list-style: none; }
.sidebar-links li { margin-bottom: var(--sp-1); }
.sidebar-links a {
  font-size: 14px;
  color: var(--navy);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sidebar-links a::before { content: '→'; color: var(--gold); font-size: 12px; }
.sidebar-links a:hover { color: var(--gold-deep); }

/* POST NAV */
.post-nav { background: var(--white); border-top: 1px solid var(--line); padding: var(--sp-4) var(--gutter); }

.post-nav-inner {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
}

.post-nav-link { text-decoration: none; color: var(--navy); transition: color 0.2s; max-width: 260px; }
.post-nav-link:hover { color: var(--gold-deep); }

.post-nav-link .nav-direction {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gray-warm);
  margin-bottom: 4px;
}

.post-nav-link h4 { font-size: 15px; line-height: 1.3; color: var(--navy); }
.post-nav-link.next { text-align: right; }

.post-nav-back {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-warm);
  transition: color 0.2s;
  flex-shrink: 0;
}

.post-nav-back:hover { color: var(--gold-deep); }

@media (max-width: 900px) {
  .post-hero { padding: 120px var(--sp-3) var(--sp-4); }
  .post-featured-image { padding: 0 var(--sp-3); }
  .post-body-section { padding: var(--sp-4) var(--sp-3) var(--sp-5); }
  .post-body-inner { grid-template-columns: 1fr; gap: var(--sp-4); }
  .post-sidebar { position: static; }
  .post-nav { padding: var(--sp-3); }
  .post-photo-grid { grid-template-columns: 1fr; }
}