/* The Boys Trip Guide — authoritative Evidence/Hidden Gallery layout.
   Desktop keeps explicit actions. Mobile uses one large menu per image so the feed stays frictionless. */

#tab-content .gallery{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:12px!important;
  align-items:start!important;
}

#tab-content .gallery .media-card{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  aspect-ratio:auto!important;
  width:100%!important;
  min-width:0!important;
  height:auto!important;
  overflow:hidden!important;
  padding:0!important;
  border-radius:14px!important;
}

#tab-content .gallery .media-card .evidence-media-open{
  position:static!important;
  inset:auto!important;
  order:1!important;
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  height:auto!important;
  min-height:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:#0d0f10!important;
  color:inherit!important;
  overflow:hidden!important;
  flex:0 0 auto!important;
}

#tab-content .gallery .media-card .media-preview{
  position:relative!important;
  display:grid!important;
  place-items:center!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  height:auto!important;
  aspect-ratio:4/3!important;
  overflow:hidden!important;
  background:#0b0d0e!important;
}

#tab-content .gallery .media-card .media-preview img,
#tab-content .gallery .media-card .media-preview video{
  position:static!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  object-fit:cover!important;
}

#tab-content .gallery .media-card .media-meta{
  position:static!important;
  order:2!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  align-items:start!important;
  width:100%!important;
  min-width:0!important;
  gap:8px!important;
  padding:10px!important;
}

#tab-content .gallery .media-card .media-meta>small{
  display:block!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

#tab-content .gallery .media-card .media-meta .card-actions{
  position:static!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  width:100%!important;
  min-width:0!important;
  gap:6px!important;
}

#tab-content .gallery .media-card .media-meta .card-actions:has(>button:only-child){
  grid-template-columns:1fr!important;
}

#tab-content .gallery .media-card .media-meta .card-actions button{
  position:static!important;
  inset:auto!important;
  width:100%!important;
  height:auto!important;
  min-width:0!important;
  min-height:38px!important;
  border-radius:10px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

/* Mobile menu is deliberately absent on desktop/tablet. */
#tab-content .gallery .media-card-mobile-menu{display:none!important;}

nav.bottom-dock [data-tab="evidence"] .dock-badge:not(.new){display:none!important;}

/* Media viewer owns the screen while open; navigation beneath it must not compete for touch space. */
body:has(.btg-viewer) nav.bottom-dock,
body:has(.btg-viewer) .bottom-dock{display:none!important;}

@media(max-width:700px){
  /* Instagram-style vertical feed: one image per row, no permanent edit controls between images. */
  #tab-content .gallery{
    grid-template-columns:1fr!important;
    gap:10px!important;
  }

  #tab-content .gallery .media-card{
    overflow:visible!important;
    border:0!important;
    border-radius:16px!important;
    background:transparent!important;
  }

  #tab-content .gallery .media-card .evidence-media-open{
    border-radius:16px!important;
    overflow:hidden!important;
  }

  #tab-content .gallery .media-card .media-preview{
    aspect-ratio:4/3!important;
    border-radius:16px!important;
  }

  /* Filename and desktop action row are hidden only on phones; the actions are cloned into the menu. */
  #tab-content .gallery .media-card .media-meta{display:none!important;}

  #tab-content .gallery .media-card-mobile-menu{
    position:absolute!important;
    top:12px!important;
    right:12px!important;
    z-index:8!important;
    display:block!important;
    width:auto!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
  }

  #tab-content .gallery .media-card-mobile-trigger{
    position:relative!important;
    display:grid!important;
    place-items:center!important;
    width:48px!important;
    height:48px!important;
    min-width:48px!important;
    min-height:48px!important;
    margin:0!important;
    padding:0 0 6px!important;
    border:1px solid rgba(239,214,154,.82)!important;
    border-radius:50%!important;
    background:rgba(10,11,12,.9)!important;
    color:var(--gold-2)!important;
    box-shadow:0 8px 24px rgba(0,0,0,.38)!important;
    font-size:24px!important;
    font-weight:900!important;
    line-height:1!important;
    letter-spacing:2px!important;
    list-style:none!important;
    cursor:pointer!important;
    touch-action:manipulation!important;
    -webkit-tap-highlight-color:transparent!important;
  }

  #tab-content .gallery .media-card-mobile-trigger::-webkit-details-marker{display:none!important;}
  #tab-content .gallery .media-card-mobile-trigger::marker{content:""!important;}

  #tab-content .gallery .media-card-mobile-panel{
    position:absolute!important;
    top:56px!important;
    right:0!important;
    display:grid!important;
    width:min(250px,calc(100vw - 44px))!important;
    overflow:hidden!important;
    border:1px solid rgba(239,214,154,.42)!important;
    border-radius:18px!important;
    background:rgba(18,19,21,.98)!important;
    box-shadow:0 18px 46px rgba(0,0,0,.58)!important;
    backdrop-filter:blur(18px)!important;
  }

  #tab-content .gallery .media-card-mobile-action{
    position:static!important;
    inset:auto!important;
    display:flex!important;
    align-items:center!important;
    gap:14px!important;
    width:100%!important;
    height:auto!important;
    min-height:58px!important;
    padding:14px 18px!important;
    border:0!important;
    border-bottom:1px solid rgba(255,255,255,.08)!important;
    border-radius:0!important;
    background:transparent!important;
    color:var(--paper)!important;
    font-size:16px!important;
    font-weight:800!important;
    text-align:left!important;
    white-space:nowrap!important;
    touch-action:manipulation!important;
  }

  #tab-content .gallery .media-card-mobile-action:last-child{border-bottom:0!important;}
  #tab-content .gallery .media-card-mobile-action::before{
    display:inline-grid!important;
    place-items:center!important;
    width:30px!important;
    flex:0 0 30px!important;
    font-size:24px!important;
  }
  #tab-content .gallery .media-card-mobile-action.hero::before{content:"☆"!important;color:var(--gold-2)!important;}
  #tab-content .gallery .media-card-mobile-action.danger{color:#ff7770!important;}
  #tab-content .gallery .media-card-mobile-action.danger::before{content:"⌫"!important;color:#ff625b!important;}

  #tab-content .gallery .media-card-mobile-menu:not([open]) .media-card-mobile-panel{display:none!important;}
  #tab-content .gallery .media-card-mobile-menu[open] .media-card-mobile-trigger{
    background:#17191b!important;
    border-color:var(--gold-2)!important;
  }

  /* Full-screen mobile viewer: the image, not the surrounding chrome, is the primary surface. */
  .modal-backdrop:has(.btg-viewer){padding:0!important;}
  .btg-viewer{
    width:100vw!important;
    height:100dvh!important;
    inset:0!important;
    grid-template-rows:auto 1fr!important;
    background:#000!important;
  }
  .btg-viewer-head{
    position:relative!important;
    z-index:4!important;
    background:#030405!important;
  }
  .btg-viewer-feed{
    overflow-y:auto!important;
    overflow-x:hidden!important;
    scroll-snap-type:y proximity!important;
    background:#000!important;
  }
  .btg-viewer-slide{
    height:auto!important;
    min-height:calc(100dvh - 76px)!important;
    padding:0 0 max(18px,env(safe-area-inset-bottom))!important;
    align-content:start!important;
    background:#000!important;
  }
  .btg-viewer-slide .btg-viewer-media{
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    background:#000!important;
  }
  .btg-viewer-slide .btg-viewer-media img{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    max-height:none!important;
    object-fit:contain!important;
    border-radius:0!important;
    background:#000!important;
  }
  .btg-viewer-slide .btg-viewer-media video{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    max-height:calc(100dvh - 90px)!important;
    object-fit:contain!important;
    border-radius:0!important;
    background:#000!important;
  }
  .btg-viewer-slide .btg-viewer-count{
    display:block!important;
    width:100%!important;
    padding:10px 0 14px!important;
    text-align:center!important;
  }
}

@media(max-width:430px){
  #tab-content .gallery .media-card .media-preview{aspect-ratio:4/3!important;}
  #tab-content .gallery .media-card-mobile-trigger{
    width:50px!important;
    height:50px!important;
    min-width:50px!important;
    min-height:50px!important;
  }
}