/* Final category hero reference composition.
 * Recreates the approved integrated banner: a clear pale copy lane on the left,
 * a long soft dissolve through the middle, and wide artwork anchored to the right.
 */

body.auin-inner-route .auin-archive-page .auin-archive-hero__copy {
  width: auto;
  max-width: 55%;
}

body.auin-inner-route .auin-archive-page .auin-archive-hero__visual {
  width: 58vw;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgb(0 0 0 / 8%) 10%,
    rgb(0 0 0 / 28%) 22%,
    rgb(0 0 0 / 58%) 34%,
    rgb(0 0 0 / 86%) 46%,
    #000 55%,
    #000 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgb(0 0 0 / 8%) 10%,
    rgb(0 0 0 / 28%) 22%,
    rgb(0 0 0 / 58%) 34%,
    rgb(0 0 0 / 86%) 46%,
    #000 55%,
    #000 100%
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

body.auin-inner-route .auin-archive-page .auin-archive-hero__visual img {
  object-position: 68% center;
}

body.auin-inner-route .auin-archive-page .auin-page-hero.auin-archive-hero::after {
  background: linear-gradient(
    90deg,
    #f7fbff 0%,
    #f7fbff 40%,
    rgb(247 251 255 / 98%) 46%,
    rgb(247 251 255 / 90%) 51%,
    rgb(247 251 255 / 72%) 56%,
    rgb(247 251 255 / 46%) 61%,
    rgb(247 251 255 / 20%) 66%,
    rgb(247 251 255 / 6%) 70%,
    transparent 72%
  );
}

body.auin-inner-route .auin-archive-page .auin-archive-hero__highlights {
  width: 100%;
  max-width: 100%;
}

body.auin-inner-route .auin-archive-page .auin-archive-hero__highlight {
  padding-right: 14px;
  padding-left: 14px;
}

body.auin-inner-route .auin-archive-page .auin-archive-hero__highlight:first-child {
  padding-left: 0;
}

body.auin-inner-route .auin-archive-page .auin-archive-hero__highlight small {
  max-width: 100%;
}

@media (max-width: 1160px) {
  body.auin-inner-route .auin-archive-page .auin-archive-hero__copy {
    max-width: 58%;
  }

  body.auin-inner-route .auin-archive-page .auin-archive-hero__visual {
    width: 56vw;
  }
}

@media (max-width: 980px) {
  body.auin-inner-route .auin-archive-page .auin-archive-hero__copy {
    max-width: 60%;
  }

  body.auin-inner-route .auin-archive-page .auin-archive-hero__visual {
    width: 54vw;
  }
}

@media (max-width: 720px) {
  body.auin-inner-route .auin-archive-page .auin-archive-hero__copy {
    max-width: none;
  }

  body.auin-inner-route .auin-archive-page .auin-archive-hero__visual {
    width: 100%;
    -webkit-mask-image: none;
    mask-image: none;
  }

  body.auin-inner-route .auin-archive-page .auin-archive-hero__visual img {
    object-position: center center;
  }
}