/**
 * Jerry's Spare Responsive Layout Overrides
 * Media queries for legacy browser support and specific component squishes
 */

/* Max Width 1200px (Large Desktops) */
@media (max-width: 1200px) {
    :root {
        --container-padding: 32px;
    }
}

/* Max Width 992px (Tablets / Laptops) */
@media (max-width: 992px) {
    :root {
        --container-padding: 24px;
    }
    .hide-on-tablet {
        display: none !important;
    }
    .m-col-reverse {
        flex-direction: column-reverse !important;
    }
}

/* Max Width 768px (Mobile Landscape) */
@media (max-width: 768px) {
    :root {
        --container-padding: 16px;
    }
    .hide-on-mobile {
        display: none !important;
    }
    .text-center-mobile {
        text-align: center !important;
    }
    .btn {
        width: 100%;
        margin-bottom: 8px;
    }
    .section-padding {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}

/* Max Width 576px (Mobile Portrait) */
@media (max-width: 576px) {
    h1 { font-size: 32px !important; }
    h2 { font-size: 26px !important; }
    p { font-size: 15px !important; }
}