/**
 * CiMovie - Responsive Breakpoints & Multi-Device Adaptation
 * TV-First approach: 1920px base → scales down to mobile
 * 
 * Breakpoints:
 *   ≥1280px  → TV / Desktop (original layout with fluid sizing)
 *   768-1279 → Tablet (2-column cards, bottom nav)
 *   ≤767px   → Mobile (compact grid, bottom nav, no OSK)
 */

/* ==========================================================================
   BASE RESPONSIVE OVERRIDES (All screens)
   These replace hardcoded px values with fluid alternatives
   ========================================================================== */

/* Safe area becomes responsive */
:root {
    --safe-top: clamp(16px, 3vh, 48px);
    --safe-side: clamp(16px, 3vw, 64px);
    --safe-bottom: clamp(16px, 3vh, 56px);
}

/* Detail screen: use full viewport instead of 1920x1080 */
#detail-screen {
    width: 100% !important;
    height: 100% !important;
}

/* Player screen: use full viewport instead of 1920x1080 */
#player-screen {
    width: 100% !important;
    height: 100% !important;
}

/* Hero container: fluid height */
.hero-container {
    height: clamp(260px, 42vw, 550px) !important;
}

/* Media cards: fluid width with aspect-ratio */
.media-card {
    width: clamp(130px, 14vw, 220px) !important;
}

.media-card-poster-wrapper {
    height: auto !important;
    aspect-ratio: 2 / 3;
}

.media-card:not(.is-series) .media-card-poster {
    height: 100% !important;
}

.media-card.is-series .media-card-poster {
    height: calc(100% - 14px) !important;
}

.series-stack-layer.layer-back,
.series-stack-layer.layer-mid {
    height: auto !important;
    aspect-ratio: 2 / 3;
}

/* Modal: responsive width */
.modal-box {
    width: min(620px, 92vw) !important;
}

/* Rail row: responsive gap */
.rail-row {
    gap: clamp(12px, 1.5vw, 24px) !important;
}

/* Detail poster: responsive */
.detail-poster-col {
    width: clamp(200px, 22vw, 320px);
}

.detail-poster-card {
    height: auto !important;
    aspect-ratio: 2 / 3;
}

/* Hero content: responsive max-width */
.hero-content {
    max-width: clamp(280px, 35vw, 450px);
}

/* Slider thumbs: responsive positioning */
.hero-slider-thumbs-wrapper {
    right: clamp(320px, 30vw, 480px);
}

.slider-thumb-card {
    width: clamp(65px, 6.5vw, 95px) !important;
    height: clamp(96px, 9.5vw, 140px) !important;
}

/* ==========================================================================
   TV / Desktop (≥1280px) — Original-like layout, just fluid
   ========================================================================== */
@media (min-width: 1280px) {
    /* Navigation rail stays as sidebar */
    .android-tv-rail {
        width: clamp(64px, 4.5vw, 80px);
    }

    .rail-icon-btn {
        width: clamp(40px, 3.2vw, 52px);
        height: clamp(40px, 3.2vw, 52px);
    }

    .rail-icon-btn .nav-svg {
        width: clamp(22px, 1.7vw, 28px);
        height: clamp(22px, 1.7vw, 28px);
    }

    /* Typography scales */
    .hero-title {
        font-size: clamp(24px, 2.2vw, 32px);
    }

    .rail-title {
        font-size: clamp(16px, 1.3vw, 20px);
    }

    .brand-badge {
        font-size: clamp(16px, 1.2vw, 20px);
    }

    .brand-desc {
        font-size: clamp(12px, 0.95vw, 15px);
    }

    .media-card-title {
        font-size: clamp(12px, 1vw, 15px);
    }

    /* Player controls scale */
    .player-ctrl-btn {
        width: clamp(56px, 4.5vw, 72px);
        height: clamp(56px, 4.5vw, 72px);
    }

    .player-ctrl-btn.primary {
        width: clamp(68px, 5.5vw, 88px);
        height: clamp(68px, 5.5vw, 88px);
    }

    /* Detail page responsive */
    .detail-content-wrap {
        gap: clamp(28px, 4vw, 56px);
    }

    .detail-title {
        font-size: clamp(22px, 2vw, 30px);
    }

    /* Episodes grid */
    .episodes-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ==========================================================================
   Tablet (768px – 1279px) — Collapsed rail, smaller cards
   ========================================================================== */
@media (max-width: 1279px) {
    /* --- Navigation Rail → Bottom Bar --- */
    #app-root {
        flex-direction: column !important;
    }

    .android-tv-rail {
        width: 100% !important;
        height: 60px !important;
        flex-direction: row !important;
        padding: 0 16px !important;
        border-left: none !important;
        border-top: 1px solid var(--border-subtle) !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 100 !important;
        background: var(--bg-surface) !important;
        justify-content: center !important;
        gap: 32px;
    }

    .rail-logo {
        display: none !important;
    }

    .rail-nav {
        flex-direction: row !important;
        gap: 32px !important;
    }

    .rail-icon-btn {
        width: 48px;
        height: 48px;
    }

    .rail-icon-btn .nav-svg {
        width: 24px;
        height: 24px;
    }

    /* Main viewport takes full width, add bottom padding for nav bar */
    #main-viewport {
        width: 100% !important;
        padding-bottom: 60px;
    }

    /* Hero adjustments */
    .hero-container {
        height: clamp(220px, 38vw, 400px) !important;
        border-radius: var(--radius-md) !important;
    }

    .hero-content {
        max-width: 50%;
        padding: 24px var(--safe-side) 28px 0;
    }

    .hero-title {
        font-size: clamp(20px, 3vw, 28px);
    }

    .hero-overview {
        font-size: 13px;
        -webkit-line-clamp: 2;
    }

    .hero-actions .btn-primary,
    .hero-actions .btn-secondary {
        padding: 10px 18px;
        font-size: 14px;
    }

    .hero-actions .btn-svg {
        width: 20px;
        height: 20px;
    }

    /* Slider thumbs hide at this range for cleaner look */
    .hero-slider-thumbs-wrapper {
        display: none !important;
    }

    /* Cards responsive */
    .media-card {
        width: clamp(120px, 18vw, 180px) !important;
    }

    .media-card-title {
        font-size: 13px;
        min-height: 36px;
    }

    .media-card-info {
        padding: 10px 12px 12px 12px;
    }

    /* Rail section spacing */
    .rail-section {
        margin-bottom: 28px;
    }

    .rail-title {
        font-size: 17px;
    }

    /* Detail screen: stack poster + info vertically */
    .detail-content-wrap {
        flex-direction: column !important;
        gap: 24px !important;
        align-items: center;
    }

    .detail-poster-col {
        width: clamp(180px, 30vw, 260px);
    }

    .detail-info-col {
        width: 100%;
    }

    .detail-title {
        font-size: clamp(20px, 3.5vw, 26px);
        text-align: center;
    }

    .detail-orig-title {
        text-align: center;
        font-size: 15px;
    }

    .detail-badges-row {
        justify-content: center;
        flex-wrap: wrap;
    }

    .detail-actions-row {
        justify-content: center;
        flex-wrap: wrap;
    }

    .detail-synopsis-box {
        max-width: 100%;
    }

    /* Episodes: single column */
    .episodes-grid {
        grid-template-columns: 1fr !important;
    }

    /* Search: keyboard scales down */
    .osk-key {
        width: clamp(38px, 6vw, 58px);
        height: clamp(36px, 5.5vw, 50px);
        font-size: clamp(13px, 2vw, 17px);
    }

    .osk-key.wide {
        width: clamp(72px, 12vw, 110px);
        font-size: clamp(12px, 1.6vw, 15px);
    }

    .osk-key.space {
        width: clamp(160px, 28vw, 260px);
        font-size: clamp(12px, 1.6vw, 15px);
    }

    .search-container {
        max-width: 100%;
    }

    /* Modal responsive */
    .modal-box {
        width: min(520px, 92vw) !important;
        padding: 24px;
    }

    /* Player controls */
    .player-ctrl-btn {
        width: 56px;
        height: 56px;
    }

    .player-ctrl-btn.primary {
        width: 68px;
        height: 68px;
    }

    .player-ctrl-btn svg {
        width: 24px;
        height: 24px;
    }

    .player-ctrl-btn.primary svg {
        width: 32px;
        height: 32px;
    }

    .player-icon-btn {
        width: 48px;
        height: 48px;
    }

    .player-icon-btn svg {
        width: 22px;
        height: 22px;
    }

    .player-title-info h2 {
        font-size: 18px;
    }

    .player-controls-row {
        gap: 24px;
    }

    .time-label {
        font-size: 14px;
        width: 65px;
    }

    /* Header adjustments */
    .brand-badge {
        font-size: 17px;
    }

    .brand-desc {
        font-size: 13px;
    }

    .clock-time {
        font-size: 18px;
    }

    .clock-date {
        font-size: 12px;
    }

    /* Cast chips */
    .cast-chip {
        padding: 8px 16px;
        font-size: 14px;
    }

    /* Badges */
    .badge {
        padding: 5px 10px;
        font-size: 13px;
    }
}


/* ==========================================================================
   Mobile (≤767px) — Compact layout, bottom nav, no OSK
   ========================================================================== */
@media (max-width: 767px) {
    /* Safe areas minimal */
    :root {
        --safe-top: 12px;
        --safe-side: 14px;
        --safe-bottom: 12px;
    }

    /* Bottom nav smaller */
    .android-tv-rail {
        height: 54px !important;
        gap: 24px;
    }

    .rail-icon-btn {
        width: 42px;
        height: 42px;
    }

    .rail-icon-btn .nav-svg {
        width: 22px;
        height: 22px;
    }

    #main-viewport {
        padding-bottom: 54px;
    }

    /* Hero: compact mobile version */
    .hero-container {
        height: clamp(180px, 50vw, 280px) !important;
        border-radius: var(--radius-sm) !important;
        margin-bottom: 20px !important;
    }

    .hero-content {
        max-width: 65%;
        padding: 16px var(--safe-side) 20px 0;
    }

    .hero-title {
        font-size: clamp(16px, 4.5vw, 22px);
        margin-bottom: 8px;
    }

    .hero-overview {
        font-size: 12px;
        -webkit-line-clamp: 2;
        margin-bottom: 12px;
        line-height: 1.5;
    }

    .hero-badges {
        gap: 8px;
        margin-bottom: 10px;
    }

    .hero-badges .badge {
        padding: 3px 8px;
        font-size: 11px;
    }

    .hero-badges .imdb-tag {
        font-size: 9px;
        padding: 1px 4px;
    }

    .hero-actions {
        gap: 8px;
    }

    .hero-actions .btn-primary,
    .hero-actions .btn-secondary {
        padding: 8px 14px;
        font-size: 12px;
        border-radius: var(--radius-sm);
    }

    .hero-actions .btn-svg {
        width: 16px;
        height: 16px;
    }

    .hero-actions .btn-primary span,
    .hero-actions .btn-secondary span {
        display: none;
    }

    .hero-slider-thumbs-wrapper {
        display: none !important;
    }

    /* Cards: 2-column grid for mobile */
    .rail-row {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
        overflow-x: visible !important;
        padding: 8px 0 16px 0 !important;
    }

    .media-card {
        width: 100% !important;
    }

    .media-card-poster-wrapper {
        aspect-ratio: 2 / 3;
    }

    .media-card-info {
        padding: 8px 10px 10px 10px;
    }

    .media-card-title {
        font-size: 12px;
        min-height: 32px;
        -webkit-line-clamp: 1;
    }

    .media-card-rating {
        font-size: 12px;
    }

    .imdb-pill {
        font-size: 9px;
        padding: 1px 3px;
    }

    .media-card-year {
        font-size: 11px;
    }

    /* Section titles */
    .rail-section {
        margin-bottom: 20px;
    }

    .rail-title {
        font-size: 15px;
    }

    .rail-title::before {
        width: 3px;
        height: 14px;
    }

    /* Header compact */
    .home-top-header {
        padding: var(--safe-top) 0 12px 0;
    }

    .brand-badge {
        font-size: 15px;
    }

    .brand-desc {
        font-size: 12px;
    }

    .brand-divider {
        font-size: 12px;
    }

    .clock-time {
        font-size: 16px;
    }

    .clock-date {
        font-size: 11px;
    }

    /* Detail page: fully stacked */
    .detail-content-wrap {
        flex-direction: column !important;
        gap: 20px !important;
        padding: var(--safe-top) var(--safe-side) 80px var(--safe-side) !important;
    }

    .detail-poster-col {
        width: clamp(140px, 40vw, 200px);
        margin: 0 auto;
    }

    .detail-backdrop-wrap {
        height: 300px;
    }

    .detail-title {
        font-size: clamp(18px, 5vw, 24px);
        text-align: center;
    }

    .detail-orig-title {
        font-size: 14px;
        text-align: center;
    }

    .detail-badges-row {
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
    }

    .detail-badges-row .badge {
        font-size: 12px;
        padding: 4px 8px;
    }

    .detail-actions-row {
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
    }

    .detail-actions-row .btn-primary,
    .detail-actions-row .btn-secondary {
        padding: 10px 16px;
        font-size: 13px;
    }

    .detail-synopsis-box h3 {
        font-size: 16px;
    }

    .detail-synopsis-box p {
        font-size: 13px;
        line-height: 1.6;
    }

    .cast-chip {
        padding: 6px 12px;
        font-size: 13px;
    }

    .cast-chips-row {
        gap: 8px;
    }

    /* Seasons / Episodes */
    .season-tab-btn {
        padding: 8px 14px;
        font-size: 13px;
    }

    .episode-card {
        padding: 10px 14px;
        gap: 12px;
    }

    .ep-num {
        font-size: 16px;
        width: 28px;
    }

    .ep-title {
        font-size: 13px;
    }

    .ep-meta {
        font-size: 11px;
    }

    /* Hide virtual keyboard on mobile — use system keyboard */
    .osk-keyboard {
        display: none !important;
    }

    .search-input-field {
        height: 48px;
        font-size: 16px;
        padding: 0 16px;
    }

    /* Search results: grid like rails */
    #search-results-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
        overflow-x: visible !important;
        padding: 8px 0 !important;
    }

    #search-results-grid .media-card {
        width: 100% !important;
    }

    /* Modal */
    .modal-box {
        width: 94vw !important;
        padding: 20px;
        max-height: 85vh;
    }

    .modal-header h3 {
        font-size: 17px;
    }

    .modal-list-item {
        padding: 12px 14px;
        font-size: 14px;
    }

    .quality-badge {
        padding: 4px 10px;
        font-size: 13px;
    }

    /* Player controls: compact for mobile */
    .player-ctrl-btn {
        width: 48px;
        height: 48px;
    }

    .player-ctrl-btn svg {
        width: 22px;
        height: 22px;
    }

    .player-ctrl-btn.primary {
        width: 60px;
        height: 60px;
    }

    .player-ctrl-btn.primary svg {
        width: 30px;
        height: 30px;
    }

    .player-controls-row {
        gap: 20px;
    }

    .player-icon-btn {
        width: 44px;
        height: 44px;
    }

    .player-icon-btn svg {
        width: 20px;
        height: 20px;
    }

    .player-title-info h2 {
        font-size: 16px;
    }

    .player-title-info span {
        font-size: 13px;
    }

    .time-label {
        font-size: 13px;
        width: 55px;
    }

    .player-progress-track {
        height: 10px;
    }

    .player-progress-fill::after {
        width: 16px;
        height: 16px;
    }

    .player-timeline-wrapper {
        gap: 12px;
    }

    /* Player error overlay */
    .player-error-box {
        padding: 28px 20px;
        max-width: 92vw;
    }

    .player-error-box .error-icon svg {
        width: 44px;
        height: 44px;
    }

    .player-error-box .error-title {
        font-size: 18px;
    }

    .player-error-box .error-desc {
        font-size: 13px;
    }

    .player-error-box .error-actions {
        gap: 10px;
    }

    .player-error-box .error-actions button {
        padding: 10px 16px;
        font-size: 13px;
    }

    /* Loading overlay */
    .loading-hint {
        font-size: 16px;
    }

    .minimal-spinner-container {
        width: 52px;
        height: 52px;
    }

    .minimal-spinner {
        width: 52px;
        height: 52px;
    }
}


/* ==========================================================================
   Very Small Mobile (≤400px) — Extra compact
   ========================================================================== */
@media (max-width: 400px) {
    .rail-row {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    #search-results-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .hero-container {
        height: 180px !important;
    }

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

    .hero-title {
        font-size: 15px;
    }

    .hero-overview {
        display: none !important;
    }

    .hero-actions .btn-primary,
    .hero-actions .btn-secondary {
        padding: 7px 12px;
        font-size: 11px;
    }

    .detail-poster-col {
        width: 140px;
    }
}


/* ==========================================================================
   Landscape Mobile (short height screens)
   ========================================================================== */
@media (max-height: 500px) and (orientation: landscape) {
    .hero-container {
        height: 60vh !important;
    }

    .android-tv-rail {
        height: 48px !important;
    }

    #main-viewport {
        padding-bottom: 48px;
    }

    .home-top-header {
        padding: 8px 0 8px 0;
    }
}


/* ==========================================================================
   Touch Device Enhancements
   ========================================================================== */
@media (hover: none) and (pointer: coarse) {
    /* Touch-friendly tap targets (minimum 44px) */
    .media-card {
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(229, 9, 20, 0.15);
    }

    .btn-primary,
    .btn-secondary {
        min-height: 44px;
        -webkit-tap-highlight-color: rgba(229, 9, 20, 0.15);
    }

    /* Disable hover/focus scale effects on touch — prevents sticky hover */
    .media-card.focused {
        transform: none !important;
    }

    .rail-icon-btn.focused {
        transform: none !important;
    }

    /* Enable native touch scrolling on rail rows */
    .rail-row {
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }

    .rail-row .media-card {
        scroll-snap-align: start;
    }

    /* Show scrollbar hint briefly on touch */
    .view-screen {
        -webkit-overflow-scrolling: touch;
    }
}


/* ==========================================================================
   Print: Hide non-essential elements
   ========================================================================== */
@media print {
    .android-tv-rail,
    .hero-slider-thumbs-wrapper,
    #player-screen,
    .modal-overlay,
    .home-loading-screen,
    #detail-loading-overlay,
    .osk-keyboard {
        display: none !important;
    }
}