/* cards.css — Cards, featured tile, preview mask, tilt behavior */

/* Responsive grid */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:20px;
  align-items:start;
  margin-top:6px;
  width:100%;
}

/* Card base */
.card {
  background:#fff;
  border-radius:14px;
  padding:14px;
  border:1px solid #f1f5f9;
  box-shadow:0 10px 30px rgba(11,20,36,0.04);
  transition: transform .22s cubic-bezier(.2,.9,.3,1), box-shadow .22s;
  transform-origin:center;
  display:flex;
  flex-direction:column;
  gap:10px;
  will-change: transform;
  cursor:default;
}
.card:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow:0 20px 40px rgba(11,20,36,0.08);
}

/* Preview - strict crop & scale */
.preview {
  position:relative;
  overflow:hidden;
  height:160px;        /* fixed preview height for cards */
  border-radius:10px;
  background:#fafafa;
  display:flex;
  align-items:center;
  justify-content:center;
}
.preview img {
  width:100%;
  height:100%;
  object-fit:cover;    /* ensures full coverage and cropping */
  display:block;
  transition: transform .8s cubic-bezier(.2,.9,.3,1);
}
.card:hover .preview img { transform: scale(1.04) rotate(-0.5deg); }

/* Animated sheen / mask overlay */
.preview::after {
  content:'';
  position:absolute;
  left:-40%;
  top:-40%;
  width:180%;
  height:180%;
  background: radial-gradient(circle at 10% 20%, rgba(255,255,255,0.06), transparent 10%),
              linear-gradient(120deg, rgba(255,255,255,0.02), rgba(0,122,255,0.03));
  transform: rotate(12deg);
  animation: mask-slide 8s linear infinite;
  pointer-events:none;
  mix-blend-mode:overlay;
  opacity:0.95;
}
@keyframes mask-slide {
  0% { transform: translateX(-5%) rotate(0deg); opacity:0.9; }
  50% { transform: translateX(5%) rotate(6deg); opacity:1; }
  100% { transform: translateX(-5%) rotate(0deg); opacity:0.9; }
}

/* Title & description */
.title { font-weight:700; font-size:16px; color:#111; margin-top:6px; line-height:1.1; }
.desc { color:#505050; font-size:14px; margin-top:6px; min-height:40px; }

/* Tag pills */
.tags { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.tag { background:#f3f6ff; color:#0b4aa3; padding:6px 8px; border-radius:8px; font-size:12px; }

/* Meta row: icon and open button */
.meta-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; }
.cat-icon {
  width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:8px; background:#fff; border:1px solid #f1f5f9; font-size:18px;
}
.open {
  background:#007bff; color:#fff; padding:10px 12px; border-radius:10px; font-weight:700; text-decoration:none;
  display:inline-block;
}
.open:hover { background:#0063d1; }

/* Tilt helper (JS will add tilt transforms) */
.tilt { will-change: transform; transition: transform .12s linear; }

/* ==========================
   Featured card styles
   ========================== */

/* featured track card sizing and clamp */
.featured-card {
  display:flex; gap:20px; align-items:center;
  min-width:360px; max-width:100%;
  border-radius:14px; padding:14px;
  background: linear-gradient(135deg,#ffffff,#fbfdff);
  border:1px solid #eef6ff;
  box-shadow:0 14px 40px rgba(6,30,60,0.06);
  overflow:hidden;
  max-height:260px;              /* clamp height to prevent page push */
}

/* featured preview - force fixed height and crop */
.featured-card .preview {
  width:360px; height:200px; min-width:220px; flex:0 0 360px; border-radius:10px;
  overflow:hidden; background:#f8fbff;
}
.featured-card .preview img {
  width:100%; height:100%; object-fit:cover;
}

/* featured meta */
.featured-card .featured-meta { flex:1; display:flex; flex-direction:column; gap:10px; }
.featured-badge { display:inline-block; padding:6px 10px; border-radius:999px; font-weight:700; font-size:12px; color:#fff; background:linear-gradient(90deg,#ff7a18,#ff4a8f); }

/* Featured track container ensures horizontal layout but hides overflow (JS shows only one item at a time) */
.feat-track { display:flex; gap:18px; align-items:center; }

/* make featured responsive */
@media (max-width:960px) {
  .featured-card { flex-direction:column; align-items:stretch; max-height:none; }
  .featured-card .preview { width:100%; height:200px; flex:0 0 auto; }
}

/* small screens — grid stacking */
@media (max-width:640px) {
  .grid { grid-template-columns: 1fr; gap:14px; }
  .preview { height:200px; }
  .featured-card .preview { height:220px; }
}