/* A639 — desktop profile composition pass.
   Goal: a real desktop hierarchy instead of mobile cards stretched across the viewport.
   Keeps mobile/tablet behavior from profile_page.css/A638 unchanged. */
@media (min-width:981px){
  body[data-pb-full-page="profile"]{
    --pf-desktop-sidebar:clamp(330px,28vw,372px);
    --pf-desktop-gap:18px;
  }

  .container[data-spa-content="profile"]{
    width:min(100%,1240px)!important;
    max-width:1240px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) var(--pf-desktop-sidebar)!important;
    grid-auto-flow:row dense!important;
    gap:var(--pf-desktop-gap)!important;
    align-items:start!important;
  }
  .container[data-spa-content="profile"] > *{
    min-width:0;
  }

  /* Flatten only the summary wrapper so its real cards can occupy desktop columns. */
  .container[data-spa-content="profile"] > .profile-modern-grid{
    display:contents!important;
  }

  /* Hero = main desktop surface. */
  .container[data-spa-content="profile"] .profile-modern-grid > .profile-hero-card{
    grid-column:1!important;
    grid-row:1!important;
    width:100%!important;
    min-width:0!important;
    border-radius:26px!important;
    overflow:hidden!important;
    align-self:start!important;
  }
  .container[data-spa-content="profile"] .profile-hero-card .profile-card-inner{
    min-height:342px!important;
    padding:128px 30px 28px!important;
    display:flex!important;
    align-items:flex-end!important;
  }
  .container[data-spa-content="profile"] .profile-card-no-banner .profile-card-inner{
    min-height:280px!important;
    padding-top:30px!important;
  }
  .container[data-spa-content="profile"] .profile-hero-layout{
    width:100%!important;
    grid-template-columns:172px minmax(0,1fr)!important;
    gap:24px!important;
    align-items:end!important;
  }
  .container[data-spa-content="profile"] .profile-hero-avatar-col{
    align-self:end!important;
    justify-self:start!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:160px!important;
    height:160px!important;
    border-radius:36px!important;
  }
  .container[data-spa-content="profile"] .profile-hero-content{
    align-self:end!important;
    justify-content:flex-end!important;
    padding:0 0 2px!important;
    min-width:0!important;
  }
  .container[data-spa-content="profile"] .profile-hero-content .username-backdrop,
  .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%,560px)!important;
    max-width:560px!important;
  }

  /* XP is a compact desktop status module, not a full-width mobile row. */
  .container[data-spa-content="profile"] .profile-hero-content .profile-xp-card{
    width:min(100%,430px)!important;
    max-width:430px!important;
    min-height:58px!important;
    margin-right:auto!important;
    padding:9px 11px!important;
    grid-template-columns:minmax(0,1fr) auto auto auto!important;
    column-gap:10px!important;
    border-radius:14px!important;
  }
  .container[data-spa-content="profile"] .profile-xp-level{
    min-width:0!important;
  }
  .container[data-spa-content="profile"] .profile-xp-value,
  .container[data-spa-content="profile"] .profile-xp-streak{
    white-space:nowrap!important;
  }

  /* Information + achievements become the compact desktop sidebar. */
  .container[data-spa-content="profile"] .profile-modern-grid > .profile-overview-grid{
    grid-column:2!important;
    grid-row:1 / span 2!important;
    width:100%!important;
    margin:0!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:14px!important;
    align-self:start!important;
  }
  .container[data-spa-content="profile"] .profile-info-compact,
  .container[data-spa-content="profile"] .achievements-block{
    border-radius:20px!important;
    padding:16px!important;
  }
  .container[data-spa-content="profile"] .profile-info-row{
    min-height:52px!important;
    padding:9px 2px!important;
  }
  .container[data-spa-content="profile"] .achievements-list{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .container[data-spa-content="profile"] .achievement-item{
    min-width:0!important;
  }

  /* Friends live directly under the banner/identity surface on desktop. */
  .container[data-spa-content="profile"] > .profile-friends-flat{
    grid-column:1!important;
    grid-row:2!important;
    width:100%!important;
    margin:0!important;
    padding:15px 16px 16px!important;
    border-radius:20px!important;
    align-self:start!important;
  }
  .container[data-spa-content="profile"] > .profile-friends-flat .friends-grid{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:9px!important;
    overflow:visible!important;
    padding:0!important;
  }
  .container[data-spa-content="profile"] > .profile-friends-flat .friend-card{
    min-height:66px!important;
    padding:8px 10px!important;
    grid-template-columns:44px minmax(0,1fr)!important;
    gap:9px!important;
    border-radius:15px!important;
  }
  .container[data-spa-content="profile"] > .profile-friends-flat .friend-av{
    width:44px!important;
    height:44px!important;
  }
  .container[data-spa-content="profile"] > .profile-friends-flat .friend-name{
    font-size:11px!important;
  }

  /* Starter missions, when present, belong to the sidebar beneath its summary. */
  .container[data-spa-content="profile"] .profile-modern-grid > .pb-starter-card{
    grid-column:2!important;
    grid-row:3!important;
    width:100%!important;
    margin:0!important;
    align-self:start!important;
  }

  /* Everything after the summary defaults to full desktop width unless placed above. */
  .container[data-spa-content="profile"] > .pb-achievement-modal{
    grid-column:1 / -1!important;
  }
  .container[data-spa-content="profile"] > .wall-area{
    grid-column:1 / -1!important;
    width:100%!important;
    margin:2px 0 0!important;
    padding:22px!important;
    border-radius:24px!important;
  }

  /* Wall gets desktop rhythm: centered reading column but wider composer/posts. */
  .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%,920px)!important;
    max-width:920px!important;
  }
  .container[data-spa-content="profile"] .wall-area > h2,
  .container[data-spa-content="profile"] .wall-area > .wall-title{
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .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{
    margin-left:auto!important;
    margin-right:auto!important;
  }

  /* Fixed/dialog layers must not participate visually in the page grid. */
  .container[data-spa-content="profile"] > .pb-achievement-modal[hidden]{display:none!important}
}

/* Notebook widths: keep desktop hierarchy but make the sidebar a little tighter. */
@media (min-width:981px) and (max-width:1180px){
  body[data-pb-full-page="profile"]{--pf-desktop-sidebar:320px;--pf-desktop-gap:14px}
  .container[data-spa-content="profile"] .profile-hero-card .profile-card-inner{
    min-height:318px!important;
    padding:116px 22px 22px!important;
  }
  .container[data-spa-content="profile"] .profile-hero-layout{
    grid-template-columns:148px minmax(0,1fr)!important;
    gap:18px!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:142px!important;height:142px!important;border-radius:32px!important;
  }
  .container[data-spa-content="profile"] .profile-hero-content .profile-xp-card{max-width:390px!important}
  .container[data-spa-content="profile"] > .profile-friends-flat .friends-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .container[data-spa-content="profile"] > .profile-friends-flat .friend-card:nth-child(5){display:none!important}
}