/* Touch/tablet shell. Phone-specific layout starts at 780px below. */

.mobile-tabbar {
    display: none;
}

@media (max-width: 780px) {
    :root {
        --mobile-tabbar-height: 66px;
    }

    html {
        scroll-padding-bottom: calc(var(--mobile-tabbar-height) + env(safe-area-inset-bottom));
    }

    body {
        padding-bottom: calc(var(--mobile-tabbar-height) + env(safe-area-inset-bottom));
    }

    body.menu-open .mobile-tabbar {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .head {
        min-height: 58px;
        padding: 7px 12px;
        box-sizing: border-box;
        box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
    }

    .logo {
        font-size: 16px;
        letter-spacing: 1px;
    }

    .mobile-tabbar {
        position: fixed;
        right: 8px;
        bottom: max(8px, env(safe-area-inset-bottom));
        left: 8px;
        z-index: 990;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        min-height: var(--mobile-tabbar-height);
        padding: 6px;
        border: 1px solid rgba(255, 255, 255, .12);
        border-radius: 22px;
        background: rgba(5, 8, 22, .92);
        box-shadow: 0 18px 42px rgba(0, 0, 0, .45);
        backdrop-filter: blur(22px);
        transition: opacity .18s ease, visibility .18s ease;
    }

    .mobile-tabbar__link {
        display: flex;
        min-width: 0;
        min-height: 52px;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 3px;
        border-radius: 17px;
        color: #94a3b8;
        font-size: 10px;
        font-weight: 700;
        text-decoration: none;
    }

    .mobile-tabbar__link[aria-current="page"] {
        color: #fff;
        background: linear-gradient(135deg, rgba(168, 85, 247, .78), rgba(59, 130, 246, .7));
        box-shadow: 0 8px 22px rgba(99, 102, 241, .28);
    }

    .mobile-tabbar__icon {
        display: inline-flex;
        height: 22px;
        align-items: center;
        justify-content: center;
        color: currentColor;
        font-size: 21px;
        font-weight: 800;
        line-height: 1;
    }

    .mobile-tabbar__icon--3d {
        font-size: 15px;
        letter-spacing: -.04em;
    }

    .site-footer {
        margin-bottom: 12px;
    }

    /* On phones the player is shown first. Metadata and actions follow it. */
    .video-page {
        display: flex;
        padding-top: 12px;
        flex-direction: column;
    }

    .video-page > .catalog-breadcrumbs {
        order: 0;
        margin: 0 0 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .video-page__head {
        order: 2;
        margin: 14px 0 0;
        padding: 16px;
        border-radius: 20px;
    }

    .video-page__head h1 {
        font-size: clamp(24px, 7.6vw, 34px);
    }

    .video-page__head .section-kicker {
        font-size: 10px;
    }

    .video-watch-layout,
    .video-watch-main {
        display: contents;
    }

    .video-watch-layout .video-player {
        order: 1;
        width: calc(100% + 28px);
        max-width: none;
        margin: 0 -14px;
        border-radius: 0;
        background: #000;
        box-shadow: 0 14px 34px rgba(0, 0, 0, .4);
    }

    .video-source {
        order: 3;
        margin: 12px 2px 0;
    }

    .video-description {
        order: 4;
        margin-top: 12px;
        border-radius: 16px;
    }

    .video-watch-layout .video-panel {
        order: 5;
        padding: 16px 0 0;
    }

    .video-recommendations {
        position: static;
        order: 6;
        margin-top: 20px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        backdrop-filter: none;
    }

    .video-recommendations__head {
        margin-bottom: 12px;
    }

    .video-recommendations__head h2 {
        font-size: 24px;
    }

    .recommendation-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .recommendation-card {
        position: relative;
        display: flex;
        min-width: 0;
        overflow: hidden;
        flex-direction: column;
        gap: 0;
        border: 1px solid rgba(255, 255, 255, .09);
        border-radius: 16px;
        background: rgba(15, 23, 42, .88);
        box-shadow: 0 12px 26px rgba(0, 0, 0, .2);
    }

    .recommendation-card:first-child {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: minmax(120px, 44%) minmax(0, 1fr);
    }

    .recommendation-card__thumb {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        border-radius: 0;
        object-fit: cover;
    }

    .recommendation-card:first-child .recommendation-card__thumb {
        height: 100%;
        min-height: 112px;
        aspect-ratio: auto;
    }

    .recommendation-card__body {
        min-width: 0;
        justify-content: center;
        padding: 11px 12px 13px;
        box-sizing: border-box;
    }

    .recommendation-card__body strong {
        font-size: 14px;
        line-height: 1.25;
    }

    .recommendation-card__badge {
        position: absolute;
        top: 8px;
        left: 8px;
        z-index: 2;
        padding: 5px 8px;
        border-radius: 999px;
        color: #fff;
        background: rgba(5, 8, 22, .88);
        box-shadow: 0 5px 14px rgba(0, 0, 0, .28);
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
    }
}

@media (orientation: landscape) and (max-width: 950px) and (max-height: 600px) {
    :root {
        --mobile-tabbar-height: 58px;
    }

    body {
        padding-bottom: calc(var(--mobile-tabbar-height) + env(safe-area-inset-bottom));
    }

    .mobile-tabbar {
        right: 10px;
        bottom: max(4px, env(safe-area-inset-bottom));
        left: auto;
        width: min(58vw, 430px);
        min-height: var(--mobile-tabbar-height);
        padding: 4px;
        border-radius: 18px;
    }

    .mobile-tabbar__link {
        min-height: 48px;
    }

    .video-watch-layout .video-player {
        max-height: calc(100svh - 62px);
    }
}