/* การ์ดโฆษณาแอป PuriDict · PuriFlash (app/includes/app_promo_cards.php) — ๒ ใบแบ่งครึ่ง ใต้การ์ด PuriNotes
 * สีประจำแอป: PuriDict = คราม (ค้นคำ/หนังสือ) · PuriFlash = ทอง (เกม/การ์ด) · โหมดสว่าง/มืดตาม <html data-ui> */
.ap-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.ap-card {
	--ap-c: #4338ca; --ap-soft: #eef2ff; --ap-line: rgba(79, 70, 229, .22);
	display: flex; flex-direction: column; overflow: hidden; border-radius: 22px;
	background: #fff; border: 1px solid var(--ap-line);
	box-shadow: 0 18px 40px -28px rgba(20, 26, 51, .4);
	transition: transform .25s cubic-bezier(.25, 1, .5, 1), box-shadow .25s ease;
}
.ap-card.is-flash { --ap-c: #b45309; --ap-soft: #fff7e6; --ap-line: rgba(217, 119, 6, .28); }
.ap-card:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -26px rgba(20, 26, 51, .5); }
html[data-ui="dark"] .ap-card { background: #131c38; box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .9); }
html[data-ui="dark"] .ap-card.is-dict { --ap-c: #c7d2fe; --ap-soft: rgba(129, 140, 248, .16); --ap-line: rgba(129, 140, 248, .3); }
html[data-ui="dark"] .ap-card.is-flash { --ap-c: #fde68a; --ap-soft: rgba(245, 191, 69, .14); --ap-line: rgba(245, 191, 69, .3); }

.ap-art { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ap-soft); }
.ap-art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.ap-card:hover .ap-art img { transform: scale(1.04); }
.ap-badge { position: absolute; left: .8rem; top: .8rem; display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .65rem; border-radius: 999px; background: rgba(255, 255, 255, .92); color: #1e1b4b; font-size: calc(.75rem * var(--reading-scale, 1)); font-weight: 800; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .5); }

.ap-body { display: flex; flex: 1; flex-direction: column; gap: .6rem; padding: 1rem 1.15rem 1.15rem; }
.ap-title { display: flex; align-items: center; gap: .7rem; margin: 0; }
.ap-ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 13px; background: var(--ap-soft); color: var(--ap-c); box-shadow: inset 0 0 0 1.5px var(--ap-line); font-size: 1.05rem; }
.ap-title > span:last-child { display: flex; flex-direction: column; line-height: 1.25; color: var(--sc-ink, #141a33); font-size: calc(1.3rem * var(--reading-scale, 1)); font-weight: 800; }
.ap-title small { margin-top: .15rem; color: var(--ap-c); font-size: calc(.88rem * var(--reading-scale, 1)); font-weight: 800; }
.ap-desc { margin: 0; color: var(--ui-ink2, #333c5c); font-size: calc(.95rem * var(--reading-scale, 1)); line-height: 1.65; }
.ap-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.ap-chips li { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .6rem; border-radius: 999px; background: var(--ap-soft); color: var(--ap-c); font-size: calc(.8rem * var(--reading-scale, 1)); font-weight: 700; }
.ap-ctas { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: auto; padding-top: .3rem; }
.ap-ctas > .ap-cta { flex: 1 1 0; justify-content: center; min-width: 0; padding-left: .6rem; padding-right: .6rem; white-space: nowrap; }
/* ปุ่มเปิดบนเว็บ = แถวของตัวเองเต็มกว้าง (ปุ่มร้านแอป ๒ ปุ่มแบ่งแถวบนพอดี) */
.ap-ctas > .ap-cta--web { flex: 1 1 100%; min-height: 42px; }
.ap-cta--web span { flex-direction: row; align-items: baseline; gap: .4rem; }
.ap-cta { display: inline-flex; align-items: center; gap: .55rem; min-height: 46px; padding: .35rem .85rem; border-radius: 12px; background: #1e1b4b; color: #fff; text-decoration: none; transition: background-color .15s ease, transform .15s ease; }
.ap-cta:hover { background: #312e81; transform: translateY(-1px); }
.ap-cta i { font-size: 1.15rem; }
.ap-cta span { display: flex; flex-direction: column; line-height: 1.15; font-weight: 800; font-size: calc(.92rem * var(--reading-scale, 1)); }
.ap-cta small { font-weight: 600; font-size: calc(.68rem * var(--reading-scale, 1)); opacity: .8; }
.ap-cta--web { background: transparent; color: var(--ap-c); box-shadow: inset 0 0 0 1.5px var(--ap-line); }
.ap-cta--web:hover { background: var(--ap-soft); }
html[data-ui="dark"] .ap-cta:not(.ap-cta--web) { background: #fff; color: #0a0f1e; }
html[data-ui="dark"] .ap-cta:not(.ap-cta--web):hover { background: #f5bf45; }
.ap-cta:focus-visible, .ap-card a:focus-visible { outline: 3px solid #f5bf45; outline-offset: 2px; }

@media (max-width: 760px) { .ap-grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .ap-card, .ap-art img, .ap-cta { transition: none; } }

/* ── การ์ด "รวมการ์ดสรุปของหลวงพี่ภูริ" (app/includes/summary_cards_promo.php) — ทั้งใบเป็นลิงก์ไป Google Drive ── */
.sc2-card {
	display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); overflow: hidden; border-radius: 22px;
	background: #fff; border: 1px solid rgba(16, 185, 129, .3); color: inherit; text-decoration: none;
	box-shadow: 0 18px 40px -28px rgba(20, 26, 51, .4); transition: transform .25s cubic-bezier(.25, 1, .5, 1), box-shadow .25s ease;
}
.sc2-card:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -26px rgba(20, 26, 51, .5); }
.sc2-card:focus-visible { outline: 3px solid #f5bf45; outline-offset: 3px; }
html[data-ui="dark"] .sc2-card { background: #131c38; border-color: rgba(52, 211, 153, .3); box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .9); }
.sc2-art { position: relative; overflow: hidden; min-height: 240px; background: #ecfdf5; }
.sc2-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 45% 50%; transition: transform .6s ease; }
.sc2-card:hover .sc2-art img { transform: scale(1.04); }
.sc2-body { display: flex; flex-direction: column; gap: .55rem; padding: 1.15rem 1.25rem 1.2rem; }
.sc2-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .65rem; border-radius: 999px; background: #ecfdf5; color: #047857; font-size: calc(.78rem * var(--reading-scale, 1)); font-weight: 800; }
.sc2-title { display: block; color: var(--sc-ink, #141a33); font-size: calc(1.4rem * var(--reading-scale, 1)); font-weight: 800; line-height: 1.3; }
.sc2-title span { margin-left: .35rem; color: #047857; }
.sc2-desc { color: var(--ui-ink2, #333c5c); font-size: calc(.95rem * var(--reading-scale, 1)); line-height: 1.65; }
.sc2-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; margin-top: .2rem; }
.sc2-thumb { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.sc2-thumb img { display: block; width: 100%; aspect-ratio: 1241 / 1755; object-fit: cover; object-position: top; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px rgba(20, 26, 51, .12), 0 8px 16px -10px rgba(20, 26, 51, .45); transition: transform .2s ease; }
.sc2-card:hover .sc2-thumb:nth-child(odd) img { transform: rotate(-1.5deg) translateY(-2px); }
.sc2-card:hover .sc2-thumb:nth-child(even) img { transform: rotate(1.5deg) translateY(-2px); }
.sc2-thumb small { overflow: hidden; color: var(--ui-muted, #525b78); font-size: calc(.75rem * var(--reading-scale, 1)); font-weight: 700; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.sc2-cta { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; margin-top: auto; min-height: 48px; padding: .5rem 1rem; border-radius: 12px; background: #047857; color: #fff; font-weight: 800; font-size: calc(.98rem * var(--reading-scale, 1)); transition: background-color .15s ease; }
.sc2-card:hover .sc2-cta { background: #065f46; }
.sc2-ext { font-size: .75em; opacity: .8; }
html[data-ui="dark"] .sc2-art { background: rgba(16, 185, 129, .12); }
html[data-ui="dark"] .sc2-badge { background: rgba(16, 185, 129, .16); color: #6ee7b7; }
html[data-ui="dark"] .sc2-title span { color: #6ee7b7; }
html[data-ui="dark"] .sc2-cta { background: #10b981; color: #022c22; }
html[data-ui="dark"] .sc2-card:hover .sc2-cta { background: #34d399; }
@media (max-width: 760px) {
	.sc2-card { grid-template-columns: minmax(0, 1fr); }
	.sc2-art { min-height: 0; aspect-ratio: 16 / 9; }
	.sc2-thumbs { gap: .4rem; }
	.sc2-thumb small { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sc2-card, .sc2-art img, .sc2-thumb img, .sc2-cta { transition: none; } }