/* android-chrome-multicol-video-fix.css
   Fix: video escaping columns on Android/Chromium when inside .two-columns.
   Scope narrowly to the problematic context. Safe for desktop & iOS (iOS has its own file with !important overrides). */

.two-columns .video-wrap {
  width: 100%;
  max-width: 100%;
  aspect-ratio: auto;
  overflow: hidden;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

.two-columns .video-wrap > video {
  display: block;
  width: 100% !important;         /* was -webkit-fill-available in base.css; that caused overflow on Android Chrome */
  max-width: 100%;
  height: auto !important;         /* avoid 100% height inside column layout */
  object-fit: contain;             /* keep letterboxing instead of cropping */
}

/* Optional: make two-columns collapse sooner on phones/tablets.
   If you like the look, uncomment this block. */
/*
@media (max-width: 768px) {
  .two-columns { column-count: 1; }
}
*/