/* การ์ดประชาสัมพันธ์แอป PuriNotes (แนวนอน) — ใช้ที่หน้าแรก, /journey-study, /learning-tools
   โทนกระดาษใบลาน/ทอง ให้ต่างจากการ์ดคอร์สสีคราม จะได้อ่านออกทันทีว่า "นี่คือแอป ไม่ใช่บทเรียน"
   ทั้งใบเป็นลิงก์เดียว (แพทเทิร์นเดียวกับการ์ดห้องเกมในหน้าแรก) */

.pn-banner {
	--pn-ink: #4a3b28;
	--pn-gold: #b4892f;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	position: relative;
	overflow: hidden;
	border-radius: 1.5rem;
	background: linear-gradient(115deg, #fdf6e6 0%, #faeed6 52%, #f3e2bf 100%);
	box-shadow: 0 1px 2px rgba(74, 59, 40, .08);
	outline: 1px solid rgba(180, 137, 47, .28);
	outline-offset: -1px;
	color: var(--pn-ink);
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease;
}

.pn-banner:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px -14px rgba(74, 59, 40, .45);
}

.pn-banner:focus-visible {
	outline: 3px solid var(--pn-gold);
	outline-offset: 3px;
}

.pn-banner__art {
	position: relative;
	background: #f6ead2;
	overflow: hidden;
}

.pn-banner__art img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 45%;
}

.pn-banner__copy {
	padding: 1.15rem 1.25rem 1.35rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .5rem;
}

.pn-banner__badge {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .28rem .7rem;
	border-radius: 999px;
	background: rgba(180, 137, 47, .16);
	color: #8a6516;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.4;
}

.pn-banner__title {
	margin: 0;
	font-size: 1.4rem;
	font-weight: 800;
	line-height: 1.25;
	color: #3d2f1e;
}

.pn-banner__desc {
	margin: 0;
	font-size: .875rem;
	line-height: 1.65;
	color: #6b5a41;
	max-width: 34rem;
}

.pn-banner__chips {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin-top: .1rem;
}

.pn-banner__chip {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .25rem .6rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, .78);
	outline: 1px solid rgba(180, 137, 47, .3);
	outline-offset: -1px;
	font-size: 11px;
	font-weight: 700;
	color: #7a6238;
}

.pn-banner__cta {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	margin-top: .45rem;
	padding: .5rem .95rem .5rem .5rem;
	border-radius: .85rem;
	background: #3d2f1e;
	color: #fdf6e6;
	font-size: .875rem;
	font-weight: 800;
}

.pn-banner:hover .pn-banner__cta {
	background: #2b2014;
}

.pn-banner__cta-icon {
	width: 1.75rem;
	height: 1.75rem;
	border-radius: .55rem;
	background: rgba(253, 246, 230, .16);
	display: grid;
	place-items: center;
	font-size: .95rem;
}

/* จอกว้าง: รูป iPad อยู่ซ้าย ข้อความอยู่ขวา */
@media (min-width: 768px) {
	.pn-banner {
		grid-template-columns: minmax(14rem, 23rem) 1fr;
		align-items: stretch;
	}

	/* รูป iPad เป็นแนวตั้ง ถ้าปล่อยตามสัดส่วนจริงการ์ดจะสูงเกินไป — ตรึงเป็นจัตุรัส
	   แล้วให้ object-fit ครอบเอา (การ์ดสูงราว ๒๓ rem เท่ากับการ์ดคอร์สอื่นในหน้า) */
	.pn-banner__art {
		aspect-ratio: 1 / 1;
	}

	.pn-banner__art::after {
		content: "";
		position: absolute;
		inset: 0 0 0 auto;
		width: 3rem;
		background: linear-gradient(90deg, rgba(253, 246, 230, 0) 0%, rgba(253, 246, 230, .92) 100%);
	}

	.pn-banner__copy {
		justify-content: center;
		padding: 1.4rem 1.6rem 1.5rem 1.1rem;
	}

	.pn-banner__title {
		font-size: 1.75rem;
	}

	.pn-banner__desc {
		font-size: .95rem;
		max-width: 42rem;
	}
}

/* จอแคบ: ใช้โปสเตอร์เต็มใบแทน — ข้อความอยู่ในรูปอยู่แล้ว จึงเหลือแค่ปุ่มกดโหลด
   (หัวเรื่อง/คำโปรย/ชิป ยังอยู่ใน DOM สำหรับจอกว้างและเครื่องมือค้นหา) */
@media (max-width: 767px) {
	.pn-banner__art {
		aspect-ratio: 3 / 4;
	}

	.pn-banner__art img {
		object-position: 50% 50%;
	}

	.pn-banner__badge,
	.pn-banner__title,
	.pn-banner__desc,
	.pn-banner__chips {
		display: none;
	}

	.pn-banner__copy {
		padding: .85rem 1rem 1.05rem;
		align-items: stretch;
	}

	.pn-banner__cta {
		margin-top: 0;
		justify-content: center;
		/* ปุ่มทองบนพื้นกรมท่า ให้ต่อเนื่องกับโปสเตอร์ ไม่ใช่แถบครีมคนละโทน */
		background: linear-gradient(180deg, #e7cd86 0%, #c9a349 100%);
		color: #2a1f08;
	}

	.pn-banner:hover .pn-banner__cta {
		background: linear-gradient(180deg, #f0d99b 0%, #d4ae53 100%);
	}

	.pn-banner__cta-icon {
		background: rgba(42, 31, 8, .14);
	}

	/* พื้นการ์ดบนมือถือ = สีเดียวกับขอบล่างของโปสเตอร์ (#0d2845) */
	.pn-banner {
		background: #0d2845;
		outline-color: rgba(212, 175, 90, .42);
	}

	.pn-banner__art {
		background: #0d2845;
	}
}