.project-carousel {
  padding-block: var(--section-pad);
  background-color: var(--color-alabaster); /* fallback; editor bg_color sets it inline */
}
/* Dark background → light copy + controls (eyebrow/heading/view-all/arrows inherit). */
.project-carousel--on-dark {
  color: var(--color-white);
}
/* On the 12-col grid: head, track and controls each span all 12 cols; row-gap:0 keeps margins. */
.project-carousel .container {
  row-gap: 0;
}
.project-carousel .container > * {
  grid-column: 1 / -1;
}
.project-carousel__head {
  margin-bottom: var(--sp-2xl);
}
.project-carousel__viewall {
  white-space: nowrap;
}
/* Cards are column modules so they snap to the grid: 4 cols (3-up) → 2-up → ~1-up. */
.project-carousel__track > .card-project {
  --card-cols: 4;
  width: calc(
    (100% - 11 * var(--grid-gap)) / 12 * var(--card-cols) +
      (var(--card-cols) - 1) * var(--grid-gap)
  );
}
.card-project__caption {
  flex: 1 1 auto;
  background: var(--color-water);
  color: var(--color-alabaster);
  padding: var(--sp-lg) var(--sp-md);
  font-size: var(--text-body-lg, 16px);
  line-height: var(--lh-normal, 1.3);
  display: -webkit-box;
  /* -webkit-box-orient: vertical; */
  /* -webkit-line-clamp: 3; */
  /* line-clamp: 3; */
  /* overflow: hidden; */
}
.card-project__media {
  height: 100%;
  position: relative;
  aspect-ratio: 3/4;
}
.card-project__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Controls: dots centred across the section, arrows pinned to the right (matches design). */
.project-carousel .carousel__controls {
  position: relative;
  justify-content: center;
}
.project-carousel .carousel__dots {
  gap: 0.6rem;
}
.project-carousel .carousel__dot {
  background: var(--color-clay);
  transition: opacity 0.2s ease;
}
.project-carousel .carousel__arrows {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

@media (max-width: 1024px) {
  .project-carousel__track > .card-project {
    --card-cols: 6;
  }
}
@media (max-width: 768px) {
  .project-carousel__track > .card-project {
    --card-cols: 10;
  }
}