/* =========================================================
   Vrienda v7.4 - LinkedIn Proportions Layout
   Plaats als ALLERLAATSTE stylesheet, na v7.3/v7.3.1.
   Doel:
   - kolomverhoudingen dichter bij LinkedIn
   - center/feed prominenter
   - rechterkolom compacter
   - linkerzijde rustiger
   ========================================================= */

:root{
    --vrienda-shell-width:1280px;
    --vrienda-left-width:300px;
    --vrienda-feed-width:620px;
    --vrienda-right-width:300px;
    --vrienda-gap:18px;
}

/* Global page shell */
.layout,
.dashboard,
.app-layout,
.social-layout,
.main-layout,
.page-grid,
.content-grid,
.content-wrap,
.main-wrap,
.page-wrap,
.page-wrapper,
.site-wrap,
.app-wrap,
.container{
    max-width:var(--vrienda-shell-width) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    box-sizing:border-box !important;
}

/* Main 3-column grid */
.layout,
.dashboard,
.app-layout,
.social-layout,
.main-layout,
.page-grid,
.content-grid{
    display:grid !important;
    grid-template-columns:var(--vrienda-left-width) var(--vrienda-feed-width) var(--vrienda-right-width) !important;
    gap:var(--vrienda-gap) !important;
    justify-content:center !important;
    align-items:start !important;
}

/* Center feed */
main,
.main,
.feed-column,
.content,
.main-content,
.center,
.timeline,
.timeline-wrap,
.feed,
.posts,
.krabbels{
    width:100% !important;
    max-width:var(--vrienda-feed-width) !important;
    min-width:0 !important;
}

/* Left column */
.sidebar,
.leftbar,
.left-sidebar,
.sidebar-left,
.layout > aside:first-child,
.dashboard > aside:first-child{
    width:var(--vrienda-left-width) !important;
    max-width:var(--vrienda-left-width) !important;
    min-width:0 !important;
}

/* Right column */
.rightbar,
.right-sidebar,
.sidebar-right,
.layout > aside:last-child,
.dashboard > aside:last-child{
    width:var(--vrienda-right-width) !important;
    max-width:var(--vrienda-right-width) !important;
    min-width:0 !important;
}

/* Header inner width should match layout */
header .container,
.topbar .container,
.navbar .container,
.site-header .container,
.app-header .container{
    max-width:var(--vrienda-shell-width) !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

/* Feed cards use the full center column */
.feed-card,
.post-card,
.krabbel-card,
.vrienda-community-card,
.composer,
.post-composer,
.krabbel-composer,
#postForm,
.create-post,
.stories,
.stories-card,
.story-card,
.activity,
.activity-card,
.welcome-banner,
.welcome-card,
.hero-card{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
}

/* Make feed media feel less cramped */
.post-media img,
.media-wrap img,
.image-wrap img,
.feed-image,
.post-image,
.krabbel-image,
.vrienda-community-media{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
}

/* Sidebar cards should not visually dominate */
.sidebar .panel,
.sidebar .nav-card,
.sidebar-profile-card,
.leftbar .panel,
.left-sidebar .panel,
.trending-card,
.side-card,
.menu-card,
.widget{
    width:100% !important;
    box-sizing:border-box !important;
}

/* Right sidebar slightly denser */
.rightbar .panel,
.rightbar .widget,
.right-sidebar .panel,
.right-sidebar .widget,
.sidebar-right .panel,
.sidebar-right .widget,
.trending-card,
.side-card{
    padding:14px !important;
}

/* Left menu slightly denser */
.sidebar a,
.leftbar a,
nav.sidebar a,
.menu a,
.side-menu a{
    min-height:32px !important;
    padding:7px 11px !important;
    font-size:13px !important;
}

/* Profile card fits the LinkedIn-like left column */
.sidebar-profile-card{
    width:100% !important;
    box-sizing:border-box !important;
}

.sidebar-profile-avatar{
    width:78px !important;
    height:78px !important;
    min-width:78px !important;
    min-height:78px !important;
    max-width:78px !important;
    max-height:78px !important;
}

/* Better balance for composer and post content */
.feed-card > *:not(img):not(video):not(.post-media):not(.media-wrap),
.post-card > *:not(img):not(video):not(.post-media):not(.media-wrap),
.krabbel-card > *:not(img):not(video):not(.post-media):not(.media-wrap),
.vrienda-community-card > *:not(img):not(video):not(.post-media):not(.media-wrap){
    margin-left:16px !important;
    margin-right:16px !important;
}

.composer,
.post-composer,
.krabbel-composer,
#postForm,
.create-post{
    padding:16px !important;
}

/* Keep columns sticky like LinkedIn on desktop */
@media(min-width:1051px){
    .sidebar,
    .leftbar,
    .left-sidebar,
    .sidebar-left,
    .layout > aside:first-child,
    .dashboard > aside:first-child,
    .rightbar,
    .right-sidebar,
    .sidebar-right,
    .layout > aside:last-child,
    .dashboard > aside:last-child{
        position:sticky !important;
        top:82px !important;
        max-height:calc(100dvh - 92px) !important;
        overflow:auto !important;
        scrollbar-width:thin;
    }
}

/* Medium screens: hide right rail, keep feed wide */
@media(max-width:1180px){
    :root{
        --vrienda-shell-width:980px;
        --vrienda-left-width:280px;
        --vrienda-feed-width:620px;
        --vrienda-right-width:0px;
        --vrienda-gap:16px;
    }

    .layout,
    .dashboard,
    .app-layout,
    .social-layout,
    .main-layout,
    .page-grid,
    .content-grid{
        grid-template-columns:var(--vrienda-left-width) var(--vrienda-feed-width) !important;
    }

    .rightbar,
    .right-sidebar,
    .sidebar-right,
    .layout > aside:last-child,
    .dashboard > aside:last-child{
        display:none !important;
    }
}

/* Tablet/mobile: feed full width */
@media(max-width:900px){
    :root{
        --vrienda-shell-width:100%;
        --vrienda-left-width:100%;
        --vrienda-feed-width:100%;
        --vrienda-right-width:0px;
        --vrienda-gap:10px;
    }

    .layout,
    .dashboard,
    .app-layout,
    .social-layout,
    .main-layout,
    .page-grid,
    .content-grid{
        display:block !important;
        max-width:100% !important;
        padding-left:8px !important;
        padding-right:8px !important;
    }

    main,
    .main,
    .feed-column,
    .content,
    .main-content,
    .center,
    .timeline,
    .timeline-wrap,
    .feed,
    .posts,
    .krabbels{
        max-width:100% !important;
        width:100% !important;
    }

    .sidebar,
    .leftbar,
    .left-sidebar,
    .sidebar-left,
    .layout > aside:first-child,
    .dashboard > aside:first-child{
        width:100% !important;
        max-width:100% !important;
        position:static !important;
        max-height:none !important;
        overflow:visible !important;
    }

    .rightbar,
    .right-sidebar,
    .sidebar-right{
        display:none !important;
    }

    .feed-card > *:not(img):not(video):not(.post-media):not(.media-wrap),
    .post-card > *:not(img):not(video):not(.post-media):not(.media-wrap),
    .krabbel-card > *:not(img):not(video):not(.post-media):not(.media-wrap),
    .vrienda-community-card > *:not(img):not(video):not(.post-media):not(.media-wrap){
        margin-left:12px !important;
        margin-right:12px !important;
    }
}