/*HOVER ONLY ON DESKTOP*/
@media (min-width: 1025px) {
.custom-grid-item-image {
    overflow: hidden; /* This will contain the zoomed image within the image container */
    line-height: 0; /* This helps remove any extra space below the image */
    border-radius: 0.15rem;
  height:25rem;
}

    .post-image-wrapper img {
        transition: transform 0.3s ease;
        display: block;
      
    }

.custom-grid-item:hover .custom-grid-item-image img {
    transform: scale(1.05); /* Scales the image up slightly on hover */
  transition: transform 0.3s ease;
}
}

.see-more-btn {
  justify-items: center;
  padding-top: 4rem;
  display: none; /* Set to none to hide by default */
}

.custom-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Creates a responsive grid layout */
    gap: 3rem; /* Space between grid items */
}

.custom-grid-item {
    background: #fff; /* White background for the grid items */
    border-radius: 4px; /* Slightly rounded corners */
    overflow: hidden; /* Ensures nothing spills out of the grid item */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Subtle shadow for depth */
    transition: transform 0.3s ease; /* Smooth transition for hover effect */
    padding:0.5rem;
    display:flex;
  flex-direction:column;
  min-height:44rem;
}

.custom-grid-item-link {
    text-decoration: none; /* Removes underline from links */
    color: inherit; /* Inherit text color from parent */
    display: flex; /* Makes the entire grid item clickable */
    flex-direction:column;
  flex-grow:1;
}

.custom-grid-item-image img {
    width: 100%; /* Makes the image responsive */
    height: 100%; /* Keeps the image aspect ratio */
    border-radius:0.15rem;
  transition: transform 0.3s ease;
}

.custom-grid-item-title {
    font-size: 1rem; /* Adjust to match your design */
    font-weight:bold;
    color: #333; /* Dark grey color for the title */
    margin: 1rem 0;
    text-transform: uppercase;
    font-family: 'Fira Sans', sans-serif;
}

.custom-grid-item-description {
    font-size: 14px; /* Adjust to match your design */
    color: #666; /* Medium grey for the description text */
    margin: 0.5rem 0;
}

.read-more-btn {
    font-size: 1rem; /* Adjust to match your design */
    color: var(--blue); /* Adjust the color to match your button color */
    text-align: left; /* Center the button text */
    display: block; /* Makes the entire area clickable */
    margin: 1rem 0; /* Space inside the grid item around the button */
    background-color: #fff; /* Button background color */
    border-radius: 20px; /* Rounded corners for the button */
    font-weight:bold;
  margin-top:auto;
}

.chevron-right {
    display: inline-block;
    margin-left: 5px; /* Space between button text and chevron */
    border: solid currentColor; /* Chevron color */
    border-width: 0 2px 2px 0;
    padding: 3px;
    transform: rotate(-45deg); /* Chevron angle */
}

.custom-grid-item-tags {
  margin: 1rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.item-tag {
    font-size: 0.75rem; /* Adjust to match your design */
    font-weight: bold;
    color: #EA0C34;
    text-transform: uppercase;
    font-family: 'Fira Sans', sans-serif;
}

.blog-filters {
  display: grid;
  grid-gap: 1rem; /* Spacing between grid items */
  margin-bottom: 2rem; /* Bottom margin for the filter container */
  /* Defines columns that are as wide as the content up to a maximum of, for example, 25 characters */
  grid-template-columns: repeat(auto-fit, minmax(min-content, 20ch));
}

/* Style for filter buttons */
.filter-button {
    background-color: var(--white);
    color: var(--blue);
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.9rem;
    text-transform: none;
    border-radius: 0.25rem;
    border: 2px solid var(--blue);
  text-align:center;
}

/* Hover state styles for filter buttons */
.filter-button.active,
.filter-button:hover {
    background-color: var(--blue);
    color: var(--white);
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.9rem;
    text-transform: none;
    border-radius: 0.25rem;
}


/* Tablet (devices with width between 768px and 1024px) */
@media (max-width: 1024px) {
    /* Keep the tablet styles the same, assuming they are already set up for a (1, 1fr) grid */
    .custom-grid-wrapper {
    }
  
  .blog-filters {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 2rem;
}
  
  .custom-grid-item {
    min-height:auto;
  }

/* Mobile (devices with width up to 768px) */
@media (max-width: 768px) {
    .custom-grid-wrapper {
        grid-template-columns: repeat(1, 1fr); /* Single column grid for mobile */
        max-width: 100%; /* Optional: if you want to restrict the grid width on mobile */
        margin: 0 auto; /* Center the grid if max-width is less than 100% */
    }

    .custom-grid-item {
        /* Remove margin-right if it was added for desktop/tablet views */
        margin-right: 0;
        min-height:30rem;
    }
  
  .read-more-btn {
    font-size: 1rem; /* Adjust to match your design */
    color: var(--blue); /* Adjust the color to match your button color */
    text-align: left; /* Center the button text */
    display: block; /* Makes the entire area clickable */
    margin-top: 2rem; /* Space inside the grid item around the button */
    margin-bottom: 1rem;
    background-color: #fff; /* Button background color */
    border-radius: 20px; /* Rounded corners for the button */
    margin-top:auto;
}
  
  .blog-filters {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 2rem;
}