/* Modern sites.css */

/* 1. 全局重置和基础样式 (Modern Reset & Base Styles) */
*,
*::before,
*::after {
  box-sizing: border-box; /* 现代 CSS 的标准盒模型，让布局更直观 */
}

html, body {
  margin: 0;
  padding: 0;
  font-family: sans-serif; /* 建议指定一个通用字体 */
}

a {
  text-decoration: none;
  color: inherit; /* 继承父元素颜色 */
}

/* 2. 主容器布局 (Main Wrapper Layout) */
#wrap {
  margin: 50px auto;
  /* max-width: 450px;  <-- 可以保留也可以移除，fit-content 会优先 */
  
  /* 添加下面这一行 */
  width: fit-content;
  padding: 0 10px; /* 在小屏幕上增加一些边距 */
}

.title {
  background: #F60;
  color: #fff;
  text-align: center;
  font-weight: 900;
  padding: 3px 0;
  width: 100%;
  height: auto;
  padding: 10px;
  cursor: pointer; /* 提示用户这里可以点击 */
}

/* 3. 网格容器 (Grid Container) - 使用 Flexbox 替代 float */
#box {
  display: grid; /* 从 flex 改为 grid */
  grid-template-columns: repeat(3, 140px); /* 精确定义一个三列网格，每列140px宽 */
  gap: 8px; /* 设置项目之间的间隙，替代 margin */
  
  /* 以下是用于展开/收起动画的关键样式 */
  overflow: hidden;
  max-height: 1000px; /* 设置一个足够大的初始高度 */
  transition: max-height 1.1s cubic-bezier(0.25, 1, 0.5, 1), 
              opacity 0.8s ease-in-out; /* 平滑过渡动画 */
}

/* JS 会添加这个 class 来收起 #box */
#box.is-collapsed {
  max-height: 0;
  opacity: 0;
  pointer-events: none; /* 收起时禁用鼠标交互 */
}


/* 4. 网格项目 (Grid Items) - 使用公共 class */
.site-item {
  width: 140px;
  height: 140px;
  border: #000 1px solid;
  opacity: 0.7;
  background-size: cover; /* 让背景图完整覆盖容器 */
  background-position: center;
  background-repeat: no-repeat;
  
  /* 这是替换 jQuery hover 动画的关键 */
  transition: opacity 0.3s ease-in-out; 
}

/* 鼠标悬停效果 - 这一条规则即可替换所有旧的 JS hover 代码 */
.site-item:hover {
  opacity: 1;
}

/* 5. 为每个项目设置独立的背景图 (Individual Backgrounds) */
#site1 { background-image: url(/assets/images/sites.bolg.rzx.me.gif); }
#site2 { background-image: url(/assets/images/sites.pic.rzx.me.gif); }
#site3 { background-image: url(/assets/images/sites.acglook.com.gif); }
#site4 { background-image: url(/assets/images/blog-pic.jpg); }
#site5 { background-image: url(/assets/images/sites.tumblr1280.gif); }
#site6 { background-image: url(/assets/images/blog-pic.jpg); }
#site7 { background-image: url(/assets/images/sites.music.gif); }
#site8 { background-image: url(/assets/images/sites.html5.png); }
#site9 { 
  background-image: url(/assets/images/sites.lab.rzx.me.gif);
  opacity: 1; /* 这个元素在原 CSS 中没有设置透明度，这里保持一致 */
}

/* 6. 固定菜单 (Fixed Menus) - 样式基本保持不变，稍作整理 */
#home_menu, #home_menu2, #home_menu3 {
  position: fixed;
  border: 2px #444 solid;
  opacity: 0; /* 这些元素默认不可见，推测由其他 JS 控制 */
}

#home_menu {
  width: 200px;
  height: 100px;
  background: url(/assets/images/blog-pic.jpg) no-repeat 100% 100%;
  left: 50px;
  bottom: 10px;
  z-index: 999;
}

#home_menu2 {
  width: 400px;
  height: 200px;
  background-color: #32c;
  right: 50px;
  bottom: 10px;
  z-index: 995;
}

#home_menu3 {
  width: 400px;
  height: 200px;
  background: #00c url(/assets/images/follow.jpg);
  right: 200px;
  bottom: -10px;
  z-index: 995;
}