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

.blog-card-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(250px,1fr));
  gap:50px;
  /*padding:40px 0;*/
  align-items:stretch;
}


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

.blog-card{
  display:flex;
  flex-direction:column;
  height:100%;

  background:#fff;

  border-radius:12px;
  overflow:hidden;

  text-decoration:none;
  color:#333;

  border:1px solid #e8edf2;

  box-shadow:0 2px 8px rgba(0,0,0,0.06);

  cursor:pointer;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

/* hover */

.blog-card:hover{
  transform:translateY(-4px);

  box-shadow:0 8px 24px rgba(0,0,0,0.10);
}


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

.blog-card-image{
  height:220px;

  flex-shrink:0;

  overflow:hidden;

  position:relative;
}

.blog-card-image img{
  width:100%;
  height:100%;

  object-fit:cover;

  display:block;

  transition:transform 0.4s ease;
}

.blog-card:hover .blog-card-image img{
  transform:scale(1.05);
}


/* =====================================================
   IMAGE TITLE
===================================================== */

.image-title{
  position:absolute;

  left:15px;
  bottom:15px;

  color:#fff;

  font-size:16px;
  font-weight:600;

  z-index:2;

  pointer-events:none;
}


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

.blog-card-content{
  padding:22px;
  flex-grow:1;
  display:flex;
  flex-direction:column;
  transition:color 0.25s ease;
}

.blog-card-content h3{
  font-size:18px;
  font-weight:600;
  margin-bottom:15px;
  line-height:1.5;
  transition:color 0.25s ease;
}

.blog-card-content p{
  font-size:14px;
  line-height:1.8;
  color:#666;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  transition:color 0.25s ease;
}


/* =====================================================
   BLOG META
===================================================== */

.blog-card-meta{
  display:flex;
  align-items:center;
  gap:12px;

  margin-bottom:20px;

  font-size:13px;

  color:#777;
}


/* =====================================================
   HOVER TEXT
===================================================== */

.blog-card-content h3,
.blog-card-content p,
.blog-card-content small{
  color:inherit;

  transition:color 0.25s ease;
}

.blog-card:hover .blog-card-content{
  color:#0FB4DF;
}


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

.blog-card-footer{
  margin-top:15px;

  font-size:13px;
  color:#777;
}

.blog-card-footer span{
  display:block;
}


/* =====================================================
   ARROW
===================================================== */

.blog-card-arrow{
  margin-top:auto;

  font-size:20px;

  color:#00a3e0;

  opacity:0;

  transform:translateX(-8px);

  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.blog-card:hover .blog-card-arrow{
  opacity:1;

  transform:translateX(0);
}


/* =====================================================
   BLOG ARTICLE CONTAINER
===================================================== */

.blog-article-container{
  max-width:1000px;
}


/* =====================================================
   ARTICLE HEADER
===================================================== */

.article-header{
  margin-bottom:40px;
}


/* =====================================================
   ARTICLE META
===================================================== */

.article-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:18px;

  font-size:14px;
  color:#666;

  margin-top:14px;
}

.article-meta .meta-item{
  display:flex;
  align-items:center;
  gap:8px;
}

.article-meta i{
  color:#0FB4DF;
  font-size:15px;
}


/* =====================================================
   ARTICLE SHARE
===================================================== */

.article-share{
  display:flex;
  align-items:center;
  gap:12px;
}

.article-share a{
  color:#666;

  font-size:16px;

  transition:
    color 0.25s ease,
    transform 0.25s ease;
}

.article-share a:hover{
  color:#0FB4DF;

  transform:translateY(-2px);
}


/* =====================================================
   FEATURE IMAGE
===================================================== */

.blog-feature-image{
  position:relative;

  width:100%;
  height:500px;

  border-radius:20px;
  overflow:hidden;

  background:#f5f5f5;

  box-shadow:0 2px 8px rgba(0,0,0,0.06);

  margin-top:30px;
}


/* blurred background */

.blog-feature-bg{
  position:absolute;

  top:0;
  left:0;

  width:100%;
  height:100%;

  background-size:cover;
  background-position:center;

  filter:blur(16px);

  transform:scale(1.15);

  opacity:0.28;

  z-index:1;
}


/* foreground image */

.blog-feature-image img{
  position:absolute;

  top:50%;
  left:50%;

  transform:translate(-50%,-50%);

  max-width:96%;
  max-height:92%;

  object-fit:contain;

  z-index:2;

  border-radius:12px;

  transition:transform 0.5s ease;
}

.blog-feature-image:hover img{
  transform:
    translate(-50%,-50%)
    scale(1.02);
}


/* =====================================================
   BLOG CONTENT
===================================================== */

.blog-content{
  max-width:920px;

  margin:auto;

  position:relative;
}


/* divider */

.blog-content::before{
  content:"";

  display:block;

  width:60px;
  height:3px;

  background:#0FB4DF;

  margin-bottom:32px;

  border-radius:50px;
}


/* =====================================================
   CONTENT SECTION
===================================================== */

.content-section{
  margin-bottom:60px;
}


/* headings */

.content-section h2{
  position:relative;

  font-size:32px;
  font-weight:700;

  line-height:1.3;

  margin-bottom:26px;

  padding-left:22px;

  color:#111;
}

/* accent line */

.content-section h2::before{
  content:"";

  position:absolute;

  left:0;
  top:4px;

  width:5px;
  height:36px;

  border-radius:20px;

  background:#0FB4DF;
}


/* paragraph */

.blog-content p{
  font-size:16px;
  line-height:1.9;

  color:#444;

  margin-bottom:24px;
}


/* =====================================================
   SOURCES
===================================================== */

.content-section.sources p{
  margin-bottom:12px;

  word-break:break-word;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width:768px){

  .blog-card-grid{
    grid-template-columns:1fr;

    gap:24px;
  }

  .blog-feature-image{
    height:360px;

    border-radius:16px;
  }

  .blog-feature-image img{
    max-width:95%;
    max-height:88%;
  }

  .content-section h2{
    font-size:26px;
  }

  .blog-content p{
    font-size:15px;
    line-height:1.8;
  }

  .article-meta{
    gap:14px;
  }

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

}