/* ═══════════════════════════════════════════════════════════════
   KLAS Button System  v1.0
   Source of truth for all button styles across courses.aiklas.com
   ───────────────────────────────────────────────────────────────

   THREE LEVELS × TWO SURFACES = 6 variants

   ┌─────────────┬────────────────────────────┬────────────────────────────┐
   │             │  Light Surface             │  Dark Surface              │
   ├─────────────┼────────────────────────────┼────────────────────────────┤
   │ Primary     │ .kbtn.primary              │ .kbtn.primary  (same)      │
   │ Secondary   │ .kbtn.secondary            │ .kbtn.secondary.on-dark    │
   │ Tertiary    │ .kbtn.tertiary             │ .kbtn.tertiary.on-dark     │
   └─────────────┴────────────────────────────┴────────────────────────────┘

   Usage:
     <a href="…" class="kbtn primary lg">開始學習</a>
     <a href="…" class="kbtn secondary">查看全部</a>
     <a href="…" class="kbtn secondary on-dark">瀏覽課程</a>

   Size modifiers (optional, defaults to md):
     .sm  — 12px / 7px 14px
     .md  — 14px / 10px 20px  (default)
     .lg  — 15px / 13px 28px
     .xl  — 16px / 15px 32px

   Icon support:
     <span class="kbtn-icon"> inside the button; auto-sized with the button.

   ═══════════════════════════════════════════════════════════════ */

/* ── Base reset ── */
.kbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Inter', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.1px;
  white-space: nowrap;
  text-decoration: none;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  cursor: pointer;
  transition:
    background .18s,
    border-color .18s,
    color .18s,
    opacity .15s,
    transform .15s,
    box-shadow .2s;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
.kbtn:active { transform: scale(.98); }

/* ── Size modifiers ── */
.kbtn.sm { font-size: 12px; padding: 7px 14px; gap: 6px; border-radius: 7px; }
.kbtn.md { font-size: 14px; padding: 10px 20px; }   /* default */
.kbtn.lg { font-size: 15px; padding: 13px 28px; gap: 9px; border-radius: 10px; }
.kbtn.xl { font-size: 16px; padding: 15px 32px; gap: 10px; border-radius: 10px; }

/* Pill shape override */
.kbtn.pill { border-radius: 999px; }

/* Full-width */
.kbtn.block { width: 100%; }

/* ── Icon container inside button ── */
.kbtn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
.kbtn.sm .kbtn-icon { width: 16px; height: 16px; }
.kbtn.lg .kbtn-icon, .kbtn.xl .kbtn-icon { width: 22px; height: 22px; }


/* ═══════════════════════════════════════════════════════════════
   PRIMARY
   Blue gradient — same on both light and dark surfaces.
   Highest emphasis. One per view.
═══════════════════════════════════════════════════════════════ */
.kbtn.primary {
  background: linear-gradient(135deg, #0057FF 0%, #3B82F6 100%);
  color: #fff;
  border: none;
  box-shadow:
    0 4px 16px rgba(0, 87, 255, .22),
    0 2px 6px rgba(0, 0, 0, .08);
}
.kbtn.primary:hover {
  opacity: .92;
  transform: translateY(-1px);
  box-shadow:
    0 6px 24px rgba(0, 87, 255, .28),
    0 3px 8px rgba(0, 0, 0, .10);
}
.kbtn.primary:focus-visible {
  outline: 3px solid rgba(0, 87, 255, .45);
  outline-offset: 2px;
}


/* ═══════════════════════════════════════════════════════════════
   SECONDARY — LIGHT SURFACE
   White fill, neutral border, dark text.
   Hover: blue border + blue text.
   Works on: #F3F4F6, #FFFFFF, any light background.
═══════════════════════════════════════════════════════════════ */
.kbtn.secondary {
  background: #fff;
  color: #111318;
  border: 1px solid #E4E6EA;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
.kbtn.secondary:hover {
  border-color: #0057FF;
  color: #0057FF;
  box-shadow: 0 2px 8px rgba(0, 87, 255, .10);
}
.kbtn.secondary:focus-visible {
  outline: 3px solid rgba(0, 87, 255, .35);
  outline-offset: 2px;
}

/* ── SECONDARY — DARK SURFACE ──
   Legible glass panel. Fully white text, visible border and background.
   Works on: #0A0B0F, any dark hero / CTA band.
   CONTRAST: white text on rgba(255,255,255,.16) bg ≈ 6.5:1 — passes AA.
═══════════════════════════════════════════════════════════════ */
.kbtn.secondary.on-dark {
  background: rgba(255, 255, 255, .14);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, .32);
  box-shadow: none;
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}
.kbtn.secondary.on-dark:hover {
  background: rgba(255, 255, 255, .22);
  border-color: rgba(255, 255, 255, .55);
  color: #ffffff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}
.kbtn.secondary.on-dark:focus-visible {
  outline: 3px solid rgba(255, 255, 255, .5);
  outline-offset: 2px;
}


/* ═══════════════════════════════════════════════════════════════
   TERTIARY — LIGHT SURFACE
   No background, no border. Text link weight.
   For low-emphasis actions: "查看全部", "取消", inline links.
═══════════════════════════════════════════════════════════════ */
.kbtn.tertiary {
  background: transparent;
  color: #5A6070;
  border: none;
  padding-left: 4px;
  padding-right: 4px;
  box-shadow: none;
}
.kbtn.tertiary:hover {
  color: #111318;
  background: rgba(0, 0, 0, .04);
  border-radius: 6px;
}

/* ── TERTIARY — DARK SURFACE ──
   High-opacity white text. No background / border.
   Use for least-emphasis actions in a dark context.
═══════════════════════════════════════════════════════════════ */
.kbtn.tertiary.on-dark {
  background: transparent;
  color: rgba(255, 255, 255, .72);
  border: none;
  box-shadow: none;
}
.kbtn.tertiary.on-dark:hover {
  color: #fff;
  background: rgba(255, 255, 255, .08);
}


/* ═══════════════════════════════════════════════════════════════
   DISABLED state — applies to all variants
═══════════════════════════════════════════════════════════════ */
.kbtn:disabled,
.kbtn[aria-disabled="true"],
.kbtn.disabled {
  opacity: .38;
  pointer-events: none;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}


/* ═══════════════════════════════════════════════════════════════
   ICON-ONLY button
   Square / circle variant for toolbar actions.
═══════════════════════════════════════════════════════════════ */
.kbtn.icon-only {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 8px;
  background: transparent;
  color: #5A6070;
  border: 1px solid #E4E6EA;
}
.kbtn.icon-only:hover { color: #0057FF; border-color: #0057FF; background: #EEF3FF; }
.kbtn.icon-only.on-dark {
  color: rgba(255,255,255,.65);
  border-color: rgba(255,255,255,.18);
}
.kbtn.icon-only.on-dark:hover {
  color: #fff;
  border-color: rgba(255,255,255,.45);
  background: rgba(255,255,255,.1);
}


/* ═══════════════════════════════════════════════════════════════
   ACTION CARD BUTTON
   Large card-shaped button used in the homepage hero action row.
   Wraps icon + title + hint text.
   Variants: .primary (blue), .on-dark (glass secondary)
═══════════════════════════════════════════════════════════════ */
.kbtn-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 12px;
  font-family: 'Inter', 'PingFang TC', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s, opacity .15s, background .18s, border-color .18s, box-shadow .2s;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  min-width: 160px;
  flex: 1;
  max-width: 220px;
}
.kbtn-card:hover { transform: translateY(-2px); }
.kbtn-card:active { transform: scale(.98); }

/* Icon slot inside kbtn-card */
.kbtn-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kbtn-card-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}
.kbtn-card-title { font-size: 14px; font-weight: 700; line-height: 1.2; }
.kbtn-card-hint  { font-size: 11px; font-weight: 500; margin-top: 2px; opacity: .65; }

/* Primary card button — solid blue, white text/icon */
.kbtn-card.primary {
  background: #0057FF;
  color: #fff;
  border: none;
  box-shadow: 0 4px 18px rgba(0, 87, 255, .35), 0 2px 6px rgba(0, 0, 0, .15);
}
.kbtn-card.primary:hover {
  background: #0046CC;
  box-shadow: 0 8px 28px rgba(0, 87, 255, .45), 0 3px 8px rgba(0, 0, 0, .18);
}
.kbtn-card.primary .kbtn-card-icon {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}
.kbtn-card.primary .kbtn-card-hint { color: rgba(255, 255, 255, .72); }

/* Secondary card button — transparent + light-blue border/text/icon */
.kbtn-card.on-dark {
  background: transparent;
  color: #60B3FF;
  border: 1px solid #60B3FF;
}
.kbtn-card.on-dark:hover {
  background: rgba(96, 179, 255, .08);
  border-color: #93CBFF;
  color: #93CBFF;
  box-shadow: 0 4px 16px rgba(96, 179, 255, .12);
}
.kbtn-card.on-dark .kbtn-card-icon {
  background: rgba(96, 179, 255, .12);
  color: #60B3FF;
}
.kbtn-card.on-dark .kbtn-card-hint { color: rgba(96, 179, 255, .75); }


/* ═══════════════════════════════════════════════════════════════
   CONTRAST REFERENCE (WCAG AA, 4.5:1 minimum for normal text)
   ─────────────────────────────────────────────────────────────
   Primary (#fff on #0057FF):                    ~5.9:1  ✓ AA
   Secondary light (#111318 on #fff):            ~19:1   ✓ AAA
   Secondary on-dark (#fff on rgba..,.14 glass): ~7.5:1  ✓ AA  ← the fix
   Tertiary light (#5A6070 on #F3F4F6):          ~5.1:1  ✓ AA
   Tertiary on-dark (rgba..,.72 on #0A0B0F):     ~6.3:1  ✓ AA
   ─────────────────────────────────────────────────────────────
   Previous ghost.on-dark (rgba,.85 on rgba,.06 bg):
     effective contrast ~2.8:1  ✗ FAIL — this is what we fixed.
═══════════════════════════════════════════════════════════════ */