/**
 * carousel — copy beside a set of options.
 *
 * The track is a scroll-snap row. That is the whole carousel: it swipes on
 * touch, scrolls with a trackpad, and takes keyboard arrows because the track
 * is focusable. The dots and arrows the script adds are a convenience on top,
 * not the mechanism.
 */

.carousel__inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  align-items: center;
}
.carousel--left .carousel__text  { order: 2; }
.carousel--left .carousel__stage { order: 1; }

/* Bare: no copy column, so the rail takes the whole width and bleeds off both
   edges — cards leaving the frame on either side is what tells a reader there
   is more to scroll to. Scroll padding keeps the first and last card clear of
   the edge once you get there, so nothing is stranded half out of view. */
.carousel--bare .carousel__inner {
  grid-template-columns: minmax(0, 1fr);
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
.carousel--bare .carousel__track {
  scroll-padding-inline: var(--margin);
  padding-inline: var(--margin);
}

.carousel__text { display: flex; flex-direction: column; align-items: flex-start; }
.carousel__body { color: var(--text-muted); max-width: 46ch; text-wrap: pretty; }
.carousel__cta  { margin-top: 24px; }

.carousel__stage { min-width: 0; }

.carousel__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: var(--radius-card);
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 4px; }

.carousel__slide { scroll-snap-align: start; min-width: 0; }

.carousel__card {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-card);
  background: var(--gray-200) center / cover no-repeat;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

/* The caption sits on the photo, so it needs its own ground rather than
   relying on the image being dark enough — placeholder images are not, and
   neither is every photograph. */
.carousel__caption {
  width: 100%;
  padding: 24px;
  background: linear-gradient(#0000, #000000b8 55%);
  color: var(--color-white);
}
.carousel__name { margin: 0 0 14px; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.1; }
.carousel__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 14px;
  border-top: 1px solid #ffffff3d;
}
.carousel__meta { margin: 0; color: #ffffffd9; }

.carousel__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
}
.carousel__dots { display: flex; gap: 8px; }
.carousel__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--rule);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.carousel__dot[aria-selected="true"] { background: var(--accent); }
.carousel__dot:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px; }

.carousel__arrows { display: flex; gap: 8px; }
.carousel__arrow {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  color: inherit;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.carousel__arrow:hover:not(:disabled) { border-color: var(--accent-deep); }
.carousel__arrow:disabled { opacity: .35; cursor: default; }

/* Where the rail would be when there is nothing upcoming. Sits in the same
   grid cell as the stage, so the copy column keeps its position and the
   section keeps its shape. */
.carousel__empty {
  margin: 0;
  padding: 28px 0;
  border-top: 1px solid var(--rule);
  color: var(--text-muted);
  align-self: center;
}
.tone--navy .carousel__empty { border-color: rgba(255,255,255,.22); }

/* Band: the head across the top, the options in a row beneath it.
 *
 * For a carousel that has to sit above something more important than itself.
 * The side-by-side arrangement spends its height on one large card and a
 * column of copy next to it, which is right when the module IS the section
 * and wrong when it is a teaser for the section below: on Las Vegas /baseball/
 * that cost 778px before a visitor reached the schedule the page exists for,
 * and the module's own button pointed at it (Pastel #53).
 *
 * Same markup, same fields, same scroll-snap track. Only the arrangement
 * changes, so nothing has to be re-entered to switch between them.
 */
.carousel--band .carousel__inner {
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

/* A wrapping flex row rather than explicit grid placement, because any of
   these four can be absent and placed rows break the moment one is. */
.carousel--band .carousel__text {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px 48px;
  width: 100%;
}
.carousel--band .carousel__text > .sec__eyebrow  { flex: 1 0 100%; margin: 0; }
/* Smaller than a section headline on purpose. In this arrangement the module
   is a teaser for the section underneath it, and at the full section size it
   wrapped to two lines of 56px and spent 106px saying so. */
.carousel--band .carousel__text > .sec__headline {
  flex: 1 1 26ch;
  margin: 0;
  font-size: clamp(26px, 2.6vw, 38px);
}
.carousel--band .carousel__text > .carousel__body { flex: 1 1 300px; margin: 0; }
.carousel--band .carousel__text > .carousel__cta  { flex: 0 0 auto; margin: 0; }

/* Three across, sharing the two gaps between them.
   A plain width, NOT minmax(0, ...): the minmax form gives every track a zero
   minimum, so instead of overflowing and scrolling, twelve cards squeezed
   themselves down to 97px each to fit the container. The track is supposed to
   overflow - that is what makes it a carousel. */
.carousel--band .carousel__track {
  grid-auto-columns: calc((100% - 32px) / 3);
}
/* Shorter than the 4:3 a single large card wants. A row of three is read by
   comparison, and comparison does not need the height. */
.carousel--band .carousel__card { aspect-ratio: 3 / 2; }
.carousel--band .carousel__name { font-size: clamp(19px, 1.5vw, 23px); }

@media (max-width: 900px) {
  .carousel--band .carousel__track { grid-auto-columns: calc((100% - 16px) / 2); }
}
@media (max-width: 599px) {
  .carousel--band .carousel__track { grid-auto-columns: 86%; }
  .carousel--band .carousel__text { gap: 12px; }
}

@media (max-width: 900px) {
  .carousel__inner { grid-template-columns: 1fr; gap: 28px; }
  .carousel--left .carousel__text,
  .carousel--left .carousel__stage { order: 0; }
}