/* ============================================================
   USE CASES: coverflow carousel
   Fixed dark panel (#050b1f). Reads on both light and dark page themes.
   Cards shown whole; no overlays, no chips. The images speak for themselves.
   ============================================================ */

/* ---- Visually hidden utility ---- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border-width: 0;
}

/* ---- Card size token ---- */
:root { --uc-sz: clamp(240px, 32vw, 480px); }

/* ---- Section ---- */
.uc-section {
  background: #050b1f;
  overflow: hidden;
  padding-block: clamp(72px, 9vw, 120px);
  /* divider — in dark mode the hero bg is also #050b1f, so without this
     line the two sections blend together (light mode divides via contrast) */
  border-top: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset;
}

/* ---- Typography overrides: always-dark background ---- */
.uc-section .h2,
.uc-section h2  { color: #ffffff; }
.uc-section .lead { color: rgba(255, 255, 255, .60); }
.uc-section .eyebrow {
  color: #21BCEE;
  background: rgba(33, 188, 238, .12);
  border-color: rgba(33, 188, 238, .28);
}

/* ---- Setup line ("More viewers, more cost. Until now.") ---- */
.uc-setup {
  font-family: var(--font-display);
  font-size: clamp(.9375rem, calc(.8rem + .85vw), 1.375rem);
  font-weight: 600;
  color: rgba(255, 255, 255, .42);
  margin: 0 0 clamp(10px, 1.5vw, 18px);
}

/* ---- Heading block ---- */
.uc-head { max-width: 820px; margin-bottom: clamp(56px, 7vw, 96px); }

/* ---- Coverflow: wrapper, side-fade, nav buttons ---- */
.uc-cf-wrap {
  position: relative;
  width: 100%;
}

/* Edge gradients fade far cards into the section background */
.uc-cf-wrap::before,
.uc-cf-wrap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(40px, 7%, 120px);
  z-index: 15;
  pointer-events: none;
}
.uc-cf-wrap::before {
  left: 0;
  background: linear-gradient(to right, #050b1f 20%, transparent 100%);
}
.uc-cf-wrap::after {
  right: 0;
  background: linear-gradient(to left,  #050b1f 20%, transparent 100%);
}

/* ---- Stage: full-width; cards overflow visible, clipped by section ---- */
.uc-stage {
  position: relative;
  width: 100%;
  height: var(--uc-sz);
  overflow: visible;
}

/* ---- Card ---- */
.uc-card {
  position: absolute;
  top: 0;
  left: 50%;
  width:  var(--uc-sz);
  height: var(--uc-sz);
  margin-left: calc(var(--uc-sz) * -.5);
  border-radius: var(--r-xl);
  overflow: hidden;
  cursor: pointer;
  transition:
    transform 0.58s cubic-bezier(.4, 0, .2, 1),
    opacity   0.52s cubic-bezier(.4, 0, .2, 1);
  will-change: transform, opacity;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .75);
}
.uc-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}
.uc-card[data-state="center"] {
  cursor: default;
  box-shadow:
    0 48px 120px -24px rgba(0, 0, 0, .95),
    0 0 0 1px rgba(33, 188, 238, .14);
}

/* ---- Prev / next buttons ---- */
.uc-prev, .uc-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(5, 11, 31, .78);
  color: rgba(255, 255, 255, .80);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.uc-prev { left:  clamp(12px, 2.5vw, 36px); }
.uc-next { right: clamp(12px, 2.5vw, 36px); }
.uc-prev:hover, .uc-next:hover {
  background: rgba(33, 188, 238, .18);
  border-color: rgba(33, 188, 238, .50);
  color: #21BCEE;
}
.uc-prev:focus-visible, .uc-next:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(33, 188, 238, .55);
}
.uc-prev svg, .uc-next svg { width: 20px; height: 20px; flex: none; }

/* ---- Dot indicators ---- */
.uc-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-top: clamp(28px, 4vw, 44px);
}
.uc-dot {
  position:relative;
  width:44px;height:44px;
  border-radius:50%;
  background:transparent;
  border:none;padding:0;cursor:pointer;
}
.uc-dot::before{
  content:"";
  position:absolute;left:50%;top:50%;
  width:6px;height:6px;
  border-radius:50%;
  background:rgba(255, 255, 255, .42);
  transform:translate(-50%,-50%);
  transition:background .25s,transform .25s,box-shadow .25s;
}
.uc-dot.active::before {
  background: #21BCEE;
  transform:translate(-50%,-50%) scale(1.5);
  box-shadow: 0 0 6px rgba(33, 188, 238, .65);
}
.uc-dot:focus-visible { outline: 2px solid #21BCEE; outline-offset: 0; }

/* ============================================================
   REDUCED MOTION: static grid, no animation
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .uc-cf-wrap::before,
  .uc-cf-wrap::after { display: none; }
  .uc-prev, .uc-next, .uc-dots { display: none; }

  .uc-stage {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    height: auto;
    overflow: visible;
    padding: 0 var(--gutter);
  }
  .uc-card {
    position: static;
    left: auto; top: auto; margin-left: 0;
    flex: 0 0 calc(25% - 12px);
    height: auto;
    aspect-ratio: 1;
    opacity: 1 !important;
    transform: none !important;
    cursor: default;
  }
}
@media (prefers-reduced-motion: reduce) and (max-width: 900px) {
  .uc-card { flex: 0 0 calc(33.33% - 11px); }
}
@media (prefers-reduced-motion: reduce) and (max-width: 580px) {
  .uc-card { flex: 0 0 calc(50% - 8px); }
}
@media (prefers-reduced-motion: reduce) and (max-width: 390px) {
  .uc-card { flex: 0 0 100%; max-width: 100%; }
}

/* ---- Mobile adjustments ---- */
@media (max-width: 480px) {
  .uc-prev, .uc-next { width: 44px; height: 44px; }
  .uc-prev svg, .uc-next svg { width: 16px; height: 16px; }
  .uc-prev { left: 8px; }
  .uc-next { right: 8px; }
}