/* ───── Captain Greek • Blog cards (home-page widget only) ───── */

/* 0.  Cosmetic wrapper panel
   -------------------------------------------------------------- */
   .blog-post-wrap .blog-cards{
    background:#fafafa;
    border-radius:1rem;
    padding:2rem clamp(1rem,5vw,4rem);
    box-shadow:0 6px 18px rgba(0,0,0,.04);
  }
  
  /* 1.  Grid wrapper
     -------------------------------------------------------------- */
  .blog-post-wrap .blog-cards__grid{
    display:grid;
    gap:1.5rem;                                      /* 24 px */
    grid-template-columns:repeat(auto-fill, minmax(26rem, 1fr)); /* 3-4 up */
    grid-auto-rows:1fr;                              /* equal rows */
  }
  
  /* 2.  Card base
     -------------------------------------------------------------- */
  .blog-post-wrap .blog-card{
    display:flex;
    flex-direction:column;
    height:100%;
    /* fade-in on intersection -- remember to add JS that toggles .loaded */
    opacity:0;
    transform:translateY(20px);
    transition:opacity .4s ease, transform .4s ease, box-shadow .2s ease;
  }
  .blog-post-wrap .blog-card.loaded{opacity:1; transform:none;}
  
  @media (hover:hover){
    .blog-post-wrap .blog-card:hover img{transform:scale(1.03);}
    .blog-post-wrap .blog-card__cover{overflow:hidden;}
    .blog-post-wrap .blog-card__cover img{
      transition:transform .4s cubic-bezier(.25,.46,.45,.94);
    }
  }
  
  /* 3.  Thumbnail
     -------------------------------------------------------------- */
  .blog-post-wrap .blog-card__cover img{
    width:100%; height:auto; object-fit:cover;
    aspect-ratio:16/11;
  }
  
  /* 4.  Meta row  (date + category stacked)
     -------------------------------------------------------------- */
  .blog-post-wrap .blog-card__meta{
    display:flex; flex-direction:column; align-items:center;
    font-size:clamp(.9rem, .8vw + 0.6rem, 1.5rem);
    line-height:1.4;
    color:var(--cg-meta);
    padding:1rem 1rem 0;
    text-align:center;
    /* no min-height → flex layout + grid-auto-rows keep rows level */
  }
  .blog-post-wrap .blog-card__meta span{display:none;}        /* remove "•" */
  .blog-post-wrap .blog-card__meta a{margin-top:.25rem;}      /* gap */
  .blog-post-wrap .blog-bullet{                               /* if you reinstate bullet */
    display:inline-block; width:.35rem; height:.35rem;
    margin:0 .4rem .15rem; border-radius:50%; background:#b89b65;
  }
  
  /* 5.  Title
     -------------------------------------------------------------- */
  .blog-post-wrap .blog-card__title{
    font-size:clamp(1rem, 1vw + 1rem, 1.5rem);  /* 16 → 24 px fluid */
    line-height:1.5;
    margin-top:2rem;                            /* air above title */
  }
  
  /* accentuate “Read article →”  ----------------------------------- */
.blog-post-wrap .blog-card__cta{
  display:inline-flex;                 /* lets us add an arrow icon */
  align-items:center;
  gap:.35rem;                          /* space before arrow */
  font-weight:700;                     /* bolder */
  color:#b89b65;                       /* requested colour */
  text-decoration:none;
  transition:color .2s ease;
  margin-top: 10px;
}

.blog-post-wrap .blog-card__cta::after{
  
  font-size:1em;
  transition:transform .25s ease;
}

.blog-post-wrap .blog-card__cta:hover{
  text-decoration:underline;
}

.blog-post-wrap .blog-card__cta:hover::after{
  transform:translateX(.15rem);        /* subtle nudge on hover */
}
  
  /* 7.  “View all articles” button
     -------------------------------------------------------------- */
  .blog-post-wrap .blog-cards__more{
    text-align:center;
    margin-top:1.5rem;
  }
  .blog-post-wrap .blog-cards__more > a{
    display:inline-block;
    padding:.55rem 1.4rem;
    margin:50px 0 20px;
    border:2px solid #b89b65;
    border-radius:2rem;
    font-weight:600;
    color:var(--cg-blue, #2d337f);
    text-decoration:none;
    transition:background .2s ease, color .2s ease;
  }
  .blog-post-wrap .blog-cards__more > a:hover{
    background:#b89b65; color:#fff;
  }