/* ========================================
   buttons.css — 按钮组件
   作用：
   1. 定义 .btn 基础样式（内边距、圆角、过渡动画）
   2. 提供四种颜色变体：primary/secondary/accent/ghost
   3. 提供三种尺寸变体：large/small/full
   4. RTL 适配：按钮内图标 hover 方向自动翻转
   ======================================== */

/* ===== 按钮基础 =====
   inline-flex 让按钮宽度由内容决定，图标与文字垂直居中
   所有过渡集中声明，确保颜色、边框、位移、阴影变化都平滑 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);       /* 图标与文字之间的间距 */
  padding: 0.8125rem 2rem;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  border: 2px solid transparent;  /* 预留边框空间，避免变体切换时布局跳动 */
  transition: background-color var(--transition-base), color var(--transition-base),
              border-color var(--transition-base), transform var(--transition-base),
              box-shadow var(--transition-base);
}

/* hover — 微上浮，营造可点击的交互感 */
.btn:hover {
  transform: translateY(-2px);
}

/* active — 按下时回弹，模拟物理按压 */
.btn:active {
  transform: translateY(0);
}

/* ===== 颜色变体 ===== */

/* 主按钮（--primary）：绿色实心，用于主要操作（如"探索服务"）
   hover 时变深绿 + 加阴影 */
.btn--primary {
  background-color: var(--color-primary);
  color: #fff;
}

.btn--primary:hover {
  background-color: var(--color-primary-dark);
  box-shadow: var(--shadow-md);
}

/* 次要按钮（--secondary）：绿色描边，用于辅助操作（如"了解更多"）
   hover 时填充浅绿色背景 */
.btn--secondary {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn--secondary:hover {
  background-color: var(--color-primary-light);
}

/* 强调按钮（--accent）：金色实心，用于最终 CTA（如"联系我们"）
   与绿色背景形成暖色对比，引导用户完成转化 */
.btn--accent {
  background-color: var(--color-accent);
  color: #fff;
}

.btn--accent:hover {
  background-color: #c4935f;
  box-shadow: var(--shadow-md);
}

/* 幽灵按钮（--ghost）：白色描边，用于深色背景上的次要操作（如 Hero 区的"观看视频"）
   hover 时填充半透明白色背景，描边变实 */
.btn--ghost {
  background-color: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}

.btn--ghost:hover {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: #fff;
}

/* ===== 尺寸变体 ===== */

/* 大按钮 — 用于 Hero 区和 CTA 区，更宽松的内边距和更大字号 */
.btn--large {
  padding: 1rem 2.5rem;
  font-size: 1.0625rem;
}

/* 小按钮 — 用于空间有限的场景 */
.btn--small {
  padding: 0.5rem 1.25rem;
  font-size: 0.8125rem;
}

/* 全宽按钮 — 在移动端使用，按钮撑满容器宽度 */
.btn--full {
  width: 100%;
}

/* ===== 按钮内图标 =====
   hover 时图标向右微移（LTR）或向左微移（RTL），
   暗示"点击前往"的方向感 */
.btn__icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  transition: transform var(--transition-base);
}

.btn:hover .btn__icon {
  transform: translateX(3px);  /* LTR 时向右 */
}

/* RTL 模式下图标 hover 方向反转 */
[dir="rtl"] .btn:hover .btn__icon {
  transform: translateX(-3px);
}