/* ==========================================================================
   FLUX PRIME — category-carousel.css
   Horizontal category carousel. 4 cards visible on desktop, 3 on mobile.
   Requires: base.css, js/category-carousel.js
   ========================================================================== */

.cat-carousel {
  --visible: 4;              /* cards in view — desktop */
  --gap: var(--space-4);
  position: relative;
}

/* --------------------------------------------------------------------------
   Track
   -------------------------------------------------------------------------- */
.cat-track {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* room for the hover lift so it isn't clipped by the scroll box */
  padding-block: var(--space-2) var(--space-3);
  overscroll-behavior-x: contain;
}
.cat-track::-webkit-scrollbar { display: none; }
.cat-track:focus-visible { outline-offset: 6px; }

.cat-carousel.is-dragging .cat-track {
  scroll-behavior: auto;
  scroll-snap-type: none;
  cursor: grabbing;
}
.cat-carousel.is-dragging .cat-card { pointer-events: none; }

.cat-item {
  flex: 0 0 calc((100% - (var(--visible) - 1) * var(--gap)) / var(--visible));
  scroll-snap-align: start;
}

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */
.cat-card {
  position: relative;
  display: block;
  height: 100%;
  aspect-ratio: 3 / 4.15;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  overflow: hidden;
  isolation: isolate;
  background: var(--color-surface-2);
  transition: border-color var(--dur-mid) var(--ease-out),
              transform var(--dur-mid) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease-out);
}

/* Fallback so a missing photo still reads as a card, not a void. */
.cat-card__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(90% 70% at 70% 20%, rgba(212, 175, 55, 0.22), transparent 70%),
    linear-gradient(160deg, var(--color-surface-3), var(--color-bg));
}
.cat-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out),
              filter var(--dur-mid) var(--ease-out);
  filter: saturate(0.85) contrast(1.02);
}

/* Legibility scrim under the label. */
.cat-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(10, 10, 10, 0.96) 0%,
    rgba(10, 10, 10, 0.82) 22%,
    rgba(10, 10, 10, 0.34) 48%,
    rgba(10, 10, 10, 0) 74%
  );
  transition: opacity var(--dur-mid) var(--ease-out);
}

.cat-card__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: var(--space-4);
  display: grid;
  gap: var(--space-1);
}

.cat-card__index {
  font-family: var(--font-head);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-faint);
}

.cat-card__title {
  font-size: clamp(0.95rem, 1.5vw, 1.3rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-text);
  text-wrap: balance;
}

.cat-card__meta {
  font-size: 0.75rem;
  color: var(--color-text-light);
}

/* CTA slides up on hover / keyboard focus. */
.cat-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  margin-top: var(--space-2);
  padding: 0.6em 1.1em;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border-radius: var(--radius-pill);
  font-family: var(--font-head);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-mid) var(--ease-out),
              transform var(--dur-mid) var(--ease-out);
}
.cat-card__cta svg { width: 1em; height: 1em; }

/* --- Hover / focus state --- */
@media (hover: hover) {
  .cat-card:hover {
    border-color: var(--color-accent);
    transform: translateY(-4px);
    box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.35), 0 18px 44px rgba(0, 0, 0, 0.55);
  }
  .cat-card:hover .cat-card__media img { transform: scale(1.06); filter: saturate(1) contrast(1.04); }
  .cat-card:hover .cat-card__cta { opacity: 1; transform: translateY(0); }
}
.cat-card:focus-visible {
  border-color: var(--color-accent);
  outline: none;
  box-shadow: 0 0 0 2px var(--color-accent);
}
.cat-card:focus-visible .cat-card__cta { opacity: 1; transform: translateY(0); }

/* On touch the CTA is always shown — there is no hover to reveal it. */
@media (hover: none) {
  .cat-card__cta { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Controls
   -------------------------------------------------------------------------- */
.carousel-nav {
  display: flex;
  gap: var(--space-2);
}
.carousel-btn {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}
.carousel-btn:hover:not(:disabled) {
  color: var(--color-accent-ink);
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.carousel-btn:disabled { opacity: 0.3; cursor: default; }
.carousel-btn svg { width: 17px; height: 17px; }

/* Scroll-position rail */
.cat-rail {
  position: relative;
  height: 2px;
  margin-top: var(--space-5);
  background: var(--color-border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.cat-rail__thumb {
  position: absolute;
  inset: 0 auto 0 0;
  width: 25%;
  background: var(--color-accent);
  border-radius: inherit;
  transform: translateX(0);
  transition: transform 120ms linear, width var(--dur-fast) var(--ease-out);
}

/* --------------------------------------------------------------------------
   Responsive — card counts
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .cat-carousel { --visible: 3; }
}
@media (max-width: 720px) {
  .cat-carousel { --visible: 3; --gap: var(--space-2); }
  .cat-card { aspect-ratio: 3 / 4.6; }
  .cat-card__body { padding: var(--space-3) var(--space-2); }
  .cat-card__title { font-size: 0.8rem; }
  /* Three cards across a phone leaves ~108px each — only the title fits.
     The whole card is the link, so the pill CTA isn't needed here. */
  .cat-card__meta,
  .cat-card__index,
  .cat-card__cta { display: none; }
  .carousel-nav { display: none; }   /* swipe instead */
}