styles.scss

// $visual-grid: true !global;

@import "bourbon/bourbon";
@import "base/base";
@import "neat/neat";

@import "refills/navigation";
@import "refills/footer";
@import "refills/embed-responsive";
@import "refills/hero";


.container {
    @include outer-container;

    main & {
        margin-top: $large-spacing;
        margin-bottom: $large-spacing;
    }

    &-header {
        margin-bottom: $base-spacing;

        .navigation-page & {
            display: none;
        }
    }

    &-footer {
        margin-top: $large-spacing;
        clear: both;
    }

    @include media($xlarge-screen) {
        @include outer-container($xlarge-max-width);

        // Hide visual-grid, because it won't scale with the xlarge-max-width
        @at-root body:before {
            display: none;
        }
    }
}

.content {
    &-feature {
        margin-bottom: $base-spacing;
    }

    &-subtitle {
        margin-top: -$base-spacing;
    }

    &-section {
        margin: $large-spacing 0;
    }

    &-header,
    &-text {
        max-width: $base-line-length;
    }

    &-gallery {
        @include clearfix;
        margin-bottom: -$large-spacing;

        .content + & {
            border-top: $base-border;
            padding-top: $large-spacing;
        }

        @include media($large-screen) {
            .lyrics, .press, .post {
                @include span-columns(3);
                @include omega(2n);
            }
        }
    }

    &-columns {
        @include media($large-screen) {
            @include columns(2);
            @include column-gap($base-spacing);

            .content {
                -webkit-column-break-inside: avoid;
                page-break-inside: avoid;
                break-inside: avoid;
                margin-bottom: 0;
                padding-bottom: $base-spacing;
            }
        }
    }
    
    &-flex {
        display: flex;
        justify-content: space-around;

        > * {
            margin: $base-spacing $base-spacing / 2;
        }
    }
}

.gig {

    // TODO: Move to base styles when more schema-ish attributes are added.
    .performer {
        white-space: nowrap;
    }

    @include media($small-screen-only) {
        @include clearfix;
        margin-bottom: $base-spacing;

        &:last-child {
            margin-bottom: -$base-spacing;
        }

        &-date {
            @include span-columns(2);
        }

        &-venue {
            @include span-columns(4);
            @include omega;
        }
    }

    @include media($medium-screen) {
        @at-root &-list {
            display: table;
            table-layout: fixed;
            width: 100%;

            .content-section {
                display: table-row-group;

            }

            h2 {
                white-space: nowrap;
            }
        }

        display: table-row;

        > [class^="gig"] {
            display: table-cell;
            padding-bottom: $base-spacing;
            padding-top: 0;
        }

        &-date {
            padding-right: $small-spacing;
            width: 18%;
        }

        &-venue {
            padding-right: $base-spacing;
            width: 27%;
        }

        &-description {
            padding-left: 0;
            padding-right: 0;
            width: 40%;
        }

        &-details {
            padding-left: $small-spacing;
            padding-right: 0;
            width: 15%;
        }
    }
}

.release-preview {
    @include media($medium-large-screen) {
        @include span-columns(3);
        @include omega(2n);
        margin-bottom: $base-spacing;
    }

    @include media($xlarge-screen) {
        @include span-columns(2);
        @include omega(3n);
        margin-bottom: $base-spacing;
    }
}

.release.content-highlight {
    @include media($medium-screen) {
        @include clearfix;

        .release-cover {
            @include span-columns(3);
        }

        .release-info {
            @include span-columns(3);
            @include omega;
        }
    }
}

.release-detail {
    @include media($medium-screen) {
        .release-cover {
            @include direction-context(right-to-left) {
                @include span-columns(3);
            }
        }

        .release-videos, .release-press {
            clear: both;
        }
    }
}

.video-preview {
    @include media($medium-screen) {
        @include span-columns(2);
        @include omega(3n);
        margin-bottom: $base-spacing;
    }
}

// TODO: More structured markup and classes
.post-callout {
    margin: 0 auto $base-spacing;

    @include media($medium-screen) {
        float: right;
        margin: 0 0 $base-spacing $base-spacing;
    }
}

#about {
    text-align: center;

    .content-text {
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }
}

.large-spacing {
    margin-bottom: $large-spacing;
    margin-top: $large-spacing;
}