/* ======================================
   RESPONSIVE CARD GRID - AMAZON STYLE
   Cards have fixed max-width, grid centers when space available
   Desktop: 4 cols | Tablet: 3 cols | Small: 2 cols | Mobile: 1 col
====================================== */

.emega-1r4c-container {
    width: 100%;
    padding: 20px 15px 15px 15px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}

.emega-1r4c-container .row {
    display: grid;
    gap: 20px;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 1500px; /* Limit maximum width */
    
    /* Default: 4 columns on desktop - auto-fit allows responsive behavior */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* ======================================
   CARD STYLING
====================================== */
.emega-1r4c-container .emega-tile {
    background: #fff;
    padding: 20px 20px 15px 20px;
    border: 1px solid #ddd;
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%; /* Prevent cards from getting too wide */
}

/* Prevent inner content overflow */
.emega-1r4c-container .emega-tile > * {
    min-width: 0;
    width: 100%;
}

/* Ensure images don't overflow */
.emega-1r4c-container .emega-tile img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ======================================
   DESKTOP - FORCE 4 COLUMNS
   When viewport is wide enough for 4 cards
====================================== */
@media (min-width: 1240px) {
    .emega-1r4c-container .row {
        grid-template-columns: repeat(4, 1fr);
        max-width: 1500px;
    }
}

/* ======================================
   TABLET/MEDIUM SCREENS - 3 COLUMNS
   Breakpoint: 768px - 1239px
====================================== */
@media (min-width: 768px) and (max-width: 1239px) {
    .emega-1r4c-container .row {
        grid-template-columns: repeat(3, 1fr);
        max-width: 1140px;
    }
}

/* ======================================
   SMALL SCREENS - 2 COLUMNS
   Breakpoint: 480px - 767px
====================================== */
@media (min-width: 480px) and (max-width: 767px) {
    .emega-1r4c-container {
        padding: 15px 12px;
    }

    .emega-1r4c-container .row {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        max-width: 760px;
    }
}

/* ======================================
   MOBILE - 1 COLUMN
   Breakpoint: Below 480px
====================================== */
@media (max-width: 479px) {
    .emega-1r4c-container {
        padding: 12px 10px;
    }

    .emega-1r4c-container .row {
        grid-template-columns: 1fr;
        gap: 12px;
        max-width: 480px;
    }
}

/* ======================================
   OPTIONAL: UNIFORM CARD HEIGHTS
   Uncomment if you want consistent heights
====================================== */
/*
.emega-1r4c-container .emega-tile {
    display: flex;
    flex-direction: column;
    height: 100%;
}
*/