/* ======================================================
   BLOG — FINAL LOOP POLISH (PREMIUM + WIDTH FIX + CLAMP FIX)
   File: /assets/css/blog.css

   Fixes:
   - ✅ Title + Excerpt + Meta width == Featured Image width (same left/right edges)
   - ✅ Excerpt 3-line clamp: NO 4th line peeking (max-height safety)
   - ✅ Premium hover + tight grid (gap 2px)
   - ✅ Featured image radius 10px (normal + hover)
   - ✅ Meta row: LEFT author, RIGHT read-time (center removed)
====================================================== */

:root{
  --stm-blog-radius: 0px;                 /* card radius stays zero */
  --stm-media-radius: 10px;              /* featured image radius */
  --stm-blog-title: #1e5bd7;
  --stm-blog-title-h: #0b3aa6;

  --stm-divider: rgba(0,0,0,.10);
  --stm-card-pad: 15px;                  /* ✅ single source padding (media + body) */
}

/* Grid */
.stm-blog-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:2px;
}

/* Card */
.stm-bcard{
  position: relative;
  z-index: 1;
  border-radius: var(--stm-blog-radius);
  overflow: visible;                      /* so title can sit on top */
  background: #fff;
  border: 0;
  transition: transform .35s ease, box-shadow .35s ease, z-index .01s linear;
}

.stm-bcard:hover{
  z-index: 50;
  transform: translateY(-6px);
  box-shadow: 0 0px 8px rgba(0,0,0,.25);
}

/* =========================
   Media (Image)
========================= */
.stm-bcard__media{
  display:block;
  padding: var(--stm-card-pad);           /* ✅ same as body padding */
  background: #fff;
}

/* Frame clips zoom */
.stm-bcard__frame{
  position: relative;
  display:block;
  border-radius: var(--stm-media-radius);
  overflow: hidden;
  background: #fff;
  border: 0;
}

/* Image / placeholder */
.stm-bcard__img,
.stm-bcard__ph{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: var(--stm-media-radius);
  transform: scale(1);
  transition: transform .55s ease;
}

.stm-bcard:hover .stm-bcard__img{
  transform: scale(1.06);
}

/* Overlay */
.stm-bcard__hover{
  position:absolute;
  inset:0;
  opacity:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.35) 100%);
  transition: opacity .25s ease;
  pointer-events:none;
}
.stm-bcard:hover .stm-bcard__hover{ opacity:1; }

/* Category pill */
.stm-bcard__cat{
  position:absolute;
  top: calc(var(--stm-card-pad) + 11px);
  left: calc(var(--stm-card-pad) + 11px);
  z-index: 6;
  background: rgba(255,255,255,.92);
  color:#111;
  border:0;
  font-size:12px;
  padding:7px 12px;
  border-radius:999px;
}

/* =========================
   Body (Width == Media)
   ✅ Same padding as media so edges align
========================= */
.stm-bcard__body{
  background:#fff;
  padding: 0 var(--stm-card-pad) var(--stm-card-pad);
  position: relative;
  z-index: 5;
  box-sizing: border-box;
}

/* Title block moves up, but stays aligned */
.stm-bcard__title{
  margin: -20px 0 0;                      /* 20px up */
  padding: 14px 0 0;                      /* ✅ no left/right padding (aligned by body) */
  background:#fff;
  position: relative;
  z-index: 10;
  font-size:17px;
  line-height:1.35;
  min-height: calc(1.35em * 2);
}

.stm-bcard__title a{
  color: var(--stm-blog-title);
  text-decoration:none;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.stm-bcard__title a:hover{
  color: var(--stm-blog-title-h);
  text-decoration: underline;
}

/* Excerpt + divider line under excerpt
   ✅ 3-line clamp with max-height safety => no peeking line */
.stm-bcard__excerpt{
  margin: 0;
  padding: 10px 0 12px;
  border-bottom: 1px solid var(--stm-divider);

  font-size:13px;
  line-height:1.65;
  color: rgba(0,0,0,.66);

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;

  /* ✅ FIX: rounding safe space so 3rd line never clips */
  max-height: calc(1.65em * 3 + 15px);
}


/* =========================
   Meta (Premium)
   Left: Author | Right: Read time
========================= */
.stm-bcard__meta{
  margin: 0;
  padding: 10px 0 0;                      /* ✅ aligned by body */
  background:#fff;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;

  font-size: 12px;
  line-height: 1;
  color: rgba(0,0,0,.60);
}

.stm-bcard__dot{ display:none; }          /* if any leftover */

.stm-bcard__author{
  font-weight: 700;
  color: rgba(0,0,0,.75);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stm-bcard__read{
  font-weight: 600;
  color: rgba(0,0,0,.55);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hover polish */
.stm-bcard:hover .stm-bcard__author{
  color: #ff8a00;
}

/* =========================
   Responsive
========================= */
@media (max-width:1200px){
  .stm-blog-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px; }
}

@media (max-width:640px){
  .stm-blog-grid{ grid-template-columns:1fr; gap:2px; }

  .stm-bcard__meta{
    font-size: 11px;
    padding-top: 10px;
  }
}

/* ======================================================
   BLOG ARCHIVE HELPERS (NO INLINE STYLES)
====================================================== */
.stm-blog-archive--pad{
  padding: 32px 16px;
}

.stm-blog-head--spaced{
  margin: 0 0 22px;
}

.stm-blog-title--xl{
  margin: 0 0 8px;
  font-size: 28px;
  line-height: 1.2;
}

.stm-blog-sub--max{
  margin: 0;
  color: #666;
  max-width: 720px;
}

.stm-blog-pagination--mt{
  margin-top: 26px;
}

.stm-blog-empty{
  margin: 0;
  padding: 18px 0;
}