/* ============================================================
   Kontakt.io — Video Carousel — V2
   Root class: .kio-video-carousel2
   Desktop first, 1200px container. Responsive down to 320px.

   V1's stylesheet with the root class renamed, so both versions can
   sit on one page without either one restyling the other, cut down to
   the band, the title row and the video, plus two new rules for the
   single-video case — both marked "V2 — single video".

   What came out with the tiles and panels: every __tile*, __panel*,
   __stat*, __categories and __deco rule, their responsive overrides,
   the tile-button theme override, and the tokens only they used
   (--kio-pink-light, --kio-red-hover, --kio-red-active, --kio-tile-bg,
   --kio-tile-padding, --kio-radius-md, --kio-section-bg) — about a
   third of the file. Everything that stayed is byte-for-byte V1 — verified
   by measuring both versions side by side: band, inner, meta, name,
   counter, frame, video, nav and arrow all render identically.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display=swap');

.kio-video-carousel2 {
  /* Brand tokens — /memory/brand.md. Only the four this module can
     still reach are declared; V1's cream, light pink and the two
     darker reds went with the tiles and panels that used them. */
  --kio-white: #FFFFFF;
  --kio-red: #FF0032;       /* focus rings, button */
  --kio-red-hover: #E2002C;  /* button */
  --kio-red-active: #C4000E; /* button */
  --kio-purple: #3C2646;

  /* Layout */
  --kio-gutter: 20px;
  --kio-radius-lg: 24px;

  /* Motion — /skills/animations.md */
  --kio-ease: cubic-bezier(0.2, 0, 0.2, 1);
  --kio-transition-fast: 150ms ease-out;

  position: relative;
  /* New stacking context, so nothing in a neighbouring section can
     paint between the band and the video sitting on it. */
  isolation: isolate;
  padding: 0;
  /* No background, by request: the page's own background shows through
     behind the module. The band below is transparent for the same reason. */
  background: transparent;
  font-family: 'Poppins', sans-serif;
  -webkit-font-smoothing: antialiased;
}

.kio-video-carousel2 *,
.kio-video-carousel2 *::before,
.kio-video-carousel2 *::after {
  box-sizing: border-box;
}

/* Pulls the module up into the theme's first-section gap. The Elevate
   theme overrides give the page's first section 220px of top padding
   (.body-container .dnd-section:first-child, !important) to clear the
   header; with the band's own top padding on top of it, the module sat
   ~290px below the section edge. Negative margin, since padding cannot
   go below zero. Only applies in that first section, so anywhere else
   on a page the module never overlaps the content above it. Tune the
   variable if the header height changes. */
.body-container .dnd-section:first-child .kio-video-carousel2 {
  --kio-pull-up: 120px;
  margin-top: calc(var(--kio-pull-up) * -1);
}

/* ------------------------------------------------------------
   Purple band
   Its padding is the module's entire vertical rhythm now: 72px above
   the solution name, 88px below the arrows. V1 also carried an
   uploaded texture here and closed with a decorative shape image
   below; both are gone, and the band is now transparent.
   ------------------------------------------------------------ */

.kio-video-carousel2__band {
  position: relative;
  padding: 72px 0 88px;
  background-color: transparent;
}

.kio-video-carousel2__inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--kio-gutter);
}

/* ------------------------------------------------------------
   Counter + active solution name — Body 2, Poppins Light
   This row is the "title that goes on top": there is no separate
   section heading above it, so the band's 72px of top padding is the
   only thing setting the opening space.
   ------------------------------------------------------------ */

.kio-video-carousel2__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 20px;
  color: var(--kio-white);
  font-size: 1.625rem; /* 26px */
  font-weight: 300;
  line-height: 39px;
}

.kio-video-carousel2__counter {
  flex: 0 0 auto;
  /* Stops the row shifting when the digit changes width. */
  font-variant-numeric: tabular-nums;
}

.kio-video-carousel2__name {
  /* Direction of travel, set by JS before each swap. */
  --kio-dir: 1;
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
}

/* V2 — single video. The name is right-aligned only because the counter
   holds the left of the row; with no counter it would hang off the right
   edge on its own, reading as a stray caption. Moved to where the
   counter was, so the row still starts at the band's left edge.
   Two classes (0,2,0) so it beats the rule above whatever the order. */
.kio-video-carousel2__meta--single .kio-video-carousel2__name {
  text-align: left;
}

/* Enter-only animations. The text swaps instantly and then arrives from
   the direction of travel, so the label reads as spatially attached to
   the video that just slid in. No fade-out first: that adds latency and
   desyncs when slides are flicked in quick succession. */

.kio-video-carousel2__name--enter {
  animation: kio-video-carousel2-name-in 240ms var(--kio-ease) both;
}

.kio-video-carousel2__counter-current--enter {
  animation: kio-video-carousel2-fade-in 180ms var(--kio-ease) both;
}

@keyframes kio-video-carousel2-name-in {
  from { opacity: 0; transform: translateX(calc(var(--kio-dir) * 14px)); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes kio-video-carousel2-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ------------------------------------------------------------
   Video frame
   overflow: hidden is required to clip the track and round the
   video corners — the intended exception to CLAUDE.md rule #7.
   This module has no sticky element and no modal, and the clip
   lives on this inner frame only, never on the section.

   touch-action: pan-y hands vertical gestures back to the page so
   the carousel can never hijack scrolling.
   ------------------------------------------------------------ */

.kio-video-carousel2__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--kio-radius-lg);
  background: var(--kio-white);
  touch-action: pan-y;
  cursor: grab;
}

@supports not (aspect-ratio: 16 / 9) {
  .kio-video-carousel2__frame::before {
    content: '';
    display: block;
    padding-top: 56.25%;
  }
}

.kio-video-carousel2__frame--dragging {
  cursor: grabbing;
}

.kio-video-carousel2__frame:focus-visible {
  outline: 2px solid var(--kio-red);
  outline-offset: 3px;
}

/* V2 — single video. Nothing is bound to the frame, so it must not offer
   a grab hand: a cursor that promises a drag and delivers nothing is a
   worse lie than no affordance at all. touch-action stays as it is —
   pan-y is what keeps a vertical swipe scrolling the page.
   Two classes (0,2,0) so it wins over the base rule regardless of where
   this sits in the file. */
.kio-video-carousel2__frame.kio-video-carousel2__frame--single {
  cursor: default;
}

.kio-video-carousel2__track {
  position: absolute;
  inset: 0;
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Stops a drag turning into a text selection on surrounding content. */
  user-select: none;
  -webkit-user-select: none;
  /* Duration is set per-move in JS; only transform is ever animated. */
  transition-property: transform;
  transition-timing-function: var(--kio-ease);
  transition-duration: 0ms;
}

.kio-video-carousel2__slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kio-video-carousel2__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--kio-white);
  /* Deliberately NOT pointer-events: none. Pointer events bubble from the
     video up to the frame, so the drag still works while the native
     controls stay clickable. JS ignores any press that starts in the
     bottom strip, so scrubbing the seek bar never turns into a swipe.

     The frame's cursor: grab also shows over the control bar, which is not
     draggable. Nothing to be done about it: Chrome no longer exposes
     ::-webkit-media-controls-enclosure to author stylesheets, so the rule
     that would fix it is silently dropped. Cosmetic only. */
}

/* ------------------------------------------------------------
   Nav row — arrows only

   This was a three-column grid (empty 1fr / arrows / CTA) so the arrows
   held dead-centre no matter how wide the CTA's label ran. With the CTA
   removed the arrows are the only child, so plain centred flex does the
   same job. Restore the grid if a right-hand control ever returns —
   centring the arrows against a sibling needs the balancing column back.
   ------------------------------------------------------------ */

.kio-video-carousel2__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 32px 0 0;
}

.kio-video-carousel2__arrows {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.kio-video-carousel2__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  background: transparent;
  color: var(--kio-white);
  cursor: pointer;
  transition: background-color var(--kio-transition-fast),
              border-color var(--kio-transition-fast),
              color var(--kio-transition-fast),
              opacity var(--kio-transition-fast),
              transform var(--kio-transition-fast);
}

/* Gated like every other hover in this file: ungated, a tap on touch
   iPadOS left the arrow inverted to white until something else was
   tapped, which read as "this arrow is selected". */
@media (hover: hover) {
  .kio-video-carousel2__arrow:hover:not(:disabled) {
    border-color: var(--kio-white);
    background: var(--kio-white);
    color: var(--kio-purple);
  }
}

.kio-video-carousel2__arrow:active:not(:disabled) {
  transform: scale(0.94);
}

/* Dimmed and inert at each end, saying the same thing as the
   rubber-band resistance on the drag. */
.kio-video-carousel2__arrow:disabled {
  opacity: 0.15;
  cursor: default;
  pointer-events: none;
}

.kio-video-carousel2__arrow:focus-visible {
  outline: 2px solid var(--kio-red);
  outline-offset: 3px;
}

.kio-video-carousel2__chevron {
  width: 22px;
  height: 22px;
}

/* ------------------------------------------------------------
   Optional button — the approved Kontakt.io pill (Primary Button,
   /memory/brand.md), centred under the video, 32px below it.
   ------------------------------------------------------------ */

.kio-video-carousel2__cta-row {
  display: flex;
  justify-content: center;
  margin: 32px 0 0;
}

.kio-video-carousel2__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 12px 44px;
  border: 3px solid var(--kio-red);
  border-radius: 50px;
  background: var(--kio-red);
  color: var(--kio-white);
  font-family: 'Poppins', sans-serif;
  font-size: 0.9375rem; /* 15px */
  font-weight: 400;
  line-height: 23px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--kio-transition-fast),
              border-color var(--kio-transition-fast);
}

@media (hover: hover) {
  .kio-video-carousel2__cta:hover {
    border-color: var(--kio-red-hover);
    background: var(--kio-red-hover);
  }
}

.kio-video-carousel2__cta:active {
  border-color: var(--kio-red-active);
  background: var(--kio-red-active);
}

/* White, not the module's red focus ring: a red ring around a red
   button does not read as a separate outline. */
.kio-video-carousel2__cta:focus-visible {
  outline: 3px solid var(--kio-white);
  outline-offset: 3px;
}

/* The theme recolours links on every state; the label must stay white. */
.kio-video-carousel2__cta,
.kio-video-carousel2__cta:hover,
.kio-video-carousel2__cta:focus,
.kio-video-carousel2__cta:active,
.kio-video-carousel2__cta:visited,
.kio-video-carousel2__cta-label {
  color: var(--kio-white) !important;
}

/* ------------------------------------------------------------
   Screen-reader status region
   ------------------------------------------------------------ */

.kio-video-carousel2__status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------------
   Elevate theme override — link underline on hover (CLAUDE.md #15).
   The theme injects text-decoration: underline on :hover through a CSS
   variable. Covers the optional button below the video, the only
   anchor in the module. The child selectors matter because a theme rule can
   target the span inside a link rather than the link itself.
   ------------------------------------------------------------ */

.kio-video-carousel2 a:hover,
.kio-video-carousel2 a:hover span,
.kio-video-carousel2 a:focus,
.kio-video-carousel2 a:focus span {
  text-decoration: none !important;
}

/* ------------------------------------------------------------
   Tablet
   ------------------------------------------------------------ */

@media (max-width: 1023px) {
  .kio-video-carousel2__band {
    padding: 56px 0 72px;
  }

  .kio-video-carousel2__meta {
    font-size: 1.375rem; /* 22px */
    line-height: 32px;
  }

  .kio-video-carousel2__arrow {
    width: 44px;
    height: 44px;
  }
}

/* ------------------------------------------------------------
   Mobile
   ------------------------------------------------------------ */

@media (max-width: 639px) {
  .kio-video-carousel2 {
    --kio-gutter: 16px;
    /* The video frame's corner. 16px, not 12px — 12px is off the
       /memory/brand.md radius scale. */
    --kio-radius-lg: 16px;
  }

  .kio-video-carousel2__band {
    padding: 40px 0 56px;
  }

  .kio-video-carousel2__meta {
    margin-bottom: 16px;
    font-size: 1.125rem; /* 18px */
    line-height: 26px;
  }

  .kio-video-carousel2__nav {
    margin-top: 24px;
  }

  .kio-video-carousel2__cta-row {
    margin-top: 24px;
  }

  .kio-video-carousel2__arrows {
    gap: 12px;
  }

  .kio-video-carousel2__arrow {
    width: 40px;
    height: 40px;
  }

  .kio-video-carousel2__chevron {
    width: 18px;
    height: 18px;
  }

}

/* ------------------------------------------------------------
   Small mobile
   ------------------------------------------------------------ */

@media (max-width: 359px) {
  .kio-video-carousel2__meta {
    font-size: 1rem; /* 16px */
    line-height: 24px;
  }

  .kio-video-carousel2__cta {
    padding: 12px 32px;
  }

  /* The nav row used to re-stack here — arrows on one line, CTA under
     them — because the two together outgrew 360px. Two prev/next
     buttons on their own fit at any width this page will ever see, so
     there is nothing left to stack. */
}

/* ------------------------------------------------------------
   Reduced motion
   Slides still change — they jump instead of sliding. Swiping and
   the arrows keep working; only the travel is removed.
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .kio-video-carousel2 *,
  .kio-video-carousel2 *::before,
  .kio-video-carousel2 *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}