/* Responsive Grid Layout for the Blog Listing
  - Mobile: 1 column (default)
  - Tablet: 2 columns
  - Laptop: 3 columns
  - Wide Screen: 4 columns
*/


.blog-listing__post-button-wrapper {
    margin-top: 20px !important;
}

.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;
}

/* 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 {
  margin-bottom: 30px;
  padding: 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 --- #}