/* Blog: hub grid + article layout. Loaded after styles.css on /blog/ pages only. */

.blog-hero { padding-top: clamp(56px, 8vw, 128px); padding-bottom: clamp(40px, 5.5vw, 80px); }
.blog-hero h1 { font-size: clamp(2.6rem, 6.4vw, 5.2rem); max-width: 16ch; margin: 24px 0 0; }

.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 30px); }
.post-card {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--paper-card); border: 1px solid var(--line); border-top: 2px solid var(--brass);
  padding: clamp(24px, 2.6vw, 34px); text-decoration: none; color: var(--ink);
  transition: border-color 0.25s, transform 0.25s;
}
.post-card:hover { border-color: var(--brass); transform: translateY(-3px); }
.post-card__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; }
.post-card__date { font-size: 0.8125rem; color: var(--ink-faint); letter-spacing: 0.04em; }
.post-card h2 { font-size: clamp(1.35rem, 2vw, 1.65rem); line-height: 1.18; margin: 18px 0 12px; overflow-wrap: anywhere; }
.post-card p { font-size: 0.95rem; color: var(--ink-soft); line-height: 1.6; }
.post-card__more { margin-top: auto; padding-top: 22px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass); }
.blog-empty { grid-column: 1 / -1; border: 1px dashed var(--line-strong); padding: clamp(28px, 4vw, 48px); color: var(--ink-soft); max-width: 62ch; }

.program-links { display: flex; flex-wrap: wrap; gap: 10px; }
.program-links a {
  display: inline-block; padding: 10px 16px; border: 1px solid var(--line-strong);
  font-size: 0.86rem; font-weight: 500; color: var(--ink); text-decoration: none; background: var(--paper-card);
}
.program-links a:hover { border-color: var(--brass); color: var(--brass); }

/* Article */
.post-hero { padding-top: clamp(48px, 7vw, 108px); padding-bottom: clamp(36px, 4.5vw, 64px); }
.post-hero h1 { font-size: clamp(2.2rem, 5.2vw, 4.1rem); line-height: 1.08; max-width: 22ch; margin: 22px 0 0; overflow-wrap: break-word; }
.post-hero .lede { margin-top: 24px; max-width: 60ch; }
.post-byline { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
.post-byline span + span::before { content: '/'; margin-right: 18px; color: var(--line-strong); }

.post-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(40px, 6vw, 96px); align-items: start; }

.prose { max-width: 68ch; min-width: 0; color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.75; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: clamp(1.55rem, 2.6vw, 2.05rem); line-height: 1.15; color: var(--ink); margin-top: 2.1em; }
.prose h3 { font-size: clamp(1.2rem, 1.9vw, 1.4rem); line-height: 1.25; color: var(--ink); margin-top: 1.7em; }
.prose h2 + *, .prose h3 + * { margin-top: 0.7em; }
.prose a { color: var(--brass); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--ink); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose ul { list-style: disc; padding-left: 1.3em; }
.prose ol { list-style: decimal; padding-left: 1.4em; }
.prose li + li { margin-top: 0.55em; }
.prose li::marker { color: var(--brass); }

.post-cta { margin-top: 2.6em; background: var(--paper-deep); border-left: 3px solid var(--brass); padding: clamp(24px, 3vw, 36px); }
.post-cta h2 { margin-top: 0; font-size: clamp(1.4rem, 2.3vw, 1.8rem); }
.post-cta p { margin-top: 10px; }
.post-cta .hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.post-cta .btn { text-decoration: none; color: var(--paper); }
.post-cta .btn--ghost { color: var(--ink); }
.post-cta .btn--ghost:hover { color: var(--paper); }

.post-compliance { margin-top: 2em; padding-top: 18px; border-top: 1px solid var(--line); font-size: 0.8125rem; line-height: 1.6; color: var(--ink-faint); }

.post-aside { position: sticky; top: 104px; display: grid; gap: 18px; }
.aside-card { background: var(--paper-card); border: 1px solid var(--line); padding: 24px; }
.aside-card h2 { font-size: 1.3rem; line-height: 1.2; margin: 10px 0 10px; }
.aside-card p { font-size: 0.92rem; color: var(--ink-soft); line-height: 1.6; }
.aside-card .btn { width: 100%; margin-top: 18px; }
.aside-card__phone { display: block; margin-top: 12px; text-align: center; font-weight: 600; font-size: 0.95rem; color: var(--ink); text-decoration: none; }
.aside-card__phone:hover { color: var(--brass); }
.aside-links { margin-top: 12px; }
.aside-links li { border-top: 1px solid var(--line); }
.aside-links a { display: block; padding: 11px 0; font-size: 0.92rem; color: var(--ink); text-decoration: none; }
.aside-links a:hover { color: var(--brass); }

@media (max-width: 1080px) {
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-layout { grid-template-columns: minmax(0, 1fr) 260px; }
}
@media (max-width: 860px) {
  .post-layout { grid-template-columns: minmax(0, 1fr); }
  .post-aside { position: static; }
}
@media (max-width: 620px) {
  .post-grid { grid-template-columns: minmax(0, 1fr); }
  .prose { font-size: 1.02rem; }
  .post-cta .btn { width: 100%; }
  .post-byline span + span::before { display: none; }
}