/* ============ Bytes Fusion Journal — blog styles ============ */

/* ---------- Post cards (index) ---------- */
.post-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(330px, 1fr)); gap:20px; }
.post{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:26px 28px 24px; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.post:hover{ transform:translateY(-5px); border-color:var(--accent); box-shadow:0 26px 54px -32px rgba(0,0,0,.65); }
.post-meta{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.post-meta b{ font-size:.72rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--accent); }
.post-meta span{ font-size:.78rem; color:var(--muted-2); white-space:nowrap; }
.post h3{ font-family:var(--font-display); font-size:1.16rem; font-weight:600; letter-spacing:-.02em; line-height:1.35; margin:16px 0 10px; }
.post p{ font-size:.92rem; line-height:1.65; color:var(--muted); margin:0 0 4px; flex:1; }
.post .link-arrow{ margin-top:16px; font-size:.88rem; }

/* ---------- Article hero ---------- */
.art-hero{ position:relative; padding:clamp(48px,6vw,84px) 0 clamp(8px,2vw,20px); overflow:hidden; text-align:left; }
.art-hero .aurora, .art-hero .grid-bg{ position:absolute; inset:0; pointer-events:none; }
.art-hero .container{ position:relative; }
.art-hero .crumbs{ justify-content:flex-start; margin-bottom:22px; }
.art-cat{ display:inline-block; font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); background:var(--brand-soft); border:1px solid var(--brand-line); border-radius:999px; padding:5px 13px; margin-bottom:18px; }
.art-hero h1{ font-family:var(--font-display); font-size:clamp(1.85rem, 3.6vw, 2.7rem); font-weight:600; letter-spacing:-.03em; line-height:1.16; margin:0 0 16px; max-width:900px; text-align:left; }
.art-dek{ font-size:1.04rem; line-height:1.72; color:var(--muted); max-width:780px; margin:0 0 16px; text-align:left; }
.art-meta{ font-size:.83rem; color:var(--muted-2); }
.art-meta b{ color:var(--muted); font-weight:500; }

/* ---------- Article body ---------- */
.art-body{ max-width:760px; margin:0 auto; padding-top:34px; }
.art-body h2{ font-family:var(--font-display); font-size:1.42rem; font-weight:600; letter-spacing:-.02em; line-height:1.3; margin:46px 0 14px; }
.art-body h3{ font-family:var(--font-display); font-size:1.06rem; font-weight:600; letter-spacing:-.01em; margin:32px 0 10px; }
.art-body p{ font-size:.99rem; line-height:1.8; margin:0 0 18px; color:var(--text); }
.art-body p b{ color:#fff; font-weight:600; }
.art-body p i{ color:var(--muted); font-style:italic; }
.art-body ul{ list-style:none; margin:0 0 22px; padding:0; display:grid; gap:13px; }
.art-body ul li{ position:relative; padding-left:24px; font-size:.96rem; line-height:1.7; color:var(--muted); }
.art-body ul li::before{ content:""; position:absolute; left:2px; top:.62em; width:7px; height:7px; border-radius:50%; background:var(--accent); }
.art-body ul li b{ color:var(--text); font-weight:600; }
.art-body blockquote{ margin:28px 0; padding:20px 24px; background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:0 14px 14px 0; }
.art-body blockquote p{ margin:0; font-size:.97rem; line-height:1.75; color:var(--muted); }
.art-body .art-take{ background:var(--brand-soft); border:1px solid var(--brand-line); border-radius:14px; padding:18px 22px; margin:30px 0 8px; }
.art-body .art-take b{ color:#fff; }
.art-body a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }

/* ---------- Keep reading ---------- */
.keep-label{ font-family:var(--font-display); font-size:1.02rem; font-weight:600; letter-spacing:-.01em; margin:0 0 18px; color:var(--muted); }
.keep-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:18px; }
.keep{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:22px 24px; transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.keep:hover{ transform:translateY(-4px); border-color:var(--accent); box-shadow:0 22px 46px -30px rgba(0,0,0,.6); }
.keep .post-meta{ margin-bottom:12px; }
.keep h4{ font-family:var(--font-display); font-size:1rem; font-weight:600; letter-spacing:-.01em; line-height:1.4; margin:0 0 8px; }
.keep p{ font-size:.86rem; line-height:1.6; color:var(--muted); margin:0; flex:1; }
.keep .link-arrow{ margin-top:14px; font-size:.84rem; }

/* ---------- Responsive ---------- */
@media (max-width:760px){
  .art-hero h1{ font-size:1.7rem; }
  .art-body{ padding-top:24px; }
  .art-body h2{ font-size:1.24rem; margin-top:36px; }
  .post-grid{ grid-template-columns:1fr; }
}