/* Blog: index and article pages. Builds on site.css tokens and components; mobile-first like site.css. */

.blog-head { padding-bottom: 24px; }
.blog-head h1 { max-width: 18em; }
.post-head h1 { font-size: clamp(1.7rem, 1.1rem + 2.5vw, 3.1rem); max-width: 20em; }
.post-head .lead { font-size: 1.02rem; color: var(--muted); max-width: 40em; }
@media (min-width: 768px) {
  .blog-head { padding-bottom: 36px; }
  .post-head .lead { font-size: 1.15rem; }
}

.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 .6em; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--oak-deep); }
@media (min-width: 768px) { .post-meta { font-size: .82rem; margin-bottom: .7em; } }

/* index: on phones a post is a thumbnail beside its title, so the list stays scannable */
.grid.c3:has(> .post-card) { grid-template-columns: minmax(0, 1fr); }
.post-card:not(.featured) { display: grid; grid-template-columns: 104px minmax(0, 1fr); }
.post-card:not(.featured) .media.wide { aspect-ratio: auto; height: 100%; }
.post-card:not(.featured) .body { padding: 12px 14px; }
.post-card .body h3 { font-size: .95rem; line-height: 1.25; }
.post-card .body p:not(.post-meta) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .8rem; }
.post-card.featured { margin-bottom: var(--gap); }
.post-card.featured .media { aspect-ratio: 16/10; }
.post-card.featured .body { padding: 18px 18px 20px; justify-content: center; background: var(--cream); }
.post-card.featured h2 { font-size: clamp(1.3rem, 1rem + 1.3vw, 2.2rem); margin-bottom: .45em; }
.post-card.featured .body p:not(.post-meta) { -webkit-line-clamp: 3; font-size: .92rem; }
.post-grid { padding-bottom: var(--section); }
@media (min-width: 621px) {
  .grid.c3:has(> .post-card) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-card:not(.featured) { display: flex; }
  .post-card:not(.featured) .media.wide { aspect-ratio: 4/3; height: auto; }
  .post-card .body h3 { font-size: 1.05rem; }
  .post-card .body p:not(.post-meta) { -webkit-line-clamp: 3; font-size: .9rem; }
  .post-card.featured .media { aspect-ratio: 4/3; }
  .post-card.featured .body { padding: 24px 24px 28px; }
  .post-card.featured .body p:not(.post-meta) { -webkit-line-clamp: 5; font-size: 1.02rem; }
}
@media (min-width: 768px) {
  .post-card:not(.featured) .body { padding: 22px 24px 26px; }
  .post-card .body h3 { font-size: 1.18rem; }
  .post-card .body p:not(.post-meta) { font-size: .95rem; }
  .post-card.featured { margin-bottom: 32px; }
}
@media (min-width: 861px) {
  .post-card.featured { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .post-card.featured .media { aspect-ratio: auto; min-height: 100%; }
  .post-card.featured .body { padding: 44px 48px; }
}
@media (min-width: 961px) { .grid.c3:has(> .post-card) { grid-template-columns: repeat(3, 1fr); } }

/* article */
.post-cover { margin: 0; border-radius: 16px; overflow: hidden; aspect-ratio: 4/3; background: var(--sand); box-shadow: var(--shadow); }
.post-cover img { width: 100%; height: 100%; object-fit: cover; }
.post-section { padding: 36px 0 56px; }
.post-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; justify-content: start; }
.toc { position: relative; margin-bottom: 28px; }
.toc-inner { background: var(--cream); border-radius: var(--radius-s); padding: 16px 18px; }
.toc-title { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--oak-deep); margin-bottom: .8em; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .88rem; line-height: 1.4; }
.toc a { color: var(--muted); text-decoration: none; }
.toc a:hover { color: var(--walnut); }

.post-body { max-width: 720px; font-size: 1rem; }
.post-body > p:first-child, .post-body > .callout:first-child { margin-top: 0; }
.post-body h2 { font-size: 1.3rem; margin-top: 1.9em; scroll-margin-top: 84px; }
.post-body h3 { margin-top: 1.5em; color: var(--walnut-2); }
.post-body ul, .post-body ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.post-body li { margin-bottom: .5em; }
.post-body li::marker { color: var(--oak-deep); font-weight: 700; }
.post-body ul.checks { padding-left: 0; }
.post-body a { text-underline-offset: 3px; text-decoration-thickness: 1px; }
.post-body strong { color: var(--walnut); }

.callout { background: var(--cream); border-left: 4px solid var(--oak); border-radius: 0 var(--radius-s) var(--radius-s) 0; padding: 14px 16px; margin: 1.6em 0; }
.callout strong:first-child { color: var(--walnut); }

.table-scroll { overflow-x: auto; margin: 1.4em 0 .6em; -webkit-overflow-scrolling: touch; }
.specs.compare { min-width: 620px; }
.specs.compare thead th { background: var(--cream); color: var(--walnut); font-weight: 700; width: auto; }
.specs.compare th[scope='row'] { width: 22%; }
.specs.compare td, .specs.compare th { font-size: .9rem; padding: 12px 14px; }

.post-cta { margin: 2.4em 0 2em; background: var(--walnut); color: #e9dfcd; border-radius: var(--radius); padding: 22px 18px 20px; }
.post-cta h2 { color: #fff; margin: 0 0 .4em; font-size: 1.3rem; }
.post-cta p { color: #e9dfcd; margin: 0; font-size: .95rem; }
.post-cta .btn-row { margin-top: 18px; }
.post-cta .btn { background: var(--oak); border-color: var(--oak); color: var(--bark); }
.post-cta .btn:hover { background: #fff; border-color: #fff; }
.post-cta .btn.ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.post-cta .btn.ghost:hover { background: rgba(255, 255, 255, .12); }

.sources { border-top: 1px solid var(--line); padding-top: 8px; }
.sources h2 { font-size: 1.15rem; margin-top: 1.2em; }
.sources ol { font-size: .88rem; line-height: 1.5; padding-left: 1.4em; }
.sources li { margin-bottom: .7em; }
.src-pub, .src-note { color: var(--muted); }

@media (min-width: 621px) {
  .post-cover { aspect-ratio: 21/9; border-radius: 28px; }
  .post-section { padding: 64px 0 96px; }
  .post-body { font-size: 1.06rem; }
  .post-body h2 { font-size: 1.6rem; scroll-margin-top: 96px; }
  .callout { padding: 20px 24px; }
  .post-cta { margin: 3em 0 2.4em; padding: 32px 32px 28px; }
  .post-cta h2 { font-size: 1.5rem; }
  .post-cta p { font-size: inherit; }
  .post-cta .btn-row { margin-top: 20px; }
  .sources h2 { font-size: 1.25rem; }
  .sources ol { font-size: .9rem; }
}
@media (min-width: 768px) {
  .toc { margin-bottom: 36px; }
  .toc-inner { padding: 20px 22px; }
  .toc-title { font-size: .76rem; }
  .toc ol { gap: 10px; font-size: .9rem; }
}
@media (min-width: 961px) {
  .post-layout { grid-template-columns: 240px minmax(0, 720px); gap: 64px; }
  .toc { margin-bottom: 0; }
  .toc-inner { position: sticky; top: 100px; background: none; border-radius: 0; border-left: 2px solid var(--line); padding: 0 0 0 18px; }
}