@import "../_gallery";

.c-gallery {
    background-color: $COLOUR_BG_GALLERY;
    max-width: none;
    padding: $MOBILE_SIDE_GUTTER;

    @include min-screen($TABLET_SIDE_GUTTER_BREAKPOINT) {
        padding: $DESKTOP_SIDE_GUTTER;
    }

    &:hover,
    &:focus {
        .c-gallery__title,
        .c-gallery__byline-name {
            @include card-text-links-hover();
        }
        .c-gallery__images {
            @include card-image-links-hover();
        }
    }
}

.c-gallery__btn {

}

.c-gallery__byline {
    @include c-card-byline;
    margin-bottom: 14px;
    margin-top: $MARGIN_XX_SMALL;

    @include min-screen($FEATURE_LARGE_BREAKPOINT) {
        margin-bottom: $MARGIN_SMALL;
        margin-top: $MARGIN_X_SMALL;
    }
}

.c-gallery__byline-name {
    @include c-card-byline-name;
}

.c-gallery__byline-prefix {
    @include c-card-byline-prefix;
    margin-right: 2px;
}

.c-gallery__desc {
    display: none;
}
.c-gallery__image-main {
    @include gallery-slice-at-medium(){
        display: table-cell;
        vertical-align: middle;
        width: 75%;
    }
}
.c-gallery__image-main,
.c-gallery__image-strip {
    img {
        width: 100%;
    }
}
.c-gallery__image-strip--large {
    @include gallery-slice-at-medium(){
        display: table-cell;
        vertical-align: middle;
        width: 25%;
    }
}
.c-gallery__image-strip--medium {
    @include screen($GALLERY_MEDIUM_BREAKPOINT, $GALLERY_LARGE_BREAKPOINT) {
        .c-gallery__image-strip-item {
            width: 100%;
        }
    }
}
.c-gallery__image-strip--small {}
.c-gallery__image-strip-item {}
.c-gallery__image-strip-item__remaining {
    background-color: rgba(0, 0, 0, 0.38);
    color: $COLOR_MAIN_PAGE;
    @include font('NOBEL', 24px, null, 25px);
}

.c-gallery__image-strip-item__remaining-prefix {
    margin-right: -4px;
}
.c-gallery__image-strip-item__remaining-value {

}

.c-gallery__images {
    @include card-image-links-normal();
    @include transition(all 0.3s ease-in-out);

    @include gallery-slice-at-medium(){
        width: 50%;
    }
}
.c-gallery__images-table {}
.c-gallery__link {}
.c-gallery__link--article {}

.c-gallery__meta {
    display: inline-block;

    @include min-screen($CARD_SWITCHER_WIDTH) {
        border-top: 1px solid $COLOR_BORDER_SOLID_ACCENT2;
        padding-top: 8px;
    }

    @include c-card-meta;

    .c-gallery__meta-item {
        &:not(:last-child) {
            padding-right: $PADDING_XX_SMALL;
        }

        & + .c-gallery__meta-item {
            border-left: 1px solid $COLOR_BORDER_SOLID_ACCENT2;
            padding-left: $PADDING_XX_SMALL;
        }
    }
}

.c-gallery__meta-item--date {}
.c-gallery__meta-item--tag {
    @include c-card-meta-tag;
}
.c-gallery__separator {
    display: none;
}

.c-gallery__text {
    position: relative;
    @include gallery-slice-at-medium(){
        width: 50%;
    }

    text-align: center;
}

.c-gallery__text__wrapper {
    background-color: $COLOR_MAIN_PAGE;
    padding: $PADDING_LARGE $PADDING_MEDIUM;
    @include min-screen($FEATURE_LARGE_BREAKPOINT) {
        padding: $PADDING_LARGE $PADDING_X_LARGE;
    }

    @include gallery-slice-at-large(){
        padding: $PADDING_X_LARGE $PADDING_X_LARGE;
    }
}

.c-gallery__title {
    margin: 0 0 $MARGIN_XX_SMALL 0;
    @include font('ITC CASLON', 24px, null, 26px);
    @include min-screen($FEATURE_LARGE_BREAKPOINT) {
        margin: 0 0 $MARGIN_X_SMALL 0;
        @include font-size(35px);
        @include line-height(40px);
    }

    svg {
        border: 1px solid $COLOR_BORDER_SOLID_ACCENT2;
        display: none;
        fill: $COLOR_BORDER_DOTTED;
        margin: 0 auto $MARGIN_MEDIUM auto;
        padding: $PADDING_XX_SMALL;
        width: 15px;
        height: 15px;
        @include min-screen($FEATURE_LARGE_BREAKPOINT) {
            display: block;
        }
    }
}

.c-gallery__visible--medium {
    @include min-screen($GALLERY_MEDIUM_BREAKPOINT) {

    }
}

.c-gallery__visible--small {
    @include max-screen($GALLERY_MEDIUM_BREAKPOINT - 1) {
        display: table-header-group;
    }

    .c-gallery__image-strip-item {
        overflow: hidden;

        &:nth-child(1) {
            float: left;
            width: 66.66%;
        }
    }
}

.c-gallery__wrapper-table {
    margin: 0 auto;
    max-width: $MAXIMUM_PAGE_WIDTH;
    width: 100%;

    @include max-screen($GALLERY_MEDIUM_BREAKPOINT - 1) {
        display: table;
    }
}