/* 一覧、検索、404ページ共通
 slug: archive
 template: archive.php, search.php, 404.php
 */

  /* 固定ページは常に黒ロゴ・黒文字 + ヘッダー高さ分の余白 */
body.archive, body.search, body.error404 {
	padding-top: var(--site-header-height);
}

body:is(.archive, .search, .error404) .site-header {
	color: var(--color-ink);
	box-shadow: 0 1px 0 rgba(37, 30, 28, 0.06);
}

body:is(.archive, .search, .error404) .site-header__logo img {
	filter: none;
}

body.category-news{
    .page-title{
        text-align: center !important;
    }
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    position: relative;
    background-color: #303030;
    /* border-bottom: 1px solid var(--color-border-gray); */

    &.page-cover {
        height: 60svh;
        min-height: 800px;
        border-bottom: none;
        @media (width <= 640px) {
            height: 80svh;
            min-height: auto;
        }
    }

	.page-title {
        width: 100%;
        text-align: left;
        padding-block: calc(var(--section-padding-block) * 2);
		/* font-size: var(--fs-3xl); */
		font-size: 70px;
		font-weight: var(--font-weight-heading);
        letter-spacing: 0;
		line-height: var(--line-height-sub);
        margin-bottom: 0;
        color: var(--color-white);
        display: flex;
        flex-flow: column nowrap;
        text-align: center;

        .tagline{
            padding-top: 0.5rem;
            /* font-size: var(--fs-lg); */
            font-size: 26px;
            text-indent: 0.3rem;
        }
	}

	figure {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -1;

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

		&::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.2);
		}
	}
}


/* archive */

@media (width <= 768px) {
    .index-section{
        padding-block-start: 0;
    }
    .news-list{
        border-top: none !important;
    }
}

.news-list{
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid #efefef;
    li{
        a{
            display: block;
            border-bottom: 1px solid #efefef;
            transition: background-color var(--motion-fast) var(--motion-ease);

            .news-list__row{
                display: flex;
                flex-flow: row nowrap;
                align-items: center;
                padding: 2rem 1.3rem 2rem 1rem;
                transition: transform var(--motion-fast) var(--motion-ease);
            }
            time{
                font-size: var(--fs-sm);
                color: #666;
                margin-right: 3rem;
            }
            .news-arrow{
                margin-left: auto;
                font-size: var(--fs-sm);
                color: #666;
            }
            &:hover{
                background-color: #fafafa;

                .news-list__row{
                    transform: translateX(0.3rem);
                }
            }
        }
    }
    @media (width <= 1024px) {
        .news-list__row{
            flex-flow: column nowrap !important;
            align-items: flex-start !important;
            position:relative;
            padding-right: 3rem !important;
        }

        .news-arrow{
            position: absolute;
            right: 1rem;
            top: 50%;
            transform: translateY(-50%);
        }
    }
    @media (width <= 768px) {
        margin: 0;

        .news-list__row{
            padding: var(--container-gutter) 0rem !important;
            .news-arrow{
                display: none;
            }
        }
    }
}


.pagination{
    padding-block: var(--section-padding-block) 0;

    .screen-reader-text{
        display: none;
    }

    ul.page-numbers{
        display: flex;
        flex-direction: row nowrap;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;

        li{
            list-style: none;
            margin: 0;
            padding: 0;
        }
        a.page-numbers,
        span.current{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 2.5rem;
            height: 2.5rem;
            border-radius: 50%;
        }
        a.page-numbers{
            border: 1px solid var(--color-border-gray);
            transition: all var(--motion-fast) var(--motion-ease);

            &:hover{
                background-color: var(--color-ink);
                color: var(--color-white);
            }
        }
        span.current{
            color: var(--color-white);
            background-color: var(--color-ink);
        }
        .material-symbols-outlined{
            font-size: var(--fs-sm);
        }
    }
}