div#listing-listing.quarto-listing.quarto-listing-container-grid {
  margin: 0 auto;         /* Centers the container */
  padding: 0 2rem;
}


/* Hide title (transparent) */
div.quarto-title h1.title, section#events.level2 h2.anchored, div.listing-date {
  display: none;
}

.quarto-grid-item .card-body.post-contents h5.no-anchor.card-title.listing-title, div.card-body.post-contents div.listing-categories {
  margin-top: 5px;    /* top gap */
  margin-bottom: 5px; /* bottom gap */
}
div.card-body.post-contents div.listing-categories {
  margin-top: 10px;    /* top gap */
  display: flex !important;
  flex-direction: column;   
  align-items: flex-start; 
  margin-bottom: 10px; /* bottom gap */
}

/* Style individual category tags */
.quarto-grid-item .listing-category {
  display: block !important; 
  background: linear-gradient(
    90deg,
    #2B558A 0%,
    #346CA9 50%,
    #7AB0E2 100%
  );
  color: #ffffff !important;              /* white text */
  font-size: .5rem !important;
  font-weight: 700;
 border: 2px solid #2B558A !important;
  padding: 4px 5px;
  margin: 2px 2px 0 0;
  border-radius: 999px;        /* pill shape */
  text-transform: capitalize !important;   /* optional: makes it all caps */
}

/* Style the date in the card*/
div.listing-date {
  text-transform: capitalize !important;   /* optional: makes it all caps */
  color: white !important;
  margin-top: -200px !important;
}





/* Stop growing after 1000px: 4 fixed-width columns, centered */
@media (min-width: 1500px) {
  /* target the grid inside the listing container */
  div#listing-listing.quarto-listing.quarto-listing-container-grid .list.grid {
    display: grid !important;
    grid-template-columns: repeat(4, 360px) !important; /* fixed card width */
    justify-content: center;   /* center leftover space */
    gap: 1rem;                 /* keep your spacing tidy */
  }

  /* (optional) belt-and-suspenders so cards never stretch */
  div#listing-listing.quarto-listing.quarto-listing-container-grid .quarto-grid-item {
    width: 360px !important;
  }
}


/* Reposition search/sort bar when grid is at fixed max width */
@media (min-width: 1000px) {
  div#listing-listing.quarto-listing.quarto-listing-container-grid 
  div.listing-actions-group {
    justify-content: flex-start !important; /* push it to the left */
  }

  /* Optional: match the grid start */
  div#listing-listing.quarto-listing.quarto-listing-container-grid 
  div.listing-actions-group {
    max-width: calc(4 * 340px + 4rem); /* 4 columns + gaps */
    margin: 0 auto; /* center actions group with the grid */
  }
}