/**
 * Editor's Picks Slider Override CSS
 * This file contains styles that override any conflicting styles from other CSS files
 * to ensure the editor picks slider works correctly on all devices.
 */

/* Override any conflicting styles for the editor picks slider */
.editor-pick-slider-container {
    position: relative !important;
    height: 230px !important;
    overflow: hidden !important;
    border-radius: var(--card-border-radius) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
    touch-action: pan-y !important;
    -webkit-tap-highlight-color: transparent !important;
    padding-top: 0 !important; /* Override the padding-top hack from apple-device-fix.css */
    width: 100% !important;
}

/* Slider wrapper */
.editor-pick-slider {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
}

/* Individual editor pick cards */
.editor-pick-card {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: var(--card-border-radius) !important;
    overflow: hidden !important;
    border: 1px solid var(--card-border-color) !important;
    background-color: var(--card-rgba) !important;
    transition: transform 0.5s ease, opacity 0.5s ease !important;
    opacity: 0 !important;
    transform: translateX(100%) !important;
    will-change: transform, opacity !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    z-index: 1 !important;
    padding-top: 0 !important; /* Override the padding-top hack from apple-device-fix.css */
}

/* Active card state */
.editor-pick-card.active {
    opacity: 1 !important;
    transform: translateX(0) !important;
    z-index: 2 !important;
}

/* Link styling */
.editor-pick-card a {
    text-decoration: none !important;
    color: inherit !important;
    display: flex !important;
    height: 100% !important;
    width: 100% !important;
}

/* Image container */
.editor-pick-image {
    width: 50% !important;
    position: relative !important;
    overflow: hidden !important;
    height: auto !important; /* Override height: 0 from apple-device-fix.css */
    padding-top: 0 !important; /* Override padding-top from apple-device-fix.css */
}

.editor-pick-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.3s ease !important;
    position: relative !important; /* Override position: absolute from apple-device-fix.css */
}

/* Content container */
.editor-pick-content {
    width: 50% !important;
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* Responsive styles */
@media (max-width: 992px) {
    .editor-pick-card a {
        flex-direction: column !important;
    }
    
    .editor-pick-image, 
    .editor-pick-content {
        width: 100% !important;
    }
    
    .editor-pick-image {
        height: 150px !important;
    }
    
    .editor-pick-content {
        padding: 15px !important;
    }
}

@media (max-width: 576px) {
    .editor-pick-slider-container {
        height: 300px !important;
    }
    
    .editor-pick-image {
        height: 150px !important;
    }
    
    .editor-pick-content {
        padding: 10px !important;
        height: 150px !important;
        overflow-y: auto !important;
    }
}

/* Fix for Apple devices */
@supports (-webkit-touch-callout: none) {
    .editor-pick-slider-container {
        height: 230px !important;
        padding-top: 0 !important;
    }
    
    .editor-pick-card {
        height: 100% !important;
        padding-top: 0 !important;
    }
    
    .editor-pick-image {
        height: auto !important;
        padding-top: 0 !important;
    }
    
    @media (max-width: 992px) {
        .editor-pick-image {
            height: 150px !important;
        }
    }
    
    @media (max-width: 576px) {
        .editor-pick-slider-container {
            height: 300px !important;
        }
        
        .editor-pick-image {
            height: 150px !important;
        }
    }
}

/* Specific fixes for iPhone */
@media only screen and (min-device-width: 320px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 2) {
    .editor-pick-slider-container {
        height: 300px !important;
        padding-top: 0 !important;
    }
    
    .editor-pick-card {
        height: 100% !important;
        padding-top: 0 !important;
    }
    
    .editor-pick-image {
        height: 150px !important;
        padding-top: 0 !important;
    }
    
    .editor-pick-image img {
        position: relative !important;
    }
}