/* ===== VIDEO — reels carousel ===== */
.vid { --h: 657; background: transparent; }   /* inherit global body grey — +50px breathing room before footer */
.vid__title { position: absolute; top: 24px; left: 50%; transform: translate(-50%, -50%); width: 635px; text-align: center; font-size: 42px; line-height: 48px; font-weight: 400; color: #000; }
.vid__track { display: contents; }
.vcard { position: absolute; top: 86px; width: 302px; height: 519px; border-radius: 10px; overflow: hidden; display: block; }
.vcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vcard__grad { position: absolute; inset: auto 0 0 0; height: 176px; background: linear-gradient(to top, var(--green-900) 0%, rgba(14,13,44,0) 100%); }
.vcard__play { position: absolute; left: 50%; top: 324px; transform: translateX(-50%); width: 90.82px; height: 90.82px; z-index: 2; }
.vcard__cap { position: absolute; left: 15px; right: 15px; top: 460px; text-align: center; font-family: var(--font-num); font-size: 22px; line-height: 26px; color: #fff; z-index: 2; }
.vid__arrow { position: absolute; top: 304px; width: 62px; height: 62px; background: none; border: 0; padding: 0; }
.vid__arrow img { width: 100%; height: 100%; }
.vid__arrow--right { left: 1627px; }
.vid__arrow--left { left: 228px; transform: scaleX(-1); }

@media (max-width: 1024px) {
  .vid { --h: auto; height: auto; }
  .vid .stage { position: relative; width: 100%; height: auto; transform: none; padding: 40px 0; }
  .vid__title { position: relative; top: 0; left: 0; transform: none; width: auto; font-size: 26px; }
  .vcard {
    position: relative; top: 0 !important; left: 0 !important; width: auto; height: auto; aspect-ratio: 302/519;
    margin: 0; scroll-snap-align: center; flex: 0 0 56%; max-width: 230px;
  }
  .vcard__play { width: 64px; height: 64px; top: auto; bottom: 38%; }
  .vcard__cap { font-size: 15px; line-height: 19px; top: auto; bottom: 18px; }
  .vid__track {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 22px 30px 0; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .vid__track::-webkit-scrollbar { display: none; }
  .vid__arrow {
    display: block; width: 46px; height: 46px; padding: 0;
    background: #fff; border-radius: 50%; box-shadow: 0 2px 10px rgba(7,28,55,.20);
    z-index: 6; top: calc(50% + 14px); transform: translateY(-50%);
  }
  .vid__arrow--right { right: 6px; left: auto; }
  .vid__arrow--left { left: 6px; right: auto; transform: translateY(-50%) scaleX(-1); }
}