.summary-card-list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-evenly;
	align-content: flex-start;
	padding: 3px 8px 8px 8px;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	overflow-y: auto;
}

.summary-card {
	font-size: 0.9em;
	width: 100%;
	height: fit-content;
	padding: 18px;
	border-radius: 4px;
	box-shadow: 3px 3px 6px 2px rgba(0, 0, 0, 0.3);
	box-sizing: border-box;
	display: grid;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	align-items: center;
}

[mode="card"] .summary-card {
	min-width: 320px;
	max-width: 380px;
	flex: 1 1 320px;
	grid-gap: 6px;
	grid-template-rows: 22px min-content minmax(0, 1fr) 33px; /* why px? */
	grid-template-columns: minmax(0, 1fr) 52px 48px;
	grid-template-areas:
		"summary-card-topicchip    summary-card-topicchip   summary-card-access-icon"
		"summary-card-title        summary-card-title       summary-card-title"
		"summary-card-summarytext  summary-card-summarytext summary-card-summarytext"
		"summary-card-authors-date summary-card-status      summary-card-status";
}

.mobile[mode="card"] .summary-card {
	grid-template-rows: 22px min-content 44px 33px;
	grid-gap: 5px;
}

[mode="card"] .summary-card.show-status.no-auth,
[mode="card"] .summary-card.show-status {
	grid-template-columns: minmax(0, 1fr) 68px 48px;
	grid-template-areas:
		"summary-card-topicchip    summary-card-topicchip    summary-card-access-icon"
		"summary-card-title        summary-card-title        summary-card-title"
		"summary-card-summarytext  summary-card-summarytext  summary-card-summarytext"
		"summary-card-authors-date summary-card-status       summary-card-status"
}

[mode="card"] .summary-card.no-auth:not(.show-status) {
	grid-template-columns: minmax(0, 1fr) 48px;
	grid-template-areas:
		"summary-card-topicchip    summary-card-access-icon"
		"summary-card-title        summary-card-title"
		"summary-card-summarytext  summary-card-summarytext"
		"summary-card-authors-date summary-card-authors-date"
}

[mode="list"] .summary-card {
	padding: 16px 25px;
	align-items: center;
	grid-gap: 1em;
	grid-template-columns: minmax(0, 1fr) 150px 290px 64px 24px;
	grid-template-areas:
		"summary-card-title summary-card-authors-date summary-card-topicchip summary-card-status summary-card-access-icon";
}

[mode="list"] .summary-card.show-status {
	grid-template-columns: minmax(0, 1fr) 140px 280px 130px;
}

[mode="list"] .summary-card.no-auth {
	grid-template-columns: minmax(0, 1fr) 150px 290px 24px;
	grid-template-areas:
		"summary-card-title summary-card-authors-date summary-card-topicchip summary-card-access-icon";
}

.summary-card .badge-line {
	flex-wrap: nowrap;
}

.summary-card .topics.badge-line { grid-area: summary-card-topicchip; }
.summary-card .access-icon       { grid-area: summary-card-access-icon; justify-self: end; }
.summary-card .title             { grid-area: summary-card-title; }
.summary-card .summarytext       { grid-area: summary-card-summarytext; }
.summary-card .authors-date      { grid-area: summary-card-authors-date; }
.summary-card .actions,
.summary-card .new,
.summary-card .progress          { grid-area: summary-card-status; }

[mode="card"] .summary-card .date {
	margin-top: 4px;
}

[mode="card"] .summary-card .icons-line {
	justify-content: right;
}

.summary-card .icons-line button {
	font-size: 14px;
}

[mode="list"] .summary-card .summarytext {
	display: none;
}

.summary-card .new {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	color: var(--jbjs-color);
	font-weight: 700;
	margin: auto 0 0 auto;
	border: 1px solid var(--jbjs-color);
	border-radius: 2em;
	padding: 0.1em 0.5em;
}

.summary-card .progress {
	display: flex;
	align-items: center;
}

.summary-card .progress .updated-text {
	color: var(--jbjs-color);
}
[mode="card"] .summary-card .progress .break {
	flex-basis:100%;
	height:0;
}

[mode="card"] .summary-card .progress {
	justify-content: flex-start;
	white-space: nowrap;
	flex-wrap: wrap;
}

[mode="list"] .summary-card .updated-text {
	display:none;
}

[mode="list"] .summary-card .icon:not(:first-of-type) {
	margin-left:5px;
}

.summary-card .progress .icon {
	background-repeat: no-repeat;
	background-size: cover;
	height: 20px;
	width: 20px;
	margin-right: 3px;
}

.summary-card .progress .icon.viewed {
	background-image: url(../../images/icons/viewed.svg);
}
.summary-card .progress .icon.updated {
	background-image: url(../../images/icons/notification.svg);
}

.summary-card .progress .icon.completed {
	background-image: url(../../images/icons/completed_green.svg);
}

@media (min-width: 700px) and (max-width: 799px) {
	[mode="list"] .summary-card {
		grid-template-columns: minmax(0, 1fr) 110px 230px 55px;
	}
	[mode="list"] .summary-card.show-status:not(.no-auth) {
		grid-template-columns: minmax(0, 1fr) 110px 230px 130px;
	}
}

@media (max-width: 699px) {
	.mobile[mode="card"] .summary-card {
		min-width: unset;
		max-width: unset;
		flex: unset;
	}

	[mode="card"] .summary-card .title {
		max-height: 1.2em;
		-webkit-line-clamp: 1;
	}
}