/* ==========================================================================
   carousel.css — generic horizontal snap-scroll carousel
   Markup:
     <div class="carousel">
       <div class="carousel-track">
         <div class="card-or-whatever">…</div>
         <div class="card-or-whatever">…</div>
         …
       </div>
       <div class="carousel-controls">
         <button class="carousel-nav prev"><svg/></button>
         <div class="carousel-dots"></div>            <!-- JS-generated -->
         <button class="carousel-nav next"><svg/></button>
       </div>
     </div>
   The TRACK provides the scroll container + snap behavior. The CONTROLS row
   sits below, centered. Visual sizing of the items is left to the consumer
   (set grid-auto-columns / padding on .carousel-track in your component CSS).
   JS (landing.js section 5) wires prev/next/dots and paginates by page —
   one page = however many items fit in the visible track at the current
   viewport.
   ========================================================================== */

.carousel { position: relative; }

.carousel-track {
  display: grid;
  grid-auto-flow: column;
  align-items: start;
  gap: var(--space-22);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* Edge fade — items that peek past the visible area dissolve into the
     section background. Pure mask, so it works on any parent color
     without needing to know the bg. Override --carousel-fade-w to tune. */
  --carousel-fade-w: 80px;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--carousel-fade-w),
    #000 calc(100% - var(--carousel-fade-w)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--carousel-fade-w),
    #000 calc(100% - var(--carousel-fade-w)),
    transparent 100%
  );
}
.carousel-track::-webkit-scrollbar { display: none; }
/* Every direct child of the track is a snap target. */
.carousel-track > * {
  scroll-snap-align: start;
  min-width: 0;
}

/* ── Controls row (centered prev / dots / next) ─────────────────────────── */
.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-18);
  margin-top: var(--space-14);
}

.carousel-nav {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: white;
  color: var(--ink);
  box-shadow: var(--shadow-md);
  border: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, opacity .2s ease, box-shadow .2s ease;
}
.carousel-nav:hover { background: var(--brand); color: white; box-shadow: var(--shadow-brand); }
.carousel-nav svg.lucide,
.carousel-nav [data-lucide] { width: 22px; height: 22px; }
.carousel-nav[disabled] {
  opacity: .35;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: var(--shadow-sm);
}

/* Pagination dots — one per page, generated by JS. Active dot stretches
   into a brand-blue pill (common carousel cue). */
.carousel-dots {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
}
.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(var(--ink-rgb), .18);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease, width .2s ease;
}
.carousel-dot:hover { background: rgba(var(--ink-rgb), .35); }
.carousel-dot.is-active {
  background: var(--brand);
  width: 22px;
  border-radius: var(--pill);
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  /* Tablet/mobile: native swipe replaces the buttons; keep dots. */
  .carousel-nav { display: none; }
}
@media (max-width: 720px) {
  /* Narrower viewport — softer, narrower fade so the focused card isn't
     half-transparent. */
  .carousel-track { --carousel-fade-w: 36px; }
}