/* ============================================================
   Blog post pages — /blog/*
   Loads after base.css; uses the same tokens and primitives.
   ============================================================ */

/* ---- Nav (reuse landing nav) ---- */
.bl-nav { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line) }
.bl-nav__inner { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); gap: var(--s3) }
.bl-nav__inner img { height: 30px; width: auto }

/* ---- Article ---- */
.bl-article { max-width: 1000px; margin: 0 auto; padding: calc(var(--nav-h) + var(--s6)) var(--gutter) var(--s6) }

.bl-tag { display: inline-block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--pink); background: var(--pink-tint); padding: 5px 12px; border-radius: 999px; margin-bottom: var(--s3) }

.bl-article h1 { font-size: clamp(26px, 5vw, 40px); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; color: var(--ink); margin-bottom: var(--s2) }

.bl-meta { font-size: 13px; color: var(--ink-3); margin-bottom: var(--s5); display: flex; gap: var(--s3); flex-wrap: wrap }

.bl-hero-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--r-lg); background: var(--bg-2); margin-bottom: var(--s5) }

/* ---- Body content ---- */
.bl-body h2 { font-size: clamp(20px, 3.5vw, 28px); font-weight: 700; letter-spacing: -.02em; margin: var(--s5) 0 var(--s2); color: var(--ink) }
.bl-body h3 { font-size: clamp(17px, 2.5vw, 22px); font-weight: 700; margin: var(--s4) 0 var(--s2); color: var(--ink) }
.bl-body p { font-size: 16px; line-height: 1.75; color: var(--ink-2); margin-bottom: var(--s3) }
.bl-body strong { color: var(--ink); font-weight: 600 }
.bl-body ul, .bl-body ol { padding-left: 1.4em; margin-bottom: var(--s3) }
.bl-body li { font-size: 16px; line-height: 1.75; color: var(--ink-2); margin-bottom: 6px }
.bl-body img { width: 100%; border-radius: var(--r); margin: var(--s3) 0; background: var(--bg-2) }
.bl-body blockquote { border-left: 3px solid var(--pink); padding-left: var(--s3); margin: var(--s4) 0; font-style: italic; color: var(--ink-2) }

/* ---- CTA Banner ---- */
.bl-cta { background: linear-gradient(130deg, var(--pink-tint) 0%, var(--pink-tint-2) 60%, #fff 100%); border: 1px solid #F7E4EA; border-radius: var(--r-xl); padding: var(--s5); text-align: center; margin: var(--s6) 0 }
.bl-cta h2 { font-size: clamp(22px, 4vw, 32px); font-weight: 800; letter-spacing: -.025em; margin-bottom: var(--s2) }
.bl-cta p { color: var(--ink-2); max-width: 48ch; margin: 0 auto var(--s4); font-size: 16px; line-height: 1.6 }

/* ---- More articles ---- */
.bl-more { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--line) }
.bl-more h2 { font-size: 20px; font-weight: 700; margin-bottom: var(--s4) }
.bl-more__grid { display: grid; grid-template-columns: 1fr; gap: var(--s3) }
.bl-more__link { display: block; padding: var(--s3); background: #fff; border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s }
.bl-more__link:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #F1D9E0 }
.bl-more__link h3 { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 4px }
.bl-more__link p { font-size: 13px; color: var(--ink-2); line-height: 1.5 }

/* ---- Blog index page ---- */
.bl-index { padding: calc(var(--nav-h) + var(--s6)) 0 var(--s6) }
.bl-index__head { margin-bottom: var(--s5) }
.bl-index__head h1 { font-size: clamp(30px, 6vw, 48px); font-weight: 800; letter-spacing: -.03em; color: var(--ink); margin-bottom: var(--s2) }
.bl-index__head p { font-size: 17px; color: var(--ink-2); max-width: 52ch; line-height: 1.6 }
.bl-index__grid { display: grid; grid-template-columns: 1fr; gap: var(--s4) }
.bl-index__card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; text-decoration: none; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s }
.bl-index__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #F1D9E0 }
.bl-index__img { aspect-ratio: 16/9; overflow: hidden; background: var(--bg-2) }
.bl-index__img img { width: 100%; height: 100%; object-fit: cover }
.bl-index__content { padding: var(--s4); display: flex; flex-direction: column; gap: 10px; flex: 1 }
.bl-index__content .bl-tag { margin-bottom: 0 }
.bl-index__content h2 { font-size: 18px; font-weight: 700; color: var(--ink); line-height: 1.35 }
.bl-index__content p { font-size: 14px; color: var(--ink-2); line-height: 1.55 }
.bl-index__meta { font-size: 12px; color: var(--ink-3); margin-top: auto }

/* ---- Footer ---- */
.bl-footer { border-top: 1px solid var(--line); padding: var(--s5) 0 var(--s4); margin-top: var(--s6) }
.bl-footer__inner { display: flex; flex-direction: column; align-items: center; gap: var(--s3); text-align: center }
.bl-footer__inner > a img { height: 28px; width: auto }
.bl-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2) var(--s3); font-size: 14px }
.bl-footer__links a { color: var(--ink-2); text-decoration: none }
.bl-footer__links a:hover { color: var(--pink) }
.bl-footer__copy { font-size: 13px; color: var(--ink-3) }

/* ---- Responsive ---- */
@media (min-width: 601px) {
  .bl-more__grid { grid-template-columns: repeat(2, 1fr) }
  .bl-index__grid { grid-template-columns: repeat(2, 1fr) }
}
@media (min-width: 900px) {
  .bl-index__grid { grid-template-columns: repeat(3, 1fr) }
}