/* ==========================================================================
   Page zones: top / main + sidebar / bottom (player page, ready for other pages).

   .page-layout                       the page body, a CSS grid.
   .page-layout.container--has_aside  the sidebar is printed: use this class to style cards differently when
                                      they are next to a sidebar. Example:  .container--has_aside .my-card { ... }
   .page-layout--no-aside             no sidebar (switch off or no widgets): every zone uses the full width.

   The children are in the reading order: top, main, bottom, sidebar. There is no "order" and no "display: contents":
   on mobile the sidebar is the last element of the page because it is the last child.
   On desktop "grid-auto-flow: dense" puts the sidebar in the free cell next to the main zone.
   ========================================================================== */

/* RTL: the first column (main) is on the right, the sidebar on the left. */
.player-page .page-layout,
.page-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: row dense;
    gap: 24px;
    align-items: start;
}

.page-layout.container--has_aside {
    grid-template-columns: minmax(0, 1fr) 320px;
}

.page-layout > .page-body__top,
.page-layout > .page-body__bottom {
    grid-column: 1 / -1;
}

.page-layout > .page-layout__main {
    grid-column: 1;
}

.page-layout > .page-layout__aside {
    grid-column: 2;
}

.page-layout > * {
    min-width: 0;
}

/* The global .sidebar-widget has min-width: 320px, reset it inside the page sidebar. */
.page-layout__aside .sidebar-widget {
    min-width: 0;
}

.page-layout__aside .sidebar-block:last-child > .sidebar-widget:last-child {
    margin-bottom: 0;
}

/* The tabs row sits between the hero and the page body, inside the page container. */
.player-page .container > .tabs-nav {
    margin-bottom: 24px;
}

/* Tablet and mobile: one column, in the order of the DOM (the sidebar is last). */
@media (max-width: 992px) {
    .page-layout,
    .page-layout.container--has_aside {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .page-layout > .page-layout__main,
    .page-layout > .page-layout__aside {
        grid-column: 1;
    }

    .player-page .container > .tabs-nav {
        margin-bottom: 16px;
    }
}