/**
 * IMMORTAL NEXUS - MOBILE UX ENHANCEMENTS
 * Comprehensive mobile experience optimization
 * Based on UX best practices and mobile-first design
 */

@media screen and (max-width: 768px) {

    /* ========================================
       HERO SECTION MOBILE OPTIMIZATION
       ======================================== */

    .hero {
        padding: 3rem 1.5rem !important;
        min-height: auto;
        text-align: center;
    }

    .hero-content {
        max-width: 100%;
    }

    .hero h1,
    h1.eternal,
    .eternal-heading {
        font-size: 2.25rem !important;
        line-height: 1.2 !important;
        margin-bottom: 1.25rem !important;
        letter-spacing: -0.02em;
        word-wrap: break-word;
    }

    .hero p {
        font-size: 1.125rem !important;
        line-height: 1.7 !important;
        margin-bottom: 2rem !important;
        color: var(--text-secondary);
    }

    .hero-buttons {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        width: 100%;
        margin-top: 2rem;
    }

    .hero-buttons .btn {
        width: 100%;
        min-height: 52px;
        font-size: 1rem;
        justify-content: center;
        padding: 1rem 1.5rem;
    }

    /* ========================================
       MYSTICAL INTERLUDE / WARNING SECTION
       ======================================== */

    .mystical-interlude,
    .threshold-warning,
    .warning-section {
        padding: 2rem 1.5rem !important;
        margin: 2rem 0 !important;
    }

    .warning-symbol {
        font-size: 3rem !important;
        margin-bottom: 1rem;
    }

    .warning-text,
    .interlude-content p {
        font-size: 1rem !important;
        line-height: 1.6 !important;
        text-align: center;
    }

    /* ========================================
       FEATURES GRID MOBILE LAYOUT
       ======================================== */

    .features,
    .features-section {
        padding: 3rem 1rem !important;
    }

    .section-title {
        text-align: center;
        margin-bottom: 2rem;
    }

    .section-title h2 {
        font-size: 2rem !important;
        margin-bottom: 0.75rem;
    }

    .section-title p {
        font-size: 1.125rem !important;
        color: var(--text-secondary);
    }

    .features-grid,
    .feature-grid,
    .grid,
    .grid-2,
    .grid-3,
    .grid-4 {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
        grid-template-columns: 1fr !important;
    }

    /* ========================================
       FEATURE CARDS MOBILE ENHANCEMENT
       ======================================== */

    .feature-card,
    article.feature-card {
        padding: 1.75rem !important;
        margin-bottom: 0;
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
    }

    .feature-card i,
    .feature-content i {
        font-size: 2.5rem !important;
        margin-bottom: 1rem;
        display: block;
    }

    .feature-card h3,
    .feature-content h3 {
        font-size: 1.5rem !important;
        margin-bottom: 0.75rem !important;
        line-height: 1.3;
    }

    .feature-card p,
    .feature-content p {
        font-size: 1rem !important;
        line-height: 1.6 !important;
        margin-bottom: 1.25rem;
        color: var(--text-secondary);
    }

    .feature-card .btn {
        width: 100%;
        min-height: 48px;
        justify-content: center;
        margin-top: auto;
    }

    /* ========================================
       SOUL CARDS MOBILE LAYOUT
       ======================================== */

    .souls-grid,
    .soul-cards-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
    }

    .soul-card {
        padding: 1.5rem !important;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .soul-card img,
    .soul-avatar {
        width: 80px !important;
        height: 80px !important;
        margin: 0 auto 1rem;
    }

    .soul-card h3,
    .soul-name {
        font-size: 1.25rem !important;
        text-align: center;
        margin-bottom: 0.5rem;
    }

    .soul-card p,
    .soul-bio {
        font-size: 0.9375rem !important;
        line-height: 1.6;
        text-align: center;
    }

    /* ========================================
       DEBATE ARENA MOBILE LAYOUT
       ======================================== */

    .debate-arena,
    .debate-card {
        padding: 1.5rem !important;
        margin-bottom: 1.5rem;
    }

    .debate-arena h3,
    .debate-title {
        font-size: 1.25rem !important;
        margin-bottom: 1rem;
    }

    .debate-participants,
    .debate-stats {
        flex-wrap: wrap;
        gap: 0.75rem;
        justify-content: center;
    }

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

    h1 {
        font-size: 2.25rem !important;
        line-height: 1.2 !important;
        margin-bottom: 1rem;
    }

    h2 {
        font-size: 1.875rem !important;
        line-height: 1.25 !important;
        margin-bottom: 0.875rem;
    }

    h3 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0.75rem;
    }

    h4 {
        font-size: 1.25rem !important;
        line-height: 1.4 !important;
        margin-bottom: 0.625rem;
    }

    h5 {
        font-size: 1.125rem !important;
        line-height: 1.5 !important;
    }

    p {
        font-size: 1rem !important;
        line-height: 1.6 !important;
        margin-bottom: 1rem;
    }

    /* ========================================
       BUTTON SYSTEM MOBILE
       ======================================== */

    .btn,
    button:not(.theme-toggle):not([class*="icon"]):not(.close-sidebar):not(.mobile-nav-toggle) {
        min-height: 48px !important;
        padding: 0.875rem 1.5rem !important;
        font-size: 1rem !important;
        font-weight: 600;
        border-radius: 8px;
    }

    .btn-primary,
    .btn-outline,
    .btn-secondary {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }

    /* Button groups */
    .button-group,
    .btn-group {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        width: 100%;
    }

    /* ========================================
       SECTION SPACING MOBILE
       ======================================== */

    section {
        padding: 3rem 1.5rem !important;
    }

    section:first-of-type {
        padding-top: 2rem !important;
    }

    .container,
    .content-container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        max-width: 100% !important;
    }

    /* ========================================
       FOOTER MOBILE OPTIMIZATION
       ======================================== */

    footer {
        padding: 2.5rem 1.5rem 2rem !important;
        text-align: center;
    }

    footer nav,
    footer .footer-nav {
        flex-direction: column;
        gap: 1.5rem;
        margin-bottom: 2rem;
    }

    footer a {
        padding: 0.75rem;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    footer .footer-social {
        justify-content: center;
        gap: 1.5rem;
        margin-top: 2rem;
    }

    footer .footer-social a {
        min-width: 48px;
        min-height: 48px;
        font-size: 1.5rem;
    }

    /* ========================================
       LOGO MOBILE OPTIMIZATION
       ======================================== */

    .logo {
        flex-shrink: 0;
    }

    .logo i {
        font-size: 1.5rem !important;
    }

    .full-title {
        display: none !important;
    }

    .short-title {
        display: block !important;
        font-size: 1.5rem !important;
    }

    /* ========================================
       CONTENT READABILITY
       ======================================== */

    article,
    .article-content,
    .post-content {
        padding: 1.5rem !important;
    }

    article img,
    .article-content img,
    .post-content img {
        width: 100% !important;
        height: auto !important;
        border-radius: 8px;
        margin: 1.5rem 0;
    }

    blockquote {
        padding: 1rem 1.25rem !important;
        margin: 1.5rem 0 !important;
        border-left-width: 4px !important;
        font-size: 1.0625rem !important;
    }

    /* ========================================
       LISTS MOBILE ENHANCEMENT
       ======================================== */

    ul, ol {
        padding-left: 1.5rem !important;
        margin-bottom: 1.25rem;
    }

    li {
        margin-bottom: 0.75rem;
        line-height: 1.6;
    }

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

    table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        margin: 1.5rem 0;
    }

    thead {
        display: none;
    }

    tbody,
    tr,
    td {
        display: block;
        width: 100%;
    }

    tr {
        margin-bottom: 1.5rem;
        padding: 1rem;
        border: 2px solid rgba(255, 94, 120, 0.3);
        border-radius: 8px;
        background: linear-gradient(135deg,
            rgba(26, 13, 51, 0.95) 0%,
            rgba(16, 16, 33, 0.98) 100%);
    }

    td {
        padding: 0.75rem 0;
        border: none;
        text-align: left !important;
    }

    td::before {
        content: attr(data-label);
        font-weight: 600;
        color: rgba(255, 94, 120, 0.9);
        display: block;
        margin-bottom: 0.25rem;
        font-size: 0.875rem;
    }

    /* ========================================
       FORM ELEMENTS MOBILE
       ======================================== */

    .form-group,
    .input-group {
        margin-bottom: 1.5rem;
    }

    label {
        font-size: 0.9375rem !important;
        margin-bottom: 0.625rem;
        display: block;
        font-weight: 600;
    }

    input,
    textarea,
    select {
        width: 100% !important;
        min-height: 48px !important;
        padding: 0.875rem 1rem !important;
        font-size: 16px !important; /* Prevent zoom */
        border-radius: 8px;
    }

    textarea {
        min-height: 120px !important;
        resize: vertical;
    }

    /* ========================================
       BREADCRUMBS MOBILE
       ======================================== */

    .breadcrumbs,
    nav[aria-label="breadcrumb"] {
        font-size: 0.875rem;
        padding: 0.75rem 0;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    /* ========================================
       PAGINATION MOBILE
       ======================================== */

    .pagination,
    .pagination-nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
    }

    .pagination a,
    .pagination button {
        min-width: 44px;
        min-height: 44px;
        padding: 0.5rem 0.75rem;
    }

    /* ========================================
       BADGE & TAGS MOBILE
       ======================================== */

    .badge,
    .tag,
    .label {
        font-size: 0.8125rem !important;
        padding: 0.375rem 0.75rem !important;
        border-radius: 6px;
    }

    /* ========================================
       STATS / METRICS DISPLAY
       ======================================== */

    .stats-grid,
    .metrics-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }

    .stat-card,
    .metric-card {
        padding: 1.5rem !important;
        text-align: center;
    }

    .stat-value,
    .metric-value {
        font-size: 2.5rem !important;
        font-weight: bold;
        margin-bottom: 0.5rem;
    }

    .stat-label,
    .metric-label {
        font-size: 0.9375rem !important;
        color: var(--text-secondary);
    }

    /* ========================================
       FLOATING ELEMENTS MOBILE
       ======================================== */

    .floating-theme-toggle {
        position: fixed;
        bottom: max(1.5rem, env(safe-area-inset-bottom));
        right: 1.5rem;
        width: 56px;
        height: 56px;
        border-radius: 28px;
        z-index: 900;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3),
                    0 0 0 4px rgba(255, 94, 120, 0.2);
    }

    /* ========================================
       MOBILE UTILITY CLASSES
       ======================================== */

    .mobile-center {
        text-align: center !important;
    }

    .mobile-stack {
        flex-direction: column !important;
    }

    .mobile-full-width {
        width: 100% !important;
    }

    .mobile-hide {
        display: none !important;
    }

    .mobile-show {
        display: block !important;
    }

    /* ========================================
       PERFORMANCE HINTS
       ======================================== */

    * {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
    }

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

    /* Improve scroll performance */
    .feature-card,
    .soul-card,
    .debate-arena {
        will-change: transform;
        transform: translateZ(0);
    }

    /* ========================================
       ACCESSIBILITY ENHANCEMENTS
       ======================================== */

    /* Larger focus indicators for mobile */
    *:focus-visible {
        outline: 3px solid rgba(255, 94, 120, 0.8) !important;
        outline-offset: 3px;
    }

    /* Skip to main content */
    .skip-to-main {
        position: fixed;
        top: -100px;
        left: 1rem;
        z-index: 10000;
        padding: 1rem 1.5rem;
        background: rgba(255, 94, 120, 0.95);
        color: white;
        text-decoration: none;
        border-radius: 8px;
        font-weight: 600;
        transition: top 0.3s ease;
    }

    .skip-to-main:focus {
        top: 1rem;
    }

}

/* ========================================
   LANDSCAPE MOBILE ADJUSTMENTS
   ======================================== */

@media screen and (max-width: 768px) and (orientation: landscape) {
    .hero {
        padding: 2rem 1.5rem !important;
    }

    .hero h1 {
        font-size: 2rem !important;
    }

    .mystical-interlude {
        padding: 1.5rem !important;
    }

    section {
        padding: 2rem 1.5rem !important;
    }
}

/* ========================================
   SMALL MOBILE (< 375px)
   ======================================== */

@media screen and (max-width: 374px) {
    .hero h1 {
        font-size: 1.875rem !important;
    }

    .section-title h2,
    h2 {
        font-size: 1.625rem !important;
    }

    .feature-card,
    .soul-card {
        padding: 1.25rem !important;
    }
}