/* ###### HERO SLIDER ###### */

.hero-slider {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9; /* taller than the old 1256/445 banner, so the slider images crop less */
  overflow: hidden;
  background-color: #0f5238;

  @media (max-width: 768px) {
    aspect-ratio: 16 / 9;
  }

  .hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 900ms ease-in-out;
    pointer-events: none;

    &.active {
      opacity: 1;
    }
  }

  /* Sits over the open sky on the left of templom.jpg */
  .hero-title {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-start;
    padding-block-start: 8%;
    pointer-events: none;
    z-index: 1;

    --hero-title-edge-gap: 5.5rem; /* the title never gets closer than this to the screen edge */

    @media (max-width: 768px) {
      --hero-title-edge-gap: 2rem;
    }

    .hero-title-inner {
      max-width: 80rem;         /* same grid as .content, so the title lines up with the page below */
      width: 100%;
      margin-inline: auto;
      /* 1.5rem is .content's own gutter, so on wide screens the title lines up with it exactly.
         Once the page gutter drops below --hero-title-edge-gap, the padding grows instead,
         keeping the title away from the edge. */
      padding-inline: max(0.2rem, calc(var(--hero-title-edge-gap) - max(0px, (100% - 80rem) / 2)));
      opacity: 0;
      transform: translateY(1.25rem);
      transition: opacity 1100ms ease, transform 1100ms ease;
    }

    h1 {
      font-size: clamp(1.5rem, 3.6vw, 3.25rem);
      font-weight: 700;
      line-height: 1.15;
      color: #0f5238;
    }

    &.visible .hero-title-inner {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .hero-slider-dots {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.85rem;
    z-index: 1;

    @media (max-width: 768px) {
      bottom: 1rem;
    }
  }

  .hero-slider-dot {
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    background-color: rgb(224 235 226);;
    opacity: 0.5;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 0 0 1px rgb(0 0 0 / 0.35), 0 1px 4px rgb(0 0 0 / 0.45);
    transition: opacity 300ms ease, transform 300ms ease;

    &:hover {
      opacity: 0.8;
    }

    &.active {
      opacity: 1;
      transform: scale(1.25);
    }

    &:focus-visible {
      outline: 2px solid #ffffff;
      outline-offset: 3px;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slider .hero-slide {
    transition-duration: 0ms;
  }

  .hero-slider .hero-title .hero-title-inner {
    transition: none;
    transform: none;
  }
}