/**
Theme Name: Ormeo
Author: salima
Author URI: http://wpastra.com/about/
Description: Astra child theme.
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: ormeo
Template: astra
*/

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

.blog-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}

.blog-card{
  text-decoration:none;
  color:inherit;
  display:block;
}


/* =========================
   IMAGE (FIXED)
========================= */

.blog-image{
  width:100%;
  aspect-ratio: 451.5 / 254; /* keeps same proportion */
  overflow:hidden;
  border-radius:4px;
}

.blog-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}


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

.blog-content{
  padding-top:15px;
}

.blog-date{
  font-size:12px;
  color:#76949A;
  font-family:switzer;
  display:block;
  margin-bottom:10px;
  text-transform:uppercase;
}

.blog-title{
  font-size:18px;
  color:#4E646C;
  font-family:switzer;
  font-weight:500;
  line-height:1.3;
  margin-bottom:12px;
}

.blog-excerpt{
  color:#6c8a91;
  font-size:14px;
  line-height:18px;
}


/* =========================
   RESPONSIVE (keep yours)
========================= */

@media (max-width:1024px){
  .blog-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media (max-width:767px){
  .blog-grid{
    grid-template-columns:1fr;
  }
}

/* =========================
   OVERLAY CARDS
========================= */

.overlay-blog-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(220px, 1fr));
  gap:30px;
}

/* Card */
.overlay-blog-card{
  position:relative;
  height:480px;
  background-size:cover;
  background-position:center;
  border-radius:10px;
  overflow:hidden;
  display:flex;
  align-items:flex-start;
  padding:15px;

  /* ❌ REMOVE FIXED WIDTH */
  /* width:452px; */
}

/* First card */
.overlay-blog-card:first-child{
  grid-column:span 2;

  /* ❌ REMOVE */
  /* width:920px; */
}


/* =========================
   INNER CARD (KEEP FIXED)
========================= */

.overlay-blog-content{
  background:#f1f3f4;
  padding:22px;
  border-radius:6px;

  width:345px;       /* ✔ keep fixed */
  height:448px;      /* ✔ keep fixed */

  display:flex;
  flex-direction:column;
}


/* Typography (unchanged) */
.overlay-blog-date{
  font-size:12px;
  color:#76949A;
  font-family:switzer;
  margin-bottom:10px;
  text-transform:uppercase;
}

.overlay-blog-title{
  font-size:18px;
  color:#4E646C;
  font-family:switzer;
  font-weight:500;
  line-height:1.3;
  margin-bottom:12px;
}

.overlay-blog-excerpt{
  color:#6c8a91;
  font-size:13px;
  line-height:16px;
}

.overlay-blog-readmore{
  font-size:12px;
  font-weight:400;
  text-decoration:none;
  margin-top:auto;
  color:#43555B;
}

.overlay-blog-readmore:hover{
  font-size:14px;
  font-weight:500;
  transition:all 0.3s ease;
  color:#43555B;
}

.arrow{
  color:#9FB500;
}


/* =========================
   OPTIONAL (align inner card nicely)
========================= */

.overlay-blog-card{
  display:flex;
  justify-content:flex-start;
}


/* =========================
   RESPONSIVE (minimal)
========================= */

@media (max-width:1024px){

  .overlay-blog-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .overlay-blog-card:first-child{
    grid-column:span 2;
  }

}

@media (max-width:767px){

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

  .overlay-blog-card:first-child{
    grid-column:span 1;
  }

}
/* FULL WIDTH RELATED SECTION */

.single-related-scroll {
    max-width: 100%;
    margin: 0;
    padding: 12px 32px 160px 32px;
}


/* HORIZONTAL SCROLL BLOG LIST */

.blog-scroll{
display:flex;
flex-direction:row;
gap:25px;
width:100%;
overflow-x:auto;
overflow-y:hidden;
scroll-behavior:smooth;
scroll-snap-type:x mandatory;

/* hide scrollbar */
scrollbar-width:none;
-ms-overflow-style:none;
}

.blog-scroll::-webkit-scrollbar{
display:none;
}


/* CARD WIDTH */

.blog-scroll .blog-card{
flex:0 0 486px;
scroll-snap-align:start;
}