/* Blog-list responsive phases. */

/* Preserve the original inline metadata UI until the sidebar is removed. */
@media only screen and (min-width: 1155px) and (max-width: 1229px) {
	.blog-page .blog-list.list-view .article.blog-article .footer-sub {
		display: inline-block;
		margin: 0;
	}

	.blog-page .blog-list.list-view .article.blog-article .rate-info,
	.blog-page .blog-list.list-view .article.blog-article .comment,
	.blog-page .blog-list.list-view .article.blog-article .ico-action {
		padding-left: 10px;
		white-space: nowrap;
	}

	.blog-page .blog-list.list-view .article.blog-article .rate-info::before,
	.blog-page .blog-list.list-view .article.blog-article .comment::before,
	.blog-page .blog-list.list-view .article.blog-article .ico-action::before {
		display: block;
	}
}

/* Expanded-card phase: remove Recent Posts and use all available width. */
@media only screen and (max-width: 1154px) {
	body.blog-page #main #two-columns {
		display: block;
	}

	body.blog-page #main #content {
		width: 100%;
	}

	body.blog-page #main #sidebar {
		display: none;
	}

	.blog-page .blog-list.list-view .article.blog-article .meta {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}

	.blog-page .blog-list.list-view .article.blog-article .footer-sub {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		margin: 0;
	}

	.blog-page .blog-list.list-view .article.blog-article .star-rating,
	.blog-page .blog-list.list-view .article.blog-article .rate-info,
	.blog-page .blog-list.list-view .article.blog-article .comment,
	.blog-page .blog-list.list-view .article.blog-article .ico-action {
		-ms-flex: 0 0 auto;
		flex: 0 0 auto;
		white-space: nowrap;
	}

	.blog-page .blog-list.list-view .article.blog-article .rate-info,
	.blog-page .blog-list.list-view .article.blog-article .comment,
	.blog-page .blog-list.list-view .article.blog-article .ico-action {
		padding-left: 10px;
		border-left: 1px solid #e2e2e2;
	}

	.blog-page .blog-list.list-view .article.blog-article .rate-info::before,
	.blog-page .blog-list.list-view .article.blog-article .comment::before,
	.blog-page .blog-list.list-view .article.blog-article .ico-action::before {
		display: none;
	}
}

/* Compact phones: exactly two rows. */
@media only screen and (max-width: 320px) {
	.blog-page .blog-list.list-view .article.blog-article .meta {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		row-gap: 8px;
	}

	.blog-page .blog-list.list-view .article.blog-article .footer-sub {
		display: contents;
	}

	.blog-page .blog-list.list-view .article.blog-article .star-rating {
		grid-column: 1;
		grid-row: 1;
	}

	.blog-page .blog-list.list-view .article.blog-article .rate-info {
		grid-column: 2;
		grid-row: 1;
	}

	.blog-page .blog-list.list-view .article.blog-article .comment {
		grid-column: 1;
		grid-row: 2;
		padding-left: 0;
		border-left: 0;
	}

	.blog-page .blog-list.list-view .article.blog-article .ico-action {
		display: block;
		grid-column: 2;
		grid-row: 2;
		justify-self: start;
		margin: 0;
		padding-right: 0;
	}

	.blog-page .blog-list.list-view .article.blog-article .ico-action button.inactive-action {
		min-width: 28px;
		min-height: 28px;
	}
}