/**
 * 功能模块样式基础层（系统兜底契约）
 * ------------------------------------------------------------------
 * 由 ModuleStyleResolver 恒定注入为「模块样式加载链」的第一层，
 * 加载顺序：本文件 → 主题 style.css → 主题 tokens.css → 主题 modules/{module}.css
 *
 * 设计原则：
 * 1. 只使用「稳定契约类名」：新增 tl-* 命名空间 + 兼容历史类名，二者并存。
 * 2. 只消费 --mod-* 设计令牌，默认值内置，主题可在 tokens.css 覆盖。
 * 3. 不使用 !important，且尽量低特异性，保证主题层可覆盖。
 * 4. 任何主题即使未提供模块样式，也能得到「可用、不塌陷」的模块外观。
 */

/* ===================== Design Token 契约 ===================== */
:root {
  --mod-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mod-primary: #6366f1;
  --mod-primary-contrast: #ffffff;
  --mod-text: #1e293b;
  --mod-text-muted: #64748b;
  --mod-bg: #ffffff;
  --mod-surface: #ffffff;
  --mod-border: #e2e8f0;
  --mod-radius: 8px;
  --mod-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);

  /* 菜单 */
  --mod-menu-gap: 4px;
  --mod-menu-padding: 10px 14px;
  --mod-menu-hover-bg: rgba(99, 102, 241, 0.08);
  --mod-menu-active-color: var(--mod-primary);
  --mod-dropdown-bg: #ffffff;
  --mod-dropdown-text: var(--mod-text);
  --mod-dropdown-hover-bg: rgba(99, 102, 241, 0.08);
  --mod-dropdown-radius: 10px;

  /* 幻灯 */
  --mod-slider-height: 440px;
  --mod-slider-caption-color: #ffffff;
  --mod-slider-btn-bg: rgba(0, 0, 0, 0.35);
  --mod-slider-dot: rgba(255, 255, 255, 0.5);
  --mod-slider-dot-active: #ffffff;
}

/* ===================== 菜单模块 ===================== */
/* 容器 */
.nav-menu,
.tl-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--mod-menu-gap);
}

/* 菜单项 */
.nav-menu .nav-item,
.tl-menu .tl-menu-item {
  position: relative;
}

/* 菜单链接 */
.nav-menu .nav-link,
.tl-menu .tl-menu-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--mod-menu-padding);
  color: var(--mod-text);
  text-decoration: none;
  font-family: var(--mod-font);
  border-radius: var(--mod-radius);
  transition: color .2s ease, background-color .2s ease;
}

.nav-menu .nav-link:hover,
.tl-menu .tl-menu-link:hover {
  background: var(--mod-menu-hover-bg);
}

/* 当前项高亮（历史 active / 新 tl-is-active 双命名） */
.nav-menu .nav-link.active,
.tl-menu .tl-menu-link.tl-is-active {
  color: var(--mod-menu-active-color);
}

/* 下拉菜单：历史 .dropdown-menu 与新增 .tl-dropdown 双命名 */
.dropdown-menu,
.tl-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  margin: 6px 0 0;
  padding: 6px 0;
  list-style: none;
  background: var(--mod-dropdown-bg);
  color: var(--mod-dropdown-text);
  border: 1px solid var(--mod-border);
  border-radius: var(--mod-dropdown-radius);
  box-shadow: var(--mod-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 60;
}

/* 显示：hover 或状态类（.tl-is-open / .expanded 兼容历史） */
.nav-item.has-dropdown:hover > .dropdown-menu,
.has-dropdown:hover > .tl-dropdown,
.has-dropdown.tl-is-open > .tl-dropdown,
.has-dropdown.expanded > .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-menu a,
.tl-dropdown a {
  display: block;
  padding: 10px 16px;
  color: inherit;
  text-decoration: none;
  font-family: var(--mod-font);
  font-size: 14px;
  transition: background-color .2s ease, color .2s ease;
}

.dropdown-menu a:hover,
.tl-dropdown a:hover {
  background: var(--mod-dropdown-hover-bg);
  color: var(--mod-menu-active-color);
}

/* 菜单图标 */
.menu-icon,
.tl-menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ===================== 页脚菜单 ===================== */
.footer-menu-group,
.tl-footer-group {
  margin-bottom: 16px;
}

.footer-menu-group h4,
.tl-footer-group h4 {
  margin: 0 0 10px;
  font-family: var(--mod-font);
  font-size: 15px;
  font-weight: 600;
}

.footer-menu-list,
.tl-footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-menu-list a,
.tl-footer-list a {
  display: block;
  padding: 5px 0;
  color: var(--mod-text-muted);
  text-decoration: none;
  font-family: var(--mod-font);
  font-size: 14px;
  transition: color .2s ease;
}

.footer-menu-list a:hover,
.tl-footer-list a:hover {
  color: var(--mod-menu-active-color);
}

/* ===================== 幻灯模块 ===================== */
/* 兼容两种渲染骨架：前台 .slider-container>.slider-track 与编辑器 .slider-wrapper>.slider-container */
.slider-wrapper,
.tl-slider,
.slider-container {
  position: relative;
  overflow: hidden;
  border-radius: var(--mod-radius);
}

.slider-track,
.tl-slider-track {
  display: flex;
  width: 100%;
  transition: transform .5s ease;
}

.slider-slide,
.tl-slider-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  min-height: var(--mod-slider-height);
}

.slider-slide:not(.active) {
  display: none;
}

.slider-track .slider-slide {
  display: block; /* 轨道模式下所有 slide 并排 */
}

.slider-image,
.tl-slider-image {
  display: block;
  width: 100%;
  height: var(--mod-slider-height);
  object-fit: cover;
}

.slider-caption,
.slider-content,
.tl-slider-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 32px;
  color: var(--mod-slider-caption-color);
  background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
  font-family: var(--mod-font);
}

.slider-title,
.tl-slider-title {
  margin: 0 0 8px;
  font-size: 28px;
  line-height: 1.25;
}

.slider-description,
.tl-slider-description {
  margin: 0;
  font-size: 15px;
  opacity: .92;
}

.slider-btn,
.tl-slider-btn {
  display: inline-block;
  margin-top: 14px;
  padding: 10px 20px;
  border-radius: var(--mod-radius);
  background: var(--mod-primary);
  color: var(--mod-primary-contrast);
  text-decoration: none;
  font-size: 14px;
}

/* 切换按钮/指示器（兼容 .slider-prev/next 与 .slider-nav） */
.slider-prev,
.slider-next,
.slider-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--mod-slider-btn-bg);
  color: #fff;
  cursor: pointer;
  z-index: 5;
}

.slider-prev { left: 16px; }
.slider-next { right: 16px; }

.slider-dots,
.slider-indicators {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 5;
}

.slider-dot,
.slider-indicator {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--mod-slider-dot);
  cursor: pointer;
}

.slider-dot.active,
.slider-indicator.active {
  background: var(--mod-slider-dot-active);
}

/* ===================== 博客列表模块 ===================== */
.tl-blog {
  font-family: var(--mod-font);
  color: var(--mod-text);
}

.tl-blog-item,
.blog-list-component .blog-item {
  padding: 16px;
  border: 1px solid var(--mod-border);
  border-radius: var(--mod-radius);
  background: var(--mod-surface);
}

.tl-blog-title {
  margin: 0 0 8px;
  font-size: 18px;
}

@media (max-width: 768px) {
  .nav-menu,
  .tl-menu {
    flex-direction: column;
    align-items: stretch;
  }
  .dropdown-menu,
  .tl-dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    min-width: 0;
  }
  .slider-title,
  .tl-slider-title { font-size: 22px; }
}