/* ===================================
   Responsive Utilities CSS
   Helper classes for responsive design
   =================================== */

/* ===================================
   Fluid Spacing Utilities
   =================================== */

.spacing-fluid-sm {
    padding: clamp(0.5rem, 2vw, 1rem);
}

.spacing-fluid-md {
    padding: clamp(1rem, 3vw, 2rem);
}

.spacing-fluid-lg {
    padding: clamp(1.5rem, 4vw, 3rem);
}

/* ===================================
   Fluid Gap Utilities
   =================================== */

.gap-fluid-sm {
    gap: clamp(0.25rem, 1vw, 0.5rem);
}

.gap-fluid-md {
    gap: clamp(0.5rem, 2vw, 1rem);
}

.gap-fluid-lg {
    gap: clamp(1rem, 3vw, 2rem);
}

/* ===================================
   Visibility Utilities
   =================================== */

/* Hide on mobile */
.hide-mobile {
    display: block;
}

@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Hide on tablet */
.hide-tablet {
    display: block;
}

@media (min-width: 769px) and (max-width: 1024px) {
    .hide-tablet {
        display: none !important;
    }
}

/* Hide on desktop */
.hide-desktop {
    display: block;
}

@media (min-width: 1025px) {
    .hide-desktop {
        display: none !important;
    }
}

/* Show only on mobile */
.show-mobile {
    display: none;
}

@media (max-width: 768px) {
    .show-mobile {
        display: block !important;
    }
}

/* ===================================
   Touch-Friendly Tap Targets
   =================================== */

/* Standard touch target size - meets 44x44 pixel accessibility guideline */
.tap-target {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Small tap target - for compact interfaces (below recommended minimum) */
.tap-target-sm {
    min-width: 36px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Large tap target - enhanced touch area */
.tap-target-lg {
    min-width: 48px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ===================================
   Responsive Container Utilities
   =================================== */

.container-fluid {
    width: 100%;
    padding-right: clamp(1rem, 3vw, 2rem);
    padding-left: clamp(1rem, 3vw, 2rem);
    margin-right: auto;
    margin-left: auto;
}

/* ===================================
   Responsive Text Utilities
   =================================== */

.text-responsive-sm {
    font-size: clamp(0.875rem, 2vw, 1rem);
}

.text-responsive-md {
    font-size: clamp(1rem, 2.5vw, 1.125rem);
}

.text-responsive-lg {
    font-size: clamp(1.125rem, 3vw, 1.5rem);
}

/* ===================================
   Responsive Flexbox Utilities
   =================================== */

.flex-stack-mobile {
    display: flex;
}

@media (max-width: 768px) {
    .flex-stack-mobile {
        flex-direction: column;
    }
}

.flex-row-mobile {
    display: flex;
    flex-direction: column;
}

@media (max-width: 768px) {
    .flex-row-mobile {
        flex-direction: row;
    }
}

/* ===================================
   Responsive Grid Utilities
   =================================== */

.grid-responsive {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

@media (max-width: 768px) {
    .grid-responsive {
        grid-template-columns: 1fr;
    }
}

/* ===================================
   Scroll Enhancements
   =================================== */

.scroll-touch {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.scroll-hidden {
    overflow: hidden;
}

/* ===================================
   Aspect Ratio Utilities
   =================================== */

.aspect-16-9 {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
}

.aspect-16-9 > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.aspect-4-3 {
    position: relative;
    padding-bottom: 75%; /* 4:3 */
    height: 0;
    overflow: hidden;
}

.aspect-4-3 > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.aspect-1-1 {
    position: relative;
    padding-bottom: 100%; /* 1:1 */
    height: 0;
    overflow: hidden;
}

.aspect-1-1 > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}