/* ==========================================================
   BuddySocial v10.65 - VIDEO MOBILE / TABLET / APP FIX
   Alleen responsive gedrag t/m 1100px. Desktop blijft gelijk.
   ========================================================== */

@media (max-width:1100px){
  .hyves-video-grid,
  .member-home-video-grid{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
    padding:10px !important;
    overflow:hidden !important;
  }

  .hyves-video-card-real,
  .member-home-video-card-real{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  .home-video-embed,
  .member-home-video-embed,
  .home-video-cover-link,
  .member-home-video-cover{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    aspect-ratio:16/9 !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  .home-video-embed iframe,
  .member-home-video-embed iframe,
  .home-video-cover-link img,
  .member-home-video-cover img{
    width:100% !important;
    max-width:100% !important;
    height:100% !important;
    display:block !important;
    object-fit:cover !important;
  }

  .home-video-meta-link,
  .member-home-video-title,
  .home-video-meta-link b,
  .member-home-video-title b{
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
  }
}

/* Telefoon + smalle PWA/app: altijd één volledige kaart per rij. */
@media (max-width:700px){
  .hyves-video-grid,
  .member-home-video-grid{
    grid-template-columns:minmax(0,1fr) !important;
    gap:10px !important;
    padding:8px !important;
  }

  .hyves-video-card-real,
  .member-home-video-card-real{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:7px !important;
    padding:8px !important;
  }

  .home-video-embed,
  .member-home-video-embed,
  .home-video-cover-link,
  .member-home-video-cover{
    grid-column:auto !important;
    width:100% !important;
    aspect-ratio:16/9 !important;
  }

  .home-video-meta-link,
  .member-home-video-title{
    grid-column:auto !important;
    width:100% !important;
    border-top:1px solid #e3edf3 !important;
    padding:7px 2px 2px !important;
    justify-content:flex-start !important;
  }

  .home-video-meta-link b,
  .member-home-video-title b{
    display:block !important;
    width:100% !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
    -webkit-line-clamp:unset !important;
    line-clamp:unset !important;
    font-size:14px !important;
    line-height:1.35 !important;
  }

  .retro-box.member-home-media:has(.member-home-video-grid) > .retro-box-title,
  .hyves-media-card:has(.hyves-video-grid) > .retro-box-title,
  .hyves-media-card:has(.hyves-video-grid) > .classic-home-title{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
    min-width:0 !important;
  }

  .retro-box.member-home-media:has(.member-home-video-grid) > .retro-box-title a,
  .hyves-media-card:has(.hyves-video-grid) > .retro-box-title a,
  .hyves-media-card:has(.hyves-video-grid) > .classic-home-title a{
    flex:0 1 auto !important;
    min-width:0 !important;
    white-space:nowrap !important;
    font-size:12px !important;
  }
}

/* Extra smalle telefoons: iets rustiger zonder horizontale overflow. */
@media (max-width:420px){
  .hyves-video-grid,
  .member-home-video-grid{
    padding:6px !important;
    gap:8px !important;
  }

  .hyves-video-card-real,
  .member-home-video-card-real{
    padding:7px !important;
    border-radius:11px !important;
  }

  .home-video-meta-link b,
  .member-home-video-title b{
    font-size:13px !important;
  }
}