/* Native Thai typography over individually generated cover artwork. */
.lesson-card { container-type: inline-size; border-color: #dce5f5; }
.lesson-card .card-art.lesson-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #0b2058; isolation: isolate; }
.lesson-thumb > img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 9; transform: none; transition: transform .35s ease; }
.lesson-card:hover .lesson-thumb > img { transform: scale(1.035); }
.lesson-thumb::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg,#071a4ad9 0%,#081d50b3 30%,#0a245780 48%,#0a245733 60%,transparent 72%); }
.thumb-brand { position: absolute; z-index: 2; top: 8%; left: 6%; display: flex; align-items: center; gap: 6px; color: #fff; font-size: clamp(9px,2.65cqi,12px); line-height: 1.2; font-weight: 650; letter-spacing: .25px; }
.thumb-brand b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; background: #ffd132; color: #102655; font: 800 16px Arial,sans-serif; }
.thumb-brand em { font-style: normal; opacity: .75; font-size: .78em; letter-spacing: 1.1px; }
.thumb-headline { position: absolute; z-index: 2; left: 6%; top: 32%; width: 66%; color: #fff; font-size: clamp(23px,7.3cqi,35px); font-weight: 800; line-height: 1.32; letter-spacing: -.65px; text-shadow: 0 2px 14px #05143435; }
.thumb-headline > span,.thumb-headline > strong { display: block; white-space: nowrap; }
.thumb-headline > strong { color: #ffdc49; font-weight: 800; }
.thumb-tag { position: absolute; z-index: 2; left: 6%; bottom: 10%; max-width: 74%; color: #dce9ff; font-size: clamp(9px,2.65cqi,12px); line-height: 1.45; font-weight: 500; white-space: nowrap; }
.thumb-tag::before { content: ''; display: inline-block; width: 12px; height: 3px; margin: 0 6px 3px 0; background: #ffd132; border-radius: 3px; }
.lesson-thumb .card-status { z-index: 3; top: 8%; right: 5%; bottom: auto; font-size: 10px; padding: 4px 7px; background: #fff; color: #12275e; }
.lesson-card .card-content { padding-top: 18px; }
.lesson-card .card-action { color: #234fa9; }
.lesson-card:hover { border-color: #a9c3f7; box-shadow: 0 14px 35px #10265513; }
.deck-cover.deck-cover-thumbnail { background: #0b2058; }
.deck-cover-background { position: absolute; inset: 0; z-index: 0; width: 100%; height: calc(100% - 98px); max-width: none; object-fit: cover; }
.deck-cover-scrim { position: absolute; inset: 0 0 98px; z-index: 1; background: linear-gradient(90deg,#061943ed 0%,#071b4bd9 42%,#0a245785 57%,transparent 76%); }
.deck-cover-thumbnail .deck-brand,.deck-cover-thumbnail .deck-takeaway { z-index: 3; }
.deck-cover-thumbnail .deck-content { z-index: 2; }
.deck-cover-thumbnail .deck-cover-copy > p { max-width: 690px; }
.deck-cover-thumbnail .deck-cover-tag { color: #ffdc49; }
@media (max-width:560px) {
  .lesson-card .card-art.lesson-thumb { aspect-ratio: 16 / 9; }
  .thumb-headline { font-size: 7.4cqi; }
  .thumb-brand { font-size: 2.8cqi; }
  .thumb-brand b { width: 18px; height: 18px; font-size: 15px; }
  .thumb-tag { font-size: 2.7cqi; }
}
@media (prefers-reduced-motion:reduce) { .lesson-thumb > img { transition: none; } .lesson-card:hover .lesson-thumb > img { transform: none; } }