@charset "UTF-8";
.banner {
  background-image: url("/skin/bxtnt/img/banner/templatewebsite_banner.png");
}

/* 筛选按钮：激活态 + 切换动画 */
.template-filter__btn.active {
  background-color: #044DB7;
  color: white;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.template-filter__btn:not(.active):hover {
  background-color: #e5e7eb;
}

/* 网格容器：相对定位以便隐藏项脱离流 */
.template-grid {
  position: relative;
}

/* 卡片：筛选切换时的交错淡入 */
.template-card {
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.template-card.template-card--hidden {
  opacity: 0;
  transform: scale(0.92);
  pointer-events: none;
  position: absolute;
  visibility: hidden;
}

.template-card.template-card--visible {
  animation: templateCardIn 0.4s ease forwards;
}

@keyframes templateCardIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* 模板大图灯箱：点击卡片查看完整预览图 */
.template-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.75rem, 3vw, 1.5rem);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}

.template-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.template-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.86);
  cursor: pointer;
}

.template-lightbox__close {
  position: absolute;
  top: clamp(0.75rem, 2vw, 1.25rem);
  right: clamp(0.75rem, 2vw, 1.25rem);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: none;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.template-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.24);
  transform: scale(1.05);
}

.template-lightbox__img {
  position: relative;
  z-index: 10;
  max-width: min(100%, 1600px);
  max-height: min(92vh, 1200px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}

body.template-lightbox-open {
  overflow: hidden;
}