/* ==== Blog Page Unique Design ==== */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600&display=swap');

body { font-family: 'Outfit', sans-serif; }

/* Hero with distinct gradient */
.blogs-hero {
  padding: 3rem 1rem;
  background: linear-gradient(135deg, #e0f7fa, #b2ebf2);
  border-bottom: 1px solid var(--line, #eef4fb);
}

.blogs-hero .hero-inner { max-width: 1100px; margin: 0 auto; }
.blogs-hero h1 { color: #006064; font-size: 2.2rem; }
.blogs-hero p { color: #004d40; }

/* Glass‑morphism blog cards */
.blog-card {
  background: rgba(255,255,255,0.65);
  border-radius: var(--r-lg, 16px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.2);
  transition: transform .2s ease, box-shadow .2s ease;
}
.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}

.read-more {
  background: var(--brand, #006064);
  color: #fff;
  border-radius: 8px;
  padding: 0.45rem 0.75rem;
  text-decoration: none;
  font-weight: 600;
  transition: background .18s;
}
.read-more:hover { background: #004d40; }

.social-share a { color: var(--brand, #006064); }
.social-share a:hover { color: #00838f; }
.social-share svg { width: 20px; height: 20px; }

/* Mobile Responsiveness Improvements */
@media (max-width: 768px) {
  .blogs-hero {
    padding: 2rem 1rem;
    text-align: center;
  }
  .blogs-hero h1 {
    font-size: 1.8rem;
  }
  .blog-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 0 0.5rem;
  }
  .blog-card {
    min-height: auto;
  }
  .blog-thumb {
    height: 200px;
  }
  .blog-body {
    padding: 1.25rem 1rem;
  }
  .social-share {
    flex-wrap: wrap;
    gap: 0.75rem;
  }
}

/* ==== Blog Detail Page Styling ==== */
.post-hero {
  padding: 3.5rem 1rem;
  background: linear-gradient(135deg, #e0f7fa, #b2ebf2) !important;
  border-bottom: 1px solid var(--line, #eef4fb);
}
.post-hero h1 {
  color: #006064 !important;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.25;
}
.post-meta {
  color: #004d40 !important;
  font-size: 0.95rem;
}
.post-content {
  background: rgba(255,255,255,0.65) !important;
  border-radius: var(--r-lg, 16px) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.08) !important;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.2) !important;
  padding: 2rem !important;
}
.sidebar-widget {
  background: rgba(255,255,255,0.65) !important;
  border-radius: var(--r-lg, 16px) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.08) !important;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.2) !important;
  padding: 1.5rem !important;
}
.sidebar-widget h3 {
  color: #006064 !important;
  border-bottom: 1px solid rgba(0, 96, 100, 0.1) !important;
  padding-bottom: 0.5rem;
}

/* Mobile responsive overrides for blog detail */
@media (max-width: 850px) {
  .blog-layout {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    padding: 0 0.5rem !important;
  }
}
@media (max-width: 768px) {
  .post-hero {
    padding: 2rem 1rem !important;
    text-align: center;
  }
  .post-hero h1 {
    font-size: 1.8rem !important;
  }
  .post-content {
    padding: 1.25rem 1rem !important;
  }
}