/* FONT IMPORT - Ensure this is loaded for consistent typography */
@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@400;600;700&display=swap');

/* Apply font to the body */
body {
    font-family: 'Assistant', sans-serif;
}

/* --- QUARTO LISTING GRID STYLES --- */

/* This styles the container for the grid */
.quarto-grid {
  gap: 30px; /* Adds space between the cards */
}

/* This is the main card style for each listing item */
.quarto-grid-item {
  background-color: #ffffff;
  border: 1px solid #e9ecef;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden; /* Ensures the image respects the rounded corners */
  display: flex; 
  flex-direction: column;
  text-decoration: none; /* Remove underline from the whole card link */
}

/* Hover effect for the card */
.quarto-grid-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

/* CRUCIAL: This makes all images uniform */
.quarto-grid-item img.listing-image {
  aspect-ratio: 16 / 9; /* Creates a consistent widescreen aspect ratio */
  object-fit: cover; /* Ensures the image fills the space without distortion */
  width: 100%;
}

/* Style for the card's content area */
.quarto-grid-item-content {
  padding: 25px;
  display: flex;
  flex-direction: column;
  flex-grow: 1; 
}

/* Style for the listing title */
.quarto-grid-item .listing-title {
  font-family: 'Assistant', sans-serif;
  font-size: 1.3em;
  font-weight: 600;
  color: #1a2b48;
  margin-bottom: 10px;
  line-height: 1.3;
}

/* Style for the listing description */
.quarto-grid-item .listing-description {
  font-family: 'Assistant', sans-serif;
  font-size: 1em;
  line-height: 1.6;
  color: #555;
  flex-grow: 1; /* Pushes metadata to the bottom */
}

/* Style for the date and other metadata */
.quarto-grid-item .listing-date,
.quarto-grid-item .listing-author {
  font-family: 'Assistant', sans-serif;
  font-size: 0.9em;
  color: #888;
  margin-top: 15px;
}

/* Style for the categories/tags */
.quarto-grid-item .listing-categories {
    margin-top: 15px;
}
.quarto-grid-item .listing-category {
    font-family: 'Assistant', sans-serif;
    background-color: #f0f0f0;
    color: #555;
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 0.8em;
    font-weight: 600;
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 5px;
}