/* ==========================================================================
   THEME-TOP  —  Default hero
   ========================================================================== */

.theme-top {
  position: relative;
  overflow: hidden;
  min-height: clamp(250px, 390px, 390px);
  height: calc(clamp(250px, 50vw, 900px) - 230px);
  padding-bottom: 60px;
  display: flex;
  flex-wrap: wrap;
  align-content: end;
}

.theme-top:before {
  content: '';
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  right: 0;
  height: 100%;
  background:
    linear-gradient(0deg, rgba(0,0,0,0) 59.75%, rgba(0,0,0,.68) 100%),
    linear-gradient(180deg, rgba(0,0,0,0) 59.75%, rgba(0,0,0,.68) 100%);
}

.theme-top .hero-media {
  position: absolute;
  overflow: hidden;
  height: 100%;
  width: 100%;
}
.theme-top .hero-media:before {
  content: '';
  width: 100%;
  height: 70px;
  background: #fff;
  position: absolute;
  z-index: 2;
  bottom: 0;
}

.theme-top .hero-media img {
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
  object-position: center;
  display: block;
}

.theme-top .hero-media:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.55) 100%);
}

.theme-top .hero-content {
  position: relative;
  z-index: 2;
  color: #fff;
  text-align: left;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-align: left;
}

.hero-title {
  color: #FFF;
  font-style: normal;
  text-align: left;
  font-family: var(--serif);
  font-size: 72px;
  font-weight: 600;
  line-height: 126%;
  letter-spacing: -0.01em;
  margin: 0;
}

.hero-lede {
  max-width: 799px;
  margin: 0 auto;
  font-size: var(--body-lg);
}
@media (max-width: 1200px) {
  .hero-title { font-size: 5vw; }
}
@media (max-width: 768px) {
  .theme-top {
    padding-bottom: 40px;
  }
}

@media (max-width: 520px) {
  .theme-top {
    padding-bottom: 30px;
  }
}


/* ==========================================================================
   VARIANT: Scholarship
   ========================================================================== */

.theme-top--scholarship {
  min-height: 450px;
  height: clamp(600px, 47vw, 900px);
  padding-bottom: 60px;
  align-content: flex-end;
}

.theme-top--scholarship:before {
  display: none;
}

/* Blue triangle uses base .hero-triangle + .hero-triangle--blue */

/* Starburst icon next to title */
.hero-starburst {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-starburst img {
  width: 101px;
  height: 102px;
}

/* Title + starburst row */
.theme-top--scholarship .info-row {
  display: flex;
  align-items: center;
  gap: 24px;
}

.theme-top--scholarship .hero-content {
  justify-content: flex-start;
  text-align: left;
}

.theme-top--scholarship .hero-title {
  text-align: left;
  font-family: var(--serif);
  font-size: 72px;
  font-weight: 600;
  line-height: 126%;
  letter-spacing: -0.01em;
  margin: 0;
}

/* Logo overlay */
.hero-logo {
  position: absolute;
  left: 250px;
  bottom: 340px;
  z-index: 3;
}

.hero-logo img {
  width: 227px;
  height: auto;
}


/* ==========================================================================
   VARIANT: Eligibility
   ========================================================================== */

.theme-top--eligibility {
  min-height: 450px;
  height: clamp(600px, 47vw, 900px);
  padding-bottom: 60px;
  align-content: flex-end;
}

.theme-top--eligibility:before {
  display: none;
}

/* Yellow hash lines — top right, flipped */
.hero-hash--yellow {
  position: absolute;
  top: 101px;
  right: 0;
  width: 48%;
  height: 42px;
  z-index: 1;
  overflow: hidden;
  transform: scaleX(-1);
}

.hero-hash--yellow img {
  width: 250%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0) saturate(100%) invert(86%) sepia(51%) saturate(564%) hue-rotate(11deg) brightness(102%) contrast(93%);
}

/* White hash lines — bottom left */
.hero-hash--white {
  position: absolute;
  top: 634px;
  left: 0;
  width: 50.7%;
  height: 72px;
  z-index: 1;
  overflow: hidden;
}

.hero-hash--white img {
  width: 250%;
  height: 100%;
  object-fit: cover;
}

/* Triangle — base positioning */
.hero-triangle {
  z-index: 2;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 200px;
  max-width: 60%;
  min-width: 750px;
  clip-path: polygon(100% 0, 100% 65%, 92% 100%, 0 100%, 0 0);
}

/* Triangle — color variants */
.hero-triangle--green  { background: #408257; }
.hero-triangle--blue   { background: #037ABF; }
.hero-triangle--orange { background: #F26836; }
.hero-triangle--dark-green { background: #004F42; }

/* Highlight :before overlay */
.theme-top--highlight-before,
.theme-top--highlight-before .hero-media:before {
  background: #fff;
}
.theme-top--highlight-green,
.theme-top--highlight-green .hero-media:before {
  background: #CDE7CA;
}
.theme-top--highlight-yellow,
.theme-top--highlight-yellow .hero-media:before {
  background: #F4F3B8;
}
.theme-top--highlight-blue,
.theme-top--highlight-blue .hero-media:before {
  background: #CCE1F4;
}

/* No media — full-width triangle */
.theme-top--no-media {min-height: auto;height: auto;padding: 40px 0;}
.theme-top--no-media:before { display: none }
.hero-triangle--full { max-width: 100%; clip-path: polygon(100% 0, 100% 65%, 95% 100%, 0 100%, 0 0); }

/* Badge / shield icon */
.hero-badge {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-badge svg,
.hero-badge img {
  width: 108px;
  height: 95px;
}

/* Title + badge row */
.theme-top .info-row {
  display: flex;
  align-items: center;
  gap: 24px;
}

@media (max-width: 991px) {
  .theme-top {
    padding-bottom: 30px
  }
  .theme-top--no-media {
    padding: 20px 0;
  }
  .theme-top .hero-media:before {
    height: 50px;
  }
  .hero-title { font-size: 42px }
  .hero-triangle {
    height: 150px;
    width: 70%;
    min-width: 550px;
    max-width: none;
  }
  .theme-top--no-media .hero-triangle  {
    width: 100%
  }
  .hero-badge svg, .hero-badge img {
    width: 60px;
  }
}
@media (max-width: 768px) {
  .theme-top {
    padding-bottom: 15px
  }
  .theme-top--no-media {
    padding: 10px 0;
  }
  .theme-top .hero-media:before {
    height: 40px;
  }
  .hero-title { font-size: 32px }
  .hero-triangle {
    height: 120px;
    width: 70%;
    min-width: 450px;
    max-width: none;
  }
  .hero-badge svg, .hero-badge img {
    width: 40px;
  }
}
@media (max-width: 520px) {
  .theme-top {
    padding-bottom: 0px
  }
  .theme-top--no-media {
    padding: 0 0;
  }
  .theme-top .hero-media:before {
    height: 35px;
  }
  .hero-title { font-size: 28px; }
  .hero-triangle {
    height: 95px;
    width: 95%;
    min-width: 95%;
    max-width: none;
  }
  .theme-top .info-row {
    gap: 10px;
    width: 100%;
  }
  .hero-badge svg, .hero-badge img {
    width: 30px;
  }
}