/**
 * Certifications Plugin Responsive Styles
 * 
 * This file contains all responsive styles for the Certifications plugin.
 * Organized by breakpoints:
 * - Common styles for tablet and mobile (max-width: 849px)
 * - Mobile styles (max-width: 549px)
 * - Tablet styles (min-width: 550px) and (max-width: 849px)
 * - Desktop styles (min-width: 850px)
 */

/* ----------------------------------------
   0. COMMON STYLES FOR MOBILE AND TABLET (849px and below)
   ---------------------------------------- */
@media (max-width: 849px) {
    /* Grid Layout - Force vertical stacking while keeping flex display */
    .certifications-grid {
        display: flex !important;
        flex-direction: column !important; /* Stack items vertically */
        flex-wrap: nowrap !important; /* Prevent wrapping to multiple columns */
    }
    
    /* Ensure each item takes full width */
    .certifications-item,
    .certifications-large-3,
    .certifications-large-4,
    .certifications-large-6 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important; /* Prevent flex items from shrinking */
        float: none !important; /* Ensure no floating */
    }
}

/* ----------------------------------------
   1. SMALL SCREENS (MOBILE)
   ---------------------------------------- */
@media (max-width: 549px) {
    /* Sticky Menu */
    .certifications-sticky-menu li {
        margin: 0 8px;
    }

    .certifications-sticky-menu a {
        font-size: 12px;
    }

    .certifications-back-to-top {
        position: relative;
        top: 0;
        right: 0;
        text-align: center;
        margin-top: 10px;
		margin-bottom: 10px;
        display: block;
    }

    /* Column system for mobile */
    .certifications-large-3,
    .certifications-large-4,
    .certifications-large-6 {
        width: 100%;
    }
    
    /* Force grid to stack vertically */
    .certifications-grid {
        flex-direction: column;
    }
    
    .certifications-item {
        width: 100%;
        max-width: 100%;
    }

    /* Certification Cards */
    .certifications-title {
        font-size: 14px;
    }

    .certifications-description {
        font-size: 12px;
    }

    .certifications-button .certifications-btn {
        font-size: 12px;
        padding: 3px 10px;
    }

    /* Image positioning in intro section */
    #certifications-intro .certifications-col-md-9 {
        order: 1;
    }

    #certifications-intro .certifications-col-md-3 {
        order: 2;
        padding-top: 30px;
    }

    /* List Layout - Mobile */
    .certifications-list .certifications-card-body {
        flex-direction: column;
    }

    .certifications-list .certifications-image {
        flex: 0 0 100%;
        margin-right: 0;
        margin-bottom: 15px;
        text-align: center;
    }

    .certifications-list .certifications-content {
        flex: 1;
        padding: 10px 0;
    }

    .certifications-list .certifications-title,
    .certifications-list .certifications-description,
    .certifications-list .certifications-button {
        text-align: center;
    }

    /* Pagination - Mobile */
    .certifications-pagination {
        margin: 20px 0;
    }

    .certifications-pagination .certifications-page-numbers {
        padding: 6px 10px;
        font-size: 12px;
        margin: 0 2px;
    }

    .certifications-pagination .certifications-page-numbers.certifications-prev,
    .certifications-pagination .certifications-page-numbers.certifications-next {
        padding: 6px 8px;
    }
}

/* ----------------------------------------
   2. MEDIUM SCREENS (TABLETS)
   ---------------------------------------- */
@media (min-width: 550px) and (max-width: 849px) {
    /* Column system for tablets - force full width in flex column */
    .certifications-large-3,
    .certifications-large-4,
    .certifications-large-6 {
        width: 100% !important;
        flex: 0 0 100% !important;
    }

    .certifications-item {
        padding: 10px;
    }

    #certifications-intro .certifications-col-md-3 {
        padding-top: 30px;
    }

    .certifications-card-body {
        padding: 15px;
    }

    .certifications-title {
        font-size: 15px;
    }

    .certifications-description {
        font-size: 13px;
    }

    .certifications-sticky-menu li {
        margin: 0 10px;
    }

    /* List Layout - Tablet */
    .certifications-list .certifications-image {
        flex: 0 0 140px;
        margin-right: 15px;
    }

    .certifications-list .certifications-content {
        padding: 10px 0;
    }

    /* Pagination - Tablet */
    .certifications-pagination .certifications-page-numbers {
        padding: 7px 12px;
        font-size: 13px;
    }
}

/* ----------------------------------------
   3. LARGE SCREENS ADJUSTMENTS
   ---------------------------------------- */
@media (min-width: 850px) {
    .certifications-card:hover {
        transform: translateY(-5px);
    }

    /* Ensure image is properly positioned on desktop */
    #certifications-intro .certifications-col-md-9 {
        order: 1;
    }

    #certifications-intro .certifications-col-md-3 {
        order: 2;
        display: flex;
        align-items: center;
    }

    /* List Layout - Desktop */
    .certifications-list .certifications-card {
        transition: all 0.3s ease;
    }

    .certifications-list .certifications-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
}

/* ----------------------------------------
   4. INTRO SECTION SPECIFIC IMAGE CONTAINER
   ---------------------------------------- */
#certifications-intro .certifications-col-md-3 {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 768px) {
    .certifications-single .certifications-col-md-9 {
        flex: 0 0 75%;
        max-width: 75%;
    }

    .certifications-single .certifications-col-md-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

/* ----------------------------------------
   5. CERTIFICATIONS SHORTCODE RESPONSIVE STYLES
   ---------------------------------------- */
@media (max-width: 549px) {
    /* Grid Layout - Mobile */
    .certifications-item {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
    
    .certifications-grid {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
    }
    
    /* Shortcode Card Styles - Mobile */
    .certifications-title {
        font-size: 13px;
    }

    .certifications-description {
        font-size: 11px;
    }

    .certifications-button .certifications-btn {
        font-size: 12px;
        padding: 4px 12px;
    }

    .certifications-thumbnail {
        max-width: 120px;
    }

    /* Single Certification Shortcode - Mobile */
    .certifications-single.certifications-shortcode {
        padding: 15px;
    }

    .certifications-single.certifications-shortcode .certifications-title {
        font-size: 20px;
    }

    .certifications-single.certifications-shortcode .certifications-action-buttons {
        flex-direction: column;
    }

    .certifications-single.certifications-shortcode .certifications-action-buttons .certifications-btn {
        margin-right: 0;
        margin-bottom: 10px;
        text-align: center;
    }

    .certifications-single.certifications-shortcode h3.certifications-text-to-uppercase {
        font-size: 16px;
    }
}

@media (min-width: 550px) and (max-width: 849px) {
    /* Grid Layout - Tablet */
    .certifications-large-3,
    .certifications-large-4,
    .certifications-large-6 {
        width: 100% !important;
        flex: 0 0 100% !important;
        float: none !important;
    }
    
    .certifications-grid {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
    }
    
    .certifications-item {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
    
    /* Shortcode Card Styles - Tablet */
    .certifications-card-body {
        padding: 15px;
    }

    .certifications-title {
        font-size: 13px;
    }

    /* Single Certification Shortcode - Tablet */
    .certifications-single.certifications-shortcode {
        padding: 20px;
    }

    .certifications-single.certifications-shortcode .certifications-title {
        font-size: 22px;
    }
}

/* ----------------------------------------
   6. PAGINATION RESPONSIVE STYLES
   ---------------------------------------- */
@media (max-width: 480px) {
    /* Extremely small screens */
    .certifications-pagination .certifications-page-numbers {
        padding: 5px 8px;
        font-size: 11px;
        margin: 0 1px;
    }

    /* Hide some pagination numbers on very small screens */
    .certifications-pagination .certifications-page-numbers:not(.certifications-prev):not(.certifications-next):not(.certifications-current) {
        display: none;
    }

    .certifications-pagination .certifications-page-numbers.certifications-current,
    .certifications-pagination .certifications-page-numbers.certifications-prev,
    .certifications-pagination .certifications-page-numbers.certifications-next {
        display: inline-block;
    }
}

/* ----------------------------------------
   7. CERTIFICATION IMAGES RESPONSIVE STYLES
   ---------------------------------------- */
@media (min-width: 550px) and (max-width: 849px) {
    /* Tablet view - 2 images per row */
    .certifications-image-item {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 549px) {
    /* Mobile view - 1 image per row for very small screens, 2 for larger phones */
    .certifications-image-item {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 480px) {
    /* Very small screens - 1 image per row */
    .certifications-image-item {
        flex: 0 0 100%;
        max-width: 100%;
    }
}