/**
 * Comprehensive Mobile Optimizations for PromptLume
 * Mobile-first responsive design improvements
 */

/* ============================================
   GALLERY GRID - MOBILE RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--spacing-2) !important;
    }
    
    .gallery-item:hover {
        transform: none !important;
    }
    
    #lightbox-modal button {
        width: 40px !important;
        height: 40px !important;
        font-size: 20px !important;
    }
    
    #lightbox-image {
        max-width: 95vw !important;
        max-height: 85vh !important;
    }
}

/* Desktop Gallery Hover Effects */
@media (min-width: 769px) {
    .gallery-item:hover {
        transform: scale(1.05);
        box-shadow: 0 8px 24px rgba(124, 58, 237, 0.3);
        border-color: var(--primary-purple);
    }
    
    .gallery-item:hover > div {
        opacity: 1 !important;
    }
    
    .gallery-item img:hover {
        transform: scale(1.1);
    }
}

/* ============================================
   MOBILE PERFORMANCE OPTIMIZATIONS
   ============================================ */
/* Reduce animations on mobile for better performance */
@media (max-width: 768px) {
    * {
        animation-duration: 0.3s !important;
        transition-duration: 0.2s !important;
    }
    
    /* Disable expensive effects on mobile */
    .bento-glow-effect,
    .neon-glow,
    .prompt-card::before {
        display: none !important;
    }
    
    /* Premium badge mobile positioning */
    .premium-badge {
        top: 6px !important;
        left: 6px !important;
        transform: translate(0, 0) !important;
        font-size: 9px !important;
        padding: 6px 10px !important;
        gap: 3px !important;
    }
    
    .premium-badge span:first-child {
        font-size: 14px !important;
    }
}

/* ============================================
   NAVBAR MOBILE STYLES - UPDATED LAYOUT
   ============================================ */
@media (max-width: 1024px) {
    /* Hide some nav items on tablet */
    .desktop-nav .nav-link:not([href="/profile/"]):not([href="/admin/"]):not([href="/logout.php"]):not([href="/login.php"]) {
        font-size: var(--text-xs) !important;
        padding: var(--spacing-1) !important;
    }
}

@media (max-width: 768px) {
    /* Navbar container */
    .navbar > .container {
        padding: var(--spacing-2) var(--spacing-3) !important;
    }
    
    /* Hide desktop elements */
    .desktop-nav,
    .desktop-search {
        display: none !important;
    }
    
    /* Show mobile toggle */
    #mobile-menu-toggle {
        display: flex !important;
    }
    
    /* Logo sizing */
    .logo {
        flex-shrink: 0 !important;
    }
    
    .site-logo-img {
        height: 32px !important;
        max-width: 100px !important;
    }
    
    .logo-text {
        font-size: var(--text-lg) !important;
    }
}

/* ============================================
   MOBILE BASE STYLES (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {
    /* Logo and hamburger menu side by side */
    .navbar > .container > div:first-child {
        display: flex !important;
        align-items: center !important;
        gap: var(--spacing-2) !important;
        flex-wrap: nowrap !important;
    }
    
    #mobile-menu-toggle {
        display: block !important;
        margin-left: auto !important;
    }
    
    /* Prevent horizontal scroll */
    body, html {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Fix any elements that might cause overflow */
    .container {
        padding-left: var(--spacing-3) !important;
        padding-right: var(--spacing-3) !important;
        max-width: 100% !important;
    }
    /* Ensure all grid layouts are single column */
    #prompt-detail-content {
        display: block !important;
        grid-template-columns: 1fr !important;
        gap: var(--spacing-4) !important;
    }
    
    #prompt-detail-content > div:first-child {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin-bottom: var(--spacing-4) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    #prompt-detail-content > aside,
    #prompt-detail-content > .prompt-detail-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin-bottom: var(--spacing-4) !important;
        position: static !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Series header mobile fix */
    .series-header-compact {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
    }
    
    .series-header-compact > div:first-child {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto var(--spacing-4) !important;
    }
    
    /* Series items grid mobile */
    .series-items-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--spacing-2) !important;
    }
    
    /* Related series grid mobile */
    .prompt-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--spacing-3) !important;
    }
    
    /* Ensure no horizontal overflow */
    body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }
    
    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 var(--spacing-3) !important;
        box-sizing: border-box !important;
    }
    
    /* Fix all cards */
    .card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Fix navbar logo on mobile - Tech AI */
    .logo {
        font-size: var(--text-lg) !important;
    }
    
    .logo-text {
        font-size: var(--text-lg) !important;
    }
    
    /* Mobile menu button - Tech AI Styled */
    #mobile-menu-toggle {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: rgba(147, 51, 234, 0.15) !important;
        border: 2px solid rgba(147, 51, 234, 0.4) !important;
        box-shadow: 0 0 15px rgba(147, 51, 234, 0.2) !important;
    }
    
    #mobile-menu-toggle:hover {
        background: rgba(147, 51, 234, 0.25) !important;
        border-color: rgba(147, 51, 234, 0.6) !important;
        box-shadow: 0 0 25px rgba(147, 51, 234, 0.4) !important;
        transform: scale(1.05) !important;
    }
    
    /* Mobile menu - Bottom Sheet stili */
    #mobile-menu {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        width: 100% !important;
        margin: 0 !important;
        background: #FFFFFF !important;
        border-radius: 20px 20px 0 0 !important;
        border: 1px solid #E2E8F0 !important;
        border-bottom: none !important;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.12) !important;
        z-index: 999 !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    #mobile-menu.open {
        transform: translateY(0) !important;
    }
    
    /* Mobile menu overlay */
    body.mobile-menu-open::after {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.4);
        z-index: 998;
        animation: fadeIn 0.2s ease;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    
    body.mobile-menu-open {
        overflow: hidden;
    }
    
    /* Bottom sheet handle */
    #mobile-menu::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        background: #CBD5E1;
        border-radius: 2px;
        margin: 12px auto 16px;
    }
    
    /* Admin Panel Mobile Fixes */
    .admin-overlay {
        display: none !important;
    }
    
    .admin-overlay.active {
        display: block !important;
    }
    
    .admin-sidebar {
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease-out !important;
    }
    
    .admin-sidebar.open {
        transform: translateX(0) !important;
        z-index: 1001 !important;
    }
    
    .admin-menu-toggle {
        display: block !important;
        z-index: 1002 !important;
    }
    
    .admin-main {
        margin-left: 0 !important;
    }
    
    /* Prompt Detail Mobile Layout */
    .prompt-header-compact {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        gap: var(--spacing-4) !important;
    }
    
    .prompt-header-compact > div:first-child {
        width: 100% !important;
        max-width: 200px !important;
        height: 200px !important;
        margin: 0 auto var(--spacing-4) !important;
    }
    
    .prompt-header-compact > div:nth-child(2) {
        width: 100% !important;
        margin-bottom: var(--spacing-4) !important;
        padding: 0 !important;
    }
    
    .prompt-header-compact > div:nth-child(3) {
        width: 100% !important;
        min-width: auto !important;
        padding: 0 !important;
    }
    
    /* Fix orange border on mobile - make it less prominent */
    .card.premium {
        border-left-width: 2px !important;
        border-left-color: rgba(245, 158, 11, 0.5) !important;
    }
    
    /* Fix breadcrumb overflow */
    nav[style*="margin"] {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
        padding-bottom: var(--spacing-1) !important;
    }
    
    nav[style*="margin"] span,
    nav[style*="margin"] a {
        display: inline-block !important;
        white-space: nowrap !important;
    }
    
    /* Prompt detail content sections */
    .prompt-description,
    .prompt-text {
        max-width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    /* Prompt Cards - Mobile Optimization - Compact grid (Senin İçin Öneriler kartları gibi) */
    .prompt-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
        gap: var(--spacing-3) !important;
        padding: 0 var(--spacing-2) !important;
    }
    
    .prompt-card {
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: var(--radius-md) !important;
        border-width: 1px !important;
    }
    
    .prompt-thumbnail {
        border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
        padding-top: 120% !important; /* Kompakt tasarım - "Senin İçin Öneriler" kartları gibi */
    }
    
    .prompt-content {
        padding: var(--spacing-2) !important;
    }
    
    .prompt-title {
        font-size: 12px !important;
        line-height: 1.3 !important;
        margin-bottom: var(--spacing-1) !important;
        -webkit-line-clamp: 2 !important;
    }
    
    .prompt-description {
        display: none !important; /* Hide on mobile for compact view */
    }
    
    .prompt-category {
        font-size: 9px !important;
        padding: 2px 6px !important;
        margin-bottom: var(--spacing-1) !important;
    }
    
    .prompt-stats {
        font-size: 10px !important;
        gap: var(--spacing-2) !important;
        padding: var(--spacing-1) !important;
    }
    
    .stat {
        font-size: 10px !important;
        gap: 2px !important;
    }
    
    /* Hide some badges on mobile */
    .prompt-badge-stat {
        font-size: 8px !important;
        padding: 2px 5px !important;
        max-width: 100px !important;
    }
    
    .premium-badge {
        font-size: 9px !important;
        padding: 4px 8px !important;
    }
    
    /* Hero Section - Mobile - Enhanced AI Tech */
    .hero-section {
        padding: var(--spacing-6) var(--spacing-3) !important;
        text-align: center !important;
    }
    
    .hero-title-modern {
        font-size: clamp(2rem, 8vw, 3rem) !important;
        line-height: 1.2 !important;
        margin-bottom: var(--spacing-4) !important;
        background: linear-gradient(135deg, #8B5CF6 0%, #3B82F6 50%, #EC4899 100%) !important;
        background-size: 200% 200% !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
    }
    
    .hero-subtitle-modern {
        font-size: clamp(1rem, 4vw, 1.25rem) !important;
        margin-bottom: var(--spacing-6) !important;
        color: rgba(255, 255, 255, 0.9) !important;
    }
    
    /* Bento Grid - Mobile Optimized */
    .bento-grid {
        gap: var(--spacing-3) !important;
    }
    
    .bento-item {
        padding: var(--spacing-4) !important;
    }
    
    .bento-value {
        font-size: clamp(1.5rem, 6vw, 2.5rem) !important;
    }
    
    .bento-label {
        font-size: var(--text-sm) !important;
    }
    
    .bento-description {
        font-size: var(--text-xs) !important;
    }
    
    /* CTA Buttons - Mobile */
    .hero-actions-modern {
        flex-direction: column !important;
        gap: var(--spacing-3) !important;
    }
    
    .hero-actions-modern .btn {
        width: 100% !important;
        max-width: 100% !important;
        padding: var(--spacing-3) var(--spacing-6) !important;
        font-size: var(--text-base) !important;
    }
    
    .stats-grid {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-3) !important;
        margin-bottom: var(--spacing-4) !important;
    }
    
    .stat-card {
        padding: var(--spacing-4) !important;
    }
    
    /* Bento Grid - Mobile Single Column */
    .bento-grid {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-3) !important;
    }
    
    .bento-item {
        min-height: auto !important;
    }
    
    /* Forms - Mobile Touch Friendly */
    .form-input,
    .form-textarea,
    select.form-input {
        font-size: 16px !important; /* Prevents zoom on iOS */
        padding: var(--spacing-3) var(--spacing-4) !important;
        min-height: 44px !important;
        border-radius: var(--radius-md) !important;
    }
    
    .form-textarea {
        min-height: 120px !important;
    }
    
    /* Buttons - Mobile Touch Targets - Enhanced */
    .btn,
    button,
    a.btn {
        min-height: 48px !important;
        min-width: 48px !important;
        padding: var(--spacing-3) var(--spacing-5) !important;
        font-size: var(--text-base) !important;
        border-radius: var(--radius-lg) !important;
        touch-action: manipulation !important;
        font-weight: var(--font-semibold) !important;
        letter-spacing: 0.3px !important;
        box-shadow: 0 4px 12px rgba(147, 51, 234, 0.3) !important;
        transition: all 0.2s ease !important;
    }
    
    .btn-primary {
        background: linear-gradient(135deg, #9333EA 0%, #7C3AED 50%, #3B82F6 100%) !important;
        background-size: 200% 200% !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        box-shadow: 0 4px 15px rgba(147, 51, 234, 0.4),
                    0 0 20px rgba(147, 51, 234, 0.2) !important;
    }
    
    .btn-primary:active {
        transform: scale(0.95) !important;
        box-shadow: 0 2px 8px rgba(147, 51, 234, 0.5) !important;
    }
    
    .btn-outline {
        border-width: 2px !important;
        box-shadow: 0 0 15px rgba(147, 51, 234, 0.2) !important;
    }
    
    .btn-outline:active {
        transform: scale(0.95) !important;
        background: rgba(147, 51, 234, 0.1) !important;
    }
    
    .btn-primary,
    .btn-outline {
        width: 100% !important;
        max-width: 100% !important;
        justify-content: center !important;
    }
    
    /* Social Share Buttons - Mobile Stack */
    .social-share-buttons {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: var(--spacing-2) !important;
        width: 100% !important;
    }
    
    .social-share-buttons .btn {
        flex: 1 1 auto !important;
        min-width: 60px !important;
        max-width: none !important;
    }
    
    /* Comments Section - Mobile */
    .comment-form {
        padding: var(--spacing-4) !important;
    }
    
    .comment-form textarea {
        min-height: 100px !important;
        font-size: 16px !important;
    }
    
    .comments-list {
        gap: var(--spacing-3) !important;
    }
    
    .comment-item {
        padding: var(--spacing-3) !important;
    }
    
    /* Rating Stars - Mobile Larger */
    .rating-star {
        font-size: var(--text-2xl) !important;
        padding: var(--spacing-2) !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }
    
    /* Tags - Mobile Wrap */
    .tags-list {
        flex-wrap: wrap !important;
        gap: var(--spacing-2) !important;
    }
    
    .tag {
        font-size: var(--text-xs) !important;
        padding: var(--spacing-1) var(--spacing-3) !important;
        min-height: 32px !important;
    }
    
    /* Related Prompts - Mobile Single Column */
    .related-prompts {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-3) !important;
    }
    
    /* Activity Feed - Mobile */
    .activity-feed-compact {
        padding: var(--spacing-4) !important;
    }
    
    #activity-list-compact {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-2) !important;
    }
    
    /* Filters - Mobile Full Width */
    #filters-section {
        margin: var(--spacing-4) 0 !important;
    }
    
    #filters-section > div {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-3) !important;
    }
    
    #filters-section select {
        width: 100% !important;
        font-size: 16px !important;
    }
    
    /* Pagination - Mobile */
    .pagination {
        flex-wrap: wrap !important;
        gap: var(--spacing-2) !important;
        justify-content: center !important;
    }
    
    .pagination .btn {
        min-width: 44px !important;
        padding: var(--spacing-2) var(--spacing-3) !important;
    }
    
    /* Breadcrumb - Mobile */
    nav[style*="breadcrumb"],
    .breadcrumb {
        font-size: var(--text-sm) !important;
        flex-wrap: wrap !important;
        gap: var(--spacing-1) !important;
    }
    
    /* Cards - Mobile Padding */
    .card {
        padding: var(--spacing-4) !important;
        margin-bottom: var(--spacing-4) !important;
    }
    
    /* Tables - Mobile Scroll */
    table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Code Blocks - Mobile Scroll */
    pre,
    code {
        font-size: var(--text-xs) !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        word-break: break-word !important;
    }
    
    #prompt-text-pre {
        max-height: 300px !important;
        font-size: var(--text-xs) !important;
        padding: var(--spacing-3) !important;
    }
    
    /* Adcash Native Ad - Mobile Responsive */
    #awn-z10829922 {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 250px !important;
    }
    
    #awn-z10829922 > div {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Footer - Mobile */
    footer {
        padding: var(--spacing-6) var(--spacing-3) !important;
    }
    
    footer > div {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-4) !important;
        text-align: center !important;
    }
}

/* ============================================
   SMALL MOBILE (max-width: 480px)
   ============================================ */
@media (max-width: 480px) {
    .container {
        padding: 0 var(--spacing-2) !important;
    }
    
    .hero-title {
        font-size: var(--text-2xl) !important;
    }
    
    .prompt-title {
        font-size: var(--text-base) !important;
    }
    
    .btn {
        font-size: var(--text-sm) !important;
        padding: var(--spacing-2) var(--spacing-3) !important;
    }
    
    .card {
        padding: var(--spacing-3) !important;
    }
    
    h1 {
        font-size: var(--text-2xl) !important;
    }
    
    h2 {
        font-size: var(--text-xl) !important;
    }
    
    h3 {
        font-size: var(--text-lg) !important;
    }
}

/* ============================================
   MOBILE HOVER DISABLE (Touch Devices)
   ============================================ */
@media (hover: none) and (pointer: coarse) {
    /* Disable hover effects on touch devices */
    .prompt-card:hover {
        transform: none !important;
    }
    
    .prompt-card:hover .thumbnail-overlay {
        opacity: 0 !important;
    }
    
    .prompt-card:hover .prompt-thumbnail img {
        transform: none !important;
    }
    
    .prompt-card:hover .neon-glow {
        opacity: 0 !important;
    }
    
    /* Show overlay on tap instead */
    .prompt-card:active .thumbnail-overlay {
        opacity: 0.5 !important;
    }
    
    /* Touch-friendly buttons */
    .btn:active,
    button:active {
        transform: scale(0.98) !important;
        opacity: 0.9 !important;
    }
}