/* --------------------------------------------------------------------------
   BLOG EDITORIAL COMPONENTS
   New editorial layer for the blog: featured story, secondary stack, category
   filters (blog.html), author block, key takeaways, pull quote, honest note,
   comparison table, sticky table of contents (article pages).
   Uses ONLY existing tokens from main.css. No new colors or fonts.
   -------------------------------------------------------------------------- */

/* ==========================================================================
   1. BLOG INDEX: FEATURED STORY
   ========================================================================== */
.blog-featured {
  display: grid;
  /* minmax(0, ...) stops the image's intrinsic width from blowing out the track */
  grid-template-columns: minmax(0, 1fr);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin-bottom: var(--space-10);
  text-decoration: none;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.blog-featured:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

@media (min-width: 768px) {
  .blog-featured {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  }
}

.blog-featured__img {
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
  display: block;
  aspect-ratio: 16 / 10;
}

@media (min-width: 768px) {
  .blog-featured__img {
    aspect-ratio: auto;
  }
}

.blog-featured__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-8);
  min-width: 0;
}

.blog-featured__eyebrow {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-od-green);
  margin-bottom: var(--space-3);
}

.blog-featured__title {
  font-size: var(--text-2xl);
  line-height: 1.1;
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

@media (min-width: 1024px) {
  .blog-featured__title {
    font-size: var(--text-3xl);
  }
}

.blog-featured__excerpt {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

.blog-featured__meta {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

/* ==========================================================================
   2. BLOG INDEX: SECONDARY STACK
   ========================================================================== */
.blog-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-bottom: var(--space-12);
}

@media (min-width: 768px) {
  .blog-stack {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }
}

.blog-stack__card {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
  text-decoration: none;
  padding: var(--space-4);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.blog-stack__card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.blog-stack__thumb {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  display: block;
}

.blog-stack__tag {
  display: block;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-od-green);
  margin-bottom: var(--space-1);
}

.blog-stack__title {
  font-size: var(--text-base);
  line-height: 1.2;
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.blog-stack__date {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ==========================================================================
   3. BLOG INDEX: CATEGORY FILTER TABS
   ========================================================================== */
.blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.blog-filter {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-text-muted);
  background-color: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}

.blog-filter:hover {
  color: var(--color-od-green);
  border-color: var(--color-od-green);
}

.blog-filter:focus-visible {
  outline: 3px solid var(--color-gold);
  outline-offset: 2px;
}

.blog-filter--active,
.blog-filter--active:hover {
  color: var(--color-white);
  background-color: var(--color-od-green);
  border-color: var(--color-od-green);
}

/* The filter tabs stay hidden until js/blog-index.js wires them up;
   .blog-filters { display:flex } would otherwise defeat the hidden attribute */
.blog-filters[hidden] {
  display: none;
}

/* Generic visibility toggle used by the index filtering (cards, featured, stack) */
.blog-hidden {
  display: none !important;
}

/* Tighter top padding so articles appear sooner below the hero */
.blog-index-section {
  padding-top: var(--space-12);
}

@media (min-width: 1024px) {
  .blog-index-section {
    padding-top: var(--space-16);
  }
}

/* ==========================================================================
   4. ARTICLE: AUTHOR BLOCK
   ========================================================================== */
.blog-author {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-8);
}

.blog-author__img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.blog-author__name {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  line-height: 1.3;
}

.blog-author__role {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.4;
}

.blog-author__meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-left: auto;
  text-align: right;
  flex-shrink: 0;
}

@media (max-width: 479px) {
  .blog-author__meta {
    display: none;
  }
}

/* ==========================================================================
   5. ARTICLE: KEY TAKEAWAYS CARD
   ========================================================================== */
.blog-takeaways {
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-gold);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-8);
  margin: 0 0 var(--space-8);
}

.blog-takeaways__heading {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-extrabold);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

.blog-article__body .blog-takeaways__list {
  list-style: disc;
  margin: 0;
  padding-left: 1.25rem;
}

.blog-article__body .blog-takeaways__list li {
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.blog-article__body .blog-takeaways__list li::marker {
  color: var(--color-gold);
}

.blog-article__body .blog-takeaways__list li:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   6. ARTICLE: PULL QUOTE
   ========================================================================== */
.blog-pullquote {
  border-left: 4px solid var(--color-od-green);
  padding: var(--space-2) 0 var(--space-2) var(--space-6);
  margin: var(--space-10) 0;
}

.blog-pullquote p {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-xl);
  line-height: 1.35;
  color: var(--color-text-primary);
  margin: 0;
}

@media (min-width: 768px) {
  .blog-pullquote p {
    font-size: var(--text-2xl);
  }
}

/* ==========================================================================
   7. ARTICLE: HONEST NOTE (callout variant, base .blog-callout in blog-post.css)
   ========================================================================== */
.blog-callout--honest {
  border-left-color: var(--color-gold);
}

.blog-callout__label {
  display: block;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-extrabold);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-olive);
  margin-bottom: var(--space-2);
}

/* ==========================================================================
   8. ARTICLE: COMPARISON TABLE
   ========================================================================== */
.blog-cmp-table-wrap {
  overflow-x: auto;
  margin: var(--space-8) 0;
}

.blog-cmp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.blog-cmp-table thead th {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  text-align: left;
  color: #F4F4F0;
  background-color: var(--color-charcoal);
  padding: var(--space-3) var(--space-4);
  white-space: nowrap;
}

.blog-cmp-table tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
  line-height: 1.6;
  vertical-align: top;
}

.blog-cmp-table tbody tr:nth-child(even) {
  background-color: var(--color-bg-alt);
}

.blog-cmp-table tbody td:first-child {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

/* ==========================================================================
   9. ARTICLE: STICKY TABLE OF CONTENTS
   The article column stays 760px and centered. At wide viewports a grid
   places a sticky TOC rail in the right gutter. Hidden below 1200px.
   ========================================================================== */
.blog-toc {
  display: none;
}

@media (min-width: 1200px) {
  .blog-layout {
    display: grid;
    grid-template-columns: 1fr min(760px, 100%) var(--space-8) 240px 1fr;
    align-items: start;
  }

  .blog-layout > .blog-article {
    grid-column: 2;
    width: 100%;
    max-width: 760px;
    margin: 0;
  }

  .blog-toc {
    display: block;
    grid-column: 4;
    position: sticky;
    top: calc(var(--nav-height) + var(--space-8));
    max-height: calc(100vh - var(--nav-height) - var(--space-16));
    overflow-y: auto;
    padding: var(--space-12) 0;
  }
}

.blog-toc__heading {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-extrabold);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.blog-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.blog-toc__list li {
  margin: 0 0 var(--space-2);
}

.blog-toc__link {
  display: block;
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: var(--space-1) 0 var(--space-1) var(--space-3);
  border-left: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.blog-toc__link:hover {
  color: var(--color-od-green);
}

.blog-toc__link--active {
  color: var(--color-od-green);
  font-weight: var(--font-weight-semibold);
  border-left-color: var(--color-gold);
}

/* Anchor jumps land clear of the fixed nav */
.blog-article__body h2 {
  scroll-margin-top: calc(var(--nav-height) + var(--space-4));
}


/* ==========================================================================
   10. ARTICLE SKIN B: "AUTHOR IN RAIL" (approved 2026-07-26)
   Two-column article layout: reading column + sticky right rail holding
   Written by, On this page (scrollspy via js/article-enhance.js), and the
   instant-estimate card. Scoped under .blog-shell so only converted
   articles pick it up. Fonts: Geist (loaded per page).
   ========================================================================== */
.blog-shell { max-width: 1080px; margin: 0 auto; padding: var(--space-10) var(--container-padding) var(--space-16); }
.blog-shell__grid { display: grid; grid-template-columns: minmax(0, 1fr) 292px; gap: 60px; align-items: start; margin-top: var(--space-6); }
@media (max-width: 960px) { .blog-shell__grid { grid-template-columns: 1fr; gap: 0; } .blog-rail { position: static; margin-top: var(--space-10); } }
.blog-shell .blog-article { max-width: 660px; margin: 0; padding: 0; }

.blog-shell .blog-article__body p { font-family: 'Geist', var(--font-body); font-size: 16.5px; line-height: 1.75; color: rgba(38, 36, 31, 0.85); }
.blog-shell .blog-article__body li { font-family: 'Geist', var(--font-body); font-size: 16px; line-height: 1.65; color: rgba(38, 36, 31, 0.85); }
.blog-shell .blog-article__body h2 { font-family: 'Geist', var(--font-heading); text-transform: none; letter-spacing: -0.02em; font-size: 23px; font-weight: 650; line-height: 1.25; margin: 46px 0 16px; padding-top: 28px; border-top: 1px solid #EEEBE4; scroll-margin-top: calc(var(--nav-height) + 16px); }
.blog-shell .blog-article__body h2:first-of-type { border-top: none; padding-top: 0; }
.blog-shell .blog-article__body h3 { font-family: 'Geist', var(--font-heading); text-transform: none; letter-spacing: -0.01em; font-size: 18px; font-weight: 650; margin: 30px 0 10px; }

/* full-bleed breakouts collapse into the reading column */
.blog-shell .cf-wide { width: 100%; margin-left: 0; transform: none; }
.blog-shell .pg-factors { grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: 700px) { .blog-shell .pg-factors { grid-template-columns: 1fr 1fr; gap: 18px; } }
.blog-shell .cf-table, .blog-shell .cf-figure figcaption { font-family: 'Geist', var(--font-body); }

/* takeaways card (content sourced from js/blog-posts.js; markup static per article) */
.blog-shell .blog-takeaways { background: #F6F5F0; border: 1px solid #E9E6DF; border-radius: 12px; padding: 22px 26px; margin: 0 0 32px; }
.blog-shell .blog-takeaways h3 { font-family: 'Geist', var(--font-heading); font-size: 12px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--color-od-green); margin: 0 0 13px; }
.blog-shell .blog-takeaways ul { list-style: none; margin: 0; padding: 0; }
.blog-shell .blog-takeaways li { font-family: 'Geist', var(--font-body); font-size: 15px; line-height: 1.6; color: rgba(38, 36, 31, 0.82); padding-left: 24px; position: relative; margin-bottom: 9px; }
.blog-shell .blog-takeaways li::before { content: "\2713"; position: absolute; left: 0; color: #C1852C; font-weight: 700; }
.blog-shell .blog-takeaways li:last-child { margin-bottom: 0; }

/* the rail */
.blog-rail { position: sticky; top: calc(var(--nav-height) + 16px); display: flex; flex-direction: column; gap: 16px; font-family: 'Geist', var(--font-body); }
.blog-rail__card { border: 1px solid #E9E6DF; border-radius: 12px; background: #fff; padding: 18px 20px; }
.blog-rail__card h5 { font-size: 11.5px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(38, 36, 31, 0.45); margin: 0 0 12px; font-family: inherit; }
.blog-rail__auth { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid #F2F0EA; margin-bottom: 10px; }
.blog-rail__auth img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: top; }
.blog-rail__auth b { font-size: 14.5px; font-weight: 650; display: block; line-height: 1.3; color: #26241F; }
.blog-rail__auth span { font-size: 12.5px; color: rgba(38, 36, 31, 0.55); }
.blog-rail__when { font-size: 13px; color: rgba(38, 36, 31, 0.6); }
.blog-toc a { display: block; font-size: 13.5px; font-weight: 500; color: rgba(38, 36, 31, 0.6); padding: 7px 10px; margin: 0 -10px; border-radius: 8px; line-height: 1.4; border-left: 2px solid transparent; }
.blog-toc a:hover { color: var(--color-od-green); }
.blog-toc a.on { color: #26241F; font-weight: 650; background: rgba(123, 117, 54, 0.07); border-left-color: #C1852C; }
.blog-rail__card--est { border-top: 3px solid #C1852C; }
.blog-rail__card--est b { font-size: 15px; font-weight: 650; display: block; margin-bottom: 6px; color: #26241F; }
.blog-rail__card--est p { font-size: 13px; line-height: 1.55; color: rgba(38, 36, 31, 0.6); margin: 0 0 14px; font-family: inherit; }
.blog-rail__card--est a { display: block; text-align: center; background: #C1852C; color: #211F20; font-weight: 650; font-size: 13.5px; padding: 12px; border-radius: 8px; }
.blog-rail__card--est a:hover { background: #d6973a; }

/* inline CTA restyled to the light bordered look */
.blog-shell .blog-inline-cta { background: #fff; border: 1px solid #E9E6DF; border-top: 2px solid #C1852C; border-radius: 12px; padding: 26px 28px; }
.blog-shell .blog-inline-cta p { color: rgba(38, 36, 31, 0.75); font-family: 'Geist', var(--font-body); text-shadow: none; }
.blog-shell .blog-inline-cta .btn { background: #C1852C; color: #FFFFFF; border-color: #C1852C; }
.blog-shell .blog-inline-cta .btn:hover { background: #a8721f; border-color: #a8721f; color: #FFFFFF; }