/*磁贴样式*/
/* 变量组*/
:root {
  --tile-radius: 14px;
  --tile-blur: 6px;

  --tile-elev-y: 4px;
  --tile-elev-blur: 20px;
  --tile-elev-color: rgba(0, 0, 0, 0.25);
  --tile-glow-color: rgba(255, 255, 255, 0.08);

  --tile-thumb-size: 72px; /* 条，缩略图大小（正方形）*/
  --tile-thumb-radius: 10px; /* 条，缩略图圆角 */
  --tile-strip-gap: 16px; /* 条，缩略图与文本间距 */

  --tile-thumb-size-responsive: var(--tile-thumb-size); /* 全局回退 */
}

/* ---------- 容器：一行三列 ---------- */
.tiles {
  display: flex;
  gap: 20px;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

.tile p {
  margin-left: 1.5em;
  margin-right: 1.5em;
  font-size: 1.5rem;
}

.tile h1 {
  margin-left: 1.5em;
  margin-right: 1.5em;
  font-size: 2.2rem;
}

.tiles > a.tile p.show-mobile {
  font-size: 1rem;
  margin-top: auto;
}

.tiles > a.tile p.show-mobileBBB {
  margin-top: 0px;
}

/* 支持 a.tile 或 任意元素 .tile （防止被全局 a 规则影响） */
.tiles > a.tile,
.tiles > .tile {
  /* 保持为块级且在 flex 中伸缩 */
  display: flex;
  flex: 1 1 300px;
  flex-direction: column;
  min-height: 200px;
  box-sizing: border-box;

  /* 布局属性 */
  position: relative;
  overflow: hidden;
  border-radius: var(--tile-radius);
  text-decoration: none; /* 链接外观独立 */
  color: inherit;

  /* ----- 视觉纹理 ----- */
  background: radial-gradient(
      circle,
      rgba(255, 255, 255, 0.02) 1px,
      transparent 1px
    ),
    linear-gradient(
      to bottom right,
      rgba(255, 255, 255, 0.08),
      rgba(255, 255, 255, 0.02)
    ),
    var(--tile-color, rgba(25, 35, 60, 0.05));
  background-size: 10px 10px, auto, auto;

  /* 基础阴影与光晕 */
  box-shadow: 0 var(--tile-elev-y) var(--tile-elev-blur) var(--tile-elev-color),
    0 0 15px var(--tile-glow-color);

  /* 毛玻璃 / mica 效果（需要半透明 tile-color 才可见） */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;

  /* 创建局部堆叠上下文，用来减少外部干扰 */
  isolation: isolate;

  /* 交互过渡（仅 transform 和 box-shadow） */
  transition: transform 280ms cubic-bezier(0.2, 0.9, 0.3, 1),
    box-shadow 280ms cubic-bezier(0.2, 0.9, 0.3, 1);
  will-change: transform, box-shadow;
}

/* ---------- 顶部高光 ---------- */
.tiles > a.tile::before,
.tiles > .tile::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20%;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0)
  );
  pointer-events: none;
  z-index: 1; /* 在 svg 之上，但在文本之下 */
}

/* ---------- 光泽滑动（::after） ---------- */
.tiles > a.tile::after,
.tiles > .tile::after {
  content: "";
  position: absolute;
  inset: -10% -40%;
  transform: translateX(-120%) rotate(-12deg);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.08) 45%,
    rgba(255, 255, 255, 0.02) 55%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: none;
  z-index: 2; /* 在 ::before 之上，但文本层更高 */
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.8s cubic-bezier(0.2, 0.9, 0.2, 1);
}

/* 光泽在 hover 时滑过（非循环） */
.tiles > a.tile:hover::after,
.tiles > .tile:hover::after,
.tiles > a.tile:focus-within::after,
.tiles > .tile:focus-within::after {
  opacity: 1;
  transform: translateX(120%) rotate(-12deg);
}

/* ---------- SVG 背景（装饰性，位于最底层） ---------- */
.tiles > a.tile .tile-svg,
.tiles > .tile .tile-svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: 50% 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.16;
  width: 80%;
  height: 80%;
  transition: transform 0.6s cubic-bezier(0.2, 0.9, 0.2, 1), opacity 0.35s ease;
  will-change: transform, opacity;
}

/* hover 时微放大并上移 */
.tiles > a.tile:hover .tile-svg,
.tiles > .tile:hover .tile-svg,
.tiles > a.tile:focus-within .tile-svg,
.tiles > .tile:focus-within .tile-svg {
  transform: translate(-50%, calc(-50% + var(--_hover-translate))) scale(1.06);
  opacity: 0.22;
}

/* ---------- 文本层始终位于最上层---------- */
.tiles > a.tile > *,
.tiles > .tile > * {
  position: relative;
  z-index: 3;
}

/* ---------- 阴影与抬起效果：hover / active / focus-visible ---------- */
.tiles > a.tile,
.tiles > .tile {
  --_hover-translate: -8px;
  --_active-translate: -2px;
}

.tiles > a.tile:hover,
.tiles > .tile:hover,
.tiles > a.tile:focus-within,
.tiles > .tile:focus-within {
  transform: translateY(var(--_hover-translate));
  box-shadow: 0 calc(var(--tile-elev-y) * 2) calc(var(--tile-elev-blur) + 10px)
      rgba(0, 0, 0, 0.35),
    0 0 20px var(--tile-glow-color);
}

/* 点击（按下）短暂反馈 */
.tiles > a.tile:active,
.tiles > .tile:active {
  transform: translateY(var(--_active-translate)) scale(0.997);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2), 0 0 10px var(--tile-glow-color);
  transition-duration: 120ms;
}

/* 键盘可见焦点（focus-visible）样式 */
.tiles > a.tile:focus-visible,
.tiles > .tile:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.12);
  outline-offset: 4px;
  transform: translateY(calc(var(--_hover-translate) * 0.75));
  box-shadow: 0 calc(var(--tile-elev-y) * 1.5) calc(var(--tile-elev-blur) + 6px)
      rgba(0, 0, 0, 0.3),
    0 0 18px var(--tile-glow-color);
}

/* ---------- 无障碍：偏好减少动画时禁用动画 ---------- */
@media (prefers-reduced-motion: reduce) {
  .tiles > a.tile,
  .tiles > .tile,
  .tiles > a.tile .tile-svg,
  .tiles > .tile .tile-svg,
  .tiles > a.tile::after,
  .tiles > .tile::after {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
  .tiles > a.tile .tile-svg,
  .tiles > .tile .tile-svg {
    opacity: 0.16;
  }
  .tiles > a.tile::after,
  .tiles > .tile::after {
    opacity: 0;
  }
}

@media (max-width: 800px) {
  .tile p {
    margin-left: 0.5em;
    margin-right: 0.5em;
    font-size: 1.25rem;
  }

  .tiles {
    scroll-snap-type: x proximity;
  }

  .tiles > a.tile,
  .tiles > .tile {
    scroll-snap-align: start;
  }
}

/* =========== 手机响应 =========== */
@media (max-width: 480px) {
  .tiles {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    background: transparent;
    overflow-x: hidden;
  }

  .tiles > a.tile,
  .tiles > .tile {
    position: relative;
    flex: 0 0 calc((100% - 24px) / 3);
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.02) 1px,
        transparent 1px
      ),
      linear-gradient(
        to bottom right,
        rgba(255, 255, 255, 0.08),
        rgba(255, 255, 255, 0.02)
      ),
      var(--tile-color, rgba(25, 35, 60, 0.05));
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    padding: 10px 8px;
    min-width: 96px;
    min-height: 110px;
  }

  .tiles > a.tile:hover,
  .tiles > .tile:hover {
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.18);
    transform: translateY(-3px);
  }

  .tiles > a.tile h1,
  .tiles > .tile h1 {
    display: block;
    font-size: 1rem;
    margin: 6px 0 0;
    text-align: center;
  }

  .tiles > a.tile p,
  .tiles > .tile p {
    display: none;
    margin-left: 1em;
    margin-right: 1em;
  }

  .tiles > a.tile .tile-svg,
  .tiles > .tile .tile-svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
    width: 48%;
    height: auto;
    opacity: 0.18;
    pointer-events: none;
  }

  .tiles > a.tile p.show-mobile {
    display: block;
    font-size: 0.6rem;
  }
}

/* ---------------- 400px 及以下 ---------------- */
@media (max-width: 400px) {
  /* 容器：保持横排三列、不换行；给阴影留空间 */
  .tiles {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 12px;
    padding: 8px 10px;
    overflow-x: hidden; /* 可改为 auto 允许横向滚动 */
    background: transparent; /* 恢复透明容器 */
    align-items: flex-start;
  }

  /* 每个磁贴：等宽三列并保持正方形（使用 aspect-ratio） */
  .tiles > a.tile,
  .tiles > .tile {
    flex: 0 0 calc((100% - 24px) / 3) !important; /* 3 列布局（24px = 2 * gap） */
    width: calc((100% - 24px) / 3) !important;
    aspect-ratio: 1 / 1; /* 保证宽高相等 */
    min-width: 84px; /* 极窄屏时的下限 */
    min-height: 0;
    height: auto;
    padding: 8px;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column;
    justify-content: center; /* 标题垂直居中 */
    align-items: center; /* 标题水平居中 */
    border-radius: 10px;
    overflow: hidden;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.02) 1px,
        transparent 1px
      ),
      linear-gradient(
        to bottom right,
        rgba(255, 255, 255, 0.08),
        rgba(255, 255, 255, 0.02)
      ),
      var(--tile-color, rgba(25, 35, 60, 0.05)) !important;
    /* 适度柔和阴影 */
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12) !important;
  }

  /* 确保子元素不被拉伸占位 */
  .tiles > a.tile > *,
  .tiles > .tile > * {
    flex: 0 0 auto !important;
  }

  /* 隐藏所有介绍性文字 */
  .tiles > a.tile p,
  .tiles > .tile p {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
  }

  .tiles > a.tile p.show-mobile,
  .tiles > .tile p.show-mobile {
    display: none !important;
  }

  /* 标题：放大并自适应（避免溢出），居中显示 */
  .tiles > a.tile h1,
  .tiles > .tile h1,
  .tiles > a.tile h2,
  .tiles > .tile h2,
  .tiles > a.tile h3,
  .tiles > .tile h3 {
    display: block;
    font-size: clamp(1.1rem, 5.2vw, 1.6rem) !important; /* 自适应放大 */
    line-height: 1.05;
    margin: 0;
    text-align: center;
    z-index: 3 !important; /* 确保文字在 svg 之上 */
    color: inherit;
  }

  /* SVG 图标：绝对居中、缩小、不与标题冲突 */
  .tiles > a.tile .tile-svg,
  .tiles > .tile .tile-svg {
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40%; /* 图标大小（可调） */
    height: auto;
    opacity: 0.16;
    pointer-events: none;
    z-index: 1 !important;
  }

  /* 轻触时的视觉反馈 */
  .tiles > a.tile:active,
  .tiles > .tile:active {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14) !important;
    transition-duration: 120ms !important;
  }
}

/* ---------- 长条磁贴 ---------- */
/* 仅作用于直接位于 .tiles 下并同时含 .tile 和 .tile-strip-new 的元素 */
.tiles > a.tile.tile-strip-new,
.tiles > .tile.tile-strip-new {
  display: flex;
  flex-direction: row; /* 横向：左图右文 */
  align-items: center;
  gap: var(--tile-strip-gap);
  padding: 0.9rem 1.5rem; /* 与原文本左右间距保持一致 */
  box-sizing: border-box;
  min-height: calc(var(--tile-thumb-size) + 16px);
  flex: 1 1 100%;
}

/* 缩略图（左侧） */
.tiles > a.tile.tile-strip-new .tile-thumb,
.tiles > .tile.tile-strip-new .tile-thumb {
  width: var(--tile-thumb-size-responsive);
  height: var(--tile-thumb-size-responsive);
  flex: 0 0 var(--tile-thumb-size-responsive);
  border-radius: var(--tile-thumb-radius);
  object-fit: cover;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  background: rgba(255, 255, 255, 0.03);
  z-index: 2;
  pointer-events: none;
  transition: transform 280ms cubic-bezier(0.2, 0.9, 0.3, 1),
    box-shadow 280ms ease;
  transform-origin: center;
}

/* 缩略图 hover / focus 微动效（仅本类） */
.tiles > a.tile.tile-strip-new:hover .tile-thumb,
.tiles > .tile.tile-strip-new:hover .tile-thumb,
.tiles > a.tile.tile-strip-new:focus-within .tile-thumb,
.tiles > .tile.tile-strip-new:focus-within .tile-thumb {
  transform: translateY(-6px) scale(1.04);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25);
}

/* 右侧文本容器（左图右文） */
.tiles > a.tile.tile-strip-new .tile-content,
.tiles > .tile.tile-strip-new .tile-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end; /* 右对齐文本 */
  text-align: right;
  min-width: 0; /* 支持溢出裁切 */
  z-index: 3; /* 始终在最上层文本层 */
}

/* 标题与描述：支持最多两行省略 */
.tiles > a.tile.tile-strip-new .tile-content > h1,
.tiles > .tile.tile-strip-new .tile-content > h1 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.15;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tiles > a.tile.tile-strip-new .tile-content > p,
.tiles > .tile.tile-strip-new .tile-content > p {
  margin: 0.35rem 0 0 0;
  font-size: 1rem;
  opacity: 0.95;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tiles > .tile.tile-strip-new {
  --tile-thumb-size-responsive: var(--tile-thumb-size);
}

.tiles > a.tile.tile-strip-new:active,
.tiles > .tile.tile-strip-new:active {
  transform: translateY(var(--_active-translate)) scale(0.997);
  transition-duration: 120ms;
}

/* 手机 */
@media (max-width: 480px) {
  .tiles > a.tile.tile-strip-new,
  .tiles > .tile.tile-strip-new {
    flex-direction: row !important;
    align-items: center;
    min-height: auto;
    padding: 0.8rem 1rem;
    gap: 12px;
  }

  .tiles > a.tile.tile-strip-new .tile-thumb,
  .tiles > .tile.tile-strip-new .tile-thumb {
    width: 50px !important;
    height: 50px !important;
    flex: 0 0 50px !important;
    margin: 0 !important;
  }

  .tiles > a.tile.tile-strip-new .tile-content,
  .tiles > .tile.tile-strip-new .tile-content {
    align-items: flex-end !important;
    text-align: right !important;
  }

  .tiles > a.tile.tile-strip-new .tile-content h1,
  .tiles > .tile.tile-strip-new .tile-content h1 {
    font-size: 0.95rem !important;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
}

@media (min-width: 401px) {
  .tiles > a.tile.tile-strip-new .short-title,
  .tiles > .tile.tile-strip-new .short-title {
    display: none !important;
  }
}

/* 小屏手机：400px 及以下 - 长条磁贴适配 */
@media (max-width: 400px) {
  :root {
    --tile-thumb-size: 36px; /* 条，缩略图大小（正方形）*/
  }
  .tiles > a.tile.tile-strip-new,
  .tiles > .tile.tile-strip-new {
    /* 重置方形磁贴的样式，恢复长条磁贴的布局 */
    flex: 1 1 100% !important;
    width: auto !important;
    aspect-ratio: unset !important;
    min-width: auto !important;
    min-height: auto !important;
    height: auto !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    align-items: center !important;
    padding: 0.5rem 0.7rem !important;
    gap: 8px !important;
    border-radius: 8px !important;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.02) 1px,
        transparent 1px
      ),
      linear-gradient(
        to bottom right,
        rgba(255, 255, 255, 0.08),
        rgba(255, 255, 255, 0.02)
      ),
      var(--tile-color, rgba(25, 35, 60, 0.05)) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  }

  /* 长条磁贴的缩略图 - 缩小到36px */
  .tiles > a.tile.tile-strip-new .tile-thumb,
  .tiles > .tile.tile-strip-new .tile-thumb {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    margin: 0 !important;
    border-radius: 6px !important;
    --tile-thumb-size-responsive: 36px !important;
  }

  /* 长条磁贴的内容区域 - 确保左对齐 */
  .tiles > a.tile.tile-strip-new .tile-content,
  .tiles > .tile.tile-strip-new .tile-content {
    align-items: flex-end !important; /* 改为左对齐 */
    text-align: right !important; /* 改为左对齐 */
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* 长条磁贴的标题 */
  .tiles > a.tile.tile-strip-new .tile-content h1,
  .tiles > .tile.tile-strip-new .tile-content h1 {
    font-size: 0.75rem !important;
    line-height: 1.1 !important;
    text-align: right !important; /* 改为左对齐 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100% !important;
  }

  /* 标题切换 */
  .tiles > a.tile.tile-strip-new .full-title,
  .tiles > .tile.tile-strip-new .full-title {
    display: none !important;
  }

  .tiles > a.tile.tile-strip-new .short-title,
  .tiles > .tile.tile-strip-new .short-title {
    display: block !important;
  }

  /* 长条磁贴的点击效果 */
  .tiles > a.tile.tile-strip-new:active,
  .tiles > .tile.tile-strip-new:active {
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12) !important;
    transition-duration: 120ms !important;
  }
}

/* 小屏幕下自动垂直堆叠——只影响本类，不影响原 .tile */
@media (max-width: 380px) {
  .tiles > a.tile.tile-strip-new,
  .tiles > .tile.tile-strip-new {
    flex-direction: column;
    padding: 0.8rem;
    gap: 8px;
  }
  .tiles > a.tile.tile-strip-new .tile-thumb,
  .tiles > .tile.tile-strip-new .tile-thumb {
    width: var(--tile-thumb-size) !important;
    height: var(--tile-thumb-size) !important;
    margin: 0 auto !important;
  }
  .tiles > a.tile.tile-strip-new .tile-content,
  .tiles > .tile.tile-strip-new .tile-content {
    align-items: center !important;
    text-align: center !important;
  }
}

/* ---------- 响应式：平板 / 手机 / 小屏 ---------- */

/* 平板：宽度 768px ~ 1024px */
@media (max-width: 1024px) and (min-width: 768px) {
  .tiles > a.tile.tile-strip-new,
  .tiles > .tile.tile-strip-new {
    gap: 12px; /* 缩短左右间距 */
    padding: 0.7rem 1rem;
  }

  .tiles > a.tile.tile-strip-new .tile-content h1,
  .tiles > .tile.tile-strip-new .tile-content h1 {
    font-size: 1.1rem;
  }
  .tiles > a.tile.tile-strip-new .tile-content p,
  .tiles > .tile.tile-strip-new .tile-content p {
    font-size: 0.95rem;
  }

  .tiles > .tile.tile-strip-new {
    --tile-thumb-size-responsive: 60px;
  }
}

/* 手机：宽度 400px ~ 767px */
@media (max-width: 767px) and (min-width: 480px) {
  .tiles > a.tile.tile-strip-new,
  .tiles > .tile.tile-strip-new {
    gap: 10px;
    padding: 0.6rem 0.8rem;
  }

  .tiles > a.tile.tile-strip-new .tile-content h1,
  .tiles > .tile.tile-strip-new .tile-content h1 {
    font-size: 1rem;
  }
  .tiles > a.tile.tile-strip-new .tile-content p,
  .tiles > .tile.tile-strip-new .tile-content p {
    font-size: 0.9rem;
  }
}