/**
 * Certificates/Partners/Brands Section Styles
 *
 * Configurable slider or grid layout using CSS variables:
 *   --cols-desktop, --cols-mobile, --rows-desktop, --rows-mobile
 * .cl-layout-slider → horizontal scroll (flex)
 * .cl-layout-grid   → fixed grid with row limits (excess hidden)
 *
 * @package CodLion
 * @version 3.0.0
 */

:root {
    --certificates-bg-color: var(--background-color);
    --certificates-title-color: var(--text-color);
    --certificates-subtitle-color: var(--text-secondary-color);
    --certificates-section-padding: 40px 0;
    --certificates-title-margin: 0 0 15px 0;
    --certificates-subtitle-margin: 0 0 40px 0;
    --certificates-slide-height: 100px;
    --certificates-slider-gap: 15px;
    --certificates-mobile-slide-height: 80px;
    --certificates-mobile-slider-gap: 10px;
}

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

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

.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);
}

/* ==========================================================================
   Slider mode — horizontal scroll with drag/swipe
   ========================================================================== */
.cl-layout-slider .certificates-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    cursor: grab;
    padding: 4px 2px 8px;
    margin-top: 40px;
}
.cl-layout-slider .certificates-scroll::-webkit-scrollbar {
    display: none;
}
.cl-layout-slider .certificates-scroll.cl-dragging {
    cursor: grabbing;
}
.cl-layout-slider .certificates-scroll.cl-dragging .certificate-slide {
    pointer-events: none;
}

.cl-layout-slider .certificates-track {
    display: flex;
    gap: var(--certificates-slider-gap);
    width: max-content;
    padding: 0 2px;
}

.cl-layout-slider .certificate-slide {
    flex: 0 0 calc((min(100vw, 1280px) - 80px - 60px) / var(--cols-desktop, 6));
    height: var(--certificates-slide-height);
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   Grid mode — fixed columns × rows, excess hidden
   ========================================================================== */
.cl-layout-grid .certificates-scroll {
    overflow: hidden;
    margin-top: 40px;
}

.cl-layout-grid .certificates-track {
    display: grid;
    grid-template-columns: repeat(var(--cols-desktop, 6), 1fr);
    grid-template-rows: repeat(var(--rows-desktop, 1), auto);
    grid-auto-rows: 0;
    gap: var(--certificates-slider-gap);
    width: 100%;
}

.cl-layout-grid .certificate-slide {
    flex: none;
    height: var(--certificates-slide-height);
    min-width: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   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
   ========================================================================== */
.certificates-placeholder {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary-color);
    font-style: italic;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (min-width: 1200px) {
    .certificates-container {
        padding: 0 30px;
    }
}

@media (max-width: 991px) {
    .certificates-section {
        padding: 6px 0;
    }

    .certificates-title {
        font-size: calc(var(--h3-font-size) * 0.9);
        font-weight: 500;
    }

    .cl-layout-slider .certificates-track {
        gap: var(--certificates-mobile-slider-gap);
    }

    .cl-layout-slider .certificate-slide {
        flex: 0 0 calc((100vw - 40px - 20px) / var(--cols-mobile, 2));
        height: var(--certificates-mobile-slide-height);
    }

    .cl-layout-grid .certificates-track {
        grid-template-columns: repeat(var(--cols-mobile, 2), 1fr);
        grid-template-rows: repeat(var(--rows-mobile, 1), auto);
        gap: var(--certificates-mobile-slider-gap);
    }

    .cl-layout-grid .certificate-slide {
        height: var(--certificates-mobile-slide-height);
    }
}

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

/* ==========================================================================
   Accessibility
   ========================================================================== */
.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;
}

@media (prefers-reduced-motion: reduce) {
    .certificate-image,
    .certificate-image img {
        transition: none;
    }

    .certificate-slide:hover .certificate-image {
        transform: none;
    }

    .certificate-slide:hover .certificate-image img {
        transform: none;
    }
}