/* ======================================================
   BLOG PAGE – PROFESSIONAL SYSTEM
   Hero | Featured | Library | Reader UX
   Author: Amit Ku Yadav
====================================================== */


/* ======================================================
   PAGE WRAPPER
====================================================== */

.blog-page {
  position: relative;
  overflow-x: hidden;
}


/* ======================================================
   HERO SECTION
====================================================== */

.blog-hero {
  padding: 200px 8% 150px;
  position: relative;
}

.blog-hero .hero-content {
  max-width: 820px;

  opacity: 0;
  transform: translateY(40px);
  animation: blogHeroReveal .8s ease forwards;
}


/* ======================================================
   HERO TYPOGRAPHY
====================================================== */

.blog-hero h1 {
  font-size: clamp(3rem, 6vw, 4.4rem);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -1.8px;
  margin-bottom: 28px;
}

.blog-hero .hero-description {
  max-width: 650px;
  font-size: 1.05rem;
  line-height: 1.7;
  opacity: .85;
  margin-bottom: 36px;
}


/* ======================================================
   HERO GLOW
====================================================== */

.blog-hero::before {
  content: "";
  position: absolute;

  top: -260px;
  left: -220px;

  width: 720px;
  height: 720px;

  background: radial-gradient(
    circle,
    rgba(4,106,56,.2),
    transparent 70%
  );

  filter: blur(120px);
  z-index: -1;
}


/* ======================================================
   HERO BUTTONS
====================================================== */

.hero-actions {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.hero-btn {
  padding: 14px 32px;
  border-radius: 999px;

  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: 1px;

  text-decoration: none;

  transition: all .3s ease;
}


/* Primary */

.hero-btn.primary {
  background: linear-gradient(
    135deg,
    var(--brand-green),
    var(--brand-orange)
  );
  color: #fff;
}

.hero-btn.primary:hover {
  transform: translateY(-4px);
  box-shadow:
  0 12px 30px rgba(4,106,56,.25),
  0 8px 20px rgba(255,103,31,.25);
}


/* Secondary */

.hero-btn.secondary {
  background: transparent;
  border: 1px solid var(--brand-green);
  color: var(--brand-green);
}

.hero-btn.secondary:hover {
  background: var(--brand-green);
  color: #fff;
  transform: translateY(-4px);
}


/* ======================================================
   FEATURED BLOG GRID
====================================================== */

.blog-grid {

  padding: 0 8% 140px;

  display: grid;
  grid-template-columns:
  repeat(auto-fit,minmax(320px,1fr));

  gap: 50px;
}


/* ======================================================
   BLOG CARD
====================================================== */

.blog-card {

  border-radius: 26px;
  overflow: hidden;

  background:
  linear-gradient(
  180deg,
  rgba(255,255,255,.02),
  rgba(255,255,255,.01)
  );

  backdrop-filter: blur(6px);

  border: 1px solid rgba(255,255,255,.05);

  transition:
  transform .35s ease,
  box-shadow .35s ease;
}

.blog-card:hover {

  transform: translateY(-10px);

  box-shadow:
  0 25px 60px rgba(0,0,0,.45);

}


/* Blog Image */

.blog-card img {

  width: 100%;
  height: 200px;

  object-fit: cover;

}


/* Card Content */

.blog-card-content {
  padding: 40px;
}


/* Category */

.blog-meta {

  font-size: .7rem;
  letter-spacing: 2px;
  text-transform: uppercase;

  color: var(--brand-green);

  margin-bottom: 14px;
  display: inline-block;
}


/* Title */

.blog-card h2 {

  font-size: 1.55rem;
  margin-bottom: 14px;
}


/* Description */

.blog-card p {

  opacity: .85;
  line-height: 1.7;
  margin-bottom: 20px;

}


/* Read More */

.read-more {

  font-size: .8rem;
  font-weight: 600;

  color: var(--brand-green);
  text-decoration: none;

}

.read-more:hover {
  text-decoration: underline;
}


/* ======================================================
   BLOG LIBRARY
====================================================== */

.blog-library {

  padding: 170px 8% 160px;
  border-top: 1px solid rgba(255,255,255,.06);

}


/* Library Intro */

.blog-library .page-intro {

  text-align: center;
  margin-bottom: 90px;

}

.blog-library .page-intro h2 {

  font-size: 2.5rem;
  margin-bottom: 18px;

}

.blog-library .page-intro p {

  max-width: 600px;
  margin: auto;
  opacity: .85;

}


/* ======================================================
   LIBRARY GRID
====================================================== */

.blog-library-grid {

  display: grid;

  grid-template-columns:
  repeat(auto-fit,minmax(300px,1fr));

  gap: 50px;

}


/* Library Cards */

.blog-library-item {

  padding: 46px 38px;
  border-radius: 26px;

  background:
  linear-gradient(
  180deg,
  rgba(255,255,255,.02),
  rgba(255,255,255,.01)
  );

  border: 1px solid rgba(255,255,255,.05);

  transition:
  transform .35s ease,
  box-shadow .35s ease;

}

.blog-library-item:hover {

  transform: translateY(-10px);

  box-shadow:
  0 25px 60px rgba(0,0,0,.4);

}


/* Library Content */

.blog-library-item h3 {

  font-size: 1.35rem;
  margin-bottom: 12px;

}

.blog-library-item p {

  line-height: 1.75;
  opacity: .85;
  margin-bottom: 18px;

}


/* ======================================================
   HERO ANIMATION
====================================================== */

@keyframes blogHeroReveal {

  from {
    opacity: 0;
    transform: translateY(40px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}


/* ======================================================
   RESPONSIVE
====================================================== */

@media (max-width:1024px){

.blog-hero{
padding:170px 6% 120px;
}

.blog-grid{
gap:40px;
}

}


/* Tablet */

@media (max-width:768px){

.blog-hero{
padding:140px 6% 100px;
}

.blog-hero h1{
font-size:2.6rem;
}

.hero-actions{
flex-direction:column;
align-items:flex-start;
}

.blog-grid{
padding:0 6% 100px;
gap:35px;
}

.blog-library{
padding:130px 6%;
}

.blog-library-grid{
gap:35px;
}

}


/* Mobile */

@media (max-width:480px){

.blog-hero h1{
font-size:2rem;
}

.blog-card-content{
padding:28px;
}

.blog-library-item{
padding:30px;
}

}