/* ===============================================
   KARDERA - RESPONSIVE UTILITIES
   =============================================== */

/* CONTAINER UTILITIES */
.container-fluid-padding {
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 576px) {
    .container-fluid-padding {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (min-width: 992px) {
    .container-fluid-padding {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

/* SPACING UTILITIES */
.spacing-xs { margin: 0.25rem; }
.spacing-sm { margin: 0.5rem; }
.spacing-md { margin: 1rem; }
.spacing-lg { margin: 2rem; }
.spacing-xl { margin: 4rem; }

.padding-xs { padding: 0.25rem; }
.padding-sm { padding: 0.5rem; }
.padding-md { padding: 1rem; }
.padding-lg { padding: 2rem; }
.padding-xl { padding: 4rem; }

/* MOBILE SPECIFIC */
@media (max-width: 576px) {
    .mobile-center {
        text-align: center !important;
    }
    
    .mobile-full-width {
        width: 100% !important;
        max-width: none !important;
    }
    
    .mobile-hide {
        display: none !important;
    }
    
    .mobile-spacing {
        margin-bottom: 2rem !important;
    }
    
    .mobile-padding {
        padding: 1rem !important;
    }
}

/* TABLET SPECIFIC */
@media (min-width: 577px) and (max-width: 768px) {
    .tablet-center {
        text-align: center !important;
    }
    
    .tablet-hide {
        display: none !important;
    }
}

/* DESKTOP SPECIFIC */
@media (min-width: 992px) {
    .desktop-show {
        display: block !important;
    }
    
    .desktop-hide {
        display: none !important;
    }
    
    .desktop-flex {
        display: flex !important;
    }
    
    .desktop-grid {
        display: grid !important;
    }
}

/* ASPECT RATIO UTILITIES */
.aspect-ratio-1-1 {
    aspect-ratio: 1 / 1;
}

.aspect-ratio-16-9 {
    aspect-ratio: 16 / 9;
}

.aspect-ratio-4-3 {
    aspect-ratio: 4 / 3;
}

/* GRID UTILITIES */
.grid-auto-fit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

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

@media (max-width: 768px) {
    .grid-auto-fit,
    .grid-auto-fill {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* FLEX UTILITIES */
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

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

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

/* OVERFLOW UTILITIES */
.overflow-hidden {
    overflow: hidden;
}

.overflow-scroll {
    overflow: auto;
}

.text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* VISIBILITY UTILITIES */
.visually-hidden-mobile {
    @media (max-width: 768px) {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
}

/* RESPONSIVE FONT SIZES */
.responsive-text {
    font-size: clamp(1rem, 2.5vw, 1.5rem);
}

.responsive-title {
    font-size: clamp(1.5rem, 4vw, 3rem);
}

.responsive-subtitle {
    font-size: clamp(1.1rem, 3vw, 1.3rem);
}

/* BREAKPOINT SPECIFIC UTILITIES */
@media (max-width: 575.98px) {
    .xs-only { display: block !important; }
    .xs-hide { display: none !important; }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .sm-only { display: block !important; }
    .sm-hide { display: none !important; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .md-only { display: block !important; }
    .md-hide { display: none !important; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .lg-only { display: block !important; }
    .lg-hide { display: none !important; }
}

@media (min-width: 1200px) {
    .xl-only { display: block !important; }
    .xl-hide { display: none !important; }
}