/*
 * Inline blog image carousel (`.cc-carousel`).
 *
 * Markup comes from blog_carousel.py (server-rendered, already sanitized) and
 * behaviour from js/components/blogCarousel.js. The two are separable on
 * purpose: this stylesheet alone gives a working, swipeable, responsive
 * carousel through CSS scroll-snap, so the component degrades to something
 * usable if the script never loads. The script only adds buttons, dots,
 * keyboard support and autoplay -- all of which stay `hidden` until it runs.
 *
 * Loaded by the public post page, the admin editor surface and the editor's
 * Widescreen preview, so authors see exactly what readers get.
 */

.cc-carousel {
  --cc-carousel-ratio: 16 / 9;
  --cc-carousel-radius: 0.75rem;
  --cc-carousel-gap: 0.75rem;

  position: relative;
  margin: 2rem 0;
  border-radius: var(--cc-carousel-radius);
  background: var(--cc-surface-2, #1b1b1b);
}

/* ---- viewport + track -------------------------------------------------- */

.cc-carousel__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  border-radius: var(--cc-carousel-radius);
  /* Firefox / standards; the WebKit pseudo-element below covers the rest. */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* Gestures stay horizontal, so a swipe never steals the page's scroll. */
  overscroll-behavior-x: contain;
  touch-action: pan-x pinch-zoom;
}

.cc-carousel__viewport::-webkit-scrollbar {
  display: none;
}

.cc-carousel__viewport:focus-visible {
  outline: 2px solid var(--cc-accent, #4caf50);
  outline-offset: 3px;
}

.cc-carousel__track {
  display: flex;
  gap: var(--cc-carousel-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cc-carousel__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  min-width: 0;
}

.cc-carousel__figure {
  margin: 0;
}

/*
 * The ratio box reserves the slide's height before the image arrives, so a
 * carousel never shifts the article's layout as slides load (CLS).
 */
.cc-carousel__figure[data-cc-carousel-fit='cover'] .cc-carousel__image {
  aspect-ratio: var(--cc-carousel-ratio);
  object-fit: cover;
  height: auto;
}

/* `ratio=auto`: every slide keeps the image's own proportions. */
.cc-carousel__image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: var(--cc-carousel-radius);
  background: var(--cc-surface-3, #242424);
}

/* A slide whose image 404s: the alt text stays readable instead of collapsing. */
.cc-carousel__image[data-cc-carousel-broken] {
  min-height: 8rem;
  padding: 1rem;
  font-size: 0.9rem;
  color: var(--cc-text-muted, #9aa4ae);
}

.cc-carousel__caption {
  padding: 0.6rem 0.9rem 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--cc-text-muted, #9aa4ae);
}

/* ---- navigation arrows ------------------------------------------------- */

.cc-carousel__nav {
  position: absolute;
  top: calc(50% - 1.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(12, 14, 16, 0.72);
  color: #fff;
  cursor: pointer;
  transition: background-color 150ms ease, opacity 150ms ease, transform 150ms ease;
  backdrop-filter: blur(6px);
}

.cc-carousel__nav--prev { left: 0.6rem; }
.cc-carousel__nav--next { right: 0.6rem; }

.cc-carousel__nav:hover:not(:disabled) {
  background: rgba(12, 14, 16, 0.92);
}

.cc-carousel__nav:focus-visible {
  outline: 2px solid var(--cc-accent, #4caf50);
  outline-offset: 2px;
}

/* Kept in the layout (no reflow) but unreachable at the ends of a non-looping
   carousel. */
.cc-carousel__nav:disabled {
  opacity: 0.35;
  cursor: default;
}

.cc-carousel__nav-icon {
  width: 0.6rem;
  height: 0.6rem;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

.cc-carousel__nav--prev .cc-carousel__nav-icon {
  transform: translateX(2px) rotate(-135deg);
}

.cc-carousel__nav--next .cc-carousel__nav-icon {
  transform: translateX(-2px) rotate(45deg);
}

/* ---- footer: dots, counter, autoplay ----------------------------------- */

.cc-carousel__footer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem 0.8rem;
}

.cc-carousel__dots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-right: auto;
}

.cc-carousel__dot {
  width: 0.55rem;
  height: 0.55rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  cursor: pointer;
  transition: background-color 150ms ease, transform 150ms ease;
}

/* The tap target stays 44px even though the dot reads as 9px. */
.cc-carousel__dot::before {
  content: '';
  position: absolute;
  inset: -0.85rem;
}

.cc-carousel__dot {
  position: relative;
}

.cc-carousel__dot[aria-selected='true'] {
  background: var(--cc-accent, #4caf50);
  transform: scale(1.35);
}

.cc-carousel__dot:focus-visible {
  outline: 2px solid var(--cc-accent, #4caf50);
  outline-offset: 3px;
}

.cc-carousel__status {
  margin: 0;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  color: var(--cc-text-muted, #9aa4ae);
}

.cc-carousel__play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 0.7rem;
  cursor: pointer;
}

.cc-carousel__play:focus-visible {
  outline: 2px solid var(--cc-accent, #4caf50);
  outline-offset: 2px;
}

/* ---- responsive -------------------------------------------------------- */

@media (max-width: 575.98px) {
  .cc-carousel {
    /* Arrows would cover too much of a phone-width slide; swipe is the
       primary gesture there and the dots still jump between slides. */
    --cc-carousel-gap: 0.5rem;
  }

  .cc-carousel__nav {
    width: 2.25rem;
    height: 2.25rem;
  }

  .cc-carousel__caption,
  .cc-carousel__status {
    font-size: 0.8rem;
  }
}

/* A pointer that cannot hover (touch) gets no arrows: they only cover image. */
@media (hover: none) and (pointer: coarse) {
  .cc-carousel__nav {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc-carousel__viewport {
    scroll-behavior: auto;
  }

  .cc-carousel__nav,
  .cc-carousel__dot {
    transition: none;
  }
}

@media (prefers-contrast: more) {
  .cc-carousel__nav,
  .cc-carousel__play {
    border-color: #fff;
    background: #000;
  }

  .cc-carousel__dot {
    background: #fff;
  }
}