/* ==========================================================================
   SMK Nusantara - Mobile Responsive Layout & UI Overrides
   Specifically targets viewports below 1024px (Tablets) and 768px (Mobile)
   Ensures standard desktop view is 100% preserved.
   ========================================================================== */

/* ==========================================================================
   1. Global Mobile Resets & Typographical Clamping
   ========================================================================== */
@media (max-width: 767px) {

    /* Hero Title scaling to prevent awkward wrapping */
    #home h1 {
        font-size: clamp(2.8rem, 12vw, 5.5rem) !important;
        letter-spacing: -0.02em !important;
        line-height: 1.1 !important;
    }

    #home p {
        font-size: clamp(0.85rem, 3.8vw, 1.25rem) !important;
        letter-spacing: 0.15em !important;
    }

    /* General heading sizes for cleaner mobile layouts */
    h2 {
        font-size: 1.75rem !important;
        line-height: 1.25 !important;
    }

    h3 {
        font-size: 1.3rem !important;
        line-height: 1.3 !important;
    }

    /* Reduce excessive vertical spacing on mobile sections to speed up scroll experience */
    .py-24 {
        padding-top: 3.5rem !important;
        padding-bottom: 3.5rem !important;
    }

    .pt-24 {
        padding-top: 3.5rem !important;
    }

    .pb-24 {
        padding-bottom: 3.5rem !important;
    }

    /* Adjust grids to behave better on mobile */
    .gap-12 {
        gap: 1.5rem !important;
    }

    .gap-8 {
        gap: 1rem !important;
    }

    /* Adjust general container paddings */
    .px-4 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Mobile-optimized Scroll to Top Button */
    #scrollTopBtn {
        bottom: 1.25rem !important;
        right: 1.25rem !important;
        width: 2.75rem !important;
        height: 2.75rem !important;
        font-size: 0.875rem !important;
    }
}

/* ==========================================================================
   2. Mobile Navbar & Slide-Down Menu Transitions
   ========================================================================== */
@media (max-width: 1023px) {
    #navbar {
        height: 70px !important;
    }

    #navbar .h-20 {
        height: 70px !important;
    }

    /* Premium slide-down transition when mobile menu is toggled */
    @keyframes mobileMenuSlideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    #mobile-menu:not(.hidden) {
        display: block !important;
        animation: mobileMenuSlideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.15);
        border-radius: 0 0 1.25rem 1.25rem;
    }
}

/* ==========================================================================
   3. "Kenapa Harus Skanesa" Grid (2x2 Grid instead of 1x4 list)
   ========================================================================== */
@media (max-width: 767px) {
    #alasan .grid-cols-1 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 1.25rem !important;
    }

    #alasan .group {
        padding: 1.25rem 0.75rem !important;
        background: rgba(255, 255, 255, 0.6);
        border-radius: 1.25rem;
        border: 1px solid rgba(226, 232, 240, 0.8);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
    }

    .dark #alasan .group {
        background: rgba(30, 41, 59, 0.5);
        border-color: rgba(51, 65, 85, 0.5);
    }

    #alasan .w-20 {
        width: 3.5rem !important;
        height: 3.5rem !important;
        margin-bottom: 1rem !important;
    }

    #alasan .w-20 i {
        font-size: 1.5rem !important;
    }

    #alasan h3 {
        font-size: 0.95rem !important;
        font-weight: 700 !important;
    }

    #alasan p {
        font-size: 0.75rem !important;
        line-height: 1.4 !important;
    }
}

/* ==========================================================================
   4. Program Keahlian Section (Horizontal Swipe Tabs & Correct Order)
   ========================================================================== */
@media (max-width: 767px) {

    /* Translate the tabs wrapper into a horizontal swiping pill menu */
    #program-keahlian .flex.flex-wrap.justify-center {
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        padding: 0.5rem 1rem !important;
        margin-left: -1rem !important;
        margin-right: -1rem !important;
        gap: 0.75rem !important;
        -webkit-overflow-scrolling: touch;
    }

    #program-keahlian .flex.flex-wrap.justify-center::-webkit-scrollbar {
        display: none !important;
    }

    #program-keahlian .major-tab-btn {
        flex-shrink: 0 !important;
        font-size: 0.8rem !important;
        padding: 0.6rem 1.25rem !important;
    }
}

@media (max-width: 1023px) {

    /* Change grid stack order so description comes BEFORE the placeholder image */
    #program-keahlian .grid {
        display: flex !important;
        flex-direction: column !important;
    }

    #program-keahlian .lg\:col-span-5 {
        order: 2 !important;
        /* Move image second */
        margin-top: 1.5rem !important;
        width: 100% !important;
    }

    #program-keahlian .lg\:col-span-7 {
        order: 1 !important;
        /* Move text description first */
        width: 100% !important;
    }

    #program-keahlian .h-\[500px\] {
        height: 250px !important;
    }

    /* Make the content height auto-resize to prevent vertical overlaps */
    #program-keahlian .lg\:col-span-7 {
        min-height: auto !important;
        position: relative !important;
    }

    #program-keahlian .major-content {
        position: relative !important;
        display: none !important;
        opacity: 0;
        transform: translateY(10px);
    }

    #program-keahlian .major-content.opacity-100 {
        display: block !important;
        opacity: 1 !important;
        transform: translateY(0);
        pointer-events: auto !important;
    }
}

/* ==========================================================================
   5. Extracurricular (Ekskul) Grid (2x2 Grid instead of 1x4 list)
   ========================================================================== */
@media (max-width: 767px) {
    #kesiswaan .grid.grid-cols-1 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.75rem !important;
    }

    #kesiswaan .ekskul-card-wrap {
        border-radius: 12px !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06) !important;
    }


    #kesiswaan .ekskul-bar {
        padding: 0.75rem !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.5rem !important;
        text-align: center !important;
    }

    #kesiswaan .ekskul-bar-name {
        font-size: 0.8rem !important;
        text-align: center !important;
        margin-bottom: 2px !important;
    }

    #kesiswaan .ekskul-btn-lihat {
        width: 100% !important;
        padding: 5px 0 !important;
        font-size: 0.75rem !important;
        text-align: center !important;
        border-radius: 8px !important;
    }
}

/* ==========================================================================
   6. Profil Page Responsive Timeline (Prevents squeezed cards)
   ========================================================================== */
@media (max-width: 767px) {

    /* Move timeline center line to the far left */
    .timeline-wrap::before {
        left: 20px !important;
        transform: none !important;
    }

    /* Align all timeline nodes to the left */
    .tl-item,
    .tl-item.right {
        justify-content: flex-start !important;
        padding-left: 45px !important;
        padding-right: 0 !important;
        margin-bottom: 2.25rem !important;
        width: 100% !important;
    }

    /* Move the timing bullet to the left line */
    .tl-dot {
        left: 20px !important;
        transform: translateX(-50%) !important;
    }

    /* Make the info cards expand to full-width */
    .tl-card {
        max-width: 100% !important;
        width: 100% !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
    }
}

/* ==========================================================================
   7. SPMB Dashboard Layout Refinements
   ========================================================================== */
@media (max-width: 1023px) {
    main {
        padding-top: 70px !important;
        /* Offset for mobile navbar */
    }

    /* SPMB grid menu on tablet/mobile: 2 columns grid with last button centered at the bottom */
    .sidebar-scroll {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.5rem !important;
        overflow-x: visible !important;
        white-space: normal !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    .sidebar-scroll::-webkit-scrollbar {
        display: none !important;
    }

    .spmb-tab-btn {
        width: 100% !important;
        justify-content: flex-start !important;
        padding: 0.55rem 0.75rem !important;
        font-size: 0.7rem !important;
        border-radius: 0.75rem !important;
        min-height: 42px !important;
        white-space: normal !important;
        text-align: left !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }

    /* Center and span the 9th button (Daftar Sekarang) at the bottom */
    .spmb-tab-btn:last-child {
        grid-column: span 2 !important;
        justify-self: center !important;
        width: 60% !important;
        justify-content: center !important;
    }

    .spmb-tab-btn:last-child span {
        flex: none !important;
        text-align: center !important;
    }

    /* Align and equalize width of all button icons to keep them perfectly aligned on the left */
    .spmb-tab-btn i {
        width: 1.25rem !important;
        text-align: center !important;
        flex-shrink: 0 !important;
    }

    /* Enforce block display and left alignment for the text next to the icon */
    .spmb-tab-btn span {
        text-align: left !important;
        line-height: 1.25 !important;
        display: block !important;
        flex: 1 !important;
    }
}

/* ==========================================================================
   8. Tables & Touch Scrolls
   ========================================================================== */
.sidebar-scroll,
.overflow-x-auto {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.sidebar-scroll::-webkit-scrollbar,
.overflow-x-auto::-webkit-scrollbar {
    display: none !important;
}

@media (max-width: 767px) {

    /* Touch tables padding optimization */
    table th,
    table td {
        padding: 0.65rem 0.5rem !important;
        font-size: 0.75rem !important;
    }
}

/* ==========================================================================
   9. BKK / Loker (Job Vacancy Page) Styling Optimization
   ========================================================================== */
@media (max-width: 767px) {

    /* Optimize Search Bar spacing */
    #loker-header {
        padding-top: 2rem !important;
        padding-bottom: 1rem !important;
    }

    /* Prevent tags wrapping awkwardly in Job cards */
    .active-loker-card span,
    #loker-grid-view span {
        font-size: 10px !important;
    }
}

/* ==========================================================================
   10. Mobile Bottom Navigation Bar (App-style Footer) & Scrollbars
   ========================================================================== */
.scrollbar-none::-webkit-scrollbar {
    display: none !important;
}

.scrollbar-none {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

#mobile-footer {
    display: none;
}

@media (max-width: 1279px) {

    /* Hide the old top-header mobile toggler and dropdown menu */
    #mobile-menu-btn,
    #mobile-menu {
        display: none !important;
    }

    #mobile-footer {
        display: block !important;
        position: fixed !important;
        bottom: 12px !important;
        left: 12px !important;
        right: 12px !important;
        z-index: 9999 !important;
    }

    /* Add padding at the bottom of the document body so the floating bottom nav does not block layout content */
    body {
        padding-bottom: 90px !important;
    }

    /* Style the active tab to match the dynamic theme color — ONLY when .active is set by JS */
    #mobile-footer .mobile-nav-link.active,
    #mobile-footer .mobile-submenu-trigger.active {
        color: rgb(var(--brand-color, 220, 38, 38)) !important;
    }

    #mobile-footer .mobile-nav-link.active i,
    #mobile-footer .mobile-submenu-trigger.active i {
        color: rgb(var(--brand-color, 220, 38, 38)) !important;
    }


    /* Chevron rotation animation on open */
    .mobile-submenu-trigger i.fa-chevron-up {
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .mobile-submenu-trigger.open i.fa-chevron-up {
        transform: rotate(180deg) !important;
    }

    /* ==========================================================================
       11. Mobile Submenu Overlay Card (Floating Upward Popover)
       ========================================================================== */
    .mobile-submenu {
        display: flex !important;
        position: fixed !important;
        z-index: 10000 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translate(-50%, 10px) !important;
        transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s !important;
        flex-direction: column !important;
        min-width: 160px !important;
        background-color: rgba(255, 255, 255, 0.98) !important;
        border: 1px solid rgba(226, 232, 240, 0.8) !important;
        border-radius: 1rem !important;
        padding: 0.35rem !important;
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
        backdrop-filter: blur(12px) !important;
    }

    .dark .mobile-submenu {
        background-color: rgba(15, 23, 42, 0.98) !important;
        border-color: rgba(51, 65, 85, 0.8) !important;
    }

    .mobile-submenu.open {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translate(-50%, 0) !important;
    }

    .mobile-submenu a {
        display: block !important;
        padding: 0.6rem 1rem !important;
        font-size: 0.75rem !important;
        font-weight: 600 !important;
        color: #334155 !important;
        border-radius: 0.5rem !important;
        transition: all 0.2s ease !important;
        text-align: left !important;
    }

    .dark .mobile-submenu a {
        color: #94a3b8 !important;
    }

    .mobile-submenu a:hover,
    .mobile-submenu a:focus {
        background-color: rgba(241, 245, 249, 0.9) !important;
        color: rgb(var(--brand-color, 220, 38, 38)) !important;
    }

    .dark .mobile-submenu a:hover,
    .dark .mobile-submenu a:focus {
        background-color: rgba(30, 41, 59, 0.9) !important;
        color: #ffffff !important;
    }

    /* Active page style inside submenu */
    .mobile-submenu a.active {
        background-color: rgb(var(--brand-color, 220, 38, 38)) !important;
        color: #ffffff !important;
    }

    .dark .mobile-submenu a.active {
        background-color: rgb(var(--brand-color, 220, 38, 38)) !important;
        color: #ffffff !important;
    }
}

/* ==========================================================================
   12. Master Redesign - Global Mobile View Overrides (≤768px)
   ========================================================================== */
@media (max-width: 768px) {

    /* Global Container standard */
    body,
    html {
        overflow-x: hidden !important;
        width: 100% !important;
    }

    .max-w-7xl,
    .max-w-[1400px],
    .container,
    [class*="mx-auto"] {
        padding-left: 16px !important;
        padding-right: 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Comfortable reading body line height */
    p,
    span,
    li,
    td,
    th {
        line-height: 1.75 !important;
    }

    /* Typographical Clamping */
    h1,
    .text-3xl,
    .text-4xl,
    .text-5xl {
        font-size: 1.85rem !important;
        /* 30px */
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }

    h2,
    .text-2xl {
        font-size: 1.35rem !important;
        /* 22px */
        font-weight: 700 !important;
        line-height: 1.3 !important;
    }

    h3,
    .text-xl {
        font-size: 1.15rem !important;
        /* 18px */
        line-height: 1.3 !important;
    }

    .text-lg {
        font-size: 0.95rem !important;
    }

    /* Vertical Rhythm spacing overrides */
    .py-24,
    .py-20,
    .py-16 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .pt-24,
    .pt-20,
    .pt-16 {
        padding-top: 2rem !important;
    }

    .pb-24,
    .pb-20,
    .pb-16 {
        padding-bottom: 2rem !important;
    }

    .gap-12,
    .gap-10,
    .gap-8 {
        gap: 1rem !important;
    }

    /* Card System */
    .rounded-3xl,
    .rounded-2xl {
        border-radius: 16px !important;
    }

    .shadow-xl,
    .shadow-2xl,
    .shadow-lg {
        box-shadow: 0 4px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.02) !important;
    }

    /* Thumb-friendly Forms */
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        width: 100% !important;
        min-height: 48px !important;
        font-size: 16px !important;
        /* Prevents auto-zoom on iOS */
        border-radius: 12px !important;
        /* Premium rounded input corners */
        padding-left: 12px !important;
        padding-right: 12px !important;
        box-sizing: border-box !important;
    }

    /* Hero Section Override */
    #home {
        height: 60vh !important;
        min-height: 420px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
    }

    #home h1 {
        font-size: clamp(2rem, 10vw, 3rem) !important;
        line-height: 1.1 !important;
    }

    #home p {
        font-size: 1rem !important;
        margin-top: 0.5rem !important;
    }

    #home .w-24 {
        margin: 1rem auto !important;
        height: 4px !important;
    }

    /* Form & Input standard button overrides */
    button.px-6,
    button.py-3 {
        min-height: 48px !important;
        font-size: 15px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* 2 Columns Grid layout overrides for specific elements */
    #mitra-grid,
    #albums-grid-container {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.75rem !important;
    }

    /* News vertical list cards (full width block) */
    #berita-grid,
    .grid-news,
    .news-list-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
        gap: 1.5rem !important;
    }

    /* Google maps iframe responsive height */
    iframe[src*="google.com/maps"] {
        width: 100% !important;
        height: 250px !important;
        border-radius: 16px !important;
    }

    /* Compact navbar size & transition */
    #navbar {
        height: 60px !important;
        transition: all 0.3s ease !important;
    }

    #navbar .h-20 {
        height: 60px !important;
        transition: all 0.3s ease !important;
    }

    /* Full-height Navigation Drawer */
    #mobile-menu {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 85% !important;
        max-width: 360px !important;
        height: 100vh !important;
        max-height: 100vh !important;
        z-index: 100000 !important;
        transform: translateX(100%) !important;
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, visibility 0.3s !important;
        background-color: rgba(255, 255, 255, 0.98) !important;
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        box-sizing: border-box !important;
        padding: 1.5rem !important;
        flex-direction: column !important;
    }

    .dark #mobile-menu {
        background-color: rgba(15, 23, 42, 0.98) !important;
    }

    #mobile-menu:not(.hidden) {
        transform: translateX(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }



    /* ==========================================================================
       15. Berita Terkini Category Filter Horizontal Scroll
       ========================================================================== */
    #category-filters {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        justify-content: flex-start !important;
        padding: 0.5rem 1rem !important;
        margin-left: -1rem !important;
        margin-right: -1rem !important;
        gap: 0.35rem !important;
        -webkit-overflow-scrolling: touch;
    }

    #category-filters::-webkit-scrollbar {
        display: none !important;
    }

    #category-filters .cat-btn {
        flex-shrink: 0 !important;
    }

    /* ==========================================================================
       16. Alumni Comment Feed (YouTube-style) Mobile Override
       ========================================================================== */

    /* Single-column with gap between each card */
    #alumni-messages-container {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
        gap: 0.6rem !important;
    }

    /* Keep individual card borders & background — same as desktop look */
    #alumni-messages-container .alumni-comment-item {
        background: #f8fafc !important;
        border: 1px solid rgba(226, 232, 240, 0.9) !important;
        border-radius: 16px !important;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04) !important;
        padding: 0.85rem 0.9rem !important;
    }

    .dark #alumni-messages-container .alumni-comment-item {
        background: #1e293b !important;
        border-color: rgba(51, 65, 85, 0.8) !important;
    }

    /* Tighten up the comment text font slightly */
    #alumni-messages-container .alumni-comment-text {
        font-size: 0.8rem !important;
        line-height: 1.55 !important;
        color: #475569 !important;
    }

    .dark #alumni-messages-container .alumni-comment-text {
        color: #cbd5e1 !important;
    }
}