/* Pasieka OMOMOM: geometria z Bricks "filmy-4x" (9:16, gap 20px, marginesy 10px, radius 16px). */
.cpomo-showcase {
  --cpomo-honey: #f1b703;
  --cpomo-cream: #fffdf5;
  --cpomo-sand: #e5ded1;
  --cpomo-ink: #2b241a;
  --cpomo-gap: 20px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.cpomo-showcase, .cpomo-showcase * { box-sizing: border-box; }
.cpomo-showcase__viewport {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-inline: contain;
}
.cpomo-showcase__viewport::-webkit-scrollbar { display: none; }
.cpomo-showcase__track { display: flex; gap: var(--cpomo-gap); min-width: 0; align-items: flex-start; }
.cpomo-showcase__slide {
  flex: 0 0 calc((100% - (var(--cpomo-columns) - 1) * var(--cpomo-gap)) / var(--cpomo-columns));
  min-width: 0;
  padding: 10px;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}
.cpomo-showcase__media {
  width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
  background: var(--cpomo-ink);
  position: relative;
}
.cpomo-showcase__poster { display: block; width: 100%; height: 100%; position: relative; cursor: pointer; }
.cpomo-showcase__poster img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.cpomo-showcase__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  display: grid; place-items: center;
  color: white;
  background: rgba(0, 0, 0, .64);
  border: 2px solid rgba(255,255,255,.78);
  border-radius: 50%;
  transition: background .15s ease, transform .15s ease;
  pointer-events: none;
}
.cpomo-showcase__poster:hover .cpomo-showcase__play { background: rgba(0,0,0,.8); transform: translate(-50%, -50%) scale(1.05); }
.cpomo-showcase__media iframe { display: block; border: 0; width: 100%; height: 100%; border-radius: 16px; }
.cpomo-showcase__controls { display: flex; justify-content: center; gap: 12px; margin-top: 8px; }
.cpomo-showcase__controls[hidden] { display: none !important; }
.cpomo-showcase__button {
  appearance: none;
  display: grid; place-items: center;
  padding: 0;
  border: 1px solid var(--cpomo-sand);
  border-radius: 50%;
  width: 38px; height: 38px;
  background: var(--cpomo-cream);
  color: var(--cpomo-ink);
  font: inherit;
  cursor: pointer;
  transition: background .15s ease;
}
.cpomo-showcase__button:hover:not(:disabled) { background: var(--cpomo-honey); }
.cpomo-showcase__button:disabled { opacity: .35; cursor: not-allowed; }
.cpomo-showcase__poster:focus-visible, .cpomo-showcase__viewport:focus-visible, .cpomo-showcase__button:focus-visible {
  outline: 3px solid var(--cpomo-honey);
  outline-offset: 3px;
}
.cpomo-showcase--grid .cpomo-showcase__viewport { overflow: visible; scroll-snap-type: none; }
.cpomo-showcase--grid .cpomo-showcase__track { display: grid; grid-template-columns: repeat(var(--cpomo-columns), minmax(0, 1fr)); }
.cpomo-showcase--grid .cpomo-showcase__slide { min-width: 0; padding: 10px; }
.cpomo-videos__empty { margin: 0; }
@media (max-width: 767px) {
  .cpomo-showcase { --cpomo-columns: 1 !important; }
}
@media (prefers-reduced-motion: reduce) {
  .cpomo-showcase__viewport { scroll-behavior: auto; }
  .cpomo-showcase__play, .cpomo-showcase__button { transition: none; }
}