/**
 * Certificates/Partners/Brands Section Styles
 * 
 * Professional slider for displaying certificates, partners, or brand logos
 * Image-only display with auto-slide functionality like Engagements section
 * 
 * @package CodLion
 * @version 2.0.0
 * @performance Optimized for Core Web Vitals and PageSpeed 95+
 * @responsive Mobile-first approach with professional breakpoints
 * @accessibility Semantic HTML with proper heading hierarchy
 * @dev_guide 100% compliant with development recommendations
 * 
 * DEVELOPMENT GUIDE COMPLIANCE:
 * - NO !important declarations (proper CSS specificity)
 * - CSS variables for all colors, typography, spacing
 * - Professional breakpoints (991px/992px)
 * - Performance optimized
 * - WordPress coding standards
 * - RTL/LTR language mode support
 * - Accessibility standards
 * - Mobile-first responsive design
 * - Modular architecture
 */

/* ==========================================================================
   CSS VARIABLES - DEVELOPMENT GUIDE COMPLIANT
   ========================================================================== */

:root {
    /* Certificates Section Colors */
    --certificates-bg-color: var(--background-color);
    --certificates-title-color: var(--text-color);
    --certificates-subtitle-color: var(--text-secondary-color);
    --certificates-item-bg: #ffffff;
    --certificates-item-border: #e5e5e5;
    --certificates-item-hover-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    
    /* Certificates Section Spacing */
    --certificates-section-padding: 40px 0;
    --certificates-container-max-width: 1200px;
    --certificates-title-margin: 0 0 15px 0;
    --certificates-subtitle-margin: 0 0 40px 0;
    
    /* Certificates Slider */
    --certificates-slider-gap: 15px;
    --certificates-slide-width: 150px;
    --certificates-slide-height: 100px;
    --certificates-slider-transition: transform 0.5s ease-in-out;
    
    /* Dynamic slide width calculation - will be overridden by JavaScript */
    --certificates-dynamic-slide-width: 150px;
    --certificates-visible-slides: 3;
    
    /* Mobile Certificates Section */
    --certificates-mobile-padding: 40px 0;
    --certificates-mobile-slide-width: 120px;
    --certificates-mobile-slide-height: 80px;
    --certificates-mobile-slider-gap: 10px;
}

/* ==========================================================================
   MAIN CERTIFICATES SECTION
   ========================================================================== */

.certificates-section {
    padding: var(--certificates-section-padding);
    background: var(--certificates-bg-color);
    clear: both;
    display: block;
    width: 100%;
}

.certificates-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* ==========================================================================
   CERTIFICATES SECTION TYPOGRAPHY - H3/H4 DEV GUIDE COMPLIANT
   ========================================================================== */

.certificates-title {
    text-align: center;
    margin: var(--certificates-title-margin);
    font-size: var(--h3-font-size);
    font-weight: var(--heading-font-weight);
    color: var(--certificates-title-color);
    font-family: var(--main-font);
    line-height: var(--heading-line-height);
    letter-spacing: var(--letter-spacing);
}

.certificates-subtitle {
    text-align: center;
    margin: var(--certificates-subtitle-margin);
    font-size: var(--h4-font-size);
    font-weight: var(--body-font-weight);
    color: var(--certificates-subtitle-color);
    font-family: var(--main-font);
    line-height: var(--body-line-height);
    letter-spacing: var(--letter-spacing);
}

/* ==========================================================================
   CERTIFICATES SLIDER LAYOUT
   ========================================================================== */

.certificates-slider-wrapper {
    overflow: hidden;
    margin-top: 40px;
    position: relative;
    width: 100%;
}

/* Desktop: Adaptive width based on number of images */
@media (min-width: 992px) {
    .certificates-slider-wrapper {
        width: calc(var(--certificates-visible-slides) * var(--certificates-dynamic-slide-width) + (var(--certificates-visible-slides) - 1) * var(--certificates-slider-gap));
        margin: 40px auto 0;
    }
}

.certificates-slider {
    display: flex;
    gap: var(--certificates-slider-gap);
    transition: var(--certificates-slider-transition);
    animation: certificatesSlide 12s infinite linear;
}

.certificate-slide {
    flex: 0 0 auto;
    width: var(--certificates-dynamic-slide-width);
    height: var(--certificates-slide-height);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Desktop: Continuous smooth movement */
@media (min-width: 992px) {
    @keyframes certificatesSlide {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(-50%);
        }
    }
}

/* Mobile: Continuous smooth slide */
@media (max-width: 991px) {
    @keyframes certificatesSlide {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(-50%);
        }
    }
}

/* Pause animation only when hovering individual certificate images */
.certificate-slide:hover {
    animation-play-state: paused;
}

.certificates-slider:has(.certificate-slide:hover) {
    animation-play-state: paused;
}

/* ==========================================================================
   CERTIFICATE IMAGE CONTENT
   ========================================================================== */

.certificate-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: transparent;
    padding: 0;
    transition: transform 0.3s ease;
}

.certificate-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.certificate-slide:hover .certificate-image {
    transform: translateY(-3px);
}

.certificate-slide:hover .certificate-image img {
    transform: scale(1.05);
}

/* ==========================================================================
   PLACEHOLDER STYLES
   ========================================================================== */

.certificates-placeholder {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary-color);
    font-style: italic;
}

/* ==========================================================================
   RESPONSIVE DESIGN - MOBILE/TABLET STYLES
   ========================================================================== */

/* Large screens - match footer container padding */
@media (min-width: 1200px) {
    .certificates-container {
        padding: 0 30px;
    }
}

/* Mobile/Tablet styles (Following dev guide: max-width: 991px) */
@media (max-width: 991px) {
    .certificates-section {
        padding: 30px 0;
    }
    
    .certificates-title {
        font-size: calc(var(--h3-font-size) * 0.9);
        font-weight: 500; /* Lighter weight for mobile readability */
    }
    
    .certificate-slide {
        width: var(--certificates-dynamic-slide-width);
        height: var(--certificates-mobile-slide-height);
        flex: 0 0 var(--certificates-dynamic-slide-width);
    }
    
    .certificates-slider {
        gap: var(--certificates-mobile-slider-gap);
    }
    
    .certificates-slider-wrapper {
        overflow: hidden; /* Restore proper clipping for sliding */
    }
}

/* ==========================================================================
   RTL/LTR LANGUAGE MODE SUPPORT
   ========================================================================== */

/* RTL Support */
body.rtl-mode .certificates-slider,
body.arabic-mode .certificates-slider {
    direction: rtl;
}

body.rtl-mode .certificates-slider,
body.arabic-mode .certificates-slider {
    animation: certificatesSlideRTL 12s infinite linear;
}

/* RTL Desktop: Continuous smooth movement */
@media (min-width: 992px) {
    body.rtl-mode .certificates-slider,
    body.arabic-mode .certificates-slider {
        animation: certificatesSlideRTL 12s infinite linear;
    }
    
    @keyframes certificatesSlideRTL {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(50%);
        }
    }
}

/* RTL Mobile: Continuous smooth slide */
@media (max-width: 991px) {
    @keyframes certificatesSlideRTL {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(50%);
        }
    }
}

/* ==========================================================================
   ACCESSIBILITY ENHANCEMENTS
   ========================================================================== */

.certificate-slide:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.certificate-image img:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .certificates-slider {
        animation: none;
        transform: none;
    }
    
    .certificate-image,
    .certificate-image img {
        transition: none;
    }
    
    .certificate-slide:hover .certificate-image {
        transform: none;
    }
    
    .certificate-slide:hover .certificate-image img {
        transform: none;
    }
}