/* A638 — real desktop profile layout.
   Desktop only: remove the phantom grid row, use the available width and turn
   the profile wall/friends sections into desktop-sized components. */
@media (min-width:981px){
  body[data-pb-full-page="profile"],
  body[data-pb-full-page="profile"].pb-has-topbar,
  body[data-pb-full-page="profile"].has-bottom-nav,
  body[data-pb-full-page="profile"].pb-has-topbar.has-bottom-nav{
    padding-top:calc(var(--pb-topbar-h,58px) + 18px)!important;
    padding-right:clamp(22px,3vw,46px)!important;
    padding-bottom:calc(var(--pb-bottom-h,92px) + 46px + env(safe-area-inset-bottom,0px))!important;
    padding-left:clamp(22px,3vw,46px)!important;
  }

  .container[data-spa-content="profile"]{
    width:min(100%,1180px)!important;
    max-width:1180px!important;
    margin:0 auto!important;
  }

  /* No artificial row 1 on the right and no two-row hero stretch. */
  .container[data-spa-content="profile"] .profile-modern-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1.62fr) minmax(318px,.78fr)!important;
    grid-template-rows:auto!important;
    grid-auto-rows:auto!important;
    gap:16px!important;
    align-items:start!important;
    margin:0 0 16px!important;
  }
  .container[data-spa-content="profile"] .profile-modern-grid>.profile-hero-card{
    grid-column:1!important;
    grid-row:1!important;
    align-self:start!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
  }
  .container[data-spa-content="profile"] .profile-modern-grid>.profile-overview-grid{
    grid-column:2!important;
    grid-row:1!important;
    align-self:start!important;
    margin:0!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:12px!important;
  }
  .container[data-spa-content="profile"] .profile-modern-grid>.pb-starter-card{
    grid-column:1 / -1!important;
    grid-row:auto!important;
    align-self:start!important;
    margin:0!important;
  }

  /* Hero content should determine card height instead of the right column. */
  .container[data-spa-content="profile"] .profile-hero-card .profile-card-inner{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    padding:116px 28px 28px!important;
    display:block!important;
  }
  .container[data-spa-content="profile"] .profile-card-no-banner .profile-card-inner{
    padding-top:28px!important;
  }
  .container[data-spa-content="profile"] .profile-hero-layout{
    width:100%!important;
    display:grid!important;
    grid-template-columns:184px minmax(0,1fr)!important;
    gap:26px!important;
    align-items:center!important;
  }
  .container[data-spa-content="profile"] .profile-hero-avatar-col{
    align-self:center!important;
    justify-self:center!important;
  }
  .container[data-spa-content="profile"] .profile-hero-content{
    align-self:center!important;
    justify-content:center!important;
    padding:6px 0!important;
  }
  .container[data-spa-content="profile"] .profile-hero-avatar-col .profile-avatar-trigger,
  .container[data-spa-content="profile"] .profile-hero-avatar-col .profile-avatar-main{
    width:168px!important;
    height:168px!important;
    border-radius:38px!important;
  }
  .container[data-spa-content="profile"] .profile-hero-content .profile-xp-card,
  .container[data-spa-content="profile"] .profile-hero-content .profile-bio-edit-row,
  .container[data-spa-content="profile"] .profile-hero-content .buttons-backdrop{
    width:min(100%,590px)!important;
    max-width:590px!important;
  }
  .container[data-spa-content="profile"] .profile-hero-content .username-backdrop{
    max-width:590px!important;
  }
  .container[data-spa-content="profile"] .profile-hero-content .username-text,
  .container[data-spa-content="profile"] .profile-hero-content .username-pin-trigger{
    max-width:500px!important;
  }

  /* Right column is content-sized; empty cards/rows are never synthesized. */
  .container[data-spa-content="profile"] .profile-info-compact,
  .container[data-spa-content="profile"] .achievements-block{
    width:100%!important;
    min-height:0!important;
    height:auto!important;
  }
  .container[data-spa-content="profile"] .profile-info-compact:empty,
  .container[data-spa-content="profile"] .achievements-block:empty{
    display:none!important;
  }

  /* Friends stop behaving like a mobile horizontal scroller on a PC. */
  .container[data-spa-content="profile"] .profile-friends-flat{
    padding:16px 18px!important;
    margin:0 0 16px!important;
  }
  .container[data-spa-content="profile"] .profile-friends-flat .friends-grid{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    grid-auto-flow:row!important;
    grid-auto-columns:auto!important;
    gap:10px!important;
    overflow:visible!important;
    scroll-snap-type:none!important;
    padding:0!important;
  }
  .container[data-spa-content="profile"] .profile-friends-flat .friend-card{
    width:100%!important;
    min-width:0!important;
    min-height:68px!important;
    padding:9px 11px!important;
    display:grid!important;
    grid-template-columns:46px minmax(0,1fr)!important;
    align-items:center!important;
    justify-items:start!important;
    gap:10px!important;
    text-align:left!important;
  }
  .container[data-spa-content="profile"] .profile-friends-flat .friend-av{
    width:46px!important;
    height:46px!important;
    margin:0!important;
  }
  .container[data-spa-content="profile"] .profile-friends-flat .friend-name{
    width:100%!important;
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:11px!important;
  }

  /* Desktop wall = one proper feed column, not a mobile card pushed into a
     second CSS-grid cell while the left side stays empty. */
  .container[data-spa-content="profile"] .wall-area{
    display:block!important;
    width:100%!important;
    padding:22px 24px 28px!important;
    margin:0 0 18px!important;
    border-radius:22px!important;
  }
  .container[data-spa-content="profile"] .wall-area>h2,
  .container[data-spa-content="profile"] .wall-area>.wall-title,
  .container[data-spa-content="profile"] .wall-area>.pb-profile-compose-entry,
  .container[data-spa-content="profile"] .wall-area>.pb-profile-compose-divider,
  .container[data-spa-content="profile"] .wall-area>div[style*="Авторизуйтесь"],
  .container[data-spa-content="profile"] .wall-area>.post-card{
    width:min(100%,900px)!important;
    max-width:900px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .container[data-spa-content="profile"] .wall-area>h2,
  .container[data-spa-content="profile"] .wall-area>.wall-title{
    margin-top:0!important;
    margin-bottom:16px!important;
  }
  .container[data-spa-content="profile"] .wall-area>.pb-profile-compose-entry{
    margin-top:0!important;
    margin-bottom:10px!important;
  }
  .container[data-spa-content="profile"] .wall-area>.pb-profile-compose-divider{
    margin-top:0!important;
    margin-bottom:16px!important;
  }
  .container[data-spa-content="profile"] .wall-area>.post-card{
    grid-column:auto!important;
    margin-top:14px!important;
    padding:18px!important;
    border-radius:20px!important;
  }
  .container[data-spa-content="profile"] .wall-area>.post-card:first-of-type{
    margin-top:0!important;
  }
  .container[data-spa-content="profile"] .post-header{
    margin-bottom:14px!important;
  }
  .container[data-spa-content="profile"] .post-text{
    font-size:15px!important;
    line-height:1.55!important;
  }
  .container[data-spa-content="profile"] .profile-post-media-item,
  .container[data-spa-content="profile"] .post-graffiti{
    height:clamp(300px,46vw,500px)!important;
    max-height:500px!important;
    border-radius:17px!important;
  }
  .container[data-spa-content="profile"] .comments-section{
    margin-top:14px!important;
    padding-top:14px!important;
  }
}

/* Mid-size desktop/notebook: keep two columns without crushing the hero. */
@media (min-width:981px) and (max-width:1180px){
  .container[data-spa-content="profile"] .profile-modern-grid{
    grid-template-columns:minmax(0,1fr) 320px!important;
  }
  .container[data-spa-content="profile"] .profile-hero-layout{
    grid-template-columns:160px minmax(0,1fr)!important;
    gap:20px!important;
  }
  .container[data-spa-content="profile"] .profile-hero-avatar-col .profile-avatar-trigger,
  .container[data-spa-content="profile"] .profile-hero-avatar-col .profile-avatar-main{
    width:150px!important;
    height:150px!important;
    border-radius:34px!important;
  }
}