/* ============================================================
   LEADSHOT — Blog (articles + index)
   Reuses services.css (tokens, header, footer, sec, cta, faq)
   and case.css (.shot image frame, .shotcap). Adds long-form
   article typography + blog index cards.
   ============================================================ */

/* --- Article hero meta line --- */
.artmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: var(--space-6); font-size: var(--text-sm); color: var(--fg-on-dark-3); }
.artmeta strong { color: var(--fg-on-dark-2); font-weight: var(--weight-semibold); }
.artmeta .sep { opacity: .5; }

/* --- Long-form article body (light section) --- */
.article { max-width: 760px; margin-inline: auto; }
.article > .shot, .article > figure { margin-block: var(--space-8); }
.article figure { margin-inline: 0; }
.article .lead { font-size: clamp(18px, 2.2vw, 22px); line-height: var(--leading-relaxed); color: var(--ink); font-weight: var(--weight-medium); margin-bottom: var(--space-6); }
.article p { margin-bottom: var(--space-5); font-size: var(--text-lg); line-height: var(--leading-relaxed); }
.article h2 { font-family: var(--font-display); font-size: clamp(24px, 3.2vw, 34px); font-weight: var(--weight-extrabold); line-height: 1.15; letter-spacing: -0.02em; margin-top: var(--space-12); margin-bottom: var(--space-5); }
.article h3 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-bold); margin-top: var(--space-8); margin-bottom: var(--space-3); }
.article ul, .article ol { margin: 0 0 var(--space-5) 1.2em; }
.article li { font-size: var(--text-lg); line-height: var(--leading-snug); margin-bottom: var(--space-3); }
.article strong { font-weight: var(--weight-bold); color: var(--ink); }
.article a { color: var(--shot); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.article a:hover { filter: brightness(1.12); }
.article blockquote { border-left: 3px solid var(--shot); padding: 2px 0 2px var(--space-6); margin: var(--space-8) 0; font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--fg2); }
.article .shotcap, .article figcaption { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--fg2); text-align: center; }

/* Table inside article */
.tablewrap { overflow-x: auto; margin: var(--space-6) 0; -webkit-overflow-scrolling: touch; }
.article table { width: 100%; border-collapse: collapse; font-size: var(--text-base); min-width: 440px; }
.article th, .article td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border-light); vertical-align: top; }
.article th { font-weight: var(--weight-bold); color: var(--ink); background: color-mix(in srgb, var(--shot) 7%, transparent); }
.article tbody tr:last-child td { border-bottom: none; }

/* Inline CTA strip inside article */
.inlinecta { border: 1px solid var(--border-light); border-left: 3px solid var(--shot); border-radius: var(--radius-md); padding: var(--space-6); margin: var(--space-10) 0; background: color-mix(in srgb, var(--shot) 4%, transparent); }
.inlinecta p { margin: 0; font-size: var(--text-lg); line-height: var(--leading-relaxed); }

/* --- Blog index cards (dark section) --- */
.bloglist { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); margin-top: var(--space-10); }
@media (max-width: 760px) { .bloglist { grid-template-columns: 1fr; } }
.bcard { display: flex; flex-direction: column; border: 1px solid var(--border-dark); border-radius: var(--radius-lg); overflow: hidden; background: color-mix(in srgb, var(--white) 3%, transparent); transition: border-color var(--duration-base) var(--ease), transform var(--duration-base) var(--ease); }
.bcard:hover { border-color: color-mix(in srgb, var(--shot) 50%, transparent); transform: translateY(-3px); }
.bcard__img { aspect-ratio: 16 / 9; background: #0b1440; overflow: hidden; }
.bcard__img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.bcard__body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.bcard__tag { font-size: var(--text-xs); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--shot); font-weight: var(--weight-semibold); }
.bcard h2 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-bold); line-height: 1.22; letter-spacing: var(--tracking-snug); }
.bcard p { font-size: var(--text-base); color: var(--fg-on-dark-2); line-height: var(--leading-body); flex: 1; }
.bcard__more { color: var(--shot); font-weight: var(--weight-bold); font-size: var(--text-sm); margin-top: auto; }