/* ============================================================
   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:800; color:var(--ink);
  letter-spacing:-.01em; font-size:clamp(1.6rem,2.4vw,2.2rem); line-height:1.12; margin:0 0 18px}
.jid-featured__body p{font-size:1.05rem; color:var(--body); margin:0 0 28px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.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:700; 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__date{font-family:var(--font-display); font-weight:600; font-size:.74rem; letter-spacing:.06em; color:var(--slate); margin-bottom:11px}
.jid-card__body h3{font-family:var(--font-display); font-weight:700; color:var(--ink); font-size:1.14rem; line-height:1.28;
  letter-spacing:-.01em; margin:0 0 11px; transition:color .2s ease;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.jid-card:hover .jid-card__body h3{color:var(--teal-ink)}
.jid-card__body p{font-size:.93rem; color:var(--body); margin:0 0 20px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.jid-card__foot{margin-top:auto; display:flex; align-items:center; justify-content:space-between; padding-top:16px; border-top:1px solid var(--line)}
.jid-card__read{font-size:.78rem; 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}
}