/* --- Main Blog Container --- */
#blog-container-wrapper { max-width: 1200px; margin: 20px auto; padding: 0 15px; }

/* --- Centered Title and Button Container --- */
.blog-feed-header { text-align: center; margin-bottom: 20px; }
.blog-feed-footer { text-align: center; margin: 20px 0; width: 100%; }

#blog-posts-list { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
.blog-post-sample {
    border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    padding: 15px; flex: 1 1 300px; max-width: 350px;
    display: flex; flex-direction: column;
}
.blog-post-sample img { max-width: 100%; height: 200px; object-fit: cover; border-radius: 5px; margin-bottom: 15px; }
.blog-post-sample h3 { margin-top: 0; }
.blog-date { color: #555; font-size: 0.9em; margin-bottom: 10px; }
.blog-post-sample p { flex-grow: 1; }
#blog-load-more-btn { background-color: #3498db; color: white; border: none; padding: 10px 25px; border-radius: 5px; cursor: pointer; font-size: 16px; }
.blog-read-more-btn { background-color: #007bff; color: white; border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; font-size: 16px; margin-top: auto; text-align: center; }
.blog-read-more-btn:hover, #blog-load-more-btn:hover { opacity: 0.9; }

/* --- Full-Screen Responsive Modal --- */
.blog-modal-hidden { display: none; }
.blog-modal-visible { display: block; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.8); }
.blog-modal-content {
    background-color: #fefefe; margin: auto; width: 95vw; height: 95vh;
    display: flex; flex-direction: column; position: relative; border-radius: 5px;
}
.blog-modal-close { color: #000; position: absolute; top: 10px; right: 25px; font-size: 35px; font-weight: bold; cursor: pointer; z-index: 10; }
#blog-modal-body { padding: 20px; overflow-y: auto; display: flex; flex-direction: column; height: 100%; }
#blog-modal-body h2 { flex-shrink: 0; text-align: center; }
.blog-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 15px 0;
}
.blog-gallery:empty {
  display: none;
}
.blog-modal-image {
  max-width: 300px;
  border-radius: 5px;
  object-fit: contain;
}
.blog-description {
    flex-shrink: 0; max-height: 40vh; overflow-y: auto;
    padding-top: 15px; border-top: 1px solid #eee;
}