/*

==================================================================

  高校生新聞 Cyan非対応ページ用CSS

==================================================================

*/

:root {
    --color-black: #2A2B2B;
    --design-width-sp: 400;
    --link-hover: #0284c7;
}

body:is(.page-archive) {
#content-inner {
    width: 100%!important;
    gap: 40px;
    max-width: 1440px;
}

#wrapper {
    min-width: 340px;
}

#main-inner {
    container-name: main-inner;
    container-type: inline-size;
    margin-bottom: 80px;

    .archive-heading {
        font-weight: normal;
        @container main-inner ( width < 640px ) {
            font-size: 20px;
        }
    }

    .search-result {
        margin-bottom: 1em;
    }

    .search-result-input {
        border-radius: 5px;
    }

    .archive-entries {
        display: grid;
        grid-template-columns: 1fr 1fr;
        @container main-inner ( 640px <= width ) {
            gap: 20px;
        }

        @container main-inner ( width < 640px ) {
            grid-template-columns: 1fr;
            gap: 10px;
        }

    }

    .archive-entry {
        container-name: archive-entry;
        container-type: inline-size;
        display: flex;
        align-items: center;
        height: calc((100vw - 40px) * 0.41 * (3 / 4));
        min-height: auto;
        background-color: #fff;
        border: 1px solid var(--color-black);
        border-radius: 5px !important;
        overflow: hidden;
        margin: 0;
        padding: 11px 15px 22px calc(41% + 16px);

        @container main-inner ( 640px <= width ) {
            height: 134px;
            padding: 16px 15px 22px calc(178px + 16px);
        }

        @media ( 768px <= width ) {
            height: calc((100vw - 40px - 300px - (96px * 2)) * 0.41 * (3 / 4));
            min-height: 106px;
            @container main-inner ( 640px <= width ) {
                max-height: 134px;
            }
        }

        &::before {
            display: none;
        }

        .archive-entry-header {
            margin-bottom: 0;
        }

        .archive-date {
            display: none;
        }
 
        .entry-title {
            margin-block: 0;
            font-weight: 700;
            font-size: 19px;

            @container archive-entry ( width < 210px ) {
                font-size: 16px;
            }

            @container archive-entry ( width < 180px ) {
                font-size: 14px;
            }

            .entry-title-link {
                padding: .2em 0;
            }
        }

        .archive-entry-body {
            display: none;
        }

        .categories {
            display: block;
            position: absolute;
            bottom: 0;
            right: 0;
            margin: 0;
            border-radius: 5px 0 0;
            border: 1px solid var(--color-black);
            border-right: none;
            border-bottom: none;
            background-color: #f1f1f1;
        }

        .archive-category-link {
            display: none;
            line-height: 1.2;
            min-width: 9em;
            border: 1px solid #e9e9e9;
            color: #555;
            padding: 2px 6px;
            font-size: 12px;
            font-weight: 700;
            text-decoration: none;
            border-radius: 3px;
            margin: 0;
            background-color: transparent;
            text-align: center;

            &::before {
                content: '#';
                margin-right: 2px;
                color: #555;
            }

            &:first-child {
                display: block;
            }

            &:hover {
                opacity: .7;
            }
        }

        .entry-thumb-link {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            width: 41%;
            @container main-inner ( 640px <= width ) {
                width: 178px;
            }

            .entry-thumb {
                width: 100%;
                height: 100%;
                padding: 0;
            }
        }

        .entry-title-link {
            -webkit-line-clamp: none;
        }

        span.highlight {
            display: contents;
            color: inherit;
        }

        &:has(.entry-thumb-link:hover),&:has(.entry-title-link:hover) {
            .entry-title-link {
                color: var(--link-hover)!important;
            }
            .entry-thumb-link {
                opacity: .7;
            }
        }
    }
}

.pager {
    .pager-prev a,
    .pager-next a {
        position: relative;
        place-content: center;
        font-size: 16px;

        @container main-inner ( 640px <= width ) {
            height: 64px !important;
        }

        &::before {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
            width: calc(64 / var(--design-width-sp) * 100vw);
            height: calc(64 / var(--design-width-sp) * 100vw);
            background-color: #fff;
            border: 1px solid var(--color-black);
            border-radius: 50% !important;
            display: flex !important;
            justify-content: center;
            align-items: center;
            text-align: center;
            text-decoration: none !important;
            padding: 0 !important;
            text-indent: -9999px;
            overflow: hidden;
            max-width: 64px !important;
            max-height: 64px !important;
        }

        &::after {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
            display: block;
            width: calc(12 / var(--design-width-sp) * 100vw);
            height: calc(10 / var(--design-width-sp) * 100vw);
            background-color: var(--color-black);
            max-width: 12px !important;
            max-height: 10px !important;
            -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12' fill='none'%3E%3Cpath d='M11 6H1' stroke='%232A2B2B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 1L13 6L8 11' stroke='%232A2B2B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12' fill='none'%3E%3Cpath d='M11 6H1' stroke='%232A2B2B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 1L13 6L8 11' stroke='%232A2B2B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
            @container main-inner ( 640px <= width ) {
                margin-inline: 26px;
            }
        }
    }

    .pager-prev a {
        text-align: left;
        padding-inline: 80px 0;
        &::before {
            left: 0;
        }

        &::after {
            left: 24px;
            transform: scaleX(-1);
        }
    }

    .pager-next a {
        text-align: right;
        padding-inline: 0 80px;
        &::before {
            right: 0;
        }

        &::after {
            right: 24px;
        }
    }
}
}