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

.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 !important; background: white !important;
  position:relative;
}

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

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

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

.blog-listing__post-summary {
  color: #555;
    flex-grow: 1;
    font-size: .9rem;
    line-height: 1.6;
    margin-bottom: 8%;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Number of lines to show */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.blog-listing__post-timestamp {
    align-items: center;
    color: #666;
    font-size: .85rem;
    gap: 5px;
    letter-spacing: .5px;
    margin-bottom: 10px;
    text-transform: uppercase;
  margin-bottom:3px !important;
}

.blog-listing__post-tag {
  align-items: center;
    color: #666;
    font-size: .85rem;
    gap: 5px;
    letter-spacing: .5px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.blog-listing__header {
    margin-bottom: 0 !important;
}

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

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

.pdf-download-btn {
  display: inline-flex; 
  align-items: center; 
  background: #FFF; 
  color: #0F145B; 
  padding: 10px 20px; 
  border-radius: 5px;
  border:1px #0F145B solid;
  text-decoration: none; 
  font-size: 14px; 
  font-weight: bold; 
  transition: all 0.3s ease;

}

.pdf-download-btn:hover {
   color: #FFF; 
  background: #0F145B;
   font-size: 14px; 
  font-weight: bold;
  
}

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