/* ============================================
   THEME-SPECIFIC MOBILE OVERRIDES
   World's Collide - All Content Pages
   Include this AFTER mobile-responsive.css
   ============================================ */

/* ============================================
   HERO BRAND - Theme Pages (Anime, Art, Coding, etc.)
   ============================================ */
@media screen and (max-width: 768px) {
    .hero-brand {
        padding: 2rem 0 1rem !important;
    }
    
    .hero-brand img {
        max-width: 200px !important;
        height: auto !important;
    }
}

@media screen and (max-width: 480px) {
    .hero-brand img {
        max-width: 160px !important;
    }
    
    .hero-brand {
        padding: 1.5rem 0 0.75rem !important;
    }
}

@media screen and (max-width: 360px) {
    .hero-brand img {
        max-width: 140px !important;
    }
}

/* ============================================
   CONTENT CARDS - Theme Pages
   ============================================ */
@media screen and (max-width: 992px) {
    .content-card {
        padding: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    .content-card h3 {
        font-size: 1.4rem !important;
    }
}

@media screen and (max-width: 768px) {
    .content-card {
        padding: 1.25rem !important;
        margin: 0 0.5rem 1.5rem !important;
    }
    
    .content-card h3 {
        font-size: 1.25rem !important;
    }
    
    .content-card p {
        font-size: 16px !important;
        line-height: 1.7 !important;
    }
    
    /* Stack grid items on mobile */
    .row > [class*="col-"] {
        margin-bottom: 1rem !important;
    }
}

@media screen and (max-width: 480px) {
    .content-card {
        padding: 1rem !important;
        margin: 0 0.25rem 1rem !important;
    }
    
    .content-card h3 {
        font-size: 1.15rem !important;
    }
}

/* ============================================
   CONTENT IMAGES - Theme Pages
   ============================================ */
@media screen and (max-width: 768px) {
    .content-img,
    .card-img-top,
    .feature-image-wrapper img {
        width: 100% !important;
        height: auto !important;
        max-height: 300px !important;
        object-fit: cover !important;
    }
}

@media screen and (max-width: 480px) {
    .content-img,
    .card-img-top,
    .feature-image-wrapper img {
        max-height: 240px !important;
    }
}

/* ============================================
   THEME GRID LAYOUTS - Mobile Responsive
   ============================================ */
@media screen and (max-width: 992px) {
    /* Switch from 3-col to 2-col on tablets */
    .theme-grid-3col {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }
}

@media screen and (max-width: 768px) {
    /* Single column on mobile */
    .theme-grid-3col,
    .theme-grid-2col {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    
    /* Ensure cards take full width */
    .theme-card {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ============================================
   THEME HEADERS - Mobile Optimized
   ============================================ */
@media screen and (max-width: 768px) {
    .theme-header h2 {
        font-size: 1.5rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .theme-header p {
        font-size: 16px !important;
    }
}

@media screen and (max-width: 480px) {
    .theme-header h2 {
        font-size: 1.35rem !important;
    }
}

/* ============================================
   THEME BUTTONS - Touch-Friendly
   ============================================ */
@media screen and (max-width: 768px) {
    .theme-btn,
    .btn-theme {
        padding: 0.7rem 1.5rem !important;
        font-size: 15px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

@media screen and (max-width: 480px) {
    .theme-btn,
    .btn-theme {
        width: 100% !important;
        max-width: 300px !important;
        padding: 0.65rem 1.2rem !important;
        font-size: 14px !important;
        margin: 0.5rem auto !important;
        display: block !important;
    }
}

/* ============================================
   THEME CARDS - Mobile Spacing
   ============================================ */
@media screen and (max-width: 768px) {
    .theme-card {
        margin-bottom: 1.5rem !important;
        border-radius: 16px !important;
    }
}

/* ============================================
   THEME FOOTERS - Mobile Spacing
   ============================================ */
@media screen and (max-width: 768px) {
    .theme-footer {
        padding: 1.5rem 1rem !important;
        margin-top: 2rem !important;
    }
    
    .theme-footer p {
        font-size: 14px !important;
    }
}

/* ============================================
   THEME NAVIGATION - Mobile Dropdown
   ============================================ */
@media screen and (max-width: 992px) {
    .theme-nav {
        background: rgba(10, 10, 15, 0.98) !important;
        border-radius: 12px !important;
        padding: 1rem !important;
        margin-top: 0.75rem !important;
    }
    
    .theme-nav-link {
        font-size: 16px !important;
        padding: 0.75rem 1rem !important;
    }
}

/* ============================================
   THEME MODALS - Mobile Friendly
   ============================================ */
@media screen and (max-width: 768px) {
    .theme-modal .modal-dialog {
        margin: 1rem !important;
        max-height: calc(100vh - 2rem) !important;
    }
    
    .theme-modal .modal-body {
        padding: 1.5rem !important;
        overflow-y: auto !important;
    }
}

@media screen and (max-width: 480px) {
    .theme-modal .modal-dialog {
        margin: 0.5rem !important;
    }
    
    .theme-modal .modal-body {
        padding: 1.25rem !important;
    }
}

/* ============================================
   THEME TABLES - Mobile Scrollable
   ============================================ */
@media screen and (max-width: 768px) {
    .theme-table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin: 0 -1rem !important;
        padding: 0 1rem !important;
    }
    
    .theme-table {
        min-width: 500px !important;
        font-size: 14px !important;
    }
}

/* ============================================
   THEME FORMS - Mobile Inputs
   ============================================ */
@media screen and (max-width: 768px) {
    .theme-form input,
    .theme-form select,
    .theme-form textarea {
        font-size: 16px !important; /* Prevent iOS zoom */
        padding: 0.75rem !important;
        min-height: 44px !important;
        width: 100% !important;
    }
    
    .theme-form label {
        font-size: 16px !important;
        margin-bottom: 0.5rem !important;
    }
}

/* ============================================
   THEME QUOTES - Mobile Readable
   ============================================ */
@media screen and (max-width: 768px) {
    .theme-quote {
        font-size: 16px !important;
        padding: 1rem !important;
        margin: 1rem 0 !important;
    }
}

/* ============================================
   THEME LISTS - Mobile Spacing
   ============================================ */
@media screen and (max-width: 768px) {
    .theme-list {
        padding-left: 1.5rem !important;
    }
    
    .theme-list li {
        font-size: 16px !important;
        margin-bottom: 0.75rem !important;
        padding-left: 0.5rem !important;
    }
}

/* ============================================
   THEME CAROUSELS - Mobile Slides
   ============================================ */
@media screen and (max-width: 768px) {
    .theme-carousel .carousel-item img {
        height: 350px !important;
        object-fit: cover !important;
    }
    
    .theme-carousel .carousel-caption {
        bottom: 10% !important;
        padding: 1rem !important;
    }
}

@media screen and (max-width: 480px) {
    .theme-carousel .carousel-item img {
        height: 280px !important;
    }
    
    .theme-carousel .carousel-caption {
        bottom: 5% !important;
        padding: 0.75rem !important;
    }
}

/* ============================================
   THEME ACCORDIONS - Mobile Expandable
   ============================================ */
@media screen and (max-width: 768px) {
    .theme-accordion .accordion-button {
        font-size: 16px !important;
        padding: 1rem !important;
    }
    
    .theme-accordion .accordion-body {
        font-size: 16px !important;
        padding: 1rem !important;
    }
}

/* ============================================
   THEME BADGES - Mobile Readable
   ============================================ */
@media screen and (max-width: 768px) {
    .theme-badge {
        font-size: 12px !important;
        padding: 0.35rem 0.65rem !important;
    }
}

/* ============================================
   THEME TIMELINES - Mobile Vertical
   ============================================ */
@media screen and (max-width: 768px) {
    .theme-timeline {
        padding-left: 2rem !important;
    }
    
    .theme-timeline-item {
        margin-bottom: 2rem !important;
        padding-bottom: 1.5rem !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
}

/* ============================================
   THEME STATS - Mobile Grid
   ============================================ */
@media screen and (max-width: 768px) {
    .theme-stats {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }
    
    .theme-stat-item {
        text-align: center !important;
        padding: 1rem !important;
    }
    
    .theme-stat-number {
        font-size: 2rem !important;
    }
}

@media screen and (max-width: 480px) {
    .theme-stats {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
   THEME TABS - Mobile Scrollable
   ============================================ */
@media screen and (max-width: 768px) {
    .theme-tabs {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
        padding: 0.5rem 0 !important;
        scrollbar-width: none !important;
    }
    
    .theme-tabs::-webkit-scrollbar {
        display: none !important;
    }
    
    .theme-tab-item {
        padding: 0.75rem 1.25rem !important;
        font-size: 14px !important;
        flex-shrink: 0 !important;
    }
}

/* ============================================
   THEME CARDS - Horizontal Scroll on Mobile
   ============================================ */
@media screen and (max-width: 768px) {
    .theme-scroll-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 0.5rem 0 !important;
        gap: 1rem !important;
        scrollbar-width: none !important;
    }
    
    .theme-scroll-row::-webkit-scrollbar {
        display: none !important;
    }
    
    .theme-scroll-item {
        flex-shrink: 0 !important;
        width: 280px !important;
        max-width: 280px !important;
    }
}

/* ============================================
   THEME MODAL AVATARS - Mobile Sized
   ============================================ */
@media screen and (max-width: 768px) {
    .theme-avatar {
        width: 80px !important;
        height: 80px !important;
    }
}

@media screen and (max-width: 480px) {
    .theme-avatar {
        width: 70px !important;
        height: 70px !important;
    }
}

/* ============================================
   THEME SOCIAL ICONS - Mobile Touch Targets
   ============================================ */
@media screen and (max-width: 768px) {
    .theme-social-icon {
        font-size: 24px !important;
        padding: 0.5rem !important;
        min-width: 44px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* ============================================
   THEME SEPARATORS - Mobile Spacing
   ============================================ */
@media screen and (max-width: 768px) {
    .theme-separator {
        margin: 2rem 0 !important;
    }
}

/* ============================================
   THEME BACKGROUNDS - Performance
   ============================================ */
@media screen and (max-width: 768px) {
    /* Disable heavy animations on mobile */
    .theme-animated-bg,
    .theme-gradient-bg {
        animation: none !important;
    }
}

/* ============================================
   THEME PRINT STYLES
   ============================================ */
@media print {
    .theme-nav,
    .theme-carousel,
    .theme-modal,
    .theme-interactive {
        display: none !important;
    }
    
    .theme-content {
        color: black !important;
        background: white !important;
    }
}