/* ============================================================================
   coverflow.css — styles for the slider built by resources/coverflow.js.

   Generic and unscoped so the component can be mounted on any page. Everything
   scales off --cf-card, which coverflow.js sets from its `cardWidth` option.
   Accent colour (arrows, active dot) comes from --cf-accent.
   ========================================================================== */

.cf {
  --cf-accent: #1200ff;
  --cf-ink: #0a0a0a;
  width: 100%;
}

.cf-rel { position: relative; }

.cf-frame {
  cursor: grab;
  overflow: hidden;
  padding: 40px 0 34px;
  outline: none;
  /* Horizontal drag belongs to the slider; the page keeps vertical scroll.
     Without this the browser claims the touch gesture and the drag dies. */
  touch-action: pan-y;
}
.cf-frame:active { cursor: grabbing; }
.cf-frame:focus-visible {
  outline: 3px solid var(--cf-accent);
  outline-offset: -10px;
  border-radius: 22px;
}

.cf-stage {
  position: relative;
  height: calc(var(--cf-card) / var(--cf-aspect, 1));
  transform-style: preserve-3d;
  user-select: none;
  -webkit-user-select: none;
}

.cf-card {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--cf-card);
  aspect-ratio: var(--cf-aspect, 1);
  overflow: hidden;
  border-radius: 22px;
  background: #ededea;
  cursor: pointer;
  box-shadow: 0 30px 60px -20px rgba(10, 10, 10, .5);
  /* Keeps each card on its own compositor layer — without it the rake
     judders mid-drag on weaker phones. */
  will-change: transform;
}
.cf-card img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-select: none;
  color: transparent;
}

.cf-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--cf-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
}

.cf-nav {
  position: absolute;
  top: 50%;
  z-index: 200;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 999px;
  background: var(--cf-accent);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .15s ease;
}
.cf-nav:hover { transform: translateY(-50%) scale(1.08); }
.cf-prev { left: 0; }
.cf-next { right: 0; }

.cf-caption { text-align: center; }
.cf-caption .cf-title { font-weight: 700; }
.cf-caption .cf-sub { opacity: .7; }

.cf-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.cf-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: var(--cf-ink);
  opacity: .18;
  transition: opacity .2s ease, width .2s ease, background .2s ease;
}
.cf-dot.on {
  opacity: 1;
  background: var(--cf-accent);
  width: 28px;
}

@media (prefers-reduced-motion: reduce) {
  .cf-nav { transition: none; }
  .cf-dot { transition: none; }
}