/* Browse-only layout. Everything shared with the home page lives in
   styles.css; this is the grid and the shorter masthead. */

/* The hero is a header here, not the whole first screen — the grid is the
   point of the page, so it should be visible without scrolling. */
.hero-browse {
  height: 58vh;
  min-height: 340px;
}

.nav-solid { background: rgba(10, 10, 10, 0.92); }
.nav-links a.active { color: #fff; font-weight: 700; }

.browse-main {
  padding: 26px 48px 60px;
  min-height: 40vh;
}
.browse-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 18px;
}
.browse-head h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 34px;
  letter-spacing: 0.02em;
  color: #fff;
}
.browse-count {
  font-size: 13px;
  color: var(--text-dim);
}

/* auto-fill rather than a fixed count, so the grid reflows from phone to
   ultrawide without breakpoints. */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 18px 14px;
}

.gcard {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gcard img,
.gcard-fallback {
  width: 100%;
  aspect-ratio: 2 / 3;      /* posters, not 16:9 stills */
  object-fit: cover;
  border-radius: 5px;
  background: #1c1c1c;
  display: block;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.gcard-fallback {
  display: grid;
  place-items: center;
  padding: 10px;
  text-align: center;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.35;
}
.gcard:hover img,
.gcard:hover .gcard-fallback {
  transform: scale(1.05);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.65);
}
.gcard-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.gcard-title {
  font-size: 13px;
  font-weight: 500;
  color: #e5e5e5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gcard-sub {
  font-size: 11px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grid-status {
  padding: 30px 0;
  color: var(--text-dim);
  font-size: 14px;
}
.load-more {
  display: block;
  margin: 28px auto 0;
}

@media (max-width: 720px) {
  .browse-main { padding: 20px 20px 48px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 14px 10px; }
  .hero-browse { height: 46vh; min-height: 260px; }
}