/* Basic Container */
.facefeed-lite-container {
    margin: 20px 0;
}

/* Grid Layout: 1 column by default, 2 columns on medium screens+ */
.facefeed-grid {
    display: grid;
    grid-template-columns: 1fr; /* 1 column by default */
    gap: 1.5rem; /* Space between posts */
}

@media (min-width: 768px) { /* Adjust breakpoint as needed (768px is typical for tablets) */
    .facefeed-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on wider screens */
    }
}

/* Individual Post Styling */
.facefeed-post {
    background-color: #fff;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    border-radius: 0.5rem;
    padding: 1rem;
    display: flex;
    flex-direction: column; /* Arrange header, content, footer vertically */
    border: 1px solid #eee; /* Optional border */
}

/* Post Header */
.facefeed-header {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
}

.facefeed-avatar {
    height: 48px; /* 3rem */
    width: 48px;  /* 3rem */
    border-radius: 50%;
    margin-right: 0.75rem;
    border: 1px solid #e5e7eb;
    object-fit: cover; /* Ensure image covers the area */
}

.facefeed-post-info {
    flex-grow: 1;
}

.facefeed-author-name {
    font-weight: 600;
    color: #1f2937;
    line-height: 1.25;
    margin: 0;
}

.facefeed-date {
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1.25;
    margin: 0;
}
.facefeed-date a {
    color: inherit;
    text-decoration: none;
}
.facefeed-date a:hover {
    text-decoration: underline;
}


/* Post Content */
.facefeed-content {
    flex-grow: 1; /* Allow content to take available space */
    margin-bottom: 0.75rem; /* Space before footer */
}

.facefeed-message {
    color: #374151;
    margin-bottom: 0.75rem;
    white-space: pre-wrap; /* Respect line breaks from Facebook */
    word-wrap: break-word; /* Prevent long words/URLs from overflowing */
}

/* Post Images */
.facefeed-images {
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
}

.facefeed-image-link {
    display: block;
    text-decoration: none;
}

.facefeed-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0.375rem;
    object-fit: cover;
}

.facefeed-image.single {
    /* Specific styles for single image if needed */
}

/* Grid for multiple images */
.facefeed-image-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.25rem; /* Small gap between grid images */
}

.facefeed-image-grid .grid-item {
    position: relative;
    padding-bottom: 100%; /* Creates a 1:1 aspect ratio container */
    overflow: hidden; /* Hide parts of image that don't fit */
    border-radius: 0.375rem;
}

.facefeed-image-grid .grid-item .facefeed-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the 1:1 area */
}

.facefeed-image-grid .grid-item.more-images {
    background-color: #e5e7eb; /* Background for the overlay item */
}

.facefeed-image-grid .grid-item.more-images .facefeed-image {
    opacity: 0.4; /* Fade the underlying image */
}

.facefeed-image-grid .grid-item .more-count {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    font-weight: bold;
    color: #4b5563;
    z-index: 10;
}


/* Post Footer */
.facefeed-footer {
    margin-top: auto; /* Push footer to bottom */
    padding-top: 0.75rem;
    border-top: 1px solid #e5e7eb;
    font-size: 0.875rem;
    color: #4b5563;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Allow wrapping on small screens */
    gap: 0.5rem; /* Space between reaction group and view link */
}

.facefeed-reactions {
    display: flex;
    gap: 1rem; /* Space between reaction items */
    align-items: center;
    flex-wrap: wrap; /* Allow reactions to wrap */
}

.facefeed-likes,
.facefeed-comments,
.facefeed-shares {
    display: flex;
    align-items: center;
}

.facefeed-icon {
    margin-right: 0.25rem; /* Space between icon and number */
    /* Adjust icon size/color if needed */
}
.facefeed-likes .facefeed-icon {
    color: #3b82f6; /* Blue for likes */
}

.facefeed-view-link {
    color: #3b82f6;
    text-decoration: none;
    white-space: nowrap; /* Prevent link from wrapping */
}
.facefeed-view-link:hover {
    text-decoration: underline;
}

/* --- Font Inheritance Fix --- */
/* Force specific text elements within the feed to inherit the parent font,
   overriding potential theme styles targeting 'code' or 'pre' tags
   if those tags are somehow being applied unexpectedly. */

   .facefeed-post .facefeed-author-name,
   .facefeed-post .facefeed-date,
   .facefeed-post .facefeed-date a,
   .facefeed-post .facefeed-message,
   .facefeed-post .facefeed-likes,
   .facefeed-post .facefeed-comments,
   .facefeed-post .facefeed-shares,
   .facefeed-post .facefeed-view-link,
   .facefeed-post .more-count {
    font-family: "Lato", sans-serif;
   }

   .facefeed-post .facefeed-author-name {
    font-size: 1.5em;
    font-weight:700;
   }

   .facefeed-post .facefeed-date,
   .facefeed-post .facefeed-date a{
    font-size: 1em;
   }
   .facefeed-post .facefeed-message{
    font-size:1.3em;
   }