/* ==========================================================================
   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;
    }

}

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

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

/* ==========================================================================
   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) {
    #program-keahlian #major-tabs-wrapper {
        padding: 4px !important;
    }

    #program-keahlian .major-tab-btn {
        font-size: 0.75rem !important;
        padding: 0.5rem 0.85rem !important;
    }
}

@media (max-width: 1023px) {
    #program-keahlian .flex-col.lg\:flex-row {
        display: flex !important;
        flex-direction: column !important;
    }

    #program-keahlian .w-full.lg\:w-5\/12 {
        order: 1 !important;
        width: 100% !important;
        max-width: 360px !important;
        height: 280px !important;
        margin: 0 auto 1.5rem auto !important;
    }

    #program-keahlian .w-full.lg\:w-7\/12 {
        order: 2 !important;
        width: 100% !important;
        min-height: auto !important;
        position: relative !important;
    }

    #program-keahlian .major-content {
        position: relative !important;
        display: none !important;
        opacity: 0;
        transform: translateY(6px);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    #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) {
    #ekstrakurikuler .grid.grid-cols-1,
    #kesiswaan .grid.grid-cols-1 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.75rem !important;
    }

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

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

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

    #ekstrakurikuler .ekskul-btn-lihat,
    #kesiswaan .ekskul-btn-lihat {
        width: 100% !important;
        padding: 5px 0 !important;
        font-size: 0.75rem !important;
        text-align: center !important;
        border-radius: 8px !important;
        justify-content: center !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;
}

/* ==========================================================================
   11. Mobile Navigation & Drawer Styling (Hamburger Mode Only)
   ========================================================================== */
#mobile-footer {
    display: none !important;
}

/* Backdrop Overlay */
#mobile-menu-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background-color: rgba(15, 23, 42, 0.65) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 99990 !important;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s !important;
}

#mobile-menu-backdrop.hidden {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

#mobile-menu-backdrop:not(.hidden) {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Mobile Drawer */
#mobile-menu {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 88% !important;
    max-width: 360px !important;
    height: 100vh !important;
    max-height: 100vh !important;
    z-index: 99999 !important;
    background-color: rgba(255, 255, 255, 0.97) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.25) !important;
    box-sizing: border-box !important;
    flex-direction: column !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, visibility 0.3s !important;
}

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

#mobile-menu.hidden {
    display: none !important;
    transform: translateX(100%) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

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

@media (max-width: 1279px) {
    #mobile-menu-btn {
        display: flex !important;
    }

    /* Custom thin scrollbar inside mobile menu */
    #mobile-menu .custom-scrollbar::-webkit-scrollbar {
        width: 4px;
    }
    #mobile-menu .custom-scrollbar::-webkit-scrollbar-thumb {
        background: rgba(148, 163, 184, 0.35);
        border-radius: 9999px;
    }
    .dark #mobile-menu .custom-scrollbar::-webkit-scrollbar-thumb {
        background: rgba(100, 116, 139, 0.4);
    }

    /* Smooth accordion chevron rotate */
    #mobile-menu details summary {
        list-style: none !important;
    }
    #mobile-menu details summary::-webkit-details-marker {
        display: none !important;
    }
    #mobile-menu details summary i.fa-chevron-down {
        transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }
    #mobile-menu details[open] summary i.fa-chevron-down {
        transform: rotate(180deg);
    }
}

@media (min-width: 1280px) {
    #mobile-menu-btn,
    #mobile-menu,
    #mobile-menu-backdrop {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !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;
    }




    /* ==========================================================================
       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;
    }
}