/* === Carousel (image slides, persistent meta + controls) ===
   Structure:
   .carousel                 (grid at large, stacked at small)
     .carousel__viewport     (row 1: images)
       .carousel__track
         .carousel__slide
           a.carousel__image-link > picture/img
     .carousel__meta         (row 2: text + controls)
       .carousel__meta-text
         .carousel__meta-item (one per slide, only one visible)
       .carousel__controls
*/

/* Root */
.carousel {
  position: relative;
  --transition-ms: 500ms;
  --easing: cubic-bezier(.22,.61,.36,1);
  color: inherit;
  border-bottom: 1px solid var(--border);
}

/* Viewport: clipping box */
.carousel__viewport {
  overflow: hidden;
  padding: 0;
  box-sizing: content-box;
  aspect-ratio: 2 / 3;  /* NEW: forces the viewport to be 16:9 */
  position: relative;     /* needed for absolute slides */
  border-radius: 0px;
}

/* Track: slide by whole frames with --index */
.carousel__track {
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
  /* Move by whole frames based on the CSS variable --index */
  transform: translate3d(calc(var(--index, 0) * -100%), 0, 0);
  transition: transform var(--transition-ms) var(--easing);
}


/* Each slide fills the viewport */
.carousel__slide {
  box-sizing: border-box;
  flex: 0 0 100%;
  min-width: 100%;
  margin: 0;
  padding: 0;
}

/* Image row */
.carousel__image-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.carousel__slide picture,
.carousel__slide img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: var(--space-m);
}

/* === Meta row: text + controls === */

.carousel__meta {
  padding-inline: var(--space-m);
  padding-block: var(--space-m);
}

.carousel__meta-text {
min-height: 144px;
}

.carousel__meta h3 {margin: 0;}

/* Only the active text block is shown */
.carousel__meta-item {
  display: none;
}

.carousel__meta-item.is-active {
  display: block;
}

.carousel__meta .heading-m {
  text-wrap: auto;
}

.carousel__meta .heading-m.muted-2 {
  margin-bottom: 0;
}

/* Make text link neat */
.carousel__text-link {
  display: inline-block;
  text-decoration: none;
  color: inherit;
}

.carousel__text-link:hover {
  text-decoration: underline;
}

/* === Controls === */

.carousel__controls {
  display: flex;
  gap: var(--space-m);
  align-items: center;
}

/* Buttons + icons */

.carousel__btn {
  appearance: none;
  border: 1px solid var(--colour-light-200, currentColor);
  background: transparent;
  color: inherit;
  padding: 16px;
  border-radius: 2rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;

}

.carousel__btn .icon {
  width: 24px;
  height: 24px;
  display: block;
}

.carousel__btn:hover {
  opacity: .85;
  border-color: var(--colour-light-500, #fff);
}

.carousel__btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Default toggle button (playing → shows pause icon) */
.carousel__btn--toggle {
  background: transparent;
  color: var(--text);
}

/* Paused state: black button, white play icon */
.carousel__btn--toggle[data-state="play"] {
  background: var(--colour-light-1000);   /* black */
  color: var(--colour-light-0);          /* white icon */
  border-color: var(--colour-light-400);
}

/* === Layout behaviour === */

/* Small screens: stack image, text, controls in that order.
   Controls: prev/next left, toggle pushed right. */
@media (max-width: 719px) {
  .carousel {
    display: block;
  }

  .carousel__meta {
    margin-top: var(--space-m);
    padding-block: var(--space-m);
  }

  .carousel__controls {
    width: 100%;
    justify-content: flex-start;
    margin-top: var(--space-m);
  }

  .carousel__btn--toggle {
    margin-left: auto;
  }
}

/* Large screens: 8-col grid
   Row 1: viewport spans 1–8
   Row 2: meta spans 1–8, but inside meta we split 6/2 for text/controls */
@media (min-width: 720px) {
  .carousel {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-auto-rows: auto;
    row-gap: var(--space-3);
  }

  .carousel__viewport {
    grid-column: 1 / -1; /* row 1, full width */
    aspect-ratio: 16 / 9;  /* NEW: forces the viewport to be 16:9 */
    border-radius: 8px;
  }

  .carousel__meta {
    grid-column: 1 / -1; /* row 2, full width */
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    column-gap: var(--space-3);
    align-items: flex-start;
    padding-inline: 0px;
  }

  .carousel__meta-text {
    grid-column: 1 / 8; /* 6/8 */
    min-height: auto;
  }


  .carousel__controls {
    grid-column: 9 / 9; /* 2/8 */
    margin-top: 0;
    justify-content: flex-end;
  }
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce) {
  .carousel__track {
    transition: none;
  }
}

/* Ensure the link can contain absolutely positioned items */
.carousel__image-link {
  position: relative;
  display: block;
}

/* Hidden overlay */
.carousel__hover {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 160ms ease;
}

/* Hover to reveal */
.carousel__image-link:hover .carousel__hover {
  opacity: 1;
}

/* Label styling */
.carousel__hover-label {
  background: var(--colour-light-0);
  color: var(--colour-light-1000);
  padding: 12px 24px;
  font-size: 0.8em;
  border-radius: 999px;
  font-weight: 500;
  pointer-events: none;
}

/* Dark mode refinement */
.dark .carousel__hover-label {
  background: var(--colour-dark-900);
  color: var(--colour-dark-0);
}

/* === PDF carousel for Article pages (standalone from homepage version) === */

.article-pdf-carousel {
  max-width: 600px;      /* tweak to match image width */
  margin-inline: auto;
  padding: 0;
}

.article-pdf-carousel__viewport {
  overflow: hidden;
}

.article-pdf-carousel__track {
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  transition: transform 400ms cubic-bezier(.22, .61, .36, 1);
}

.article-pdf-carousel__slide {
  flex: 0 0 100%;
  min-width: 100%;
  box-sizing: border-box;
}

.article-pdf-carousel__slide figure {
  margin: 0;
}

.article-pdf-carousel__slide img {
  display: block;
  width: 100%;
  height: auto;
}

/* Controls: always left-aligned */
.article-pdf-carousel__controls {
  display: flex;
  gap: var(--space-m, 1rem);
  align-items: center;
  margin-top: var(--space-m, 1rem);
}

.article-pdf-carousel__btn {
  appearance: none;
  border: 1px solid var(--colour-light-200, currentColor);
  background: transparent;
  color: inherit;
  padding: 0.75rem;
  border-radius: 2rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}

.article-pdf-carousel__btn .icon {
  width: 24px;
  height: 24px;
  display: block;
}

.article-pdf-carousel__btn:hover {
  opacity: .85;
  border-color: var(--colour-light-500, #fff);
}

.article-pdf-carousel__btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.article-pdf-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
}

.article-pdf-carousel__controls-main {
  display: flex;
  gap: var(--space-s);
}

.article-pdf-carousel__counter {
  font-size: var(--size-body-s, 0.875rem);
  color: var(--muted, inherit);
}

/* === ovverides the .slice--article-body li rule which I SPENT 2 HOURS TRYING TO FIND */
.article-pdf-carousel li {
  margin: 0;
}