/* =========================================================
   tsagaanzurag — Audio (public grid + cards only)
   File: /assets/css/audio.css?v=48f187bee1
   ========================================================= */

html, body{
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.audio-container { margin-top: 10px; }
.audio-container h1 {
  font-size: 26px;
  margin: 0 0 14px 0;
}

/* =========================
   GRID (responsive)
   ========================= */
#audioGrid{
  display: grid;
  gap: 14px;

  /* desktop default */
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* =========================
   CARD
   ========================= */
.audio-card{
  font-family: var(--font-ui);
  background: var(--card, #0f1115);
  border: 1px solid var(--line, #23262d);
  border-radius: 12px;
  overflow: hidden;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  cursor: pointer;
}
.audio-card:hover{
  transform: translateY(-3px);
  border-color: #3a3f4a;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

/* =========================
   THUMB
   ========================= */
.audio-card .thumb-wrap{ position: relative; }

.audio-card img.thumb{
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  background: #111;
}

/* =========================
   BADGES (no overlap)
   ========================= */

/* Rank: left top */
.rank-badge{
  position:absolute; left:10px; top:10px;
  background:#facc15;
  color:#111;
  font-weight:900;
  font-size:12px;
  padding:4px 10px;
  border-radius:999px;
  box-shadow:0 10px 20px rgba(0,0,0,.35);
  z-index:2;
}

/* Type: right top */
.audio-card .badge{
  position:absolute; right:10px; top:10px;
  background: rgba(15,17,21,.85);
  color:#e5e7eb;
  border:1px solid rgba(255,255,255,.1);
  padding:2px 10px;
  font-size:11px;
  border-radius:999px;
  letter-spacing:.2px;
  z-index:2;
}
.audio-card .badge.basic{ background:#1f2937; color:#cbd5e1; }
.audio-card .badge.premium{ background:#78350f; color:#fde68a; }

/* optional duration chip */
.audio-card .duration-chip{
  position:absolute; right:8px; bottom:8px;
  background: rgba(0,0,0,.6);
  color:#fff;
  padding:2px 6px;
  font-size:12px;
  border-radius:6px;
}

/* =========================
   META
   ========================= */
.audio-card .meta{ padding: 10px 12px 12px; }

/* Title: default white + glow, hover = yellow */
.audio-card .title{
  font-family: var(--font-title);
  letter-spacing:.2px;
  color:#f2f4fa;
  font-weight:800;
  font-size:15px;
  margin:0 0 4px 0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-shadow:
    0 1px 0 rgba(0,0,0,.65),
    0 0 10px rgba(255,255,255,.10);
  transition: color .15s ease, text-shadow .15s ease;
}
.audio-card:hover .title{
  color:#facc15;
  text-shadow:
    0 1px 0 rgba(0,0,0,.65),
    0 0 12px rgba(250,204,21,.25);
}

.audio-card .narrator,
.audio-card .chip,
.audio-card .badge{
  font-family: var(--font-ui);
}

.audio-card .narrator{
  color:#9ca3af;
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-top:2px;
}

/* Divider */
.audio-card .meta-divider{
  height:1px;
  background: rgba(255,255,255,.08);
  margin:10px 0 10px;
}

/* Episodes + Views same line */
.audio-card .bottom-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:12px;
  color:#aab1bb;
}
.audio-card .bottom-row .left{
  display:flex;
  gap:10px;
  align-items:center;
}
.audio-card .bottom-row .chip{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  padding: 2px 10px;
  border-radius: 999px;
  user-select:none;
  color:#e5e7eb;
  white-space:nowrap;
}

/* =========================
   SKELETON (optional)
   ========================= */
.audio-card.skeleton{ animation: pulse 1.2s ease-in-out infinite; }
.audio-card.skeleton .thumb{ background:#1a1e25; }
.audio-card.skeleton .title,
.audio-card.skeleton .narrator{
  height:12px;
  background:#1a1e25;
  border-radius:6px;
}
.audio-card.skeleton .title{ width:70%; margin:10px 0 6px; }
.audio-card.skeleton .narrator{ width:50%; }

@keyframes pulse{
  0% { opacity:.8; }
  50%{ opacity:.45; }
  100%{ opacity:.8; }
}

/* =========================
   RESPONSIVE
   ========================= */

/* Large desktop */
@media (min-width: 1400px){
  #audioGrid{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Laptop/tablet */
@media (max-width: 1100px){
  #audioGrid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Small tablet */
@media (max-width: 720px){
  #audioGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap:12px; }
  .audio-container h1{ font-size:22px; }

  /* badges a bit smaller */
  .rank-badge{ font-size:11px; padding:3px 8px; left:8px; top:8px; }
  .audio-card .badge{ font-size:10px; padding:2px 8px; right:8px; top:8px; }
}

/* ✅ Mobile: STILL 2 columns (not 1) */
@media (max-width: 480px){
  #audioGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:10px;
  }

  /* Make card feel less “huge” */
  .audio-card .meta{ padding: 8px 10px 10px; }
  .audio-card .title{ font-size: 13px; }
  .audio-card .narrator{ font-size: 11px; }
  .audio-card .bottom-row{ font-size: 11px; }
  .audio-card .bottom-row .chip{ padding: 2px 8px; }
}