/* custom-styles.css */
/* ============================================
   基础样式
   ============================================ */

a {
    cursor: pointer;
}

/* ============================================
   隐藏元素
   ============================================ */

#other,
#detail {
    display: none;
}

/* ============================================
   工具类样式
   ============================================ */

.h-80 {
    height: 25rem !important;
}

.bgw {
    background: #fff;
}

.bgw img {
    padding: 10%;
    width: 100%;
    aspect-ratio: 4/5; /* 设置宽高比为4:5 */
}

.treetab {
    padding-left: 15% !important;
}

/* ============================================
   Tailwind CSS 自定义工具类
   需要在 Tailwind CSS 之后加载
   ============================================ */

.content-auto {
    content-visibility: auto;
}

.text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.text-shadow-lg {
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
}

.transition-navbar {
    transition: background-color 0.3s, box-shadow 0.3s;
}

.bg-gradient-red {
    background: linear-gradient(135deg, #c0191f 0%, #8b0000 100%);
}

/* 新闻轮播动画 */
.news-slide {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.news-slide.active {
    opacity: 1;
    z-index: 1;
}

/* 隐藏滚动条 */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* 文本截断 - 单行 */
.truncate-single {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 文本截断 - 2行 */
.text-ellipsis-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 文本截断 - 3行 */
.text-ellipsis-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}