@charset 'utf-8';
@use '../global' as *;
/* Post List
---------------------------------------------*/
// common
.post-list {
	--row-gap: 32px;
	--columns-gap: 16px;
}
.post-list__item {}

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

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

.post-list__wrap-link {
	color: inherit;
	display: block;
}

.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: .5rem;
}

.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: 1rem;
		}
	}
	.post-list__thumb {
		@include mq('sm', '>=') {
			width: 100%;
			max-width: px-to-rem(300px);
		}
	}
	.post-list__contents {
		margin-block: 0;
		width: 100%;
		overflow: hidden;
		// @include mq('sm', '>='){
		// 	padding-block: 0;
		// }
	}
	.post-list__header {
		@include mq('sm', '>=') {
			font-size: var(--font-size--md);
		}
	}

	.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, 1rem);
	grid-column-gap: var(--columns-gap, .5rem);

	@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__wrap-link {

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

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