/* ═══════════════════════════════════════════════════════════════
   components.css — Design System Component Definitions
   Auto-extracted from preview/component-*.html
   DO NOT EDIT MANUALLY — regenerate via extract-components-css.mjs
   ═══════════════════════════════════════════════════════════════ */

/* ── Badge ─────────────────────────────────────────────────── */
/* @anatomy
   <span class="badge badge-accent">เปิดรับสมัคร</span><span class="badge badge-info">ข่าวเด่น</span><span class="badge badge-success">เปิดรับสมัคร</span>
*/
.badge { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: 28px; min-height: 28px; padding: var(--space-1) var(--space-3); border: 1px solid transparent; border-radius: var(--radius-full); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-body); font-size: var(--type-caption); font-weight: var(--font-weight-caption); line-height: 1; background: var(--color-surface); color: var(--color-on-surface); } .badge-accent { background: var(--color-accent); border-color: var(--color-accent); color: var(--accent-foreground); } .badge-info { border-color: var(--color-info); color: var(--color-info); } .badge-success { border-color: var(--color-success); color: var(--color-success); } .badge-disabled { background: var(--color-surface-container); border-color: var(--color-border); color: var(--color-muted-foreground); }

/* ── Button ────────────────────────────────────────────────── */
/* @anatomy
   <span class="label">สมัครเรียน</span><div class="buttons"><button class="btn btn-primary btn-lg" type="button" aria-label="สมัครเรียน">สมัครเรียน</button><button class="btn btn-primary btn-lg" type="button" aria-label="สมัครเรียน" disabled>สมัครเรียน</button>
*/
.btn { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: var(--size-button-height-md); height: var(--size-button-height-md); padding: 0 var(--space-5); border: 1px solid transparent; border-radius: var(--radius-full); font-size: var(--type-body); font-weight: 500; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; transition: background .15s, border-color .15s; }
.btn-primary { background: var(--accent); color: var(--accent-foreground); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { background: var(--primary-container); color: var(--color-primary); border-color: var(--color-primary); }
.btn-secondary:hover { background: var(--surface-container); }
.btn-ghost { background: transparent; color: var(--color-primary); }
.btn-ghost:hover { background: var(--surface-container); }
.btn-lg { min-width: var(--size-button-height-lg); height: var(--size-button-height-lg); padding: 0 var(--space-6); }
.btn:disabled { background: var(--secondary); color: var(--color-muted-foreground); border-color: var(--color-border); cursor: not-allowed; }

/* ── Card ──────────────────────────────────────────────────── */
/* @anatomy
   <span class="label">กิจกรรมวันไหว้ครู</span> <article class="card" data-evidence-sample="News Card" aria-label="กิจกรรมวันไหว้ครู"> <div class="card__media" aria-hidden="true">
*/
.card { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); width: 100%; min-height: 176px; background: var(--color-card); color: inherit; text-decoration: none; border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); overflow: hidden; transition: background .15s, border-color .15s, filter .15s; flex-shrink: 0; }
.card:hover { filter: brightness(.97); }
.card--stack { grid-template-columns: 1fr; }
.card__media { min-height: 176px; background: linear-gradient(135deg,var(--color-primary-container),var(--color-surface-container)); }
.card--stack .card__media { min-height: 132px; background: linear-gradient(135deg,var(--color-accent),var(--color-primary-container)); }
.card__body { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); min-width: 0; }
.card__text { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.card__eyebrow { font-size: var(--font-size-caption); font-weight: var(--font-weight-caption); line-height: var(--line-height-caption); color: var(--color-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card__title { margin: 0; font-family: var(--font-heading); font-size: var(--font-size-h4); font-weight: var(--font-weight-h4); line-height: var(--line-height-h4); color: var(--color-on-surface); word-break: keep-all; overflow-wrap: break-word; }
.card__summary { margin: 0; font-size: var(--font-size-body); font-weight: var(--font-weight-body); line-height: var(--line-height-body); color: var(--color-muted-foreground); overflow-wrap: break-word; }
.card__meta { display: flex; align-items: center; gap: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--color-border); min-width: 0; font-size: var(--font-size-caption); font-weight: var(--font-weight-caption); line-height: var(--line-height-caption); color: var(--color-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Cta Link ──────────────────────────────────────────────── */
/* @anatomy
   <a class="cta-link cta-link--primary" href="#" data-evidence-sample="Explore Curriculum"><span class="cta-link__text">ดูหลักสูตร</span><img class="cta-link__icon" src="https://cdn.jsdelivr.net/npm/lucide-static@1.8.0/icons/arrow-right.svg" alt="" aria-hidden="true"></a> <a class="cta-link cta-link--primary cta-link--disabled" href="#" aria-disabled="true" tabindex="-1" data-evidence-sample="Exp...
*/
.cta-link{display:inline-flex;align-items:center;gap:var(--space-2);min-width:var(--size-button-height-sm);height:var(--size-button-height-sm);padding:0 var(--space-2);background:transparent;border:none;color:var(--color-on-surface);font-family:var(--font-body);font-size:var(--type-body);font-weight:600;line-height:var(--line-height-body);text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s;flex-shrink:0;}.cta-link:hover{background:var(--accent-hover);}.cta-link:focus-visible{outline:2px solid currentColor;outline-offset:2px;}.cta-link--primary{color:var(--link);}.cta-link--disabled,.cta-link[aria-disabled="true"]{color:var(--color-muted-foreground);pointer-events:none;cursor:default;}.cta-link__text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.cta-link__icon{width:var(--size-icon-sm);height:var(--size-icon-sm);flex-shrink:0;}

/* ── Input ─────────────────────────────────────────────────── */
/* @anatomy
   <span class="label">ชื่อผู้ปกครอง</span> <div class="scene" data-evidence-sample="Parent Name"> <div class="stack"> <label class="field-label" for="parent-name">ชื่อผู้ปกครอง</label> <input class="control" id="parent-name" type="text" aria-label="ชื่อผู้ปกครอง">
*/
.stack { display:flex; flex-direction:column; gap:var(--space-2); flex-shrink:0; min-width:220px; }.field-label { font-size:var(--type-caption); font-weight:var(--font-weight-caption); line-height:var(--line-height-caption); color:var(--color-on-surface); }.control { width:280px; height:var(--size-input-height); padding:0 var(--space-3); border:1px solid var(--color-border); background:var(--color-background); color:var(--color-on-surface); font:inherit; transition:background .15s,border-color .15s; }.control:hover { border-color:var(--accent-hover); }.control:focus-visible { outline:2px solid var(--ring); outline-offset:2px; }.control:disabled { background:var(--color-surface-container); color:var(--color-muted-foreground); }.control.error { border-color:var(--color-error); }.control.area { height:96px; padding-top:var(--space-3); padding-bottom:var(--space-3); resize:none; }.hint { font-size:var(--type-caption); line-height:var(--line-height-caption); color:var(--color-muted-foreground); }.hint.error { color:var(--color-error); }

/* ── Navigation ────────────────────────────────────────────── */
/* @anatomy
   <div class="story-label" aria-hidden="true"></div> <nav class="nav-shell nav-desktop" aria-label="เมนูหลัก" data-evidence-sample="Desktop Header"> <a class="brand" href="#" aria-label="หน้าแรก"><span class="crest" aria-hidden="true"></span></a> <div class="nav-menu"> <a class="nav-link" href="#" aria-current="page">หน้าแรก</a> <a class="nav-link" href="#">ประวัติ</a> <a class="nav-link" href="#...
*/
.nav-shell { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); width:100%; min-width:0; padding:var(--space-3) var(--space-4); background:var(--color-surface); border:1px solid var(--color-border); }
.nav-desktop { flex-wrap:wrap; }
.brand { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:44px; height:44px; border:1px solid var(--accent); background:var(--color-primary-container); text-decoration:none; transition:background .15s,border-color .15s; }
.brand:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
.crest { display:block; width:18px; height:18px; border:3px solid var(--color-primary); background:var(--accent); }
.nav-menu { display:flex; flex:1 1 320px; gap:var(--space-2); align-items:center; justify-content:center; min-width:0; flex-wrap:wrap; }
.nav-actions { display:flex; gap:var(--space-2); align-items:center; flex-shrink:0; }
.nav-link,.utility-link,.cta { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; height:40px; min-width:40px; padding:0 var(--space-3); font:inherit; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:background .15s,border-color .15s; }
.nav-link,.utility-link { color:var(--color-on-surface); text-decoration:none; }
.nav-link:hover,.utility-link:hover { background:var(--accent-hover); }
.nav-link[aria-current="page"] { background:var(--accent); font-weight:600; }
.cta { border:1px solid var(--accent); padding:0 var(--space-4); background:var(--accent); color:var(--accent-foreground); cursor:pointer; }
.cta:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
.nav-compact { padding-inline:var(--space-3); }
.menu-btn { display:inline-flex; flex-direction:column; justify-content:center; gap:var(--space-1); flex-shrink:0; width:44px; height:44px; min-width:44px; padding:0; border:1px solid var(--color-border); background:var(--color-background); cursor:pointer; transition:background .15s,border-color .15s; }
.menu-btn:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
.menu-btn span { display:block; width:18px; height:2px; background:var(--color-on-surface); }