/* =========================================================
   Vrienda v5.1.1 Feed Density & Width Tuning
   Patch for v5.1 Social Feed Refinement.
   Place AFTER social-feed-refinement.css.
   ========================================================= */

:root{
  --vf-feed-width:760px;
  --vf-left-width:220px;
  --vf-right-width:260px;
  --vf-gap:14px;
}

/* Slightly wider, better balanced desktop shell */
.container,
.wrapper,
.page,
.page-wrap,
.page-wrapper,
.site,
.site-wrap,
.app,
.app-wrap,
.content-wrap,
.main-wrap,
.layout,
.dashboard{
  max-width:1260px !important;
}

/* Tune existing grid/flex layout without forcing a new one */
@supports (grid-template-columns: 1fr){
  .layout,
  .dashboard,
  .app-layout,
  .social-layout,
  .main-layout,
  .page-grid,
  .content-grid{
    grid-template-columns:var(--vf-left-width) minmax(0,var(--vf-feed-width)) var(--vf-right-width) !important;
    gap:var(--vf-gap) !important;
    justify-content:center !important;
  }
}

/* Make the actual feed a little wider */
main,
.main,
.feed-column,
.content,
.main-content,
.center,
.timeline,
.timeline-wrap,
.feed,
.posts,
.krabbels{
  max-width:var(--vf-feed-width) !important;
}

/* Compact post cards */
.feed-card,
.post-card,
.krabbel-card,
.vrienda-community-card{
  margin-bottom:14px !important;
  border-radius:24px !important;
}

/* Reduce inner post whitespace */
.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;
}

.feed-card > *:first-child,
.post-card > *:first-child,
.krabbel-card > *:first-child,
.vrienda-community-card > *:first-child{
  margin-top:13px !important;
}

.feed-card > *:last-child,
.post-card > *:last-child,
.krabbel-card > *:last-child,
.vrienda-community-card > *:last-child{
  margin-bottom:13px !important;
}

/* Post header tighter */
.post-header,
.krabbel-header,
.feed-card-header,
.vrienda-community-card-head,
.user-row,
.author-row{
  min-height:46px !important;
  gap:9px !important;
}

/* Avatars slightly smaller like LinkedIn feed */
.avatar,
.profile-photo,
.user-avatar,
.post-avatar,
.comment-avatar,
.member-avatar,
img.avatar,
img.profile-photo,
img.user-avatar,
img.post-avatar,
.post-header img,
.krabbel-header img,
.feed-card-header img,
.user-row img,
.author-row img,
a[href*="public_profile"] img,
a[href*="profile"] img{
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  min-height:44px !important;
  max-width:44px !important;
  max-height:44px !important;
  flex-basis:44px !important;
}

/* Better text density */
.feed-card,
.post-card,
.krabbel-card,
.vrienda-community-card{
  font-size:14.5px !important;
  line-height:1.48 !important;
}

.feed-card p,
.post-card p,
.krabbel-card p,
.vrienda-community-card p{
  margin-top:8px !important;
  margin-bottom:8px !important;
  line-height:1.48 !important;
}

small,
.meta,
.date,
.time,
.timestamp,
.post-meta,
.krabbel-meta{
  font-size:12.5px !important;
}

/* Media max height tuned to reduce endless vertical scrolling */
.feed-card > img:not(.avatar):not(.profile-photo):not(.user-avatar):not(.post-avatar),
.post-card > img:not(.avatar):not(.profile-photo):not(.user-avatar):not(.post-avatar),
.krabbel-card > img:not(.avatar):not(.profile-photo):not(.user-avatar):not(.post-avatar),
.vrienda-community-card > img:not(.avatar):not(.profile-photo):not(.user-avatar):not(.post-avatar),
.post-media img,
.media-wrap img,
.image-wrap img,
.feed-image,
.post-image,
.krabbel-image,
.vrienda-community-media{
  max-height:600px !important;
}

/* Keep small stickers/gifs naturally sized */
.feed-card img[src*="gif"],
.post-card img[src*="gif"],
.krabbel-card img[src*="gif"],
.feed-card img[src*="emoji"],
.post-card img[src*="emoji"],
.krabbel-card img[src*="emoji"]{
  width:auto !important;
  max-width:260px !important;
  max-height:260px !important;
  border-radius:14px !important;
}

/* Compact actions/reactions area */
.actions,
.post-actions,
.krabbel-actions,
.reactions,
.vrienda-reactions,
.vrienda-community-meta{
  padding-top:8px !important;
  margin-top:8px !important;
  gap:6px !important;
}

.reaction-trigger,
.like-button,
.comment-button,
.action-btn,
.actions button,
.post-actions button,
.krabbel-actions button{
  min-height:31px !important;
  padding:0 10px !important;
  font-size:13px !important;
  border-radius:999px !important;
}

/* Comment input/reply areas more compact */
.comment-form,
.reply-form,
.comment-box,
.krabbel-comment-form{
  margin-top:8px !important;
}

.comment-form input,
.comment-form textarea,
.reply-form input,
.reply-form textarea,
.comment-box input,
.comment-box textarea,
.krabbel-comment-form input,
.krabbel-comment-form textarea{
  min-height:36px !important;
  padding:8px 11px !important;
  font-size:13.5px !important;
}

/* Composer density */
.composer,
.post-composer,
.krabbel-composer,
#postForm,
.create-post{
  padding:14px !important;
  margin-bottom:14px !important;
  border-radius:24px !important;
}

.composer textarea,
.post-composer textarea,
.krabbel-composer textarea,
#postForm textarea,
.create-post textarea{
  min-height:82px !important;
}

/* Sidebars more compact */
.leftbar,
.left-sidebar,
.sidebar-left,
nav.sidebar,
.rightbar,
.right-sidebar,
.sidebar-right,
.widget,
.side-card,
.trending-card,
.menu-card{
  font-size:13.5px !important;
}

.sidebar a,
.leftbar a,
nav.sidebar a,
.menu a,
.side-menu a{
  min-height:33px !important;
  padding-top:6px !important;
  padding-bottom:6px !important;
}

/* Widgets/cards on sidebars less tall */
.widget,
.side-card,
.trending-card,
.menu-card{
  padding:14px !important;
  border-radius:22px !important;
}

/* Stories/activity blocks compact */
.stories,
.stories-card,
.activity-card,
.story-card{
  margin-bottom:14px !important;
}

.story-item,
.story-avatar{
  transform-origin:center;
}

/* Wide feature pages still readable */
.vrienda-discovery,
.vrienda-groups,
.vrienda-group-view,
.vrienda-media-engine,
.vrienda-community-feed{
  max-width:1040px !important;
}

/* Desktop large screens */
@media(min-width:1450px){
  :root{
    --vf-feed-width:790px;
    --vf-left-width:225px;
    --vf-right-width:275px;
  }

  .container,
  .wrapper,
  .page,
  .page-wrap,
  .page-wrapper,
  .site,
  .site-wrap,
  .app,
  .app-wrap,
  .content-wrap,
  .main-wrap,
  .layout,
  .dashboard{
    max-width:1320px !important;
  }
}

/* Tablet */
@media(max-width:1200px){
  :root{
    --vf-feed-width:720px;
    --vf-left-width:205px;
    --vf-right-width:0px;
  }
}

/* Mobile: keep nice full-width app feel */
@media(max-width:900px){
  :root{
    --vf-feed-width:100%;
    --vf-gap:12px;
  }

  .feed-card,
  .post-card,
  .krabbel-card,
  .vrienda-community-card{
    border-radius:18px !important;
    margin-bottom:11px !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:13px !important;
    margin-right:13px !important;
  }

  .avatar,
  .profile-photo,
  .user-avatar,
  .post-avatar,
  .comment-avatar,
  .member-avatar,
  img.avatar,
  img.profile-photo,
  img.user-avatar,
  img.post-avatar,
  .post-header img,
  .krabbel-header img,
  .feed-card-header img,
  .user-row img,
  .author-row img,
  a[href*="public_profile"] img,
  a[href*="profile"] img{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
    max-width:40px !important;
    max-height:40px !important;
    flex-basis:40px !important;
  }

  .feed-card,
  .post-card,
  .krabbel-card,
  .vrienda-community-card{
    font-size:14px !important;
  }

  .feed-card > img:not(.avatar):not(.profile-photo):not(.user-avatar):not(.post-avatar),
  .post-card > img:not(.avatar):not(.profile-photo):not(.user-avatar):not(.post-avatar),
  .krabbel-card > img:not(.avatar):not(.profile-photo):not(.user-avatar):not(.post-avatar),
  .vrienda-community-card > img:not(.avatar):not(.profile-photo):not(.user-avatar):not(.post-avatar),
  .post-media img,
  .media-wrap img,
  .image-wrap img,
  .feed-image,
  .post-image,
  .krabbel-image,
  .vrienda-community-media{
    max-height:70vh !important;
  }
}