/* =========================================================
   News Central Elements - Latest Posts
   ========================================================= */

.nce-post-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nce-post-item {
	display: grid;
	grid-template-columns: minmax(220px, 38%) minmax(0, 62%);
	gap: 30px;
	margin: 0 0 30px;
	padding: 0 0 30px;
	border-bottom: 1px solid #e5e5e5;
}

.nce-post-item:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

/* Thumbnail
--------------------------------------------------------- */

.nce-post-thumbnail {
	width: 100%;
	overflow: hidden;
}

.nce-post-thumbnail a {
	display: block;
}

.nce-post-thumbnail img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

/* Content
--------------------------------------------------------- */

.nce-post-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

.nce-post-title {
	margin: 0 0 12px;
	padding: 0;
	font-size: 24px;
	line-height: 1.25;
}

.nce-post-title a {
	color: inherit;
	text-decoration: none;
}

.nce-post-title a:hover {
	text-decoration: underline;
}

/* Excerpt
--------------------------------------------------------- */

.nce-post-excerpt {
	margin: 0 0 16px;
	font-size: 16px;
	line-height: 1.6;
}

/* Categories
--------------------------------------------------------- */

.nce-post-categories {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
}

.nce-post-category {
	display: inline-block;
	padding: 4px 9px;
	font-size: 12px;
	line-height: 1.2;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.nce-post-category a {
	color: inherit;
	text-decoration: none;
}

/* Post Meta
--------------------------------------------------------- */

.nce-post-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	margin: auto 0 0;
	padding: 0;
	font-size: 13px;
	line-height: 1.5;
}

.nce-post-meta-item {
	display: inline-flex;
	align-items: center;
}

.nce-post-meta-item + .nce-post-meta-item::before {
	content: "•";
	margin-right: 14px;
}


.nce-post-item {
	display: grid;
	grid-template-columns: minmax(220px, 38%) minmax(0, 62%);
	gap: 30px;
	margin: 0 0 30px;
	padding: 0 0 30px;
}

.nce-post-item.nce-no-thumbnail {
	grid-template-columns: 1fr;
}

.nce-post-thumbnail {
	width: 100%;
	overflow: hidden;
}

.nce-post-thumbnail img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* Thumbnail alignment */

.nce-thumbnail-right .nce-post-thumbnail {
	order: 2;
}

.nce-thumbnail-right .nce-post-content {
	order: 1;
}

/* Thumbnail widths */

.nce-thumbnail-width-small .nce-post-thumbnail {
	max-width: 280px;
}

.nce-thumbnail-width-medium .nce-post-thumbnail {
	max-width: 420px;
}

.nce-thumbnail-width-large .nce-post-thumbnail {
	max-width: 600px;
}

.nce-thumbnail-width-extra-large .nce-post-thumbnail {
	max-width: 100%;
}

/* Thumbnail orientations */

.nce-post-item.nce-thumbnail-square .nce-post-thumbnail img {
	aspect-ratio: 1 / 1;
}

.nce-post-item.nce-thumbnail-portrait-2-2 .nce-post-thumbnail img {
	aspect-ratio: 2 / 2;
}

.nce-post-item.nce-thumbnail-portrait-3-4 .nce-post-thumbnail img {
	aspect-ratio: 3 / 4;
}

.nce-post-item.nce-thumbnail-landscape-21-9 .nce-post-thumbnail img {
	aspect-ratio: 21 / 9;
}

.nce-post-item.nce-thumbnail-landscape-16-9 .nce-post-thumbnail img {
	aspect-ratio: 16 / 9;
}

.nce-post-item.nce-thumbnail-landscape-3-2 .nce-post-thumbnail img {
	aspect-ratio: 3 / 2;
}

.nce-post-item.nce-thumbnail-landscape-4-3 .nce-post-thumbnail img {
	aspect-ratio: 4 / 3;
}

.nce-post-item.nce-thumbnail-original .nce-post-thumbnail img {
	aspect-ratio: auto;
}

/* Meta */

.nce-post-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	margin-top: auto;
	font-size: 13px;
	line-height: 1.5;
}

.nce-post-meta-item {
	display: inline-flex;
	align-items: center;
}

.nce-post-meta-item + .nce-post-meta-item::before {
	content: "•";
	margin-right: 14px;
}

/* Mobile */

@media (max-width: 767px) {

	.nce-post-item {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.nce-post-item.nce-no-thumbnail {
		grid-template-columns: 1fr;
	}

	.nce-thumbnail-right .nce-post-thumbnail {
		order: 1;
	}

	.nce-thumbnail-right .nce-post-content {
		order: 2;
	}

	.nce-post-thumbnail {
		max-width: 100%;
	}

}


/* Tablet
--------------------------------------------------------- */

@media (max-width: 767px) {

	.nce-post-item {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.nce-post-thumbnail img {
		aspect-ratio: 16 / 9;
	}

	.nce-post-title {
		font-size: 21px;
	}

	.nce-post-excerpt {
		font-size: 15px;
	}

}


/* Categories */

.nce-grid-post-categories {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
}

.nce-grid-post-category {
	display: inline-block;
}

.nce-grid-post-category a {
	font-family: var(--cs-font-category-family), sans-serif;
    font-size: var(--cs-font-category-size);
    line-height: var(--cs-font-category-line-height);
    font-weight: var(--cs-font-category-weight);
    font-style: var(--cs-font-category-style);
    letter-spacing: var(--cs-font-category-letter-spacing);
    text-transform: var(--cs-font-category-text-transform);
    display: flex;
    align-items: center;
    color: var(--cs-color-category, var(--cs-color-accent));
}

/* Title */

.nce-grid-post-title {
	margin: 0 0 10px;
	padding: 0;
	font-size: 20px;
	line-height: 1.3;
}

.nce-grid-post-title a {
	color: inherit;
	text-decoration: none;
}

.nce-grid-post-title a:hover {
	text-decoration: underline;
}

/* Excerpt */

.nce-grid-post-excerpt {
	margin: 0 0 12px;
	font-size: 15px;
	line-height: 1.55;
}

/* Author */

.nce-grid-post-author {
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
}

/* Remaining meta */

.nce-grid-post-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
	font-size: 12px;
	line-height: 1.5;
	color: #777;
}

.nce-grid-post-meta-item {
	display: inline-flex;
	align-items: center;
}

.nce-grid-post-meta-item + .nce-grid-post-meta-item::before {
	content: "•";
	margin-right: 12px;
	color: #aaa;
}

/* =========================================================
   Grid Layout
   ========================================================= */

.nce-post-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 30px;
	row-gap: 25px;
	width: 100%;
}

/*
 * Each grid item must be allowed to occupy the
 * full width of its grid column.
 */
.nce-grid-post-item {
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

/*
 * Grid thumbnails always fill the entire width
 * of the grid card.
 */
.nce-grid-post-item .nce-post-thumbnail {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
}

/*
 * The image itself must fill the thumbnail container.
 */
.nce-grid-post-item .nce-post-thumbnail img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	object-fit: cover;
}

/*
 * Do not allow List thumbnail width classes to
 * restrict Grid thumbnails.
 */
.nce-grid-post-item.nce-thumbnail-small .nce-post-thumbnail,
.nce-grid-post-item.nce-thumbnail-medium .nce-post-thumbnail,
.nce-grid-post-item.nce-thumbnail-large .nce-post-thumbnail,
.nce-grid-post-item.nce-thumbnail-extra-large .nce-post-thumbnail {
	width: 100%;
	max-width: 100%;
}

/*
 * Grid thumbnail aspect ratios.
 */
.nce-grid-post-item.nce-thumbnail-square .nce-post-thumbnail,
.nce-grid-post-item.nce-thumbnail-portrait-2-2 .nce-post-thumbnail {
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.nce-grid-post-item.nce-thumbnail-portrait-3-4 .nce-post-thumbnail {
	aspect-ratio: 3 / 4;
	overflow: hidden;
}

.nce-grid-post-item.nce-thumbnail-landscape-21-9 .nce-post-thumbnail {
	aspect-ratio: 21 / 9;
	overflow: hidden;
}

.nce-grid-post-item.nce-thumbnail-landscape-16-9 .nce-post-thumbnail {
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.nce-grid-post-item.nce-thumbnail-landscape-3-2 .nce-post-thumbnail {
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

.nce-grid-post-item.nce-thumbnail-landscape-4-3 .nce-post-thumbnail {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

/*
 * Make images fill the selected aspect ratio.
 */
.nce-grid-post-item .nce-post-thumbnail[class*="nce-thumbnail-"] img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Original image orientation.
 */
.nce-grid-post-item.nce-thumbnail-original .nce-post-thumbnail img {
	width: 100%;
	height: auto;
	object-fit: contain;
}

/* =========================================================
   Grid Content
   ========================================================= */

.nce-grid-post-item .nce-post-categories {
	margin-top: 12px;
}

.nce-grid-post-item .nce-post-title {
	margin-top: 8px;
}

.nce-grid-post-item .nce-post-excerpt {
	margin-top: 8px;
}

.nce-grid-post-item .nce-post-author {
	margin-top: 10px;
}

.nce-grid-post-item .nce-post-meta {
	margin-top: 6px;
}

/* =========================================================
   Grid Row Divider
   ========================================================= */

.nce-post-grid.nce-grid-divider .nce-grid-post-item {
	padding-bottom: 20px;
	border-bottom: 1px solid #ddd;
}

/* =========================================================
   Advertisement inside Grid
   ========================================================= */

.nce-post-grid .nce-ad-container {
	grid-column: 1 / -1;
	width: 100%;
}