/* Blog index: three columns = site sidebar (shell) | posts | blog aside.
   Shell look comes from blog-post-taste.css (body.blog-post). */
@import url('/assets/blog-post-taste.css');

body.blog-index main.blog-index-container { padding: clamp(32px, 4vw, 64px) var(--wrap-pad) clamp(56px, 7vw, 112px); width: 100%; min-width: 0; }
body.blog-index .blog-head h1 { font-size: clamp(36px, 4.4vw, 68px); line-height: 1; letter-spacing: -0.03em; margin-bottom: 16px; }
body.blog-index .blog-head .lede { font-size: 19px; line-height: 1.5; max-width: 40em; color: var(--text); }

body.blog-index .blog-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(32px, 4vw, 72px); margin-top: clamp(32px, 4vw, 56px); align-items: start; }

body.blog-index .blog-lead { display: grid; gap: 24px; }
body.blog-index .blog-lead-img { display: block; background: #fff; }
body.blog-index .blog-lead-img img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: top left; }
body.blog-index .blog-lead-body h2 { font-size: clamp(26px, 2.6vw, 40px); line-height: 1.08; letter-spacing: -0.03em; margin: 0 0 14px; }
body.blog-index .blog-lead-body p { font-size: 18px; line-height: 1.55; color: var(--text); max-width: 36em; margin: 0 0 12px; }
body.blog-index .blog-meta { font-size: 15px; color: var(--text-2); }
body.blog-index .blog-lead-body .btn { margin-top: 12px; }
body.blog-index a { color: inherit; }
body.blog-index .blog-lead h2 a, body.blog-index .blog-tile h3 a { text-decoration: none; }
body.blog-index .blog-lead h2 a:hover, body.blog-index .blog-tile h3 a:hover { color: var(--brand); }

body.blog-index .blog-rest { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px); margin-top: clamp(48px, 6vw, 88px); }
body.blog-index .blog-tile:nth-child(even) { margin-top: clamp(32px, 4vw, 64px); }
body.blog-index .blog-tile img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: top left; background: #fff; margin-bottom: 16px; }
body.blog-index .blog-tile h3 { font-size: clamp(20px, 1.8vw, 26px); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 10px; }
body.blog-index .blog-tile p:not(.blog-meta) { font-size: 17px; line-height: 1.55; color: var(--text); margin: 0 0 10px; }

/* right column */
body.blog-index .blog-aside { position: sticky; top: 24px; display: grid; gap: 40px; }
body.blog-index .aside-block h2 { font-size: 22px; letter-spacing: -0.02em; margin: 0 0 14px; }
body.blog-index .aside-recent { list-style: none; display: grid; gap: 18px; padding: 0; margin: 0; }
body.blog-index .aside-recent a { display: block; font-size: 17px; line-height: 1.3; font-weight: 600; text-decoration: none; }
body.blog-index .aside-recent a:hover { color: var(--brand); }
body.blog-index .aside-recent .blog-meta { display: block; margin-top: 4px; font-size: 14px; }
body.blog-index .aside-topics { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
body.blog-index .aside-topics li { display: flex; justify-content: space-between; gap: 12px; background: var(--ground-2); padding: 12px 16px; font-size: 16px; }
body.blog-index .aside-count { font-variant-numeric: tabular-nums; color: var(--text-2); }
body.blog-index .aside-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
body.blog-index .aside-cta { background: var(--brand-dark); color: #fff; padding: 28px; }
body.blog-index .aside-cta h2 { color: #fff; font-size: 24px; line-height: 1.1; letter-spacing: -0.03em; margin: 0 0 10px; }
body.blog-index .aside-cta p { color: #fff; font-size: 16px; line-height: 1.5; margin: 0 0 20px; }
body.blog-index .aside-cta .btn-brand { background: #fff; color: var(--brand-dark); }

@media (prefers-reduced-motion: no-preference) {
  body.blog-index .blog-tile img, body.blog-index .blog-lead-img img { transition: transform 0.4s ease; }
  body.blog-index .blog-tile:hover img, body.blog-index .blog-lead-img:hover img { transform: scale(1.02); }
  body.blog-index .blog-tile, body.blog-index .blog-lead-img { overflow: hidden; }
}
@media (max-width: 1180px) {
  body.blog-index .blog-cols { grid-template-columns: 1fr; }
  body.blog-index .blog-aside { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
@media (max-width: 700px) {
  body.blog-index .blog-rest { grid-template-columns: 1fr; }
  body.blog-index .blog-tile:nth-child(even) { margin-top: 0; }
}

body.blog-index .blog-head h1 { font-size: clamp(40px, 5.8vw, 88px); }
body.blog-index .footer-disclaimer, body.blog-index .footer-bottom-top, body.blog-index .footer-bottom-top span { font-size: 15px; max-width: 70ch; }
body.blog-index .blog-lead { grid-template-columns: 1fr; }

body.blog-index .aside-figure { margin: 0; }
body.blog-index .aside-figure img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 30% 50%; }
body.blog-index .aside-figure figcaption { font-size: 15px; line-height: 1.5; margin-top: 10px; color: var(--text); }
body.blog-index .aside-figure a { text-decoration: underline; }