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

   Two columns on desktop — copy left, video right — stacking to one
   column (copy first, video under it) at 1023px and below.

   Copy typography is measured from the "Ultimate Guide" hero mockup.
   Everything under "Video" is V2's stylesheet with the root class
   renamed; the two values that changed there are marked "V3".
   ============================================================ */

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

.kio-video-carousel3 {
  /* Brand tokens — /memory/brand.md */
  --kio-white: #FFFFFF;
  --kio-pink-light: #F9EEF0;
  --kio-red: #FF0032;
  --kio-red-hover: #E2002C;
  --kio-red-active: #C4000E;
  --kio-purple: #3C2646;

  /* Card background — design-supplied, sampled from the hero mockup.
     Not in brand.md: a dark wine base with a red glow on the left. */
  --kio-card-base: #23071B;
  --kio-card-glow: #C7343D;
  --kio-card-glow-deep: #5E1526;

  /* Layout */
  --kio-gutter: 40px;
  --kio-radius-card: 16px;
  --kio-radius-lg: 16px;

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

  position: relative;
  isolation: isolate;
  padding: 16px;
  font-family: 'Poppins', sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

/* ------------------------------------------------------------
   Card
   The glow is anchored just off the left edge and sized in px from
   the top, so it sits behind the heading and body — light text — and
   fades out before the eyebrow above and the button below, both K Red
   and both illegible on red. Re-positioned per breakpoint, because the
   copy moves. An uploaded Background image replaces it through an
   inline background-image.
   ------------------------------------------------------------ */

.kio-video-carousel3__card {
  --kio-glow-rx: 620px;
  --kio-glow-ry: 300px;
  --kio-glow-y: 330px;

  position: relative;
  padding: 40px 0;
  border-radius: var(--kio-radius-card);
  background-color: var(--kio-card-base);
  background-image: radial-gradient(
    var(--kio-glow-rx) var(--kio-glow-ry) at -80px var(--kio-glow-y),
    var(--kio-card-glow) 0%,
    var(--kio-card-glow-deep) 60%,
    rgba(94, 21, 38, 0) 85%
  );
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.kio-video-carousel3__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 64px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--kio-gutter);
}

/* No video in the group: the copy takes the whole card. */
.kio-video-carousel3__inner--no-media {
  grid-template-columns: minmax(0, 1fr);
}

/* ------------------------------------------------------------
   Copy column
   ------------------------------------------------------------ */

.kio-video-carousel3__copy {
  text-align: left;
}

.kio-video-carousel3__eyebrow {
  margin: 0 0 12px;
  color: var(--kio-red);
  font-size: 0.9375rem; /* 15px */
  font-weight: 400;
  line-height: 23px;
  letter-spacing: 1.5px;
}

/* H2 size and tracking; Medium (500) rather than brand Light (300),
   because that is what the mockup's heading is set in. */
.kio-video-carousel3__heading {
  margin: 0;
  color: var(--kio-pink-light);
  font-family: 'Poppins', sans-serif;
  font-size: 3.125rem; /* 50px */
  font-weight: 500;
  line-height: 56px;
  letter-spacing: -1px;
}

.kio-video-carousel3__body {
  margin: 24px 0 0;
  color: var(--kio-white);
  font-size: 1rem; /* 16px */
  font-weight: 400;
  line-height: 1.8;
}

.kio-video-carousel3__body p,
.kio-video-carousel3__body ul,
.kio-video-carousel3__body ol {
  margin: 0 0 16px;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.kio-video-carousel3__body > :last-child {
  margin-bottom: 0;
}

.kio-video-carousel3__body a {
  color: inherit;
  text-decoration: underline;
}

/* The approved Kontakt.io pill button. */
.kio-video-carousel3__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  margin: 48px 0 0;
  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-carousel3__cta:hover {
    border-color: var(--kio-red-hover);
    background: var(--kio-red-hover);
  }
}

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

.kio-video-carousel3__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-carousel3__cta,
.kio-video-carousel3__cta:hover,
.kio-video-carousel3__cta:focus,
.kio-video-carousel3__cta:active,
.kio-video-carousel3__cta:visited,
.kio-video-carousel3__cta-label {
  color: var(--kio-white) !important;
}

/* ------------------------------------------------------------
   Video — V2, class prefix renamed
   ------------------------------------------------------------ */

.kio-video-carousel3__media {
  min-width: 0;
}

.kio-video-carousel3__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-carousel3__counter {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

.kio-video-carousel3__name {
  --kio-dir: 1;
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
}

.kio-video-carousel3__meta--single .kio-video-carousel3__name {
  text-align: left;
}

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

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

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

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

/* overflow: hidden clips the track and rounds the video corners — the
   intended exception to CLAUDE.md rule #7, on this inner frame only.
   touch-action: pan-y hands vertical gestures back to the page. */
.kio-video-carousel3__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--kio-radius-lg);
  /* V3: purple, not white — no white box on the dark card before the
     poster or first frame arrives. */
  background: var(--kio-purple);
  touch-action: pan-y;
  cursor: grab;
}

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

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

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

.kio-video-carousel3__frame.kio-video-carousel3__frame--single {
  cursor: default;
}

.kio-video-carousel3__track {
  position: absolute;
  inset: 0;
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  user-select: none;
  -webkit-user-select: none;
  transition-property: transform;
  transition-timing-function: var(--kio-ease);
  transition-duration: 0ms;
}

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

.kio-video-carousel3__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* V3: purple, matching the frame. */
  background: var(--kio-purple);
}

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

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

.kio-video-carousel3__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);
}

@media (hover: hover) {
  .kio-video-carousel3__arrow:hover:not(:disabled) {
    border-color: var(--kio-white);
    background: var(--kio-white);
    color: var(--kio-purple);
  }
}

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

.kio-video-carousel3__arrow:disabled {
  opacity: 0.15;
  cursor: default;
  pointer-events: none;
}

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

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

.kio-video-carousel3__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)
   ------------------------------------------------------------ */

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

/* ------------------------------------------------------------
   Tablet — one column: copy first, video under it
   ------------------------------------------------------------ */

@media (max-width: 1023px) {
  .kio-video-carousel3__card {
    --kio-glow-rx: 520px;
    --kio-glow-ry: 210px;
    --kio-glow-y: 270px;
  }

  .kio-video-carousel3__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }

  .kio-video-carousel3__copy {
    max-width: 720px;
  }

  .kio-video-carousel3__heading {
    font-size: 2.625rem; /* 42px */
    line-height: 50px;
    letter-spacing: -0.84px;
  }

  .kio-video-carousel3__cta {
    margin-top: 40px;
  }

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

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

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

@media (max-width: 639px) {
  .kio-video-carousel3 {
    --kio-gutter: 24px;
    padding: 8px;
  }

  .kio-video-carousel3__card {
    --kio-glow-rx: 360px;
    --kio-glow-ry: 180px;
    --kio-glow-y: 250px;
    padding: 32px 0;
  }

  .kio-video-carousel3__inner {
    gap: 40px;
  }

  .kio-video-carousel3__eyebrow {
    font-size: 0.875rem; /* 14px */
    line-height: 20px;
    letter-spacing: 1px;
  }

  .kio-video-carousel3__heading {
    font-size: 2rem; /* 32px */
    line-height: 40px;
    letter-spacing: -0.64px;
  }

  .kio-video-carousel3__body {
    margin-top: 16px;
  }

  .kio-video-carousel3__cta {
    margin-top: 32px;
  }

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

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

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

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

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

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

@media (max-width: 359px) {
  .kio-video-carousel3 {
    --kio-gutter: 16px;
  }

  .kio-video-carousel3__heading {
    font-size: 1.75rem; /* 28px */
    line-height: 36px;
    letter-spacing: -0.56px;
  }

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

  .kio-video-carousel3__meta {
    font-size: 1rem; /* 16px */
    line-height: 24px;
  }
}

/* ------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------ */

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