/* ============================================================
   KEYZIP.PRO — Resource Cards & Feed
   ============================================================ */

/* ── FILE TYPE VISUAL SYSTEM ─────────────────────────────── */
/* Each file type has a distinct color identity */
:root {
  --ft-pdf:   #EF4444;
  --ft-zip:   #F97316;
  --ft-xlsx:  #10B981;
  --ft-docx:  #3B82F6;
  --ft-pptx:  #F59E0B;
  --ft-img:   #EC4899;
  --ft-video: #EF4444;
  --ft-audio: #8B5CF6;
  --ft-code:  #10B981;
  --ft-ai:    #8B5CF6;
  --ft-canva: #06B6D4;
  --ft-notion:#F1F5F9;
  --ft-figma: #EC4899;
  --ft-other: #64748B;
}

/* ── MASONRY FEED ────────────────────────────────────────── */
.masonry-feed {
  columns: 5 220px;
  column-gap: 14px;
}
.masonry-feed .resource-card {
  break-inside: avoid;
  margin-bottom: 14px;
}

/* Grid-based alternative for predictable layouts */
.resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

/* ── RESOURCE CARD ───────────────────────────────────────── */
.resource-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
  cursor: none;
  transition:
    transform 0.35s var(--ease-spring),
    border-color 0.25s,
    box-shadow 0.35s;
}
.resource-card:hover {
  transform: translateY(-6px) scale(1.01);
}

/* Category-specific glow on hover */
.resource-card[data-cat="ia"]:hover        { box-shadow: 0 20px 60px rgba(139,92,246,.28), 0 0 0 1px rgba(139,92,246,.2); border-color: rgba(139,92,246,.3); }
.resource-card[data-cat="marketing"]:hover { box-shadow: 0 20px 60px rgba(236,72,153,.28), 0 0 0 1px rgba(236,72,153,.2); border-color: rgba(236,72,153,.3); }
.resource-card[data-cat="diseno"]:hover    { box-shadow: 0 20px 60px rgba(6,182,212,.28), 0 0 0 1px rgba(6,182,212,.2); border-color: rgba(6,182,212,.3); }
.resource-card[data-cat="excel"]:hover     { box-shadow: 0 20px 60px rgba(16,185,129,.28), 0 0 0 1px rgba(16,185,129,.2); border-color: rgba(16,185,129,.3); }
.resource-card[data-cat="negocios"]:hover  { box-shadow: 0 20px 60px rgba(249,115,22,.28), 0 0 0 1px rgba(249,115,22,.2); border-color: rgba(249,115,22,.3); }
.resource-card[data-cat="seo"]:hover       { box-shadow: 0 20px 60px rgba(59,130,246,.28), 0 0 0 1px rgba(59,130,246,.2); border-color: rgba(59,130,246,.3); }
.resource-card[data-cat="rrss"]:hover      { box-shadow: 0 20px 60px rgba(236,72,153,.28); border-color: rgba(236,72,153,.3); }
.resource-card[data-cat="productividad"]:hover { box-shadow: 0 20px 60px rgba(139,92,246,.28); border-color: rgba(139,92,246,.3); }
.resource-card[data-cat="finanzas"]:hover  { box-shadow: 0 20px 60px rgba(16,185,129,.28); border-color: rgba(16,185,129,.3); }
.resource-card[data-cat="automatizacion"]:hover { box-shadow: 0 20px 60px rgba(6,182,212,.28); border-color: rgba(6,182,212,.3); }

/* ── CARD VISUAL (top area) ──────────────────────────────── */
.card-visual {
  position: relative;
  overflow: hidden;
}
.card-visual img {
  width: 100%;
  display: block;
  transition: transform 0.5s var(--ease-out);
}
.resource-card:hover .card-visual img { transform: scale(1.07); }

/* Placeholder visual when no image */
.card-placeholder {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 32px 20px;
}
.card-placeholder::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 25% 30%, rgba(255,255,255,0.04) 1px, transparent 1px),
    radial-gradient(circle at 75% 70%, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 28px 28px, 22px 22px;
}
/* Per-category placeholder gradients */
[data-cat="ia"] .card-placeholder         { background: linear-gradient(145deg, #150d30, #1e1045, #0d0820); }
[data-cat="marketing"] .card-placeholder  { background: linear-gradient(145deg, #2a0d1f, #3d1035, #1a0815); }
[data-cat="diseno"] .card-placeholder     { background: linear-gradient(145deg, #051c2c, #092d40, #030f18); }
[data-cat="excel"] .card-placeholder      { background: linear-gradient(145deg, #052015, #082d1e, #031208); }
[data-cat="negocios"] .card-placeholder   { background: linear-gradient(145deg, #25140a, #361c08, #160a03); }
[data-cat="seo"] .card-placeholder        { background: linear-gradient(145deg, #081428, #0c1e3d, #040b1a); }
[data-cat="rrss"] .card-placeholder       { background: linear-gradient(145deg, #2a0d25, #3d1038, #180813); }
[data-cat="productividad"] .card-placeholder { background: linear-gradient(145deg, #1a0d2e, #251040, #0f061c); }
[data-cat="finanzas"] .card-placeholder   { background: linear-gradient(145deg, #052018, #082e20, #031210); }
[data-cat="automatizacion"] .card-placeholder { background: linear-gradient(145deg, #051e28, #082c3a, #030f16); }

.placeholder-icon {
  font-size: 52px;
  position: relative; z-index: 1;
  filter: drop-shadow(0 0 24px rgba(255,255,255,0.2));
  transition: transform 0.35s var(--ease-spring);
}
.resource-card:hover .placeholder-icon { transform: scale(1.12) rotate(-4deg); }

.placeholder-label {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 2.5px;
  color: rgba(255,255,255,0.4);
  position: relative; z-index: 1;
}

/* File format badge overlay on visual */
.card-fmt-badge {
  position: absolute;
  top: 10px; right: 10px;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  padding: 3px 8px;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 600;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* File size badge */
.card-size-badge {
  position: absolute;
  bottom: 10px; left: 10px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 10px; font-weight: 600;
  color: rgba(255,255,255,0.6);
}

/* ── HOVER ACTION OVERLAY ────────────────────────────────── */
.card-actions-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.88) 0%,
    rgba(0,0,0,0.4) 40%,
    transparent 70%
  );
  display: flex; flex-direction: column;
  justify-content: flex-end;
  padding: 14px;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.25s;
}
.resource-card:hover .card-actions-overlay { opacity: 1; }

.card-action-row {
  display: flex; align-items: center; gap: 6px;
}
.card-act-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 7px 12px;
  border-radius: var(--r-sm);
  font-size: 12px; font-weight: 700;
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(8px);
  cursor: none;
  transition: background 0.2s, transform 0.2s var(--ease-spring);
  flex-shrink: 0;
}
.card-act-btn:hover { background: rgba(255,255,255,0.2); transform: scale(1.05); }
.card-act-btn.primary {
  flex: 1;
  justify-content: center;
  background: rgba(139,92,246,0.7);
  border-color: rgba(139,92,246,0.5);
}
.card-act-btn.primary:hover { background: rgba(139,92,246,0.9); }
.card-act-btn.liked { color: #f472b6; border-color: rgba(244,114,182,0.4); }

/* ── CARD BODY ───────────────────────────────────────────── */
.card-body {
  padding: 13px 14px 14px;
}
.card-meta-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.card-cat-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px;
  border-radius: var(--r-full);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.3px;
}
[data-cat="ia"] .card-cat-pill         { background: rgba(139,92,246,.18); color: #a78bfa; }
[data-cat="marketing"] .card-cat-pill  { background: rgba(236,72,153,.18); color: #f472b6; }
[data-cat="diseno"] .card-cat-pill     { background: rgba(6,182,212,.18); color: #22d3ee; }
[data-cat="excel"] .card-cat-pill      { background: rgba(16,185,129,.18); color: #34d399; }
[data-cat="negocios"] .card-cat-pill   { background: rgba(249,115,22,.18); color: #fb923c; }
[data-cat="seo"] .card-cat-pill        { background: rgba(59,130,246,.18); color: #60a5fa; }
[data-cat="rrss"] .card-cat-pill       { background: rgba(236,72,153,.18); color: #f472b6; }
[data-cat="productividad"] .card-cat-pill { background: rgba(139,92,246,.18); color: #a78bfa; }
[data-cat="finanzas"] .card-cat-pill   { background: rgba(16,185,129,.18); color: #34d399; }
[data-cat="automatizacion"] .card-cat-pill { background: rgba(6,182,212,.18); color: #22d3ee; }

.card-title {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700;
  color: var(--text-1);
  line-height: 1.35;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-author {
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 10px;
}
.author-av {
  width: 20px; height: 20px;
  border-radius: var(--r-full);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; color: #fff;
}
.author-name {
  font-size: 12px; color: var(--text-3); font-weight: 500;
}
.author-verify { font-size: 11px; color: var(--blue); }
.author-follow-btn {
  margin-left: auto;
  font-size: 11px; font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--r-full);
  background: var(--violet-dim);
  color: #a78bfa;
  border: 1px solid rgba(139,92,246,.25);
  cursor: none;
  transition: background 0.2s;
}
.author-follow-btn:hover { background: rgba(139,92,246,.25); }
.author-follow-btn.following {
  background: var(--bg-active);
  color: var(--text-3);
  border-color: var(--border);
}

.card-stats {
  display: flex; align-items: center; gap: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--border);
}
.card-stat {
  display: flex; align-items: center; gap: 3px;
  font-size: 11px; color: var(--text-3); font-weight: 500;
}
.card-stat:first-child { margin-right: auto; }
.card-date {
  font-size: 10px; color: var(--text-4);
  margin-left: auto;
}

/* ── FEATURED CARD (large) ───────────────────────────────── */
.resource-card.featured {
  grid-column: span 2;
}
.resource-card.featured .card-placeholder {
  min-height: 280px;
}
.resource-card.featured .card-title {
  font-size: 16px;
}

/* ── HORIZONTAL CARD ─────────────────────────────────────── */
.resource-card.horizontal {
  display: flex; flex-direction: row;
}
.resource-card.horizontal .card-visual {
  width: 120px; flex-shrink: 0;
}
.resource-card.horizontal .card-placeholder {
  min-height: 100%;
  width: 120px;
}
.resource-card.horizontal .card-body {
  flex: 1;
}

/* ── UPLOAD CARD (CTA within feed) ──────────────────────── */
.upload-cta-card {
  background: linear-gradient(145deg, rgba(139,92,246,.08), rgba(59,130,246,.08));
  border: 2px dashed rgba(139,92,246,.3);
  border-radius: var(--r-lg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 40px 24px;
  gap: 16px;
  cursor: none;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.upload-cta-card:hover {
  border-color: rgba(139,92,246,.5);
  background: linear-gradient(145deg, rgba(139,92,246,.12), rgba(59,130,246,.12));
  transform: translateY(-3px);
}
.upload-cta-card .upload-icon {
  width: 56px; height: 56px;
  border-radius: var(--r-full);
  background: var(--grad-brand);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  box-shadow: 0 0 30px var(--violet-glow);
}
.upload-cta-card h3 {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 800;
  color: var(--text-1);
}
.upload-cta-card p {
  font-size: 13px; color: var(--text-3); line-height: 1.5;
}

/* ── SORT / FILTER BAR ───────────────────────────────────── */
.feed-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap; gap: 12px;
}
.feed-toolbar-left { display: flex; align-items: center; gap: 8px; }
.feed-toolbar-right { display: flex; align-items: center; gap: 8px; }

.sort-tabs {
  display: flex; gap: 2px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 3px;
}
.sort-tab {
  padding: 6px 14px;
  font-size: 13px; font-weight: 600;
  color: var(--text-3);
  border-radius: 8px;
  transition: all 0.2s; cursor: none;
}
.sort-tab.active {
  background: var(--bg-overlay);
  color: var(--text-1);
  box-shadow: var(--shadow-sm);
}

/* ── LOAD MORE / INFINITE ────────────────────────────────── */
.load-more {
  display: flex; justify-content: center;
  padding: 40px 0;
}
.load-spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--violet);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── RESPONSIVE CARDS ────────────────────────────────────── */
@media (max-width: 1200px) {
  .masonry-feed { columns: 4 200px; }
}
@media (max-width: 900px) {
  .masonry-feed { columns: 3 180px; }
  .resource-card.featured { grid-column: span 1; }
}
@media (max-width: 600px) {
  .masonry-feed { columns: 2 150px; column-gap: 10px; }
  .masonry-feed .resource-card { margin-bottom: 10px; }
  .card-placeholder { padding: 24px 12px; }
  .placeholder-icon { font-size: 38px; }
}