/* ==========================================================================
   Learner course page mock — components/frontend-preview.js (.m02d-fe*), shared by every file:
   CRS-04 "หน้าบ้าน" tab + header Preview, CRS-06 (pages/m02) and the learner-site preview
   (components/site-preview.js, M12). Moved unchanged from pages/m02-detail.css (selectors keep the
   .m02d- prefix); the page wrappers .m02d-fe-grid / .m02d-fe-stage stay there. Tokens only (tokens.css).
   ========================================================================== */

/* ---------------------------------------------------------------- course description (rich text) */
.m02d-rich { overflow-wrap: anywhere; }
.m02d-rich h2, .m02d-rich h3, .m02d-rich h4 { margin: var(--rv-space-3) 0 var(--rv-space-2); font-size: 14px; line-height: 22px; font-weight: 600; }
.m02d-rich ul, .m02d-rich ol { margin: 0 0 var(--rv-space-2); }
.m02d-rich img { max-width: 100%; height: auto; }

/* ---------------------------------------------------------------- course page */
.m02d-fe { min-width: 720px; max-width: 1040px; margin: 0 auto; background: var(--rv-surface); border: 1px solid var(--rv-border); border-radius: var(--rv-radius-overlay); overflow: hidden; box-shadow: var(--rv-shadow-popover); color: var(--rv-neutral-800); }
.m02d-fe.is-mobile { min-width: 0; width: 375px; max-width: 100%; }
.m02d-fe__chrome { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--rv-neutral-100); border-bottom: 1px solid var(--rv-divider); }
.m02d-fe__chrome > span { width: 9px; height: 9px; border-radius: 50%; background: var(--rv-neutral-300); }
.m02d-fe__chrome em { flex: 1; min-width: 0; margin-left: 8px; padding: 2px 10px; font-style: normal; font-size: 11px; line-height: 18px; color: var(--rv-text-muted); background: var(--rv-surface); border-radius: var(--rv-radius-pill); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m02d-fe__site { font-size: 13px; line-height: 20px; }
.m02d-fe__nav { display: flex; align-items: center; gap: 16px; padding: 10px 20px; border-bottom: 1px solid var(--rv-divider); }
.m02d-fe__nav img { width: 64px; height: auto; }
.m02d-fe__navlinks { flex: 1; color: var(--rv-text-secondary); font-size: 12px; }
.m02d-fe__login { padding: 4px 12px; border-radius: var(--rv-radius-control); background: var(--rv-primary-500); color: var(--rv-on-primary); font-size: 12px; font-weight: 500; }
.m02d-fe__who { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--rv-text-secondary); }
.m02d-fe__crumb { padding: 8px 20px 0; font-size: 11px; color: var(--rv-text-muted); }
.m02d-fe__hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 220px; gap: 16px; padding: 12px 20px 20px; align-items: start; }
.m02d-fe__media { aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: var(--rv-neutral-100); }
.m02d-fe__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.m02d-fe__info { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.m02d-fe__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.m02d-fe__cat, .m02d-fe__badge { padding: 0 8px; border-radius: var(--rv-radius-pill); font-size: 11px; line-height: 20px; }
.m02d-fe__cat { background: var(--rv-primary-50); color: var(--rv-primary-900); }
.m02d-fe__badge { background: var(--rv-warning-bg); color: var(--rv-warning); font-weight: 600; }
.m02d-fe__title { margin: 0; font-size: 18px; line-height: 26px; font-weight: 600; overflow-wrap: anywhere; }
.m02d-fe__short { margin: 0; color: var(--rv-text-secondary); }
.m02d-fe__ins { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; }
.m02d-fe__ins > span { display: inline-flex; align-items: center; gap: 6px; }
.m02d-fe__meta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--rv-text-secondary); }
.m02d-fe__meta li { display: inline-flex; align-items: center; gap: 4px; }
.m02d-fe__price { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--rv-divider); border-radius: 8px; background: var(--rv-surface-subtle); }
.m02d-fe__sale { font-size: 22px; line-height: 28px; font-weight: 700; color: var(--rv-primary-800); font-variant-numeric: tabular-nums; }
.m02d-fe__list { font-size: 12px; color: var(--rv-text-muted); }
.m02d-fe__off { color: var(--rv-danger); font-weight: 600; }
.m02d-fe__pnote { font-size: 12px; color: var(--rv-text-secondary); }
.m02d-fe__pkg { display: flex; gap: 6px; align-items: flex-start; font-size: 11px; line-height: 16px; color: var(--rv-primary-900); background: var(--rv-primary-50); padding: 6px 8px; border-radius: var(--rv-radius-control); }
.m02d-fe__cta { display: block; text-align: center; padding: 7px 10px; border-radius: var(--rv-radius-control); background: var(--rv-primary-500); color: var(--rv-on-primary); font-size: 12px; font-weight: 600; }
.m02d-fe__cta--ghost { background: var(--rv-surface); color: var(--rv-primary-800); border: 1px solid var(--rv-primary-500); }
.m02d-fe__inc { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--rv-text-secondary); }
.m02d-fe__inc li { display: flex; gap: 4px; align-items: center; }
.m02d-fe__body { display: flex; flex-direction: column; gap: 16px; padding: 0 20px 20px; }
.m02d-fe__body section { border-top: 1px solid var(--rv-divider); padding-top: 12px; }
.m02d-fe__body h4 { margin: 0 0 6px; font-size: 14px; line-height: 22px; font-weight: 600; }
.m02d-fe__body ul { margin: 0; }
.m02d-fe__checks { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }
.m02d-fe__checks li { display: flex; gap: 6px; align-items: flex-start; }
.m02d-fe__checks .rv-icon { margin-top: 3px; color: var(--rv-success); }
.m02d-fe__hint { margin: 0 0 6px; font-size: 11px; line-height: 16px; color: var(--rv-text-muted); }
.m02d-fe__outline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.m02d-fe__mod { border: 1px solid var(--rv-divider); border-radius: 6px; overflow: hidden; }
.m02d-fe__modhead { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; background: var(--rv-surface-subtle); font-size: 12px; }
.m02d-fe__modhead span { color: var(--rv-text-muted); white-space: nowrap; }
.m02d-fe__mod ul { list-style: none; margin: 0; padding: 0; }
.m02d-fe__les { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-top: 1px solid var(--rv-divider); font-size: 12px; color: var(--rv-text-secondary); }
.m02d-fe__les .rv-icon { flex: 0 0 auto; }
.m02d-fe__lt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.m02d-fe__ld { color: var(--rv-text-muted); font-variant-numeric: tabular-nums; }
.m02d-fe__lock { color: var(--rv-text-muted); display: inline-flex; }
.m02d-fe__tag { font-size: 11px; color: var(--rv-primary-800); background: var(--rv-primary-50); padding: 0 6px; border-radius: var(--rv-radius-pill); white-space: nowrap; }
.m02d-fe__les.is-open { color: var(--rv-text-primary); }
.m02d-fe__bio { display: flex; gap: 10px; align-items: flex-start; margin-top: 8px; }
.m02d-fe__bio p { margin: 4px 0 0; font-size: 12px; color: var(--rv-text-secondary); }
.m02d-fe__ads { padding: 14px; border: 1px dashed var(--rv-neutral-400); border-radius: 6px; background: repeating-linear-gradient(45deg, var(--rv-neutral-50), var(--rv-neutral-50) 8px, var(--rv-neutral-100) 8px, var(--rv-neutral-100) 16px); font-size: 11px; line-height: 16px; color: var(--rv-text-secondary); text-align: center; }
.m02d-fe__ads b { display: block; font-size: 12px; letter-spacing: .06em; color: var(--rv-neutral-700); }
/* mobile frame (also used when the preview is forced to Mobile on desktop) */
.m02d-fe.is-mobile .m02d-fe__navlinks { display: none; }
.m02d-fe.is-mobile .m02d-fe__nav, .m02d-fe.is-mobile .m02d-fe__body { padding-left: 14px; padding-right: 14px; }
.m02d-fe.is-mobile .m02d-fe__crumb { padding-left: 14px; }
.m02d-fe.is-mobile .m02d-fe__hero { grid-template-columns: minmax(0, 1fr); padding: 10px 14px 14px; }
.m02d-fe.is-mobile .m02d-fe__checks { grid-template-columns: minmax(0, 1fr); }