/* ============================================
   MOBILE HEADER & BANNER REDESIGN
   Complete mobile-first design for anime detail page
   @media (max-width: 768px)
   ============================================ */

@media (max-width: 768px) {
    /* ========================================
       BANNER - Shorter and cleaner
       ======================================== */
    .detail-banner {
        height: 160px !important;
        background-position: center 30% !important;
    }

    .detail-banner .back-btn {
        top: 16px !important;
        left: 12px !important;
        padding: 10px !important;
        min-height: 44px !important;
        min-width: 44px !important;
        background: rgba(0, 0, 0, 0.7) !important;
        backdrop-filter: blur(12px) !important;
        border-radius: 12px !important;
    }

    .detail-banner .back-btn span {
        display: none !important;
    }

    .detail-banner .back-btn svg {
        width: 20px !important;
        height: 20px !important;
    }

    /* ========================================
       HEADER - Vertical stack with centered poster
       ======================================== */
    .detail-header {
        margin-top: -60px !important;
        padding: 0 16px !important;
    }

    .header-container {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 20px !important;
        max-width: 100% !important;
    }

    /* ========================================
       POSTER - Use display:contents so children flow into header-container
       This allows reordering: poster → title → buttons
       ======================================== */
    .header-poster {
        display: contents !important;
    }

    .header-poster img {
        width: 140px !important;
        aspect-ratio: 2/3 !important;
        border-radius: 12px !important;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6) !important;
        order: 1 !important;
    }

    /* ========================================
       POSTER ACTIONS - Between title and synopsis
       ======================================== */
    .poster-actions {
        display: flex !important;
        flex-direction: row !important;
        gap: 10px !important;
        margin-top: 4px !important;
        justify-content: center !important;
        width: auto !important;
        order: 3 !important;
    }

    .poster-actions .btn-add-list,
    .poster-actions .add-list-btn {
        flex: 1 !important;
        max-width: 160px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 12px 16px !important;
        background: var(--primary) !important;
        border: none !important;
        border-radius: 10px !important;
        color: white !important;
        font-family: var(--font-body) !important;
        font-size: 0.85rem !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        min-height: 44px !important;
        transition: all 0.2s ease !important;
    }

    .poster-actions .btn-add-list:active,
    .poster-actions .add-list-btn:active {
        transform: scale(0.97) !important;
        opacity: 0.9 !important;
    }

    .poster-actions .btn-add-list svg,
    .poster-actions .add-list-btn svg {
        width: 18px !important;
        height: 18px !important;
    }

    .poster-actions .btn-add-list.in-list,
    .poster-actions .add-list-btn.in-list {
        background: var(--success, #22c55e) !important;
    }

    .poster-actions .btn-favorite,
    .poster-actions .favorite-btn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: var(--bg-elevated) !important;
        border: 1px solid var(--border) !important;
        border-radius: 10px !important;
        color: var(--text-secondary) !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        padding: 0 !important;
    }

    .poster-actions .btn-favorite:active,
    .poster-actions .favorite-btn:active {
        transform: scale(0.95) !important;
    }

    .poster-actions .btn-favorite svg,
    .poster-actions .favorite-btn svg {
        width: 20px !important;
        height: 20px !important;
    }

    .poster-actions .btn-favorite.active,
    .poster-actions .favorite-btn.active {
        background: rgba(255, 107, 107, 0.15) !important;
        border-color: #ff6b6b !important;
        color: #ff6b6b !important;
    }

    .poster-actions .btn-favorite.active svg,
    .poster-actions .favorite-btn.active svg {
        fill: #ff6b6b !important;
    }

    /* Hide the bottom mobile action bar - buttons are now in header */
    .mobile-action-bar {
        display: none !important;
    }

    /* Hide completion prediction on mobile */
    .completion-prediction {
        display: none !important;
    }

    /* Hide next franchise prompt on mobile */
    .next-franchise-prompt {
        display: none !important;
    }

    /* ========================================
       INFO SECTION - Use display:contents for reordering
       Layout: poster → title → buttons → synopsis → meta → genres
       ======================================== */
    .header-info {
        display: contents !important;
    }

    /* Title row - inline layout with toggle */
    .title-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        flex-wrap: wrap !important;
        order: 2 !important;
        width: 100% !important;
    }

    .detail-title {
        font-size: 1.3rem !important;
        line-height: 1.3 !important;
        text-align: center !important;
        font-weight: 700 !important;
        flex: 0 1 auto !important;
        max-width: calc(100% - 44px) !important;
        margin: 0 !important;
    }

    /* Title toggle - inline button next to title */
    .title-toggle-btn {
        flex-shrink: 0 !important;
        padding: 6px !important;
        border-radius: 6px !important;
        background: var(--bg-elevated) !important;
        border: 1px solid var(--border) !important;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: center !important;
        opacity: 0.8 !important;
        transition: opacity 0.2s ease, background 0.2s ease !important;
        cursor: pointer !important;
    }

    .title-toggle-btn:active {
        opacity: 1 !important;
        background: var(--bg-surface) !important;
    }

    .title-toggle-btn span {
        display: none !important;
    }

    .title-toggle-btn svg {
        width: 20px !important;
        height: 20px !important;
        flex-shrink: 0 !important;
    }

    /* ========================================
       SYNOPSIS - 3-4 lines with expand toggle
       ======================================== */
    .header-synopsis {
        font-size: 0.85rem !important;
        line-height: 1.6 !important;
        color: var(--text-secondary) !important;
        text-align: center !important;
        max-height: 88px !important; /* ~3.5 lines at 1.6 line-height */
        overflow: hidden !important;
        position: relative !important;
        transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        margin-top: 12px !important;
        order: 4 !important;
        width: 100% !important;
    }

    /* Expanded state */
    .header-synopsis.expanded {
        max-height: 2000px !important;
    }

    /* Synopsis toggle button - must follow synopsis */
    .synopsis-toggle {
        display: inline-block !important;
        margin-top: 10px !important;
        padding: 8px 16px !important;
        background: var(--bg-elevated) !important;
        border: 1px solid var(--border) !important;
        border-radius: 8px !important;
        color: var(--primary) !important;
        font-size: 0.8rem !important;
        font-weight: 500 !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        order: 4 !important;
    }

    .synopsis-toggle:hover {
        background: var(--primary-subtle) !important;
        border-color: var(--primary) !important;
    }

    .synopsis-toggle:active {
        transform: scale(0.98) !important;
    }

    /* ========================================
       META INFO - Centered, stacked
       ======================================== */
    .header-meta {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin-top: 12px !important;
        font-size: 0.8rem !important;
        color: var(--text-secondary) !important;
        order: 5 !important;
        width: 100% !important;
    }

    .header-meta .dot {
        width: 3px !important;
        height: 3px !important;
        background: var(--text-tertiary) !important;
        border-radius: 50% !important;
        opacity: 0.5 !important;
    }

    .header-meta .score {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        color: var(--primary) !important;
        font-weight: 600 !important;
    }

    .header-meta .score svg {
        width: 14px !important;
        height: 14px !important;
    }

    /* ========================================
       GENRES - Centered tags
       ======================================== */
    .header-genres {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        justify-content: center !important;
        order: 6 !important;
        width: 100% !important;
        margin-top: 12px !important;
    }

    .genre {
        font-size: 0.7rem !important;
        padding: 4px 10px !important;
        border-radius: 6px !important;
        background: var(--bg-card) !important;
        border: 1px solid var(--border) !important;
        color: var(--text-secondary) !important;
        font-weight: 500 !important;
    }

    /* ========================================
       BODY SECTION - Normal padding (action bar moved to header)
       ======================================== */
    .detail-body {
        padding: 24px 16px 32px !important;
    }

    .body-container {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    /* Sidebar below content */
    .detail-sidebar {
        order: 2 !important;
    }

    .detail-content {
        order: 1 !important;
    }
}

/* ========================================
   SMALLER MOBILE - 600px and below
   ======================================== */
@media (max-width: 600px) {
    .detail-banner {
        height: 150px !important;
    }

    .detail-header {
        margin-top: -50px !important;
    }

    .header-poster img {
        width: 120px !important;
    }

    .detail-title {
        font-size: 1.2rem !important;
    }

    .header-synopsis {
        font-size: 0.82rem !important;
        max-height: 84px !important;
    }

    .header-meta {
        font-size: 0.75rem !important;
        gap: 6px !important;
    }

    .genre {
        font-size: 0.65rem !important;
        padding: 3px 8px !important;
    }
}

/* ========================================
   EXTRA SMALL MOBILE - 480px and below
   ======================================== */
@media (max-width: 480px) {
    .detail-banner {
        height: 150px !important;
    }

    .detail-banner .back-btn {
        top: 12px !important;
        left: 10px !important;
        padding: 9px !important;
        min-height: 40px !important;
        min-width: 40px !important;
    }

    .detail-banner .back-btn svg {
        width: 18px !important;
        height: 18px !important;
    }

    .detail-header {
        margin-top: -45px !important;
        padding: 0 12px !important;
    }

    .header-container {
        gap: 16px !important;
    }

    .header-poster img {
        width: 110px !important;
    }

    .detail-title {
        font-size: 1.1rem !important;
    }

    .title-toggle-btn {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        padding: 4px !important;
    }

    .title-toggle-btn svg {
        width: 18px !important;
        height: 18px !important;
    }

    .header-synopsis {
        font-size: 0.8rem !important;
        max-height: 80px !important;
    }

    .synopsis-toggle {
        padding: 7px 14px !important;
        font-size: 0.75rem !important;
    }

    .header-meta {
        font-size: 0.72rem !important;
    }

    .genre {
        font-size: 0.62rem !important;
    }

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

    /* Smaller action buttons on very small screens */
    .poster-actions .btn-add-list,
    .poster-actions .add-list-btn {
        font-size: 0.8rem !important;
        padding: 10px 12px !important;
        max-width: 140px !important;
    }

    .poster-actions .btn-favorite,
    .poster-actions .favorite-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
    }

    .poster-actions .btn-favorite svg,
    .poster-actions .favorite-btn svg {
        width: 18px !important;
        height: 18px !important;
    }
}