/* ============================================================
   Subalytics — Mongo-backed blog article page (blog_article.html,
   app/database/db_blog.py). Reuses header.html / footer.html and
   v4c-console.css (.eyebrow, .dh, .b-btn, palette). Loads after
   v4c-console.css. 60-30-10: white/grey dominant, blue accent,
   navy small touches.
   ============================================================ */

.art-header { background: var(--gray-band); padding: 56px 0 44px; }
.art-header .wrap { max-width: 760px; }
.art-category { display: inline-block; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--blue); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; margin-bottom: 18px; }
.art-header h1 { font-family: var(--serif); font-weight: 700; font-size: 42px; line-height: 1.12; letter-spacing: -.4px; margin: 0 0 16px; color: var(--ink); }
.art-dek { font-size: 18px; line-height: 1.6; color: #555; margin: 0 0 26px; }
.art-meta-text { font-size: 13.5px; color: #666; line-height: 1.4; }
.art-meta-text .sep { margin: 0 6px; }

.art-body-sec { background: #fff; padding: 48px 0 8px; }
.art-body { max-width: 680px; margin: 0 auto; font-size: 17px; line-height: 1.75; color: #333; }
.art-body p { margin: 0 0 22px; }
.art-body h2 { font-family: var(--serif); font-weight: 700; font-size: 27px; color: var(--ink); margin: 40px 0 16px; letter-spacing: -.2px; }
.art-body ul, .art-body ol { margin: 0 0 22px; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.art-body li { padding-left: 4px; }
.art-body b { color: var(--ink); }
.art-body a:not(.b-btn) { color: var(--blue); }
.art-body a:not(.b-btn):hover { color: var(--blue-deep); }
.art-body .b-btn { margin: 8px 0 22px; }

/* image blocks — shows a real screenshot once section.image.src is set,
   otherwise a labeled placeholder box naming what belongs there. */
.art-figure { margin: 30px 0; }
.art-img-slot { display: flex; align-items: center; justify-content: center; text-align: center; width: 100%; border-radius: 12px; background: var(--gray-band); border: 1px dashed var(--line); overflow: hidden; }
.art-img-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.art-img-slot-label { font-size: 13px; color: #888; padding: 24px; }
.art-figure figcaption { font-size: 13px; color: #888; text-align: center; margin-top: 10px; }

.art-nl { background: var(--blue); color: #fff; padding: 56px 0; margin-top: 24px; }
.art-nl .wrap { max-width: 680px; text-align: center; }
.art-nl h3 { font-family: var(--serif); font-weight: 700; font-size: 26px; margin: 0 0 10px; }
.art-nl p { font-size: 15px; color: rgba(255,255,255,.85); margin: 0 0 22px; }
.art-nl form { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.art-nl input { font-family: var(--sans); font-size: 14.5px; padding: 12px 16px; border-radius: 4px; border: 1px solid rgba(255,255,255,.3); min-width: 260px; background: rgba(255,255,255,.1); color: #fff; }
.art-nl input::placeholder { color: rgba(255,255,255,.65); }
.art-nl button { font-family: var(--sans); font-size: 14.5px; font-weight: 700; padding: 12px 22px; border-radius: 4px; border: 1px solid #fff; background: #fff; color: var(--blue); cursor: pointer; }
.art-nl button:hover { background: #e9ebf7; }
.nl-status { font-size: 13px; color: rgba(255,255,255,.85); margin: 14px 0 0; min-height: 16px; }

.art-related { background: var(--gray-band); padding: 64px 0 70px; }
.art-related .wrap { max-width: 900px; }
.rel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 28px; }
.rel-card { display: block; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 22px 22px 24px; text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.rel-card:hover { border-color: var(--navy-bar); box-shadow: 0 12px 26px rgba(13,11,51,.08); }
.rel-cat { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--blue); margin-bottom: 10px; }
.rel-card h3 { font-family: var(--serif); font-weight: 700; font-size: 18px; line-height: 1.35; color: var(--ink); margin: 0; }

/* FAQ */
.art-faq { margin: 8px 0 32px; display: flex; flex-direction: column; gap: 10px; }
.art-faq .faq-item { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.art-faq .faq-q { width: 100%; text-align: left; background: var(--gray-band); border: none; padding: 16px 20px; font-family: var(--sans); font-size: 15px; font-weight: 700; color: var(--ink); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.art-faq .faq-q[aria-expanded="true"] { color: var(--blue); }
.art-faq .faq-ic { font-size: 18px; color: var(--blue); flex-shrink: 0; }
.art-faq .faq-a { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.art-faq .faq-a p { margin: 0; padding: 0 20px 16px; font-size: 14.5px; line-height: 1.6; color: #555; }

@media (max-width: 700px) {
  .art-header h1 { font-size: 32px; }
  .art-body { font-size: 16px; }
}