/* Fini Blog — listing + article + TOC + read time */

/* ---------- Listing ---------- */
.blog-hero { padding: 180px 0 70px; }
.blog-hero h1 { max-width: 720px; }
.blog-hero .lede { margin-top: 18px; max-width: 560px; }

.blog-featured {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 0;
  border: var(--hairline-soft);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--paper-0);
  transition: box-shadow 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.blog-featured:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.blog-featured__media { position: relative; min-height: 380px; }
.blog-featured__media image-slot { position: absolute; inset: 0; }
.blog-featured__body { padding: 46px 48px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.blog-featured__body h2 { font-size: clamp(26px, 2.6vw, 38px); font-weight: 550; letter-spacing: -0.025em; line-height: 1.08; color: var(--green-ink); text-wrap: balance; }
.blog-featured__body h2 em { font-family: var(--font-accent); font-style: italic; font-weight: 400; font-size: 1.08em; color: var(--green-deep); }
.blog-featured__excerpt { font-size: 16px; line-height: 1.55; color: var(--ink-500); text-wrap: pretty; }
.blog-featured__link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; font-size: var(--text-sm); font-weight: 620; color: var(--green-deep); }
.blog-featured__link svg { width: 16px; height: 16px; transition: transform 180ms var(--ease-out); }
.blog-featured:hover .blog-featured__link svg { transform: translateX(3px); }

.blog-cat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--lime-100);
  color: var(--green-deep);
  font-family: var(--font-label);
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
}
.blog-meta { display: flex; align-items: center; gap: 10px; font-family: var(--font-label); font-size: var(--text-sm); letter-spacing: 0.02em; color: var(--warm-gray); }
.blog-meta span::after { content: '·'; margin-left: 10px; }
.blog-meta span:last-child::after { content: ''; margin-left: 0; }

.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; }
.blog-card {
  display: flex;
  flex-direction: column;
  border: var(--hairline-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper-0);
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.blog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); color: inherit; }
.blog-card__media { position: relative; aspect-ratio: 16 / 10; background: var(--paper-warm); }
.blog-card__media image-slot { position: absolute; inset: 0; }
.blog-card__body { padding: 24px 26px 26px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; flex: 1; }
.blog-card__body h3 { font-size: 19.5px; font-weight: 580; letter-spacing: -0.015em; line-height: 1.2; color: var(--green-ink); text-wrap: balance; }
.blog-card__excerpt { font-size: var(--text-sm); line-height: 1.5; color: var(--ink-500); }
.blog-card .blog-meta { margin-top: auto; padding-top: 8px; }

/* ---------- Post hero ---------- */
.post-hero { padding: 190px 0 50px; }
.post-hero__inner { max-width: 46em; margin: 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.post-hero h1 { font-size: clamp(36px, 4.6vw, 60px); font-weight: 540; letter-spacing: -0.03em; line-height: 1.04; color: var(--green-ink); text-wrap: balance; }
.post-hero h1 em { font-family: var(--font-accent); font-style: italic; font-weight: 400; font-size: 1.08em; color: var(--green-deep); }
.post-hero__standfirst { font-size: 19px; line-height: 1.5; color: var(--ink-500); text-wrap: pretty; }
.post-hero__byline { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.post-hero__avatar { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; position: relative; flex: none; background: var(--lime-100); }
.post-hero__avatar image-slot { position: absolute; inset: 0; }
.post-hero__who { font-size: var(--text-sm); font-weight: 600; color: var(--green-ink); }
.post-hero__who small { display: block; font-weight: 500; color: var(--warm-gray); margin-top: 1px; font-size: var(--text-sm); }
.post-cover { max-width: 62em; margin: 30px auto 0; padding: 0 32px; }
.post-cover__frame { position: relative; aspect-ratio: 21 / 9; border-radius: var(--radius-xl); overflow: hidden; }
.post-cover__frame image-slot { position: absolute; inset: 0; }

/* ---------- Article + TOC layout ---------- */
.toc-layout {
  gap: 4.5em;
  flex-flow: row;
  justify-content: center;
  align-items: flex-start;
  max-width: 72em;
  margin: 0 auto;
  padding: 70px 32px 110px;
  display: flex;
  position: relative;
}
.toc-sidebar {
  gap: 1em;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 15em;
  display: flex;
  position: sticky;
  top: 7em;
  flex: none;
}
.toc-hero__label {
  font-family: var(--font-label);
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  color: var(--warm-gray);
}
.toc-list { flex-flow: column; justify-content: flex-start; align-items: flex-start; width: 100%; display: flex; }
.toc-list .toc-link[href="#"] { display: none; } /* clone-template link stays hidden until blog.js fills real targets */
.toc-link {
  color: var(--warm-gray);
  border-left: 1px solid #e5eadb;
  padding: 0.45rem 0.5em 0.45rem 1em;
  font-size: var(--text-sm);
  font-weight: 540;
  line-height: 1.35;
  text-decoration: none;
  transition: all 0.25s;
  width: 100%;
}
.toc-link:hover { color: var(--green-deep); }
.toc-link[data-toc-status="active"] { color: var(--green-ink); border-left-color: var(--green-leaf); font-weight: 600; }
.toc-link[data-toc-depth="3"] { padding-left: 2em; font-size: var(--text-sm); }
.toc-sidebar__cta {
  margin-top: 14px;
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, var(--lime-200), var(--lime-300));
  width: 100%;
}
.toc-sidebar__cta p { font-size: var(--text-sm); font-weight: 600; color: var(--green-ink); line-height: 1.4; }
.toc-sidebar__cta a { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: var(--text-sm); font-weight: 640; color: var(--green-deep); }
.toc-sidebar__cta a svg { width: 14px; height: 14px; }

.toc-article { flex: 1; max-width: 42em; min-width: 0; }
.toc-article h2 {
  letter-spacing: -0.025em;
  margin: 1.9em 0 0.6em;
  font-size: clamp(26px, 2.4vw, 32px);
  font-weight: 550;
  line-height: 1.15;
  color: var(--green-ink);
  text-wrap: balance;
}
.toc-article h2:first-child { margin-top: 0; }
.toc-article h2 em { font-family: var(--font-accent); font-style: italic; font-weight: 400; font-size: 1.08em; color: var(--green-deep); }
.toc-article h3 { margin: 1.8em 0 0.6em; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--green-ink); }
.toc-article p { margin-bottom: 1.4em; font-size: 16.5px; line-height: 1.65; color: #3d4438; text-wrap: pretty; }
.toc-article strong { font-weight: 640; color: var(--green-ink); }
.toc-article blockquote {
  margin: 1.8em 0;
  padding: 0.2em 0 0.2em 1.2em;
  border-left: 2px solid var(--lime-500);
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 22px;
  line-height: 1.35;
  color: var(--green-deep);
}
.toc-article code {
  background-color: var(--paper-warm);
  border-radius: 5px;
  padding: 0.1em 0.45em 0.15em;
  font-family: var(--font-label);
  font-size: max(0.88em, var(--text-sm));
  display: inline-block;
  color: var(--green-ink);
}
.toc-article ul, .toc-article ol { margin: 0 0 1.4em; padding-left: 1.4em; list-style: disc; }
.toc-article ol { list-style: decimal; }
.toc-article li { margin-bottom: 0.7em; font-size: 16.5px; line-height: 1.6; color: #3d4438; }
.toc-article li::marker { color: var(--green-leaf); }
.post-note {
  margin: 1.8em 0;
  padding: 20px 24px;
  border-radius: var(--radius-lg);
  background: var(--paper-cream);
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.post-note i { width: 22px; height: 22px; flex: none; display: block; margin-top: 2px; }
.post-note p { margin: 0; font-size: var(--text-sm); line-height: 1.55; color: var(--green-olive); }

/* Post CTA banner */
.post-cta {
  margin-top: 3em;
  background: var(--green-ink);
  border-radius: var(--radius-xl);
  padding: 40px 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.post-cta h2 { margin: 0 !important; font-size: clamp(22px, 2.2vw, 28px) !important; color: var(--paper-50) !important; }
.post-cta h2 em { color: var(--lime-bright) !important; }
.post-cta p { margin: 8px 0 0 !important; color: rgba(253,255,250,0.6) !important; font-size: var(--text-sm) !important; }

/* Related */
.post-related { padding: 0 0 120px; }
.post-related .section-head { margin-bottom: 36px; }

@media screen and (max-width: 991px) {
  .blog-featured { grid-template-columns: 1fr; }
  .blog-featured__media { min-height: 260px; }
  .blog-grid { grid-template-columns: 1fr 1fr; }
  .toc-layout { flex-flow: column; gap: 2.5em; }
  .toc-sidebar { width: 100%; position: relative; top: 0; }
  .toc-sidebar__cta { display: none; }
}
@media screen and (max-width: 620px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-featured__body { padding: 28px 26px; }
  .post-cta { padding: 28px 26px; }
}

/* ---------- v2 production port: utilities replacing design inline styles ------ */
.blog-hero__h { font-size: clamp(42px, 5.6vw, 84px); }
.blog-sec-featured { padding: 30px 32px 0; }
.blog-sec-grid { padding: 20px 32px 120px; }

/* Comparison tables inside guide articles */
.toc-article table { width: 100%; border-collapse: collapse; margin: 1.6rem 0; font-size: var(--text-sm); line-height: 1.4; }
.toc-article th, .toc-article td { border: 1px solid #e2e7da; padding: 0.6rem 0.8rem; text-align: left; vertical-align: top; }
.toc-article thead th { background: #f3f1ea; font-weight: 640; }
.toc-article table code { font-size: 0.95em; }
@media (max-width: 620px) { .toc-article table { display: block; overflow-x: auto; white-space: nowrap; } }