/* =====================================================
   AsiaWeb Custom Post Display
   Responsive Grid / List Layout
===================================================== */


.asiaweb-cpd {

	--asiaweb-cpd-gap:24px;

	width:100%;
	max-width:100%;
	box-sizing:border-box;

}


.asiaweb-cpd *,
.asiaweb-cpd *::before,
.asiaweb-cpd *::after {

	box-sizing:border-box;

}


/* Pagelayer Compatibility */

.pagelayer-shortcodes-container .asiaweb-cpd {

	width:100%;
	max-width:100%;

}



/* =====================================================
   GRID
===================================================== */


.asiaweb-cpd-grid {

	display:grid;

	grid-template-columns:
	repeat(
		var(--asiaweb-cpd-columns,3),
		minmax(0,1fr)
	);

	gap:var(--asiaweb-cpd-gap);

}



.asiaweb-cpd-item {

	min-width:0;

}



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


.asiaweb-cpd-image-link {

	display:block;

	line-height:0;

}



.asiaweb-cpd-image {

	display:block;

	width:100%;

	max-width:var(--asiaweb-cpd-image-width,400px);

	height:auto;

	aspect-ratio:
	var(--asiaweb-cpd-image-ratio,16 / 9);

	object-fit:cover;

	margin:0 auto;

}



/* =====================================================
   TITLE
===================================================== */


.asiaweb-cpd-title {

	margin:12px 0 8px;

	font-size:1.1rem;

	line-height:1.45;

}


.asiaweb-cpd-title a {

	text-decoration:none;

}



/* =====================================================
   META
===================================================== */


.asiaweb-cpd-date,
.asiaweb-cpd-category,
.asiaweb-cpd-excerpt,
.asiaweb-cpd-read-more {

	display:block;

	margin-top:8px;

}


.asiaweb-cpd-meta {

	margin:12px 0 0;

}


.asiaweb-cpd-meta-row {

	display:flex;

	gap:8px;

	margin:4px 0;

}


.asiaweb-cpd-meta-row dt,
.asiaweb-cpd-meta-row dd {

	margin:0;

}


.asiaweb-cpd-meta-row dt {

	font-weight:600;

}



/* =====================================================
   CATEGORY TITLE
===================================================== */


.asiaweb-cpd-category-title {

	margin:0 0 20px;

	line-height:1.3;

}


.asiaweb-cpd-category-heading {

	margin:0 0 18px;

}



/* =====================================================
   PAGINATION
===================================================== */


.asiaweb-cpd-pagination {

	margin-top:32px;

	text-align:center;

}


.asiaweb-cpd-pagination ul {

	display:inline-flex;

	flex-wrap:wrap;

	gap:6px;

	list-style:none;

	margin:0;

	padding:0;

}


.asiaweb-cpd-pagination li {

	margin:0;

}


.asiaweb-cpd-pagination a,
.asiaweb-cpd-pagination span {

	display:inline-block;

	padding:7px 11px;

	text-decoration:none;

}



/* =====================================================
   NOT FOUND
===================================================== */


.asiaweb-cpd-not-found {

	padding:24px;

	text-align:center;

}



/* =====================================================
   LIST LAYOUT
===================================================== */


.asiaweb-cpd-layout-list .asiaweb-cpd-grid {

	display:flex;

	flex-direction:column;

}


.asiaweb-cpd-layout-list .asiaweb-cpd-item {

	display:grid;

	grid-template-columns:

	minmax(180px,300px)
	minmax(0,1fr);

	gap:20px;

	align-items:start;

}



/* =====================================================
   TABLET
   1024px
===================================================== */


@media(max-width:1024px){


	.asiaweb-cpd-grid {

		grid-template-columns:

		repeat(
			var(--asiaweb-cpd-tablet-columns,2),
			minmax(0,1fr)
		);

	}



}



/* =====================================================
   MOBILE
   767px
===================================================== */


@media(max-width:767px){


	.asiaweb-cpd-grid {


		grid-template-columns:

		repeat(
			var(--asiaweb-cpd-mobile-columns,1),
			minmax(0,1fr)
		);


	}



	.asiaweb-cpd-layout-list .asiaweb-cpd-item {


		grid-template-columns:1fr;


	}



	.asiaweb-cpd-image {


		max-width:100%;


	}



}



/* =====================================================
   SMALL MOBILE
===================================================== */


@media(max-width:480px){


	.asiaweb-cpd-title {

		font-size:1rem;

	}


}