body { padding-top: 56px; }
.left-aligned { margin-left: auto; }
.bg-dark { background-color: #343a40 !important; }
.bg-hero { background-color: #45b06cff; }

/* CALLOUT */
.bd-callout { padding:1.25rem; margin-top:1.25rem; margin-bottom:1.25rem; border:1px solid #e9ecef; border-left-width:.25rem; border-radius:.25rem }
.bd-callout h4 { margin-bottom: 1.25rem }
.bd-callout p:last-child { margin-bottom:0 }
.bd-callout code { border-radius:.25rem }
.bd-callout+.bd-callout { margin-top:-.25rem }
.bd-callout-info { border-left-color:#5bc0de }
.bd-callout-warning { border-left-color:#f0ad4e }
.bd-callout-danger { border-left-color:#d9534f }

 .quick-links {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }
        .link-card {
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 15px;
            margin: 10px;
            text-align: center;
            flex: 1;
            min-width: 200px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        .link-card a {
            color: #007bff;
            text-decoration: none;
            font-weight: bold;
        }


/* footer */
footer a { color: white; font-weight: bold; text-decoration: none; }
footer a:hover { color: white; text-decoration: underline; }


        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        header {
            background-color: #007bff;
            color: white;
            padding: 10px;
            text-align: center;
            position: relative;
        }
        .close-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            background: #fff;
            color: #007bff;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
        }
        h1, h2, h3 {
            color: #007bff;
        }
        section {
            margin-bottom: 40px;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .team-overview {
            text-align: center;
        }
        .member-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
        }
        .member-card {
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 15px;
            text-align: center;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        footer {
            text-align: center;
            padding: 10px;
            background: #007bff;
            color: white;
        }
        nav ul {
            list-style: none;
            padding: 0;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
        }
        nav ul li {
            margin: 10px;
        }
        nav ul li a {
            color: white;
            text-decoration: none;
        }
        /* Responsive design */
        @media (max-width: 768px) {
            .container {
                padding: 10px;
            }
            section {
                padding: 15px;
            }
            .member-grid {
                grid-template-columns: 1fr;
            }
        }

/* ─── iGEM 2025 • WLSA-China • Experiments 图片覆盖修正（追加到 style.css 末尾） ─── */

/* A) 仅在 Experiments 页启用（现代浏览器：支持 :has()） */
@supports selector(body:has(a)) {

  /* 依据顶部导航中“Experiments”高亮项做页面作用域：
     - 常见高亮类名：.active 或 [aria-current="page"]
     - 如果你们主题用别的类名，把 .active 换成对应类名即可  */
  body:has(nav a[href$="/wlsa-china/experiments"].active),
  body:has(nav a[aria-current="page"][href$="/wlsa-china/experiments"]) {

    /* 1) 让媒体元素回归文流：取消绝对定位、浮动与异常层级 */
    main img,
    main figure,
    main .figure,
    main .figure-card,
    main .image,
    main .placeholder,
    main .figure-ph {
      position: static !important;      /* 取消 absolute/fixed */
      float: none !important;           /* 取消左右浮动 */
      clear: both;                      /* 避免与上方浮动重叠 */
      display: block;                   /* 独占一行，禁用文字环绕 */
      z-index: auto !important;         /* 归还层级，避免压文字 */
      max-width: 100%;
      height: auto;
      margin: 1rem auto;                /* 上下留白、居中 */
      object-fit: contain;
      shape-outside: none;              /* 一些主题会开启文字绕排 */
    }

    /* 2) 对内联样式强制 absolute 的兜底纠偏 */
    main img[style*="position:absolute"],
    main figure[style*="position:absolute"],
    main .image[style*="position:absolute"] {
      position: static !important;
      top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
      transform: none !important;       /* 若用 transform 定位，移除之 */
    }

    /* 3) figure 结构优化与图注样式 */
    main figure { margin: 1.25rem auto; }
    main figure > img { width: 100%; height: auto; object-fit: contain; }
    main figcaption {
      margin-top: .5rem;
      font-size: .9rem; line-height: 1.4;
      color: #6b7280; text-align: center;
    }

    /* 4) 占位符块：无图时也不会覆盖正文 */
    main .placeholder,
    main .figure-placeholder,
    main .figure-ph {
      min-height: 220px;
      background: #f3f4f6;
      border: 1px dashed #d1d5db;
      border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      color: #6b7280; font-size: 14px; padding: 8px;
    }

    /* 5) 有旧浮动布局时，确保父容器能包裹内容，防止溢出覆盖 */
    main, .content, article { overflow: auto; }
  }
}

/* B) 兼容旧浏览器（不支持 :has() 时的“轻量全站兜底”）
      — 选择器尽量收敛到 main 内，降低对其它页面的影响 */
main img,
main figure,
main .figure,
main .figure-card,
main .image,
main .placeholder,
main .figure-ph {
  position: static !important;
  float: none !important;
  clear: both;
  display: block;
  z-index: auto !important;
  max-width: 100%;
  height: auto;
  margin: 1rem auto;
  object-fit: contain;
  shape-outside: none;
}

/* 兜底修复强制 absolute 的内联样式 */
img[style*="position:absolute"],
figure[style*="position:absolute"],
.image[style*="position:absolute"] {
  position: static !important;
  top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  transform: none !important;
}

/* figure 与图注的基础样式（安全、通用） */
figure { margin: 1.25rem auto; }
figure > img { width: 100%; height: auto; object-fit: contain; }
figcaption { margin-top: .5rem; font-size: .9rem; line-height: 1.4; color: #6b7280; text-align: center; }

/* 父容器包裹浮动，避免文本被盖住 */
main, .content, article { overflow: auto; }





img {
    opacity: 1 !important; /* 强制完全不透明，覆盖任何蒙版 */
    filter: none !important; /* 移除灰度、模糊、亮度滤镜 */
    background: transparent !important; /* 移除背景色 */
    box-shadow: none !important; /* 移除阴影 */
    border: none !important; /* 移除边框 */
    max-width: 100%;
    height: auto;
}

/* 针对.placeholder类（您的页面中使用） */
.placeholder {
    background: transparent !important; /* 移除灰色背景 */
    border: none !important; /* 移除边框 */
    box-shadow: none !important; /* 移除阴影 */
    opacity: 1 !important;
    filter: none !important;
}

/* 如果有图片容器类，强制清除蒙版 */
.figure, .figure img {
    opacity: 1 !important;
    filter: none !important;
    background: transparent !important;
}

/* 移除任何伪元素蒙版 */
.figure::before, .figure::after,
.placeholder::before, .placeholder::after {
    content: none !important;
    background: none !important;
}