/* mp-shorts — карусель вертикальних відео на головній */
.mps {
  --mps-accent: var(--accent, #4B8387);
  --mps-fg: var(--ink, #111);
  --mps-line: var(--line, #e2e2e2);
  --mps-card-w: clamp(150px, 41vw, 210px);
  /* 40px повітря як у .srow; чорна лінія зверху вже є у .hero-row */
  padding: 40px 0;
  border-bottom: 2px solid var(--mps-fg);   /* чорна смуга під каруселлю (як роздільник розділів) */
  color: var(--mps-fg);
  position: relative;
  /* не даємо сумарній ширині карток розпирати батьківський grid/flex на мобілці */
  min-width: 0; max-width: 100%; overflow-x: clip;
}
/* шапка = .band__head + .section-label теми, але без лінії під заголовком — смуга йде під каруселлю */
.mps__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mps .band__head { border-bottom: 0; padding-bottom: 0; margin-bottom: 18px; }
.mps__h { cursor: default; }
.mps__h:hover { color: var(--mps-fg); }
.mps__h:hover::before { height: 15px; }
.mps__nav { display: flex; gap: 6px; }
.mps__arrow {
  width: 34px; height: 34px; display: inline-grid; place-items: center; padding: 0; cursor: pointer;
  border: 1px solid var(--mps-line); border-radius: 50%; background: transparent; color: var(--mps-fg);
  transition: background-color .15s, opacity .15s;
}
.mps__arrow:hover:not(:disabled) { background: rgba(127,127,127,.12); }
.mps__arrow:disabled { opacity: .35; cursor: default; }
.mps__arrow svg { width: 18px; height: 18px; }

.mps__track {
  list-style: none; margin: 0; padding: 0 0 4px; display: flex; gap: 14px; min-width: 0; max-width: 100%;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.mps__track::-webkit-scrollbar { display: none; }
.mps__item { flex: 0 0 var(--mps-card-w); scroll-snap-align: start; margin: 0; }

.mps__card {
  all: unset; box-sizing: border-box; display: block; width: 100%; cursor: pointer; color: inherit;
}
.mps__card:focus-visible { outline: 2px solid var(--mps-accent); outline-offset: 3px; border-radius: 8px; }
.mps__thumb {
  position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 8px;
  background: linear-gradient(160deg, #2b4f52, #111);
}
.mps__img { color: transparent; }
.mps__img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; display: block; transition: transform .35s ease; }
.mps__card:hover .mps__img { transform: scale(1.035); }
.mps__thumb::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 38%;
  background: linear-gradient(to top, rgba(0,0,0,.55), transparent); pointer-events: none;
}
.mps__play {
  position: absolute; left: 10px; bottom: 10px; z-index: 1; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(0,0,0,.55); color: #fff; backdrop-filter: blur(4px);
}
.mps__play svg { width: 18px; height: 18px; margin-left: 2px; }
.mps__src {
  position: absolute; right: 8px; bottom: 14px; z-index: 1; font-size: 11px; line-height: 1; font-weight: 600;
  color: rgba(255,255,255,.85); letter-spacing: .02em;
}
.mps__t {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 9px; font-size: 15px; line-height: 1.3; font-weight: 600;
}
.mps__card:hover .mps__t { text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 600px) {
  .mps__arrow { width: 30px; height: 30px; }
  .mps__arrow svg { width: 16px; height: 16px; }
  .mps__track { gap: 10px; }
  .mps__t { font-size: 14px; }
}

/* ---------- модалка ---------- */
.mps__modal {
  padding: 0; border: 0; background: transparent; max-width: none; max-height: none;
  width: 100vw; height: 100vh; height: 100dvh; margin: 0; inset: 0; color: #fff;
}
.mps__modal::backdrop { background: rgba(0,0,0,.88); }
.mps__box {
  position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px 16px 16px; box-sizing: border-box;
}
.mps__stage {
  position: relative; height: min(calc(100dvh - 150px), 820px); aspect-ratio: 9 / 16; max-width: 100%;
  background: #000; border-radius: 10px; overflow: hidden;
}
.mps__stage iframe, .mps__stage video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.mps__cap { width: min(100%, 460px); text-align: center; padding-top: 12px; }
.mps__ct { margin: 0; font-size: 16px; line-height: 1.35; font-weight: 600; }
.mps__cta { display: inline-block; margin-top: 6px; color: #9fd0d3; font-size: 14px; text-decoration: none; }
.mps__cta:hover { text-decoration: underline; }
.mps__cta[hidden] { display: none; }
.mps__x, .mps__mnav {
  position: absolute; display: grid; place-items: center; padding: 0; cursor: pointer;
  border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff;
}
.mps__x:hover, .mps__mnav:hover:not(:disabled) { background: rgba(255,255,255,.24); }
.mps__x { top: 10px; right: 12px; width: 40px; height: 40px; }
.mps__mnav { top: 50%; width: 48px; height: 48px; transform: translateY(-50%); }
.mps__mnav:disabled { opacity: .25; cursor: default; }
.mps__mnav--prev { left: max(12px, calc(50% - 300px)); }
.mps__mnav--next { right: max(12px, calc(50% - 300px)); }
.mps__x svg, .mps__mnav svg { width: 22px; height: 22px; }
@media (max-width: 600px) {
  .mps__box { padding: 52px 0 12px; }
  .mps__stage { height: auto; width: 100%; max-height: calc(100dvh - 140px); border-radius: 0; }
  .mps__mnav { top: auto; bottom: 14px; transform: none; width: 40px; height: 40px; }
  .mps__mnav--prev { left: 12px; } .mps__mnav--next { right: 12px; }
  .mps__cap { padding: 10px 60px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mps__track { scroll-behavior: auto; }
  .mps__img { transition: none; }
}