/* ==========================================================================
   Post page styles — blog article layout
   Single column within the content frame (logo → Contact). The featured image
   spans the full frame; the header, body and CTA sit in a readable column.
   ========================================================================== */

/* Wrapper */
.post-wrap {
  padding-block: clamp(2rem, 5vw, 3.5rem);
}

/* Back link */
.post-back {
  font-weight: 700;
  text-decoration: none;
  color: var(--plum);
  font-size: 0.95rem;
  display: inline-block;
  margin-bottom: 1.5rem;
}
.post-back:hover { color: var(--plum-dark); }

/* Article spans the full content frame */
.post-article {
  max-width: none;
}

/* Header, body and CTA sit in a comfortable reading column, left-aligned.
   The featured image breaks out to the full frame width. */
.post-header,
.post-body,
.post-cta {
  max-width: 720px;
}

/* Header */
.post-header {
  padding-bottom: clamp(1.5rem, 3vw, 2rem);
  border-bottom: 3px solid var(--charcoal);
}
.post-header .post-tags { margin-bottom: 1rem; }

/* Category chips row (post header + blog cards) */
.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.post-header h1 { margin-bottom: 0.75rem; }
.post-lead {
  font-size: 1.15rem;
  color: #5e5c5a;
  margin: 0;
}

/* Featured image — full frame width, between the header divider and the body */
.post-figure {
  margin: clamp(1.75rem, 4vw, 2.75rem) 0;
}
.post-figure img {
  width: 100%;
  height: auto;
  display: block;
  border: 3px solid var(--charcoal);
  border-radius: var(--radius-lg);
}
/* Featured (hero) image is constrained to the reading column so it matches the
   in-body figures rather than spanning the full content frame. */
.post-article > .post-figure { max-width: 720px; }
/* Contain variant — infographics / wide graphics shown in full (no crop) */
.post-figure--contain {
  background: var(--cream-deep);
  border: 3px solid var(--charcoal);
  border-radius: var(--radius-lg);
  padding: clamp(1rem, 3vw, 2rem);
}
.post-figure--contain img {
  width: auto;
  max-width: 100%;
  max-height: 640px;
  margin-inline: auto;
  border: none;
  border-radius: var(--radius);
}

/* Body content */
.post-body { line-height: 1.75; }
.post-body h2,
.post-body h3 {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1rem + 1.2vw, 1.6rem);
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  color: var(--charcoal);
}
.post-body p { margin-bottom: 1.25rem; }
.post-body ul,
.post-body ol { margin-bottom: 1.25rem; padding-left: 1.4rem; }
.post-body li { margin-bottom: 0.4rem; }

/* Historical / pull-quote callout (e.g. /blogpost 【QUOTE】 markers) */
.post-body blockquote {
  margin: 1.75rem 0;
  padding: 0.85rem 0 0.85rem 1.4rem;
  border-left: 4px solid var(--plum);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--charcoal);
}
.post-body blockquote p { margin-bottom: 0.6rem; }
.post-body blockquote p:last-child { margin-bottom: 0; }

/* Recipe box */
.post-body .recipe-box {
  background: var(--white);
  border: 3px solid var(--charcoal);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 3vw, 2rem);
  margin-block: 2rem;
  box-shadow: 6px 6px 0 var(--charcoal);
}
.post-body .recipe-box h3 {
  margin-top: 0;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--plum);
  border-bottom: 2px solid var(--cream-deep);
  padding-bottom: 0.5rem;
  margin-bottom: 0.75rem;
}
.post-body .recipe-box h3.recipe-heading {
  font-family: var(--font-sans);
  font-size: 0.85rem;
}
.post-body .recipe-box ul,
.post-body .recipe-box ol { margin-bottom: 0; }
.post-body .recipe-box li { margin-bottom: 0.35rem; }

/* Newsletter CTA — bottom of the article, aligned with the reading column */
.post-cta {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 3px solid var(--charcoal);
}

/* Blog card image (listing page) */
.blog-card img.thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 3px solid #2b2b2b;
  border-radius: var(--radius);
  display: block;
}

/* Blog card category chips */
.blog-card .post-tags { margin-bottom: 0.5rem; }

/* ==========================================================================
   Two-column layout: article + sticky "On this page" sidebar
   ========================================================================== */
html { scroll-behavior: smooth; }

.post-layout {
  display: grid;
  grid-template-columns: minmax(0, 720px) minmax(0, 1fr);
  grid-template-areas: "article toc";
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}
.post-layout > .post-article { grid-area: article; min-width: 0; }
.post-layout > .post-toc { grid-area: toc; }

/* Headings clear the sticky site header when jumped to from the TOC */
.post-body h2 { scroll-margin-top: 5.5rem; }

/* "On this page" sidebar — a self-contained card, sticky below the header */
.post-toc {
  position: sticky;
  top: 5.5rem;
  align-self: start;
  font-size: 0.92rem;
  padding: 1.1rem 1.25rem;
  background: var(--white);
  border: 3px solid var(--charcoal);
  border-radius: var(--radius-lg);
}
.post-toc__time {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.85rem;
  font-weight: 700;
  color: var(--plum);
}
.post-toc__time svg { flex: none; }

.post-toc details { margin: 0; }
.post-toc summary {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--charcoal);
  cursor: pointer;
  list-style: none;
  padding: 0.25rem 0;
}
.post-toc summary::-webkit-details-marker { display: none; }

.post-toc nav { margin-top: 0.5rem; }
.post-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--cream-deep);
}
.post-toc li { margin: 0; }
.post-toc a {
  display: block;
  padding: 0.35rem 0 0.35rem 0.85rem;
  margin-left: -2px;
  border-left: 2px solid transparent;
  color: #5e5c5a;
  text-decoration: none;
  line-height: 1.35;
}
.post-toc a:hover { color: var(--plum); }
.post-toc a.is-active {
  color: var(--plum);
  font-weight: 700;
  border-left-color: var(--amber);
}
.post-toc a.is-recipe::after {
  content: "Recipe";
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--charcoal);
  background: var(--amber);
  border-radius: 999px;
  vertical-align: middle;
}

/* Narrow screens: sidebar becomes a collapsible box above the article */
@media (max-width: 900px) {
  .post-layout { display: block; }
  .post-toc {
    position: static;
    margin-bottom: 1.75rem;
  }
}
@media (min-width: 901px) {
  /* On desktop the disclosure is always open and its toggle is hidden */
  .post-toc summary { display: none; }
  /* The card is locked to the exact header height (set via JS) so its bottom
     sits on the header divider. The list is tightened to fit inside that height
     with margin to spare — no scrollbar. The reading time stays pinned at the
     top; the list fills the remaining space. overflow-y is a silent fallback. */
  .post-toc {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-size: 0.8rem;
    padding: 0.75rem 1rem;
  }
  .post-toc__time {
    flex: 0 0 auto;
    font-size: 0.82rem;
    margin-bottom: 0.4rem;
  }
  .post-toc details { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  .post-toc a {
    padding: 0.12rem 0 0.12rem 0.7rem;
    line-height: 1.2;
  }
}