/* Dedicated Videos hub */
.video-hub-page {
    --video-hub-accent: #ad5d55;
    --video-hub-accent-dark: #8f4944;
    --video-hub-ink: #23201f;
    --video-hub-cream: #f7f1e9;
    --video-hub-card: #fffaf4;
    width: min(100%, 1240px);
    margin: 0 auto;
    color: var(--video-hub-ink);
}

.video-hub-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 10px 2px 24px;
}

.video-hub-header > div > span,
.video-hub-detail > span {
    display: block;
    margin-bottom: 6px;
    color: var(--video-hub-accent);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.video-hub-header h1 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 500;
    line-height: .98;
}

.video-hub-header p {
    max-width: 610px;
    margin: 10px 0 0;
    color: #716a66;
}

.video-hub-upload,
.video-hub-book,
.video-hub-create-modal .btn-primary,
.video-hub-detail .btn-primary {
    border-color: var(--video-hub-accent) !important;
    background: var(--video-hub-accent) !important;
    color: #fff !important;
}

.video-hub-upload:hover,
.video-hub-book:hover,
.video-hub-create-modal .btn-primary:hover,
.video-hub-detail .btn-primary:hover {
    border-color: var(--video-hub-accent-dark) !important;
    background: var(--video-hub-accent-dark) !important;
}

.video-hub-controls {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
    padding: 7px;
    border: 1px solid rgba(56, 45, 40, .1);
    border-radius: 18px;
    background: rgba(255, 250, 244, .92);
    box-shadow: 0 12px 30px rgba(64, 46, 40, .06);
    backdrop-filter: blur(14px);
}

.video-hub-tabs {
    display: flex;
    gap: 4px;
    min-width: 0;
}

.video-hub-tabs button {
    min-height: 42px;
    padding: 8px 18px;
    border: 0;
    border-radius: 13px;
    background: transparent;
    color: #716a66;
    font-weight: 750;
    white-space: nowrap;
}

.video-hub-tabs button.active {
    background: var(--video-hub-accent);
    color: #fff;
    box-shadow: 0 8px 18px rgba(173, 93, 85, .24);
}

.video-hub-topic-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 12px;
    border-radius: 13px;
    color: #716a66;
    background: #f3ebe3;
}

.video-hub-topic-filter select {
    max-width: 190px;
    border: 0;
    outline: 0;
    color: inherit;
    background: transparent;
    font-weight: 700;
}

.video-hub-layout {
    display: grid;
    grid-template-columns: minmax(420px, 1fr) 320px;
    align-items: start;
    gap: clamp(24px, 4vw, 52px);
}

.video-hub-list-shell {
    position: relative;
    min-width: 0;
}

.video-hub-list {
    display: grid;
    justify-items: center;
    gap: 28px;
    min-width: 0;
    transition: opacity .2s ease;
}

.video-hub-list.is-loading {
    opacity: .55;
    pointer-events: none;
}

.video-hub-card {
    width: min(100%, 470px);
    scroll-snap-align: start;
}

.video-hub-stage {
    position: relative;
    height: min(72vh, 760px);
    min-height: 590px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 28px;
    background: #171413;
    box-shadow: 0 28px 70px rgba(42, 30, 27, .22);
    isolation: isolate;
}

.video-hub-stage video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #171413;
}

.video-hub-open-preview,
.video-hub-mobile-navigation {
    display: none;
}

.video-hub-gradient {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(10, 8, 8, .08) 38%, rgba(10, 8, 8, .82) 100%);
}

.video-hub-overlay {
    position: absolute;
    z-index: 2;
    right: 78px;
    bottom: 24px;
    left: 24px;
    color: #fff;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .4);
}

.video-hub-overlay strong {
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.45rem;
    line-height: 1.1;
}

.video-hub-creator {
    display: inline-flex;
    color: inherit;
    text-decoration: none;
}

.video-hub-creator:hover,
.video-hub-creator:focus-visible {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.video-hub-overlay > span {
    display: block;
    margin-top: 5px;
    color: rgba(255, 255, 255, .78);
    font-size: .8rem;
    font-weight: 700;
}

.video-hub-overlay p {
    display: -webkit-box;
    max-width: 34rem;
    margin: 11px 0 14px;
    overflow: hidden;
    font-size: .92rem;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.video-hub-book {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 9px 14px;
    border: 1px solid var(--video-hub-accent);
    border-radius: 12px;
    font-size: .84rem;
    font-weight: 800;
    text-decoration: none;
    text-shadow: none;
}

.video-hub-actions {
    position: absolute;
    right: 14px;
    bottom: 20px;
    z-index: 3;
    display: grid;
    justify-items: center;
    gap: 9px;
}

.video-hub-actions button {
    display: grid;
    place-items: center;
    gap: 2px;
    width: 54px;
    min-height: 54px;
    padding: 5px 3px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 17px;
    background: rgba(28, 23, 22, .5);
    color: #fff;
    font-size: .65rem;
    font-weight: 750;
    line-height: 1;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .4);
    backdrop-filter: blur(12px);
}

.video-hub-actions button i {
    font-size: 1.25rem;
}

.video-hub-actions button.active {
    border-color: rgba(255, 189, 183, .75);
    background: var(--video-hub-accent);
}

.video-hub-actions button:disabled {
    opacity: .55;
}

.video-hub-actions .video-hub-delete {
    border-color: rgba(255, 190, 199, .4);
    background: rgba(91, 16, 29, .62);
}

.video-hub-actions .video-hub-delete:hover,
.video-hub-actions .video-hub-delete:focus-visible {
    border-color: rgba(255, 210, 216, .9);
    background: rgba(126, 25, 42, .9);
    outline: 3px solid rgba(255, 255, 255, .72);
    outline-offset: 2px;
}

.video-hub-audience {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 999px;
    background: rgba(28, 23, 22, .56);
    color: #fff;
    font-size: .74rem;
    font-weight: 750;
    backdrop-filter: blur(12px);
}

.video-hub-unavailable {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 12px;
    width: 100%;
    height: 100%;
    padding: 30px;
    color: rgba(255, 255, 255, .78);
    text-align: center;
}

.video-hub-unavailable i {
    font-size: 2rem;
}

.video-hub-detail {
    position: sticky;
    top: 94px;
    padding: 26px;
    border: 1px solid rgba(56, 45, 40, .1);
    border-radius: 24px;
    background: var(--video-hub-card);
    box-shadow: 0 20px 48px rgba(64, 46, 40, .08);
}

.video-hub-detail h2 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.55rem;
}

.video-hub-detail > p {
    color: #776f6b;
    font-size: .9rem;
    line-height: 1.55;
}

.video-hub-detail dl {
    display: grid;
    gap: 0;
    margin: 22px 0;
}

.video-hub-detail dl div {
    display: grid;
    grid-template-columns: 82px 1fr;
    gap: 10px;
    padding: 12px 0;
    border-top: 1px solid rgba(56, 45, 40, .09);
}

.video-hub-detail dt {
    color: #8d837e;
    font-size: .75rem;
    font-weight: 800;
    text-transform: uppercase;
}

.video-hub-detail dd {
    margin: 0;
    font-weight: 750;
}

.video-hub-empty {
    display: grid;
    place-items: center;
    width: min(100%, 640px);
    min-height: 420px;
    padding: 48px 28px;
    border: 1px dashed rgba(173, 93, 85, .35);
    border-radius: 28px;
    background: rgba(255, 250, 244, .72);
    text-align: center;
}

.video-hub-empty > i {
    color: var(--video-hub-accent);
    font-size: 2.5rem;
}

.video-hub-empty h2 {
    margin: 14px 0 6px;
    font-family: Georgia, "Times New Roman", serif;
}

.video-hub-empty p {
    max-width: 430px;
    color: #766d69;
}

.video-hub-create-modal {
    overflow: hidden;
    border: 0;
    border-radius: 24px;
}

.video-hub-create-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    background: var(--video-hub-cream);
}

.video-hub-create-grid label:not(.video-hub-check) {
    display: grid;
    gap: 7px;
    font-size: .85rem;
    font-weight: 750;
}

.video-hub-field-full {
    grid-column: 1 / -1;
}

.video-hub-create-grid small {
    color: #776f6b;
    font-weight: 500;
}

.video-hub-topic-picker {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.video-hub-topic-picker legend {
    margin: 0 0 3px;
    font-size: .85rem;
    font-weight: 750;
}

.video-hub-topic-picker > small {
    display: block;
    margin-bottom: 10px;
}

.video-hub-topic-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 188px;
    overflow-y: auto;
    padding: 2px 3px 4px 2px;
    overscroll-behavior: contain;
}

.video-hub-create-grid .video-hub-topic-choice {
    position: relative;
    display: inline-flex;
    cursor: pointer;
}

.video-hub-topic-choice input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.video-hub-topic-choice span {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 9px 13px;
    border: 1px solid rgba(56, 45, 40, .16);
    border-radius: 999px;
    background: #fff;
    color: var(--video-hub-ink);
    font-size: .82rem;
    font-weight: 750;
    line-height: 1.2;
    transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}

.video-hub-topic-choice input:checked + span {
    border-color: var(--video-hub-accent);
    background: var(--video-hub-accent);
    color: #fff;
    box-shadow: 0 6px 16px rgba(173, 93, 85, .24);
}

.video-hub-topic-choice input:focus-visible + span {
    outline: 3px solid rgba(173, 93, 85, .2);
    outline-offset: 2px;
}

.video-hub-client-audience {
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem .9rem;
    border: 1px solid rgba(173, 93, 85, .24);
    border-radius: 14px;
    background: rgba(173, 93, 85, .08);
    color: var(--video-hub-ink);
}

.video-hub-client-audience i {
    flex: 0 0 auto;
    font-size: 1.25rem;
    color: var(--video-hub-accent);
}

.video-hub-client-audience span {
    display: grid;
    gap: .1rem;
    line-height: 1.35;
}

.video-hub-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border-radius: 12px;
    background: #fff;
    font-size: .84rem;
}

.video-hub-check input {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    accent-color: var(--video-hub-accent);
}

.video-hub-viewer-modal .modal-content {
    height: min(92svh, 920px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 24px;
    background: #12100f;
    color: #fff;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .48);
}

.video-hub-viewer-modal .modal-header {
    position: relative;
    z-index: 3;
    flex: 0 0 auto;
    border-bottom-color: rgba(255, 255, 255, .12);
}

.video-hub-viewer-modal .modal-title {
    overflow: hidden;
    font-size: 1.05rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.video-hub-viewer-modal .modal-dialog {
    width: min(96vw, 1420px);
    max-width: min(96vw, 1420px);
}

.video-hub-viewer-modal .video-hub-viewer-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(350px, 400px);
    min-height: 0;
    padding: 0;
    background: #080707;
}

.video-hub-viewer-media {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 0;
    place-items: center;
    background: #080707;
}

.video-hub-viewer-media video {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
    background: #080707;
}

.video-hub-viewer-playback-status {
    position: absolute;
    right: 24px;
    bottom: 24px;
    left: 24px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 12px;
    background: rgba(118, 31, 27, .92);
    color: #fff;
    text-align: center;
}

.video-hub-viewer-engagement {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-left: 1px solid rgba(255, 255, 255, .12);
    background: #fffaf4;
    color: var(--video-hub-ink);
}

.video-hub-viewer-rating {
    padding: 18px 20px;
    border-bottom: 1px solid rgba(56, 45, 40, .1);
    background: #fff;
}

.video-hub-viewer-rating h3,
.video-hub-viewer-comments h3 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.05rem;
}

.video-hub-viewer-rating > div {
    min-height: 40px;
    margin-top: 8px;
    color: #716a66;
}

.video-hub-viewer-rating .content-rating {
    flex-wrap: wrap;
}

.video-hub-viewer-rating .content-rating__status {
    flex-basis: 100%;
    min-height: 1rem;
}

.video-hub-viewer-comments {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-height: 0;
}

.video-hub-viewer-comments > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px 12px;
}

.video-hub-viewer-comments > header > span {
    display: grid;
    min-width: 30px;
    min-height: 30px;
    padding: 4px 8px;
    place-items: center;
    border-radius: 999px;
    background: #f0e4dc;
    color: var(--video-hub-accent-dark);
    font-size: .78rem;
    font-weight: 800;
}

.video-hub-viewer-comment-list {
    display: grid;
    align-content: start;
    gap: 14px;
    min-height: 0;
    padding: 4px 20px 18px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: rgba(173, 93, 85, .45) transparent;
    scrollbar-width: thin;
}

.video-hub-viewer-comments-empty {
    margin: 8px 0;
    color: #776f6b;
    font-size: .88rem;
}

.video-hub-viewer-comments-empty.is-error,
.video-hub-viewer-rating .is-error,
.video-hub-viewer-comment-submit-row > span.is-error {
    color: #a33d35;
}

.video-hub-viewer-comment {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
}

.video-hub-viewer-comment-avatar {
    display: grid;
    width: 38px;
    height: 38px;
    overflow: hidden;
    place-items: center;
    border-radius: 50%;
    background: #eadbd2;
    color: var(--video-hub-accent-dark);
}

.video-hub-viewer-comment-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-hub-viewer-comment > div:last-child {
    min-width: 0;
    padding: 10px 12px;
    border-radius: 4px 14px 14px;
    background: #f2eae4;
}

.video-hub-viewer-comment.is-own > div:last-child {
    background: #f5ded9;
}

.video-hub-viewer-comment header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.video-hub-viewer-comment strong {
    overflow: hidden;
    font-size: .82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.video-hub-viewer-comment time {
    flex: 0 0 auto;
    color: #8d837e;
    font-size: .68rem;
}

.video-hub-viewer-comment p {
    margin: 5px 0 0;
    overflow-wrap: anywhere;
    font-size: .86rem;
    line-height: 1.4;
    white-space: pre-wrap;
}

.video-hub-viewer-comment-form {
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(56, 45, 40, .1);
    background: #fff;
}

.video-hub-viewer-comment-form textarea {
    display: block;
    width: 100%;
    min-height: 64px;
    max-height: 132px;
    padding: 10px 12px;
    resize: vertical;
    border: 1px solid rgba(56, 45, 40, .16);
    border-radius: 12px;
    outline: none;
    background: #fffaf4;
    color: var(--video-hub-ink);
}

.video-hub-viewer-comment-form textarea:focus {
    border-color: var(--video-hub-accent);
    box-shadow: 0 0 0 3px rgba(173, 93, 85, .14);
}

.video-hub-viewer-comment-submit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
}

.video-hub-viewer-comment-submit-row > span {
    min-width: 0;
    color: #716a66;
    font-size: .76rem;
}

.video-hub-viewer-comment-submit-row button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px;
    padding: 8px 14px;
    border: 0;
    border-radius: 12px;
    background: var(--video-hub-accent);
    color: #fff;
    font-weight: 800;
}

.video-hub-viewer-comment-submit-row button:disabled {
    opacity: .6;
}

@media (min-width: 992px) {
    .video-hub-list {
        display: flex;
        align-items: flex-start;
        justify-items: initial;
        gap: 24px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 4px 4px 22px;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scrollbar-color: rgba(173, 93, 85, .45) rgba(173, 93, 85, .08);
        scrollbar-width: thin;
    }

    .video-hub-card {
        flex: 0 0 min(100%, 470px);
    }

    .video-hub-open-preview {
        position: absolute;
        top: 16px;
        right: 16px;
        z-index: 4;
        display: grid;
        place-items: center;
        width: 46px;
        min-height: 46px;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, .34);
        border-radius: 14px;
        background: rgba(24, 20, 19, .64);
        color: #fff;
        cursor: zoom-in;
        backdrop-filter: blur(12px);
    }

    .video-hub-expand-indicator {
        display: grid;
        place-items: center;
    }

    .video-hub-mobile-navigation {
        position: absolute;
        inset: 0 0 22px;
        z-index: 6;
        display: block;
        pointer-events: none;
    }

    .video-hub-mobile-navigation[hidden] {
        display: none;
    }

    .video-hub-mobile-navigation button {
        position: absolute;
        top: 50%;
        display: grid;
        place-items: center;
        width: 48px;
        min-height: 48px;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, .45);
        border-radius: 50%;
        background: rgba(24, 20, 19, .72);
        color: #fff;
        font-size: 1.35rem;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .24);
        transform: translateY(-50%);
        pointer-events: auto;
        backdrop-filter: blur(12px);
    }

    .video-hub-mobile-navigation button[data-video-hub-prev] {
        left: 14px;
    }

    .video-hub-mobile-navigation button[data-video-hub-next] {
        right: 14px;
    }

    .video-hub-mobile-navigation button:disabled {
        opacity: .24;
        pointer-events: none;
    }
}

@media (max-width: 991.98px) {
    .video-hub-viewer-modal {
        width: 100vw;
        max-width: 100vw;
        padding: 0 !important;
        overflow: hidden;
    }

    .video-hub-page {
        width: calc(100% + 24px);
        margin: -4px -12px 0;
    }

    .video-hub-header {
        align-items: center;
        padding: 8px 16px 14px;
    }

    .video-hub-header > div > span,
    .video-hub-header p {
        display: none;
    }

    .video-hub-header h1 {
        font-size: 2rem;
    }

    .video-hub-upload {
        min-height: 44px;
        padding-inline: 14px;
        border-radius: 13px;
    }

    .video-hub-controls {
        position: sticky;
        top: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        margin: 0;
        padding: 6px 12px 10px;
        border: 0;
        border-radius: 0;
        background: rgba(247, 241, 233, .96);
        box-shadow: 0 8px 20px rgba(46, 34, 31, .06);
        scrollbar-width: none;
    }

    .video-hub-controls::-webkit-scrollbar,
    .video-hub-list::-webkit-scrollbar {
        display: none;
    }

    .video-hub-tabs button {
        min-height: 44px;
        min-width: 0;
        padding: 8px 5px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .video-hub-tabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }

    .video-hub-topic-filter {
        width: 100%;
        min-height: 44px;
        padding-inline: 10px;
    }

    .video-hub-topic-filter select {
        flex: 1;
        max-width: none;
    }

    .video-hub-layout {
        display: block;
    }

    .video-hub-list-shell {
        overflow: hidden;
        background: #171413;
    }

    .video-hub-detail {
        display: none;
    }

    .video-hub-list {
        --video-hub-mobile-nav-clearance: calc(var(--fx-mobile-nav-height, 78px) + env(safe-area-inset-bottom));
        display: flex;
        width: 100%;
        height: max(0px, calc(100svh - 264px - var(--video-hub-mobile-nav-clearance)));
        min-height: 0;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        touch-action: pan-x pinch-zoom;
        scrollbar-width: none;
        background: #171413;
    }

    .video-hub-card {
        flex: 0 0 100%;
        width: 100%;
        height: 100%;
        min-height: 0;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .video-hub-stage {
        width: 100%;
        height: 100%;
        min-height: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .video-hub-open-preview {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: block;
        width: 100%;
        padding: 0;
        border: 0;
        background: transparent;
        color: #fff;
        cursor: zoom-in;
    }

    .video-hub-open-preview:focus-visible {
        outline: 3px solid #fff;
        outline-offset: -5px;
    }

    .video-hub-expand-indicator {
        position: absolute;
        top: 12px;
        right: 12px;
        display: grid;
        place-items: center;
        width: 44px;
        min-height: 44px;
        border: 1px solid rgba(255, 255, 255, .3);
        border-radius: 14px;
        background: rgba(28, 23, 22, .56);
        font-size: 1rem;
        backdrop-filter: blur(12px);
    }

    .video-hub-mobile-navigation {
        position: absolute;
        inset: 0;
        z-index: 6;
        display: block;
        pointer-events: none;
    }

    .video-hub-mobile-navigation[hidden] {
        display: none;
    }

    .video-hub-mobile-navigation button {
        position: absolute;
        top: 46%;
        display: grid;
        place-items: center;
        width: 46px;
        min-height: 46px;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, .34);
        border-radius: 50%;
        background: rgba(24, 20, 19, .68);
        color: #fff;
        font-size: 1.35rem;
        box-shadow: 0 8px 26px rgba(0, 0, 0, .28);
        transform: translateY(-50%);
        pointer-events: auto;
        backdrop-filter: blur(12px);
    }

    .video-hub-mobile-navigation button[data-video-hub-prev] {
        left: 10px;
    }

    .video-hub-mobile-navigation button[data-video-hub-next] {
        right: 70px;
    }

    .video-hub-mobile-navigation button:disabled {
        opacity: .25;
        pointer-events: none;
    }

    .video-hub-overlay {
        z-index: 3;
        right: 78px;
        bottom: calc(18px + env(safe-area-inset-bottom));
        left: 16px;
        pointer-events: none;
    }

    .video-hub-overlay a {
        pointer-events: auto;
    }

    .video-hub-overlay strong {
        font-size: 1.25rem;
    }

    .video-hub-overlay p {
        margin-block: 8px 11px;
        font-size: .86rem;
        -webkit-line-clamp: 2;
    }

    .video-hub-actions {
        right: 10px;
        bottom: calc(76px + env(safe-area-inset-bottom));
        z-index: 4;
        gap: 8px;
    }

    .video-hub-actions button {
        width: 52px;
        min-height: 52px;
        border-radius: 16px;
    }

    .video-hub-audience {
        top: 12px;
        left: 12px;
        z-index: 4;
    }

    .video-hub-empty {
        flex: 0 0 100%;
        width: 100%;
        height: 100%;
        min-height: 0;
        border: 0;
        border-radius: 0;
        background: var(--video-hub-cream);
    }

    .video-hub-create-grid {
        grid-template-columns: 1fr;
    }

    .video-hub-field-full {
        grid-column: auto;
    }

    .video-hub-viewer-modal .modal-dialog {
        width: 100vw;
        max-width: 100vw;
        height: 100svh;
        margin: 0;
    }

    .video-hub-viewer-modal .modal-content {
        width: 100vw;
        height: 100svh;
        max-height: none;
        border: 0;
        border-radius: 0;
    }

    .video-hub-viewer-modal .modal-header {
        min-height: 54px;
        padding-block: 8px;
    }

    .video-hub-viewer-modal .video-hub-viewer-layout {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(50svh, 64svh) minmax(0, 1fr);
        flex: 1 1 auto;
    }

    .video-hub-viewer-engagement {
        grid-template-rows: auto auto;
        overflow-x: hidden;
        overflow-y: auto;
        border-top: 1px solid rgba(255, 255, 255, .12);
        border-left: 0;
        overscroll-behavior: contain;
    }

    .video-hub-viewer-rating {
        padding: 10px 14px;
    }

    .video-hub-viewer-rating h3 {
        font-size: .92rem;
    }

    .video-hub-viewer-rating > div {
        min-height: 36px;
        margin-top: 3px;
    }

    .video-hub-viewer-rating .content-rating__star {
        width: 40px;
        height: 40px;
    }

    .video-hub-viewer-comments > header {
        padding: 10px 14px 7px;
    }

    .video-hub-viewer-comments {
        grid-template-rows: auto minmax(88px, 1fr) auto;
        min-height: 300px;
    }

    .video-hub-viewer-comment-list {
        gap: 10px;
        padding: 3px 14px 10px;
    }

    .video-hub-viewer-comment-form {
        padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
    }

    .video-hub-viewer-comment-form textarea {
        min-height: 52px;
    }

    .video-hub-viewer-comment-submit-row {
        margin-top: 6px;
    }
}

@media (max-width: 575.98px) {
    .video-hub-upload span {
        display: none;
    }

    .video-hub-upload {
        width: 44px;
        padding: 0;
    }

    .video-hub-create-modal {
        border-radius: 18px 18px 0 0;
    }

    .video-hub-viewer-modal .video-hub-viewer-layout {
        grid-template-rows: minmax(0, 52svh) minmax(0, 1fr);
    }

    .video-hub-viewer-engagement {
        grid-template-rows: auto minmax(0, 1fr);
        overflow: hidden;
    }

    .video-hub-viewer-rating {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        gap: 4px;
        padding: 6px 12px;
    }

    .video-hub-viewer-rating > div {
        min-height: 0;
        margin-top: 0;
        justify-self: stretch;
    }

    .video-hub-viewer-rating .content-rating {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 4px 8px;
        padding: 6px 8px;
    }

    .video-hub-viewer-rating .content-rating__star {
        flex-basis: 32px;
        width: 32px;
        height: 32px;
    }

    .video-hub-viewer-comments {
        grid-template-rows: auto minmax(44px, 1fr) auto;
        min-height: 0;
        overflow: hidden;
    }

    .video-hub-viewer-comments > header {
        padding: 8px 12px 5px;
    }

    .video-hub-viewer-comment-list {
        padding: 2px 12px 8px;
    }

    .video-hub-viewer-comment-form {
        display: block;
        padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    }

    .video-hub-viewer-comment-form textarea {
        min-height: 46px;
        max-height: 96px;
        resize: none;
    }

    .video-hub-viewer-comment-submit-row {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        margin-top: 6px;
    }

    .video-hub-viewer-comment-submit-row > span {
        width: 100%;
    }

    .video-hub-viewer-comment-submit-row > span:empty {
        display: none;
    }

    .video-hub-viewer-comment-submit-row button {
        width: 100%;
        min-height: 48px;
    }
}

.video-hub-viewer-delete {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 42px;
    margin-left: auto;
    padding: 7px 11px;
    border: 1px solid rgba(255, 196, 204, .4);
    border-radius: 11px;
    background: rgba(105, 24, 38, .58);
    color: #fff;
    font-size: .78rem;
    font-weight: 800;
}

.video-hub-viewer-delete[hidden] {
    display: none;
}

.video-hub-comment-delete {
    color: #a33a48;
}

@media (max-width: 767.98px) {
    .video-hub-viewer-delete,
    .video-hub-comment-delete {
        min-width: 44px;
        min-height: 44px;
    }

    .video-hub-viewer-delete span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

@media (max-width: 991.98px) and (orientation: landscape) {
    .video-hub-viewer-modal .video-hub-viewer-layout {
        grid-template-columns: minmax(0, 1.5fr) minmax(300px, .7fr);
        grid-template-rows: minmax(0, 1fr);
    }

    .video-hub-viewer-engagement {
        grid-template-rows: auto minmax(0, 1fr);
        overflow: hidden;
        border-top: 0;
        border-left: 1px solid rgba(255, 255, 255, .12);
    }

    .video-hub-viewer-comments {
        grid-template-rows: auto minmax(0, 1fr) auto;
        min-height: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .video-hub-list {
        scroll-behavior: auto;
    }
}