/**
 * Mobile Optimization CSS
 * Comprehensive mobile-first responsive design fixes
 *
 * Focus Areas:
 * - Touch target sizing (minimum 48x48px per WCAG 2.1 AA)
 * - Responsive typography (minimum 16px body text)
 * - Mobile navigation
 * - Gesture support
 * - Performance optimizations
 *
 * Breakpoints:
 * - Extra small: 320px - 479px
 * - Small/Mobile: 480px - 767px
 * - Tablet: 768px - 1023px
 * - Desktop: 1024px+
 */

/* ============================================
   TOUCH TARGET SIZING
   All interactive elements must be at least 48x48px (WCAG 2.1 AA)
   ============================================ */

@media (pointer: coarse) {
    /* Buttons and interactive elements */
    button,
    .btn,
    .icon-btn,
    a[role="button"],
    [role="button"],
    input[type="submit"],
    input[type="button"],
    input[type="reset"] {
        min-height: 48px !important;
        min-width: 48px !important;
        padding: 0.75rem 1.5rem;
        touch-action: manipulation;
    }

    /* Navigation links */
    .nav-link,
    .breadcrumb-item,
    .tab {
        min-height: 48px;
        padding: 0.75rem 1rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        touch-action: manipulation;
    }

    /* Form inputs */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    select,
    textarea {
        min-height: 48px;
        font-size: 16px;
        padding: 0.75rem 1rem;
        touch-action: manipulation;
    }

    /* Checkboxes and radios */
    input[type="checkbox"],
    input[type="radio"] {
        min-width: 28px;
        min-height: 28px;
        touch-action: manipulation;
    }

    /* Custom checkboxes/radios */
    .custom-checkbox .checkmark,
    .custom-radio .checkmark {
        width: 28px;
        height: 28px;
    }

    /* Card click targets */
    .card,
    .deity-card,
    .mythology-card,
    .universal-grid-card {
        padding: 1.25rem;
        touch-action: manipulation;
    }
}

/* ============================================
   MOBILE VIEWPORT OPTIMIZATIONS
   ============================================ */

/* Prevent horizontal scroll */
html,
body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

/* Ensure all containers respect viewport width */
* {
    max-width: 100%;
}

img,
video,
iframe,
svg {
    max-width: 100%;
    height: auto;
}

/* ============================================
   MOBILE TYPOGRAPHY
   ============================================ */

@media (max-width: 768px) {
    /* Base font size - prevents iOS zoom */
    html {
        font-size: 16px;
    }

    /* Heading scale */
    h1 {
        font-size: 2rem;
        line-height: 1.2;
    }

    h2 {
        font-size: 1.75rem;
        line-height: 1.3;
    }

    h3 {
        font-size: 1.5rem;
        line-height: 1.4;
    }

    h4 {
        font-size: 1.25rem;
        line-height: 1.4;
    }

    h5 {
        font-size: 1.1rem;
        line-height: 1.5;
    }

    h6 {
        font-size: 1rem;
        line-height: 1.5;
    }

    /* Paragraph spacing */
    p {
        font-size: 1rem;
        line-height: 1.6;
        margin-bottom: 1rem;
    }

    /* Readable line lengths */
    p,
    li,
    blockquote {
        max-width: 65ch;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.25rem;
    }
}

/* ============================================
   MOBILE NAVIGATION
   ============================================ */

@media (max-width: 768px) {
    /* Header adjustments */
    .site-header {
        position: sticky;
        top: 0;
        z-index: 9999;
    }

    .header-container {
        padding: 0.75rem 1rem;
        gap: 1rem;
    }

    /* Mobile menu */
    .main-nav {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 0.5rem;
    }

    .nav-link {
        flex: 1 1 auto;
        min-width: fit-content;
        text-align: center;
    }

    /* Breadcrumb improvements */
    #breadcrumb-nav {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }

    .breadcrumb {
        gap: 0.25rem;
    }

    .breadcrumb-separator {
        margin: 0 0.25rem;
    }
}

/* Hamburger menu (if needed) */
@media (max-width: 480px) {
    .mobile-menu-toggle {
        display: block;
        background: none;
        border: none;
        color: var(--color-text-primary);
        font-size: 1.5rem;
        padding: 0.5rem;
        cursor: pointer;
    }

    .main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--color-surface);
        border-top: 1px solid var(--color-border);
        padding: 1rem;
        flex-direction: column;
    }

    .main-nav.open {
        display: flex;
    }

    .nav-link {
        width: 100%;
        justify-content: flex-start;
        padding: 0.75rem 1rem;
    }
}

/* ============================================
   MOBILE GRIDS AND LAYOUTS
   ============================================ */

@media (max-width: 768px) {
    /* Grid adjustments */
    .grid,
    .deity-grid,
    .mythology-grid,
    .universal-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        padding: 0.75rem;
    }

    /* Card adjustments */
    .card,
    .deity-card,
    .mythology-card,
    .universal-grid-card {
        padding: 1rem;
        border-radius: 12px;
    }

    /* Stats grid */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
}

/* Mobile Portrait: 2 columns (375px-480px viewport) */
@media (max-width: 480px) {
    .grid,
    .deity-grid,
    .mythology-grid,
    .universal-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
        padding: 0.5rem;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Landing page specific - 2 columns for touch-friendly browsing */
    .landing-category-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px;
    }

    .landing-features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px;
    }

    /* Compact cards for 2-column mobile portrait */
    .card,
    .deity-card,
    .mythology-card,
    .universal-grid-card {
        padding: 0.75rem;
    }
}

/* Very small screens (below 360px): still 2 columns but tighter */
@media (max-width: 360px) {
    .grid,
    .deity-grid,
    .mythology-grid,
    .universal-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.375rem;
        padding: 0.375rem;
    }

    .landing-category-grid,
    .landing-features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px;
    }
}

/* ============================================
   MOBILE FORMS
   ============================================ */

@media (max-width: 768px) {
    /* Form layout */
    form {
        padding: 1rem;
    }

    .form-group {
        margin-bottom: 1.25rem;
    }

    /* Labels */
    label {
        font-size: 1rem;
        margin-bottom: 0.5rem;
        display: block;
    }

    /* Inputs */
    input,
    select,
    textarea {
        width: 100%;
        font-size: 16px !important; /* Prevent iOS zoom */
        border-radius: 8px;
    }

    /* Buttons */
    .btn {
        width: 100%;
        justify-content: center;
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
    }

    .btn-group {
        flex-direction: column;
        gap: 0.75rem;
    }

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

/* ============================================
   MOBILE MODALS AND OVERLAYS
   ============================================ */

@media (max-width: 768px) {
    .modal,
    [role="dialog"] {
        padding: 1rem;
    }

    .modal-content {
        width: calc(100vw - 2rem);
        max-width: 100%;
        margin: 0 auto;
        max-height: 90vh;
        overflow-y: auto;
    }

    .modal-header {
        padding: 1rem;
    }

    .modal-body {
        padding: 1rem;
        max-height: 70vh;
        overflow-y: auto;
    }

    .modal-footer {
        padding: 1rem;
        flex-direction: column-reverse;
        gap: 0.75rem;
    }

    .modal-footer .btn {
        width: 100%;
    }
}

/* ============================================
   MOBILE TABLES
   ============================================ */

@media (max-width: 768px) {
    /* Responsive table */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Stack table on very small screens */
    @media (max-width: 480px) {
        table,
        thead,
        tbody,
        th,
        td,
        tr {
            display: block;
        }

        thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

        tr {
            border: 1px solid var(--color-border);
            margin-bottom: 1rem;
            border-radius: 8px;
            padding: 0.75rem;
        }

        td {
            border: none;
            position: relative;
            padding-left: 50%;
            text-align: left;
        }

        td:before {
            position: absolute;
            left: 0.75rem;
            width: 45%;
            padding-right: 0.5rem;
            white-space: nowrap;
            font-weight: 600;
            content: attr(data-label);
        }
    }
}

/* ============================================
   MOBILE TOASTS AND NOTIFICATIONS
   ============================================ */

@media (max-width: 768px) {
    .toast-container {
        top: auto;
        bottom: 1rem;
        left: 1rem;
        right: 1rem;
        max-width: none;
    }

    .toast {
        min-width: 0;
        max-width: none;
        width: 100%;
    }

    /* Slide from bottom instead of right */
    @keyframes toast-slide-in {
        from {
            transform: translateY(calc(100% + 1rem));
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    @keyframes toast-slide-out {
        from {
            transform: translateY(0);
            opacity: 1;
        }
        to {
            transform: translateY(calc(100% + 1rem));
            opacity: 0;
        }
    }
}

/* ============================================
   MOBILE SPACING AND CONTAINERS
   ============================================ */

@media (max-width: 768px) {
    /* Container padding */
    .container,
    .view-container,
    main {
        padding: 1rem;
    }

    /* Section spacing */
    .section {
        padding: 1.5rem 1rem;
        margin-bottom: 1.5rem;
    }

    /* Hero section */
    .hero-section {
        padding: 2rem 1rem;
    }

    /* Intro/feature sections */
    .intro,
    .detail-header,
    .detail-section {
        padding: 1.25rem;
        margin-bottom: 1rem;
    }
}

/* ============================================
   MOBILE PERFORMANCE OPTIMIZATIONS
   ============================================ */

/* Disable hover effects on touch devices */
@media (hover: none) {
    .card:hover,
    .btn:hover,
    .nav-link:hover,
    .mythology-card:hover,
    .deity-card:hover {
        transform: none;
    }

    /* Keep focus/active states */
    .card:active,
    .btn:active,
    .mythology-card:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }
}

@media (max-width: 768px) {
    /* Limit transition duration for performance */
    button,
    .btn,
    a,
    .card,
    .mythology-card,
    .deity-card,
    .nav-link {
        transition-duration: 0.15s;
    }

    /* Disable heavy effects */
    .card::before,
    .mythology-card::before {
        display: none;
    }

    /* Simplify shadows */
    .card,
    .mythology-card,
    .btn {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    /* Disable backdrop blur on older mobile devices */
    @supports not (backdrop-filter: blur(10px)) {
        .glass-card,
        .site-header,
        [style*="backdrop-filter"] {
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            background: var(--color-surface);
        }
    }
}

/* ============================================
   MOBILE ACCESSIBILITY
   ============================================ */

/* Larger tap targets for links */
@media (max-width: 768px) {
    a {
        padding: 0.25rem 0;
        display: inline-block;
    }

    /* Better focus indicators */
    *:focus-visible {
        outline: 3px solid var(--color-primary);
        outline-offset: 3px;
    }

    /* Ensure sufficient contrast */
    ::selection {
        background: var(--color-primary);
        color: white;
    }
}

/* ============================================
   MOBILE LANDSCAPE OPTIMIZATIONS
   4-column grid layout for horizontal mobile viewing
   Target: 667px-896px width with reduced height (< 500px)
   ============================================ */

@media (max-width: 896px) and (orientation: landscape) {
    /* Reduce header height */
    .site-header {
        padding: 0.5rem 1rem;
    }

    /* Optimize vertical space */
    .hero-section {
        padding: 1rem 1rem;
    }

    h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.25rem;
    }

    h3 {
        font-size: 1.1rem;
    }

    /* Section spacing optimizations */
    .section,
    .intro,
    .detail-section {
        padding: 0.75rem 1rem;
        margin-bottom: 0.75rem;
    }

    /* Universal Grid - 4 columns in landscape */
    .universal-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 0.75rem;
        padding: 0.5rem;
    }

    /* Main grids - 4 columns in landscape */
    .grid,
    .deity-grid,
    .mythology-grid,
    .entity-grid,
    .search-results-grid,
    .browse-grid,
    .results-grid,
    .category-grid,
    .entity-types-grid,
    .stats-grid,
    .features-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 0.75rem;
    }

    /* Home view mythology grid */
    .home-view .mythology-grid,
    .mythology-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 0.75rem;
    }

    /* Landing page grids */
    .landing-category-grid,
    .landing-features-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 0.75rem;
    }

    /* Entity results grid - 4 columns */
    .entity-results-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 0.75rem;
    }

    /* Names grid for smaller items */
    .names-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 0.5rem;
    }

    /* Compact card styling for landscape */
    .card,
    .deity-card,
    .mythology-card,
    .universal-grid-card,
    .entity-card,
    .feature-card,
    .stat-card,
    .grid-card,
    .landing-category-card {
        padding: 0.75rem;
        border-radius: 10px;
    }

    /* Compact card icons */
    .card-icon,
    .deity-icon,
    .mythology-card-icon,
    .grid-card-icon,
    .feature-icon,
    .landing-category-icon {
        font-size: 1.75rem;
        margin-bottom: 0.5rem;
    }

    /* Compact card titles */
    .card h3,
    .card-title,
    .deity-card h3,
    .mythology-card-title,
    .grid-card-title,
    .landing-category-name {
        font-size: 0.9rem;
        margin-bottom: 0.25rem;
    }

    /* Compact card descriptions */
    .card p,
    .card-subtitle,
    .mythology-card-description,
    .grid-card-description,
    .landing-category-description {
        font-size: 0.75rem;
        line-height: 1.4;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Compact badges and tags */
    .tag,
    .badge,
    .entity-type-badge,
    .mythology-badge {
        font-size: 0.65rem;
        padding: 0.15rem 0.4rem;
    }

    /* Reduce vertical height of cards */
    .universal-grid-card,
    .mythology-card,
    .deity-card {
        min-height: auto;
    }

    /* Hide less important elements in landscape */
    .card .description,
    .grid-card-footer,
    .card .attributes,
    .mythology-card-arrow {
        display: none;
    }

    /* Container adjustments */
    main,
    .container,
    .view-container {
        padding: 0.5rem;
    }

    /* Search container compact */
    .search-container {
        margin: 0.75rem auto;
        padding: 0 0.5rem;
    }

    #searchBox {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
}

/* Extra wide landscape phones (e.g., newer iPhones in landscape) */
@media (min-width: 667px) and (max-width: 932px) and (max-height: 500px) and (orientation: landscape) {
    /* Ensure 4 columns with better sizing */
    .universal-grid,
    .grid,
    .deity-grid,
    .mythology-grid,
    .entity-grid,
    .search-results-grid,
    .browse-grid {
        grid-template-columns: repeat(4, minmax(140px, 1fr)) !important;
        gap: 0.75rem;
    }

    /* Card minimum width for readability */
    .universal-grid-card,
    .mythology-card,
    .deity-card,
    .card {
        min-width: 140px;
    }
}

/* ============================================
   SAFE AREA INSETS (iPhone X+)
   ============================================ */

@supports (padding: max(0px)) {
    .site-header {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }

    .container,
    .view-container,
    main {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }

    .toast-container {
        bottom: max(1rem, env(safe-area-inset-bottom));
        left: max(1rem, env(safe-area-inset-left));
        right: max(1rem, env(safe-area-inset-right));
    }
}

/* ============================================
   LANDING PAGE COMPACT GRID SIZING
   Ensures proper 4+ columns on desktop, 2 on tablet, 1 on mobile
   ============================================ */

/* Desktop compact grid - 4+ columns */
@media (min-width: 1024px) {
    .landing-category-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
        gap: 16px !important;
    }

    .landing-category-card {
        min-height: 150px !important;
        padding: 20px !important;
        border-radius: 12px !important;
    }

    .landing-category-icon {
        width: 2.25rem !important;
        height: 2.25rem !important;
        margin-bottom: 12px !important;
    }

    .landing-category-name {
        font-size: 1.125rem !important;
        margin-bottom: 6px !important;
    }

    .landing-category-description {
        font-size: 0.875rem !important;
        line-height: 1.5 !important;
    }
}

/* Large desktop - ensure 4 columns */
@media (min-width: 1200px) {
    .landing-category-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 20px !important;
        max-width: 1100px;
        margin: 0 auto;
    }
}

/* Tablet - 2 columns */
@media (min-width: 768px) and (max-width: 1023px) {
    .landing-category-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }

    .landing-category-card {
        min-height: 160px !important;
        padding: 24px !important;
    }
}

/* ============================================
   LANDING PAGE MOBILE OPTIMIZATIONS
   ============================================ */

@media (max-width: 767px) {
    /* Ensure landing page cards have proper touch targets */
    .landing-category-card {
        min-height: 48px;
        touch-action: manipulation;
    }

    /* Ensure buttons meet WCAG touch target requirements */
    .landing-btn,
    .landing-btn-primary,
    .landing-btn-secondary {
        min-height: 48px;
        min-width: 48px;
        touch-action: manipulation;
    }

    /* Proper spacing for mobile */
    .landing-page-view {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }

    /* Ensure readable text on mobile */
    .landing-category-description,
    .landing-feature-card p {
        font-size: 1rem;
        line-height: 1.6;
    }
}

/* Extra small screens - 320px devices */
@media (max-width: 359px) {
    .landing-page-view {
        padding-left: 8px;
        padding-right: 8px;
    }

    .landing-hero-section {
        padding: 24px 12px;
    }

    .landing-category-card {
        padding: 16px;
    }

    .landing-btn {
        padding: 12px 20px;
        font-size: 0.9375rem; /* 15px - slightly smaller but still readable */
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    /* Hide navigation and interactive elements */
    .site-header,
    .main-nav,
    .header-actions,
    .btn,
    .toast-container,
    .modal,
    #breadcrumb-nav {
        display: none !important;
    }

    /* Optimize for print */
    * {
        background: white !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a {
        text-decoration: underline;
    }

    /* Show URLs for links */
    a[href]:after {
        content: " (" attr(href) ")";
    }

    /* Page breaks */
    h1, h2, h3 {
        page-break-after: avoid;
    }

    .card,
    .deity-card,
    .mythology-card {
        page-break-inside: avoid;
    }
}