/* ═══ FIELD BLOG — the LOCKED 5-block layout (blog.html) ═══
   Layout contract: blog CENTER; project statement TOP-LEFT; goals BOTTOM-LEFT;
   mission statement RIGHT (top); podcast BOTTOM-RIGHT. The design contract holds —
   only the holiday theme layer shifts the accent. */

.blog-grid {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr) minmax(260px, 340px);
  gap: var(--phi-space-lg);
  max-width: 1240px;
  margin: 0 auto;
  align-items: start;
}
.blog-col { display: grid; gap: var(--phi-space-lg); align-content: start; }
.blog-card {
  background: var(--phi-bg-card);
  border: 1px solid var(--phi-stroke);
  border-radius: 12px;
  padding: var(--phi-space-xl);
}
.blog-statement p, .blog-mission p {
  font-family: var(--font-body);
  color: var(--phi-text);
  font-size: var(--phi-body);
  line-height: 1.8;
  margin-top: var(--phi-space-sm);
}
.blog-statement a, .blog-goals a { color: var(--phi-gold); }
.blog-list { list-style: none; padding: 0; display: grid; gap: var(--phi-space-sm); margin-top: var(--phi-space-sm); }
.blog-list li {
  font-family: var(--font-body);
  color: var(--phi-text);
  font-size: var(--phi-caption);
  line-height: 1.75;
  padding-left: 1.1em;
  position: relative;
}
.blog-list li::before { content: '\2192'; position: absolute; left: 0; color: var(--phi-gold); }
.blog-list b { color: var(--phi-gold); font-weight: 600; }
.blog-podcast-note {
  font-family: var(--font-body);
  font-size: var(--phi-caption);
  color: var(--phi-text-dim);
  line-height: 1.7;
  margin-top: var(--phi-space-md);
}
.blog-podcast-note a { color: var(--phi-gold); }

/* ── The podcast block (Task 22b): six stored episodes, click-to-load ── */
.blog-podcast-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--phi-space-md);
  margin-top: var(--phi-space-md);
}
.podcast-episode {
  display: grid;
  gap: var(--phi-space-xs);
}
.podcast-episode .podcast-title {
  font-family: var(--font-body);
  color: var(--phi-text);
  font-size: var(--phi-caption);
  line-height: 1.5;
}
.podcast-episode audio {
  width: 100%;
  height: 32px;
  filter: sepia(0.25) saturate(0.7) hue-rotate(-15deg);
  border-radius: 6px;
}

/* ── Center: the reading ── */
.blog-center {
  background: var(--phi-bg-card);
  border: 1px solid var(--phi-gold-dim);
  border-radius: 14px;
  padding: var(--phi-space-2xl) var(--phi-space-xl);
  min-height: 420px;
}
.blog-banner { display: none; }
.blog-banner.active {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--phi-caption);
  color: var(--holiday-accent, var(--phi-gold));
  border: 1px solid var(--holiday-accent, var(--phi-gold-dim));
  border-radius: 10px;
  padding: 0.6em 1em;
  margin-bottom: var(--phi-space-md);
  letter-spacing: 0.06em;
}
.blog-banner.active::before {
  content: '\2732  ';
  color: var(--holiday-accent, var(--phi-gold));
}
#blog-root { margin-top: var(--phi-space-md); }
#blog-root h1, #blog-root h2, #blog-root h3, #blog-root h4 {
  font-family: var(--font-heading);
  color: var(--phi-text-bright);
  margin: var(--phi-space-md) 0 var(--phi-space-xs);
  line-height: 1.3;
}
#blog-root h1 { font-size: var(--phi-h2); color: var(--phi-gold); }
#blog-root h2 { font-size: var(--phi-h3); }
#blog-root p, #blog-root li {
  font-family: var(--font-body);
  color: var(--phi-text);
  font-size: var(--phi-body);
  line-height: 1.85;
}
#blog-root p { margin: var(--phi-space-sm) 0; }
#blog-root ul, #blog-root ol { padding-left: 1.4em; margin: var(--phi-space-sm) 0; }
#blog-root a { color: var(--phi-gold); }
#blog-root blockquote {
  border-left: 3px solid var(--holiday-accent, var(--phi-gold));
  padding-left: var(--phi-space-md);
  color: var(--phi-text-dim);
  font-style: italic;
}
#blog-root pre {
  background: var(--phi-bg-deep);
  border: 1px solid var(--phi-stroke);
  border-radius: 10px;
  padding: var(--phi-space-md);
  overflow-x: auto;
}
#blog-root code { font-family: var(--font-mono); font-size: var(--phi-caption); color: var(--phi-gold); }
#blog-root hr { border: none; border-top: 1px solid var(--phi-stroke); margin: var(--phi-space-lg) 0; }
.blog-empty p {
  font-family: var(--font-body);
  color: var(--phi-text-dim);
  font-size: var(--phi-body);
  line-height: 1.85;
  font-style: italic;
}
.blog-archive-note {
  font-family: var(--font-mono);
  font-size: var(--phi-caption);
  color: var(--phi-text-dim);
  margin-top: var(--phi-space-xl);
  padding-top: var(--phi-space-md);
  border-top: 1px solid var(--phi-stroke);
}

@media (max-width: 1080px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-col-left { order: 2; }
  .blog-center { order: 1; }
  .blog-col-right { order: 3; }
}

/* ═══ HOLIDAY THEMES — the calendar layer ═══
   Each holiday shifts the blog's accent (gold → seasonal) and adds a banner glyph.
   The sacred design contract itself never changes. */
.holiday-new-year      { --holiday-accent: #7fd4d4; }  .holiday-new-year .blog-banner.active::before      { content: '\2736  '; }
.holiday-mlk           { --holiday-accent: #b8912f; }  .holiday-mlk .blog-banner.active::before           { content: '\2600  '; }
.holiday-valentines    { --holiday-accent: #d4607a; }  .holiday-valentines .blog-banner.active::before    { content: '\2665  '; }
.holiday-st-patricks   { --holiday-accent: #6fbf73; }  .holiday-st-patricks .blog-banner.active::before   { content: '\2618  '; }
.holiday-easter        { --holiday-accent: #e8dcc0; }  .holiday-easter .blog-banner.active::before        { content: '\273F  '; }
.holiday-memorial      { --holiday-accent: #c85a54; }  .holiday-memorial .blog-banner.active::before      { content: '\2605  '; }
.holiday-juneteenth    { --holiday-accent: #4fa3a5; }  .holiday-juneteenth .blog-banner.active::before    { content: '\2739  '; }
.holiday-july-4        { --holiday-accent: #9aa8c7; }  .holiday-july-4 .blog-banner.active::before        { content: '\2606  '; }
.holiday-labor         { --holiday-accent: #c79a5a; }  .holiday-labor .blog-banner.active::before         { content: '\2692  '; }
.holiday-halloween     { --holiday-accent: #d47a43; }  .holiday-halloween .blog-banner.active::before     { content: '\263E  '; }
.holiday-thanksgiving  { --holiday-accent: #d1a054; }  .holiday-thanksgiving .blog-banner.active::before  { content: '\2737  '; }
.holiday-christmas     { --holiday-accent: #6fbf8e; }  .holiday-christmas .blog-banner.active::before     { content: '\273F  '; }
.holiday-new-years-eve { --holiday-accent: #b8c0d4; }  .holiday-new-years-eve .blog-banner.active::before { content: '\2735  '; }

.holiday-halloween .blog-center, .holiday-christmas .blog-center,
.holiday-valentines .blog-center, .holiday-easter .blog-center {
  border-color: var(--holiday-accent);
}