/*
 * TIME America's Best Private Companies 2026 hero, homepage only.
 * A port of the AwardHero component on acorneng.com (mgi-edp repo).
 *
 * Tablet and desktop are laid out on the ad artboards they come from, 1500px wide (portrait) and
 * 2400px wide (landscape). --u is one artboard pixel, so calc(var(--u) * 48) is 48px on the artboard
 * at any screen width. It stops growing at 0.56px / 0.6px (the landscape artboard is then 1440px) and
 * wider screens get more photo either side of the frame instead of an ever-taller hero. Phones get
 * their own fluid sizes and no portrait.
 *
 * Selectors start with body.homePage so they outrank site.css and Bootstrap's element styles.
 */

body.homePage .time-hero {
  position: relative;
  display: flex;
  justify-content: center;
  overflow: clip; /* not hidden, which can still be scrolled to reveal the cropped portrait */
  container-type: inline-size;
  background-color: #231f20;
  color: #fff;
}

body.homePage .time-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 42% 30%;
  pointer-events: none;
}

/* One artboard wide at most, so the badge and portrait stay with the title on wide screens. */
body.homePage .time-hero__frame {
  position: relative;
  flex: 1 1 auto;
  display: flex;
}

body.homePage .time-hero__stage {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  padding: 1.5rem 1rem;
}

body.homePage .time-hero__panel {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'content' 'side';
  justify-items: center;
  align-content: center;
  padding: 1.75rem 1.25rem 2rem;
  background-color: rgba(35, 31, 32, 0.84);
  text-align: center;
}

/* The logo, title and badge are images a contrast theme can't recolour, so keep the dark panel. */
@media (forced-colors: active) {
  body.homePage .time-hero__panel {
    forced-color-adjust: none;
  }
}

body.homePage .time-hero__content {
  grid-area: content;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

body.homePage .time-hero__eyebrow {
  margin: 0;
  font-size: clamp(0.8125rem, 3.4vw, 1.125rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: inherit;
}

/* The aspect ratios are the artwork's viewBoxes: they reserve space until the image loads. */
body.homePage .time-hero__logo {
  display: block;
  width: clamp(150px, 44vw, 220px);
  max-width: none;
  height: auto;
  aspect-ratio: auto 652.68 / 386.99;
  margin-top: 1rem;
}

body.homePage .time-hero__tagline {
  margin: 1rem 0 0;
  font-size: clamp(0.75rem, 3.2vw, 0.9375rem);
  font-weight: 400;
  line-height: 1.3;
  text-transform: uppercase;
  text-wrap: balance;
  color: inherit;
}

body.homePage .time-hero__title {
  margin: 1.25rem 0 0;
  width: 100%;
  line-height: 1;
}

body.homePage .time-hero__title img {
  display: block;
  width: min(100%, 420px);
  max-width: none;
  height: auto;
  aspect-ratio: auto 933.62 / 348.22;
  margin: 0 auto;
}

body.homePage .time-hero__description {
  margin: 1.25rem 0 0;
  max-width: 26em;
  font-size: clamp(1.125rem, 5vw, 1.5rem);
  font-weight: 600;
  line-height: 1.3;
  text-wrap: balance;
  color: inherit;
}

/* The badge with the button under it: below the content on phones and tablets, the left-hand column on
   desktop, which keeps the button above the fold on laptop screens. */
body.homePage .time-hero__side {
  grid-area: side;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1.5rem;
}

body.homePage .time-hero__badge {
  display: block;
  width: clamp(140px, 42vw, 200px);
  max-width: none;
  height: auto;
  aspect-ratio: auto 686.96 / 850.36;
}

/* Drawn above the portrait, which reaches this row on tablets. */
body.homePage .time-hero__button,
body.homePage .time-hero__button:hover,
body.homePage .time-hero__button:focus {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 65px;
  margin-top: 1.5rem;
  padding: 0 1.25rem;
  border-radius: 6px;
  background-color: #ccaa4b;
  color: #231f20;
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
}

body.homePage .time-hero__button:hover {
  opacity: 0.9;
}

body.homePage .time-hero__button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Phones never show the portrait; its <picture> falls back to a 1x1 GIF there, so it isn't downloaded. */
body.homePage .time-hero__portrait {
  display: none;
}

body.homePage .time-hero__portrait img {
  display: block;
  width: auto;
  max-width: none;
  height: 100%;
}

@media (min-width: 576px) {
  body.homePage .time-hero__button,
  body.homePage .time-hero__button:hover,
  body.homePage .time-hero__button:focus {
    padding: 0 1.0625rem;
    font-size: 24px;
  }
}

/* Tablet: the portrait ad. */
@media (min-width: 768px) {
  body.homePage .time-hero {
    --u: min(calc(100cqw / 1500), 0.56px);
  }

  body.homePage .time-hero__bg {
    object-position: 30% 50%;
  }

  body.homePage .time-hero__frame {
    max-width: calc(var(--u) * 1500);
  }

  body.homePage .time-hero__stage {
    padding: calc(var(--u) * 110) calc(var(--u) * 110) calc(var(--u) * 117);
  }

  body.homePage .time-hero__panel {
    padding: calc(var(--u) * 33) calc(var(--u) * 60) calc(var(--u) * 49);
  }

  body.homePage .time-hero__eyebrow {
    font-size: calc(var(--u) * 48);
  }

  body.homePage .time-hero__logo {
    width: calc(var(--u) * 344);
    margin-top: calc(var(--u) * 27);
  }

  body.homePage .time-hero__tagline {
    margin-top: calc(var(--u) * 41);
    font-size: calc(var(--u) * 37);
    line-height: 1.2;
  }

  body.homePage .time-hero__title {
    margin-top: calc(var(--u) * 63);
  }

  body.homePage .time-hero__title img {
    width: calc(var(--u) * 888);
  }

  /* The portrait's shoulder comes in from the right at the level of the last lines, so wrap greedily
     (short last line, like the ad) instead of balancing. */
  body.homePage .time-hero__description {
    max-width: calc(var(--u) * 700);
    margin-top: calc(var(--u) * 41);
    font-size: calc(var(--u) * 48);
    text-wrap: pretty;
  }

  body.homePage .time-hero__side {
    margin-top: calc(var(--u) * 56);
  }

  body.homePage .time-hero__badge {
    width: calc(var(--u) * 387);
  }

  body.homePage .time-hero__button,
  body.homePage .time-hero__button:hover,
  body.homePage .time-hero__button:focus {
    margin-top: calc(var(--u) * 48);
  }

  /* Anchored from the bottom, so it moves down with the text above it if that grows. */
  body.homePage .time-hero__portrait {
    display: block;
    position: absolute;
    z-index: 1;
    bottom: calc(var(--u) * -351);
    right: calc(var(--u) * -120);
    height: calc(var(--u) * 1611);
    pointer-events: none;
  }
}

/* Desktop: the landscape ad. */
@media (min-width: 1024px) {
  body.homePage .time-hero {
    --u: min(calc(100cqw / 2400), 0.6px);
  }

  body.homePage .time-hero__bg {
    object-position: 50% 60%;
  }

  body.homePage .time-hero__frame {
    max-width: calc(var(--u) * 2400);
  }

  body.homePage .time-hero__stage {
    padding: calc(var(--u) * 118);
  }

  body.homePage .time-hero__panel {
    grid-template-columns: 1fr minmax(0, calc(var(--u) * 1140)) 1fr;
    grid-template-areas: 'side content .';
    align-items: center;
    column-gap: calc(var(--u) * 40);
    padding: calc(var(--u) * 43) calc(var(--u) * 84) calc(var(--u) * 50);
  }

  body.homePage .time-hero__logo {
    margin-top: calc(var(--u) * 25);
  }

  body.homePage .time-hero__tagline {
    margin-top: calc(var(--u) * 27);
  }

  body.homePage .time-hero__title {
    margin-top: calc(var(--u) * 39);
  }

  body.homePage .time-hero__title img {
    width: calc(var(--u) * 934);
  }

  body.homePage .time-hero__description {
    max-width: none;
    margin-top: calc(var(--u) * 34);
    font-size: calc(var(--u) * 50);
    text-wrap: balance;
  }

  body.homePage .time-hero__side {
    justify-self: start;
    width: calc(var(--u) * 386);
    margin-top: 0;
  }

  body.homePage .time-hero__badge {
    width: 100%;
  }

  body.homePage .time-hero__button,
  body.homePage .time-hero__button:hover,
  body.homePage .time-hero__button:focus {
    margin-top: calc(var(--u) * 40);
  }

  /* From the top, so his head stays beside the title; the legs are cropped. */
  body.homePage .time-hero__portrait {
    top: calc(var(--u) * 8);
    bottom: auto;
    right: calc(var(--u) * -76);
    height: calc(var(--u) * 1668);
  }
}