/* ================================================

WORKS 施工事例ページ

================================================ */

/* ----------------------------------------
ARCHIVE WORKS
---------------------------------------- */

/* ········ 一覧タイトル・カテゴリ ········ */
.works__head {
    margin-bottom: var(--space-5xl);
    width: 90%;
    margin-inline: auto;
}

.works__title {
    font-size: var(--fontSize-3xl);
    letter-spacing: 0.6em;
    line-height: 1;
    text-align: center;
    border-bottom: 1px solid currentColor;
    padding-bottom: 1em;
    margin-bottom: var(--space-md);
    line-height: 1.5;
}

.works__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25em 1em;
    margin-left: 2.5vw;
    --min-size: 13;
    --max-size: 20;
    font-size: var(--clamp-size);
    letter-spacing: 0em;
}

.works__tabs li:not(:last-child)::after {
    content: " / ";
    margin: 0 0.5em;
    color: #999;
}

/* ········ 一覧 ········ */
.works__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4em 10px;
}

.works__list > :first-child {
    grid-column: 1 / -1;
    margin-bottom: var(--space-7xl);
}

.works__name,
.works__cat {
    line-height: 1.75;
}

.works__thumb {
    aspect-ratio: 492/230;
    width: 100%;
    height: auto;
    margin-bottom: 1em;
}

.works__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (width < 768px) {
    .works__thumb {
        aspect-ratio: 1;
    }
}

/* ----------------------------------------
SINGLE WORK
---------------------------------------- */
.single-works main {
    margin-top: var(--height-header);
}

.work__title {
    font-size: var(--fontSize-2xl);
    letter-spacing: 0.4em;
    margin-bottom: 0.25em;
    line-height: 1.5;
}

.work__cat {
    font-size: var(--fontSize-xs);
    letter-spacing: 0.3em;
}

.work__head::after {
    content: "";
    display: block;
    height: 1px;
    width: min(100%, 400px);
    background-color: currentColor;
    margin-bottom: var(--space-3xl);
}

.work__name {
    font-size: var(--fontSize-md);
    letter-spacing: 0.2em;
    margin-bottom: 1em;
    margin-top: var(--space-6xl);
}

.work__link {
    margin-top: 2em;
    font-size: var(--fontSize-xs);
    letter-spacing: 0.3em;
    text-decoration: underline;
    text-decoration-color: #c1c1c1;
    text-underline-offset: 0.5em;
}


/* ········ page navigation ········ */
.page-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: var(--space-7xl) auto 0;
}

.page-nav a {
    font-size: var(--fontSize-xs);
    letter-spacing: 0.3em;
    color: var(--color-gray-dark);
    text-decoration: none;
    transition: color 0.3s;
}

.page-nav a:hover {
    opacity: 0.7;
}

.page-nav__prev,
.page-nav__next {
    display: flex;
    align-items: center;
    gap: clamp(8px, 4.1vw, 24px);
}

.page-nav__next.disabled,
.page-nav__prev.disabled {
    width: calc(clamp(40px, 11vw, 65px) + 1.1em + clamp(8px, 4.1vw, 24px));

}

.page-numbers.current {
    position: relative;
}

/* 下線の位置がtext-decorationだと右にズレるので調整 */
.page-numbers.current::before {
    content: "";
    position: absolute;
    bottom: -2px;
    left: -0.15em;
    right: 0;
    height: 1px;
    background-color: #999;
}

/* ----------------------------------------
WORDPRESS TEMPLATE
---------------------------------------- */


.wp-block-gallery {
    margin-bottom: clamp(20px, 2.5vw, 56px);
}

/* ········ image ········ */
/* .work__content>.wp-block-imageの時に余白追加 */
.work__content>.wp-block-image {
    margin-bottom: clamp(20px, 2.5vw, 56px);
}

/* ········ gallery ········ */
/* カラム１の時に画像の間に余白追加 */
figure.wp-block-gallery.columns-1 {
    justify-content: center;
    gap: clamp(20px, 2.5vw, 56px);
}

/* ········ column ········ */
.wp-block-columns {
    margin-bottom: clamp(20px, 2.5vw, 56px);
}

/* ········ column layout ········ */
:where(.wp-block-columns.is-layout-flex) {
    gap: 1em;
}

/* ········ 見出し２ ········ */
h2.wp-block-heading {
    --min-size: 16;
    --max-size: 18;
    font-size: var(--clamp-size);
    line-height: 1.5;
    margin-top: 2em;
    margin-bottom: 1em;
}

/* ········ パターン ········ */
.grid4 {
    grid-template-columns: repeat(4, 1fr);
    gap: 1em;
    margin-bottom: clamp(20px, 2.5vw, 56px);
}

.grid3 {
    grid-template-columns: repeat(3, 1fr);
    gap: 1em;
    margin-bottom: clamp(20px, 2.5vw, 56px);
}

.grid2 {
    grid-template-columns: repeat(2, 1fr);
    gap: 1em;
    margin-bottom: clamp(20px, 2.5vw, 56px);
}

.before-after {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 clamp(20px, 5.5vw, 80px)clamp(20px, 5.5vw, 80px);
    gap: 1em;
}

.before-after p {
    padding-top: 0.5em;
}

@media (width < 768px) {
    .grid4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid3 {
        grid-template-columns: repeat(2, 1fr);

        .wp-block-image:nth-of-type(3) {
            grid-column: 1 / -1;
        }
    }

    .before-after {
        grid-template-columns: repeat(2, 1fr);
        padding: 0 clamp(20px, 2.5vw, 80px) clamp(20px, 2.5vw, 80px);
        gap: 1em;
    }
}