/**
 * Styles for the [sp_news] shortcode grid.
 *
 * Ported from the removed "WP News and Scrolling Widgets" (sp-news-and-widget)
 * plugin's assets/css/wpnw-public.css, limited to the rules used by the
 * [sp_news] shortcode. Class names are unchanged so existing markup matches.
 */

/* Layout helpers. */
.news-clearfix:before,
.news-clearfix:after { content: ""; display: table; }
.news-clearfix::after { clear: both; }

.news-col-3,
.news-col-4,
.news-col-2 { margin-bottom: 30px; }

.news-col-3,
.news-col-4,
.news-col-2,
.news-col-1,
.news-col-list { -webkit-box-sizing: border-box; box-sizing: border-box; }

/* Columns. */
.news-col-4 { width: 25%; float: left; padding: 0 15px; }
.news-col-3 { width: 33%; float: left; padding: 0 15px; }
.news-col-2 { width: 50%; float: left; padding: 0 15px; }
.news-col-1,
.news-col-list { width: 100%; float: left; padding-left: 15px; padding-right: 15px; }

.wpnaw-first { clear: both; }

/* Title and meta. */
.news .news-title { margin-top: 0; margin-bottom: 10px; }
.news .news-title a { font-size: 22px; line-height: 26px; color: #555; text-decoration: none; }
.news-cat { margin-bottom: 10px; }
.news-cat a,
.grid-date-post a { color: #555; }
.grid-date-post,
.grid-date-post a { font-size: 13px; margin-bottom: 5px; }

.news-content { float: left; width: 100%; clear: both; }
.post-content-text { width: 87%; margin-left: 2%; float: left; }
.news-thumb { float: left; width: 100%; margin-bottom: 25px; }

/* Thumbnails. */
.grid-news-thumb { float: left; height: 200px; line-height: 0; overflow: hidden; position: relative; width: 100%; background: #f1f1f1; }
.grid-news-thumb img { height: 100%; width: 100%; object-fit: cover; object-position: top center; border-radius: 0; }
.news-col-1 .grid-news-thumb { height: 400px; }
.news-col-2 .grid-news-thumb { height: 250px; }

.news-col-3 .news-thumb,
.news-col-2 .news-thumb,
.news-col-4 .news-thumb { margin-bottom: 10px; }
.news-col-3 .post-content-text,
.news-col-2 .post-content-text,
.news-col-4 .post-content-text { width: 100%; margin: 0; }
.news-col-1.has-no-date .post-content-text { margin-left: 0; width: 100%; }

.news-short-content { margin-bottom: 10px; }

/* Read more. */
.news-more-link { padding: 5px 15px; background: #555; color: #fff; border-radius: 2px; display: inline-block; clear: both; text-decoration: none; -webkit-transition: all .3s; transition: all .3s; }
.news-more-link:hover { background: #f1f1f1; color: #555; }

.type-news:last-child .news-inner-wrap-view { border: 0; padding: 0; margin: 0; }

/* Pagination. */
.news_pagination { width: 100%; text-align: center; color: #666; clear: both; }
.news_pagination a { color: #fff; background: #666; padding: 7px 10px; margin: 0 1px 6px 2px; display: inline-block; text-align: center; line-height: normal; font-size: 14px; border: 1px solid #666; text-decoration: none; -webkit-transition: all .3s ease; transition: all .3s ease; outline: 0; }
.news_pagination .page-numbers.current { color: #666; background: transparent; padding: 7px 10px; margin: 0 1px 6px 2px; display: inline-block; text-align: center; line-height: normal; font-size: 14px; text-transform: uppercase; border: 1px solid #666; }
.news_pagination a:hover,
.news_pagination a:focus { color: #666; background: #fff; outline: 0; }
.news_pagination a.prev,
.news_pagination a.next { min-width: 90px; }

/* Responsive. */
@media all and (max-width: 768px) {
	.news-col-3,
	.news-col-4 { width: 50%; }
	.news.wpnaw-first { clear: none; }
}

@media all and (max-width: 640px) {
	.news-col-3,
	.news-col-2,
	.news-col-4 { width: 100%; }
}

@media all and (max-width: 500px) {
	.news-col-1 .grid-news-thumb { height: 250px; }
}

@media all and (max-width: 400px) {
	.news-col-1 .grid-news-thumb { height: 200px; }
}