/* ============================================================
   bufet — медиа-карусель (см. docs/DECISIONS.md → решение 43).
   ============================================================ */
.carousel { --carousel-w: clamp(280px, 28vw, 420px); --carousel-gap: clamp(16px, 2vw, 28px); position: relative; }
.carousel--page { margin-bottom: clamp(36px, 5vw, 72px); }
.carousel__viewport {
  display: flex; gap: var(--carousel-gap); overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; overscroll-behavior-inline: contain;
  padding-inline: calc(50% - var(--carousel-w) / 2); padding-block: 12px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.carousel__viewport::-webkit-scrollbar { display: none; }
.carousel__slide {
  position: relative; flex: none; width: var(--carousel-w); aspect-ratio: 4 / 5;
  scroll-snap-align: center; border-radius: var(--r-3); overflow: hidden;
  transform: scale(.9); opacity: .72; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.carousel__slide.is-active { transform: none; opacity: 1; }
.carousel__slide .plate { position: absolute; inset: 0; border-radius: var(--r-3); }
/* кнопка паузы только у активного кадра: у остальных видео и так удержано */
.carousel__slide:not(.is-active) .plate__ctrl { display: none; }
.carousel__nav { display: flex; justify-content: center; gap: 12px; margin-top: 18px; }
.carousel:not([data-carousel-ready]) .carousel__nav { display: none; }
.carousel__btn {
  width: 72px; height: 46px; border-radius: var(--r-pill); display: grid; place-items: center;
  background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line);
  transition: box-shadow var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.carousel__btn:hover { box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--accent); }
.carousel__btn[aria-disabled="true"] { opacity: .38; cursor: default; }
.carousel__btn[aria-disabled="true"]:hover { box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink); }
.carousel__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.no-anim .carousel__slide { transition: none; }

@media (max-width: 767px) {
  .carousel { --carousel-w: 100%; }
  .carousel__viewport {
    padding-inline: var(--gutter); margin-inline: calc(var(--gutter) * -1);
    scroll-padding-inline: var(--gutter);
    -webkit-mask-image: none; mask-image: none;
  }
  .carousel__slide { transform: none; opacity: 1; scroll-snap-align: start; }
  .carousel__nav { margin-top: 14px; }
}