/* Reference desktop hero (matches the approved 1521px design). Applies from 1081px up,
   so every desktop window uses the same vertical positions. Values are fixed px, not vw.
   Heading size and photo offset are set per width range further down. */
@media (min-width: 1081px) {
  #home .hero-copy {
    max-width: 600px;
  }

  #home .hero-copy > .eyebrow {
    top: -45px;
  }

  #home .hero-copy > h1 {
    top: -44px;
  }

  #home .hero-copy > .hero-icon-row {
    top: -45px;
  }

  #home .hero-icon-row {
    width: 600px;
    max-width: 600px;
  }

  #home .hero-career-heading {
    bottom: 196px;
  }

  #home .hero-impact-statistics {
    width: 652px;
    max-width: 652px;
    bottom: 30px;
  }

  #home .hero-award-caption {
    left: 105px; /* 905px page offset; the photo box starts at 800px */
    right: auto;
    bottom: 54px;
    margin: 0;
    width: max-content;
    max-width: 420px;
    justify-content: flex-start;
  }
}

/* 1280px and up: full-size heading and photo, as in the approved design */
@media (min-width: 1280px) {
  #home h1 {
    font-size: 74px !important;
  }

  #home .hero-people {
    right: 50px;
  }
}

/* 1280px-1319px: the copy column fills the window, so the photo is scaled to keep clear of it */
@media (min-width: 1280px) and (max-width: 1319px) {
  #home .hero-people img {
    height: 600px;
  }
}

/* Desktop hero: fixed sizes so every desktop window (and Windows display scaling)
   shows the same composition. Previously these were tied to vw/vh, so they drifted. */
@media (min-width: 1081px) {
  #home.hero.hero-light {
    height: 780px;
    min-height: 0;
  }

  #home .hero-icon-row,
  #home .hero-career-heading {
    width: 600px;
    max-width: 600px;
  }
}

/* Narrowest desktops (1081px-1279px): the fixed-height photo would run into the copy column,
   so scale it down there only. From 1280px up the photo is the full size. */
@media (min-width: 1081px) and (max-width: 1279px) {
  /* 68px keeps the longest heading line clear of the photo at these widths.
     The copy column keeps the 74px height so the rest of the hero stays in the same place. */
  #home h1 {
    font-size: 68px !important;
  }

  #home .hero-copy {
    min-height: 589px;
  }

  /* Same vertical positions as 1280px+, corrected for the smaller heading */
  #home .hero-copy > .hero-icon-row {
    top: -27px;
  }

  #home .hero-career-heading {
    bottom: 206px;
  }

  #home .hero-impact-statistics {
    bottom: 39px;
  }

  #home .hero-people {
    right: 12px;
  }
  #home .hero-people img {
    height: 560px;
  }
}

/* Desktop header between 1081px and 1399px: the nav + CorpXEDGE/VTU buttons
   overflowed the right edge on 1280px-class screens. Tighten spacing only there. */
@media (min-width: 1081px) and (max-width: 1399px) {
  #siteHeader .container { padding-inline: 16px; }
  #siteHeader .header-inner { gap: 10px; }
  #siteHeader .header-section-nav .nav-desktop { gap: 14px; }
  #siteHeader .header-section-nav .nav-desktop > li > a,
  #siteHeader .header-section-nav .nav-product {
    font-size: 14px;
    padding: 11px 2px;
  }
  #siteHeader .header-cta {
    padding: 10px 12px !important;
    font-size: 14px;
  }
}

/* Phones: keep "THE IGENUINE WAY" on one line instead of wrapping "WAY" by itself */
@media (max-width: 767px) {
  #home .hero-copy > .eyebrow {
    font-size: clamp(13px, 4vw, 16px);
    letter-spacing: .08em;
    white-space: nowrap;
  }
}

/* Tablet hero: keep the desktop two-column composition (copy left, photo right)
   between 768px and 1080px instead of collapsing into one long stack.
   Desktop (1081px+) and phones (<768px) keep their own rules.
   #home prefix wins over the inline/body <style> blocks that also target the hero. */

@media (min-width: 768px) and (max-width: 1080px) {
  #home.hero.hero-light {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    column-gap: 28px;
    align-items: center;
    height: auto;
    min-height: 0;
    padding: 40px 28px 56px;
    overflow: visible;
  }

  #home .container {
    grid-column: 1;
    grid-row: 1;
    width: auto;
    max-width: none;
    height: auto;
    padding: 0;
  }

  #home .hero-grid,
  #home .hero-copy {
    display: block;
    height: auto;
    max-width: none;
  }

  /* Photo + award caption sit in the right column, same as desktop */
  #home .hero-people {
    grid-column: 2;
    grid-row: 1;
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    height: auto;
    order: 0;
    margin: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: center;
  }

  #home .hero-people img {
    width: 100%;
    max-width: 400px;
    height: auto;
    margin: 0 auto;
    transform: none;
    object-position: center;
  }

  #home .hero-award-caption {
    position: static;
    width: 100%;
    max-width: 400px;
    margin: 12px auto 0;
    justify-content: flex-start;
    text-align: left;
  }

  #home .hero h1 {
    font-size: clamp(34px, 4.6vw, 52px) !important;
  }

  /* Icon row: 6 across on wider tablets, 3 x 2 on portrait */
  #home .hero-icon-row {
    max-width: none;
    margin: 28px 0 32px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 22px;
  }

  #home .hero-icon-item {
    font-size: 12px;
  }

  #home .hero-icon-item:nth-child(3n)::after {
    display: none;
  }

  @media (min-width: 1024px) {
    #home .hero-icon-row {
      grid-template-columns: repeat(6, minmax(0, 1fr));
      row-gap: 0;
    }
    #home .hero-icon-item:nth-child(3n)::after {
      display: block;
    }
  }

  /* Career heading + stats stay in the copy column, in flow */
  #home .hero-career-heading {
    position: static;
    width: auto;
    max-width: none;
    margin: 0 0 16px;
  }

  #home .hero-career-heading strong {
    font-size: clamp(20px, 2.6vw, 28px);
  }

  #home .hero-impact-statistics {
    position: relative;
    left: auto;
    bottom: auto;
    width: 100%;
    max-width: none;
    padding-bottom: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  #home .hero-impact-card {
    padding: 10px 8px;
  }

  #home .hero-impact-value {
    font-size: clamp(13px, 1.6vw, 17px);
    white-space: normal;
    min-height: 0;
  }

  #home .hero-impact-label {
    font-size: 12px;
  }

  #home .hero-impact-description {
    font-size: 11px;
    min-height: 0;
  }

  #home .hero-impact-academic-year {
    font-size: 10px;
    white-space: normal;
  }
}