/* TV Specific Overrides - 10-foot UI */
@media (min-width: 1280px) and (min-height: 720px) {
    /* 
     * In a real environment, you might detect TV via user-agent or specific query.
     * Here we just scale up slightly for larger screens and enhance focus states.
     */
    
    :root {
        --focus-ring: #ffffff;
    }

    body {
        font-size: 1.2rem;
    }

    .focusable:focus {
        outline: 4px solid var(--focus-ring);
        outline-offset: 4px;
        transform: scale(1.08);
        box-shadow: 0 15px 30px rgba(0,0,0,0.6);
        z-index: 20;
    }

    .media-card {
        transition: transform 0.2s ease, outline 0.1s;
    }

    /* Keep focused card info always visible on TV when focused */
    .media-card:focus .media-card-info {
        opacity: 1;
    }

    .hero-title {
        font-size: 4.5rem;
    }

    .btn {
        padding: 1rem 3rem;
        font-size: 1.4rem;
    }

    .media-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 20px;
    }

    .section-title {
        font-size: 2rem;
        margin-top: 3rem;
    }
}