/* Blog index cards + article typography. Tokens and reset come from base.css;
   hero/eyebrow/wrap classes come from company-pages.css. Gold budget per page:
   the hero underline (index) or the header rule (article) — nothing else. */

.blog-tools { padding: 70px 0 30px }
.blog-tools h1, .blog-grid-section h2 { margin: 14px 0 0; color: var(--pine); font-size: clamp(34px, 4vw, 48px); line-height: 1.06; letter-spacing: -.025em }
.blog-underline { display: inline-block; border-bottom: 4px solid var(--gold) }
.blog-sub { max-width: 700px; margin-top: 16px; color: var(--moss); font-size: 18px }

/* Tool cards: same paper sheet as the home-page tiers — ink hairline, hard gold shadow.
   The gold budget for the whole page lives here and in the heading underline. */
.tools-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px; margin-top: 40px;
}
.tools-card {
  display: block; padding: 28px; text-decoration: none; color: var(--ink);
  background: var(--bone); border: 1px solid var(--ink); border-radius: 0;
  box-shadow: 6px 6px 0 var(--gold);
}
.tools-card:hover { box-shadow: 8px 8px 0 var(--gold); transform: translate(-2px, -2px) }
.tools-card strong {
  display: block; font-size: 20px; font-weight: 700;
  letter-spacing: -.022em; margin-bottom: 8px;
}
.tools-card span { display: block; font-size: 15px; line-height: 1.5; color: var(--moss) }
.tools-card small { display: block; margin-top: 16px; font-size: 14px; font-weight: 600 }

.blog-grid-section { padding: 60px 0 110px }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 40px }
.blog-card { display: block; padding-bottom: 22px; background: var(--bone); border: 1px solid var(--fog); color: var(--ink); text-decoration: none }
.blog-card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover }
.blog-card time { display: block; margin: 18px 20px 8px; color: var(--moss); font: 500 12px var(--sans); letter-spacing: .09em; text-transform: uppercase }
.blog-card strong { display: block; margin: 0 20px 10px; color: var(--pine); font: 700 20px/1.25 var(--display); letter-spacing: -.022em }
.blog-card small { display: block; margin: 0 20px; color: var(--moss); font-size: 14px; line-height: 1.5 }
.blog-card:hover strong { text-decoration: underline; text-underline-offset: 4px }
.blog-empty { padding: 40px 0; color: var(--moss); font-size: 18px }
.blog-pagination { display: flex; justify-content: space-between; margin-top: 44px }
.blog-pagination a { color: var(--pine); font-weight: 600; text-decoration: none }
.blog-pagination a:hover { text-decoration: underline; text-underline-offset: 4px }

.blog-article { max-width: 720px; margin: 0 auto; padding: 60px 24px 110px }
.blog-article-header { margin-bottom: 34px; padding-bottom: 26px; border-bottom: 3px solid var(--gold) }
.blog-article-header time { color: var(--moss); font: 500 12px var(--sans); letter-spacing: .09em; text-transform: uppercase }
.blog-article-header h1 { margin: 14px 0 16px; color: var(--pine); font-size: clamp(36px, 4.5vw, 52px); line-height: 1.06; letter-spacing: -.028em }
.blog-lede { color: var(--moss); font-size: 19px }
.blog-featured { display: block; width: 100%; margin-bottom: 34px }

.blog-body { color: var(--ink); font-size: 17px; line-height: 1.65 }
.blog-body > * + * { margin-top: 1.15em }
.blog-body h2 { margin-top: 1.8em; color: var(--pine); font-size: 28px; line-height: 1.15; letter-spacing: -.022em }
.blog-body h3 { margin-top: 1.5em; color: var(--pine); font-size: 21px; letter-spacing: -.022em }
.blog-body a { color: var(--pine); font-weight: 600; text-underline-offset: 4px }
.blog-body img { display: block; width: 100% }
.blog-body iframe { width: 100%; border: 0; aspect-ratio: 16 / 9 }
.blog-body blockquote { padding: 4px 0 4px 20px; border-left: 3px solid var(--fog); color: var(--moss) }
.blog-body table { width: 100%; border-collapse: collapse; font-size: 15px }
.blog-body th, .blog-body td { padding: 10px 12px; border: 1px solid var(--fog); text-align: left }
.blog-body th { background: #F4F4F4; font-weight: 600 }
.blog-body ul, .blog-body ol { padding-left: 1.3em }
.blog-back { margin-top: 50px }
.blog-back a { color: var(--pine); font-weight: 600; text-decoration: none }
.blog-back a:hover { text-decoration: underline; text-underline-offset: 4px }

@media (max-width: 980px) { .blog-grid { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 640px) { .blog-grid { grid-template-columns: 1fr } }