@import '../lib';

:root {
    /* GRID */
    --blog-grid-h-spacing: 20px;
    --blog-grid-v-spacing: 40px;
}

/* GRID
=================================================================================*/
.blog56--grid {
    display: grid;
    row-gap: 32px;
    column-gap: 32px;
}
.blog56--grid--1cols {
    grid-template-columns: 1fr;
}
.blog56--grid--2cols {
    grid-template-columns: 1fr 1fr;
}
.blog56--grid--3cols {
    grid-template-columns: 1fr 1fr 1fr;
}
.blog56--grid--4cols {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
.blog56--grid--5cols {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
.blog56--grid--6cols {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}
@include media( tablet ) {
    .blog56--grid--tablet--1cols {
        grid-template-columns: 1fr;
    }
    .blog56--grid--tablet--2cols {
        grid-template-columns: 1fr 1fr;
    }
    .blog56--grid--tablet--3cols {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .blog56--grid--tablet--4cols {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}
@include media( mobile ) {
    .blog56--grid--mobile--1cols {
        grid-template-columns: 1fr;
    }
    .blog56--grid--mobile--2cols {
        grid-template-columns: 1fr 1fr;
    }
}
.post56--grid {
    .post56__text {
        padding: 16px 0 0;
    }
}

/* LIST
=================================================================================*/
.blog56--list {
    display: grid;
    row-gap: 32px;
    column-gap: 32px;
    position: relative;
}
.post56--list {
    display: flex;
    position: relative;
    z-index: 20;

    .post56__text {
        width: 100%;
    }

    .thumbnail56 {
        width: 40%;
        order: 1;
        padding-right: 24px;
        flex: none;
        margin-bottom: 0 !important;

        max-width: 60%;

        @include media( tablet ) {
            padding-right: 14px;
        }
        @include media( mobile ) {
            padding-right: 6px;
        }
    }
    .thumbnail56 + .post56__text {
        width: calc(100% - 40%);
        order: 2;
        flex: none;

        min-width: 40%;
    }
}
.valign-top {
    align-items: stretch;
}
.valign-middle {
    align-items: center;
}
.valign-bottom {
    align-items: flex-end;
}

/**
 * thumbnail right
 */
.post56--list--thumb-right {
    .thumbnail56 {
        order: 3;
        padding-left: 24px;
        padding-right: 0;

        @include media( tablet ) {
            padding-right: 0;
            padding-left: 14px;
        }
        @include media( tablet ) {
            padding-right: 0;
            padding-left: 6px;
        }
    }
}

/* BORDER PROBLEM
=================================================================================*/
.blog56__sep {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
    display: grid;
    column-gap: 32px;
}
.blog56__sep__line {
    display: block;
    height: 100%;
    border-right: 0 solid var(--border-color);
    transform: translate(16px,0);
}
.blog56--grid--1cols {
    .blog56__sep__line {
        display: none;
    }
}
.blog56--grid--2cols {
    .blog56__sep {
        grid-template-columns: 1fr 1fr;
    }
    .line--2,
    .line--3,
    .line--4,
    .line--5 {
        display: none;
    }
}
.blog56--grid--3cols {
    .blog56__sep {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .line--3,
    .line--4,
    .line--5 {
        display: none;
    }
}
.blog56--grid--4cols {
    .blog56__sep {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    .line--4,
    .line--5 {
        display: none;
    }
}
.blog56--grid--5cols {
    .blog56__sep {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    }
    .line--5 {
        display: none;
    }
}
.blog56--grid--6cols {
    .blog56__sep {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    }
}

    /* TABLET VERSION */
    @include media( tablet ) {
        .blog56--grid--tablet--1cols {
            .blog56__sep__line {
                display: none;
            }
        }
        .blog56--grid--tablet--2cols {
            .blog56__sep {
                grid-template-columns: 1fr 1fr;
            }
            .line--1 {
                display: block;
            }
            .line--2,
            .line--3,
            .line--4,
            .line--5 {
                display: none;
            }
        }
        .blog56--grid--tablet--3cols {
            .blog56__sep {
                grid-template-columns: 1fr 1fr 1fr;
            }
            .line--1,
            .line--2 {
                display: block;
            }
            .line--3,
            .line--4,
            .line--5 {
                display: none;
            }
        }
        .blog56--grid--tablet--4cols {
            .blog56__sep {
                grid-template-columns: 1fr 1fr 1fr 1fr;
            }
            .line--1,
            .line--2,
            .line--3 {
                display: block;
            }
            .line--4,
            .line--5 {
                display: none;
            }
        }
    }
    @include media( mobile ) {
        .blog56--grid--mobile--1cols {
            .blog56__sep__line {
                display: none;
            }
        }
        .blog56--grid--mobile--2cols {
            .blog56__sep {
                grid-template-columns: 1fr 1fr;
            }
            .line--1 {
                display: block;
            }
            .line--2,
            .line--3,
            .line--4,
            .line--5 {
                display: none;
            }
        }
    }    

/**
 * POST HORIZONTAL SEP
 */
.post56__sep__line {
    position: absolute;
    top: -16px;
    left: 0;
    right: 0;
    /* no need this, it's complicated
    left: -16px;
    right: -16px; */
    z-index: 11;
    border-top: 1px solid var(--border-color);
}
.griditem56:first-child .post56__sep__line {
    display: none !important; // works in all cases
}
.blog56--grid--2cols,
.blog56--grid--3cols,
.blog56--grid--4cols,
.blog56--grid--5cols,
.blog56--grid--6cols  {
    .griditem56:nth-child(2) .post56__sep__line {
        display: none;
    }
}
.blog56--grid--3cols,
.blog56--grid--4cols,
.blog56--grid--5cols,
.blog56--grid--6cols {
    .griditem56:nth-child(3) .post56__sep__line {
        display: none;
    }
}
.blog56--grid--4cols,
.blog56--grid--5cols,
.blog56--grid--6cols {
    .griditem56:nth-child(4) .post56__sep__line {
        display: none;
    }
}
.blog56--grid--5cols,
.blog56--grid--6cols {
    .griditem56:nth-child(5) .post56__sep__line {
        display: none;
    }
}
.blog56--grid--6cols {
    .griditem56:nth-child(6) .post56__sep__line {
        display: none;
    }
}

    /* TABLET VERSION */
    @include media( tablet ) {

        // restore displaying
        .blog56.blog56--grid--tablet--1cols,
        .blog56.blog56--grid--tablet--2cols,
        .blog56.blog56--grid--tablet--3cols,
        .blog56.blog56--grid--tablet--4cols,
        .blog56.blog56--grid--tablet--5cols,
        .blog56.blog56--grid--tablet--6cols {
            .griditem56 .post56__sep__line {
                display: block;
            }
        }

        // now start hiding again
        .blog56.blog56--grid--tablet--2cols,
        .blog56.blog56--grid--tablet--3cols,
        .blog56.blog56--grid--tablet--4cols {
            .griditem56:nth-child(2) .post56__sep__line {
                display: none;
            }
        }

        .blog56.blog56--grid--tablet--3cols,
        .blog56.blog56--grid--tablet--4cols {
            .griditem56:nth-child(3) .post56__sep__line {
                display: none;
            }
        }

        .blog56.blog56--grid--tablet--4cols {
            .griditem56:nth-child(4) .post56__sep__line {
                display: none;
            }
        }
    }

    /* MOBILE VERSION */
    @include media( mobile ) {

        // restore showing it
        .post56__sep__line {
            display: block !important;
        }

        // we'll hide them by another way
        .griditem56:first-child .post56__sep__line {
            visibility: hidden;
            opacity: 0;
        }

        // now start hiding it
        .blog56.blog56--grid--mobile--2cols {
            .griditem56:nth-child(2) .post56__sep__line {
                visibility: hidden;
                opacity: 0;
            }
        }
    }