/* 1. RESET THE CARD CONTAINER */
.quarto-grid-item.card {
    background-color: #0f172a; /* bg-slate-900 */
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 1rem;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: none;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* 2. HOVER EFFECTS */
.quarto-grid-link:hover .quarto-grid-item.card {
    transform: translateY(-0.25rem);
    border-color: rgba(6, 182, 212, 0.5);
    box-shadow: 0 0 30px rgba(6, 182, 212, 0.15);
}

/* 3. IMAGE CONTAINER - CRITICAL FIXES */
/* We target 'p.card-img-top' specifically to kill the browser margin */
p.card-img-top {
    margin: 0 !important; /* Kills the weird gap */
    padding: 0 !important;
    height: 8rem; /* Fixed height */
    width: 100%;
    overflow: hidden;
    position: relative;
    border: none;
    z-index: 0;
    flex-shrink: 0; /* Prevents image from getting squished */
}

.card-img-top img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center; /* Ensures the middle of the image is seen */
    opacity: 0.9; /* Slight boost to visibility */
    transition: all 0.7s ease;
    transform: scale(1);
}

.quarto-grid-link:hover .card-img-top img {
    transform: scale(1.05);
    opacity: 1;
}

/* 4. CARD BODY - TIGHTER PADDING */
.card-body {
    background-color: #0f172a;
    
    /* Reduced padding to bring text closer to image */
    padding: 0.75rem 1rem 1rem 1rem; 
    
    /* Ensure z-index doesn't oddly overlap image unless negative margin is used */
    z-index: 10;
    position: relative;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    margin-top: 0 !important; /* Ensures body doesn't ride up over image */
}

/* 5. TAGS (CATEGORIES) - REORDERED & STYLED */
.listing-categories {
    order: 1; /* Moves above title */
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem; /* Tighter gap between tags */
    
    /* Tighter gap between tags and title */
    margin-bottom: 0.25rem !important; 
    margin-top: 0 !important;
}

.listing-category {
    background: transparent !important;
    border: 1px solid rgba(6, 182, 212, 0.3) !important; /* Subtle blue outline */
    border-radius: 4px;
    color: #06b6d4 !important;
    
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.45rem; /* Tiny font */
    font-weight: 700;   /* Bolder to make tiny text readable */
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    
    padding: 3px 6px; /* Adjusted for visual balance */
    margin: 0;
    transition: all 0.2s ease;
    cursor: pointer;
}

.listing-category:hover {
    color: #22d3ee !important; 
    border-color: #22d3ee !important;
    background: rgba(6, 182, 212, 0.1) !important;
}

/* 6. TITLE STYLING */
.card-title {
    order: 2;
    color: white !important;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 1.25rem; /* Slightly smaller to match compact card */
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 0;
    transition: color 0.3s ease;
}

.quarto-grid-link:hover .card-title {
    color: #22d3ee !important;
}

.card-text, .card-attribution, .card-img-top::after {
    display: none !important;
}

@keyframes force-fade-ping {
    0% { transform: scale(1); opacity: 0.75; }
    75%, 100% { transform: scale(2); opacity: 0; }
}


/* Listing info */
/* =========================================
   DARK MODE SIDEBAR / CATEGORIES (UPDATED)
   ========================================= */

/* 1. The Title "Categories" */
.quarto-listing-category-title {
    color: #ffffff !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem !important;   
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 0.5rem;
}

/* 2. The Container */
.quarto-listing-category {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem; /* Tighter gap to match the technical feel of the tiles */
}

/* 3. The Individual Category Tags (NOW MATCHING TILES) */
.quarto-listing-category .category {
    /* Layout */
    display: inline-flex !important; 
    align-items: center !important;
    justify-content: center !important;
    
    /* TECH AESTHETIC - MATCHING TILES */
    background: transparent !important;
    border: 1px solid rgba(6, 182, 212, 0.3) !important; /* Subtle cyan outline */
    border-radius: 4px !important; /* Boxy (4px) instead of Round (9999px) */
    color: #06b6d4 !important; /* Cyan text */
    
    /* Typography */
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 0.65rem !important; /* Slightly larger than tiles (0.45rem) for clickability, but same style */
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    
    /* Spacing */
    padding: 4px 8px !important; 
    margin: 0;
    
    cursor: pointer;
    transition: all 0.2s ease;
}

/* 5. Hover Effects (MATCHING TILES) */
.quarto-listing-category .category:hover {
    color: #22d3ee !important; 
    border-color: #22d3ee !important;
    background: rgba(6, 182, 212, 0.1) !important;
    transform: translateY(-1px);
}



/* =========================================
   DARK MODE TOOLBAR (SORT & FILTER)
   ========================================= */

/* 1. Container Spacing */
.listing-actions-group {
    margin-bottom: 2rem !important;
    gap: 1rem;
}

/* 2. Common Styles for Inputs & Icons */
/* This ensures BOTH the dropdown and the search box use the exact same color */
.input-group-text, 
.form-select, 
.form-control {
    background-color: rgba(255, 255, 255, 0.05) !important; /* Dark glassy bg */
    border-color: rgba(255, 255, 255, 0.1) !important;      /* Subtle border */
    color: #cbd5e1 !important;                              /* Light slate text */
    font-family: 'Lato', sans-serif;
    font-size: 0.875rem;
}

/* 3. The Icons (Search/Sort) */
.input-group-text {
    border-right: none !important; 
    color: #94a3b8 !important;     
    transition: color 0.3s ease;
}

/* 4. The Input Fields */
.form-select, 
.form-control {
    border-left: none !important; 
    padding-left: 0.5rem;         
}

/* 5. Placeholder Text */
.search::placeholder {
    color: #475569 !important;    
    opacity: 1;
}

/* 6. FOCUS STATE (Cyan Glow) */
.form-control:focus, 
.form-select:focus {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(34, 211, 238, 0.5) !important; 
    box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.1) !important;
    color: #ffffff !important;
}

/* 7. Hover Effects */
.input-group:hover .input-group-text {
    color: #22d3ee !important; 
}

/* 8. FIX THE DROPDOWN ARROW (The Clean Way) */
/* Instead of inverting colors, we inject a real White SVG arrow */
.form-select {
    filter: none !important; /* Disable previous invert hack */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right .75rem center !important;
    background-size: 16px 12px !important;
}

/* 9. Fix the Dropdown Menu Options */
.form-select option {
    background-color: #0f172a; /* Dark Slate background for the list */
    color: #cbd5e1;            /* Normal text */
}