/* ==========================================================================
   BLOG.CSS — Blog listing page only (template-blog.php).
   Loaded on top of base.css. The page "head" banner at the top
   (.team-page-head) is the shared component from base.css.

   Concept: every post, on every page, renders as a compact card in a
   3-up index grid.
   ========================================================================== */

.blog-grid-section{
  background:var(--black); color:var(--cream);
  padding:10px clamp(20px,5vw,64px) 120px;
}

/* ---------- journal index grid --------------------------------------- */
.blog-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
}

.blog-card{
  position:relative;
  display:flex; flex-direction:column;
  background:#1a1a1a;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:4px;
  overflow:hidden;
  text-decoration:none; color:inherit;
  opacity:0; transform:translateY(18px);
  transition:opacity .5s ease, transform .5s ease,
             box-shadow .35s cubic-bezier(.22,1,.36,1);
}
.blog-card.is-visible{opacity:1; transform:none;}
.blog-card:hover{box-shadow:0 14px 30px rgba(0,0,0,0.4);}

.blog-card-media{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  background:var(--card-dark);
  display:flex; align-items:center; justify-content:center;
}
.blog-card-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s cubic-bezier(.22,1,.36,1);
}
.blog-card:hover .blog-card-media img{transform:scale(1.06);}
.blog-card-fallback{
  font-family:'Fraunces',serif; font-size:30px; font-weight:500;
  color:rgba(238,234,225,0.35);
}
.blog-card-body{
  padding:16px 18px 18px;
  display:flex; flex-direction:column; gap:7px;
}
.blog-card-tag{
  font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--orange);
}
.blog-card-body h3{
  font-family:'Fraunces',serif; font-weight:500; font-size:clamp(16px,1.4vw,18px); line-height:1.3;
  transition:color .25s ease;
}
.blog-card:hover .blog-card-body h3{color:var(--orange);}
.blog-card-body p{
  font-family:'IBM Plex Mono',monospace; font-size:12px; line-height:1.55; color:#a09890;
}
.blog-card-foot{
  display:flex; align-items:center; gap:7px; margin-top:1px;
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:#6a6560;
}
.blog-card-foot .dot{opacity:0.6;}

/* ---------- pagination ------------------------------------------------ */
.blog-pagination{
  display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:10px;
  margin-top:56px;
  font-family:'IBM Plex Mono',monospace; font-size:13px;
}
.blog-pagination .page-numbers{
  min-width:38px; height:38px; padding:0 10px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,0.15); border-radius:4px;
  color:var(--cream);
  transition:background .3s cubic-bezier(.22,1,.36,1), color .3s cubic-bezier(.22,1,.36,1), border-color .3s cubic-bezier(.22,1,.36,1);
}
.blog-pagination .page-numbers.current{
  background:var(--cream); color:var(--black); border-color:var(--cream);
}
.blog-pagination .page-numbers:not(.current):hover{
  border-color:var(--orange); color:var(--orange);
}
.blog-pagination .page-numbers.dots{border:none;}

.blog-empty{
  font-family:'IBM Plex Mono',monospace; font-size:14px; color:#a09890;
  padding:20px 0 60px;
}

/* stagger the index cards' reveal slightly */
.blog-grid .blog-card:nth-child(odd){transition-delay:0ms;}
.blog-grid .blog-card:nth-child(even){transition-delay:90ms;}

@media (prefers-reduced-motion: reduce){
  .blog-card{opacity:1; transform:none; transition:box-shadow .25s ease;}
  .blog-card-media img{transition:none;}
}

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

@media (max-width:760px){
  .blog-grid-section{padding:0 20px 70px;}
  .blog-grid{grid-template-columns:1fr; gap:22px;}
  .blog-pagination{margin-top:40px;}
}