/*--------------------------------------------------------------
# Global Blocks
# Backgrounds
# Section Header (Accent, Badge, Default)
# Section Posts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Backgrounds
--------------------------------------------------------------*/
.is-style-default .wrap {
    padding: var(--wp--custom--layout--block-gap) 0;
}

.is-style-bg-solid {
    background: var(--wp--preset--color--grey-light);
    max-width: 100vw;
    padding: var(--wp--custom--layout--block-gap-large) var(--wp--custom--layout--block-gap);
    margin: 0 calc(-1 * var(--wp--custom--layout--block-gap));
}

.is-style-bg-border .wrap {
    border: var(--wp--custom--border-width--xsmall) solid var(--wp--preset--color--grey);
    padding: var(--wp--custom--layout--block-gap);
}

.is-style-bg-asanoha {
    background-image: url(../icons/bg/bg-asanoha.svg);
    background-repeat: repeat;
    background-position: center center;
    max-width: 100vw;
    padding: var(--wp--custom--layout--block-gap-large) var(--wp--custom--layout--block-gap);
    margin: 0 calc(-1 * var(--wp--custom--layout--block-gap));
    background-size: 200px;
}

.is-style-bg-kanoko {
    background-image: url(../icons/bg/bg-kanoko.svg);
    background-repeat: repeat;
    background-position: center center;
    max-width: 100vw;
    padding: var(--wp--custom--layout--block-gap-large) var(--wp--custom--layout--block-gap);
    margin: 0 calc(-1 * var(--wp--custom--layout--block-gap));
    background-size: 200px;
}

.is-style-bg-koi {
    background-image: url(../icons/bg/bg-koi.svg);
    background-repeat: repeat;
    background-position: center center;
    max-width: 100vw;
    padding: var(--wp--custom--layout--block-gap-large) var(--wp--custom--layout--block-gap);
    margin: 0 calc(-1 * var(--wp--custom--layout--block-gap));
    background-size: 600px;
}

.is-style-bg-same-komon {
    background-image: url(../icons/bg/bg-same-komon.svg);
    background-repeat: repeat;
    background-position: center center;
    max-width: 100vw;
    padding: var(--wp--custom--layout--block-gap-large) var(--wp--custom--layout--block-gap);
    margin: 0 calc(-1 * var(--wp--custom--layout--block-gap));
    background-size: 200px;
}

.is-style-bg-seigaiha {
    background-image: url(../icons/bg/bg-seigaiha.svg);
    background-repeat: repeat;
    background-position: center center;
    max-width: 100vw;
    padding: var(--wp--custom--layout--block-gap-large) var(--wp--custom--layout--block-gap);
    margin: 0 calc(-1 * var(--wp--custom--layout--block-gap));
    background-size: 200px;
}

.is-style-bg-shippo {
    background-image: url(../icons/bg/bg-shippo.svg);
    background-repeat: repeat;
    background-position: center center;
    max-width: 100vw;
    padding: var(--wp--custom--layout--block-gap-large) var(--wp--custom--layout--block-gap);
    margin: 0 calc(-1 * var(--wp--custom--layout--block-gap));
    background-size: 100px;
}

.type-post .is-style-bg-solid, .block-area-after-post .is-style-bg-solid, .block-area-sidebar .is-style-bg-solid {
    max-width: 100%;
    margin: var(--wp--custom--layout--block-gap) auto;
    padding: var(--wp--custom--layout--block-gap);
}

.type-post .is-style-bg-asanoha, .block-area-after-post .is-style-bg-asanoha, .block-area-sidebar .is-style-bg-asanoha {
    max-width: 100%;
    margin: var(--wp--custom--layout--block-gap) auto;
    padding: var(--wp--custom--layout--block-gap);
}

.type-post .is-style-bg-kanoko, .block-area-after-post .is-style-bg-kanoko, .block-area-sidebar .is-style-bg-kanoko {
    max-width: 100%;
    margin: var(--wp--custom--layout--block-gap) auto;
    padding: var(--wp--custom--layout--block-gap);
}

.type-post .is-style-bg-koi, .block-area-after-post .is-style-bg-koi, .block-area-sidebar .is-style-bg-koi {
    max-width: 100%;
    margin: var(--wp--custom--layout--block-gap) auto;
    padding: var(--wp--custom--layout--block-gap);
}

.type-post .is-style-bg-same-komon, .block-area-after-post .is-style-bg-same-komon, .block-area-sidebar .is-style-bg-same-komon {
    max-width: 100%;
    margin: var(--wp--custom--layout--block-gap) auto;
    padding: var(--wp--custom--layout--block-gap);
}

.type-post .is-style-bg-seigaiha, .block-area-after-post .is-style-bg-seigaiha, .block-area-sidebar .is-style-bg-seigaiha {
    max-width: 100%;
    margin: var(--wp--custom--layout--block-gap) auto;
    padding: var(--wp--custom--layout--block-gap);
}

.type-post .is-style-bg-shippo, .block-area-after-post .is-style-bg-shippo, .block-area-sidebar .is-style-bg-shippo {
    max-width: 100%;
    margin: var(--wp--custom--layout--block-gap) auto;
    padding: var(--wp--custom--layout--block-gap);
}

@media (max-width: 800px) {
    .is-style-bg-solid, .is-style-bg-asanoha, .is-style-bg-kanoko, .is-style-bg-koi, .is-style-bg-same-komon, .is-style-bg-seigaiha, .is-style-bg-shippo {
        padding: var(--wp--custom--layout--block-gap);
    }
}

/*--------------------------------------------------------------
# Section Headers
--------------------------------------------------------------*/
.loop-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    overflow: hidden;
    margin: 0 0 var(--wp--custom--layout--block-gap-small);
}

.loop-header svg {
    width: 40px;
    height: 40px;
    margin-right: 10px;
}

.loop-header .section-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
    margin: 0;
}
.loop-header .section-icon svg {
    fill:var(--wp--preset--color--red);
}

.section-title {
    font-family: var(--wp--preset--font-family--system-sans);
    font-size: var(--wp--preset--font-size--large);
    letter-spacing: var(--wp--custom--letter-spacing--loose);
    line-height: var(--wp--custom--line-height--small);
    margin: 0;
    color: var(--wp--preset--color--red);
    text-transform: uppercase;
    font-weight: 800;
    position: relative;
}

.section-desc {
    font-size: var(--wp--preset--font-size--small);
    line-height: var(--wp--custom--line-height--medium);
    margin: 0 0 var(--wp--custom--layout--block-gap-small);
}

.section-desc p {
    margin: 0;
}

.section-link {
    color: var(--wp--preset--color--ink);
    margin: var(--wp--custom--layout--block-gap-small) 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    text-decoration: none;
}

.section-link svg {
    fill: var(--wp--preset--color--red);
    transform: rotate(-90deg);
    margin-left: 5px;
    width: 20px;
    height: 20px;
}

/*--------------------------------------------------------------
## Sidebar (Block Header)
--------------------------------------------------------------*/
.block-area-sidebar .loop-header {
    display: block;
    text-align: center;
}

.block-area-sidebar .loop-header svg {
    width: 30px;
    height: 30px;
    margin-right: 5px;
}

.block-area-sidebar .section-title {
    font-size: var(--wp--preset--font-size--medium);
    text-align: center;

}

.block-area-sidebar .section-desc {
    font-size: var(--wp--preset--font-size--xsmall);
    text-align: center;
}


/*--------------------------------------------------------------
# Section Posts
--------------------------------------------------------------*/
.section-posts {
    display: grid;
    column-gap: var(--wp--custom--layout--block-gap);
    row-gap: var(--wp--custom--layout--block-gap);
    position: relative;
}

.section-posts-video {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.section-posts-small {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.section-posts-medium {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.section-posts-large {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.section-posts-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/*--------------------------------------------------------------
## Section Posts: In Posts
--------------------------------------------------------------*/
.type-post .section-posts-small {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.type-post .section-posts-large {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.type-post .section-posts-list {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

/*--------------------------------------------------------------
## Section Posts: After Posts
--------------------------------------------------------------*/
.block-area-after-post .section-posts-small {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.block-area-after-post .section-posts-large {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.block-area-after-post .section-posts-list {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

/*--------------------------------------------------------------
## Section Posts: Sidebar
--------------------------------------------------------------*/
.block-area-sidebar .section-posts-small {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.block-area-sidebar .section-posts-medium {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.block-area-sidebar .section-posts-large {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.block-area-sidebar .section-posts-list {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.block-area-sidebar .section-posts-video {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

/*--------------------------------------------------------------
## Section Posts: Mobile
--------------------------------------------------------------*/
@media (max-width: 1024px) {
    .type-post .section-posts-large, .block-area-after-post .section-posts-large {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .type-post .section-posts-list, .block-area-after-post .section-posts-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .section-posts-small {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .section-posts-medium {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .section-posts-list, .type-post .section-posts-list, .block-area-after-post .section-posts-list {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

}

@media (max-width: 800px) {
    .section-posts-large, .type-post .section-posts-large, .block-area-after-post .section-posts-large {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .section-posts-video {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .section-posts-small, .type-post .section-posts-small, .block-area-after-post .section-posts-small {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}