/*!
 * socialnet-layout-fix.css
 *
 * The professional and dating views break their multi-column grids at
 * @media(max-width:900px) and @media(max-width:640px). Those are VIEWPORT queries,
 * but in desktop mode the views are rendered inside #socialDesktopWindow, which is
 * far narrower than the screen. On a wide monitor the breakpoints therefore never
 * fire and the grids stay at full width inside a narrow window: measured in a 520px
 * window on a 1920px screen, the main column was squeezed to 144px while the sidebar
 * kept its full 320px.
 *
 * These mirror the three existing breakpoints as CONTAINER queries, so they respond
 * to the width the view actually has rather than the width of the monitor.
 *
 * The original media queries are deliberately left in socialnet.css. They are still
 * correct for a genuinely narrow screen and they do no harm: both sets ask for the
 * same single-column result, so whichever matches gives the same answer.
 *
 * The container is put on #socialProfileView, the closest ancestor of both grids, to
 * keep containment tight. container-type:inline-size makes an element a containing
 * block for absolutely positioned descendants, so the smaller the scope the less can
 * be disturbed.
 */

#socialProfileView.professional-view,
#socialProfileView.dating-view {
  container-type: inline-size;
  container-name: snview;
}

@container snview (max-width: 900px) {
  .professional-view .professional-profile-layout { grid-template-columns: minmax(0, 1fr); }
}

@container snview (max-width: 640px) {
  .dating-view .dating-finished-layout { grid-template-columns: 1fr; }
  .professional-view .professional-post-carousel .premium-engagement .engagement-label { display: none; }
}

/* ---------------------------------------------------------------------------
 * The profile box sat flush left inside the desktop window.
 *
 * The base rule centres the shell with `.social-app{width:min(...);margin:0 auto}`.
 * The desktop variant then re-declares `.desktop-window .social-app{...;margin:0}`,
 * which is right for the feed, where the shell is width:100% and fills the window so
 * the margin is never visible. But `.social-app.profile-mode` narrows the shell to
 * min(1240px,100%), and with margin:0 still in force that narrower box has nowhere to
 * go but hard against the left edge.
 *
 * Measured on production in a 1258px window: shell 1224px wide, 1px of space on the
 * left and 33px on the right. Restoring the auto margins gives 17px and 17px.
 *
 * Specificity: this is (0,3,0) against the (0,2,0) that sets margin:0, so it wins on
 * its own and needs no !important.
 * ------------------------------------------------------------------------ */

.desktop-window .social-app.profile-mode {
  margin-left: auto;
  margin-right: auto;
}

/* ---------------------------------------------------------------------------
 * The top navigation bar must run the full width of the window in every space.
 *
 * The bar is a child of .social-app and takes its width, so it is only ever as wide
 * as the shell. In personal and dating the shell already fills the desktop window, so
 * the bar is full width there. In professional the shell is 32px narrower than the
 * window at every viewport size - measured 1360 in a 1392 window and 1068 in a 1100
 * window - so the bar came up 32px short. Once the shell was centred, that shortfall
 * showed as a 16px gap at each end of the bar.
 *
 * Bringing the professional shell to the same full width as the other two spaces
 * fixes the bar and makes the three spaces consistent. It does NOT widen the content:
 * .social-main keeps its own max-width and auto margins, measured unchanged at 1340px
 * centred before and after.
 *
 * SPECIFICITY: the cap comes from
 *   .social-app.profile-mode:has(#socialProfileView.professional-view){width:min(1400px,calc(100% - 32px))}
 * and :has() takes the specificity of its most specific argument, so that ID inside
 * the :has() makes the rule (1,3,0). A selector built only from classes cannot beat
 * it however long it is. Hence #socialApp here, which lifts this to (1,5,1). This is
 * the same ID-inside-a-selector trap this stylesheet has sprung before.
 * ------------------------------------------------------------------------ */

body.desktop-session .desktop-window #socialApp.social-app.profile-mode[data-space="professional"] {
  width: 100%;
  max-width: none;
}

/* ---------------------------------------------------------------------------
 * The top bar must run the full width in the FEED view too (personal and dating
 * home, and any space showing the three-column feed).
 *
 * The shell already fills the window. The bar does not, because the shell is a grid
 * whose tracks are `270px 690px 300px` with `justify-content:center`, and the bar is
 * `grid-column:1/-1`. In CSS Grid, 1/-1 spans the TRACKS, not the container, so with
 * centred tracks the bar stops where the columns stop: measured 310..1610 in a 1920
 * window, which is exactly the dead space on each side.
 *
 * Fix: add a flexible filler track at each end and place the three content columns
 * explicitly in 2/3/4. The tracks are then laid out by the fillers rather than by
 * justify-content, so 1/-1 finally means the whole container. The content does not
 * move at all - measured identical before and after: left 310/270, main 600/690,
 * right 1310/300.
 *
 * Guarded to >1100px because socialnet.css drops the feed to two columns at
 * max-width:1100px, and this must not override that.
 * ------------------------------------------------------------------------ */

@media (min-width: 1101px) {
  body.desktop-session #socialApp.social-app:not(.profile-mode) {
    grid-template-columns: minmax(0, 1fr) 270px minmax(0, 690px) 300px minmax(0, 1fr);
    justify-content: normal;
  }
  body.desktop-session #socialApp.social-app:not(.profile-mode) > .social-product-nav { grid-column: 1 / -1; }
  body.desktop-session #socialApp.social-app:not(.profile-mode) > .work-nav-rail { grid-column: 2; }
  body.desktop-session #socialApp.social-app:not(.profile-mode) > .social-left { grid-column: 2; }
  body.desktop-session #socialApp.social-app:not(.profile-mode) > .social-main { grid-column: 3; }
  body.desktop-session #socialApp.social-app:not(.profile-mode) > .social-right { grid-column: 4; }
}

/* Below 1100px socialnet.css drops the feed to two tracks, `240px minmax(0,690px)`,
   still centred, so the bar was still short there - measured 25..975 in a 1000px
   window. Same treatment, matching that track list. `.social-right` is present but
   collapsed to zero width at this breakpoint, so it is parked in the content column
   rather than left to auto-place into a filler. */
@media (min-width: 761px) and (max-width: 1100px) {
  body.desktop-session #socialApp.social-app:not(.profile-mode) {
    grid-template-columns: minmax(0, 1fr) 240px minmax(0, 690px) minmax(0, 1fr);
    justify-content: normal;
  }
  body.desktop-session #socialApp.social-app:not(.profile-mode) > .social-product-nav { grid-column: 1 / -1; }
  body.desktop-session #socialApp.social-app:not(.profile-mode) > .work-nav-rail { grid-column: 2; }
  body.desktop-session #socialApp.social-app:not(.profile-mode) > .social-left { grid-column: 2; }
  body.desktop-session #socialApp.social-app:not(.profile-mode) > .social-main { grid-column: 3; }
  body.desktop-session #socialApp.social-app:not(.profile-mode) > .social-right { grid-column: 3; }
}