/* Styles for the custom elements in assets/scripts/components.js and
   assets/scripts/slider.js. Every selector is qualified by the element name:
   the site's other stylesheets carry unqualified element and attribute
   selectors that would otherwise reach in. */

logo-marquee {
  --logo-visible: 11;
  --logo-step: 1.5s;

  container-type: inline-size;
  display: flex;
  overflow: hidden;
  width: 100%;

  .logo-marquee-track {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    animation: logo-marquee-scroll calc(var(--logo-count, 12) * var(--logo-step)) linear infinite;

    > * {
      flex: 0 0 calc(100cqw / var(--logo-visible));
      padding: 0 8px;
      text-align: center;

      img {
        max-width: 100%;
        height: auto;
      }
    }
  }

  @container (width <= 767px) {
    .logo-marquee-track > * {
      flex-basis: calc(100cqw / 4);
    }
  }

  @container (width <= 520px) {
    .logo-marquee-track > * {
      flex-basis: calc(100cqw / 3);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    overflow-x: auto;

    .logo-marquee-track {
      animation: none;
    }
  }
}

@keyframes logo-marquee-scroll {
  to {
    transform: translateX(-100%);
  }
}

breeze-carousel {
  --carousel-radius: 0px;
  --carousel-perspective: 2500px;
  --carousel-slide-width: 70%;

  display: block;
  perspective: var(--carousel-perspective);

  .breeze-carousel-stage {
    position: relative;
    height: clamp(220px, 34vw, 560px);
    transform-style: preserve-3d;
    transition: transform 1.2s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  }

  .breeze-carousel-slide {
    position: absolute;
    inset: 0 auto 0 50%;
    width: var(--carousel-slide-width);
    margin-left: calc(var(--carousel-slide-width) / -2);
    cursor: pointer;

    button {
      display: block;
      width: 100%;
      height: 100%;
      padding: 0;
      border: 0;
      background: none;
      cursor: pointer;
    }

    img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .breeze-carousel-dots {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 24px;

    button {
      width: 12px;
      height: 12px;
      padding: 0;
      border: 1px solid #fff;
      border-radius: 50%;
      background: transparent;
      cursor: pointer;

      &[aria-selected="true"] {
        background: #fff;
      }
    }
  }

  /* The carousel spans the page width, so the perspective tier is a viewport
     question -- a container query cannot restyle its own container anyway. */
  @media (width <= 981px) {
    --carousel-perspective: 500px;
    --carousel-slide-width: 90%;
  }

  @media (prefers-reduced-motion: reduce) {
    .breeze-carousel-stage {
      transition: none;
    }
  }
}

breeze-slider,
.breeze-slider {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  max-width: var(--slider-max-width, none);
  margin: 0 auto;
  aspect-ratio: var(--slider-ratio, 2500 / 1203);

  /* pan-y keeps the page scrollable vertically while the slider claims
     horizontal drags for itself. */
  touch-action: pan-y;

  .breeze-slider-track {
    display: flex;
    height: 100%;
    transition: transform 500ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  /* A drag must not start a native link/image drag or select the slide text. */
  a,
  img {
    -webkit-user-drag: none;
    user-select: none;
  }

  .breeze-slider-slide {
    position: relative;
    flex: 0 0 100%;
    height: 100%;

    /* A slide's image is sometimes wrapped (an <a>, or a .main-img div in the
       stored galleries), and a percentage height against an auto-height wrapper
       resolves to auto -- which left the image sitting in the top of its box. */
    > * {
      display: block;
      width: 100%;
      height: 100%;
    }

    img {
      display: block;
      width: 100%;
      height: 100%;
      /* The banner is full-bleed and crops; a gallery holds whatever aspect
         ratio the author uploaded, so it fits inside instead. */
      object-fit: var(--slider-fit, cover);
    }
  }

  .breeze-slider-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: var(--slider-arrow-size, 65px);
    height: var(--slider-arrow-size, 65px);
    translate: 0 -50%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 200ms;

    &:hover,
    &:focus-visible {
      opacity: 1;
    }

    svg {
      width: 100%;
      height: 100%;
    }

    /* An unstroked <polyline> fills black. `.a` is the class the stored
       galleries put on theirs. */
    polyline,
    .a {
      fill: none;
      stroke: #fff;
      stroke-width: 360;
      stroke-miterlimit: 10;
    }
  }

  [data-slider="prev"] {
    left: var(--slider-arrow-inset, 25px);
  }

  [data-slider="next"] {
    right: var(--slider-arrow-inset, 25px);
  }

  .breeze-slider-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    z-index: 2;
    display: flex;
    gap: 8px;
    translate: -50% 0;

    button {
      width: 14px;
      height: 14px;
      padding: 0;
      border: 1px solid #fff;
      border-radius: 50%;
      background: rgb(255 255 255 / 0.35);
      cursor: pointer;

      &[aria-selected="true"] {
        background: #fff;
      }
    }
  }

  /* A control sized for a 2500px banner is oversized on a phone, and 25px of
     inset is a large share of a 390px slider. */
  @media (width <= 767px) {
    --slider-arrow-size: 38px;
    --slider-arrow-inset: 6px;

    .breeze-slider-dots button {
      width: 10px;
      height: 10px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .breeze-slider-track {
      transition: none;
    }
  }
}