/**
 * Mobile Responsive Styles for jadeStage
 * Fixes video overflow and ensures proper mobile display
 */

/* Base responsive container for videos */
.responsive-video-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

.responsive-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid rgba(0, 255, 0, 0.6);
    background-color: black;
}

/* Mobile breakpoint: 768px and below */
@media (max-width: 768px) {
    /* Ensure body doesn't overflow */
    body {
        overflow-x: hidden;
        width: 100%;
        max-width: 100vw;
    }

    /* Navbar responsive */
    .navbar {
        flex-direction: row;
        padding: 15px 10px;
        gap: 5px;
    }

    .nav-links, .logo {
        margin-left: 10px;
        font-size: 14px;
    }

    /* Video box responsive */
    .videoBox {
        padding: 10px !important;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .videoBox iframe {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9;
        max-width: 100%;
    }

    /* Shuffle button */
    .shuffleButton {
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
    }

    .shuffleButton button {
        width: 90%;
        max-width: 300px;
        padding: 12px;
        font-size: 16px;
    }

    /* Profile page responsive */
    .profile-container {
        padding: 20px 10px !important;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .profile-card, .profile-box {
        padding: 20px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .pinned-video-container {
        width: 100%;
        max-width: 100%;
    }

    .pinned-video-container iframe {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9;
    }

    /* Social links wrap on mobile */
    .social-links {
        flex-wrap: wrap;
        gap: 15px !important;
    }

    /* Form inputs full width on mobile */
    .form-group input,
    .form-group textarea {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Upload page */
    .upload-container {
        padding: 20px 10px !important;
        width: 100%;
        max-width: 100%;
    }

    .upload-box {
        padding: 20px !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Video preview */
    .video-preview {
        width: 100% !important;
        max-width: 100%;
    }

    .video-preview iframe {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9;
    }

    /* Manage videos page */
    .videos-grid {
        grid-template-columns: 1fr !important;
        gap: 15px;
        padding: 10px;
    }

    .video-card {
        width: 100%;
    }

    .video-thumbnail iframe {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9;
    }

    /* Matrix font slider */
    #font-size-widget {
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
    }

    #matrix-font-slider {
        width: 150px !important;
    }

    /* Mascot helper - smaller on mobile */
    .mascot-container {
        bottom: 10px;
        left: 10px;
        transform: scale(0.8);
    }

    .speech-bubble-wrapper {
        bottom: 70px;
        left: 70px;
        width: 140px;
    }

    .speech-text {
        font-size: 11px;
    }

    /* Footer */
    .footer {
        width: 100%;
        padding: 15px 10px;
        font-size: 11px;
    }

    /* Account settings page */
    .account-container {
        padding: 20px 10px !important;
        width: 100%;
    }

    .account-box {
        padding: 20px !important;
        width: 100% !important;
    }

    /* Sign in page */
    .signin-container {
        padding: 20px 10px !important;
        width: 100%;
    }

    .signin-box {
        padding: 25px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Buttons full width on very small screens */
    @media (max-width: 480px) {
        .profile-button,
        .signin-button,
        .upload-button {
            width: 100%;
        }
    }
}

/* Tablet breakpoint: 769px to 1024px */
@media (min-width: 769px) and (max-width: 1024px) {
    .videoBox iframe {
        width: 100%;
        max-width: 700px;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .profile-container,
    .upload-container,
    .account-container {
        padding: 30px 20px;
    }
}