/* ===== Responsive Rules ===== */

/* Tablet: 769px - 1024px */
@media (max-width: 1024px) {
    .main-content { padding: 30px; }
    .sidebar { width: 230px; }
    .grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

/* Mobile: up to 768px */
@media (max-width: 768px) {
    .hamburger { display: flex; }

    .sidebar {
        position: fixed;
        top: 0; left: 0;
        height: 100vh;
        width: 78%;
        max-width: 300px;
        transform: translateX(-105%);
        z-index: 150;
    }
    .sidebar.open { transform: translateX(0); }

    .sidebar-overlay.open { display: block; }

    .main-content {
        padding: 90px 18px 40px;
        width: 100%;
    }

    .page-header h1 { font-size: 1.6rem; }

    .grid { grid-template-columns: 1fr; gap: 16px; }

    .modal { padding: 22px; max-height: 92vh; }

    .btn { width: 100%; }
    .btn.btn-auto { width: auto; }

    .form-control { font-size: 16px; }

    /* Bible reader controls stack */
    .reader-controls { flex-direction: column; align-items: stretch !important; }
    .reader-controls > * { width: 100%; }

    /* Prayer categories scroll horizontally on mobile */
    .prayer-categories {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
    }
    .prayer-categories::-webkit-scrollbar { height: 4px; }
    .prayer-categories .category-btn { flex-shrink: 0; }

    .games-grid { grid-template-columns: 1fr; }
    .game-board { max-width: 100%; }

    .stat-card { padding: 20px; }
    .stat-card .stat-value { font-size: 1.7rem; }

    .quick-actions { grid-template-columns: 1fr; }

    .hero-content { padding: 30px 22px; margin: 0 16px; }
}

/* Small mobile */
@media (max-width: 380px) {
    .page-header h1 { font-size: 1.4rem; }
    .modal { padding: 16px; }
}

/* Desktop */
@media (min-width: 1025px) {
    .grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}

/* No horizontal scroll anywhere */
html, body { max-width: 100%; }
img, video { max-width: 100%; }