/* ============================================================
   blog-article.css  v9
   Polished, light, article-grade typography for /blog and /blog/<slug>
   Public (logged-out) and auth views both use the SAME light look.
   ============================================================ */

/* ====== Public shell (logged-out users) — light, clean ====== */
.blog-public-shell{
  background:
    radial-gradient(900px 380px at 50% -120px, rgba(99,102,241,.10), transparent 70%),
    linear-gradient(180deg, #f8fafc 0%, #ffffff 60%);
  min-height: 100vh;
  padding: 90px 0 60px;
}
.blog-public-shell .container-fluid{ max-width: 980px; margin: 0 auto; padding: 0 16px; }

/* ====== Breadcrumb ====== */
.blog-breadcrumb{
  max-width: 820px; margin: 0 auto 14px; padding: 0 4px;
  font-size: .82rem; color:#64748b; display:flex; gap:8px; align-items:center; flex-wrap:wrap;
}
.blog-breadcrumb a{ color:#4f46e5; text-decoration:none; font-weight:600; }
.blog-breadcrumb a:hover{ text-decoration:underline; }
.blog-breadcrumb .current{ color:#0f172a; font-weight:600; }

/* ====== Hero ====== */
.blog-wrapper{ max-width: 820px; margin: 0 auto; }
.blog-hero{ margin: 12px 0 14px; text-align:left; }
.blog-hero .blog-hero-meta{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.74rem; font-weight:700; letter-spacing:.7px; text-transform:uppercase;
  color:#4f46e5; background:rgba(99,102,241,.10);
  padding:6px 12px; border-radius:99px; margin-bottom:14px;
}
.blog-hero h1.blog-title{
  font-size: clamp(1.85rem, 3.6vw, 2.6rem);
  line-height: 1.18; font-weight: 800;
  margin: 0 0 12px; letter-spacing:-.6px; color:#0f172a;
}
.blog-hero-row{ display:flex; gap:18px; flex-wrap:wrap; color:#64748b; font-size:.88rem; margin-bottom:18px; }
.blog-hero-row .bhr-item{ display:inline-flex; align-items:center; gap:6px; }
.blog-hero-row .bhr-item i{ color:#6366f1; }
.blog-hero .blog-cover{
  display:block; width:100%; max-height:420px; object-fit:cover;
  border-radius:16px; margin:8px 0 4px;
  box-shadow: 0 12px 36px rgba(15,23,42,.12);
}


/* ====== Article body (light) ====== */
.blog-article{
  max-width: 820px; margin: 8px auto 28px;
  padding: 32px 36px;
  background: #ffffff;
  border: 1px solid rgba(15,23,42,.06);
  border-radius: 18px;
  box-shadow: 0 8px 30px rgba(15,23,42,.06);
  color: #1f2937;
  font-size: 17px; line-height: 1.8;
  word-wrap: break-word;
}
.blog-article > *:first-child{ margin-top: 0; }
.blog-article > *:last-child{ margin-bottom: 0; }

.blog-article h1,
.blog-article h2,
.blog-article h3,
.blog-article h4,
.blog-article h5,
.blog-article h6{
  color:#0f172a; font-weight:700; line-height:1.3;
  margin: 1.7em 0 .55em; scroll-margin-top: 90px; letter-spacing:-.01em;
}
.blog-article h1{ font-size: 1.9rem; }
.blog-article h2{
  font-size: 1.55rem; padding-bottom:.35em;
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg,#6366f1,rgba(99,102,241,0)) 1;
}
.blog-article h3{
  font-size: 1.22rem; color:#1e293b;
  position:relative; padding-left:14px;
}
.blog-article h3::before{
  content:""; position:absolute; left:0; top:.55em;
  width:6px; height:6px; border-radius:50%; background:#6366f1;
}
.blog-article h4{ font-size: 1.06rem; }
.blog-article h5{ font-size: .98rem; text-transform:uppercase; letter-spacing:.04em; }
.blog-article h6{ font-size: .9rem; color:#475569; text-transform:uppercase; letter-spacing:.5px; }

.blog-article p{ margin: 0 0 1.1em; color:#1f2937; }
.blog-article p:first-of-type{ font-size: 1.07rem; color:#334155; }

.blog-article a{
  color:#4f46e5; text-decoration: underline;
  text-decoration-color: rgba(79,70,229,.35);
  text-underline-offset: 3px; word-break: break-word;
  transition: color .15s, text-decoration-color .15s;
}
.blog-article a:hover{ color:#3730a3; text-decoration-color:#3730a3; }

.blog-article img{
  display:block; max-width:100%; height:auto;
  border-radius:12px; margin:1.4em auto;
  box-shadow:0 6px 20px rgba(15,23,42,.10);
}

.blog-article ul, .blog-article ol{ margin: .4em 0 1.2em; padding-left: 1.55em; }
.blog-article li{ margin: .3em 0; }
.blog-article ul li::marker{ color:#6366f1; }
.blog-article ol li::marker{ color:#6366f1; font-weight:700; }

.blog-article blockquote{
  margin: 1.3em 0; padding: .85em 1.15em;
  border-left: 4px solid #6366f1;
  background: rgba(99,102,241,.06);
  color:#334155; font-style: italic;
  border-radius: 0 10px 10px 0;
}

.blog-article code{
  background: rgba(15,23,42,.06);
  padding: .15em .45em; border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em; color:#be185d;
}
.blog-article pre{
  background:#0f172a; color:#e2e8f0;
  padding:14px 16px; border-radius:10px;
  overflow-x:auto; line-height:1.55; margin: 1.2em 0;
}
.blog-article pre code{ background:transparent; color:inherit; padding:0; }

.blog-article hr{
  border:0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(15,23,42,.18), transparent);
  margin: 2em 0;
}

.blog-article table{
  width:100%; border-collapse: collapse; margin:1.2em 0; font-size:.94rem;
}
.blog-article th, .blog-article td{
  border:1px solid rgba(15,23,42,.10); padding: 9px 12px; text-align:left;
}
.blog-article thead th{ background: rgba(99,102,241,.08); color:#1e293b; }
.blog-article tbody tr:nth-child(even){ background: rgba(15,23,42,.02); }

.blog-article strong{ color:#0f172a; font-weight:700; }
.blog-article em{ color:#334155; }

/* Back-button bar */
.blog-back-bar{ max-width:820px; margin: 6px auto 40px; padding: 0 4px; }
.blog-back-bar .blog-back-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding: 10px 18px; border-radius:10px;
  background:#ffffff; color:#4f46e5;
  border:1px solid rgba(79,70,229,.25);
  font-weight:600; font-size:.92rem; text-decoration:none;
  transition: all .15s;
}
.blog-back-bar .blog-back-btn:hover{
  background:#4f46e5; color:#fff; border-color:#4f46e5;
  transform: translateX(-2px);
}

/* ====== Blog index hero + cards ====== */
.blog-index-hero{ max-width: 820px; margin: 0 auto 24px; text-align:center; }
.blog-index-title{
  font-size: clamp(1.8rem,3.2vw,2.4rem); font-weight:800;
  margin: 12px 0 8px; color:#0f172a; letter-spacing:-.5px;
}
.blog-index-sub{ color:#64748b; font-size:1rem; margin:0; }

.blog-list{
  max-width: 1080px; margin: 24px auto; padding: 0 4px;
  display:grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap:22px;
}
.blog-card{
  background:#fff; border:1px solid rgba(15,23,42,.08);
  border-radius:14px; overflow:hidden;
  display:flex; flex-direction:column;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.blog-card:hover{ transform:translateY(-3px); box-shadow:0 14px 32px rgba(15,23,42,.10); border-color:rgba(99,102,241,.30); }
.blog-card .blog-card-img{ width:100%; aspect-ratio: 16/9; object-fit:cover; display:block; background:#f1f5f9; }
.blog-card .blog-card-body{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.blog-card .blog-card-date{ font-size:.74rem; color:#64748b; font-weight:600; letter-spacing:.4px; text-transform:uppercase; }
.blog-card h2.blog-card-title,
.blog-card h3.blog-card-title{
  margin:0; font-size:1.08rem; line-height:1.35; color:#0f172a; font-weight:700;
}
.blog-card h2.blog-card-title a,
.blog-card h3.blog-card-title a{ color:inherit; text-decoration:none; }
.blog-card h2.blog-card-title a:hover,
.blog-card h3.blog-card-title a:hover{ color:#4f46e5; }
.blog-card .blog-card-excerpt{ color:#475569; font-size:.9rem; line-height:1.6; margin:0; flex:1; }
.blog-card .blog-card-more{
  display:inline-flex; align-items:center; gap:6px;
  align-self:flex-start; margin-top:6px;
  color:#4f46e5; font-weight:600; font-size:.88rem; text-decoration:none;
}
.blog-card .blog-card-more:hover{ color:#3730a3; text-decoration:underline; }

/* ====== Dark mode — ONLY for logged-in users in dark theme ====== */
body.dark .app-content .blog-article{
  background: rgba(20,22,40,.88); border-color: rgba(255,255,255,.10);
  color: #e2e8f0; box-shadow: 0 8px 30px rgba(0,0,0,.35);
}
body.dark .app-content .blog-article h1,
body.dark .app-content .blog-article h2,
body.dark .app-content .blog-article h3,
body.dark .app-content .blog-article h4{ color:#f8fafc; }
body.dark .app-content .blog-article p{ color:#cbd5e1; }
body.dark .app-content .blog-article p:first-of-type{ color:#e2e8f0; }
body.dark .app-content .blog-article a{ color:#a5b4fc; text-decoration-color:rgba(165,180,252,.45); }
body.dark .app-content .blog-article strong{ color:#f1f5f9; }
body.dark .app-content .blog-article code{ background:rgba(255,255,255,.08); color:#fbcfe8; }
body.dark .app-content .blog-article blockquote{ background: rgba(99,102,241,.10); color:#cbd5e1; }
body.dark .app-content .blog-hero h1.blog-title{ color:#f8fafc; }
body.dark .app-content .blog-hero-row{ color:#94a3b8; }
body.dark .app-content .blog-card{ background: rgba(20,22,40,.85); border-color: rgba(255,255,255,.10); }
body.dark .app-content .blog-card h2.blog-card-title,
body.dark .app-content .blog-card h3.blog-card-title{ color:#f1f5f9; }
body.dark .app-content .blog-card .blog-card-excerpt{ color:#94a3b8; }

/* The public (logged-out) shell is ALWAYS light — never inherit dark. */
.blog-public-shell, .blog-public-shell *{ color-scheme: light; }

@media (max-width: 640px){
  .blog-public-shell{ padding: 70px 0 40px; }
  .blog-article{ padding: 22px 18px; border-radius:14px; font-size: 16px; }
  .blog-hero h1.blog-title{ font-size: 1.6rem; }
  .blog-article h1{ font-size: 1.55rem; }
  .blog-article h2{ font-size: 1.32rem; }
  .blog-article h3{ font-size: 1.14rem; }
}