/* Kapsalon Amer — videocarrousel.
   Horizontale strook met vaste HOOGTE en vrije breedte. Dat is bewust: de video's
   zijn gemengd staand (576x1024, 464x832) en liggend (1024x576). Met een vaste
   hoogte krijgen staande video's vanzelf een smalle kolom en liggende een brede,
   en blijft het geheel een rustige filmstrook in plaats van een rommelig raster. */

/* Deze sectie staat in een rij met data-wrap="full-width-stretch", dus hij liep
   van schermrand tot schermrand terwijl de rest van de pagina in een Bootstrap-
   container zit. Hieronder exact dezelfde breekpunten als het thema (750/970/1170),
   met max-width als vangnet: de vaste zijbalk maakt het inhoudsvlak smaller dan
   het venster, en zonder die regel zou de strook daar overheen lopen. */
.amer-videos {
  margin: 2.5rem auto;
  width: 100%;
  max-width: 100%;
  padding: 0 15px;
  box-sizing: border-box;
}
@media (min-width: 768px)  { .amer-videos { width: 750px;  padding: 0; } }
@media (min-width: 992px)  { .amer-videos { width: 970px; } }
@media (min-width: 1200px) { .amer-videos { width: 1170px; } }

.amer-videos__titel {
  margin: 0 0 1rem;
  font-size: 1.5rem;
  line-height: 1.2;
}

.amer-videos__rand { position: relative; }

.amer-videos__spoor {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
  /* scrollbalk weg op desktop, vegen blijft werken op mobiel */
  scrollbar-width: none;
}
.amer-videos__spoor::-webkit-scrollbar { display: none; }
.amer-videos__spoor:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

.amer-videos__item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  height: var(--amer-h, 420px);
  background: #000;
  border-radius: 4px;
  overflow: hidden;
}

.amer-videos__item video {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;   /* het thema zet img/video vaak op max-width:100%; dat zou de strook platslaan */
}

/* Pijlen. Verborgen op touch-apparaten: daar veeg je gewoon. */
.amer-videos__knop {
  position: absolute;
  top: calc(var(--amer-h, 420px) / 2);
  transform: translateY(-50%);
  z-index: 2;
  width: 44px; height: 44px;      /* 44px is de minimale aanraakmaat */
  border: 0; border-radius: 50%;
  background: rgba(255,255,255,.92);
  box-shadow: 0 1px 6px rgba(0,0,0,.28);
  font-size: 26px; line-height: 1;
  cursor: pointer;
}
.amer-videos__knop:hover { background: #fff; }
.amer-videos__knop--links  { left: -10px; }
.amer-videos__knop--rechts { right: -10px; }
.amer-videos__knop[hidden] { display: none; }

@media (hover: none) {
  .amer-videos__knop { display: none; }
}

@media (max-width: 782px) {
  .amer-videos { --amer-h: 300px; }
}

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