/* ==========================================================
   BuddySocial v10.67 - MOBILE / TABLET / APP VIDEO POLISH
   Alleen touch/responsive weergave t/m 1100px.
   Desktop (>1100px) blijft volledig ongewijzigd.
   ========================================================== */

@media (max-width:1100px){
  .hyves-media-card:has(.hyves-video-grid),
  .retro-box.member-home-media:has(.member-home-video-grid){
    overflow:hidden !important;
    border-radius:16px !important;
    border:1px solid rgba(37,111,158,.26) !important;
    background:linear-gradient(180deg,#f8fcff 0%,#eef7fc 100%) !important;
    box-shadow:0 8px 24px rgba(28,86,124,.10) !important;
  }

  .hyves-media-card:has(.hyves-video-grid) > .retro-box-title,
  .hyves-media-card:has(.hyves-video-grid) > .classic-home-title,
  .retro-box.member-home-media:has(.member-home-video-grid) > .retro-box-title{
    min-height:50px !important;
    padding:10px 14px !important;
    margin:0 !important;
    border:0 !important;
    border-bottom:1px solid rgba(37,111,158,.20) !important;
    background:linear-gradient(180deg,#f8fdff 0%,#dceef8 100%) !important;
    color:#145b8a !important;
    font-weight:900 !important;
    text-shadow:0 1px 0 #fff !important;
  }

  .hyves-media-card:has(.hyves-video-grid) > .retro-box-title a,
  .hyves-media-card:has(.hyves-video-grid) > .classic-home-title a,
  .retro-box.member-home-media:has(.member-home-video-grid) > .retro-box-title a{
    padding:6px 10px !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.82) !important;
    color:#176596 !important;
    font-weight:800 !important;
    text-decoration:none !important;
    box-shadow:inset 0 0 0 1px rgba(37,111,158,.14) !important;
  }

  .hyves-video-grid,
  .member-home-video-grid{
    padding:12px !important;
    gap:12px !important;
    background:transparent !important;
  }

  .hyves-video-card-real,
  .member-home-video-card-real{
    position:relative !important;
    overflow:hidden !important;
    padding:0 !important;
    gap:0 !important;
    border:1px solid rgba(36,107,151,.24) !important;
    border-radius:16px !important;
    background:#fff !important;
    box-shadow:0 5px 16px rgba(18,69,103,.12) !important;
    transform:translateZ(0) !important;
  }

  .hyves-video-card-real::before,
  .member-home-video-card-real::before{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:0 !important;
    height:4px !important;
    z-index:30 !important;
    pointer-events:none !important;
    background:linear-gradient(90deg,#2785bd 0%,#57a9ce 60%,#f2a323 100%) !important;
  }

  .home-video-embed,
  .member-home-video-embed,
  .home-video-cover-link,
  .member-home-video-cover{
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:#0c1b25 !important;
  }

  .home-video-embed iframe,
  .member-home-video-embed iframe,
  .home-video-cover-link img,
  .member-home-video-cover img{
    filter:saturate(1.03) contrast(1.02) !important;
  }

  .home-video-embed::before,
  .member-home-video-embed::before,
  .home-video-cover-link::before,
  .member-home-video-cover::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:3 !important;
    pointer-events:none !important;
    background:linear-gradient(180deg,rgba(0,0,0,0) 52%,rgba(7,26,40,.28) 100%) !important;
  }

  .mobile-video-tap-target{
    gap:7px !important;
    background:transparent !important;
  }

  .mobile-video-tap-target > span{
    width:58px !important;
    height:58px !important;
    border:3px solid rgba(255,255,255,.96) !important;
    background:linear-gradient(180deg,#ff3150 0%,#df092d 100%) !important;
    box-shadow:0 8px 20px rgba(0,0,0,.32),0 0 0 5px rgba(255,255,255,.12) !important;
    transition:transform .14s ease,box-shadow .14s ease !important;
  }

  .mobile-video-tap-target > b{
    padding:5px 10px !important;
    border:1px solid rgba(255,255,255,.24) !important;
    background:rgba(12,43,63,.86) !important;
    box-shadow:0 3px 9px rgba(0,0,0,.16) !important;
    letter-spacing:.1px !important;
  }

  .mobile-video-tap-target:active > span{
    transform:scale(.91) !important;
    box-shadow:0 4px 12px rgba(0,0,0,.26),0 0 0 3px rgba(255,255,255,.10) !important;
  }

  .home-video-meta-link,
  .member-home-video-title{
    display:flex !important;
    align-items:center !important;
    min-height:58px !important;
    margin:0 !important;
    padding:10px 12px !important;
    border:0 !important;
    border-top:1px solid #e3eef4 !important;
    background:linear-gradient(180deg,#ffffff 0%,#f6fbfe 100%) !important;
    color:#164f72 !important;
    text-decoration:none !important;
  }

  .home-video-meta-link b,
  .member-home-video-title b{
    display:-webkit-box !important;
    width:100% !important;
    overflow:hidden !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
    line-clamp:2 !important;
    font-size:14px !important;
    line-height:1.32 !important;
    font-weight:850 !important;
    color:#164f72 !important;
    text-align:left !important;
  }
}

@media (max-width:700px){
  .hyves-video-grid,
  .member-home-video-grid{
    padding:10px !important;
    gap:11px !important;
  }

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

  .home-video-meta-link,
  .member-home-video-title{
    min-height:56px !important;
    padding:9px 11px 10px !important;
  }

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

@media (max-width:420px){
  .hyves-video-grid,
  .member-home-video-grid{
    padding:8px !important;
    gap:9px !important;
  }

  .mobile-video-tap-target > span{
    width:52px !important;
    height:52px !important;
    font-size:21px !important;
  }

  .mobile-video-tap-target > b{
    font-size:10px !important;
    padding:4px 8px !important;
  }

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