/* ================================
   SECTION-SPECIFIC STYLES
   ================================ */

/* ─────────────────────────────── */
/* TEAM GRID OVERRIDE             */
/* ─────────────────────────────── */

.team-grid-override {
  display: grid;
  grid-template-columns: 1fr;
  width: 90%;
  max-width: 1800px;
  margin: 0 auto;
}

@media (min-width: 600px) {
  .team-grid-override {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .team-grid-override {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ─────────────────────────────── */
/* PREVIOUS STAFF CONTAINER       */
/* ─────────────────────────────── */

#prev-staff-container {
  width: 100%;
  overflow: hidden;
  transition: max-height 0.7s ease-in-out, opacity 0.7s ease-in-out;
}

/* ─────────────────────────────── */
/* SCROLLBAR CUSTOMIZATION        */
/* ─────────────────────────────── */

/* Global scrollbar base */
::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

::-webkit-scrollbar-track {
  background: var(--bg-dark);
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-purgatory);
  border: 3px solid var(--bg-dark);
  border-radius: 0;
  box-shadow: var(--glow-purgatory);
  transition: all var(--transition-base);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-inferno);
  box-shadow: var(--glow-inferno-large);
}

::-webkit-scrollbar-corner {
  background: var(--bg-dark);
}

/* Firefox support */
* {
  scrollbar-color: var(--color-purgatory) var(--bg-dark);
  scrollbar-width: auto;
}

/* ─────────────────────────────── */
/* REGION-SPECIFIC SCROLLBARS     */
/* ─────────────────────────────── */

/* Inferno section */
.inferno-scroll::-webkit-scrollbar-thumb {
  background-color: var(--color-inferno);
  box-shadow: var(--glow-inferno);
}

.inferno-scroll::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-inferno-light);
  box-shadow: var(--glow-inferno-large);
}

/* Purgatory section */
.purgatory-scroll::-webkit-scrollbar-thumb {
  background-color: var(--color-purgatory);
  box-shadow: var(--glow-purgatory);
}

.purgatory-scroll::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-purgatory-hover);
  box-shadow: var(--glow-purgatory-large);
}

/* Paradise section */
.paradise-scroll::-webkit-scrollbar-thumb {
  background-color: var(--color-paradise);
  box-shadow: var(--glow-paradise);
}

.paradise-scroll::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-paradise-hover);
  box-shadow: var(--glow-paradise-large);
}

/* Lore/Corruption section */
.lore-scroll::-webkit-scrollbar-thumb {
  background-color: var(--color-lore);
  box-shadow: var(--glow-lore);
}

.lore-scroll::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-lore-hover);
  box-shadow: var(--glow-lore-large);
}