/**
 * Responsive Design - Breakpoints untuk semua device
 * Mobile: <768px, Tablet: 768px-1024px, Desktop: >1024px
 * Ditingkatkan dengan CSS3 features untuk responsivitas maksimal
 */

/* ===== Tablet (768px - 991px) ===== */
@media (min-width: 768px) and (max-width: 991px) {
    body {
        padding-top: 110px;
    }
    
    /* Semua aturan header dipindahkan ke assets/css/header.css */
    
    .content-area {
        padding-right: var(--spacing-md);
        margin-right: 310px; /* Sidebar 300px + gap 10px */
    }
    
    .sidebar-right {
        width: 300px;
        top: 110px;
        height: calc(100vh - 110px);
    }
    
    .hero-title {
        font-size: clamp(2rem, 3vw, 2.5rem); /* CSS3 clamp() untuk responsive font */
    }
    
    .hero-subtitle {
        font-size: clamp(1rem, 1.5vw, 1.125rem);
    }
    
    .section-title {
        font-size: clamp(1.25rem, 2vw, 1.5rem);
    }
    
    .whatsapp-button {
        bottom: 90px;
        right: var(--spacing-md);
    }
    
    .back-to-top {
        bottom: var(--spacing-md);
        right: var(--spacing-md);
    }
}

/* ===== Desktop Medium (992px - 1199px) ===== */
@media (min-width: 992px) {
    body {
        padding-top: 75px; /* Compact header height - diatur di header.css */
    }
    
    /* Semua aturan header dipindahkan ke assets/css/header.css */
}

@media (min-width: 992px) and (max-width: 1199px) {
    
    .content-area,
    .content-section {
        padding-right: 24px;
        margin-right: 324px; /* Sidebar 300px + gap 24px */
    }
    
    .sidebar-right {
        width: 300px;
    }
    
    /* Bottom Navigation - Hide on desktop */
    .bottom-nav {
        display: none !important;
    }
    
    /* Remove padding bottom from main content on desktop */
    .main-content {
        padding-bottom: 0;
    }
    
    .hero-title {
        font-size: clamp(2rem, 3vw, 2.5rem); /* CSS3 clamp() untuk responsive font */
    }
    
    .hero-subtitle {
        font-size: clamp(1rem, 1.5vw, 1.125rem);
    }
    
    .section-title {
        font-size: clamp(1.25rem, 2vw, 1.5rem);
    }
    
    .whatsapp-button {
        bottom: 90px;
        right: var(--spacing-md);
    }
    
    .back-to-top {
        bottom: var(--spacing-md);
        right: var(--spacing-md);
    }
}

/* ===== Medium Mobile (577px - 767px) ===== */
@media (min-width: 577px) and (max-width: 767px) {
    body {
        padding-top: 65px; /* Diatur di header.css */
    }
    
    /* Semua aturan header dipindahkan ke assets/css/header.css */
}

/* ===== Mobile (< 768px) ===== */
@media (max-width: 767px) {
    /* Bottom Navigation - Show on mobile */
    .bottom-nav {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--color-white);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        padding: var(--spacing-xs) 0;
        border-top: 1px solid var(--color-gray-200);
    }
    
    .bottom-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
        padding: var(--spacing-xs);
        color: var(--color-gray-600);
        text-decoration: none;
        font-size: clamp(0.625rem, 1.5vw, 0.75rem);
        transition: all var(--transition-fast);
        background: transparent;
        border: none;
        cursor: pointer;
    }
    
    .bottom-nav-item i {
        font-size: clamp(1.125rem, 3vw, 1.25rem);
    }
    
    .bottom-nav-item.active {
        color: var(--color-primary);
    }
    
    .bottom-nav-item:hover,
    .bottom-nav-item:focus {
        color: var(--color-primary);
        background: var(--color-gray-100);
    }
    
    .bottom-nav-item span {
        font-size: clamp(0.5625rem, 1.5vw, 0.625rem);
    }
    
    /* Add padding bottom to main content for bottom nav */
    .main-content {
        padding-bottom: 80px;
    }
    body {
        padding-top: 70px; /* Diatur di header.css */
        font-size: clamp(14px, 2vw, 16px); /* CSS3 clamp() untuk responsive font */
    }
    
    /* Semua aturan header dipindahkan ke assets/css/header.css */
    
    /* Content Area - Full Width on Mobile */
    .content-area {
        padding-right: 0;
        padding-left: 0;
        margin-right: 0;
    }
    
    .container-fluid {
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
    }
    
    /* Sidebar Hidden on Mobile */
    .sidebar-right {
        display: none !important;
    }
    
    /* Hero Section Mobile */
    .hero-section {
        margin-bottom: var(--spacing-md);
        border-radius: var(--radius-md);
    }
    
    .hero-slide {
        height: clamp(200px, 40vh, 250px); /* Responsive height */
    }
    
    .hero-content {
        padding: var(--spacing-md);
    }
    
    .hero-title {
        font-size: clamp(1.25rem, 4vw, 1.5rem); /* CSS3 clamp() */
        margin-bottom: var(--spacing-xs);
    }
    
    .hero-subtitle {
        font-size: clamp(0.875rem, 2.5vw, 1rem);
        margin-bottom: var(--spacing-md);
    }
    
    .btn-hero {
        padding: clamp(0.625rem, 2vw, 0.75rem) clamp(1rem, 3vw, 1.5rem);
        font-size: clamp(0.75rem, 2vw, 0.875rem);
    }
    
    .carousel-control-prev,
    .carousel-control-next {
        width: clamp(36px, 6vw, 40px);
        height: clamp(36px, 6vw, 40px);
    }
    
    .carousel-control-prev {
        left: var(--spacing-xs);
    }
    
    .carousel-control-next {
        right: var(--spacing-xs);
    }
    
    /* Section Headers Mobile */
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
        margin-bottom: var(--spacing-sm);
    }
    
    .section-title {
        font-size: clamp(1.125rem, 3vw, 1.25rem);
    }
    
    .section-link {
        font-size: clamp(0.75rem, 2vw, 0.875rem);
    }
    
    /* Cards Mobile */
    .card {
        margin-bottom: var(--spacing-md);
    }
    
    .card-img-wrapper {
        height: clamp(150px, 30vh, 180px);
    }
    
    .card-body {
        padding: var(--spacing-sm);
    }
    
    .card-title {
        font-size: clamp(0.9375rem, 2.5vw, 1rem);
    }
    
    .card-text {
        font-size: clamp(0.8125rem, 2vw, 0.875rem);
    }
    
    /* Pengumuman Mobile */
    .pengumuman-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
        padding: var(--spacing-sm);
    }
    
    .pengumuman-icon {
        width: clamp(36px, 6vw, 40px);
        height: clamp(36px, 6vw, 40px);
    }
    
    .pengumuman-title {
        font-size: clamp(0.875rem, 2.5vw, 0.9375rem);
    }
    
    /* Agenda Mobile */
    .agenda-item {
        flex-direction: column;
        gap: var(--spacing-sm);
        padding: var(--spacing-sm);
    }
    
    .agenda-date {
        flex-direction: row;
        min-width: auto;
        width: 100%;
        justify-content: flex-start;
        gap: var(--spacing-sm);
    }
    
    .agenda-day {
        font-size: clamp(1.125rem, 3vw, 1.25rem);
    }
    
    .agenda-title {
        font-size: clamp(0.9375rem, 2.5vw, 1rem);
    }
    
    /* FAQ Mobile */
    .accordion-button {
        padding: var(--spacing-sm);
        font-size: clamp(0.875rem, 2.5vw, 0.9375rem);
    }
    
    .accordion-body {
        padding: 0 var(--spacing-sm) var(--spacing-sm);
        font-size: clamp(14px, 2vw, 15px); /* Maintain accessibility dengan clamp() */
    }
    
    /* Footer Mobile */
    .site-footer {
        padding: var(--spacing-lg) 0 var(--spacing-md);
        margin-top: var(--spacing-lg);
    }
    
    .footer-title {
        font-size: clamp(1rem, 2.5vw, 1.125rem);
        margin-bottom: var(--spacing-sm);
    }
    
    .footer-text {
        font-size: clamp(14px, 2vw, 15px); /* Maintain accessibility */
        margin-bottom: var(--spacing-xs);
    }
    
    .footer-links a {
        font-size: clamp(14px, 2vw, 15px); /* Maintain accessibility */
    }
    
    .social-link {
        width: clamp(32px, 5vw, 36px);
        height: clamp(32px, 5vw, 36px);
        font-size: clamp(0.875rem, 2vw, 1rem);
    }
    
    /* WhatsApp Button Mobile */
    .whatsapp-button {
        bottom: 80px;
        right: var(--spacing-sm);
        width: clamp(50px, 8vw, 56px);
        height: clamp(50px, 8vw, 56px);
        font-size: clamp(1.125rem, 3vw, 1.25rem);
    }
    
    .whatsapp-text {
        display: none; /* Hide text on mobile */
    }
    
    /* Back to Top Mobile */
    .back-to-top {
        bottom: var(--spacing-sm);
        right: var(--spacing-sm);
        width: clamp(40px, 6vw, 44px);
        height: clamp(40px, 6vw, 44px);
        font-size: clamp(1rem, 2.5vw, 1.125rem);
    }
    
    /* Bottom Navigation - Show on mobile */
    .bottom-nav {
        display: flex !important;
    }
    
    /* Add padding bottom to main content for bottom nav */
    .main-content {
        padding-bottom: 80px;
    }
    
    /* Typography Mobile - Menggunakan clamp() untuk responsive font */
    h1 { font-size: clamp(1.5rem, 5vw, 1.75rem); }
    h2 { font-size: clamp(1.25rem, 4vw, 1.5rem); }
    h3 { font-size: clamp(1.125rem, 3.5vw, 1.25rem); }
    h4 { font-size: clamp(1rem, 3vw, 1.125rem); }
    h5 { font-size: clamp(0.9375rem, 2.5vw, 1rem); }
    h6 { font-size: clamp(0.875rem, 2vw, 0.9375rem); }
    
    /* Spacing adjustments for mobile */
    .mb-4 {
        margin-bottom: var(--spacing-md) !important;
    }
    
    .g-3 > * {
        margin-bottom: var(--spacing-sm);
    }
}

/* ===== Desktop Large (1200px - 1399px) ===== */
@media (min-width: 1200px) and (max-width: 1399px) {
    body {
        padding-top: 75px; /* Diatur di header.css */
    }
    
    /* Semua aturan header dipindahkan ke assets/css/header.css */
    
    .content-area,
    .content-section {
        padding-right: 24px;
        margin-right: 344px; /* Sidebar 320px + gap 24px */
    }
    
    .sidebar-right {
        width: 320px;
    }
    
    .hero-title {
        font-size: clamp(3rem, 4vw, 3.5rem); /* CSS3 clamp() */
    }
    
    .hero-subtitle {
        font-size: clamp(1.25rem, 2vw, 1.5rem);
    }
}

/* ===== Desktop Extra Large (1400px - 1599px) ===== */
@media (min-width: 1400px) and (max-width: 1599px) {
    body {
        padding-top: 75px; /* Diatur di header.css */
    }
    
    /* Semua aturan header dipindahkan ke assets/css/header.css */
    
    .sidebar-right {
        width: 340px;
    }
    
    .content-area,
    .content-section {
        padding-right: 24px;
        margin-right: 364px; /* Sidebar 340px + gap 24px */
    }
}

/* ===== Desktop XXL (1600px - 1919px) ===== */
@media (min-width: 1600px) and (max-width: 1919px) {
    body {
        padding-top: 75px; /* Diatur di header.css */
    }
    
    /* Semua aturan header dipindahkan ke assets/css/header.css */
    
    .sidebar-right {
        width: 360px;
    }
    
    .content-area,
    .content-section {
        padding-right: 24px;
        margin-right: 384px; /* Sidebar 360px + gap 24px */
    }
}

/* ===== Desktop XXXL (≥ 1920px) ===== */
@media (min-width: 1920px) {
    body {
        padding-top: 75px; /* Diatur di header.css */
    }
    
    /* Semua aturan header dipindahkan ke assets/css/header.css */
    
    .sidebar-right {
        width: 380px;
    }
    
    .content-area,
    .content-section {
        padding-right: 24px;
        margin-right: 404px; /* Sidebar 380px + gap 24px */
    }
}

/* ===== Print Styles ===== */
@media print {
    .site-header,
    .sidebar-right,
    .whatsapp-button,
    .back-to-top,
    .bottom-nav {
        display: none !important;
    }
    
    .main-content {
        padding: 0;
        margin: 0;
    }
    
    .content-area {
        margin: 0;
        padding: 0;
    }
    
    body {
        padding-top: 0;
        font-size: 12pt; /* Print standard */
    }
}

/* ===== Accessibility - 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;
    }
    
    .hero-slide::before {
        animation: none;
    }
}

/* ===== High Contrast Mode ===== */
@media (prefers-contrast: high) {
    :root {
        --color-primary: #005a4a;
        --color-secondary: #000000;
        --color-accent: #ffcc00;
    }
    
    .card {
        border: 2px solid var(--color-gray-800);
    }
    
    .nav-link {
        border: 1px solid transparent;
    }
    
    .nav-link:hover,
    .main-navbar .nav-link.active {
        border-color: var(--color-primary);
    }
}

/* ===== Small Mobile (≤ 576px) ===== */
@media (max-width: 576px) {
    body {
        padding-top: 60px; /* Diatur di header.css */
    }
    
    /* Semua aturan header dipindahkan ke assets/css/header.css */
}

/* ===== Landscape Mobile ===== */
@media (max-width: 767px) and (orientation: landscape) {
    body {
        padding-top: clamp(55px, 8vh, 60px); /* Diatur di header.css */
    }
    
    /* Semua aturan header dipindahkan ke assets/css/header.css */
    
    .hero-slide {
        height: clamp(180px, 35vh, 200px);
    }
    
    .hero-title {
        font-size: clamp(1.125rem, 3vw, 1.25rem);
    }
    
    .hero-subtitle {
        font-size: clamp(0.8125rem, 2vw, 0.875rem);
    }
}

/* ===== Container Queries (CSS3 Modern - jika browser support) ===== */
@supports (container-type: inline-size) {
    .card-container {
        container-type: inline-size;
    }
    
    @container (max-width: 400px) {
        .card-title {
            font-size: clamp(0.875rem, 2vw, 1rem);
        }
    }
}