/* Mobile overrides (loads AFTER styles.css) */
*{box-sizing:border-box}
html{font-size:clamp(14px,2.6vw,18px)}
html,body{width:100%;overflow-x:hidden}
a,button{min-width:44px;min-height:44px}

/* Keep dock off content and safe around iPhone bar */
.content-pad{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}

/* Hero stability */
.hero{height:56vh}
.hero-media{aspect-ratio:16/9;overflow:hidden}
.hero-video{width:100%;height:100%;object-fit:cover}

/* Grid stability + cheap offscreen work */
.clips-grid,.gallery-grid{display:grid}
.clips-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.gallery-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
@media(max-width:768px){
  .clips-grid,.gallery-grid{grid-template-columns:repeat(2,1fr);gap:10px}
}
.grid-item{position:relative;overflow:hidden;aspect-ratio:16/9;
  content-visibility:auto;contain-intrinsic-size:180px 320px;contain:layout paint}

/* Videos/images */
.clip,.grid-item video,.grid-item img{width:100%;height:100%;object-fit:cover;display:block}

/* Captions */
.clip-caption.cap-top{
  position:absolute;left:10px;top:10px;margin:0;padding:4px 8px;border-radius:4px;
  border:1px solid var(--border, #2a2a2a);background:rgba(0,0,0,.6);max-width:calc(100% - 20px)
}
@media(hover:hover){
  .clip-caption.cap-top{backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
}

/* Reveal anim (cheap) */
.gallery-grid .grid-item,.clips-grid .grid-item{opacity:0;transform:translateY(40px);
  transition:opacity .6s ease,transform .6s ease}
.gallery-grid .grid-item.visible,.clips-grid .grid-item.visible{opacity:1;transform:none}

/* Dock safe-area + lighter effects on touch */
.dock{padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}
@media(hover:none){
  .grid-item img,.grid-item video,.dock-item .dock-icon{transition:none}
  .clip-caption.cap-top{-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* Motion safety */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .gallery-grid .grid-item,.clips-grid .grid-item{opacity:1!important;transform:none!important}
}