/* ══════════════════════════════════════════════
   HOME BLOG CARDS v2 — bento grid of dark cards, each with a skewed gradient
   back-panel + glow that straighten and spread on hover
   (inspired by 21st.dev "Gradient Card Showcase")
   ══════════════════════════════════════════════ */
.bv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2rem 1.8rem;margin:3rem 0 3.2rem;padding:0 .6rem}
.bv-card{position:relative;display:block;min-height:330px;text-decoration:none;color:inherit;isolation:isolate;opacity:0;transform:translateY(40px);transition:opacity .7s ease,transform .8s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--i) * 90ms)}
.bv-grid.in .bv-card{opacity:1;transform:none}
.bv-feature{grid-column:span 2}

/* skewed gradient back-panel + blurred glow */
.bv-panel{position:absolute;z-index:-2;inset:6% 8%;border-radius:22px;background:linear-gradient(135deg,var(--c1),var(--c2));transform:skewX(-10deg) rotate(-3deg) translate(16px,14px);transition:transform .55s cubic-bezier(.22,1,.36,1),inset .55s cubic-bezier(.22,1,.36,1)}
.bv-glow{position:absolute;z-index:-3;inset:8% 14%;border-radius:22px;background:linear-gradient(135deg,var(--c1),var(--c2));filter:blur(34px);opacity:.45;transform:skewX(-12deg);transition:opacity .55s,inset .55s cubic-bezier(.22,1,.36,1),transform .55s}
.bv-card:hover .bv-panel,.bv-card:focus-visible .bv-panel{transform:skewX(0) rotate(0);inset:-6px -8px}
.bv-card:hover .bv-glow,.bv-card:focus-visible .bv-glow{opacity:.75;inset:-4% -4%;transform:none}

/* card face */
.bv-inner{position:relative;height:100%;display:flex;flex-direction:column;gap:1rem;padding:1.7rem 1.7rem 1.4rem;border-radius:22px;overflow:hidden;background:rgba(14,10,12,.92);border:1px solid rgba(250,243,225,.09);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 24px 50px -28px rgba(0,0,0,.6);transition:transform .45s cubic-bezier(.22,1,.36,1),border-color .3s}
.bv-inner::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(520px circle at var(--mx,80%) var(--my,0%),color-mix(in srgb,var(--c1) 22%,transparent),transparent 45%);opacity:.8;transition:opacity .3s}
.bv-card:hover .bv-inner{transform:translateY(-8px);border-color:color-mix(in srgb,var(--c2) 45%,transparent)}
.bv-inner>*{position:relative}

.bv-top{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;padding-right:4.2rem}
.bv-chip{white-space:nowrap;padding:.35rem .75rem;border-radius:999px;font-family:var(--font-body);font-size:.68rem;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,var(--c1),var(--c2))}
.bv-stamp{white-space:nowrap;padding:.35rem .7rem;border-radius:999px;font-family:var(--font-body);font-size:.64rem;font-weight:800;letter-spacing:1.2px;color:rgba(250,243,225,.7);border:1px solid rgba(250,243,225,.14)}
.bv-num{position:absolute !important;top:1.3rem;right:1.5rem;font-family:var(--font-display);font-size:2rem;font-weight:800;line-height:.8;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(250,243,225,.18);transition:-webkit-text-stroke-color .3s,color .3s}
.bv-card:hover .bv-num{-webkit-text-stroke-color:var(--c2)}

.bv-title{margin:.2rem 0 0;font-family:var(--font-display);font-size:1.25rem;font-weight:800;line-height:1.25;letter-spacing:-.01em;color:var(--cream)}
.bv-feature .bv-title{font-size:clamp(1.5rem,2.4vw,2.1rem);max-width:90%}
.bv-ext{font-size:.8em;color:var(--c2)}
.bv-lead{margin:0;font-family:var(--font-body);font-size:.92rem;line-height:1.65;color:rgba(250,243,225,.6);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bv-feature .bv-lead{font-size:1rem;max-width:80%}

.bv-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:1rem;border-top:1px solid rgba(250,243,225,.08)}
.bv-by{font-family:var(--font-body);font-size:.7rem;font-weight:700;letter-spacing:1px;color:rgba(250,243,225,.5)}
.bv-by b{color:var(--c2)}
.bv-go{flex-shrink:0;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(250,243,225,.08);border:1px solid rgba(250,243,225,.12);transition:background .3s,transform .45s cubic-bezier(.34,1.5,.64,1),border-color .3s}
.bv-go svg{width:18px;height:18px}
.bv-card:hover .bv-go{background:linear-gradient(135deg,var(--c1),var(--c2));border-color:transparent;transform:rotate(45deg) scale(1.08)}

@media (max-width:1024px){
  .bv-grid{grid-template-columns:repeat(2,1fr)}
  .bv-feature{grid-column:span 2}
}
@media (max-width:640px){
  .bv-grid{grid-template-columns:1fr;gap:1.8rem;padding:0}
  .bv-feature{grid-column:auto}
  .bv-card{min-height:0}
  .bv-panel{inset:4% 6%}
  .bv-inner{padding:1.4rem 1.3rem 1.2rem}
  .bv-feature .bv-title{font-size:1.35rem;max-width:none}
  .bv-feature .bv-lead{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .bv-card{opacity:1;transform:none;transition:none}
  .bv-panel,.bv-glow,.bv-inner,.bv-go{transition:none}
}