/* ==========================================================================
   AJI Theme - Responsive Stylesheet
   Breakpoints: 1200px / 992px / 768px / 576px
   ========================================================================== */

/* ---- 1440px: wrapper menjadi full width di bawah breakpoint ini ---- */
@media (max-width: 1440px) {
    .site-wrapper {
        box-shadow: none;
    }
    body {
        background-color: var(--white);
    }
}

/* ---- 1200px: Large Tablet / Small Desktop ---- */
@media (max-width: 1200px) {
    :root { --container: 100%; }

    .programs-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
    .footer-grid   { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 36px; }
}

/* ---- 992px: Tablet Landscape ---- */
@media (max-width: 992px) {

    /* Typography */
    .section-title { font-size: 1.625rem; }

    /* Header — mobile */
    .main-navigation {
        display: none;
        flex-direction: column;
        position: absolute;
        top: var(--header-h);
        left: 0;
        right: 0;
        background: var(--white);
        border-top: 2px solid var(--primary);
        border-bottom: 1px solid var(--border);
        padding: 8px 0 16px;
        box-shadow: 0 8px 24px rgba(45,0,56,0.12);
        z-index: 999;
    }
    .main-navigation.nav-open { display: flex; }
    .hamburger { display: flex; }

    .nav-menu {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0 12px;
        height: auto;
    }

    .nav-menu > li {
        align-items: stretch;
        flex-direction: column;
    }

    .nav-menu > li > a {
        padding: 12px 12px;
        border-radius: 6px;
        font-size: 0.8125rem;
        height: auto;
        border-bottom: none;
        border-left: 3px solid transparent;
    }

    .nav-menu > li > a:hover,
    .nav-menu > li.current-menu-item > a {
        border-left-color: var(--primary);
        border-bottom: none;
        background: rgba(138,63,141,0.06);
        border-radius: 6px;
    }

    /* Mobile submenu */
    .nav-menu .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border-radius: 6px;
        background: linear-gradient(160deg, #6B1A7E 0%, #8A3F8D 100%);
        padding: 4px 0;
        margin: 0 0 6px 12px;
        display: none;
        min-width: unset;
    }

    .nav-menu .has-dropdown.dropdown-open > .sub-menu { display: block; }

    .nav-menu .sub-menu a {
        padding: 10px 16px;
        font-size: 0.8125rem;
        color: rgba(255,255,255,0.9);
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    .nav-menu .sub-menu a:hover {
        padding-left: 22px;
        background: rgba(255,255,255,0.12);
        color: #fff;
    }

    .nav-menu .sub-menu li:last-child > a { border-bottom: none; }

    /* Grids → 2 columns */
    .news-grid       { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .press-grid      { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .books-grid      { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .programs-grid   { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .gallery-strip   { grid-template-columns: repeat(4, 1fr); }

    /* Footer */
    .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 36px; }

    /* Hero */
    .hero-slider { height: 540px; }
    .slide-title { font-size: clamp(1.5rem, 4vw, 2.25rem); }

    /* Single */
    .single-layout { grid-template-columns: 1fr; }
    .single-sidebar { position: static; margin-top: 40px; }
    .single-gallery-grid { grid-template-columns: repeat(3, 1fr); }

    /* Dashboard */
    .dashboard-embed iframe,
    .dashboard-embed object { height: 460px; }

    /* Section padding */
    .section, .news-section, .about-section, .programs-section,
    .dashboard-section, .press-section, .books-section, .gallery-section { padding: 60px 0; }
}

/* ---- 768px: Tablet Portrait ---- */
@media (max-width: 768px) {

    /* Section padding */
    .section, .news-section, .about-section, .programs-section,
    .dashboard-section, .press-section, .books-section, .gallery-section { padding: 50px 0; }
    .section-header { margin-bottom: 36px; }

    /* Hero */
    .hero-slider { height: 480px; }
    .slide-title { font-size: clamp(1.25rem, 5vw, 2rem); }
    .slider-arrow { width: 40px; height: 40px; }
    .slider-arrow--prev { left: 12px; }
    .slider-arrow--next { right: 12px; }

    /* Grids → 1 column */
    .news-grid    { grid-template-columns: 1fr; }
    .press-grid   { grid-template-columns: 1fr; }
    .books-grid   { grid-template-columns: 1fr; }
    .gallery-strip { grid-template-columns: repeat(3, 1fr); }
    .programs-grid { grid-template-columns: repeat(2, 1fr); }

    /* Program Cards */
    .program-card { padding: 22px 16px; }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .footer-col--about { order: 1; }
    .footer-col--links { order: 2; }
    .footer-col--program { order: 3; }
    .footer-col--contact { order: 4; }

    .footer-bottom-inner {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }

    /* Footer Main */
    .footer-main { padding: 48px 0 36px; }

    /* Dashboard */
    .dashboard-embed iframe,
    .dashboard-embed object { height: 380px; }

    /* About */
    .about-desc { font-size: 1rem; }

    /* Single */
    .single-container { padding: 40px 16px; }
    .single-gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .document-meta-box { flex-direction: column; gap: 16px; align-items: flex-start; }
    .share-buttons { flex-wrap: wrap; }

    /* Page */
    .page-container { padding: 40px 16px; }

    /* Posts Grid fallback */
    .posts-grid { grid-template-columns: 1fr; }
}

/* ---- Logo responsive ---- */
@media (max-width: 768px) {
    .site-logo-img,
    .site-logo .custom-logo { max-height: 48px; }
}

@media (max-width: 576px) {
    .site-logo-img,
    .site-logo .custom-logo { max-height: 42px; }
}

/* ---- 576px: Mobile ---- */
@media (max-width: 576px) {

    /* Section padding */
    .section, .news-section, .about-section, .programs-section,
    .dashboard-section, .press-section, .books-section, .gallery-section { padding: 40px 0; }

    /* Container */
    .container { padding-left: 24px; padding-right: 24px; }

    /* Hero */
    .hero-slider { height: 420px; }
    .slide-title { font-size: 1.375rem; }
    .slide-tagline { font-size: 0.7rem; }
    .slider-arrow { display: none; }
    .slide-content { padding: 0 12px; }

    /* Section Title */
    .section-title { font-size: 1.375rem; }

    /* Programs → 1 column */
    .programs-grid { grid-template-columns: 1fr; }
    .program-card { display: flex; align-items: flex-start; gap: 16px; padding: 20px 16px; }
    .program-icon { margin-bottom: 0; flex-shrink: 0; width: 44px; height: 44px; }
    .program-body { flex: 1; }

    /* Gallery */
    .gallery-strip { grid-template-columns: repeat(2, 1fr); gap: 8px; }

    /* Dashboard */
    .dashboard-embed iframe,
    .dashboard-embed object { height: 300px; }

    /* Header Logo Text */
    .logo-text { font-size: 0.9rem; }

    /* Single */
    .single-gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .single-title { font-size: 1.375rem; }
    .single-excerpt { font-size: 1rem; }

    /* Cards */
    .card-body { padding: 16px; }

    /* Not Found */
    .not-found-actions { flex-direction: column; width: 100%; }
    .not-found-actions .btn { width: 100%; justify-content: center; }

    /* Breadcrumb */
    .breadcrumb { font-size: 0.8125rem; gap: 6px; }
}

/* ---- Reduced Motion ---- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .slide-bg { transform: none !important; }
}

/* ---- Print ---- */
@media print {
    .site-header, .hero-slider, .programs-section, .footer-social,
    .hamburger, .search-toggle, .slider-dots, .slider-arrow,
    .share-buttons { display: none !important; }

    body { font-size: 12pt; color: #000; }
    a { color: #000; text-decoration: underline; }
    .container { max-width: 100%; }
}