/* ============================================
   ROLLIT — BROWSE CSS
   The one catalog page: media-type filter × category tabs, over either a
   poster grid or the Top Charts list (rows styled in css/charts.cb51421f.css).
   ============================================ */

/* ---- HERO ---- */
.browse-hero {
  background: linear-gradient(135deg, #0e1020 0%, #120e1a 50%, #0e1820 100%);
  border-bottom: 0.5px solid var(--border); padding: 3rem 2.5rem 2.2rem;
}
.browse-hero-inner { max-width: var(--content-max, 1100px); margin: 0 auto; }
.browse-title {
  font-family: 'Bebas Neue', sans-serif; font-size: 3rem; line-height: 1;
  letter-spacing: 2px; margin-bottom: 6px; display: flex; align-items: center; gap: 12px;
}
.browse-sub { font-size: 14px; color: var(--muted); }

.browse-wrap { max-width: var(--content-max, 1100px); margin: 0 auto; padding: 1.6rem 2.5rem 3rem; }

/* ---- CONTROLS: media type (segmented) over category tabs ----
   Two rows, not one: the type is a lens on the whole page and the category is
   what you're looking at through it, so they read as different questions. */
.browse-controls { margin-bottom: 1.6rem; }

.browse-types {
  display: inline-flex; gap: 2px; margin-bottom: 12px;
  background: var(--surface2, rgba(255,255,255,.04));
  border: 0.5px solid var(--border2, rgba(255,255,255,.1));
  border-radius: 10px; padding: 3px;
}
.browse-type {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; border-radius: 8px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600;
  background: none; border: none; color: var(--muted); transition: all .15s;
}
.browse-type:hover { color: var(--text); }
.browse-type.active { background: var(--surface, #1a1b28); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.browse-type i { font-size: 15px; }

/* ---- CATEGORY TABS ---- */
.browse-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.browse-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 8px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600;
  background: var(--surface2, rgba(255,255,255,.04));
  border: 0.5px solid var(--border2, rgba(255,255,255,.1)); color: var(--muted);
  transition: all .15s;
}
.browse-tab:hover { color: var(--text); border-color: rgba(255,255,255,.22); }
.browse-tab.active { background: var(--gold); color: #1a1000; border-color: var(--gold); }
.browse-tab i { font-size: 15px; }

/* Third row, Top Charts only: how to rank + share the result. */
.browse-subbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-top: 12px;
}
.browse-subbar .rank-share-btn { margin-left: 0; }

/* ---- GRID (reuses .media-card, sized 150px) ---- */
.browse-grid { display: flex; flex-wrap: wrap; gap: 18px 16px; justify-content: flex-start; }
/* Browse isn't a ranking and rows aren't "first" — neutralise both. */
.browse-grid .card-rank { display: none; }
.browse-grid .media-card.first-card { flex: 0 0 150px; width: 150px; }
.browse-grid .media-card.first-card .media-poster,
.browse-grid .media-card.first-card .media-poster-ph { height: 210px; }
.browse-grid .media-card.first-card .wl-btn { top: 174px; }
.browse-grid .media-card.first-card .rate-btn { top: 174px; }

/* ---- LIST (Top Charts) ----
   Same container as the grid, different class: the rows come from
   css/charts.cb51421f.css and only need a narrower measure to stay readable. */
.browse-list { display: block; max-width: 900px; margin: 0 auto; }

/* ---- FOOTER / LOAD MORE ---- */
.browse-foot { display: flex; justify-content: center; margin-top: 2rem; min-height: 40px; }
.browse-more {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 22px; border-radius: 10px; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 600;
  background: var(--surface2, rgba(255,255,255,.05)); color: var(--text);
  border: 0.5px solid var(--border2, rgba(255,255,255,.14)); transition: all .15s;
}
.browse-more:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-1px); }
.browse-more i { font-size: 16px; }
.browse-end { font-size: 12px; color: var(--dim); }

@media (max-width: 640px) {
  .browse-hero { padding: 2.2rem 1.2rem 1.6rem; }
  .browse-title { font-size: 2.2rem; }
  .browse-wrap { padding: 1.2rem 1rem 2.5rem; }
  .browse-grid { gap: 14px; justify-content: center; }
  /* Six categories don't fit a phone row, so the tabs scroll sideways rather
     than wrapping into a three-line block above every grid. */
  .browse-types { display: flex; width: 100%; }
  .browse-type { flex: 1; justify-content: center; padding: 7px 10px; }
  .browse-tabs {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin: 0 -1rem; padding: 2px 1rem;
  }
  .browse-tabs::-webkit-scrollbar { display: none; }
  .browse-tab { flex: 0 0 auto; }
  .browse-subbar { margin-top: 10px; }
}