/* ============================================================
   style-layout.css — twenty1guide.online
   twenty.com 實測值轉譯：Aleo serif 300/60px hero、Azeret Mono
   nav/badge、極簡黑白、產品UI風格課表卡片
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Aleo:wght@300;700&family=Azeret+Mono:wght@500;700&display=swap');

:root {
  --font-serif: 'Aleo', Georgia, 'Times New Roman', serif;
  --font-mono:  'Azeret Mono', 'Consolas', 'Courier New', monospace;
}

/* ── Sticky sub-info bar ─────────────────────────────────── */
.tw-topbar { background: var(--clr-bg-dark); padding: 6px 0; }
.tw-topbar-inner {
  max-width: var(--container); margin: 0 auto; padding: 0 var(--space-5);
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--clr-text-inv-muted);
}

/* ── Hero ─────────────────────────────────────────────────── */
.tw-hero { text-align: center; padding: var(--space-16) var(--space-5) var(--space-10); }
.tw-hero h1 {
  font-family: var(--font-serif); font-weight: 300;
  font-size: clamp(32px, 6vw, 58px); line-height: 1.1; letter-spacing: -.02em;
  color: var(--clr-text); max-width: 780px; margin: 0 auto var(--space-5);
}
.tw-hero h1 b { font-weight: 700; }
.tw-hero p {
  font-size: 16px; line-height: 1.7; color: var(--clr-text-muted);
  max-width: 560px; margin: 0 auto var(--space-6);
}
.tw-hero-actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }

.btn-mono {
  font-family: var(--font-mono); font-size: 13px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .02em;
  border-radius: 4px 14px 4px 4px;
}
.btn-mono.btn-primary { background: var(--clr-accent); color: #fff; }
.btn-mono.btn-outline { border: 1px solid var(--clr-border); color: var(--clr-text); background: transparent; }

/* ── Product-UI style demo card ──────────────────────────── */
.tw-demo-wrap { padding: 0 var(--space-5) var(--space-16); display: flex; justify-content: center; }
.tw-demo-card {
  max-width: 1040px; width: 100%; border-radius: 10px; overflow: hidden;
  box-shadow: 0 40px 100px rgba(0,0,0,.14); border: 1px solid var(--clr-border);
}
.tw-demo-titlebar {
  background: var(--clr-bg-alt); padding: 10px 16px; display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--clr-border);
}
.tw-demo-dots { display: flex; gap: 6px; }
.tw-demo-dots span { width: 11px; height: 11px; border-radius: 50%; }
.tw-demo-dots span:nth-child(1) { background: #ff5f57; }
.tw-demo-dots span:nth-child(2) { background: #febc2e; }
.tw-demo-dots span:nth-child(3) { background: #28c840; }
.tw-demo-titlebar-label { margin-left: 8px; font-size: 12px; color: var(--clr-text-muted); font-family: var(--font-mono); }
.tw-demo-body { display: flex; background: var(--clr-bg); }
.tw-demo-sidebar { width: 180px; background: var(--clr-bg-alt); border-right: 1px solid var(--clr-border); padding: 16px 12px; flex-shrink: 0; }
.tw-demo-sidebar-workspace { font-size: 12px; font-weight: 700; padding: 6px 10px; margin-bottom: 8px; }
.tw-demo-sidebar-item { font-size: 12px; color: var(--clr-text-muted); padding: 7px 10px; border-radius: 6px; }
.tw-demo-sidebar-item.active { background: var(--clr-bg); color: var(--clr-text); font-weight: 700; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.tw-demo-main { flex: 1; min-width: 0; overflow-x: auto; }
.tw-demo-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tw-demo-table th { text-align: left; padding: 10px 16px; background: var(--clr-bg-alt); color: var(--clr-text-muted); font-weight: 500; font-size: 12px; border-bottom: 1px solid var(--clr-border); white-space: nowrap; }
.tw-demo-table td { padding: 11px 16px; border-bottom: 1px solid var(--clr-border); white-space: nowrap; }
.tw-demo-table tr:last-child td { border-bottom: none; }

/* ── Trusted strip ────────────────────────────────────────── */
.tw-trusted { padding: 0 var(--space-5) var(--space-16); text-align: center; }
.tw-trusted-label {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .2em;
  color: var(--clr-text-muted); margin-bottom: var(--space-6); text-transform: uppercase;
}
.tw-trusted-logos { display: flex; justify-content: center; gap: var(--space-10); flex-wrap: wrap; align-items: center; opacity: .5; }
.tw-trusted-logos span { font-size: 16px; font-weight: 700; color: var(--clr-text); }

/* ── Section ──────────────────────────────────────────────── */
.tw-section { padding: var(--space-12) 0; border-top: 1px solid var(--clr-border); }
.tw-section-title {
  font-family: var(--font-serif); font-weight: 300; font-size: clamp(24px, 3.5vw, 34px);
  letter-spacing: -.01em; text-align: center; margin-bottom: var(--space-10);
}
.tw-section-title b { font-weight: 700; }

/* ── Schedule table ───────────────────────────────────────── */
.tw-schedule { border: 1px solid var(--clr-border); border-radius: 10px; overflow: hidden; max-width: 820px; margin: 0 auto; }
.tw-schedule-row {
  display: grid; grid-template-columns: 90px 1fr 100px 80px; gap: var(--space-4);
  padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--clr-border);
  align-items: center; font-size: 13px;
}
.tw-schedule-row:last-child { border-bottom: none; }
.tw-schedule-row.head {
  background: var(--clr-bg-alt); font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; color: var(--clr-text-muted); font-weight: 500;
}
.tw-schedule-name { font-weight: 600; }
.tw-schedule-name span { display: block; font-weight: 400; color: var(--clr-text-muted); font-size: 12px; margin-top: 2px; }

/* ── Instructor grid ──────────────────────────────────────── */
.tw-instructors {
  max-width: 820px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--clr-border); border: 1px solid var(--clr-border); border-radius: 10px; overflow: hidden;
}
@media (max-width: 640px) { .tw-instructors { grid-template-columns: 1fr; } }
.tw-instructor-card { background: var(--clr-bg); padding: var(--space-6) var(--space-5); }
.tw-instructor-avatar { width: 40px; height: 40px; background: var(--clr-accent); border-radius: 8px; margin-bottom: var(--space-3); }
.tw-instructor-name { font-weight: 700; font-size: 13px; margin-bottom: 2px; }
.tw-instructor-title { font-family: var(--font-mono); font-size: 10px; color: var(--clr-text-muted); text-transform: uppercase; margin-bottom: var(--space-2); }
.tw-instructor-bio { font-size: 12px; color: var(--clr-text-muted); }

/* ── CTA banner (dark, rounded) ──────────────────────────── */
.tw-cta-banner {
  background: var(--clr-bg-dark); color: #fff; padding: var(--space-12) var(--space-6);
  text-align: center; border-radius: 16px;
}
.tw-cta-banner h2 { font-family: var(--font-serif); font-weight: 300; font-size: clamp(24px, 4vw, 36px); letter-spacing: -.01em; margin-bottom: var(--space-3); color: #fff; }
.tw-cta-banner p { color: rgba(255,255,255,.6); margin-bottom: var(--space-6); }
.tw-cta-banner .btn-mono { background: #fff; color: #000; }

/* ── Category dense grid ─────────────────────────────────── */
.tw-cat-grid {
  max-width: var(--container); margin: 0 auto; padding: var(--space-8) var(--space-5);
  display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--clr-border); border: 1px solid var(--clr-border);
}
@media (min-width: 640px) { .tw-cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .tw-cat-grid { grid-template-columns: repeat(4, 1fr); } }
.tw-cat-card { background: var(--clr-bg); padding: var(--space-6) var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); text-decoration: none; }
.tw-cat-card-icon { font-size: 26px; }
.tw-cat-card-title { font-family: var(--font-serif); font-size: 16px; font-weight: 700; color: var(--clr-text); }
.tw-cat-card-desc { font-size: 12px; color: var(--clr-text-muted); line-height: 1.6; }