/* Fix spacing for Projects and Contact sections */

/* Override the 100vh from other CSS files */
.section {
    min-height: auto !important;
    height: auto !important;
}

/* Projects Section - Reduce excessive padding and height */
#projects.section {
    min-height: auto !important; /* Don't force 100vh */
    height: auto !important;
    padding: 80px 20px 60px !important; /* Reduced padding */
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

#projects .section-content {
    padding: 0 !important; /* Remove extra internal padding */
}

#projects .section-title {
    margin-bottom: 40px !important; /* Reduce title spacing */
    font-size: 2.5rem !important;
}

#projects .projects-grid {
    gap: 30px !important; /* Reduce gap between project cards */
}

#projects .project-item {
    padding: 25px !important; /* Reduce card padding */
}

#projects .project-media {
    height: 180px !important; /* Reduce media height */
}

#projects .project-media img {
    height: 100% !important;
    object-fit: cover !important;
}

/* Info/About Section - Reduce spacing */
#info.section {
    min-height: auto !important;
    height: auto !important;
    padding: 80px 20px 60px !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

#info .section-content {
    padding: 0 !important;
}

#info .section-title {
    margin-bottom: 40px !important;
    font-size: 2.5rem !important;
}

#info .info-grid {
    gap: 40px !important; /* Reduce gap between columns */
}

#info .info-column {
    margin-bottom: 0 !important;
}

#info .info-heading {
    margin-bottom: 20px !important;
    font-size: 1.3rem !important;
}

#info .info-paragraph {
    margin-bottom: 15px !important;
    line-height: 1.6 !important;
}

/* Contact Section - Much more compact */
#contact.section {
    min-height: auto !important;
    height: auto !important;
    padding: 60px 20px 80px !important; /* Less top padding, more bottom for footer */
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

#contact .section-content {
    padding: 0 !important;
    max-width: 800px !important;
    margin: 0 auto !important;
}

#contact .section-title {
    margin-bottom: 30px !important;
    font-size: 2.5rem !important;
}

#contact .contact-content {
    padding: 0 !important;
}

#contact .contact-intro {
    margin-bottom: 30px !important;
    font-size: 1.1rem !important;
    line-height: 1.5 !important;
}

#contact .contact-info {
    gap: 20px !important;
    margin-bottom: 40px !important;
}

#contact .contact-link {
    padding: 20px !important;
}

#contact .contact-footer {
    margin-top: 30px !important;
    padding-top: 20px !important;
}

/* Modern sections should also have controlled height */
.modern-portfolio-sections .section {
    min-height: auto !important;
    padding: 80px 20px !important;
}

/* Remove extra space after modern-projects */
#modern-projects {
    margin-bottom: 0 !important;
    padding-bottom: 60px !important;
}

/* Remove extra space after modern-about */
#modern-about {
    margin-bottom: 0 !important;
    padding-bottom: 60px !important;
}

/* Contact section should come right after modern sections */
.modern-portfolio-sections + #contact {
    margin-top: 0 !important;
}

/* Make sure there's no gap between sections */
.section + .section {
    margin-top: 0 !important;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    #projects.section,
    #info.section {
        padding: 60px 20px 40px !important;
    }

    #contact.section {
        padding: 50px 20px 60px !important;
    }

    #projects .projects-grid {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }

    #info .info-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
}

@media (max-width: 768px) {
    #projects.section,
    #info.section,
    #contact.section {
        padding: 40px 15px !important;
    }

    .section-title {
        font-size: 2rem !important;
        margin-bottom: 30px !important;
    }

    #projects .project-item {
        padding: 20px !important;
    }

    #projects .project-media {
        height: 150px !important;
    }

    #contact .contact-link {
        padding: 15px !important;
    }
}

/* Fix overall scrolling behavior */
html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
    overflow-y: auto;
}

/* Ensure sections don't have unnecessary height */
.section {
    overflow: visible !important;
    position: relative;
    z-index: 1 !important;
}

/* Specific fix for sections after modern-projects */
#modern-projects ~ .section {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Make sure the professional portfolio container doesn't add extra height */
#professionalPortfolio {
    min-height: auto !important;
}

/* Adjust nav dots positioning if they're overlapping content */
.side-nav {
    z-index: 1000;
}

/* Force visibility for professional portfolio sections */
#professionalPortfolio #projects,
#professionalPortfolio #info,
#professionalPortfolio #contact {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    min-height: auto !important;
    height: auto !important;
}

/* Fix sections that come after modern sections */
.modern-portfolio-sections + #professionalPortfolio .section {
    margin-top: 0 !important;
    display: block !important;
}

/* Remove any fade effects that might hide sections */
#projects.section,
#info.section,
#contact.section {
    animation: none !important;
    transition: none !important;
    transform: none !important;
}