/**
 * Responsive Spacer Frontend Styles
 * 
 * @package MakaiFeatures
 * @subpackage ResponsiveSpacerBlock
 * @since 1.0.0
 */

/* ==========================================================================
   Base Responsive Spacer Styles
   ========================================================================== */

.makai-responsive-spacer {
    transition: height 0.3s ease-in-out;
}

/* ==========================================================================
   Tablet Responsive Styles
   ========================================================================== */

/* Tablet breakpoint: 480px - 767px */
@media screen and (max-width: 767px) and (min-width: 480px) {
    .makai-responsive-spacer {
        height: var(--spacer-tablet-height, 50px) !important;
    }
}

/* ==========================================================================
   Mobile Responsive Styles
   ========================================================================== */

/* Mobile breakpoint: 479px and below */
@media screen and (max-width: 479px) {
    .makai-responsive-spacer {
        height: var(--spacer-mobile-height, 30px) !important;
    }
}

/* ==========================================================================
   Fallback Styles for Older Browsers
   ========================================================================== */

/* Fallback for browsers that don't support CSS custom properties */
@supports not (height: var(--spacer-mobile-height)) {
    
    /* Tablet fallback */
    @media screen and (max-width: 767px) and (min-width: 480px) {
        .makai-responsive-spacer {
            height: 50px !important;
        }
    }
    
    /* Mobile fallback */
    @media screen and (max-width: 479px) {
        .makai-responsive-spacer {
            height: 30px !important;
        }
    }
}

/* ==========================================================================
   Animation & Performance Optimizations
   ========================================================================== */

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .makai-responsive-spacer {
        transition: none;
    }
}

/* GPU acceleration for smooth transitions */
.makai-responsive-spacer {
    will-change: height;
    transform: translateZ(0);
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .makai-responsive-spacer {
        height: var(--spacer-mobile-height, 20px) !important;
        transition: none;
    }
}