/*
 * @Author: Conghao Wong
 * @Date: 2026-02-03 18:04:31
 * @LastEditors: Conghao Wong
 * @LastEditTime: 2026-09-30 09:12:55
 * @Github: https://cocoon2wong.github.io
 * Copyright 2026 Conghao Wong, All Rights Reserved.
 */

@import url("https://fonts.googleapis.com/css2?family=Tomorrow:wght@600&display=swap");

/* ==========================================================================
   0. 全局变量定义（无下划线，对接模版分级背景系统）
   ========================================================================== */

:root {
  --team-card-mask-color: var(--level1-bg-color);
}

.dark-mode {
  --team-card-mask-color: var(--level1-bg-color-dark);
}

/* ==========================================================================
   1. 外层列表容器：纯粹 Flex 根容器（彻底废除 Grid）
   ========================================================================== */

#team-list {
  --liquid-glass-radius-inner: var(--standard-content-radius);
  --liquid-glass-radius-outer: calc(var(--standard-content-radius) + 1px);

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--liquid-glass-radius-outer);
  align-items: stretch;
  width: 100%;
  margin-top: 20px;
}

/* ==========================================================================
   2. 卡片画布容器 (.team-box) - 锁定画布黄金比例
   ========================================================================== */

.team-box {
  /* 桌面端基准为 3 列分配，自然自适应折叠，绝无无限撑大变形 */
  flex: 1 1 320px;
  max-width: calc((100% - 2 * var(--liquid-glass-radius-outer)) / 3);
  min-width: min(100%, 280px);
  aspect-ratio: 1 / 1.08; /* 画布区域绝对比例 */

  margin: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  border-radius: var(--liquid-glass-radius-outer);
  box-sizing: border-box;
}

/* 2.1 原生自然覆盖背景层 (自然铺满，依靠容器 overflow: hidden 裁剪，绝无 1px 偏移) */
.team-box.has-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 80%;
  border-radius: var(--liquid-glass-radius-outer);
  background-image: var(--team-card-bg);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  z-index: 1;
  pointer-events: none;
}

/* 2.2 原生自然覆盖渐变遮罩 (自然铺满，依靠容器 overflow: hidden 裁剪，绝无 1px 偏移) */
.team-box.has-bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--liquid-glass-radius-outer);
  background-image: linear-gradient(
    to bottom,
    transparent 0%,
    color-mix(in srgb, var(--team-card-mask-color) 18%, transparent) 25%,
    color-mix(in srgb, var(--team-card-mask-color) 55%, transparent) 50%,
    var(--team-card-mask-color) 80%,
    var(--team-card-mask-color) 100%
  );
  z-index: 2;
  pointer-events: none;
}

/* ==========================================================================
   3. 内容边距容器 (.team-margin-container) 与纵向主 Flex 链
   ========================================================================== */

.team-margin-container {
  padding: var(--standard-content-margin);
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 3;
}

.team-vbox {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  flex: 1;
  align-items: center;
}

/* ==========================================================================
   4. 顶部媒体/Logo展示区 (.team-media) - 占据上方弹性画布主空间
   ========================================================================== */

.team-media {
  flex: 1; /* 吞噬上方弹性空间，使 Logo 完美居中于上方画布 */
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* Logo 实体：相对画布保持绝对比例 */
.team-media-inner {
  width: 50%;
  aspect-ratio: 16/10;
  background-image: var(--team-logo-bg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}

/* Spectral 艺术字容器：同样纯粹居中于上方画布 */
.spectral-logo-container {
  width: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.spectral-logo-text {
  font-family: "Tomorrow", sans-serif;
  color: #ffffff;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.35em;
  font-size: 30px;
  text-shadow: 2.5px 2.5px 0px #000000;
  padding-left: 0.35em;
  white-space: nowrap;
  user-select: none;
}

@media (max-width: 320px) {
  .spectral-logo-text {
    font-size: 20px;
  }
}

/* ==========================================================================
   5. 信息区 (.team-info) - 原版字号规范与模版分级色彩 Token
   ========================================================================== */

.team-info {
  flex-shrink: 0;
  text-align: center;
  width: 100%;
  margin-top: 8px;
  margin-bottom: 12px;
}

.team-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--level1-text-color);
}

.dark-mode .team-title {
  color: var(--level1-text-color-dark);
}

.team-desc {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--level3-text-color);
}

.dark-mode .team-desc {
  color: var(--level3-text-color-dark);
}

/* ==========================================================================
   6. 底部 Pill 按钮行 (.team-bottom)
   ========================================================================== */

.team-bottom {
  flex-shrink: 0;
  margin-top: auto;
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.team-box .pill-single,
.team-box .pill-container {
  height: calc(var(--second-navbar-radius) * 2);
  border-radius: var(--second-navbar-radius);
  box-sizing: border-box;
  margin: 0;
}

.team-box .pill-item {
  height: 100%;
  display: inline-flex;
  align-items: center;
}