/**
 * Utilities CSS
 * 
 * Helper and utility classes for common styling needs
 * 
 * @package Kindi
 * @since 1.0.0
 */

/* ============================================
   RESPONSIVE VISIBILITY
   ============================================ */

/* Hide element on screens wider than 768px */
.show-on-mobile {
    display: none;
}

@media (max-width: 768px) {
    .show-on-mobile {
        display: block; /* Or inline/block/flex as needed */
    }
}

/* By default: visible */
.show-on-desktop {
    display: block; /* Or inline/flex, depending on your element */
}

/* On mobile: hide it */
@media (max-width: 768px) {
    .show-on-desktop {
        display: none;
    }
}

/* ============================================
   OPACITY UTILITIES
   ============================================ */

.img-alpha-70 {
    opacity: 0.7;
}

.img-alpha-60 {
    opacity: 0.6;
}

.img-alpha-50 {
    opacity: 0.5;
}

.img-alpha-40 {
    opacity: 0.4;
}

.img-alpha-30 {
    opacity: 0.3;
}

.img-alpha-20 {
    opacity: 0.2;
}

/* ============================================
   RESPONSIVE PADDING
   ============================================ */

/* Desktop (default) */
.responsive-padding {
    padding-left: 20% !important;
    padding-right: 20% !important;
}

/* Mobile */
@media (max-width: 768px) {
    .responsive-padding {
        padding-left: 10% !important;
        padding-right: 10% !important;
    }
}

/* Desktop (default) */
.responsive-padding-small {
    padding-left: 10% !important;
    padding-right: 10% !important;
}

/* Mobile */
@media (max-width: 768px) {
    .responsive-padding-small {
        padding-left: 10% !important;
        padding-right: 10% !important;
    }
}

/* ============================================
   BORDER RADIUS UTILITIES
   ============================================ */

@media (min-width: 768px) {
    .radius-desktop-35 {
        border-radius: 35px !important;
        overflow: hidden !important;
    }
}

/* ============================================
   VIDEO WRAPPER
   ============================================ */

.wide-video-wrapper {
    padding-left: 20% !important;
    padding-right: 20% !important;
}

@media (max-width: 768px) {
    .wide-video-wrapper {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
}

/* ============================================
   TEXT ALIGNMENT
   ============================================ */

.text-justify {
    text-align: justify;
}

/* ============================================
   STICKY POSITIONING
   ============================================ */

/* Make left column sticky on desktop only */
@media (min-width: 768px) {
    .sticky-col {
        position: -webkit-sticky; /* for Safari */
        position: sticky;
        top: 100px; /* adjust spacing from top */
        align-self: flex-start; /* important for Gutenberg columns */
        height: fit-content; /* prevents stretching */
    }
}

/* ============================================
   IMAGE CENTERING
   ============================================ */

/* Center align images */
.center-image {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.center-image img {
    margin-left: auto !important;
    margin-right: auto !important;
}