/**
 * Mobile CSS Override
 * Clean mobile-first styles - HANYA untuk mobile devices
 */

/* ========================================
   MOBILE ONLY STYLES (max-width: 767px)
   ======================================== */

@media (max-width: 767px) {
    /* Main Content - Ensure Visibility */
    main {
        display: block;
        position: relative;
        width: 100%;
        z-index: auto;
    }

    section {
        display: block;
        visibility: visible;
        opacity: 1;
        background: white;
        margin: 0;
        padding: 20px 16px;
        overflow-x: hidden;
    }

    /* Visi Misi Section - Stack vertically on mobile */
    .mission-grid {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .mission-section .card {
        width: 100%;
        box-sizing: border-box;
    }

    .mission-section .card p,
    .mission-section .card ul {
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
    }

    .mission-section .card ul li {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Contact Section - Ensure visibility on mobile */
    .contact-cta {
        display: block;
        visibility: visible;
        opacity: 1;
        background: linear-gradient(135deg, #1a5f7a 0%, #0d3d52 100%);
        padding: 40px 16px;
        color: white;
    }

    .contact-cta h2,
    .contact-cta h3,
    .contact-cta p,
    .contact-cta a {
        color: white;
        visibility: visible;
        opacity: 1;
    }

    .contact-grid {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .contact-grid > div {
        display: block;
        visibility: visible;
        opacity: 1;
    }

    .contact-grid > div > div {
        background: rgba(255, 255, 255, 0.1);
        padding: 20px;
        border-radius: 8px;
        margin-bottom: 15px;
        display: block;
        visibility: visible;
        opacity: 1;
    }

    .map-container {
        display: block;
        visibility: visible;
        opacity: 1;
        height: 300px;
        width: 100%;
        border-radius: 8px;
        overflow: hidden;
    }

    .map-container iframe {
        display: block;
        visibility: visible;
        opacity: 1;
        width: 100%;
        height: 100%;
        border: none;
    }

    .container {
        width: 100%;
        padding: 0 16px;
        margin: 0 auto;
    }

}

/* ========================================
   TABLET STYLES (768px - 1023px)
   ======================================== */

@media (min-width: 768px) and (max-width: 1023px) {
    .header-container {
        padding: 15px 30px;
        gap: 20px;
    }
}

/* ========================================
   DESKTOP STYLES (1024px and up)
   ======================================== */

@media (min-width: 1024px) {
    .header-container {
        padding: 20px 60px;
        gap: 40px;
        justify-content: space-between;
    }
}

/* ========================================
   DEVICE-SPECIFIC UTILITY CLASSES
   ======================================== */

/* Hide on mobile */
.mobile-only {
    display: none;
}

/* Hide on desktop */
.desktop-only {
    display: none;
}

@media (max-width: 767px) {
    .mobile-only {
        display: block;
    }
    
    .desktop-only {
        display: none;
    }
}

@media (min-width: 768px) {
    .mobile-only {
        display: none;
    }
    
    .desktop-only {
        display: block;
    }
}