/* ==========================================================================
   BEIRUT LEBANESE FOODS
   BLOG PAGE - PRODUCTION FINAL CSS V2
   --------------------------------------------------------------------------
   Load this file after theme-default.css, hero.css, header.css and footer.css.
   No HTML class or ID changes required.

   Structure:
   01. Root Variables
   02. Global Reset & Page Base
   03. Blog Hero Section
   04. Shared Blog Section Layout
   05. Blog Intro Section
   06. Blog Grid Background
   07. Blog Cards Grid
   08. Blog Card Images
   09. Blog Card Body
   10. Blog CTA Section
   11. Keyframes
   12. Responsive Design
   13. Reduced Motion Support
   ========================================================================== */




.blog-page-template{
  overflow:hidden;
  background:#fff;
  color:var(--blf-text);
  font-family:var(--font-body);
}

.blog-page-template img{
  max-width:100%;
  height:auto;
}

.blog-page-template .container{
  width:94%;
  max-width:1400px;
  margin:0 auto;
}


/* ==========================================================================
   03. BLOG HERO SECTION
   ========================================================================== */
.blog-hero-template{
  position:relative;
  min-height:580px;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:
linear-gradient(
    to bottom,
    rgba(0,0,0,.80) 0px,
    rgba(0,0,0,.20) 130px,
    rgba(0,0,0,.12) 180px,
    rgba(0,0,0,.12) 100%
), 
    url("../images/hero/blog-hero.webp") center/cover no-repeat;
}

.blog-hero-template::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(circle at 25% 45%,rgba(169,205,46,.10),transparent 15%),
    linear-gradient(to bottom,rgba(0,0,0,.04),rgba(0,0,0,.20));
  animation:blogHeroZoom 18s ease-in-out infinite alternate;
}

@keyframes heroZoom{
  from{transform:scale(1);}
  to{transform:scale(1.07);}
}

.blog-hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:rgba(0,0,0,.08);
}

.blog-hero-content{
  position:relative;
  z-index:2;
  max-width:860px;
  margin:0 auto;
  padding-top:90px;
  text-align:center;
  transform:translateY(10px);
}

.blog-kicker{
  display:inline-block;
  margin-bottom:20px;
  padding:8px 20px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:50px;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:12px;
  font-weight:800;
  letter-spacing:2px;
  text-transform:uppercase;
}

.blog-hero-content h1{
  margin:0 0 20px;
  color:#fff;
  font-family:var(--font-heading);
  font-size:50px;
  line-height:1.08;
  font-weight:700;
  text-shadow:0 15px 40px rgba(0,0,0,.35);
}


.blog-line{
  width:300px;
  height:3px;
  margin:0 auto 26px;
  background:var(--blf-green);
}

.blog-hero-content p{
  max-width:700px;
  margin:0 auto 30px;
  color:#eef3e3;
  font-size:17px;
  line-height:1.8;
}

.blog-hero-content .btn{
  min-height:28px;
  padding:13px 32px;
  border-radius:50px;
  background:var(--blf-green);
  color:#fff;
  font-weight:800;
  letter-spacing:1px;
  animation:floatBtn 3s ease-in-out infinite;
}

@keyframes floatBtn{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-6px);}
}

.blog-hero-content .btn:hover{
  background:#fff;
  color:#222;
}


/* ==========================================================================
   04. SHARED BLOG SECTION LAYOUT
   ========================================================================== */
.blf-section{
  position:relative;
  padding:105px 0;
}

.blf-eyebrow{
  display:inline-block;
  margin-bottom:16px;
  padding:8px 18px;
  border-radius:999px;
  background:rgba(169,205,46,.15);
  color:var(--blf-green-dark);
  font-size:13px;
  font-weight:800;
  letter-spacing:1.4px;
  text-transform:uppercase;
}


/* ==========================================================================
   05. BLOG INTRO SECTION
   ========================================================================== */
.blog-intro-section{
  padding-top:120px;
  background:var(--blf-cream);
}

.blog-intro-card{
  max-width:980px;
  margin:0 auto;
  padding:60px 70px;
  border-top:5px solid var(--blf-green);
  border-radius:10px;
  background:#fff;
  text-align:center;
  box-shadow:var(--blf-shadow);
}

.blog-intro-card h2{
  margin:0 0 16px;
  color:var(--blf-dark);
  font-family:var(--font-heading);
  font-size:48px;
  line-height:1.15;
}

.blog-intro-card p{
  margin:0;
  font-size:16px;
  line-height:1.85;
}


/* ==========================================================================
   06. BLOG GRID BACKGROUND
   ========================================================================== */
.blog-section{
  background:
    linear-gradient(rgba(255,255,255,.90),rgba(255,255,255,.90)),
    url("../images/bg-pattrens/pattren1.jpg") 0 0 repeat;
}


/* ==========================================================================
   07. BLOG CARDS GRID
   ========================================================================== */
.blog-posts-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}

.blog-post-card{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--blf-border);
  border-radius:12px;
  box-shadow:0 16px 45px rgba(0,0,0,.07);
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}

.blog-post-card:hover{
  transform:translateY(-8px);
  box-shadow:var(--blf-shadow-hover);
}

.featured-card{
  border-top:5px solid var(--blf-green);
}


/* ==========================================================================
   08. BLOG CARD IMAGES
   ========================================================================== */
.card-image-wrapper{
  height:260px;
  overflow:hidden;
  background:#eee;
}

.card-img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .5s ease;
}

.blog-post-card:hover .card-img{
  transform:scale(1.07);
}


/* ==========================================================================
   09. BLOG CARD BODY
   ========================================================================== */
.card-body{
  flex:1;
  display:flex;
  flex-direction:column;
  padding:30px;
}

.card-meta{
  margin-bottom:12px;
  color:var(--blf-green-dark);
  font-size:12px;
  font-weight:800;
  letter-spacing:1.2px;
  text-transform:uppercase;
}

.card-title{
  margin:0 0 14px;
  color:var(--blf-dark);
  font-family:var(--font-heading);
  font-size:27px;
  line-height:1.18;
}

.card-excerpt{
  flex:1;
  margin:0 0 22px;
  color:#666;
  line-height:1.8;
}

.card-readmore-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:auto;
  color:var(--blf-green-dark);
  font-size:13px;
  font-weight:800;
  text-decoration:none;
  text-transform:uppercase;
  transition:color .25s ease;
}

.card-readmore-link:hover{
  color:var(--blf-green);
}


/* ==========================================================================
   10. BLOG CTA SECTION
   ========================================================================== */
.blog-cta-section{
  padding:105px 0;
  background:
    linear-gradient(135deg,rgba(37,34,29,.8),rgba(61,79,29,.8)),
    url("../images/hero/hero-2.webp") center/cover no-repeat;
  color:#fff;
  text-align:center;
}

.blog-cta-section .blf-eyebrow{
  background:rgba(255,255,255,.12);
  color:#fff;
}

.blog-cta-section h2{
  margin:0 0 16px;
  color:#fff;
  font-family:var(--font-heading);
  font-size:48px;
}

.blog-cta-section p{
  max-width:650px;
  margin:0 auto 30px;
  color:#eef3e3;
  line-height:1.8;
}

.blog-cta-btn{
  min-height:50px;
  padding:0 34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50px;
  background:var(--blf-green);
  color:#fff;
  font-weight:900;
  text-decoration:none;
  text-transform:uppercase;
  transition:background .3s ease,color .3s ease,transform .3s ease;
}

.blog-cta-btn:hover{
  background:#fff;
  color:#222;
}


/* ==========================================================================
   11. KEYFRAMES
   ========================================================================== */
@keyframes blogHeroZoom{
  from{transform:scale(1);}
  to{transform:scale(1.07);}
}

@keyframes floatBlogBtn{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-6px);}
}


/* ==========================================================================
   12. RESPONSIVE DESIGN
   ========================================================================== */
@media(max-width:1199px){
  .blog-posts-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:991px){
  .blog-hero-template{
    min-height:500px;
  }

  .blog-hero-content{
    padding-top:80px;
    transform:translateY(25px);
  }

  .blog-hero-content h1{
    font-size:40px;
  }

  .blog-hero-content p{
    font-size:15px;
  }

  .blf-section{
    padding:75px 0;
  }

  .blog-intro-section{
    padding-top:90px;
  }

  .blog-posts-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:575px){
  .blog-page-template .container{
    width:92%;
  }

  .blog-hero-template{
    min-height:460px;
  }

  .blog-hero-content h1{
    font-size:34px;
  }

  .blog-kicker{
    padding:8px 16px;
    font-size:11px;
  }

  .blog-intro-section{
    padding-top:70px;
  }

  .blog-intro-card{
    padding:32px 22px;
  }

  .blog-intro-card h2,
  .blog-cta-section h2{
    font-size:34px;
  }

  .card-body{
    padding:26px 22px;
  }

  .card-title{
    font-size:24px;
  }
}


/* ==========================================================================
   13. REDUCED MOTION SUPPORT
   ========================================================================== */
@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
}