/*
Universal product cards grid for LaserHall / Wow2Print blocks.
Use classes:
.product-cards-grid
.product-card
.product-card__image
.product-card__title-wrap
.product-card__button-wrapper
*/

.product-cards-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 40px;
    margin: 32px 0 48px;
    align-items: stretch;
}

.product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
}

.product-card__image {
    margin-bottom: 12px;
}

.product-card__image img,
.product-card .preview-image {
    width: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    aspect-ratio: 1 / 1;
    border-radius: 4px;
}

.product-card__title-wrap {
    min-height: 78px;
}

.product-card__button-wrapper {
    margin-top: auto;
    padding-top: 24px;
}

/* Compatibility with existing LaserHall classes inside universal cards */
.product-card .category-title {
    display: block;
}

.product-card .btn {
    width: fit-content;
}

/* Optional modifiers */
.product-cards-grid--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.product-cards-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.product-cards-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.product-cards-grid--compact {
    gap: 24px;
}

.product-cards-grid--wide {
    gap: 56px;
}

@media (max-width: 1200px) {
    .product-cards-grid,
    .product-cards-grid--5,
    .product-cards-grid--4 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .product-cards-grid,
    .product-cards-grid--5,
    .product-cards-grid--4,
    .product-cards-grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px;
    }

    .product-card__title-wrap {
        min-height: auto;
    }
}

@media (max-width: 480px) {
    .product-cards-grid,
    .product-cards-grid--5,
    .product-cards-grid--4,
    .product-cards-grid--3 {
        grid-template-columns: 1fr;
    }
}