/*
 * Lobby Productions - Work filters
 *
 * Keep child video categories directly below their parent category
 * on desktop. Example:
 *
 * TOURISM
 * CAMPAIGNS  MOVIES
 */

.video-shortcode-wrapper .video-filter {
    overflow: visible;
}

/* The parent category is the positioning reference. */
.video-shortcode-wrapper .video-filter .grid-v2-has-children {
    position: relative;
}

/* Child categories sit on one line, centred below the parent. */
.video-shortcode-wrapper .video-filter .grid-v2-has-children > .grid-v2-sub-menu {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 50% !important;
    right: auto !important;

    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 24px;

    width: max-content !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;

    transform: translateX(-50%) !important;

    list-style: none;
    white-space: nowrap;
    z-index: 20;
}

/* Remove layout rules inherited from the old submenu styling. */
.video-shortcode-wrapper .video-filter .grid-v2-sub-menu > li {
    float: none !important;
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/*
 * Reserve room between the main filter row and the video grid.
 * Only browsers seeing a real submenu get the extra space.
 */
.video-shortcode-wrapper .video-filter:has(.grid-v2-sub-menu) {
    margin-bottom: 44px;
}

/* Mobile/tablet: keep the submenu in normal document flow. */
@media (max-width: 767px) {
    .video-shortcode-wrapper .video-filter .grid-v2-has-children > .grid-v2-sub-menu {
        position: static !important;

        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px 18px;

        width: 100% !important;
        margin-top: 8px !important;

        transform: none !important;
        white-space: normal;
    }

    .video-shortcode-wrapper .video-filter:has(.grid-v2-sub-menu) {
        margin-bottom: 20px;
    }
}