/* =====================================================
   AsiaWeb Custom Post Display
   Responsive Grid / Fixed Image Frame
===================================================== */


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

.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);

	width: 100%;
}


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

.asiaweb-cpd-item {
	min-width: 0;
	width: 100%;
}


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

/*
 * กรอบภาพ 16:9
 *
 * จุดสำคัญ:
 *
 * - ควบคุมความสูงของพื้นที่ภาพ
 * - ทุก Card มีความสูงเท่ากัน
 * - ไม่ทำให้ภาพจริงเสียสัดส่วน
 */

.asiaweb-cpd-image-frame {
	position: relative;

	display: flex;

	width: 100%;

	aspect-ratio: 16 / 9;

	align-items: center;
	justify-content: center;

	margin: 0;
	padding: 0;

	overflow: hidden;

	line-height: 0;
}


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

.asiaweb-cpd-image-link {
	display: flex;

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

	align-items: center;
	justify-content: center;

	margin: 0;
	padding: 0;

	line-height: 0;

	text-decoration: none;

	overflow: hidden;
}


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

/*
 * IMPORTANT
 *
 * ใช้ contain
 *
 * ภาพจะ:
 *
 * - ไม่ Crop
 * - ไม่ยืด
 * - ไม่บีบ
 * - รักษา Aspect Ratio จริง
 *
 * แต่ภาพที่มีสัดส่วนต่างจาก 16:9
 * จะมีพื้นที่ว่างภายในกรอบ
 */

.asiaweb-cpd-image {
	display: block;

	width: 100%;
	height: 100%;

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

	margin: 0;
	padding: 0;

	object-fit: contain;

	object-position: center center;

	aspect-ratio: auto;

	vertical-align: middle;

	border: 0;
}


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

.asiaweb-cpd-image-frame > .asiaweb-cpd-image {
	width: 100%;
	height: 100%;
}


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

.asiaweb-cpd-title {
	margin: 12px 0 8px;

	font-size: 1.1rem;
	line-height: 1.45;

	word-wrap: break-word;
	overflow-wrap: break-word;
}

.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;
}


/*
 * List mode
 *
 * ใช้กรอบ 16:9 เช่นเดียวกัน
 */

.asiaweb-cpd-layout-list .asiaweb-cpd-image-frame {
	width: 100%;

	aspect-ratio: 16 / 9;
}


.asiaweb-cpd-layout-list .asiaweb-cpd-image {
	width: 100%;
	height: 100%;

	object-fit: contain;
}


/* =====================================================
   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-layout-list .asiaweb-cpd-image-frame {
		width: 100%;

		aspect-ratio: 16 / 9;
	}
}


/* =====================================================
   SMALL MOBILE
   480px
===================================================== */

@media (max-width: 480px) {

	.asiaweb-cpd-title {
		font-size: 1rem;
	}
}