/* ============================================================
   Votenir blog — article + index styles.
   Builds on landing.css (load that first): same tokens, nav, footer.
   ============================================================ */

.lp-blog-hero { position: relative; overflow: hidden; text-align: center; padding: 4.2rem 1.5rem 2.6rem; }
.lp-blog-hero h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); font-weight: 800; max-width: 860px; margin: 0 auto 1rem; }
.lp-blog-hero .lp-hero-sub { margin: 0 auto 0.4rem; }
.lp-blog-meta { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; font-size: 0.88rem; color: var(--lp-muted); font-weight: 600; }
.lp-blog-meta span + span::before { content: '·'; margin-right: 0.6rem; }
.lp-crumbs { font-size: 0.85rem; font-weight: 600; color: var(--lp-muted); margin-bottom: 1.2rem; }
.lp-crumbs a { color: var(--lp-muted); }
.lp-crumbs a:hover { color: var(--lp-primary); }

/* ---------- Article body ---------- */
.lp-article { max-width: 760px; margin: 0 auto; padding: 1rem 1.5rem 2rem; }
.lp-article h2 { font-size: clamp(1.4rem, 2.6vw, 1.75rem); font-weight: 800; margin: 2.6rem 0 0.9rem; }
.lp-article h3 { font-size: 1.15rem; font-weight: 700; margin: 1.8rem 0 0.6rem; }
.lp-article p, .lp-article li { font-size: 1.06rem; line-height: 1.75; color: var(--lp-ink-soft); }
.lp-article strong { color: var(--lp-ink); }
.lp-article ul, .lp-article ol { padding-left: 1.4rem; margin: 0 0 1.2rem; }
.lp-article li { margin-bottom: 0.45rem; }
.lp-article li::marker { color: var(--lp-primary); font-weight: 700; }
.lp-article a { text-decoration: underline; text-decoration-color: rgba(113, 36, 245, 0.3); text-underline-offset: 3px; }
.lp-article a:hover { text-decoration-color: var(--lp-primary); }

.lp-table-wrap { overflow-x: auto; margin: 1.4rem 0 1.8rem; border: 1px solid var(--lp-border); border-radius: 14px; }
.lp-article table { width: 100%; border-collapse: collapse; font-size: 0.95rem; min-width: 520px; }
.lp-article th, .lp-article td { text-align: left; padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--lp-border); vertical-align: top; color: var(--lp-ink-soft); line-height: 1.5; }
.lp-article th { background: var(--lp-bg-soft); color: var(--lp-ink); font-weight: 700; }
.lp-article tr:last-child td { border-bottom: 0; }

/* FAQ */
.lp-faq { margin-top: 1rem; }
.lp-faq details { border: 1px solid var(--lp-border); border-radius: 14px; padding: 0.2rem 1.1rem; margin-bottom: 0.7rem; background: #fff; }
.lp-faq summary { cursor: pointer; font-weight: 700; color: var(--lp-ink); padding: 0.85rem 0; list-style: none; position: relative; padding-right: 1.6rem; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: '+'; position: absolute; right: 0; top: 0.75rem; color: var(--lp-primary); font-size: 1.3rem; font-weight: 700; }
.lp-faq details[open] summary::after { content: '–'; }
.lp-faq details p { margin: 0 0 0.9rem; }

/* Related posts + index cards */
.lp-related { max-width: 1000px; margin: 0 auto; padding: 1rem 1.5rem 1rem; }
.lp-related h2 { font-size: 1.3rem; font-weight: 800; text-align: center; margin-bottom: 1.4rem; }
.lp-post-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.3rem; }
.lp-post-card {
  display: flex; flex-direction: column; background: var(--lp-card); border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius); padding: 1.6rem; transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.lp-post-card:hover { transform: translateY(-5px); box-shadow: var(--lp-shadow); }
.lp-post-card .lp-kicker { font-size: 0.74rem; margin-bottom: 0.6rem; }
.lp-post-card h3 { font-size: 1.12rem; font-weight: 700; color: var(--lp-ink); line-height: 1.3; }
.lp-post-card p { font-size: 0.94rem; margin: 0 0 1rem; flex: 1; }
.lp-post-card .lp-read { font-size: 0.85rem; font-weight: 700; color: var(--lp-primary); }

@media (max-width: 600px) {
  .lp-blog-hero { padding: 3rem 1rem 2rem; }
  .lp-article { padding: 0.5rem 1rem 1.5rem; }
  .lp-article p, .lp-article li { font-size: 1rem; }
}

/* plain blog list */
.lp-blog-hero { text-align: left; max-width: 760px; margin: 0 auto; padding: 3.2rem 1.5rem 1rem; }
.lp-blog-hero h1 { margin: 0 0 0.8rem; font-size: clamp(1.9rem, 4vw, 2.6rem); }
.lp-blog-hero .lp-hero-sub { margin: 0; text-align: left; }
.lp-blog-meta { justify-content: flex-start; }
.lp-post-item { padding: 1.6rem 0; border-bottom: 1px solid var(--lp-border); }
.lp-post-item h2 { font-size: 1.35rem; margin: 0.3rem 0 0.5rem; }
.lp-post-item h2 a { color: var(--lp-ink); text-decoration: none; }
.lp-post-item h2 a:hover { color: var(--lp-primary); }
.lp-post-item p { margin: 0; }
.lp-post-meta { font-size: 0.85rem; color: var(--lp-muted); font-weight: 600; }
.lp-related { max-width: 760px; }
.lp-related h2 { text-align: left; }
.lp-more { padding-left: 1.2rem; }
.lp-more li { margin-bottom: 0.5rem; line-height: 1.5; }
.lp .lp-blog-note { max-width: 760px; margin: 1rem auto 2rem; padding: 1rem 1.5rem 0; border-top: 1px solid var(--lp-border); font-size: 0.92rem; color: var(--lp-muted); }

/* Cover image under the meta line (the same PNG is the post's og:image). */
.lp-blog-cover { display: block; width: 100%; max-width: 760px; height: auto; margin: 1.4rem 0 1.2rem; border: 1px solid var(--lp-border); border-radius: 14px; }