/**
 * Mobile-only visibility (loads last)
 * Same idea as backup: header-mobile-backup uses mobileHeaderWrapper visible-xs.
 * We define hidden/visible for mobile only here (Bootstrap xs = max-width 767px).
 *
 * - .visible-xs = visible on mobile only (hidden on desktop)
 * - .hidden-xs  = hidden on mobile only (visible on desktop)
 */

/* Desktop (768px and up): hide mobile-only, show desktop */
@media (min-width: 768px) {
    .visible-xs {
        display: none !important;
    }
    .hidden-xs {
        display: block !important;
    }
    .hidden-xs.inline-block {
        display: inline-block !important;
    }
    .hidden-xs.inline {
        display: inline !important;
    }
    .hidden-xs.flex {
        display: flex !important;
    }
}

/* Mobile only (767px and below): show mobile-only, hide desktop */
@media (max-width: 767px) {
    .visible-xs {
        display: block !important;
    }
    .mobileHomeWrapper.visible-xs,
    .mobile-home-lead,
    .mobileLeadSection {
        display: block !important;
        visibility: visible !important;
    }
    .hidden-xs {
        display: none !important;
    }
}