/**
 * Project Details Mobile Layout Fix
 * Repositions project sidebar below content on mobile devices
 */

/* ================================
   MOBILE PROJECT DETAILS LAYOUT
   ================================ */

/* Base mobile breakpoint - stack columns */
@media (max-width: 991px) {
    .project-details .row {
        display: flex;
        flex-direction: column;
    }

    .project-details .col-xl-4,
    .project-details .col-lg-4 {
        order: 2; /* Sidebar comes second on mobile */
        width: 100%;
    }

    .project-details .col-xl-8,
    .project-details .col-lg-8 {
        order: 1; /* Content comes first on mobile */
        width: 100%;
    }
}

/* Small mobile optimization */
@media (max-width: 575px) {
    .project-details {
        padding: 40px 0;
    }

    .project-details .container {
        padding: 0 15px;
    }

    /* Ensure proper spacing between stacked elements */
    .project-details .project-sidebar {
        margin-top: 30px;
        top: 0px;
    }

    /* Optimize sidebar widgets for mobile */
    .project-details .widget-box {
        margin-bottom: 20px;
    }

    .project-details .widget-box.consulting-box {
        margin-bottom: 0;
    }
}

/* Mobile-specific sidebar improvements */
@media (max-width: 767px) {
    /* Project details box mobile optimization */
    .project-details .project-details-box .title {
        font-size: 18px;
        padding: 15px;
    }

    .project-details .project-details-box .content ul li {
        padding: 12px 15px;
        font-size: 14px;
    }

    /* Consulting box mobile optimization */
    .project-details .consulting-box .inner-box {
        padding: 25px;
    }

    .project-details .consulting-box .title {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .project-details .consulting-box .text {
        font-size: 14px;
        margin-bottom: 20px;
    }

    .project-details .contact-info .contact-item {
        align-items: flex-start;
        margin-bottom: 15px;
    }

    .project-details .contact-info .contact-item .icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }

    .project-details .contact-info .contact-item .content p {
        font-size: 12px;
        margin-bottom: 2px;
    }

    .project-details .contact-info .contact-item .content a {
        font-size: 14px;
    }
}

/* Ensure proper z-index and positioning */
@media (max-width: 991px) {
    .project-details .project-sidebar {
        position: relative;
        z-index: 1;
    }

    .project-details .project-details__content {
        position: relative;
        z-index: 2;
    }
}

/* Fix potential overlapping issues */
@media (max-width: 575px) {
    .project-details .details-image-box .title {
        font-size: 14px;
        padding: 10px;
    }

    .project-details .details__pagination-box {
        margin-top: 30px;
    }

    .project-details .details__pagination li a {
        font-size: 12px;
        padding: 10px 15px;
    }
}