/* =====================================================
   LAYOUT STYLES
   Main wrapper, content area, and card grid
   ===================================================== */

/* === WRAPPER === */
.mtc-travel-wrapper {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    font-family: 'Quicksand', sans-serif;
    box-sizing: border-box;
}

.mtc-travel-wrapper *,
.mtc-travel-wrapper *::before,
.mtc-travel-wrapper *::after {
    box-sizing: border-box;
}

/* === MAIN CONTENT AREA === */
#mtc-content-area {
    flex-grow: 1;
    padding: 20px;
    min-width: 0;
}

/* === CARD LISTING GRID === */

/* Desktop: Multi-column grid */
@media (min-width: 764px) {
    .mtc-card-listing {
        place-items: center;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
        gap: 25px;
    }
}

/* Tablet/Mobile: Single column centered */
@media (max-width: 763px) {
    .mtc-card-listing {
        place-items: center;
        display: grid;
        gap: 25px;
    }
}