/* Proportional museum-stage layout for the current class page. */
.current-class-body {
  min-height: 100vh;
  background: #050708;
}

.current-class-page {
  position: relative;
  width: 100%;
  aspect-ratio: 1672 / 941;
  margin: 0 auto;
  overflow: hidden;
  container-type: inline-size;
  background:
    linear-gradient(180deg, rgba(2, 5, 6, 0.08), rgba(2, 5, 6, 0.34)),
    url("images/this-years-inductees-announcement-background.png?v=20260806-1") center / 100% 100% no-repeat;
}

.current-class-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.current-class-display {
  position: absolute;
  inset: 0;
}

.current-class-upper,
.current-class-primary {
  display: contents;
}

.current-class-right {
  display: contents;
}

.class-category {
  position: absolute;
  width: 24%;
  min-width: 0;
  padding: 0;
  text-align: center;
  text-shadow:
    0 1px 0 rgba(225, 215, 196, 0.14),
    0 2px 4px rgba(0, 0, 0, 0.92);
}

.class-category h2 {
  position: relative;
  margin: 0 0 1.15cqw;
  color: #66848a;
  font: italic 600 1.7cqw/1 "Barlow Condensed", Impact, sans-serif;
  letter-spacing: 0.09cqw;
  text-transform: uppercase;
}

.class-category h2::after {
  display: block;
  width: 2.1cqw;
  height: 0.1cqw;
  margin: 0.62cqw auto 0;
  content: "";
  background: #78864c;
  box-shadow: 0 0 5px rgba(120, 134, 76, 0.25);
}

.class-category ul {
  display: grid;
  gap: 0.38cqw;
  margin: 0;
  padding: 0;
  list-style: none;
}

.class-category li {
  color: #c3bbad;
  font: 500 1.48cqw/1.08 "Barlow Condensed", Arial, sans-serif;
  letter-spacing: 0.045cqw;
}

.class-category-player {
  top: 24.5%;
  left: 25%;
  transform: translateX(-50%);
}

.class-category-umpire {
  top: 24.5%;
  left: 50%;
  transform: translateX(-50%);
}

.class-category-manager {
  top: 24.5%;
  left: 75%;
  transform: translateX(-50%);
}

.class-category-director {
  top: 41.5%;
  left: 75%;
  transform: translateX(-50%);
}

.class-category-special {
  top: 52%;
  left: 75%;
  transform: translateX(-50%);
}

.current-class-honor {
  position: absolute;
  top: 62%;
  left: 30%;
  width: 40%;
  margin: 0;
}

.current-class-honor .class-category {
  position: static;
  width: 100%;
}

.class-category-honor h2 {
  color: #8b9953;
  font-size: 2.05cqw;
}

.class-category-honor h2::after {
  background: #557f88;
}

.class-category-honor li {
  color: #c9bead;
  font-size: 1.72cqw;
}

@media (max-width: 900px) {
  .current-class-page {
    min-height: 100vh;
    aspect-ratio: auto;
    padding: 110px 20px 80px;
    overflow: visible;
    background:
      linear-gradient(180deg, rgba(2, 5, 6, 0.18), rgba(2, 5, 6, 0.58)),
      url("images/this-years-inductees-announcement-background.png?v=20260806-1") center top / auto 100vh no-repeat;
  }

  .current-class-display {
    position: relative;
    inset: auto;
  }

  .current-class-upper,
  .current-class-primary {
    display: grid;
    grid-template-columns: 1fr;
  }

  .current-class-right {
    display: grid;
    gap: 18px;
  }

  .class-category {
    position: static;
    width: auto;
    padding: 18px 16px;
    transform: none;
    background: rgba(3, 7, 8, 0.78);
    border: 1px solid rgba(10, 116, 155, 0.25);
  }

  .class-category h2 {
    margin-bottom: 16px;
    font-size: clamp(23px, 7vw, 34px);
    letter-spacing: 1.7px;
  }

  .class-category h2::after {
    width: 42px;
    height: 2px;
    margin-top: 11px;
  }

  .class-category ul {
    gap: 7px;
  }

  .class-category li {
    font-size: clamp(21px, 6vw, 30px);
    letter-spacing: 0.85px;
  }

  .current-class-honor {
    position: static;
    width: 100%;
    margin-top: 28px;
  }

  .class-category-honor h2 {
    font-size: clamp(27px, 8vw, 41px);
  }

  .class-category-honor li {
    font-size: clamp(23px, 7vw, 35px);
  }
}