/* Unified Social Feed Content Section Styling */
.parent-social-feed{
	background: #0c4a6e;
}
#social-feed-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 5 posts per row */ 
    grid-auto-rows: 1fr; /* Equal height for all grid rows */
    gap: 40px !important; /* Small gaps between the posts */
    width: 80% !important; /* Utilize the full width of the screen */
    margin: 0px auto !important;
    padding: 20px !important;
    box-sizing: border-box;	
}

/* Individual Social Post Card Styling */
#social-feed-content .social-post {
    background: #ffffff; /* White background for each post */
    padding: 0; /* Remove padding to make the image go edge-to-edge */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Adjusted shadow depth for less contrast */
    transition: transform 0.3s ease;
    color: #000000; /* Black text color for the post content */
    overflow: hidden; /* Clip content outside the card */
    font-family: Arial, sans-serif;
    border: none; /* Removed any unnecessary border */
    margin-bottom: 0; /* Ensure no bottom margin */
    display: flex; /* Enable flexbox layout */
    flex-direction: column; /* Stack content vertically */
    height: 100%; /* Ensure post takes up the full height of its grid cell */
    box-sizing: border-box;
}

/* Hover Effect for Each Social Post Card */
#social-feed-content .social-post:hover {
    transform: scale(1.05);
}

/* Media within a Social Post */
#social-feed-content .social-media {
    width: 100%; /* Extend image to the full width of the container */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Ensure it behaves as a block-level element */
    border-radius: 8px 8px 0 0; /* Rounded top corners */
    object-fit: cover; /* Ensure the image fills the area while maintaining proportions */
    margin: 0; /* Remove all margins */
    cursor: pointer; /* Turn mouse into a hand when hovering over the image */
}

/* Social Post Content Wrapper */
#social-feed-content .social-content {
    text-align: left; /* Align text to the left for readability */
    padding: 20px; /* Restore padding for the caption */
    flex-grow: 1;
}

/* Social Text Styling */
#social-feed-content .social-text {
    font-size: 16px;
    margin-bottom: 10px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 5; /* Limit text to 5 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis; /* Show ellipsis if text exceeds 5 lines */
}

/* Social Hashtags Styling */
#social-feed-content .social-hashtags {
    margin-top: 5px;
    font-size: 14px;
    color: #52bcc3; /* Light blue color for hashtags */
    line-height: 1.5;
    margin-bottom: 10px;
}

/* Social Author Section Styling */
.social-author-section {
    display: flex; /* Enable flexbox layout */
    align-items: center; /* Align items vertically */
    justify-content: flex-start; /* Align items to the left */
    gap: 10px; /* Space between logo and text */
    margin-top: auto; /* Push the section to the bottom */
}

/* Social Logo Styling for Posts */
.social-logo {
    width: 40px; /* Adjusted size for better responsiveness */
    height: 40px; /* Ensure proportional size */
    border-radius: 50%; /* Circular logo */
    object-fit: cover; /* Maintain aspect ratio */
    flex-shrink: 0; /* Prevent shrinking */
}

/* Social Author Details */
.social-author-details {
    display: flex;
    flex-direction: column; /* Stack title and date vertically */
    justify-content: center;
    min-width: 0; /* Allow text truncation */
}

/* Social Author Text Styling */
.social-author-text {
    font-size: 14px; /* Adjusted font size */
    white-space: nowrap; /* Prevent wrapping */
    overflow: hidden; /* Hide overflowing text */
    text-overflow: ellipsis; /* Add ellipsis (...) */
    max-width: 80%; /* Ensure text does not exceed container width */
    color: #000; /* Black text color */
    text-decoration: none; /* Remove underline by default */
    cursor: pointer; /* Hand icon when hovering over title */
}

.social-author-text:hover {
    text-decoration: underline; /* Underline on hover */
}

/* Social Date Styling */
#social-feed-content .social-date {
    font-size: 12px; /* Smaller font for date */
    color: #aaaaaa;
    margin-top: 3px; /* Adjust spacing between text and date */
    white-space: nowrap; /* Prevent wrapping */
    overflow: hidden;
    text-overflow: ellipsis; /* Add ellipsis if necessary */
}

/* Social Source Icon Styling */
.social-source-icon {
    width: 30px; /* Adjust width if needed */
    height: 30px; /* Ensure the logo maintains the same height */
    margin-left: auto; /* Push the source icon to the right end */
    object-fit: contain; /* Ensure the whole image is visible */
    flex-shrink: 0; /* Prevent the icon from shrinking */
    cursor: pointer; /* Change mouse cursor to hand when hovering over the icon */
}

/* Hide Hashtags (temporary fix, couldn't organize the hashtags properly) */
#social-feed-content .social-hashtags {
    display: none;
}

/* Overlay for Popup */
.popup-overlay-2 {
    display: none; /* Initially hidden */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Dark background */
    z-index: 9999; /* Ensure it's on top */
    align-items: center;
    justify-content: center;
    overflow: auto; /* Allows scrolling if needed */
}

/* Popup Content Styling */
.popup-content-2 {
    position: relative;
    width: 80%; /* Increased width to make the popup bigger */
    max-width: 800px; /* Set a maximum width for better responsiveness */
    margin: 5% auto; /* Centered with some top margin */
    background: #fff;
    display: flex;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    border-radius: 20px;
    overflow: visible; /* Allow close button to extend outside the popup */
}

/* Image Section of Popup */
.popup-image-2 {
    width: 60%; /* Increased size of the image in the popup */
    max-height: 100%;
    max-width: 100%;
    height: auto;
    display: block; /* Prevent inline-block spacing issues */
    border-right: 2px solid #ccc; /* Divider between image and sidebar */
    object-fit: contain;
    border-top-left-radius: 20px; /* Match rounding */
    border-bottom-left-radius: 20px; /* Match rounding */
}

/* Sidebar Content of Popup */
.popup-sidebar-2 {
    width: 40%; /* Sidebar with the tweet content and share buttons */
    padding: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    align-items: stretch;
    box-sizing: border-box;
    overflow: hidden; /* Ensure no overflow initially */
}

/* Close Button */
.close-button-2 {
    position: absolute; /* Ensure it's positioned relative to the popup */
    top: -25px; /* Adjust spacing above the popup */
    right: -25px; /* Adjust spacing to the right of the popup */
    font-size: 24px; /* Size of the "X" */
    color: #FFFFFF; /* Pure black color for the "X" */
    background: none; /* Remove background */
    border: none; /* Remove any borders */
    width: auto; /* Allow natural width for the "X" */
    height: auto; /* Allow natural height for the "X" */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer; /* Hand icon when hovering over the "X" */
    font-weight: bold; /* Make the "X" bold */
    line-height: 1; /* Adjust line height for better alignment */
    transition: transform 0.2s ease; /* Smooth hover effect */
    visibility: visible !important; /* Ensure it's always visible */
    pointer-events: auto; /* Allow interaction with the button */
}

/* Hover Effect for Close Button */
.close-button-2:hover {
    transform: scale(1.2); /* Slight zoom on hover */
}

/* Popup Header with Account Icon and Text */
.popup-header-2 {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.account-icon-2 {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 10px;
}

.popup-header-text-2 {
    font-weight: bold;
    font-size: 16px;
}

/* Tweet Text and Hashtags in Popup */
.post-text-2 {
    font-size: 16px; /* Default font size */
    line-height: 1.5; /* Adjust line height for readability */
    white-space: normal; /* Prevent wrapping by default */
    text-align: left; /* Align text */
    overflow: hidden; /* Hide overflowing content */
    overflow-y: auto;
    transition: font-size 0.2s ease; /* Smooth font size adjustment */
    display: block;
    margin: 0;
    overflow-wrap: break-word;
}

.post-hashtags-2 {
    font-size: 1rem; /* Slightly smaller font for hashtags */
    text-align: justify; /* Align hashtags for consistent appearance */
    color: #52bcc3; /* Light blue for hashtags */
    margin-bottom: 20px;
}

/* Share Buttons Styling */
.share-buttons-2 {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    justify-content: center; /* Center-align the icons */
}

.share-buttons-2 a {
    display: inline-block;
    text-decoration: none;
}

.share-buttons-2 img {
    width: 30px; /* Consistent size */
    height: 30px; /* Consistent size */
    cursor: pointer;
    transition: transform 0.2s ease;
}

/* Hover Effect for Social Media Icons */
.share-buttons-2 img:hover {
    transform: scale(1.2); /* Slight zoom on hover */
}

/* Specific Adjustment for YouTube Icon */
.share-buttons-2 a[href*="youtube"] img {
    width: 35px; /* Slightly wider for the YouTube icon */
    height: 25px; /* Keep the height consistent */
    position: relative;
    top: 2px; /* Shift the YouTube logo downwards */
}

/* Social Media Section Styling */
.social-media-section {
    margin-top: auto; /* Push this section to the bottom of the popup */
    text-align: center; /* Center-align the section */
    padding: 20px 0; /* Add some padding for spacing */
    background: #ffffff; /* Background color of the section */
    border-top: 1px solid #ccc; /* Top border for separation */
    position: relative; /* Ensures proper alignment */
    bottom: 0; /* Anchor the section at the bottom */
}


/* Title Above Social Media Icons */
.social-media-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #000000;
}

/* Base Styling for Popup Text */
.post-text-2 {
    flex-grow: 1; /* Allow the text to expand and take up available space */
    align-items: center; /* Vertically center the text within the available space */
    justify-content: center; /* Center the text horizontally as well */
    text-align: justify; /* Justify text alignment for better readability */
    overflow: hidden; /* Ensure text doesn't overflow */
    padding: 10px; /* Add padding for spacing */
}

.inline-platform-icon {
  width: 15px; /* Adjust size as needed */
  height: 15px; /* Explicit height for consistency */
  margin-right: 5px; /* Space between icon and text */
  vertical-align: middle;
  display: inline-block;
}

/* Show only the first media in the card */
#social-feed-content .social-post .social-media { display: none; }
#social-feed-content .social-post .social-media:first-of-type { display: block; }