/* ============================================================
   首页 hero 专属样式（主题二轮改版）
   - 肖像占位块 + 彩色几何装饰块（参照设计稿照片边缘装饰）
   - Tailwind 可覆盖的部分均用 Tailwind 类，这里只写纯 CSS 部分
   - 替换真实肖像：把 portrait.jpg 放到 themes/luxd-icefox/static/images/
     并替换 index.html 中 .hero-portrait-card 为 <img> 即可
   ============================================================ */

/* 肖像占位容器：定位上下文，留出装饰块错位空间 */
.hero-portrait {
  position: relative;
  width: 16rem;
  height: 16rem;
}
@media (min-width: 768px) {
  .hero-portrait {
    width: 20rem;
    height: 20rem;
  }
}

/* 肖像卡片本体：铺满容器，压在装饰块之上 */
.hero-portrait-card {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* 彩色几何装饰块：错落于照片背后 */
.hero-deco {
  position: absolute;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 1.1rem;
  z-index: -1;
}
.hero-deco-orange {
  top: -0.9rem;
  right: -0.9rem;
  background: linear-gradient(135deg, #fb923c, #ef4444);
  transform: rotate(14deg);
}
.hero-deco-teal {
  bottom: -0.9rem;
  left: -0.9rem;
  background: linear-gradient(135deg, #2dd4bf, #34d399);
  transform: rotate(-12deg);
}

/* 肖像背后的淡色大圆光晕（设计稿照片后的浅色圆形） */
.hero-portrait::after {
  content: "";
  position: absolute;
  right: -3.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 12rem;
  height: 12rem;
  border-radius: 9999px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.08), transparent 70%);
  z-index: -2;
}