/* ==========================================================================
   blog_feed.css - the Blog Feed's listing (/blogs), built on the News Feed.

   Tom (2026-10-23, Chris approved): "It's not the same fonts and stuff as the
   other one... and it doesn't go all the way to the right. We want everything
   in this display area to be built based on the newsfeed."
   /newsfeed is the sizing master for every feed (S586-DRL-02). Each rule below
   names the News Feed rule it copies (css/style.css, css/newsfeed.css). The
   row box itself - 1px #dfdfdf, 10px padding, 10px between rows - is NOT here:
   it comes from css/mh_ui.css (#column_main > .blog_post_row), never restated.

   Loaded by blogs.php and by the profile (includes/profile_new_layout.php), whose
   Blogs tab draws the same rows inside a .blogs-page list (Tom, 2026-11-07).
   css/blogs.css is shared with other pages' toolbars (Hive Studio, Smart Mail,
   Autopilot), so nothing here touches band chrome, and every selector is under
   .blogs-page.

   Markup: includes/blog_feed_row.php (blogs_query.php PostListing(), profile_query.php).
   ========================================================================== */

/* ---- display area: the News Feed's #column_main has no frame of its own
   (.the_newsfeed_container #column_main { border: none }). The rows carry the
   borders, edge to edge with the band. */
.blogs-page #column_main { border: 0; }

/* ---- row: .full_width_main_content_newsfeed_post_container ---------------- */
.blogs-page .blog_post_row { text-align: left; }

/* avatar column + right column: ..._post_container_memeber_pic (50x50, 1px #000)
   and ..._post_right_content (padding-left 10px, padding-bottom 10px on
   ..._right_the_content). The News Feed keeps 50x50 on phones too. */
.blogs-page .blog_post_flex { display: flex; align-items: flex-start; }
.blogs-page .blog_post_avatar_col { flex: 0 0 auto; margin-right: 10px; }
.blogs-page .blog_post_owner_avatar img.membericon {
    width: 50px;
    height: 50px;
    border: 1px solid #000;
    object-fit: cover;
    display: block;
}
.blogs-page .blog_post_body_col {
    flex: 1 1 auto;
    min-width: 0;
    margin-right: 4px;               /* the News Feed's calc(100% - 54px) stops 4px short of the row's padding */
    padding-bottom: 10px;
    word-break: break-word;
}

/* ---- author line: .nf-post-header-row (css/newsfeed.css) and the member name
   ..._the_content_member_name a (16px bold #104980). */
.blogs-page .blog_post_owner_header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 12px;
    row-gap: 6px;
    padding-bottom: 0;
}
.blogs-page .blog_post_owner_name {
    flex: 0 0 auto;
    font-size: 16px;
    font-weight: bold;
    color: #104980;
    text-decoration: none;
    white-space: nowrap;
}
.blogs-page .blog_post_owner_header .nf-post-action-bar { margin: 0 0 0 clamp(12px, 2vw, 28px); }
/* The rest of what the row takes from css/blogs.css, here too so the row looks the same on a
   page that does not load blogs.css (the profile's Blogs tab, S624): the owner icons at the
   far right, and a hovered bar icon's tooltip painted above the rows below it (the rows are
   position:relative .col-xs-12 boxes; the :hover transform makes a stacking context). */
.blogs-page .blog_post_owner_actions { flex: 0 0 auto; margin-left: auto; white-space: nowrap; }
.blogs-page .blog_post_row .nf-post-action-bar .nf-post-badge:hover,
.blogs-page .blog_post_row .nf-post-action-bar .nf-post-action:hover { z-index: 1200; }

/* ---- post body: ..._post_right_the_content_text - the grey 18px box. -------- */
.blogs-page .blog_post_content_box {
    display: flex;
    align-items: flex-start;
    width: 100%;
    margin: 7px 0 0 0;
    padding: 7px 10px;
    background: #f7f7f7;
    border: 1px solid #e4e4e4;
    color: #352d2d;
    font-family: 'Tahoma', 'Poppins', Geneva, sans-serif;
    font-size: 18px;
}

/* picture: .newsfeed_post_list_media_source_container - 18.25em x 11.375em,
   which is 329x205 at the 18px text and tracks the A-/A+ sizer (S411), the
   picture cropped to fill (.newsfeed_post_list_first_image_in_post). */
.blogs-page .blog_post_media {
    flex: 0 0 auto;
    width: 18.25em;
    height: 11.375em;
    max-width: 100%;
    overflow: hidden;
}
.blogs-page .blog_post_media a { display: block; width: 100%; height: 100%; }
.blogs-page .blog_post_media img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    border: 0;
    object-fit: cover;
}

/* text beside it: ..._the_content_short ...media_source_container ~ p
   (padding 7px 12px; the News Feed leaves 0.3125em after the picture). The title
   takes the size the Group Feed's titles took off the News Feed band (21.04px
   bold Tahoma, S611); the text is the News Feed post text, 18px. */
.blogs-page .blog_post_text {
    flex: 1 1 auto;
    min-width: 0;
    padding: 7px 12px;
    overflow-wrap: anywhere;
}
.blogs-page .blog_post_media + .blog_post_text { margin-left: 0.3125em; }
.blogs-page .blog_post_title {
    font-size: 21.04px;
    font-weight: bold;
    line-height: 1.3;
}
.blogs-page .blog_post_title a,
.blogs-page .blog_post_title a:link,
.blogs-page .blog_post_title a:visited { color: #3b5998; text-decoration: none; }
.blogs-page .blog_post_title a:hover { text-decoration: underline; }
.blogs-page .blog_post_desc { margin-top: 6px; font-size: 18px; }

/* ---- meta: ..._the_content_posted_bottom_bar (14px, 12px above / 3px below,
   links #3b5998 with 4px after each). */
.blogs-page .blog_post_meta {
    display: block;
    margin: 12px 0 3px 0;
    font-size: 14px;
}
.blogs-page .blog_post_meta a { color: #3b5998; text-decoration: none; }
.blogs-page .blog_post_meta a:hover { text-decoration: underline; }
.blogs-page .blog_post_date { margin-right: 4px; }

/* View Statistics (own posts) replaces the text box with the chart panel. */
.blogs-page .blog_post_row .bps-panel {
    display: block;
    width: 100%;
    margin: 7px 0 0 0;
    padding: 0;
}

/* ---- phones: the News Feed's own breakpoints (css/style.css). --------------- */
/* <=761px: the text goes under the picture across the whole column (S586). */
@media (max-width: 761px) {
    .blogs-page .blog_post_content_box { flex-direction: column; }
    .blogs-page .blog_post_text { width: 100%; }
    .blogs-page .blog_post_media + .blog_post_text { margin-left: 0; }
}
/* <=600px: the action bar's icons wrap instead of running past the edge (css/blogs.css). */
@media (max-width: 600px) {
    .blogs-page .blog_post_owner_header .nf-post-action-bar { flex-wrap: wrap; gap: 12px; }
}
/* <=480px: the post drops under the avatar, full width, 4px below it. */
@media (max-width: 480px) {
    .blogs-page .blog_post_flex { flex-wrap: wrap; }
    .blogs-page .blog_post_avatar_col { margin-right: 0; }
    .blogs-page .blog_post_body_col { flex: 1 1 100%; margin: 4px 0 0 0; }
}