/* ══════════════════════════════════════════════════
   SilvaStream — Genres Page Styles
   ══════════════════════════════════════════════════ */

/* ── Hero ── */
.genres-main{padding-top:90px;min-height:100vh}
.genres-hero{
  text-align:center;padding:48px var(--page-pad) 40px;
  background:linear-gradient(to bottom,rgba(229,9,20,.07) 0%,transparent 100%);
}
.genres-hero-title{
  font-size:clamp(1.8rem,4.5vw,2.8rem);font-weight:900;letter-spacing:-.02em;
  color:#fff;margin-bottom:10px;
}
.genres-hero-title i{color:var(--accent);margin-right:10px}
.genres-hero-sub{color:var(--text-muted);font-size:1rem;max-width:500px;margin:0 auto}

/* ── Genre Tile Grid ── */
.genres-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(clamp(120px,16vw,175px),1fr));
  gap:16px;
  padding:0 var(--page-pad) 48px;
  max-width:1200px;margin:0 auto;
}
.genre-tile{
  position:relative;overflow:hidden;
  aspect-ratio:1.4/1;border-radius:12px;
  background:var(--bg-card);border:1px solid var(--border);
  cursor:pointer;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),border-color .25s ease,box-shadow .3s ease;
  padding:14px;
}
.genre-tile:hover,.genre-tile:focus-visible{
  transform:translateY(-6px) scale(1.04);
  border-color:var(--genre-color, var(--accent));
  box-shadow:0 0 24px rgba(var(--genre-color,var(--accent)),.25),0 12px 36px rgba(0,0,0,.7);
  outline:none;
}
.genre-tile.active{
  border-color:var(--genre-color, var(--accent));
  background:color-mix(in srgb,var(--genre-color, var(--accent)) 14%,var(--bg-card));
  box-shadow:0 0 28px rgba(var(--genre-color,var(--accent)),.3);
}
.genre-tile-glow{
  position:absolute;inset:-40%;border-radius:50%;
  background:radial-gradient(circle,var(--genre-color,rgba(229,9,20,.25)) 0%,transparent 70%);
  opacity:0;transition:opacity .35s ease;pointer-events:none;
}
.genre-tile:hover .genre-tile-glow{opacity:.38}
.genre-tile.active .genre-tile-glow{opacity:.28}
.genre-tile-icon{
  font-size:clamp(22px,3.5vw,32px);
  color:var(--genre-color, var(--accent));
  filter:drop-shadow(0 0 10px var(--genre-color,var(--accent)));
  transition:transform .3s ease;
}
.genre-tile:hover .genre-tile-icon{transform:scale(1.2)}
.genre-tile-label{
  font-size:clamp(11px,1.5vw,14px);font-weight:700;color:#fff;
  letter-spacing:.04em;text-transform:uppercase;
}

/* ── Results Section ── */
.genres-results{
  padding:0 var(--page-pad) 48px;
  max-width:1400px;margin:0 auto;
}
.genres-results-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:24px;gap:12px;flex-wrap:wrap;
}
.genres-results-title-row{
  display:flex;align-items:center;gap:12px;
}
.genres-results-title{
  font-size:clamp(1.2rem,2.8vw,1.7rem);font-weight:800;color:#fff;
  display:flex;align-items:center;gap:10px;
}

/* ── Results Card Grid ── */
.genres-results-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(clamp(120px,13vw,165px),1fr));
  gap:14px;
}
.genre-result-card{
  position:relative;border-radius:var(--radius);overflow:hidden;cursor:pointer;
  background:var(--bg-card);border:1px solid transparent;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),border-color .25s ease,box-shadow .3s ease;
  animation:cardUp .45s ease both;
}
.genre-result-card:hover{
  transform:scale(1.07) translateY(-6px);
  border-color:rgba(255,255,255,.12);
  box-shadow:0 16px 48px rgba(0,0,0,.8);
}
.genre-card-img-wrap{
  position:relative;aspect-ratio:2/3;overflow:hidden;
}
.genre-card-img{width:100%;height:100%;object-fit:cover;display:block;background:var(--bg-3)}
.genre-card-placeholder{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg-card);color:var(--text-muted);font-size:2rem;
}
.genre-card-badge{
  position:absolute;top:7px;left:7px;
  font-size:9px;font-weight:800;letter-spacing:.08em;
  padding:3px 7px;border-radius:3px;z-index:3;
}
.genre-card-badge.MOVIE{background:rgba(229,9,20,.82);color:#fff}
.genre-card-badge.SERIES{background:rgba(67,97,238,.82);color:#fff}
.genre-card-rating{
  position:absolute;bottom:6px;left:6px;
  background:rgba(0,0,0,.72);backdrop-filter:blur(6px);
  color:var(--gold);font-size:10px;font-weight:700;
  padding:3px 6px;border-radius:4px;z-index:5;
  display:flex;align-items:center;gap:3px;
}
.genre-card-info{padding:8px 8px 10px}
.genre-card-title{
  font-size:11.5px;font-weight:700;color:#fff;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin-bottom:3px;
}
.genre-card-year{font-size:10px;color:var(--text-muted)}

/* ── Skeleton Loaders ── */
.genre-card-skeleton{
  aspect-ratio:2/3;border-radius:var(--radius);
  overflow:hidden;background:var(--bg-card);position:relative;
}
.skeleton-shimmer{
  position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.07) 50%,transparent 100%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;
}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}

/* ── Empty / Error ── */
.genres-empty{
  grid-column:1/-1;text-align:center;padding:60px 20px;
  color:var(--text-muted);display:flex;flex-direction:column;align-items:center;gap:14px;
}
.genres-empty i{font-size:2.5rem;opacity:.4}
.genres-empty p{font-size:1rem}

/* ── Load More ── */
.genres-load-more-wrap{
  display:flex;justify-content:center;margin-top:28px;
}
.genres-load-more-btn{
  background:var(--bg-card);color:#fff;
  border:1px solid var(--border);border-radius:8px;
  padding:12px 28px;font-size:14px;font-weight:600;cursor:pointer;
  display:flex;align-items:center;gap:8px;
  transition:background .25s ease,border-color .25s ease;
}
.genres-load-more-btn:hover{background:var(--bg-3);border-color:rgba(255,255,255,.2)}

/* ── Responsive ── */
@media(max-width:600px){
  .genres-grid{grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:10px}
  .genre-tile{aspect-ratio:1.2/1}
  .genres-results-grid{grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:10px}
}