/* --------- works-detail --------- */
.works-detail {
    display: grid;
    place-items: center;
    max-width: 840px;
    margin-inline: auto;
}

.works-detail__header {
    display: grid;
    gap: 20px;
    width: 100%;
}

.works-detail__title {
    padding-bottom: 20px;
    color: var(--white900);
    font-feature-settings: "palt";
    font-size: 32px;
    letter-spacing: 0.07em;
    line-height: 1.5;
    border-bottom: 1px solid var(--white700);
}

.works-detail__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.works-detail__mv {
    max-width: 700px;
    margin-top: 60px;

    img {
        border-radius: 20px;
        aspect-ratio: 16 / 9;
        object-fit: cover;
    }
}

.works-detail__body {
    max-width: 700px;
    color: var(--white900);
    --margin: 40px;

    h2 {
        margin-block: var(--margin) 15px;
        color: var(--white700);
        font-feature-settings: "palt";
        font-size: 26px;
        font-weight: 600;
        letter-spacing: 0.07em;
    }

    :is(.wp-block-paragraph, .wp-block-group) + .wp-block-group {
        margin-top: var(--margin);
    }

    ul {
        list-style-type: disc;
        list-style-position: inside;
    }

    :is(p, li) {
        font-size: 15px;
        letter-spacing: 0.05em;
        line-height: 1.7;

        a {
            color: #39d700;
            text-decoration: underline;

            &:hover {
                text-decoration: none;
            }
        }
    }

    .wp-block-paragraph + .wp-block-paragraph {
        margin-top: 1em;
    }

    .youtube-caption-pattern__caption {
        max-width: 500px;
        margin-inline: auto;
        font-weight: 600;
    }

    li {
        padding-left: 1.4em;
        text-indent: -1.4em;

        &:not(:last-child) {
            margin-bottom: 1em;
        }
    }

    figure {
        &.wp-block-embed-youtube {
            max-width: 500px;
            margin-inline: auto;

            iframe {
                width: 500px;
                height: auto;
                aspect-ratio: 16/9;
            }
        }

        &.wp-block-gallery-is-layout-flex {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: var(--margin);
        }

        img {
            margin-top: var(--margin);
            border-radius: 20px;
            object-fit: cover;
        }

        &:not(.original) img {
            aspect-ratio: 16 / 9;
        }

        &.vertical img {
            aspect-ratio: 9 / 16;
        }

        + :is(ul, p:not(.youtube-caption-pattern__caption)) {
            margin-top: var(--margin);
        }
    }
}

.instagram-media{
    border:none !important;
}

@media (width<768px) {
    /* --------- works-detail --------- */
    .works-detail__header {
        display: grid;
        gap: 12px;
    }

    .works-detail__title {
        padding-bottom: 12px;
        font-size: 20px;
    }

    .works-detail__date {
        margin-top: -6px;
    }

    .works-detail__mv {
        margin-top: 45px;
        padding-inline: 0;

        img {
            border-radius: 15px;
        }
    }

    .works-detail__body {
        padding-inline: 0;
        --margin: 35px;

        h2 {
            margin-block: var(--margin) 10px;
            font-size: 16px;
        }

        :is(.wp-block-paragraph, .wp-block-group) + .wp-block-group {
            margin-top: var(--margin);
        }

        :is(p, li) {
            font-size: 13px;
            line-height: 22px;
        }

        figure {
            &.wp-block-embed-youtube {
                max-width: unset;

                iframe {
                    width: 100%;
                }
            }

            &.wp-block-gallery-is-layout-flex {
                display: grid;
                grid-template-columns: unset;
                gap: 0;
            }

            img {
                margin-top: var(--margin);
                border-radius: 15px;
            }

            + :is(ul, p:not(.youtube-caption-pattern__caption)) {
                margin-top: var(--margin);
            }
        }
    }
}