/* ═══════════════════════════════════════
   VLADFX COMPONENTS — Cards, chips, tags, social links
   ═══════════════════════════════════════ */

/* ── Resource Cards ── */
.resource-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}

/* Center lone card on last row when grid creates ~3 columns */
.resource-grid > .resource-card:nth-last-child(1):nth-child(3n+1){
  grid-column: 2 / span 1; justify-self: center;
}

@media (max-width: 1024px) {
  .resource-grid > .resource-card:nth-last-child(1):nth-child(3n+1) {
    grid-column: auto;
  }
}

.resource-card{
  background:var(--bg2);border:none;border-radius:var(--radius);
  padding:28px;transition:all .35s var(--ease-spring);cursor:pointer;
  text-decoration:none;display:block;position:relative;overflow:hidden;
  box-shadow:0 0 0 1px var(--border);
}
.resource-card:hover{
  transform:translateY(-4px) scale(1.01);
  box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 40px rgba(244,64,65,.08);
}
.resource-card::after{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  opacity:0;transition:opacity .35s;
}
.resource-card:hover::after{opacity:1}

.card-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.card-icon{
  width:44px;height:44px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;font-size:1.4rem;
}
.card-title{font-size:1.1rem;font-weight:700;color:var(--text)}
.card-desc{font-size:.88rem;color:var(--dim);line-height:1.6;margin-bottom:16px}
.card-footer{display:flex;align-items:center;justify-content:space-between}

/* ── Category colors ── */
.cat-knowledge .card-icon{background:var(--blue-soft);border:1px solid rgba(96,165,250,.2)}
.cat-research .card-icon{background:var(--brand-soft);border:1px solid rgba(244,64,65,.2)}
.cat-tutorial .card-icon{background:var(--orange-soft);border:1px solid rgba(251,146,60,.2)}
.cat-tools .card-icon{background:var(--green-soft);border:1px solid rgba(52,211,153,.2)}

.cat-knowledge::after{background:linear-gradient(90deg,transparent,var(--blue),transparent)}
.cat-research::after{background:linear-gradient(90deg,transparent,var(--brand),transparent)}
.cat-tutorial::after{background:linear-gradient(90deg,transparent,var(--orange),transparent)}

/* ── Tags (content tags in card footers) ── */
.tag-count{font-size:.78rem;color:var(--dimmer);font-family:'JetBrains Mono',monospace}

.tag{
  display:inline-flex;align-items:center;
  font-size:.72rem;font-weight:600;letter-spacing:.5px;
  padding:4px 10px;border-radius:6px;
}
.tag-video{background:var(--orange-soft);color:var(--orange)}
.tag-llm{background:var(--purple-soft);color:var(--purple)}
.tag-3d{background:var(--blue-soft);color:var(--blue)}
.tag-vfx{background:var(--brand-soft);color:var(--brand)}
.tag-houdini{background:var(--orange-soft);color:var(--orange)}
.tag-vex{background:var(--green-soft);color:var(--green)}
.tag-procedural{background:var(--brand-soft);color:var(--brand)}
.tag-copysop{background:var(--cyan-soft);color:var(--cyan)}
.tag-texture{background:var(--yellow-soft);color:var(--yellow)}

/* ── Social chips ── */
.social-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.social-chip{
  background:var(--bg2);border:1px solid var(--border);border-radius:12px;
  padding:12px 20px;display:flex;align-items:center;gap:10px;
  text-decoration:none;transition:all .25s;font-size:.88rem;
  color:var(--dim);font-weight:500;
}
.social-chip:hover{
  border-color:var(--brand);color:var(--brand);
  transform:translateY(-2px);box-shadow:0 8px 24px rgba(244,64,65,.1);
}
.social-chip .s-icon{font-size:1.1rem}

/* ── Breadcrumb ── */
.breadcrumb{
  display:flex;align-items:center;gap:8px;
  font-size:.85rem;color:var(--dim);margin-bottom:24px;
}
.breadcrumb a{color:var(--dim);text-decoration:none;transition:color .2s}
.breadcrumb a:hover{color:var(--brand)}
.breadcrumb .sep{color:var(--dimmer)}

/* ── Back to top button ── */
.back-top{
  position:fixed;bottom:28px;right:28px;
  width:46px;height:46px;border-radius:12px;
  background:var(--bg2);border:1px solid var(--border);
  color:var(--brand);font-size:1.2rem;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(10px);transition:all .3s;z-index:50;
}
.back-top.show{opacity:1;transform:translateY(0)}
.back-top:hover{background:var(--brand);color:#fff;box-shadow:0 0 20px rgba(244,64,65,.3)}