/* The hero carousel (it-340; the focus stage, fix-340-carousel): the product, screen by screen, as PNGs
 * (templates/site/_carousel.html). One screen in focus fills the page's column; the screens before and after it show
 * past the column, dimmed and stepped back, so the set reads as something to swipe. Each screen carries its own caption
 * (its name and one line) above it; under the screens, one capsule of dots — the dot in play stretched into a bar that
 * fills over the turn — with arrows either side on a wide window.
 *
 * With no script it is already a carousel: a scroll-snap strip that swipes on a phone and scrolls with a trackpad, each
 * screen with its caption, the dots plain links to each screen. The site's carousel script makes it live (--live): the
 * screens out of focus step back, the dots become a tab list with keys, the arrows appear, and autoplay — the dot in
 * play's fill: its animation's end advances the screen, so a pointer over the carousel, focus inside it or the carousel
 * being scrolled away pauses the slideshow by pausing the animation, and picking a screen ends it (the script drops
 * --auto). No pause button (Aldo, 2026-10-20). The interval is --mkt-carousel-interval, the geometry --mkt-carousel-*
 * (tokens.css).
 */

/* A screen's width: the page's column, or the carousel's width (100cqi — it is a size container) less a peek and a gap
 * each side, whichever is narrower. Declared here, not with the tokens: a custom property's var()s resolve where it is
 * declared, so declared on :root it would never see the phone's narrower peek and gap. */
.mkt-carousel {
  position: relative;
  container-type: inline-size;
  --mkt-carousel-slide: min(calc(var(--mkt-container) - 2 * var(--mkt-gutter)), calc(100cqi - 2 * (var(--mkt-carousel-peek) + var(--mkt-carousel-gap))));
}

/* The strip: as wide as the page; padded so the first and last screens can sit in focus too. A scroller clips at its own
 * edges, so it carries the room for its screens' shadow above and below (pulled back above, so the caption stays where
 * it was; the controls sit inside the room below). */
.mkt-carousel__track {
  position: relative;
  display: flex;
  gap: var(--mkt-carousel-gap);
  margin-top: calc(-1 * var(--mkt-carousel-shadow-top));
  padding: var(--mkt-carousel-shadow-top) calc((100cqi - var(--mkt-carousel-slide)) / 2) var(--mkt-carousel-shadow-bottom);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.mkt-carousel__track::-webkit-scrollbar {
  display: none;
}

/* A screen and its caption. Captions differ in length, so each screen sits at the foot of its slide: every picture on
 * the same line, its caption just above it. */
.mkt-carousel__slide {
  flex: 0 0 var(--mkt-carousel-slide);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--mkt-space-5);
  margin: 0;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  transition: opacity var(--mkt-duration-slide) ease, transform var(--mkt-duration-slide) ease;
}

/* Live, the screens out of focus step back — and pick themselves when pressed. Their captions go: one caption at a time. */
.mkt-carousel--live .mkt-carousel__slide:not(.mkt-carousel__slide--current) {
  opacity: var(--mkt-carousel-dim);
  transform: scale(var(--mkt-carousel-shrink));
  cursor: pointer;
}

.mkt-carousel--live .mkt-carousel__slide:not(.mkt-carousel__slide--current) .mkt-carousel__caption {
  visibility: hidden;
}

.mkt-carousel__caption {
  display: flex;
  flex-direction: column;
  gap: var(--mkt-space-1);
  max-width: var(--mkt-measure-lg);
}

.mkt-carousel__name {
  display: inline-flex;
  align-items: center;
  gap: var(--mkt-space-2-5);
  font-family: var(--mkt-font-display);
  font-size: var(--mkt-size-h3);
  font-weight: var(--mkt-weight-bold);
  line-height: var(--mkt-leading-title);
  letter-spacing: var(--mkt-tracking-tight);
  color: var(--mkt-ink);
}

.mkt-carousel__name .mkt-icon {
  width: var(--mkt-icon-md);
  height: var(--mkt-icon-md);
  color: var(--mkt-purple);
}

.mkt-carousel__line {
  font-size: var(--mkt-size-body);
  line-height: var(--mkt-leading-body);
  color: var(--mkt-muted);
  text-wrap: balance;
}

/* A screenshot: the window drawn in the PNG; the corners and the lift are the site's. */
.mkt-shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--mkt-radius-2xl);
  background: var(--mkt-surface);
  box-shadow: var(--mkt-shadow-hero);
}

/* Under the screens, inside their shadow's room: the arrows either side of the dots — above the strip, which would
 * otherwise take their clicks (its padding is that room). */
.mkt-carousel__controls {
  position: relative;
  z-index: var(--mkt-layer-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--mkt-space-3);
  margin-top: calc(var(--mkt-space-6) - var(--mkt-carousel-shadow-bottom));
}

.mkt-carousel__arrow {
  display: inline-grid;
  place-items: center;
  width: var(--mkt-tap);
  height: var(--mkt-tap);
  padding: 0;
  border: 0;
  border-radius: var(--mkt-radius-pill);
  background: var(--mkt-tint);
  color: var(--mkt-ink);
  cursor: pointer;
  transition: background-color var(--mkt-duration-fast) ease;
}

.mkt-carousel__arrow[hidden] {
  display: none;
}

.mkt-carousel__arrow:hover {
  background: var(--mkt-tint-strong);
}

.mkt-carousel__arrow .mkt-icon {
  width: var(--mkt-icon-md);
  height: var(--mkt-icon-md);
}

/* The dots' capsule. Each dot is a full-height target around a small pip. */
.mkt-carousel__dots {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--mkt-space-3);
  border-radius: var(--mkt-radius-pill);
  background: var(--mkt-tint);
}

.mkt-carousel__dot {
  display: inline-flex;
  align-items: center;
  height: var(--mkt-tap);
  padding: 0 var(--mkt-space-1);
}

.mkt-carousel__pip {
  position: relative;
  overflow: hidden;
  width: var(--mkt-dot-sm);
  height: var(--mkt-dot-sm);
  border-radius: var(--mkt-radius-pill);
  background: var(--mkt-lilac-on-dark);
  transition: width var(--mkt-duration-slide) ease, background-color var(--mkt-duration-fast) ease;
}

.mkt-carousel__dot:hover .mkt-carousel__pip {
  background: var(--mkt-orchid);
}

.mkt-carousel__dot[aria-selected='true'] .mkt-carousel__pip {
  width: var(--mkt-carousel-pip-on);
  background: var(--mkt-ring);
}

/* The dot in play's fill: full once a visitor has picked; with autoplay on, the clock. */
.mkt-carousel__progress {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 0;
  background: var(--mkt-purple);
}

.mkt-carousel__dot[aria-selected='true'] .mkt-carousel__progress {
  width: 100%;
}

/* The clock reads its play state from one switch, so nothing that starts it can override a pause (a shorthand
 * `animation` resets the play state; a separate pause rule lost to it on specificity). */
.mkt-carousel--auto .mkt-carousel__dot[aria-selected='true'] .mkt-carousel__progress {
  animation: mkt-carousel-progress var(--mkt-carousel-interval) linear forwards;
  animation-play-state: var(--mkt-carousel-play, running);
}

/* Paused by a pointer over the carousel, focus inside it, or the carousel out of view (the script's --away). */
.mkt-carousel:hover,
.mkt-carousel:focus-within,
.mkt-carousel--away {
  --mkt-carousel-play: paused;
}

@keyframes mkt-carousel-progress {
  from { width: 0; }
  to { width: 100%; }
}

/* Narrower than a wide window, the caption goes under its screen: above it, its line would run into the hero's dot.
 * The pictures still share one line, now their top. */
@media (max-width: 959px) {
  .mkt-carousel__slide {
    flex-direction: column-reverse;
  }
}

/* A phone: the screen takes nearly the width, its neighbors are slivers, the caption is smaller, and the arrows go — a
 * swipe or the dots do it. */
@media (max-width: 719px) {
  .mkt-carousel {
    --mkt-carousel-gap: var(--mkt-space-3);
    --mkt-carousel-peek: var(--mkt-space-4);
  }

  .mkt-carousel__slide {
    gap: var(--mkt-space-3);
  }

  .mkt-carousel__name {
    font-size: var(--mkt-size-body-lg);
  }

  .mkt-carousel__line {
    font-size: var(--mkt-size-md);
  }

  .mkt-shot {
    border-radius: var(--mkt-radius-lg);
  }

  .mkt-carousel__arrow {
    display: none;
  }
}

/* Reduced motion: the strip jumps, nothing eases, and the clock never runs — even if it was asked for while the page
 * was open (the reset's near-zero animations would otherwise end each turn at once). */
@media (prefers-reduced-motion: reduce) {
  .mkt-carousel__track {
    scroll-behavior: auto;
  }

  .mkt-carousel__slide,
  .mkt-carousel__pip {
    transition: none;
  }

  .mkt-carousel__progress {
    animation: none !important;
  }
}