/**
 * Browse page sidebars flanking the trailer list.
 */

.htr-browse-directory__layout {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "main";
    min-width: 0;
}

.htr-browse-directory__main {
    grid-area: main;
    min-width: 0;
}

.htr-browse-directory__sidebar {
    min-width: 0;
}

.htr-browse-directory__sidebar .widget {
    margin-bottom: 1rem;
}

.htr-browse-directory__sidebar .widget:last-child {
    margin-bottom: 0;
}

.htr-browse-directory__sidebar .widget-title {
    margin: 0 0 0.65rem;
    font-size: 1rem;
    color: var(--htr-secondary);
}

.htr-browse-directory__body--has-sidebars {
    width: min(100% - (var(--htr-gutter) * 2), calc(var(--htr-wide) + 560px));
}

@media (max-width: 63.99rem) {
    .htr-browse-directory__layout--has-left,
    .htr-browse-directory__layout--has-right {
        grid-template-areas:
            "main"
            "left"
            "right";
    }

    .htr-browse-directory__sidebar--left {
        grid-area: left;
    }

    .htr-browse-directory__sidebar--right {
        grid-area: right;
    }
}

@media (min-width: 64rem) {
    .htr-browse-directory__layout--has-left.htr-browse-directory__layout--has-right {
        grid-template-columns: minmax(200px, 280px) minmax(0, 1fr) minmax(200px, 280px);
        grid-template-areas: "left main right";
    }

    .htr-browse-directory__layout--has-left:not(.htr-browse-directory__layout--has-right) {
        grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
        grid-template-areas: "left main";
    }

    .htr-browse-directory__layout--has-right:not(.htr-browse-directory__layout--has-left) {
        grid-template-columns: minmax(0, 1fr) minmax(200px, 280px);
        grid-template-areas: "main right";
    }

    .htr-browse-directory__sidebar--left {
        grid-area: left;
    }

    .htr-browse-directory__sidebar--right {
        grid-area: right;
    }
}