/* ==== RESET 简易浏览器 reset ==== */
* { margin: 0; padding: 0; box-sizing: border-box; }
/* ==== 全局背景蓝 → 白渐变 ==== */
body{
  background:linear-gradient(180deg,#3a8dde 0%,#ffffff 100%);
  font-family:"Helvetica Neue",Arial,"PingFang SC",sans-serif;
  color:#333;
}

/* 新增：缩略图/视频淡入，放大灯箱也淡入 */
.grid-item img,
.grid-item video{ transition:opacity .4s ease; opacity:.001; }  /* 初始透明 */
.grid-item img.loaded,
.grid-item video.loaded{ opacity:1; }                            /* 加载完淡入 */

.lightbox{ transition:opacity .3s ease; will-change:opacity; }


/* ==== 顶部 Banner ==== */
header.banner{
  width:100%; height:180px; background:url("img/banner.jpg") center/cover no-repeat;
  display:flex; align-items:center; justify-content:center;
  font-size:2.4rem; font-weight:700; color:#fff; letter-spacing:4px;
  text-shadow:0 2px 10px rgba(0,0,0,.35);
}

/* ==== 首页 3 大卡片 ==== */
.section-cards{
  max-width:960px; margin:40px auto; display:flex; gap:24px; flex-wrap:wrap; justify-content:center;
}
.card{
  flex:1 1 260px; min-height:160px; border-radius:14px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; font-weight:600; transition:transform .25s ease, box-shadow .25s ease;
  box-shadow:0 6px 14px rgba(0,0,0,.05);
}
.card.yellow{background:#ffe66d;}
.card.red   {background:#ff6b6b; color:#fff;}
.card.white {background:#ffffff; border:1px solid #e5e5e5;}
.card:hover{
  transform:translateY(-6px) scale(1.03);
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}

/* ==== 班级一言区域 ==== */
.quote-box{
  margin:48px auto; max-width:720px; background:#fff; border-radius:12px;
  padding:32px 28px; font-size:1.4rem; line-height:1.8;
  box-shadow:0 4px 14px rgba(0,0,0,.06); cursor:pointer; position:relative;
}
.quote-box::after{
  content:"点击切换下一句"; position:absolute; right:24px; bottom:16px;
  font-size:.85rem; color:#888;
}

/* ==== 日记页轮播 ==== */
.diary-container{ position:relative; max-width:800px; margin:40px auto; }
.diary-container img{ width:100%; border-radius:8px; }
.btn-nav{
  position:absolute; top:50%; transform:translateY(-50%); font-size:36px; color:#fff;
  background:rgba(0,0,0,.25); border:none; width:48px; height:72px; cursor:pointer;
}
.btn-prev{ left:0; border-radius:0 4px 4px 0;}
.btn-next{ right:0; border-radius:4px 0 0 4px;}
.btn-nav:hover{background:rgba(0,0,0,.45);}

.thumb-toggle{
  position:absolute; top:16px; right:-56px; background:#ff9800; border:none;
  color:#fff; width:40px; height:40px; border-radius:50%; cursor:pointer;
  box-shadow:0 4px 10px rgba(0,0,0,.15);
}
.thumb-panel{
  position:fixed; top:0; right:-220px; width:220px; height:100%; background:#fff;
  box-shadow:-4px 0 12px rgba(0,0,0,.1); overflow-y:auto; transition:right .3s ease;
  padding:20px;
}
.thumb-panel.open{ right:0; }
.thumb-panel img{ width:100%; margin-bottom:12px; cursor:pointer; border-radius:4px; }

/* ==== 底部滚轮 ==== */
.dots{ display:flex; justify-content:center; margin-top:20px; gap:8px; }
.dot{
  width:12px; height:12px; background:#ddd; border-radius:50%; cursor:pointer; transition:.2s;
}
.dot.active{background:#ff6b6b;}

/* ==== 回忆墙 Masonry 简易实现 ==== */
.grid{
  column-count:3; column-gap:14px; max-width:1000px; margin:40px auto;
}
@media (max-width:800px){ .grid{ column-count:2; } }
@media (max-width:500px){ .grid{ column-count:1; } }
.grid-item{ break-inside:avoid; margin-bottom:14px; cursor:pointer; position:relative; }
.grid-item img, .grid-item video{ width:100%; border-radius:6px; display:block; }

/* ==== 灯箱 ==== */
.lightbox{
  position:fixed; inset:0; background:rgba(0,0,0,.8); display:none; align-items:center; justify-content:center;
  z-index:999; padding:20px;
}
.lightbox-content{ max-width:90%; max-height:90%; }
.lightbox-info{ color:#fff; margin-top:16px; text-align:center; font-size:1rem; }
.lightbox-close{
  position:absolute; top:24px; right:32px; font-size:36px; color:#fff; cursor:pointer;
}
/* 让首页卡片在页面加载时轻轻浮现 */
.card{ opacity:0; transform:translateY(30px) scale(.95); animation:rise .6s forwards; }
@keyframes rise{ to{opacity:1; transform:translateY(0) scale(1);} }
/* 网格图片 / 视频保持比例铺满列宽 */
.grid-item img,
.grid-item video{
  width:100%;
  height:auto;            /* 让浏览器依据原始宽高比缩放 */
  border-radius:6px;
  display:block;
  object-fit:cover;       /* 若想完全填满列宽可保留；要避免裁切可删掉 */
}

/* 灯箱去掉信息区，内容靠自己撑开；点击空白即可关闭 */
.lightbox-content > *{    /* 图片或视频 */
  max-width:90vw;
  max-height:90vh;
}