/* Mobile-specific fixes for team page - ONLY APPLY TO MOBILE */

/* Desktop styles - preserve scroll snap and layout */
@media (min-width: 769px) {
    body.team-page {
        overflow: hidden;
    }
    
    .team-page .scroll-container {
        height: 100vh;
        perspective: 1px;
        transform-style: preserve-3d;
        overflow-y: auto;
        overflow-x: hidden;
        scroll-behavior: smooth;
        scroll-snap-type: y mandatory;
    }
    
    .team-page .section {
        height: 100vh;
        width: 100%;
        scroll-snap-align: start;
        position: relative;
    }
    
    .team-page .section:not(:first-child) {
        margin-top: -25vh;
    }
    
    .team-page .section-content {
        position: absolute;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -10px 50px rgba(0, 0, 0, 0.1);
    }
    
    .team-page #team-hero .section-content {
        border-radius: 0;
        box-shadow: none;
    }
    
    .team-page .navigation {
        position: fixed;
        mix-blend-mode: difference;
        background-color: transparent;
    }
    
    .team-page .team-member-section .image-container {
        display: flex;
    }
}

/* Mobile styles */
@media (max-width: 768px) {
    /* General layout fixes */
    body.team-page {
        overflow: hidden !important;
    }
    
    .team-page .scroll-container {
        height: 100vh !important;
        overflow-y: auto !important;
        perspective: 1px !important;
        transform-style: preserve-3d !important;
        scroll-behavior: smooth !important;
        scroll-snap-type: y mandatory !important;
    }
    
    .team-page .section {
        height: 100vh !important;
        min-height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
        scroll-snap-align: start !important;
    }
    
    .team-page .section-content {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin: 0 !important;
        display: flex !important;
        align-items: flex-start !important;
    }
    
    .team-page #team-hero {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    .team-page #team-hero .section-content {
        margin-top: 0 !important;
        padding: 0 !important;
    }
    
    .team-page #team-hero .text-content {
        padding: 80px 8% 20px !important;
    }
    
    .team-page .navigation {
        position: absolute !important;
        background-color: #111 !important;
        mix-blend-mode: normal !important;
    }
    
    .team-page .team-member-section {
        border-top: 1px solid #eee !important;
    }
}

@media (max-width: 768px) {
    .team-page .section:not(:first-child) {
        margin-top: 0 !important;
    }
    
    .team-page .navigation {
        background-color: #111 !important;
    }
    
    .team-page #team-hero .section-content {
        padding-top: 60px !important;
    }
    
    .team-page .team-member-section .text-content {
        padding: 120px 10% 40px !important;
        margin: 0 auto !important;
        max-width: 100% !important;
        width: 100% !important;
        height: 100% !important;
        overflow-y: auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
    }
    
    /* Team member section styling */
    .team-page .team-member-section {
        margin: 0 !important;
        padding: 0 !important;
        border-top: none !important;
    }
    
    .team-page #luan .section-content {
        background-color: #fbfbfb !important;
    }
    
    .team-page #digenaldo .section-content {
        background-color: #f5f5f5 !important;
    }
    
    .team-page .team-member-section p {
        padding-left: 8% !important;
        padding-right: 8% !important;
        line-height: 1.9 !important;
        margin-bottom: 3rem !important;
        font-size: 1rem !important;
    }
    
    .team-page .team-member-section h2 {
        font-size: 2.5rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .team-page .team-member-section h3 {
        font-size: 1.3rem !important;
        margin-bottom: 2.5rem !important;
        color: #555 !important;
        letter-spacing: 0.5px !important;
        padding: 0 5% !important;
    }
    
    .team-page .team-member-section .section-content {
        padding: 0 !important;
    }
    
    /* Fix heading styles */
    .team-page h1, 
    .team-page h2 {
        margin-top: 0 !important;
        margin-bottom: 10px !important;
    }
    
    /* Social links styling */
    .team-page .social-links {
        flex-direction: row !important;
        justify-content: center !important;
        margin: 10px auto 30px !important;
        width: 80% !important;
        max-width: 300px !important;
        gap: 15px !important;
    }
    
    .team-page .social-icon {
        flex: 1 !important;
        text-align: center !important;
        font-weight: 500 !important;
        padding: 12px 20px !important;
    }
    
    .team-page p {
        margin-bottom: 15px !important;
    }
    
    /* Hide team member images only on mobile */
    .team-page .team-member-section .image-container {
        display: none !important;
    }
    
    /* Fix scroll behavior for touch devices */
    .team-page .scroll-container {
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Fix contact section spacing on mobile */
    .team-page #contact {
        margin-top: 0 !important;
        border-top: 1px solid #eee;
        height: 100vh !important;
        min-height: 100vh !important;
    }
    
    .team-page #contact .section-content {
        padding: 0 !important;
    }
    
    .team-page #contact .text-content {
        padding: 80px 8% 20px !important;
        overflow-y: auto !important;
        height: 100% !important;
    }
    
    .team-page #contact p {
        padding-left: 2% !important;
        padding-right: 2% !important;
    }
}