/* Responsive Grid Layout for the Blog Listing
  - Mobile: 1 column (default)
  - Tablet: 2 columns
  - Laptop: 3 columns
  - Wide Screen: 4 columns
*/
/* --- POST STYLES --- */
.blog-listing__post-tag {
  font-size:.85rem; color:#666; text-transform:uppercase;
}

.blog-listing__post {
  border: 1px solid #eaeaea; border-radius: 8px; overflow: hidden; display: flex; 
  flex-direction: column !important; transition: transform 0.3s ease , box-shadow 0.3s ease !importan; background: white !important;
  position:relative;
}

.blog-listing__post-title {
      color: #333;
    display: -webkit-box;
    font-size: 1.15rem;
    -webkit-line-clamp: 3;
    line-height: 1.4;
    margin: 0 0 10px !important;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blog-listing__post-summary {
    color: #555;
    font-size: .9rem;
    line-height: 1.6;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
    text-overflow: ellipsis;
}

.blog-listing__post-timestamp {
  text-transform: uppercase;
color: #666;
    font-size: .85rem !important;
}

.bTitle {
  font-size: 1.15rem;
font-style: normal;
    font-weight: 700;
  color:#333;
    text-decoration: none;
    text-transform: none;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Number of lines to show */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis; 
}

.post_excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Number of lines to show */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.blog-listing__post:hover { transform: translateY(-5px) !important; box-shadow: 0 10px 20px rgba(0,0,0,0.1); }

.blog-listing__post-content {
  padding: 10px 20px 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    max-height: 350px;
}

.blog-listing__post-button-wrapper {
   /* position:absolute; */
    bottom:16px;
}

.blog-listing__post-button-wrapper .blog-listing__post-button {
  align-items: center;
    background-color: hsla(0, 0%, 100%, 0);
    color: #0f145b;
    display: inline-flex;
    font-family: arial, helvetica, sans-serif;
    font-style: normal;
    margin-top: 20px;
    padding: 12px 30px;
    border: 1px solid #0f145b;
    border-radius: 5px;
    font-size: 16px;
    text-decoration: none;
}

.blog-listing__post-button-wrapper .blog-listing__post-button:hover {
  background-color:#0f145b;
  color:#FFF;
}

.blog-listing__post-content {
    justify-content: space-between;
}

.blog-listing {
  display: grid;
  gap: 1.5rem; /* Adjust the spacing between items as needed */
  
  /* 1. Mobile (Default) */
  /* By default, we set 1 column */
  grid-template-columns: 1fr;
}

.blog-load-more-wrapper {
    display: flex;
    justify-content: center;
}

/* 2. Tablet */
@media (min-width: 768px) {
  .blog-listing {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 3. Laptop */
@media (min-width: 1024px) {
  .blog-listing {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 4. Wide Screen */
@media (min-width: 1440px) {
  .blog-listing {
    grid-template-columns: repeat(4, 1fr);
  }
}

{# --- START: UPDATED SEARCH MODULE CSS (No Button) --- #}
.blog-search-wrapper {
  padding: 10px 20px; /* Adds the light gray background */
  background-color: #f5f5f5; /* Light gray background */
  border-radius: 8px; /* Slightly rounded corners for the wrapper */
}

/* * All the styling for the "pill shape" is now applied
 * directly to the input element itself.
*/
.blog-post-search__input {
  width: 100%;
  box-sizing: border-box; /* Important for padding */
  border: 1px solid #e0e0e0; /* Light border */
  border-radius: 50px; /* Highly rounded corners for the "pill" shape */
  background-color: #fff; /* White background */
  box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Subtle shadow */
  
  padding: 12px 20px;
  font-size: 16px;
  color: #333;
  outline: none; /* Remove outline on focus */
}

.blog-post-search__input::placeholder {
  color: #777; /* Softer placeholder color */
}

.blog-search-no-results {
  text-align: center;
  padding: 40px 20px;
  color: #555;
  font-style: italic;
  display: none;
}
{# --- END: UPDATED SEARCH MODULE CSS --- #}