/* Jagatara Portal - Responsive CSS */

/* ===== LARGE DESKTOP (max-width: 1280px) ===== */
@media (max-width: 1280px) {
    .container {
        @apply px-6;
    }
    
    h1 {
        @apply text-5xl;
    }
}

/* ===== DESKTOP (max-width: 1024px) ===== */
@media (max-width: 1024px) {
    /* Typography */
    h1 {
        @apply text-4xl;
    }
    
    h2 {
        @apply text-3xl;
    }
    
    /* Hero Section */
    .hero-section {
        @apply py-16;
    }
    
    /* Cards grid */
    .grid-cols-3 {
        @apply grid-cols-2;
    }
}

/* ===== TABLET (max-width: 768px) ===== */
@media (max-width: 768px) {
    /* Typography */
    h1 {
        @apply text-3xl;
    }
    
    h2 {
        @apply text-2xl;
    }
    
    h3 {
        @apply text-xl;
    }
    
    /* Container padding */
    .container {
        @apply px-4;
    }
    
    /* Hero Section */
    .hero-section {
        @apply py-12 text-center;
    }
    
    .hero-section .btn-primary,
    .hero-section .btn-secondary {
        @apply w-full justify-center;
    }
    
    /* Stats cards */
    .stat-card {
        @apply p-4;
    }
    
    .stat-card .counter {
        @apply text-2xl;
    }
    
    /* Cards grid */
    .grid-cols-2, .grid-cols-3, .grid-cols-4, .grid-cols-6 {
        @apply grid-cols-1;
    }
    
    /* Program & News cards */
    .program-card, .news-card {
        @apply max-w-md mx-auto;
    }
    
    /* Footer */
    footer .grid {
        @apply gap-6;
    }
    
    /* Mobile navigation adjustments */
    .nav-link.active::after {
        display: none;
    }
    
    /* Form elements */
    .form-input {
        @apply text-base; /* Prevent zoom on iOS */
    }
}

/* ===== MOBILE (max-width: 640px) ===== */
@media (max-width: 640px) {
    /* Typography */
    h1 {
        @apply text-2xl;
    }
    
    h2 {
        @apply text-xl;
    }
    
    .section-title {
        @apply text-2xl;
    }
    
    .section-subtitle {
        @apply text-sm;
    }
    
    /* Hero Section */
    .hero-section {
        @apply py-10;
    }
    
    .hero-section p {
        @apply text-base;
    }
    
    /* Buttons */
    .btn-primary, .btn-secondary {
        @apply px-4 py-2 text-sm;
    }
    
    /* Stats cards */
    .stat-card {
        @apply p-3;
    }
    
    .stat-card .counter {
        @apply text-xl;
    }
    
    /* Cards */
    .program-card, .news-card {
        @apply mx-0;
    }
    
    .program-card img, .news-card img {
        @apply h-40;
    }
    
    /* Footer */
    footer {
        @apply text-sm;
    }
    
    footer .grid {
        @apply gap-4;
    }
    
    /* Navigation */
    .mobile-menu-btn {
        @apply block;
    }
    
    /* Modal/Drawer */
    .mobile-menu {
        @apply absolute left-0 right-0 bg-white shadow-lg;
        top: 80px;
        z-index: 40;
    }
    
    /* Hide desktop elements */
    .desktop-only {
        display: none;
    }
    
    /* Adjust spacing */
    .py-16 {
        @apply py-12;
    }
    
    .py-20 {
        @apply py-16;
    }
    
    .mt-12 {
        @apply mt-8;
    }
    
    .mb-12 {
        @apply mb-8;
    }
}

/* ===== SMALL MOBILE (max-width: 375px) ===== */
@media (max-width: 375px) {
    /* Typography */
    h1 {
        @apply text-xl;
    }
    
    h2 {
        @apply text-lg;
    }
    
    .section-title {
        @apply text-xl;
    }
    
    /* Stats cards */
    .stat-card .counter {
        @apply text-lg;
    }
    
    /* Buttons */
    .btn-primary, .btn-secondary {
        @apply px-3 py-1.5 text-xs;
    }
    
    /* Cards */
    .program-card, .news-card {
        @apply text-sm;
    }
    
    .program-card h3, .news-card h3 {
        @apply text-base;
    }
    
    /* Footer */
    footer .grid {
        @apply grid-cols-1;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    /* Hide unnecessary elements */
    header, footer, .mobile-menu-btn, .btn-primary, 
    .btn-secondary, iframe, .no-print {
        display: none !important;
    }
    
    /* Show all content */
    body {
        @apply bg-white text-black;
    }
    
    main {
        @apply block;
    }
    
    /* Ensure all text is readable */
    p, h1, h2, h3 {
        @apply text-black;
    }
    
    /* Remove backgrounds and shadows */
    .program-card, .news-card, .stat-card {
        @apply bg-white shadow-none border border-gray-200;
    }
    
    /* Show links */
    a[href]:after {
        content: " (" attr(href) ")";
        @apply text-xs text-gray-600;
    }
    
    /* Page breaks */
    section {
        page-break-inside: avoid;
    }
    
    /* Ensure images are visible */
    img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }
}

/* ===== LANDSCAPE ORIENTATION ===== */
@media (orientation: landscape) and (max-height: 600px) {
    .hero-section {
        @apply py-8;
    }
    
    .mobile-menu {
        max-height: 80vh;
        overflow-y: auto;
    }
}

/* ===== HIGH RESOLUTION SCREENS ===== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Retina-specific styles */
    .program-card img, .news-card img {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* ===== DARK MODE SUPPORT (optional) ===== */
@media (prefers-color-scheme: dark) {
    /* Jika ingin support dark mode, tambahkan di sini */
    /* 
    body {
        @apply bg-gray-900 text-white;
    }
    */
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===== FLEXBOX GAP FALLBACK ===== */
@supports not (gap: 1rem) {
    .grid {
        margin: -0.5rem;
    }
    
    .grid > * {
        margin: 0.5rem;
        width: calc(33.333% - 1rem);
    }
}

/* ===== CUSTOM SCROLLBAR ===== */
@media (min-width: 768px) {
    ::-webkit-scrollbar {
        width: 10px;
    }
    
    ::-webkit-scrollbar-track {
        @apply bg-gray-100;
    }
    
    ::-webkit-scrollbar-thumb {
        background: linear-gradient(135deg, #059669 0%, #2563eb 100%);
        @apply rounded-full;
    }
    
    ::-webkit-scrollbar-thumb:hover {
        @apply bg-green-700;
    }
}