/*
 * IG Parts homepage hero layer.
 *
 * Loaded only for the trusted IG Parts channel after its existing portal skin.
 * It deliberately does not define global or GoFleet selectors.
 */
body.igparts-site .igparts-home__hero {
  display: block;
  padding-bottom: 72px;
}

body.igparts-site .igparts-home__media {
  position: relative;
  aspect-ratio: 2170 / 725;
  min-height: clamp(360px, 28vw, 560px);
  margin: 0;
  border: 0;
  border-radius: 0;
  background: var(--ig-navy);
  overflow: hidden;
}

body.igparts-site .igparts-home__hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: 2170 / 725;
  object-fit: cover;
  object-position: 82% center;
}

body.igparts-site .igparts-home__hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 0 clamp(28px, 3vw, 52px);
}

body.igparts-site .igparts-home__hero-pill {
  width: min(76%, 980px);
  padding: clamp(30px, 4vw, 64px) clamp(32px, 5vw, 80px);
  border-radius: 0 clamp(72px, 11vw, 176px) clamp(72px, 11vw, 176px) 0;
  background: var(--ig-navy);
  color: var(--ig-white);
}

body.igparts-site .igparts-home__hero-pill h1 {
  max-width: 15ch;
  margin: 0 0 18px;
  color: var(--ig-white);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(36px, 4vw, 62px);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

body.igparts-site .igparts-home__hero-pill .igparts-home__intro {
  max-width: 52ch;
  margin: 0;
  color: var(--ig-white);
  font-size: clamp(17px, 1.7vw, 23px);
  line-height: 1.45;
}

body.igparts-site .igparts-home__hero-overlay .igparts-home__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 24px 0 0 clamp(32px, 5vw, 80px);
}

body.igparts-site .igparts-home__hero-overlay .igparts-button {
  min-width: min(100%, 220px);
  min-height: 56px;
  padding: 14px 30px;
  font-size: 18px;
}

@media (max-width: 900px) {
  body.igparts-site .igparts-home__media {
    min-height: 0;
    aspect-ratio: auto;
    overflow: visible;
  }

  body.igparts-site .igparts-home__hero-media {
    position: static;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-position: 78% center;
  }

  body.igparts-site .igparts-home__hero-overlay {
    position: static;
    display: block;
    padding: 0;
  }

  body.igparts-site .igparts-home__hero-pill {
    width: auto;
    margin: -28px 16px 0 0;
    padding: 30px 28px;
    border-radius: 0 64px 64px 0;
  }

  body.igparts-site .igparts-home__hero-overlay .igparts-home__actions {
    display: grid;
    grid-template-columns: 1fr;
    margin: 20px 16px 0 0;
  }

  body.igparts-site .igparts-home__hero-overlay .igparts-button {
    width: 100%;
  }
}