/* ART-01 บทความ · ART-02 / ART-03 ฟอร์มบทความ (M12 หน้าบ้าน E-Learning) — tokens only, same layout family as m08 / m12-content forms */

/* ---- list */
.art-row { display: flex; align-items: center; gap: var(--rv-space-3); min-width: 0; }
.art-row__thumb { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 48px; overflow: hidden; border-radius: var(--rv-radius-control); background: var(--rv-neutral-100); color: var(--rv-neutral-500); }
.art-row__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.art-row__text { min-width: 0; }
.art-row__title { font-weight: 600; color: var(--rv-text-primary); text-decoration: none; }
.art-row__title:hover { color: var(--rv-primary-700); text-decoration: underline; }
.art-row__tags { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }

/* ---- form */
.art-form__grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--rv-space-4); align-items: start; margin-top: var(--rv-space-4); }
.art-form__main, .art-form__aside { min-width: 0; }
.art-form__aside { position: sticky; top: calc(var(--rv-header-height, 64px) + 12px); }
.art-form__actions { grid-column: 1 / -1; margin-top: 0; }
.art-form-page > .rv-alert { margin-top: var(--rv-space-4); }

/* ---- body editor (the site pages' .rv-rte + article blocks) */
.art-rte__txt { width: auto; min-width: 32px; padding: 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.art-rte__grow { flex: 1 1 auto; }
.art-rte__src { width: auto; gap: 4px; padding: 0 8px; font-size: 12px; font-weight: 600; }
.art-rte .rv-rte__editor { min-height: 360px; max-height: 70vh; }
.art-rte__code { display: block; width: 100%; min-height: 360px; border: 0; border-radius: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.55; resize: vertical; }
.art-rte__meta { padding: 6px var(--rv-space-3); border-top: 1px solid var(--rv-divider); background: var(--rv-neutral-50); }
.art-prose h2 { margin: var(--rv-space-4) 0 var(--rv-space-2); font-size: 1.25rem; line-height: 1.4; font-weight: 700; }
.art-prose blockquote { margin: var(--rv-space-3) 0; padding: var(--rv-space-2) var(--rv-space-3); border-left: 3px solid var(--rv-primary-500, var(--rv-primary-700)); background: var(--rv-neutral-50); color: var(--rv-text-secondary, inherit); }
.art-prose blockquote p:last-child { margin-bottom: 0; }
.art-prose ul, .art-prose ol { margin: 0 0 var(--rv-space-2); padding-left: 1.4em; }
.art-prose table { width: 100%; margin: var(--rv-space-3) 0; border-collapse: collapse; font-size: var(--rv-fs-small, .875rem); }
.art-prose th, .art-prose td { padding: 6px 10px; border: 1px solid var(--rv-divider); text-align: left; vertical-align: top; }
.art-prose th { background: var(--rv-neutral-50); font-weight: 600; }
.art-prose img { max-width: 100%; height: auto; border-radius: var(--rv-radius-control); }
.art-prose hr { margin: var(--rv-space-4) 0; border: 0; border-top: 1px solid var(--rv-divider); }
.art-prose a { color: var(--rv-primary-700); text-decoration: underline; }

@media (max-width: 1099px) {
  .art-form__grid { grid-template-columns: minmax(0, 1fr); }
  .art-form__aside { position: static; }
}