/* ============================
   style.css — Modern Blog
   ============================ */
:root{
  --bg: #000000;            /* background black */
  --card: #0a0a0a;          /* card dark black */
  --muted: #88c057;         /* muted text green */
  --accent: #32cd32;        /* bright green accent */
  --glass: rgba(50,205,50,0.05);   /* greenish glass */
  --glass-2: rgba(50,205,50,0.02); /* secondary glass */
  --radius: 14px;
  color-scheme: dark;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

*{box-sizing:border-box}
html, body {
  height: 100%;
}


body {
  margin: 0;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;

  /* background image */
  background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.3)), url('https://images.unsplash.com/photo-1450849608880-6f787542c88a'); /* <-- adjust path */
  background-size: cover;        /* fill screen */
  background-position: center;   /* center the image */
  background-repeat: no-repeat;  /* no tiling */
  background-attachment: fixed;

  color: #c0ffc0;
}



/* HEADER */
header{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,var(--accent),#00c6ff);display:grid;place-items:center;font-weight:800;color:#061426;box-shadow:0 6px 20px rgba(124,92,255,0.18)}
.title{font-size:18px;font-weight:700}
.subtitle{font-size:13px;color:var(--muted);margin-top:2px}

.controls{display:flex;align-items:center;gap:12px}
.search{background:var(--glass);border:1px solid var(--glass-2);padding:10px 14px;border-radius:12px;display:flex;gap:8px;align-items:center;min-width:220px;backdrop-filter: blur(6px)}
.search input{background:transparent;border:0;outline:none;color:inherit;font-size:14px}

.btn{background:linear-gradient(90deg,var(--accent),#00c6ff);border:0;padding:10px 14px;border-radius:12px;color:#061426;font-weight:700;cursor:pointer;box-shadow:0 8px 30px rgba(124,92,255,0.15);transition:transform .18s ease}
.btn:active{transform:translateY(1px)}

/* MAIN LAYOUT */
main{display:grid;grid-template-columns:1fr 360px;gap:28px;align-items:start}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}

/* BLOG CARD */
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:var(--radius);padding:14px;box-shadow:0 10px 30px rgba(2,6,23,0.6);border:1px solid rgba(255,255,255,0.02);overflow:hidden;transition:transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s;display:flex;flex-direction:column;gap:10px;min-height:220px;position:relative}
.card:hover{transform:translateY(-8px);box-shadow:0 22px 60px rgba(2,6,23,0.8)}
.thumb{height:140px;border-radius:10px;background-size:cover;background-position:center;box-shadow:inset 0 -30px 80px rgba(0,0,0,0.35)}
.kicker{font-size:12px;color:var(--muted);font-weight:600}
h3{margin:0;font-size:18px}
p.summary{margin:0;color:var(--muted);font-size:14px;line-height:1.45}

.meta{display:flex;justify-content:space-between;align-items:center;gap:8px}
.tags{display:flex;gap:8px;flex-wrap:wrap}
.tag{font-size:12px;background:rgba(255,255,255,0.03);padding:6px 8px;border-radius:999px;border:1px solid rgba(255,255,255,0.02)}
.readrow{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto}

/* SIDEBAR */
aside{position:sticky;top:28px;padding:18px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);border:1px solid rgba(255,255,255,0.02);min-height:200px}
.profile{display:flex;gap:12px;align-items:center}
.avatar{width:64px;height:64px;border-radius:12px;background:linear-gradient(180deg,#13213a,#051023);display:grid;place-items:center;font-weight:800;color:#96b7ff}
.bio{font-size:13px;color:var(--muted)}
.divider{border:none;border-top:1px solid rgba(255,255,255,0.02);margin:14px 0}
.taglist{display:flex;gap:8px;flex-wrap:wrap}
.aside-tip{color:var(--muted);font-size:13px}

/* MODAL */
.modal-backdrop{position:fixed;inset:0;background:linear-gradient(180deg,rgba(2,6,23,0.6),rgba(2,6,23,0.85));display:none;align-items:center;justify-content:center;padding:28px;z-index:80}
.modal{width:100%;max-width:900px;background:linear-gradient(180deg,#061426,#07172b);border-radius:14px;padding:22px;border:1px solid rgba(255,255,255,0.03);box-shadow:0 40px 80px rgba(2,6,23,0.9);max-height:85vh;overflow:auto}
.modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.modal-actions{display:flex;gap:8px;align-items:center}
.modal-kicker{font-size:12px;color:var(--muted);font-weight:600}
.modal-meta{color:var(--muted);font-size:13px}
.modal-content{line-height:1.65;color:#dfefff}
.close{background:transparent;border:0;color:var(--muted);font-weight:700;cursor:pointer}

/* ANIMATIONS */
.fade-up{opacity:0;transform:translateY(10px);animation:fadeUp .6s forwards}
@keyframes fadeUp{to{opacity:1;transform:none}}

/* RESPONSIVE */
@media (max-width:980px){main{grid-template-columns:1fr}aside{order:2}}
@media (max-width:560px){body{padding:18px}.logo{width:44px;height:44px}.title{font-size:16px}}