@charset 'utf-8';
@use '../global' as *;
/* Post List
---------------------------------------------*/
// common
.post-list {
	--row-gap: 2em;
	--columns-gap: 1em;
	list-style: none;
	margin: 0;
	padding: 0;
	ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	:where(a) {
		text-decoration: none;
	}
}

.post-list__article {
	color: var(--title-color, var(--headings-color));

	&:hover .post-list__image {
		transform: var(--image-hover-transform);
		opacity: var(--image-hover-opacity);
	}
}

/* Linked Whole - CSS Overlay
---------------------------------------------*/
.post-list__article.post-list__article--linked {
	position: relative;
	transition: background-color 0.3s ease-in;
	cursor: pointer;
	&:hover {
		background: rgba(0, 0, 0, 0.02);
	}
}

// entry-content の見出し position:relative を打ち消し、::after が article 基準で配置されるようにする
.post-list__article--linked .post-list__title {
	position: static;
}

.post-list__article--linked .post-list__title-link::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
}

.post-list__article--linked :where(a:not(.post-list__title-link), .post-list__term) {
	position: relative;
	z-index: 1;
}

.post-list__article.post-list__article--linked:focus-within {
	outline: 2px solid var(--ap-color-primary);
	outline-offset: 2px;
}

.post-list__article--linked .post-list__title-link:focus-visible {
	outline: none;
}

.post-list__link {
	display: block;
	color: inherit;
}

.post-list__thumb {
	position: relative;
	overflow: hidden;
	+ :where(*) {
		margin-block: .5rem 0;
	}
}

.post-list__figure {
	position: relative;
	aspect-ratio: var(--image-ratio, 1.618/1);
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.post-list__image {
	transition: var(--image-hover-transition);
	transform: var(--image-transform);
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.post-list__contents {
	display: flex;
	flex-direction: column;
	gap: .5em;
}

.post-list__header {

}

.post-list__title {
	@include typography(var(--headings-color), 1rem, inherit, 600);
	> :where(a) {
		color: inherit;
	}
	> :where(a):hover {
		color: var(--title-hover-color, inherit);
	}
}

.post-list__summary {
	margin-block: .5em;
	color: #757575;
	font-size: var(--font-size--sm);
}

.post-list__term {
	position: absolute;
	top: 0;
	right: 0;
	display: inline-flex;
	padding: .25em 1em;
	background: var(--term-color, var(--ap-color-primary));
	color: var(--term-color-contrast, var(--ap-color-base));
	font-size: var(--font-size--xs);
	line-height: 1.4;
	white-space: nowrap;
}

.post-list__meta {
	--meta-font-size: var(--font-size--xs);
}

.post-list__footer {
	margin-block: auto 0;
}

.post-list__read-more {
	display: block;
	margin-block: 1em 0;
	color: var(--link-color);
	font-size: var(--font-size);
	> :where(a) {
		color: var(--link-color, inherit);
	}
	> :where(a):hover {
		color: var(--link-color--hover, inherit);
	}
}

/* List Type
---------------------------------------------*/
.post-list.post-list--list {
	display: flex;
	flex-direction: column;
	gap: var(--row-gap);
}

.post-list--list {
	.post-list__item {}
	.post-list__article {

		@include mq('sm', '>=') {
			display: flex;
			flex-direction: row;
			column-gap: 1em;
		}
	}
	.post-list__thumb {
		@include mq('sm', '>=') {
			width: 100%;
			max-width: min(px-to-rem(300px), 40%);
		}
	}
	.post-list__contents {
		margin-block: 0;
		width: 100%;
		overflow: hidden;
	}
	.post-list__header {}

	.post-list__footer {
		// grid-area: var(--grid-footer-area, contents-4);
		margin-inline: auto 0;
	}
} // END .post-list--list .*


/* Grid Type
---------------------------------------------*/
.post-list.post-list--grid {
	display: grid;
	grid-template-columns: repeat(var(--columns, 2), minmax(0, 1fr));
	grid-row-gap: var(--row-gap);
	grid-column-gap: var(--columns-gap);

	@include mq('lg', '<'){
		grid-template-columns: repeat(var(--columns-tablet, var(--columns, 2)), minmax(0, 1fr));
	}
	@include mq('sm', '<'){
		grid-template-columns: repeat(var(--columns-mobile, var(--columns-tablet)), minmax(0, 1fr));
	}
}

.post-list--grid {

	.post-list__article {
		display: flex;
		flex-direction: column;
		gap: .5em;
		height: 100%;
	}
	.post-list__thumb {

	}
} // END post-list--grid .*