/*
 * Home page hero carousel (replaces Smart Slider 3 slider 8).
 * Sizes and offsets reproduce the old slider:
 * - 1280x700 ratio, full width
 * - tablet: slide area capped at 768px wide, so the hero is at most 420px tall
 * - mobile: at least 292px tall
 * The tablet and mobile media queries are the ones Smart Slider used.
 */

.amc-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1280 / 700;
  overflow: hidden;
  background: #fff;
  container-type: inline-size;
  /* width of the area the old slider laid its layers out in, used by the floating button */
  --amc-hero-stage: 100cqw;
  /* drag to change slides; vertical swipes still scroll the page */
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.amc-hero.is-dragging {
  cursor: grabbing;
}

.amc-hero img {
  -webkit-user-drag: none;
}

.amc-hero__track,
.amc-hero__slide {
  position: absolute;
  inset: 0;
}

.amc-hero__slide {
  opacity: 0;
  z-index: 1;
  /* crossfade, 400ms easeOutQuad */
  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.amc-hero__slide.is-active {
  opacity: 1;
  z-index: 2;
}

.amc-hero__slide picture,
.amc-hero__slide img {
  display: block;
  width: 100%;
  height: 100%;
}

.amc-hero__slide img {
  object-fit: cover;
  max-width: none;
}

/* buttons sit 10px above the bottom edge, centered */
.amc-hero__cta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  text-align: center;
  line-height: 0;
}

/*
 * last slide: the old button sat in a 167px-wide layer scaled with the slide area.
 * It is centered when the layer is wider than the button, and starts at the layer's
 * left edge when the button is wider (overflowing lines align to the start).
 */
.amc-hero__cta--floating {
  right: auto;
  left: calc(50% - var(--amc-hero-stage) * 0.0652895);
  width: calc(var(--amc-hero-stage) * 0.130579);
  bottom: calc(10px + var(--amc-hero-stage) * 0.0046875);
  white-space: nowrap;
}

.amc-hero .homepage-btns {
  position: relative;
  top: -84px;
  display: inline-block;
  padding: 8px 45px;
  font-family: 'Catamaran', Helvetica, Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  background: #ba0c2f;
  border: solid 4px #fff;
  border-radius: 20px;
  box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.55);
}

.amc-hero .homepage-btns:hover,
.amc-hero .homepage-btns:focus {
  background: #fff;
  color: #ba0c2f;
}

/* per-slide offsets win over the breakpoint offsets below, like the !important rules they replace */
.amc-hero .homepage-btns.learnmore-align {
  top: -30px;
}

.amc-hero .homepage-btns.alaska-lang-position {
  top: -60px;
}

.amc-hero__arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  line-height: 0;
  cursor: pointer;
  transform: translateY(-50%);
}

.amc-hero__arrow--prev {
  left: 15px;
}

.amc-hero__arrow--next {
  right: 15px;
}

.amc-hero__arrow svg {
  display: block;
  width: 32px;
  height: 32px;
}

@media screen and (max-width: 1440px) {
  .amc-hero .homepage-btns {
    top: -74px;
  }
}

@media screen and (max-width: 1024px) {
  .amc-hero .homepage-btns {
    top: 9px;
  }

  .amc-hero .homepage-btns.learnmore-align {
    top: 0;
  }
}

@media screen and (max-width: 768px) {
  /* !important because the Customizer CSS sets .homepage-btns padding and font-size with !important */
  .amc-hero .homepage-btns {
    top: -13px;
    padding: 8px 20px !important;
    font-size: 12px !important;
  }
}

/* tablet */
@media (orientation: landscape) and (max-width: 1199px) and (min-width: 901px), (orientation: portrait) and (max-width: 1199px) and (min-width: 701px) {
  .amc-hero {
    max-height: 420px;
    --amc-hero-stage: min(100cqw, 768px);
  }
}

/* mobile */
@media (orientation: landscape) and (max-width: 900px), (orientation: portrait) and (max-width: 700px) {
  .amc-hero {
    min-height: 292px;
  }

  /* the old slider centered mobile buttons 5px right of center */
  .amc-hero__cta {
    padding-left: 10px;
  }

  .amc-hero__cta--floating {
    padding-left: 0;
  }

  .amc-hero__arrow svg {
    width: 16px;
    height: 16px;
  }
}