/* blog.css - Modern styles for blog.php */
/* Drop this file in the same folder as blog.php (or adjust the link). */

:root{
  --bg: #ffffff;
  --accent: #00b8c6;
  --accent-2: #1f6fff;
  --muted: #6b7280;
  --card-shadow: 0 10px 30px rgba(27, 39, 69, 0.06);
  --radius: 12px;
  --max-width: 1180px;
  --glass: rgba(255,255,255,0.6);
}

*{box-sizing:border-box}
body{
  font-family: "Poppins", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg, #f7fbff 0%, #ffffff 60%);
  color:#0f1724;
  margin:0;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Navbar */
.navbar-modern{
  border-bottom: 1px solid rgba(15,23,36,0.06);
  backdrop-filter: blur(6px);
}
.navbar-modern .brand-text{
  font-weight:600;
  color: #0f1724;
  letter-spacing: 0.2px;
}
.navbar-modern .nav-link{
  color: #334155;
  margin-left: .5rem;
  font-weight:600;
}
.navbar-modern .nav-link.active{
  color: var(--accent-2);
  position:relative;
}
.navbar-modern .nav-link.active::after{
  content: "";
  height:3px;
  width:36px;
  background: linear-gradient(90deg,var(--accent),var(--accent-2));
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-12px;
  border-radius:3px;
}

/* Hero */
.blog-hero{
  padding: 4.5rem 0 3rem;
  background: linear-gradient(90deg, rgba(31,111,255,0.06), rgba(0,184,198,0.04));
  text-align:center;
  margin-bottom: 2rem;
  border-bottom: 1px solid rgba(15,23,36,0.03);
}
.blog-hero h1{ color: #0b3bff; letter-spacing: -0.5px; font-size:2.25rem; }
.blog-hero p { color: var(--muted); margin-bottom: 1.25rem; }

/* Cards grid */
.container{ max-width: var(--max-width); }
.blog-card{
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .28s cubic-bezier(.2,.9,.3,1), box-shadow .28s;
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.98));
  box-shadow: var(--card-shadow);
  height:100%;
}
.blog-card:hover{ transform: translateY(-8px); box-shadow: 0 18px 45px rgba(15,23,36,0.08); }

.card-media{ position: relative; height: 210px; overflow:hidden; background:linear-gradient(180deg, rgba(15,23,36,0.02), rgba(15,23,36,0.01)); }
.media-img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .6s ease; }
.blog-card:hover .media-img{ transform: scale(1.06); }
.media-placeholder{ height:100%; display:flex; align-items:center; justify-content:center; color:var(--muted); font-weight:600; }

/* Card body */
.card-body{ padding: 1.35rem; display:flex; flex-direction:column; }
.card-title{ margin-bottom: .5rem; color:#07203b; font-size:1.05rem; }
.card-text{ color: #475569; flex:0 0 auto; }

/* Avatar / meta */
.avatar{
  width:36px; height:36px; border-radius:50%; object-fit:cover; border:2px solid #fff; box-shadow: 0 2px 6px rgba(15,23,36,0.08);
}
.avatar-initial{
  width:36px; height:36px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; font-weight:700;
}

/* Read button & meta */
.btn-outline-primary{
  border-width: 2px;
  padding-left: 1rem; padding-right: 1rem;
  color: var(--accent-2);
  border-color: rgba(31,111,255,0.14);
  background: transparent;
}
.btn-outline-primary:hover{
  color:#fff;
  background: linear-gradient(90deg,var(--accent),var(--accent-2));
  border-color: transparent;
  box-shadow: 0 8px 24px rgba(31,111,255,0.12);
}
.read-time{ color: var(--muted); }

/* Single post */
.single-post { max-width: 820px; margin: 0 auto; }
.post-hero img { width:100%; height:auto; border-radius: 12px; box-shadow: 0 12px 30px rgba(2,6,23,0.06); }
.post-body{ margin-top: 1.25rem; color: #334155; line-height:1.85; }
.post-body h2{ margin-top:1.2rem; margin-bottom:.5rem; color:#07203b; }
.post-body ul, .post-body ol{ margin-left:1.05rem; }

/* Footer */
.site-footer{ margin-top: 3rem; color:var(--muted); }

/* Responsive */
@media (max-width: 991px){
  .card-media{ height:180px; }
  .blog-hero h1{ font-size:1.85rem; }
}
@media (max-width: 767px){
  .card-media{ height:150px; }
  .media-img{ transform:none !important; }
  .blog-hero{ padding: 3rem 0 2rem; }
}