/**
 * Child Terms Posts Widget Styles
 *
 * Styles for displaying child taxonomy terms with their associated posts.
 *
 * @package JutSo\Widgets
 * @since 1.0.0
 */

/* ========================================
	MAIN CONTAINER
	======================================== */

.jce-child-terms-posts {
	width: 100%;
	/* Masonry-style columns on desktop */
	column-count: 3;
	column-gap: 2rem;
}

/* ========================================
	TERM CONTAINER
	======================================== */

.jce-child-terms-posts__term {
	margin-bottom: 64px;
	/* Prevent items from breaking across columns */
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	-moz-column-break-inside: avoid;
}

.jce-child-terms-posts__term:last-child {
	margin-bottom: 0;
}

/* ========================================
	TERM HEADER
	======================================== */

.jce-child-terms-posts__term-header {
	display: flex;
	flex-direction: column;
	row-gap: 24px;
}

/* ========================================
	TERM IMAGE
	======================================== */
.jce-child-terms-posts__term-name {
	margin: 0 !important;
}


/* ========================================
	TERM IMAGE
	======================================== */

.jce-child-terms-posts__term-image img {
	display: block;
	width: 100%;
	aspect-ratio: 57 / 35;
	height: auto;
	object-fit: cover;
	border-radius: 10px;
}



/* ========================================
	TERM DESCRIPTION
	======================================== */


.jce-child-terms-posts__term-description p:last-child {
	margin-bottom: 0;
}

/* ========================================
	TERM POSTS LIST
	======================================== */

.jce-child-terms-posts__term-posts {
	list-style: none;
	margin: 1em 0 0 0;
	padding: 0;
}

.jce-child-terms-posts__term-posts:empty {
	display: none;
}

/* ========================================
	POST ITEM
	======================================== */

.jce-child-terms-posts__post-item {
	margin: 0.5em 0;
	padding: 0;
	list-style: none;
}

.jce-child-terms-posts__post-item:first-child {
	margin-top: 0;
}

.jce-child-terms-posts__post-item:last-child {
	margin-bottom: 0;
}

.jce-child-terms-posts__post-item a {
	display: inline-block;
	background-size: 100% 2px !important;
}

.jce-child-terms-posts__post-item a:hover,
.jce-child-terms-posts__post-item a:focus {

	background-size: 0% 2px !important;
}


/* ========================================
	EMPTY STATE
	======================================== */

.jce-child-terms-posts__empty {
	padding: 2em;
	text-align: center;
	background-color: #f5f5f5;
	border: 1px solid #ddd;
	border-radius: 4px;
}

.jce-child-terms-posts__empty p {
	margin: 0;
	color: var(--text);
}

/* ========================================
	RESPONSIVE - Tablet
	======================================== */

@media screen and (max-width: 1024px) {
	.jce-child-terms-posts {
		column-count: 2;
	}
}

/* ========================================
	RESPONSIVE - Mobile
	======================================== */

@media screen and (max-width: 767px) {
	.jce-child-terms-posts {
		column-count: 1;
	}

	.jce-child-terms-posts__term {
		margin-bottom: 1.5em;
	}

	.jce-child-terms-posts__term-header {
		margin-bottom: 0.75em;
	}

	.jce-child-terms-posts__term-posts {
		margin-top: 0.75em;
	}
}