@use "global/acms-common" as acms;
@use "global/common" as global;

/* ----------------
エントリー一覧
------------------ */
.summary {
	margin: 0 0 30px;
	padding: 0;
	list-style: none;
}

.summary-entry-link {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 20px 0;
	color: global.$text-color-base;
	border-bottom: 1px solid global.$border-color-base;

	@include global.roll-over-bg-color(transparent, global.$bg-color-hover, global.$transition-speed);

	&:link,
	&:visited,
	&:active,
	&:focus {
		color: global.$text-color-base;
	}
}

.summary-entry-img-outer {
	padding: 0 10px;
}

.summary-entry-img {
	box-sizing: border-box;
	width: 178px;
	height: 100px;
}

.summary-entry-contents {
	box-sizing: border-box;
	width: 69%;
	padding: 0 10px;
}

.summary-entry-title {
	margin: 0 0 5px;
	font-weight: bold;

  @include acms.font-size(21);

	line-height: 1.4;
}

.summary-entry-text {
	margin: 10px 0 0;

  @include acms.font-size(14);

	line-height: 1.5;

	span {
		padding: 1px;
		color: #FFF;
		vertical-align: middle;
		background-color: global.$key-color;
		border-radius: 50%;
	}
}

.summary-entry-user {
	display: flex;
	align-items: center;
	margin: 15px 0 0;
}

.summary-entry-user-icon {
	width: 26px;
	height: 26px;
	margin: 0 10px 0 0;
	border-radius: 100%;
}

/* ----------------
エントリー一覧 (SP幅：デフォルト)
------------------ */
@media screen and (max-width: acms.$breakpoint-md-max) {
	.summary-entry-link {
		padding: 15px 0;
	}

	.summary-entry-title {
		@include acms.font-size(16);
	}

	.entry-date {
		margin-bottom: 2px;

		@include acms.font-size(12);
	}

	.entry-labels {
		margin-bottom: 0;

		li {
			padding: 0 3px 2px 0;

			@include acms.font-size(12);
		}
	}

	.summary-entry-text {
		display: none;
	}
}

@media screen and (max-width: acms.$breakpoint-sm-max) {
	.summary-entry-img-outer {
		padding: 0 5px 0 0;
	}

	.summary-entry-img {
		width: 120px;
		height: 67px;
	}

	.summary-entry-contents {
		padding: 0 0 0 5px;
	}
}

/* ----------------
エントリー一覧 (1カラムVer.)
------------------ */
.summary.is-thumbnail-1column {
	margin-top: 10px;
	padding: 0;

	.entry-labels {
		margin-bottom: 0;

		a {
			@include acms.font-size(10);
		}
	}

	.entry-date {
		margin-bottom: 2px;
	}

	.entry-labels li {
		padding: 0 3px 0 0;
	}

	.summary-entry-link {
		display: block;
		width: 100%;
		margin-bottom: 15px;
		padding: 0 0 15px;
	}

	.summary-entry-img-outer {
		margin: 0 0 10px;
		padding: 0;
	}

	.summary-entry-img {
		width: 100%;
		height: 0;
		padding: calc(100% / 2 * 0.5625); /* 画像が16:9になる高さ */
	}

	.summary-entry-contents {
		width: 100%;
		padding: 0 5px;
	}

	.summary-entry-title {
		margin-bottom: 10px;
	}
}

/* ----------------
エントリー一覧 (SP幅：1カラムVer.)
------------------ */
@media screen and (max-width: acms.$breakpoint-md-max) {
	.summary.is-thumbnail-1column-sp {
		margin-top: 10px;
		padding: 0;

		.entry-labels {
			margin-bottom: 0;

			a {
				@include acms.font-size(10);
			}
		}

		.entry-date {
			margin-bottom: 2px;
		}

		.entry-labels li {
			padding: 0 3px 0 0;
		}

		.summary-entry-link {
			display: block;
			width: 100%;
			margin-bottom: 15px;
			padding: 0 0 15px;
		}

		.summary-entry-img-outer {
			margin: 0 0 10px;
			padding: 0;
		}

		.summary-entry-img {
			width: 100%;
			height: 0;
			padding: calc(100% / 2 * 0.5625); /* 画像が16:9になる高さ */
		}

		.summary-entry-contents {
			width: 100%;
			padding: 0 5px;
		}

		.summary-entry-title {
			margin-bottom: 10px;
		}
	}
}

/* ----------------
エントリー一覧 (2カラムVer.)
------------------ */
.summary.is-thumbnail-2column {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	margin: 10px -5px 0;
	padding: 0;

	.entry-labels {
		margin-bottom: 0;

		a {
			@include acms.font-size(10);
		}
	}

	.entry-date {
		margin-bottom: 2px;

		@include acms.font-size(10);
	}

	.entry-labels li {
		padding: 0 3px 0 0;

		@include acms.font-size(10);
	}

	.summary-entry {
		width: 50%;
	}

	.summary-entry-link {
		display: block;
		margin-bottom: 20px;
		padding: 0 5px;
		border: none;
	}

	.summary-entry-img-outer {
		margin: 0 0 5px;
		padding: 0;
	}

	.summary-entry-img {
		width: 100%;
		height: 0;
		padding:  calc(100% / 2 * 0.5625); /* 画像が16:9になる高さ */
	}

	.summary-entry-contents {
		width: 100%;
		padding: 0 5px;
	}

	.summary-entry-title {
		@include acms.font-size(16);
	}

	.summary-entry-text {
		display: none;
	}
}

/* ----------------
エントリー一覧 (SP幅：2カラムVer.)
------------------ */
@media screen and (max-width: acms.$breakpoint-md-max) {
	.summary.is-thumbnail-2column-sp {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: space-between;
		margin: 10px -5px 0;
		padding: 0;

		.entry-labels {
			margin-bottom: 0;

			a {
				@include acms.font-size(10);
			}
		}

		.entry-date {
			margin-bottom: 2px;

			@include acms.font-size(10);
		}

		.entry-labels li {
			padding: 0 3px 0 0;

			@include acms.font-size(10);
		}

		.summary-entry {
			width: 50%;
		}

		.summary-entry-link {
			display: block;
			margin-bottom: 20px;
			padding: 0 5px;
			border: none;
		}

		.summary-entry-img-outer {
			margin: 0 0 5px;
			padding: 0;
		}

		.summary-entry-img {
			width: 100%;
			height: 0;
			padding:  calc(100% / 2 * 0.5625); /* 画像が16:9になる高さ */
		}

		.summary-entry-contents {
			width: 100%;
			padding: 0 5px;
		}

		.summary-entry-title {
			@include acms.font-size(16);
		}

		.summary-entry-text {
			display: none;
		}
	}
}
