/* ============================================
   ANIME DETAIL PAGE - MOBILE STYLES
   Complete mobile redesign for screens 768px and below

   Individual section files are linked in anime.html:
   - mobile-header.css
   - mobile-series.css
   - mobile-characters.css
   - mobile-tags.css
   - mobile-reviews.css
   - mobile-recs.css
   ============================================ */

/* ============================================
   GLOBAL MOBILE OVERRIDES FOR DETAIL PAGE
   ============================================ */

@media (max-width: 768px) {
    /* Ensure content sections don't clip scrollable children */
    .detail-view .content-section {
        overflow: visible !important;
        max-width: 100vw !important;
    }

    /* Body container - single column on mobile */
    .detail-view .body-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        padding: 0 12px !important;
    }

    /* Detail body - normal padding (action bar moved to header) */
    .detail-view .detail-body {
        padding: 16px 0 32px 0 !important;
    }

    /* Content area takes full width */
    .detail-view .detail-content {
        order: 1 !important;
        width: 100% !important;
        gap: 24px !important;
    }

    /* Sidebar moves below content */
    .detail-view .detail-sidebar {
        order: 2 !important;
        width: 100% !important;
    }

    /* Section headers */
    .detail-view .content-section h2 {
        font-size: 1rem !important;
        margin-bottom: 12px !important;
        padding-bottom: 8px !important;
        border-bottom: 1px solid var(--border) !important;
    }

    /* Hide desktop poster actions - use mobile action bar instead */
    .poster-actions {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .detail-view .body-container {
        padding: 0 10px !important;
    }

    .detail-view .detail-body {
        padding: 12px 0 28px 0 !important;
    }

    .detail-view .detail-content {
        gap: 20px !important;
    }

    .detail-view .content-section h2 {
        font-size: 0.95rem !important;
        margin-bottom: 10px !important;
    }
}