/* Mobile V5: app style */
@media (max-width:760px){
  body{padding-bottom:calc(92px + env(safe-area-inset-bottom));overflow-x:hidden}.app-topbar{border-bottom:1px solid rgba(255,255,255,.12)}.top-nav{display:none}.app-shell{width:100%;padding:12px 10px 20px}.hero{margin-top:0}.hero h1{font-size:2.35rem}.hero p{margin-top:12px}.card,.tile{box-shadow:0 8px 22px rgba(5,31,79,.07)}.bottom-nav{bottom:10px}.bottom-nav a small{font-size:.7rem}.bottom-nav a span{font-size:1.12rem}
}

/* Mobile bottom navigation: full width, no side cut-off, center camera action */
@media (max-width:760px){
  html,body{max-width:100%;overflow-x:hidden;}
  body{padding-bottom:calc(84px + env(safe-area-inset-bottom))!important;}

  .bottom-nav{
    left:0!important;
    right:0!important;
    bottom:0!important;
    transform:none!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    height:72px;
    padding:6px 4px calc(6px + env(safe-area-inset-bottom))!important;
    border-radius:0!important;
    border-left:0!important;
    border-right:0!important;
    border-bottom:0!important;
    border-top:1px solid rgba(172,207,233,.92)!important;
    background:rgba(255,255,255,.96)!important;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:0!important;
    box-shadow:0 -10px 30px rgba(6,31,79,.16)!important;
    z-index:9999!important;
    overflow:visible!important;
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }

  .bottom-nav > a:not(.bottom-photo-fab){
    min-width:0!important;
    width:auto!important;
    height:58px;
    padding:7px 2px 4px!important;
    border-radius:0!important;
    background:transparent!important;
    color:#60708d!important;
    box-shadow:none!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex-direction:column!important;
    gap:2px!important;
    text-decoration:none!important;
  }

  .bottom-nav > a:not(.bottom-photo-fab).active{
    color:#0d4fb4!important;
    background:linear-gradient(180deg,rgba(43,190,220,.14),rgba(20,91,210,.05))!important;
  }

  .bottom-nav > a:not(.bottom-photo-fab) span{
    font-size:1.18rem!important;
    line-height:1!important;
    display:block!important;
  }

  .bottom-nav > a:not(.bottom-photo-fab) small{
    display:block!important;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:.72rem!important;
    line-height:1.05!important;
    font-weight:900!important;
  }

  .bottom-nav .bottom-photo-fab{
    width:62px!important;
    height:62px!important;
    min-height:62px!important;
    left:50%!important;
    top:-27px!important;
    border-radius:50%!important;
    border:5px solid #fff!important;
    padding:0!important;
    background:linear-gradient(135deg,#1246c7,#25c7df)!important;
    color:#fff!important;
    box-shadow:0 16px 34px rgba(17,77,203,.32)!important;
  }

  .bottom-nav .bottom-photo-fab span{font-size:1.55rem!important;}

  /* Give the center Events label room below the floating photo button */
  .bottom-nav > a[href$="events.php"]{padding-top:22px!important;}
}

@media (max-width:360px){
  .bottom-nav > a:not(.bottom-photo-fab) small{font-size:.66rem!important;}
  .bottom-nav > a:not(.bottom-photo-fab) span{font-size:1.05rem!important;}
  .bottom-nav .bottom-photo-fab{width:58px!important;height:58px!important;min-height:58px!important;top:-25px!important;}
}