/* ==========================================================================
   Responsive Layer
   Progressive enhancement breakpoints:
   - mobile default
   - tablet 640px+
   - tablet landscape 768px+
   - desktop 1024px+
   - wide desktop 1280px+
   ========================================================================== */

/* Phone baseline (320px+): keep controls and popovers fluid by default. */
:where(.mehrazi-player, .mp-video-player) :is(
    .mp-speed-dropdown,
    .mp-sort-menu,
    .mp-actions-menu,
    .mp-dropdown__menu,
    .mp-settings-panel
) {
    inline-size: min(100vw - 1rem, 20rem);
    max-inline-size: 100%;
}

:where(.mehrazi-player, .mp-video-player) :is(
    .mp-queue-panel,
    .mp-mini-player
) {
    inline-size: min(100vw - 1rem, 22rem);
    max-inline-size: calc(100vw - 1rem);
}

:where(.mehrazi-archive-wrapper, .mehrazi-video-archive) .mp-podcast-grid.mp-view-list :is(
    .mp-podcast-card,
    .mp-video-card
) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    block-size: auto;
}

:where(.mehrazi-archive-wrapper, .mehrazi-video-archive) .mp-podcast-grid.mp-view-list .mp-card-media {
    inline-size: 100%;
    block-size: auto;
}

/* Keep advanced utility toggles hidden on narrow viewports. */
:where(.mehrazi-player, .mp-video-player, .mp-video-modal) :is(
    .mp-aspect-toggle,
    .mp-theater-toggle,
    .mp-shortcuts-toggle,
    .mp-video-aspect-toggle
) {
    display: none;
}

/* Tablet portrait (>=640px): wrapped row layout with flexible widths. */
@media (min-width: 640px) {
    :where(.mehrazi-player, .mp-video-player, .mp-video-modal) :is(
        .mp-aspect-toggle,
        .mp-theater-toggle,
        .mp-shortcuts-toggle,
        .mp-video-aspect-toggle
    ) {
        display: inline-flex;
    }

    :where(.mehrazi-player, .mp-video-player) .mp-action-buttons {
        flex: 0 1 auto;
        inline-size: auto;
        max-inline-size: 100%;
    }

    :where(.mehrazi-player, .mp-video-player) .mp-btn-group--actions > .mp-btn {
        flex: 1 1 calc(50% - (var(--mp-space-2) / 2));
        inline-size: auto;
    }

    .mp-video-player .mp-video-overlay-meta {
        inset-inline: 1rem;
        inset-block-end: 1rem;
    }

    .mp-video-player .mp-video-overlay-meta-card {
        padding: 0.5rem 0.875rem;
    }

    :where(.mehrazi-archive-wrapper, .mehrazi-video-archive) .mp-podcast-grid.mp-view-list :is(
        .mp-podcast-card,
        .mp-video-card
    ) {
        flex-direction: row;
        align-items: stretch;
    }

    :where(.mehrazi-archive-wrapper, .mehrazi-video-archive) .mp-podcast-grid.mp-view-list .mp-card-media {
        inline-size: clamp(9rem, 24vw, 12rem);
        flex: 0 0 auto;
    }
}

/* Tablet landscape and up (>=768px): inline utility controls and balanced spacing. */
@media (min-width: 768px) {
    :where(.mehrazi-player, .mp-video-player) .mp-controls-grid {
        flex-wrap: nowrap;
        justify-content: space-between;
    }

    :where(.mehrazi-player, .mp-video-player) .mp-controls-secondary {
        order: 1;
        flex: 1 1 auto;
    }

    :where(.mehrazi-player, .mp-video-player) .mp-controls-main {
        order: 2;
        flex: 0 0 auto;
    }

    :where(.mehrazi-player, .mp-video-player) .mp-controls-utility {
        order: 3;
        flex: 1 1 auto;
        justify-content: flex-end;
        gap: var(--mp-space-2);
    }

    :where(.mehrazi-player, .mp-video-player) .mp-volume-slider--desktop {
        display: block;
    }

    :where(.mehrazi-player, .mp-video-player) .mp-action-buttons {
        margin-inline-start: auto;
    }

    :where(.mehrazi-player, .mp-video-player) .mp-btn-group--actions {
        inline-size: auto;
        flex-wrap: nowrap;
    }

    :where(.mehrazi-player, .mp-video-player) .mp-btn-group--actions > .mp-btn {
        flex: 0 0 auto;
    }

    .mp-video-player .mp-play-big {
        inline-size: 5rem;
        block-size: 5rem;
    }

    .mp-video-player .mp-play-big-icon {
        inline-size: 2rem;
        block-size: 2rem;
    }

    .mp-video-player .mp-video-overlay-title {
        font-size: 0.875rem;
    }

    .mp-video-player .mp-video-overlay-subtitle {
        font-size: 0.75rem;
    }
}

/* Desktop (>=1024px): slightly roomier rhythm while staying compact. */
@media (min-width: 1024px) {
    :where(.mehrazi-player, .mp-video-player) .mp-controls-utility {
        gap: var(--mp-space-3);
    }

    :where(.mehrazi-player, .mp-video-player) .mp-btn-group--actions {
        gap: var(--mp-space-2);
    }
}

/* Wide desktop (>=1280px): keeps utility clusters readable on large canvases. */
@media (min-width: 1280px) {
    :where(.mehrazi-player, .mp-video-player) .mp-controls-grid {
        gap: var(--mp-space-3);
    }

    :where(.mehrazi-player, .mp-video-player) .mp-controls-utility {
        gap: calc(var(--mp-space-3) + var(--mp-space-1));
    }
}