/* ============================================================
   JID Rebuild — Blogs archive (featured + grid)
   ============================================================ */

/* ---------- Featured ---------- */
.jid-featured{
  display:grid; grid-template-columns:1.15fr .85fr; margin-bottom:56px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--shadow); transition:box-shadow .35s ease, transform .35s ease;
}
.jid-featured:hover{box-shadow:var(--shadow-lift); transform:translateY(-3px)}
.jid-featured__media{position:relative; min-height:420px; overflow:hidden; background:#dfe9ed}
.jid-featured__media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.jid-featured:hover .jid-featured__media img{transform:scale(1.04)}
.jid-featured__tag{
  position:absolute; top:20px; left:20px; z-index:2; font-family:var(--font-display);
  font-weight:700; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:#fff;
  background:rgba(23,32,41,.62); backdrop-filter:blur(6px); padding:8px 14px; border-radius:999px;
}
.jid-featured__body{padding:48px 46px; display:flex; flex-direction:column; justify-content:center}
.jid-featured__body h2{font-family:var(--font-display); font-weight:600; color:var(--ink);
  letter-spacing:-.01em; font-size:clamp(1.35rem,1.9vw,1.75rem); line-height:1.2; margin:0 0 14px}
.jid-featured__body p{font-size:1rem; color:var(--body); margin:0 0 20px; line-height:1.6;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.jid-featured__latest{align-self:flex-start; font-family:var(--font-display); font-weight:700;
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:#fff;
  background:var(--teal); padding:6px 14px; border-radius:999px; margin:0 0 16px}
.jid-featured__cat, .jid-card__cat{font-family:var(--font-display); font-weight:700;
  font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--teal); margin:0 0 12px}
.jid-featured__meta{display:flex; align-items:center; gap:11px; font-size:.82rem; color:var(--slate);
  padding-top:18px; border-top:1px solid var(--line)}
.jid-featured:hover .jid-readlink svg, .jid-card:hover .jid-readlink svg{transform:translateX(5px)}

/* ---------- Meta row ---------- */
.jid-meta{display:flex; align-items:center; gap:12px; font-family:var(--font-display);
  font-weight:600; font-size:.78rem; color:var(--slate); margin-bottom:18px; flex-wrap:wrap}
.jid-meta__cat{color:var(--teal-ink); text-transform:uppercase; letter-spacing:.1em}
.jid-meta__dot{width:4px; height:4px; border-radius:50%; background:#c7d2d8}

/* ---------- Grid head ---------- */
.jid-grid-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:22px; gap:16px}
.jid-grid-head h2{font-family:var(--font-display); font-weight:600; color:var(--ink); font-size:1.15rem; margin:0; letter-spacing:-.01em}
.jid-count{font-size:.88rem; color:var(--slate); white-space:nowrap}

/* ---------- Grid + cards ---------- */
.jid-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:30px}
.jid-card{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease}
.jid-card:hover{transform:translateY(-7px); box-shadow:var(--shadow-lift); border-color:transparent}
.jid-card__media{position:relative; aspect-ratio:16/9; overflow:hidden; background:#dfe9ed}
body.jid-page .jid-card__media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.jid-card:hover .jid-card__media img{transform:scale(1.06)}
.jid-card__noimg{position:absolute; inset:0; display:grid; place-items:center; color:#9aa6ad; font-family:var(--font-display); font-weight:700}
.jid-card__pill{position:absolute; top:14px; left:14px; font-family:var(--font-display); font-weight:700;
  font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--teal-ink);
  background:rgba(255,255,255,.92); backdrop-filter:blur(4px); padding:7px 12px; border-radius:999px; box-shadow:0 2px 8px rgba(23,32,41,.10)}
.jid-card__body{padding:22px 24px 24px; display:flex; flex-direction:column; flex:1}
.jid-card__body h3{font-family:var(--font-display); font-weight:600; color:var(--ink); font-size:1.1rem; line-height:1.3;
  letter-spacing:-.01em; margin:0 0 10px; transition:color .2s ease;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.jid-card:hover .jid-card__body h3{color:var(--teal-ink)}
.jid-card__body p{font-size:.92rem; color:var(--body); line-height:1.55; margin:0 0 18px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.jid-card__foot{margin-top:auto; display:flex; align-items:center; padding-top:15px; border-top:1px solid var(--line)}
.jid-card__date{font-family:var(--font-body); font-weight:500; font-size:.82rem; color:var(--slate)}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .jid-featured{grid-template-columns:1fr}
  .jid-featured__media{min-height:260px}
  .jid-featured__body{padding:34px 30px}
}
@media(max-width:560px){
  .jid-grid{grid-template-columns:1fr; gap:22px}
}