/* responsive.css — breakpoints + reduced motion (load last) */
@media (max-width:860px){
  :root{--head-h:56px}
  .head{padding:0 14px;gap:10px;display:grid;grid-template-columns:1fr auto 1fr}
  .wrap{padding:0 14px}
  .home{padding:18px 14px 70px}
  /* hamburger + slide-in nav drawer (logo stays centered in the bar) */
  .nav-btn{display:flex;justify-self:start}
  .brand{justify-self:center}
  .btn-post{display:none}                   /* posting lives in the avatar menu on mobile */
  .acct{justify-self:end}
  .acct-post{display:block}
  .head-nav{display:flex;position:fixed;top:var(--head-h);left:0;bottom:0;width:min(82vw,300px);flex-direction:column;align-items:stretch;gap:2px;background:var(--surface);box-shadow:var(--shadow-lg);transform:translateX(-100%);transition:transform .26s cubic-bezier(.3,.8,.3,1);z-index:90;padding:18px 16px max(18px,env(safe-area-inset-bottom));overflow-y:auto}
  .head-nav.open{transform:translateX(0)}
  #navScrim{top:var(--head-h)}
  .head-nav .head-spacer{display:none}
  .head-nav .head-search{display:flex!important;flex:none;max-width:none;margin-bottom:6px}
  .head-nav .head-cats{padding:12px 8px}
  .head-nav .head-loc{display:none}        /* location lives in the bottom tab bar on mobile */
  .head-nav .lang{width:max-content;margin:4px 0}
  .head-nav .head-login{padding:12px 8px}
  .feed{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;padding:14px 0 90px}
  .card-img>svg{width:36px;height:36px}
  .seg button span{display:none}.seg button{padding:9px 13px}
  body.view-map .mapwrap{display:block;height:calc(100vh - var(--head-h) - 58px);position:relative}
  .map-list{display:none}
  .pane-map{position:absolute;inset:0;margin:0;border-radius:0}
  .map-cards{display:flex;position:absolute;left:0;right:0;bottom:18px;gap:12px;padding:0 14px 4px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;z-index:25}
  .map-cards::-webkit-scrollbar{display:none}
  .map-cards .card{scroll-snap-align:center;flex:0 0 80%;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);border:2px solid transparent;padding:10px;display:flex;gap:11px}
  .map-cards .card.active{border-color:var(--coral)}
  .map-cards .card .card-img{width:78px;flex:none;aspect-ratio:1;border-radius:var(--r-md)}
  .map-cards .card .card-img>svg{width:28px;height:28px}.map-cards .card .card-b{padding:0;flex:1}.map-cards .card .card-title{min-height:0;font-size:13.5px}
  .panel{position:fixed;left:0;right:0;bottom:0;width:auto;border-radius:var(--r-xl) var(--r-xl) 0 0;transform:translateY(100%);display:block;transition:transform .26s cubic-bezier(.3,.8,.3,1);max-height:86vh;overflow-y:auto;padding:20px 18px max(20px,env(safe-area-inset-bottom))}
  .panel.open{transform:translateY(0)}
  .panel::before{content:"";display:block;width:38px;height:4px;border-radius:99px;background:var(--line-2);margin:0 auto 14px}
  .cats{left:0;right:0;top:0;bottom:0;width:auto;border-radius:0;transform:translateY(100%);transition:transform .26s cubic-bezier(.3,.8,.3,1),visibility .26s;overflow-y:auto;padding:18px 16px max(18px,env(safe-area-inset-bottom))}
  .cats.open{transform:translateY(0)}
}
@media (max-width:380px){
  .head{gap:8px;padding:0 10px}
  .btn-post{padding:9px 11px;gap:6px}
  .controls-row{gap:8px}
  .count{min-width:0;overflow:hidden;text-overflow:ellipsis}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
