/* STAGE 8 — стеклянные соцсети на мобильном */

@media (max-width:1100px){
  .topbar{
    padding:18px 16px 0;
    gap:8px;
  }

  .topbar-actions{
    margin-left:auto;
    gap:7px;
  }

  /* На телефоне соцсети больше не прячем */
  .top-socials{
    display:flex !important;
    align-items:center;
    gap:3px;
    min-height:38px;
    padding:3px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:999px;
    background:rgba(10,10,10,.22);
    backdrop-filter:blur(22px) saturate(120%);
    -webkit-backdrop-filter:blur(22px) saturate(120%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.06),
      0 10px 32px rgba(0,0,0,.16);
  }

  .top-socials a,
  .top-socials a:link,
  .top-socials a:visited{
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.06);
    color:#fff !important;
  }

  .top-socials svg{
    width:14px;
    height:14px;
  }

  .wordmark{
    width:auto;
    min-width:134px;
    height:38px;
    flex:0 0 auto;
    font-size:9px;
  }

  .menu-button{
    display:block;
    min-height:38px;
    padding:0 13px;
    border-radius:999px;
    background:rgba(10,10,10,.22);
    border:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(22px) saturate(120%);
    -webkit-backdrop-filter:blur(22px) saturate(120%);
    font-size:9px;
  }
}

@media (max-width:390px){
  .topbar{
    padding-left:10px;
    padding-right:10px;
    gap:5px;
  }

  .topbar-actions{
    gap:5px;
  }

  .top-socials{
    gap:2px;
    padding:2px;
    min-height:36px;
  }

  .top-socials a,
  .top-socials a:link,
  .top-socials a:visited{
    width:28px;
    height:28px;
  }

  .top-socials svg{
    width:13px;
    height:13px;
  }

  .wordmark{
    width:auto;
    min-width:122px;
    height:36px;
    flex-basis:auto;
  }

  .menu-button{
    min-height:36px;
    padding:0 10px;
  }
}