/**
 * Busimatch — "More Products From X" sidebar showcase.
 * Strikt gescopeerd op #bx-page-block-498 zodat
 * homepage Latest Posts, products-home en andere lijsten NIET worden geraakt.
 *
 * Cards moeten: full square cover, 2 naast elkaar in sidebar, mobiel gestapeld.
 */

/* Card-container: PERMANENT 5/3/1 grid-regel
   Desktop: 5 cards, Tablet: 3 cards, Mobiel: 1 card (zie media queries onderaan) */
#bx-page-block-498 .bx-search-result-block,
#bx-page-block-498 .sys-search-result-block {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 14px !important;
    align-items: stretch !important;
}

/* Card-wrapper: volledige breedte binnen zijn grid-cell */
#bx-page-block-498 .bx-base-text-unit,
#bx-page-block-498 .bx-market-unit-cover,
#bx-page-block-498 .bx-market-unit-gallery-cnt {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    margin: 0 !important;
}

/* Cover-image: vierkant aspect, volledige afbeelding (contain), Tailwind override */
#bx-page-block-498 .bx-base-text-unit-thumb,
#bx-page-block-498 .bx-def-gal-div-size {
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: #1a1a1a !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

/* IMG-versie van cover (sommige varianten gebruiken <img> ipv background) */
#bx-page-block-498 .bx-base-text-unit-thumb img,
#bx-page-block-498 .bx-market-unit-gallery-cnt > img,
#bx-page-block-498 .bx-market-unit-cover img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
}

/* Title onder cover compact houden */
#bx-page-block-498 .bx-base-text-unit-info,
#bx-page-block-498 .bx-market-unit-info {
    padding: 8px 0 0 0 !important;
}

/* TABLET (≤1024px): 3 cards per rij (PERMANENT regel) */
@media (max-width: 1024px) {
    #bx-page-block-498 .bx-search-result-block,
    #bx-page-block-498 .sys-search-result-block {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* MOBIEL (≤640px): 1 kolom gestapeld (PERMANENT regel) */
@media (max-width: 640px) {
    #bx-page-block-498 .bx-search-result-block,
    #bx-page-block-498 .sys-search-result-block {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
}