/* Blog index + article styles.

   Loaded only by public/blog_index.html and public/blog_post.html, on top of
   otterflow-home.css — so it inherits that file's tokens (--ink, --coral,
   --line-warm, --radius-*, --shadow-*) rather than redefining a palette.

   .post__body styles author-written HTML from the editor, so every selector
   here has to survive whatever the sanitizer's tag allowlist can emit. */

/* ---------- index ---------- */

/* The index is two stacked <section class="band">s, and otterflow-home.css
   gives each one `padding-block: clamp(80px, 11vw, 160px)`. Left alone that
   stacks ~280px of dead space between the lead and the first card.

   These selectors are `section.band.X` on purpose: the marketing rule is
   `section.band` (specificity 0-1-1), so a plain `.blog-hero` (0-1-0) loses
   and is silently ignored. */
section.band.blog-hero {
  /* Top is trimmed from the marketing default too: 160px of air above a
     one-line eyebrow reads as an empty page on a list view, where the point
     is to see the posts. Still leaves room to clear the sticky nav. */
  padding-top: clamp(48px, 6vw, 88px);
  padding-bottom: clamp(20px, 2.5vw, 36px);
  text-align: center;
}
section.band.blog-list {
  padding-top: clamp(24px, 3vw, 40px);
}
.blog-hero .eyebrow { justify-content: center; }
.blog-hero .lead { margin-inline: auto; }

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2rem;
}

.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line-warm);
  border-radius: var(--radius-lg, 18px);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.blog-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.blog-card__media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--soft-warm);
}
.blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.5rem;
  flex: 1;
}
.blog-card__date {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navy-mute);
}
.blog-card__title {
  font-family: Sora, system-ui, sans-serif;
  font-size: 1.35rem;
  line-height: 1.25;
  margin: 0;
}
.blog-card__title a { color: var(--ink); text-decoration: none; }
.blog-card__title a:hover { color: var(--brown); }
.blog-card__excerpt {
  margin: 0;
  color: var(--navy-soft);
  line-height: 1.6;
}
.blog-card__more {
  margin-top: auto;
  padding-top: 0.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  color: var(--coral-deep);
  text-decoration: none;
}
.blog-card__more .arrow { width: 16px; height: 16px; }
.blog-card__more:hover { gap: 0.7rem; }

.blog-pager {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  justify-content: center;
  margin-top: 3rem;
  font-size: 0.95rem;
}
.blog-pager span { color: var(--navy-mute); }

.blog-empty {
  text-align: center;
  color: var(--navy-mute);
  padding: 3rem 0;
}

/* ---------- article ---------- */

/* The post is an <article class="band">, and otterflow-home.css scopes its
   band padding to `section.band` — an element selector, so an <article> matched
   nothing and got zero vertical padding. That put the closing CTA flush against
   the dark footer. Set it here rather than widening the marketing rule, which
   would change every band on the site. Bottom is deliberately larger so the
   call to action has room to breathe before the footer. */
.post {
  padding-block: clamp(32px, 4vw, 56px) clamp(72px, 9vw, 128px);
}

.post__inner {
  max-width: 760px;
}
.post__back {
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}
.post__back a { color: var(--navy-mute); text-decoration: none; }
.post__back a:hover { color: var(--brown); }

/* Draft / scheduled banner — only an admin ever sees this. */
.post__notice {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--coral-soft);
  color: var(--coral-deep);
  font-weight: 600;
  font-size: 0.9rem;
}

.post__header { margin-bottom: 2rem; }
.post__title {
  font-family: Sora, system-ui, sans-serif;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.15;
  margin: 0 0 0.75rem;
}
.post__meta {
  margin: 0;
  color: var(--navy-mute);
  font-size: 0.95rem;
}

.post__cover {
  margin: 0 0 2.5rem;
  border-radius: var(--radius-lg, 18px);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.post__cover img { width: 100%; height: auto; display: block; }

/* ---------- author-written body ---------- */

.post__body {
  font-size: 1.075rem;
  line-height: 1.75;
  color: var(--navy-soft);
}
.post__body > :first-child { margin-top: 0; }
.post__body p { margin: 0 0 1.35em; }

.post__body h2,
.post__body h3,
.post__body h4 {
  font-family: Sora, system-ui, sans-serif;
  color: var(--ink);
  line-height: 1.3;
  margin: 2.25em 0 0.6em;
}
.post__body h2 { font-size: 1.6rem; }
.post__body h3 { font-size: 1.3rem; }
.post__body h4 { font-size: 1.1rem; }

.post__body ul,
.post__body ol { margin: 0 0 1.35em; padding-left: 1.4em; }
.post__body li { margin-bottom: 0.5em; }

.post__body a {
  color: var(--coral-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.post__body a:hover { color: var(--coral); }

.post__body strong { color: var(--ink); }

.post__body blockquote {
  margin: 1.75em 0;
  padding: 0.25em 0 0.25em 1.25em;
  border-left: 3px solid var(--coral);
  color: var(--ink);
  font-style: italic;
}
.post__body blockquote p:last-child { margin-bottom: 0; }

.post__body pre {
  margin: 1.75em 0;
  padding: 1.1rem 1.25rem;
  border-radius: var(--radius-sm);
  background: var(--navy);
  color: #E5E7EB;
  overflow-x: auto;
  font-size: 0.92rem;
  line-height: 1.6;
}
.post__body :not(pre) > code {
  padding: 0.15em 0.4em;
  border-radius: var(--radius-xs);
  background: var(--soft-warm);
  color: var(--brown-deep);
  font-size: 0.9em;
}

.post__body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  margin: 0.5em 0;
}
.post__body figure { margin: 2em 0; }
.post__body figcaption {
  margin-top: 0.6em;
  font-size: 0.9rem;
  color: var(--navy-mute);
  text-align: center;
}

.post__body hr {
  margin: 2.5em 0;
  border: 0;
  border-top: 1px solid var(--line-warm);
}

/* Tables come from the editor's table button, so they can be any width —
   scroll the table itself rather than letting the page scroll sideways. */
.post__body table {
  display: block;
  overflow-x: auto;
  width: 100%;
  margin: 1.75em 0;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.post__body th,
.post__body td {
  border: 1px solid var(--line-warm);
  padding: 0.6em 0.85em;
  text-align: left;
  vertical-align: top;
}
.post__body th {
  background: var(--off-white);
  color: var(--ink);
  font-weight: 600;
}

.post__footer {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--line-warm);
}
.post__footer-link { color: var(--navy-mute); text-decoration: none; }
.post__footer-link:hover { color: var(--brown); }