/* =============================================================================
   11. SITE — FEATURED CAPABILITY
   Split layout: illustration placeholder + copy, checklist, and a
   decorative (non-functional) progress indicator.
   ============================================================================= */
/* Depends on: tokens.css, base/utilities.css (.grid-split), base/motion.css (carousel-autoplay keyframe). */
.featured-capability .grid-split {
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .featured-capability .grid-split {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: center;
  }

  .featured-capability .grid-split > :first-child { grid-column: span 7; }
  .featured-capability .grid-split > :last-child { grid-column: span 5; }

  .featured-capability .carousel__content-column { align-self: center; }
}

.featured-capability__heading {
  font-size: var(--text-heading-sm);
  line-height: var(--lh-heading-snug);
}

.featured-capability__lead {
  font-size: var(--text-lead-sm);
  line-height: var(--lh-body);
  max-width: 48ch;
}

.featured-capability__intro {
  margin-bottom: var(--space-content-gap);
}

/* --- Capability carousel: pure CSS (radio-driven), no JavaScript ---------
   Auto-rotates every 4s via a shared keyframe animation (staggered delays,
   see `carousel-autoplay` in section 16). Manual controls are available
   from the start and, once used, override the auto-rotation permanently
   for that visit (a `!important` author rule beats a running animation
   per the CSS cascade — the only way to combine the two without JS). ---- */
.carousel {
  position: relative;
}

.carousel__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* Same-cell stacking: every slide occupies grid row/col 1, so the track
   height auto-sizes to the tallest slide and slides crossfade in place
   instead of pushing layout around. */
.carousel__viewport {
  display: grid;
}

.carousel__viewport > * {
  grid-area: 1 / 1;
}

.carousel__content-column {
  min-width: 0;
}

.carousel__image,
.carousel__slide {
  opacity: 0;
  animation: carousel-autoplay 20s ease-in-out infinite both;
}

.carousel:hover .carousel__image,
.carousel:hover .carousel__slide,
.carousel:focus-within .carousel__image,
.carousel:focus-within .carousel__slide {
  animation-play-state: paused;
}

#capability-image-1, #capability-panel-1 { animation-delay: 0s; }
#capability-image-2, #capability-panel-2 { animation-delay: 4s; }
#capability-image-3, #capability-panel-3 { animation-delay: 8s; }
#capability-image-4, #capability-panel-4 { animation-delay: 12s; }
#capability-image-5, #capability-panel-5 { animation-delay: 16s; }

.carousel__image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.carousel__slide {
  display: flex;
  flex-direction: column;
}

.carousel__slide-badge {
  margin-bottom: var(--space-4);
}

.carousel__slide-title {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--text-heading-card);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2);
}

.carousel__slide-body {
  font-size: var(--text-xs);
  line-height: var(--lh-body-sm);
  margin: 0 0 var(--space-4);
}

.carousel__slide-features {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: auto;
}

.carousel__slide-features li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
}

.carousel__slide-features li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}

.carousel__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.carousel__arrows {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.carousel__arrow {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-tertiary);
  font-size: var(--text-sm-alt);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color var(--transition-base), color var(--transition-base), transform var(--transition-base);
}

.carousel__arrow:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-strong);
  transform: translateY(-1px);
}

/* Slide 1's arrow pair is the sensible default before any manual click. */
.carousel__nav-1 {
  display: flex;
}

.carousel__dots {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border);
  cursor: pointer;
  transition: background var(--transition-base), transform var(--transition-base);
}

.carousel__dot:hover {
  background: var(--color-accent-soft);
}

.carousel__counter {
  font-size: var(--text-label-lg);
  color: var(--color-text-tertiary);
}

.carousel__counter::before {
  content: "01 / 05";
}

.carousel__radio:focus-visible ~ .grid-split .carousel__controls .carousel__dots {
  outline: 2px solid var(--color-accent-strong);
  outline-offset: 4px;
  border-radius: var(--radius-pill);
}

/* Manual override: once any radio is checked, freeze every image/slide,
   then re-reveal only the pair matching the checked radio. */
.carousel__radio:checked ~ .grid-split .carousel__image,
.carousel__radio:checked ~ .grid-split .carousel__slide {
  opacity: 0 !important;
  animation-play-state: paused !important;
}

#capability-slide-1:checked ~ .grid-split #capability-image-1,
#capability-slide-1:checked ~ .grid-split #capability-panel-1,
#capability-slide-2:checked ~ .grid-split #capability-image-2,
#capability-slide-2:checked ~ .grid-split #capability-panel-2,
#capability-slide-3:checked ~ .grid-split #capability-image-3,
#capability-slide-3:checked ~ .grid-split #capability-panel-3,
#capability-slide-4:checked ~ .grid-split #capability-image-4,
#capability-slide-4:checked ~ .grid-split #capability-panel-4,
#capability-slide-5:checked ~ .grid-split #capability-image-5,
#capability-slide-5:checked ~ .grid-split #capability-panel-5 {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

/* Manual selection also drives the arrow pair, active dot, and counter. */
.carousel__radio:checked ~ .grid-split .carousel__controls .carousel__nav-1 {
  display: none;
}

#capability-slide-1:checked ~ .grid-split .carousel__controls .carousel__nav-1,
#capability-slide-2:checked ~ .grid-split .carousel__controls .carousel__nav-2,
#capability-slide-3:checked ~ .grid-split .carousel__controls .carousel__nav-3,
#capability-slide-4:checked ~ .grid-split .carousel__controls .carousel__nav-4,
#capability-slide-5:checked ~ .grid-split .carousel__controls .carousel__nav-5 {
  display: flex;
}

#capability-slide-1:checked ~ .grid-split .carousel__controls .carousel__dots label[for="capability-slide-1"],
#capability-slide-2:checked ~ .grid-split .carousel__controls .carousel__dots label[for="capability-slide-2"],
#capability-slide-3:checked ~ .grid-split .carousel__controls .carousel__dots label[for="capability-slide-3"],
#capability-slide-4:checked ~ .grid-split .carousel__controls .carousel__dots label[for="capability-slide-4"],
#capability-slide-5:checked ~ .grid-split .carousel__controls .carousel__dots label[for="capability-slide-5"] {
  background: var(--color-accent);
  transform: scale(1.15);
}

#capability-slide-1:checked ~ .grid-split .carousel__controls .carousel__counter::before { content: "01 / 05"; }
#capability-slide-2:checked ~ .grid-split .carousel__controls .carousel__counter::before { content: "02 / 05"; }
#capability-slide-3:checked ~ .grid-split .carousel__controls .carousel__counter::before { content: "03 / 05"; }
#capability-slide-4:checked ~ .grid-split .carousel__controls .carousel__counter::before { content: "04 / 05"; }
#capability-slide-5:checked ~ .grid-split .carousel__controls .carousel__counter::before { content: "05 / 05"; }

:root[data-theme="dark"] .carousel__arrow {
  background: oklch(23% 0.036 264 / 0.84);
  border-color: color-mix(in oklch, var(--color-glow), transparent 68%);
  color: var(--color-text-primary);
  box-shadow: 0 1px 0 oklch(100% 0 0 / 0.07) inset;
}

:root[data-theme="dark"] .carousel__arrow:hover {
  border-color: var(--color-glow);
  color: var(--color-glow);
  box-shadow: 0 8px 18px oklch(2% 0.018 264 / 0.3), 0 0 14px oklch(68% 0.18 215 / 0.08);
}

:root[data-theme="dark"] .carousel__dot {
  background: color-mix(in oklch, var(--color-text-tertiary), transparent 35%);
}

:root[data-theme="dark"] .carousel__dot:hover,
:root[data-theme="dark"] .carousel__radio:checked ~ .grid-split .carousel__controls .carousel__dot {
  background: var(--color-glow);
}

:root[data-theme="dark"] .carousel__radio:focus-visible ~ .grid-split .carousel__controls .carousel__dots {
  outline-color: var(--color-glow);
}

/* Capability showcase: a quiet, layered stage that frames the supplied
   product imagery without turning it into another interface card. */
.featured-capability .carousel__showcase {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  padding: 0;
  border: 1px solid color-mix(in oklch, var(--color-border), var(--color-glow) 18%);
  border-radius: clamp(1.25rem, 2.4vw, 2rem);
  background:
    linear-gradient(135deg, color-mix(in oklch, var(--color-surface), var(--color-accent-soft) 10%), color-mix(in oklch, var(--color-surface), var(--color-bg-secondary) 18%)),
    var(--color-surface);
  box-shadow:
    0 1px 0 color-mix(in oklch, white, transparent 28%) inset,
    0 22px 54px color-mix(in oklch, var(--color-shadow), transparent 40%),
    0 8px 18px color-mix(in oklch, var(--color-accent), transparent 91%);
}

.featured-capability .carousel__showcase.carousel__viewport--image {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.featured-capability .carousel__image {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  filter: blur(2px);
  transform: translateX(14px) scale(.985);
  transition: filter 560ms cubic-bezier(.22, 1, .36, 1), transform 560ms cubic-bezier(.22, 1, .36, 1), opacity 500ms cubic-bezier(.22, 1, .36, 1);
  will-change: transform, opacity;
}

.featured-capability .carousel__tilt:hover .carousel__image {
  transform: translateY(-3px) scale(1.01);
}

@keyframes capability-showcase-autoplay {
  0% { opacity: 0; filter: blur(3px); transform: translateX(14px) scale(.985); }
  3% { opacity: 1; filter: blur(0); transform: translateX(0) scale(1); }
  20% { opacity: 1; filter: blur(0); transform: translateX(0) scale(1); }
  23% { opacity: 0; filter: blur(2px); transform: translateX(-10px) scale(.99); }
  100% { opacity: 0; filter: blur(2px); transform: translateX(-10px) scale(.99); }
}

.featured-capability .carousel__image,
.featured-capability .carousel__slide {
  animation-name: capability-showcase-autoplay;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}

@keyframes capability-copy-autoplay {
  0% { opacity: 0; transform: translateX(14px) scale(.99); }
  3% { opacity: 1; transform: translateX(0) scale(1); }
  20% { opacity: 1; transform: translateX(0) scale(1); }
  23% { opacity: 0; transform: translateX(-10px) scale(.99); }
  100% { opacity: 0; transform: translateX(-10px) scale(.99); }
}

.featured-capability .carousel__slide {
  animation-name: capability-copy-autoplay;
  filter: none;
}

/* Start on the fully resolved portion of slide one so the first capability
   is present on first paint; later slides retain their delayed entrance. */
#capability-image-1, #capability-panel-1 { animation-delay: -.6s; }
#capability-image-2, #capability-panel-2 { animation-delay: 3.4s; }
#capability-image-3, #capability-panel-3 { animation-delay: 7.4s; }
#capability-image-4, #capability-panel-4 { animation-delay: 11.4s; }
#capability-image-5, #capability-panel-5 { animation-delay: 15.4s; }

.featured-capability .carousel__slide {
  transition: filter 560ms cubic-bezier(.22, 1, .36, 1), transform 560ms cubic-bezier(.22, 1, .36, 1), opacity 500ms cubic-bezier(.22, 1, .36, 1);
}

.featured-capability .carousel__radio:checked ~ .grid-split .carousel__image,
.featured-capability .carousel__radio:checked ~ .grid-split .carousel__slide {
  filter: blur(2px);
  transform: translateX(-10px) scale(.99);
}

.featured-capability .carousel__radio:checked ~ .grid-split .carousel__slide {
  filter: none;
}

#capability-slide-1:checked ~ .grid-split #capability-image-1,
#capability-slide-2:checked ~ .grid-split #capability-image-2,
#capability-slide-3:checked ~ .grid-split #capability-image-3,
#capability-slide-4:checked ~ .grid-split #capability-image-4,
#capability-slide-5:checked ~ .grid-split #capability-image-5 {
  filter: blur(0);
  transform: translateX(0) scale(1) !important;
}

#capability-slide-1:checked ~ .grid-split #capability-image-1,
#capability-slide-2:checked ~ .grid-split #capability-image-2,
#capability-slide-3:checked ~ .grid-split #capability-image-3,
#capability-slide-4:checked ~ .grid-split #capability-image-4,
#capability-slide-5:checked ~ .grid-split #capability-image-5 {
  animation: none !important;
  filter: none !important;
}

#capability-slide-1:checked ~ .grid-split #capability-panel-1,
#capability-slide-2:checked ~ .grid-split #capability-panel-2,
#capability-slide-3:checked ~ .grid-split #capability-panel-3,
#capability-slide-4:checked ~ .grid-split #capability-panel-4,
#capability-slide-5:checked ~ .grid-split #capability-panel-5 {
  animation: none !important;
  filter: none !important;
}

#capability-slide-1:checked ~ .grid-split #capability-panel-1,
#capability-slide-2:checked ~ .grid-split #capability-panel-2,
#capability-slide-3:checked ~ .grid-split #capability-panel-3,
#capability-slide-4:checked ~ .grid-split #capability-panel-4,
#capability-slide-5:checked ~ .grid-split #capability-panel-5 {
  filter: blur(0);
}

.featured-capability .carousel__arrow:focus-visible,
.featured-capability .carousel__dot:focus-visible {
  outline: 2px solid var(--color-glow);
  outline-offset: 3px;
}

.featured-capability .carousel__dot {
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--color-text-secondary), transparent 75%);
}

:root[data-theme="dark"] .featured-capability .carousel__showcase {
  border-color: color-mix(in oklch, var(--color-glow), transparent 72%);
  background:
    linear-gradient(135deg, oklch(22% 0.039 264 / .82), oklch(14% 0.029 264 / .9)),
    var(--color-surface);
  box-shadow:
    0 1px 0 oklch(100% 0 0 / .07) inset,
    0 24px 58px oklch(2% 0.016 264 / .36),
    0 0 34px oklch(60% 0.17 292 / .07);
}

@media (max-width: 899px) {
  .featured-capability .carousel__showcase {
    min-height: 0;
  }
}

@media (max-width: 520px) {
  .featured-capability .carousel__showcase {
    border-radius: 1.15rem;
  }
}

@media (hover: none), (prefers-reduced-motion: reduce) {
  .featured-capability .carousel__tilt:hover .carousel__image { transform: none; }
}