/* =====================================================
   YOKUCHI BLOG
   ===================================================== */

.yokuchi-blog {
    background: transparent;
    color: #202020;
}

body.page-template-page-blog,
body.page-template-page-blog-php,
body.yokuchi-blog-page,
body.page-template-page-blog .site,
body.page-template-page-blog-php .site,
body.yokuchi-blog-page .site,
body.page-template-page-blog .site-content,
body.page-template-page-blog-php .site-content,
body.yokuchi-blog-page .site-content {
    background: transparent;
}

body.page-template-page-blog .site-content,
body.page-template-page-blog-php .site-content,
body.yokuchi-blog-page .site-content {
    margin: 0 !important;
    padding-top: 0 !important;
}

body.page-template-page-blog.yokuchi-header-at-top .site-header,
body.page-template-page-blog-php.yokuchi-header-at-top .site-header,
body.yokuchi-blog-page.yokuchi-header-at-top .site-header {
    background: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.yokuchi-blog .yokuchi-container {
    width: min(calc(100% - 80px), 1440px);
    max-width: 1440px;

    margin-left: auto;
    margin-right: auto;
}


/* =====================================================
   HERO
   ===================================================== */

.yokuchi-blog-hero {
    background: #f2efed;

    overflow: hidden;
}

.yokuchi-blog-hero__inner {
    min-height: 436px;

    display: grid;

    grid-template-columns:
        minmax(0, .85fr)
        minmax(0, 1.15fr);

    align-items: center;
}

.yokuchi-blog-hero__content {
    position: relative;

    z-index: 2;
}

.yokuchi-blog-hero__content h1 {
    margin: 0 0 17px;

    color: #181818;

    font-size: 32px;
    font-weight: 500;

    line-height: 1;

    letter-spacing: 8px;

    text-transform: uppercase;
}

.yokuchi-blog-hero__content p {
    max-width: 420px;

    margin: 0;

    color: #737373;

    font-size: 14px;

    line-height: 1.55;
}

.yokuchi-heading-line {
    display: block;

    width: 45px;
    height: 2px;

    margin-top: 22px;

    background: #ec1d23;
}


/* HERO IMAGE */

.yokuchi-blog-hero__image {
    height: 436px;

    display: flex;

    align-items: flex-end;
    justify-content: flex-end;
}

.yokuchi-blog-hero__image img {
    display: block;

    width: auto;
    max-width: 100%;
    max-height: 420px;

    object-fit: contain;
}


/* =====================================================
   CONTENT
   ===================================================== */

.yokuchi-blog-content {
    padding: 30px 0 65px;

    background: transparent;
}


/* =====================================================
   FILTERS
   ===================================================== */

.yokuchi-blog-filters {
    display: flex;
	flex-wrap: wrap;

    gap: 10px;

    padding-bottom: 25px;

    margin-bottom: 37px;

    border-bottom: 1px solid #dedede;
}

.yokuchi-blog-filter {
    min-height: 37px;

    padding: 5px 10px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #fff;

    border: 1px solid #d8d8d8;
    border-radius: 0;

    color: #555;

    cursor: pointer;

    font-family: inherit;

    font-size: 12px;
    font-weight: 500;

    line-height: 1.2;

    text-decoration: none;

    transition:
        border-color .2s ease,
        color .2s ease;
}

.yokuchi-blog-filter:hover,
.yokuchi-blog-filter.active {
    border-color: #ec1d23;

    color: #ec1d23;
}


/* =====================================================
   FEATURED
   ===================================================== */

.yokuchi-featured-post {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(0, .85fr);

    margin-bottom: 45px;

    background: #fff;
}

.yokuchi-featured-post__image {
    display: block;

    min-height: 410px;

    overflow: hidden;
}

.yokuchi-featured-post__image img {
    display: block;

    width: 100%;
    height: 100%;

    min-height: 410px;

    object-fit: cover;

    transition: transform .4s ease;
}

.yokuchi-featured-post:hover
.yokuchi-featured-post__image img {
    transform: scale(1.015);
}


/* FEATURED CONTENT */

.yokuchi-featured-post__content {
    padding: 40px 42px;

    display: flex;
    flex-direction: column;

    align-items: flex-start;
    justify-content: center;
}


/* =====================================================
   META
   ===================================================== */

.yokuchi-post-meta {
    width: 100%;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 17px;
}

.yokuchi-post-category {
    color: #ec1d23;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 1.2px;

    text-transform: uppercase;
}

.yokuchi-post-date {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    color: #777;

    font-size: 13px;
    line-height: 1;
}

.yokuchi-date-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 1em;
    height: 1em;

    color: #ec1d23;

    font-size: 15px;
    line-height: 1;

    transform: translateY(-0.04em);
}

.yokuchi-date-icon img {
    display: block;

    width: 16px;
    height: 16px;

    opacity: 1;
}


/* =====================================================
   FEATURED TITLE
   ===================================================== */

.yokuchi-featured-post__title {
    margin: 0 0 26px !important;

    font-size: 31px !important;
    font-weight: 600 !important;

    line-height: 1.2 !important;

    letter-spacing: 0 !important;

    text-transform: none !important;
}

.yokuchi-featured-post__title a {
    color: #222;

    text-decoration: none;
}

.yokuchi-featured-post__title a:hover {
    color: #ec1d23;
}


/* DESCRIPTION */

.yokuchi-featured-post__excerpt {
    margin-bottom: 26px;

    color: #666;

    font-size: 14px;

    line-height: 1.65;
}

.yokuchi-featured-post__excerpt p {
    margin: 0;
}


/* =====================================================
   READ MORE
   ===================================================== */

.yokuchi-read-more {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    color: #333;

    text-decoration: none;

    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    font-size: 16px;
    font-weight: 500;

    line-height: 24px;

    letter-spacing: 2px;

    text-transform: uppercase;

    transition: color .2s ease;
}

.yokuchi-read-more span {
    color: #ec1d23;

    font-size: 17px;

    line-height: 1;
}

.yokuchi-read-more:hover {
    color: #ec1d23;
}


/* =====================================================
   BLOG GRID
   ===================================================== */

.yokuchi-blog-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 30px 25px;
}


/* =====================================================
   CARD
   ===================================================== */

.yokuchi-blog-card {
    min-width: 0;

    background: #fff;
}

.yokuchi-blog-card__image {
    display: block;

    width: 100%;

    aspect-ratio: 1.75 / 1;

    overflow: hidden;

    background: #f5f5f5;
}

.yokuchi-blog-card__image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .4s ease;
}

.yokuchi-blog-card__image--placeholder {
    padding: 24px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.yokuchi-blog-card__image img.yokuchi-blog-card__placeholder {
    width: min(70%, 220px);
    height: auto;

    object-fit: contain;
}

.yokuchi-blog-card:hover
.yokuchi-blog-card__image img {
    transform: scale(1.025);
}


/* CARD CONTENT */

.yokuchi-blog-card__content {
    padding: 17px 14px 20px;
}

.yokuchi-blog-card__content
.yokuchi-post-meta {
    margin-bottom: 16px;
}


/* TITLE */

.yokuchi-blog-card__title {
    min-height: 48px;

    margin: 0 0 24px !important;

    color: #252525;

    font-size: 17px !important;
    font-weight: 500 !important;

    line-height: 1.4 !important;

    letter-spacing: 0 !important;

    text-transform: none !important;
}

.yokuchi-blog-card__title a {
    color: inherit;

    text-decoration: none;
}

.yokuchi-blog-card__title a:hover {
    color: #ec1d23;
}


/* =====================================================
   LOAD MORE
   ===================================================== */

.yokuchi-blog-load-more-wrap {
    margin-top: 60px;

    display: flex;
    flex-direction: column;

    align-items: center;
}

.yokuchi-blog-load-more {
    min-width: 350px;
    min-height: 42px;

    padding: 0 24px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 14px;

    background: #fff;

    border: 1px solid #ec1d23;
    border-radius: 0;

    color: #555;

    cursor: pointer;

    font-family: inherit;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 2px;

    text-transform: uppercase;

    transition:
        background-color .2s ease,
        color .2s ease;
}

.yokuchi-blog-load-more:hover {
    background: #ec1d23;

    color: #fff;
}

.yokuchi-load-arrow {
    color: #ec1d23;

    font-size: 17px;
}

.yokuchi-blog-load-more:hover
.yokuchi-load-arrow {
    color: #fff;
}

.yokuchi-blog-count {
    margin-top: 14px;

    color: #555;

    font-size: 11px;
}


/* =====================================================
   LOADING
   ===================================================== */

.yokuchi-blog-grid.is-loading {
    opacity: .45;

    pointer-events: none;
}

.yokuchi-blog-load-more.is-loading {
    opacity: .5;

    pointer-events: none;
}


/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 1100px) {

    .yokuchi-blog-filters {
        grid-template-columns:
            repeat(4, 1fr);
    }

    .yokuchi-blog-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }

}


@media (max-width: 850px) {

    .yokuchi-blog-hero__inner {
        grid-template-columns: 1fr;
    }

    .yokuchi-blog-hero__content {
        padding-top: 45px;
    }

    .yokuchi-blog-hero__image {
        height: 180px;
    }

    .yokuchi-featured-post {
        grid-template-columns: 1fr;
    }

    .yokuchi-featured-post__image,
    .yokuchi-featured-post__image img {
        min-height: 330px;
    }

    .yokuchi-blog-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media (max-width: 600px) {

    .yokuchi-blog .yokuchi-container {
        width: calc(100% - 32px);
        max-width: none;
    }

    .yokuchi-blog-hero__content h1 {
        font-size: 26px;

        letter-spacing: 6px;
    }

    .yokuchi-blog-filters {
        display: flex;

        overflow-x: auto;

        gap: 8px;
    }

    .yokuchi-blog-filter {
        flex: 0 0 auto;

        min-width: 120px;
    }

    .yokuchi-featured-post__content {
        padding: 28px 22px;
    }

    .yokuchi-featured-post__title {
        font-size: 25px !important;
    }

    .yokuchi-featured-post .yokuchi-read-more {
        display: inline-flex !important;
        width: auto !important;
        min-height: 0 !important;

        padding: 0 !important;

        align-self: flex-start;
        justify-content: flex-start !important;
        text-align: left !important;

        border: 0 !important;
        background: transparent !important;

        font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        font-size: 14px !important;
        font-style: normal;
        font-weight: 500 !important;

        line-height: 24px !important;
        letter-spacing: 1px !important;
    }

    .yokuchi-blog-grid {
        grid-template-columns: 1fr;
    }

    .yokuchi-blog-card {
        display: grid;

        grid-template-columns: 30% minmax(0, 1fr);

        column-gap: 16px;

        align-items: stretch;

        background: #fff;
    }

    .yokuchi-blog-card__image {
        height: 100%;
        min-height: 190px;

        aspect-ratio: auto;
    }

    .yokuchi-blog-card__content {
        padding: 12px 12px 14px 0;

        display: flex;
        flex-direction: column;

        align-items: flex-start;
    }

    .yokuchi-blog-card__content
    .yokuchi-post-meta {
        margin-bottom: 0;

        display: flex;
        flex-direction: column;

        align-items: flex-start;
        justify-content: flex-start;

        gap: 0;
    }

    .yokuchi-blog-card__content
    .yokuchi-post-category {
        font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;

        line-height: 24px;
        letter-spacing: 2px;
    }

    .yokuchi-blog-card__content
    .yokuchi-post-date {
        margin-top: 0;

        font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        font-size: 14px;
        font-style: normal;
        font-weight: 300;

        line-height: 24px;
        letter-spacing: 0;
    }

    .yokuchi-blog-card__content
    .yokuchi-date-icon {
        display: inline-flex;
    }

    .yokuchi-blog-card__title {
        min-height: 0;

        margin: 10px 0 14px !important;

        font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        font-size: 18px !important;
        font-style: normal;
        font-weight: 600 !important;

        line-height: 24px !important;
        letter-spacing: 0 !important;
    }

    .yokuchi-blog-card .yokuchi-read-more {
        margin-top: auto;
        margin-bottom: 4px;

        display: inline-flex !important;
        width: auto !important;
        min-height: 0 !important;

        padding: 0 !important;

        align-self: flex-start;
        justify-content: flex-start !important;
        text-align: left !important;

        border: 0 !important;
        background: transparent !important;

        color: #333;

        font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        font-size: 14px !important;
        font-style: normal;
        font-weight: 500 !important;

        line-height: 24px !important;
        letter-spacing: 1px !important;
    }

    .yokuchi-blog-load-more {
        min-width: 0;

        width: 100%;
    }

}