.video-page {
    margin-left: var(--sidebar-width);
    flex: 1;
    background-color: var(--content-bg);
    padding: 26px 40px 20px;
    min-height: 100vh;
    /* Video player layout variables - Default values for screens >= 1440px */
    /* To customize: Modify the values in the media queries below for different screen sizes */
    --video-player-top-distance: 608px;  /* Distance between top of screen and bottom of video-player */
    --video-player-width: 800px; /* Horizontal common width of the video-detail box */
    --video-player-width-16-9: 800px; /* 16:9 aspect ratio */
    --video-player-width-1-1: 600px; /* 1:1 aspect ratio */
    --video-player-width-2-1: 800px; /* 2:1 aspect ratio */
    --video-player-width-3-2: 800px; /* 3:2 aspect ratio */
    --video-player-width-4-3: 800px; /* 4:3 aspect ratio */
    --video-player-width-9-16: 350px; /* 9:16 aspect ratio */
    --video-player-width-2-3: 400px; /* 2:3 aspect ratio */
    --video-player-width-3-4: 400px; /* 3:4 aspect ratio */
    --video-player-width-1-2: 400px; /* 1:2 aspect ratio */

    /* Full Video Button variable */
    --video-page-button-top-distance: 846px; /* Distance from top of screen to the fixed button */

    --border-color: #0c0f14; /* Border color for video player and details */
}

/* Responsive video player width variables for screens < 1440px */
@media (max-width: 1439px) {
    .video-page {
        --video-player-width: 800px;
        --video-player-width-16-9: 800px;
        --video-player-width-1-1: 550px;
        --video-player-width-2-1: 800px;
        --video-player-width-3-2: 800px;
        --video-player-width-4-3: 700px;
        --video-player-width-9-16: 320px;
        --video-player-width-2-3: 360px;
        --video-player-width-3-4: 360px;
        --video-player-width-1-2: 360px;
    }
}

/* Responsive video player width variables for screens < 1300px */
@media (max-width: 1299px) {
    .video-page {
        --video-player-top-distance: 510px;
        --video-player-width: 624px;
        --video-player-width-16-9: 624px;
        --video-player-width-1-1: 520px;
        --video-player-width-2-1: 750px;
        --video-player-width-3-2: 624px;
        --video-player-width-4-3: 624px;
        --video-player-width-9-16: 300px;
        --video-player-width-2-3: 340px;
        --video-player-width-3-4: 340px;
        --video-player-width-1-2: 340px;
        --video-page-button-top-distance: 724px;
        padding: 40px 16px 20px;
    }
}

/* Responsive video player width variables for screens < 1024px */
@media (max-width: 1023px) {
    .video-page {
        --video-player-top-distance: 505px;
        --video-player-width: 610px;
        --video-player-width-16-9: 610px;
        --video-player-width-1-1: 500px;
        --video-player-width-2-1: 610px;
        --video-player-width-3-2: 610px;
        --video-player-width-4-3: 610px;
        --video-player-width-9-16: 284px;
        --video-player-width-2-3: 320px;
        --video-player-width-3-4: 320px;
        --video-player-width-1-2: 320px;
        --video-page-button-top-distance: 770px;
    }
}

/* Responsive video player width variables for screens < 768px (Mobile) */
@media (max-width: 767px) {
    /* No need to set video-player-top-distance for mobile, instead of it, video-player-distance for mobile is used */
    .video-page {
        --video-player-width: 330px;
        --video-player-width-16-9: 330px;
        --video-player-width-1-1: 330px;
        --video-player-width-2-1: 330px;
        --video-player-width-3-2: 330px;
        --video-player-width-4-3: 330px;
        --video-player-width-9-16: 284px;
        --video-player-width-2-3: 330px;
        --video-player-width-3-4: 320px;
        --video-player-width-1-2: 320px;
        --video-player-distance: 20px;
        padding: 30px 12px 20px;
    }
}

.video-page__layout {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 165px;
    gap: 32px;
    width: 100%;
    align-items: start;
}

.video-page__primary {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Title row - centered */
.video-page__title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    height: 36px;
    padding: 4px 8px;
    box-sizing: border-box;
}

/* Title - centered, 30% larger than sidebar (0.9rem * 1.3 ≈ 1.17rem), shrinks to fit */
.video-page__title {
    font-size: calc(var(--sidebar-label-font-size) * 1.3);
    color: var(--heading-color);
    letter-spacing: 0.04em;
    margin: 0;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 400;
    max-width: 100%;
}

/* Tags - italic, left aligned, same size as sidebar (0.9rem) */
.video-page__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-right: auto;
    font-style: italic;
}

.video-page__tag {
    color: var(--tile-title-color);
    font-size: 0.9rem;
    letter-spacing: 0.04em;
}

/* Clickable tag links */
.video-page__tag-link {
    margin-left: 4px;
    color: var(--tile-title-color);
    text-decoration: none;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}

.video-page__tag-link:hover,
.video-page__tag-link:focus {
    color: var(--sidebar-accent, #7aa6ff);
    text-decoration: underline;
}

/* Clickable actor links */
.video-page__meta-actor-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}

.video-page__meta-actor-link:hover,
.video-page__meta-actor-link:focus {
    color: var(--sidebar-accent, #7aa6ff);
    text-decoration: underline;
}

/* Description - centered, 30% larger than sidebar, shrinks to fit */
.video-page__description {
    border: 1px solid var(--border-color);
    padding: 6px 8px;
    line-height: 1.5;
    text-align: center;
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--sidebar-label-font-size) * 1.1);
}

.video-page__description p {
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.video-page__description--placeholder {
    opacity: 0.7;
    font-style: italic;
}

/* Meta info (Level, duration, date) - right aligned, same size as sidebar */
.video-page__meta-info {
    margin-left: auto;
    white-space: nowrap;
}

.video-page__player-shell {
    display: grid;
    grid-template-columns: 80px var(--video-player-width) 80px;
    grid-template-rows: var(--video-player-top-distance) auto;
    grid-auto-rows: min-content;
    align-items: center;
    gap: 0px;
    margin-bottom: 8px;
}

@media (max-width: 1299px) {
    .video-page__player-shell {
        grid-template-columns: 55px var(--video-player-width) 55px;
    }
}

.video-page__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: #ffffff;
    color: transparent;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    align-self: end;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    margin-bottom: -18px;
}

@media (max-width: 767px) {
    .video-page__nav {
        display: none;
    }
}

.video-page__nav--previous {
    clip-path: polygon(100% 0, 100% 100%, 0 50%);
}

.video-page__nav:hover,
.video-page__nav:focus-visible {
    transform: translateY(-2px);
    background-color: #f3f3f3;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.32);
}

.video-page__nav--next {
    justify-self: end;
}

.video-page__nav:focus {
    outline: none;
}

.video-page__nav:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 4px;
}

.video-page__nav i {
    display: none;
}

.video-player {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    align-self: flex-end;
    justify-self: center;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
border: 1px solid var(--border-color);
}

/* Status overlay for personal copy status (Your Videos context) */
.video-player__status-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 15;
    pointer-events: auto; /* Block interactions with elements behind */
    cursor: default;
}

.video-player__status {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    font-family: var(--heading-font-family, 'Oswald', sans-serif);
    font-size: 1.8rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 20px 40px;
    border-radius: 10px;
}

.video-player__status i {
    font-size: 3rem;
}

.video-player__status--pending {
    color: #facc15;
}

.video-player__status--rendering {
    color: #7aa6ff;
}

.video-player__status--failed {
    color: #ef4444;
}

.video-player__status--expired {
    color: #facc15;
}

/* Mobile navigation buttons inside video player - hidden by default */
.video-player__mobile-nav {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    color: #ffffff;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.video-player__mobile-nav--previous {
    left: 10px;
}

.video-player__mobile-nav--next {
    right: 10px;
}

.video-player__mobile-nav i {
    font-size: 1.9rem;
}

.video-page__details {
    position: relative;
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    justify-self: center;
    width: var(--video-player-width);
    display: grid;
    font-size: var(--sidebar-label-font-size);
    color: var(--heading-color);
}

@media (max-width: 767px) {
    /* Show mobile navigation buttons inside video player */
    .video-player__mobile-nav {
        display: flex;
        height: 100%;
    }
    
    /* Fixed distance from top of page to media box (same for all ratios) */
    .video-page__player-shell {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto; /* Remove vh-based first row */
        padding-top: var(--video-player-distance); /* Fixed distance from top of page to media box */
    }
    
    .video-player {
        grid-column: 1;
        grid-row: 1; /* Move video to first row */
        align-self: start; /* Align to top */
    }
    
    .video-page__details {
        grid-column: 1;
        grid-row: 3;
    }
}

.video-player--ratio-16-9 {
    height: calc(var(--video-player-width-16-9) / 16 * 9);
    width: var(--video-player-width-16-9);
}

.video-player--ratio-9-16 {
    height: calc(var(--video-player-width-9-16) / 9 * 16);
    width: var(--video-player-width-9-16);
}

.video-player--ratio-4-3 {
    height: calc(var(--video-player-width-4-3) / 4 * 3);
    width: var(--video-player-width-4-3);
}

.video-player--ratio-3-4 {
    height: calc(var(--video-player-width-3-4) / 3 * 4);
    width: var(--video-player-width-3-4);
}

.video-player--ratio-1-1 {
    height: calc(var(--video-player-width-1-1) / 1 * 1);
    width: var(--video-player-width-1-1);
}

.video-player--ratio-2-3 {
    height: calc(var(--video-player-width-2-3) / 2 * 3);
    width: var(--video-player-width-2-3);
}

.video-player--ratio-3-2 {
    height: calc(var(--video-player-width-3-2) / 3 * 2);
    width: var(--video-player-width-3-2);
}

.video-player--ratio-2-1 {
    height: calc(var(--video-player-width-2-1) / 2 * 1);
    width: var(--video-player-width-2-1);
}

.video-player--ratio-1-2 {
    height: calc(var(--video-player-width-1-2) / 1 * 2);
    width: var(--video-player-width-1-2);
}

.video-player__media,
.video-player__fallback-image {
    height: 100%;
    width: 100%;
    object-fit: contain;
    display: block;
}

.video-player__preview {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
}

html.has-js .video-player__preview::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        rgba(0, 0, 0, 0.45),
        rgba(0, 0, 0, 0.45)
    );
    opacity: 0.35;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

html.has-js .video-player__preview.is-playing::before {
    opacity: 0;
}

.video-player__preview-play {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.65);
    color: #ffffff;
    font-size: 1.8rem;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}

html.has-js .video-player__preview-play:hover,
html.has-js .video-player__preview-play:focus-visible {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.05);
}

html.has-js .video-player__preview-play:active {
    transform: scale(0.96);
}

html.has-js .video-player__preview.is-playing .video-player__preview-play {
    opacity: 0;
    pointer-events: none;
}

.video-player__preview-play-icon i {
    margin-left: 4px;
}

.video-player__photo {
    height: 100%;
    object-fit: fill;
    display: block;
    background-color: #000000;
    transition: transform 240ms ease;
}

.video-player__photo-link {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.video-player__photo-label {
    position: absolute;
    bottom: 0;
    padding: 6px 14px;
    background-color: rgba(0, 0, 0, 0.6);
    color: #ffffff;
    font-size: 1.3rem;
    text-transform: none;
    letter-spacing: 0.06em;
    width: 100%;
    text-align: center;
    z-index: 2;
}

.video-player__photo-link:hover .video-player__photo,
.video-player__photo-link:focus-visible .video-player__photo {
    transform: scale(1.1);
}

.video-player__fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: rgba(255, 255, 255, 0.7);
    font-style: italic;
    font-size: 1rem;
    text-align: center;
}

/* Meta rows - compact height, same font size as sidebar (0.9rem) */
.video-page__meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    column-gap: 12px;
    width: 100%;
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    height: 32px;
    box-sizing: border-box;
    overflow: hidden;
}

/* Bottom row with tags and meta info */
.video-page__meta-row--bottom {
    justify-content: space-between;
}

.video-page__meta-row--actors {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.video-page__meta-secondary {
    margin-left: auto;
    font-size: 0.9rem;
}

.video-page__action {
    position: absolute;
    top: calc(var(--video-page-button-top-distance) - var(--video-player-top-distance));
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    margin-top: 0;
    display: flex;
    justify-content: center;
    z-index: 100;
}

/* Mobile WFV button - hidden by default */
.video-page__action--mobile {
    display: none;
}

@media (max-width: 767px) {
    /* Hide original WFV button inside details on mobile */
    .video-page__details .video-page__action {
        display: none;
    }
    
    /* Show mobile WFV button between video and details */
    .video-page__action--mobile {
        display: flex;
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        margin: 24px 0;
        justify-content: center;
    }
}

.video-page__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 32px;
    background-color: #161A23;
    color: #ffffff;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
    cursor: pointer;
}

.video-page__button:hover,
.video-page__button:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.video-page__button:focus {
    outline: none;
}

.video-page__button:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 4px;
}

.video-page__footer {
    position: absolute;
    bottom: 8px;
    margin-top: 10px;
    padding-top: 16px;
    left: 0;
    right: 197px;
}

.video-page__footer-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: center;
}

.video-page__footer-item {
    margin: 0;
}

.video-page__footer-link {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.2s ease;
}

.video-page__footer-link:hover,
.video-page__footer-link:focus-visible {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: underline;
}

.video-page__footer-link:focus {
    outline: none;
}

.video-page__footer-link:focus-visible {
    outline: 1px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

.video-page__sidebar {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.video-page__sidebar-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@media (min-width: 1607px) {
    .video-page__sidebar-list {
        min-height: 914px;
    }
}
.video-page__sidebar-title, .video-page__sidebar-title--mobile {
    font-size: 1rem;
    font-weight: 600;
    color: var(--heading-color);
    margin-bottom: 8px;
    text-align: center;
}

/* Mobile sidebar title - hidden by default */
.video-page__sidebar-title--mobile {
    display: none;
}

.video-page__sidebar-empty {
    padding: 18px;
    border-radius: 14px;
    background-color: rgba(27, 31, 42, 0.8);
    color: rgba(255, 255, 255, 0.7);
    font-style: italic;
    font-size: 0.95rem;
}

.video-preview {
    position: relative;
}

.video-preview__link {
    position: relative;
    display: block;
    text-decoration: none;
    overflow: hidden;
    background-color: #0d111a;
}

.video-preview__image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.25s ease;
}

.video-preview__link:hover .video-preview__image,
.video-preview__link:focus-visible .video-preview__image {
    transform: scale(1.1);
}

.video-preview__title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 6px 8px;
    background-color: rgba(0, 0, 0, 0.6);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 500;
    z-index: 2;
}

.video-preview__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

.video-page__empty {
    margin: 60px auto;
    padding: 40px 48px;
    max-width: 560px;
    text-align: center;
    border-radius: 18px;
    border: 1px dashed rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.75);
    font-size: 1.05rem;
}

@media (max-width: 1606px) {
    /* Change layout to single column */
    .video-page__layout {
        grid-template-columns: 1fr;
    }
    
    .video-page__layout {
        position: relative;
    }
    .video-page__sidebar {
        position: absolute;
        top: calc(var(--video-page-button-top-distance) + 80px); /* Below button */
        left: 50%;
        transform: translateX(-50%);
        width: var(--video-player-width);
    }
    
    .video-page__sidebar-title {
        display: none;
    }
    .video-page__sidebar-title--mobile {
        display: block;
    }
    
    .video-page__sidebar-list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 12px;
        justify-content: space-between;
    }
    
    .video-preview {
        flex: 0 0 140px;
        width: 140px;
    }
    
    /* Hide 7th preview item - show only 6 */
    .video-preview:nth-child(7) {
        display: none;
    }
    
    .video-preview__image {
        height: 105px;
        aspect-ratio: auto;
    }
    
    .video-preview__title {
        font-size: 0.7rem;
        padding: 4px 6px;
    }
    
    /* Footer at fixed position below sidebar */
    .video-page__footer {
        position: absolute;
        top: calc(var(--video-page-button-top-distance) + 224px); /* Below sidebar (adjust based on sidebar height) */
        bottom: auto;
        left: 0;
        right: 0;
        padding-bottom: 30px;
    }
    
    /* Ensure page has enough height for absolute elements */
    .video-page {
        min-height: calc(var(--video-page-button-top-distance) + 310px);
    }
}

@media (max-width: 1440px) {
    .video-preview:nth-child(6) {
        display: none;
    }
    .video-preview {
        flex: 0 0 150px;
        width: 150px;
    }
}

@media (max-width: 1299px) {
    .video-preview:nth-child(5) {
        display: none;
    }
    .video-preview {
        flex: 0 0 146px;
        width: 146px;
    }
}

@media (max-width: 1023px) {
    .video-preview {
        flex: 0 0 142px;
        width: 142px;
    }
}
@media (max-width: 767px) {
    /* Sidebar - relative positioning, flows after details */
    .video-page__sidebar {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 100%;
        padding: 0 12px;
    }
    .video-page__sidebar-list {
        width: var(--video-player-width);
        margin: auto;
    }
    
    .video-preview {
        flex: 0 0 calc(50% - 6px);
        width: calc(50% - 6px);
    }
    
    .video-preview__image {
        height: auto;
        aspect-ratio: 4 / 3;
    }
    
    /* Footer - relative positioning, flows after sidebar */
    .video-page__footer {
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        padding-bottom: 20px;
        width: var(--video-player-width);
        margin: auto;
    }
    
    /* Remove min-height constraint for mobile */
    .video-page {
        min-height: auto;
    }
}