/* ========================================
   新闻网站模板 - 公共CSS样式
   基于Tailwind CSS，所有页面共享
   现代化配色：清爽蓝 + 简约白
   ======================================== */

/* CSS变量 */
:root {
  --primary: #3b82f6;
  --primary-dark: #2563eb;
  --primary-light: #eff6ff;
  --primary-hover: #dbeafe;
  --header-height: 70px;
}

/* 页面背景渐变 */
body {
  background: linear-gradient(180deg, #f0f7ff 0%, #f8fbff 30%, #ffffff 100%);
  min-height: 100vh;
}

/* 隐藏滚动条 */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* ========================================
   卡片悬浮效果
   ======================================== */

/* 卡片悬浮抬升 */
.hover-lift,
.video-card-hover,
.card-hover {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.hover-lift:hover,
.video-card-hover:hover,
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -12px rgba(59, 130, 246, 0.15);
}

/* 图片悬浮效果 */
.img-hover {
  transition: transform 0.5s ease;
}
.img-hover:hover {
  transform: scale(1.03);
}

/* ========================================
   播放按钮效果
   ======================================== */
.play-btn {
  transition: all 0.3s ease;
}
.play-btn:hover {
  transform: scale(1.1);
  background: rgba(255,255,255,0.35);
}

/* ========================================
   导航相关
   ======================================== */

/* 移动端菜单 */
.mobile-menu {
  display: none;
}

/* 导航下拉菜单 */
.nav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  min-width: 180px;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
  border-radius: 0 0 8px 8px;
  z-index: 50;
}

.group:hover .nav-dropdown {
  display: block;
}

/* 导航链接效果 - 简洁下划线 */
.nav-link {
  position: relative;
  transition: color 0.2s ease;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--primary);
  transition: width 0.3s ease;
}
.nav-link:hover::after {
  width: 100%;
}

/* ========================================
   文本省略
   ======================================== */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ========================================
   返回顶部按钮
   ======================================== */
.back-to-top {
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
}

/* ========================================
   列表项圆点
   ======================================== */
.news-list-dot {
  position: relative;
  padding-left: 1rem;
}
.news-list-dot::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--primary);
  font-size: 1.25rem;
  line-height: inherit;
}

/* ========================================
   表格行悬浮
   ======================================== */
.table-row-hover:hover {
  background-color: #f8fafc;
}

/* ========================================
   文档预览
   ======================================== */
.doc-preview-frame {
  width: 100%;
  height: 700px;
  border: 1px solid #e5e7eb;
}

/* ========================================
   视频播放遮罩
   ======================================== */
.video-overlay {
  background: rgba(0,0,0,0.3);
  transition: background 0.2s;
}
.video-item:hover .video-overlay {
  background: rgba(0,0,0,0.5);
}

/* ========================================
   搜索高亮
   ======================================== */
.search-highlight {
  background: #fef08a;
  padding: 0 2px;
}

/* ========================================
   广告位标签
   ======================================== */
.ad-placeholder {
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  border: 2px dashed #d1d5db;
}

/* ========================================
   轮播图淡入淡出
   ======================================== */
.carousel-slide {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  position: absolute;
  inset: 0;
}
.carousel-slide.active {
  opacity: 1;
}

/* ========================================
   分类切换按钮（视频频道）
   ======================================== */
.filter-btn {
  transition: all 0.25s ease;
  border: 1px solid transparent;
}
.filter-btn.active {
  background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
  color: white;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35);
  border-color: transparent;
}
.filter-btn:not(.active) {
  background: white;
  color: #64748b;
  border-color: #e2e8f0;
}
.filter-btn:not(.active):hover {
  border-color: #3b82f6;
  color: #3b82f6;
  background: #f8fafc;
}

/* ========================================
   响应式调整
   ======================================== */
@media (max-width: 768px) {
  .nav-menu-pc {
    display: none;
  }
  
  .mobile-menu {
    display: block;
  }
  
  .doc-preview-frame {
    height: 400px;
  }
}

/* ========================================
   打印样式
   ======================================== */
@media print {
  .no-print {
    display: none !important;
  }
}



/* ========================================
   分页样式
   ======================================== */
#page {
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

#page li {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 38px;
  padding: 0 16px;
  font-size: 14px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  color: #475569;
  background: #fff;
  transition: all 0.2s ease;
  cursor: pointer;
}

#page li a {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* 普通页码悬浮 */
#page li:hover {
  border-color: #3b82f6;
  color: #3b82f6;
}

/* 当前页 */
#page li.current {
  background: #3b82f6;
  border-color: #3b82f6;
  color: #fff;
}

#page li.current a {
  color: #fff;
}

/* 禁用项（上一页/省略号） */
#page li.disabled {
  color: #94a3b8;
  cursor: not-allowed;
}

#page li.disabled:hover {
  border-color: #e2e8f0;
  color: #94a3b8;
}