/* V18: precise hero panel, fully clear right-side background, image-as-button cards, and concise honors */
.hero {
  background-image: url('./assets/donghong-campus-hero-v18.png');
  background-position: center center;
  background-size: cover;
}

.hero::before {
  background: linear-gradient(
    90deg,
    rgba(229, 237, 242, .62) 0%,
    rgba(229, 237, 242, .48) 34%,
    rgba(229, 237, 242, .18) 58%,
    rgba(229, 237, 242, 0) 78%,
    rgba(229, 237, 242, 0) 100%
  );
}

.hero-glow {
  top: 26.4%;
  bottom: auto;
  left: 13.65vw;
  width: min(620px, 47vw);
  height: 482px;
  border: 1px solid rgba(255, 255, 255, .46);
  background: rgba(225, 234, 239, .8);
  box-shadow: 0 24px 70px rgba(8, 28, 43, .13), inset 0 1px 0 rgba(255, 255, 255, .35);
}

.hero-copy {
  text-shadow: none;
}

.industry-card {
  padding: 10px 10px 0;
}

.industry-card-button {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  color: inherit;
  cursor: zoom-in;
  text-align: left;
}

.industry-card-button img {
  width: 100%;
  aspect-ratio: 1164 / 1659;
  object-fit: cover;
  object-position: top;
}

.industry-card-button figcaption {
  padding-inline: 8px;
}

.industry-card-button:focus-visible {
  outline: 2px solid #e9d09f;
  outline-offset: 4px;
}

.industry-card:hover .industry-card-button img,
.industry-card:focus-within .industry-card-button img {
  filter: brightness(1.025);
}

.honor-list div {
  min-height: 72px;
  padding-block: 18px;
}

@media (max-width: 980px) {
  .hero {
    background-position: 54% center;
  }

  .hero::before {
    background: linear-gradient(90deg, rgba(229, 237, 242, .7), rgba(229, 237, 242, .42) 56%, rgba(229, 237, 242, 0) 100%);
  }

  .hero-glow {
    top: 25%;
    left: 20px;
    width: min(620px, calc(100% - 40px));
    height: 470px;
  }
}

@media (max-width: 620px) {
  .hero {
    background-position: 59% center;
  }

  .hero::before {
    background: linear-gradient(90deg, rgba(229, 237, 242, .76), rgba(229, 237, 242, .46) 72%, rgba(229, 237, 242, .04) 100%);
  }

  .hero-glow {
    top: 20%;
    bottom: auto;
    height: 500px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .industry-card-button img {
    transition: none;
  }
}