/* ==========================================================================
   东莞高级中学 · 官网改版
   student-life.css — 德育之窗 / 校园生活 / 信息公开 三页专用样式
   只服务于 moral.html、campus.html、disclosure.html
   ========================================================================== */

/* ---------- 0. 头图微调 ---------- */
/* 校园生活页头图为足球场（大面积亮绿），按默认遮罩白字对比度不足 */
.page-hero--image .sl-hero-scrim::after {
  background: linear-gradient(90deg, rgba(9, 25, 37, .9) 0%, rgba(9, 25, 37, .68) 52%, rgba(9, 25, 37, .46) 100%),
              linear-gradient(0deg, rgba(9, 25, 37, .45), transparent 55%);
}
/* 头图下方的关键信息在窄屏允许换行，避免溢出 */
.page-hero__meta.sl-hero-meta { flex-wrap: wrap; row-gap: 6px; }
/* 图片头图上的 meta 用浅色，避免灰字压在图上看不清 */
.page-hero--image .sl-hero-meta { color: rgba(255, 255, 255, .72); }

/* ---------- 1. 图注 ---------- */
.sl-figure { margin: 0; }
.sl-figure img { width: 100%; display: block; }
.sl-figure figcaption {
  padding: 9px 0 10px;
  border-bottom: 1px solid var(--line);
  font-size: 11px; letter-spacing: .04em; color: var(--muted); line-height: 1.7;
}
.sl-figure--tall img { aspect-ratio: 4 / 5; object-fit: cover; }

/* ---------- 2. 条目列表：仪式 / 渠道 / 措施 ---------- */
.sl-list { border-top: 1px solid var(--ink); }
.sl-list li {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.sl-list strong { font-family: var(--font-serif); font-size: 16px; font-weight: 600; line-height: 1.7; }
.sl-list span { font-size: 13px; color: var(--muted); line-height: 1.9; }

/* ---------- 3. 分类表：德育活动的类型 ---------- */
.sl-agenda { border-top: 1px solid var(--ink); }
.sl-agenda__row {
  display: grid; grid-template-columns: 104px minmax(0, .9fr) minmax(0, 1.6fr);
  gap: 24px; align-items: baseline;
  padding: 17px 0; border-bottom: 1px solid var(--line);
}
.sl-agenda__tag { font-family: var(--font-num); font-size: 12px; letter-spacing: .06em; color: var(--accent); }
.sl-agenda__name { font-family: var(--font-serif); font-size: 18px; font-weight: 600; line-height: 1.6; }
.sl-agenda__desc { font-size: 13px; color: var(--muted); line-height: 1.85; }

/* ---------- 4. 分类栅格：学生社团 ---------- */
.sl-club-grid {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.sl-club { background: var(--white); padding: 24px 22px 26px; display: flex; flex-direction: column; gap: 7px; }
.sl-club em { font-style: normal; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.sl-club strong { font-family: var(--font-serif); font-size: 18px; font-weight: 600; line-height: 1.5; }
.sl-club p { font-size: 12.5px; color: var(--muted); line-height: 1.85; }

/* ---------- 5. 多栏卡片：三个年级 / 三类报告 ---------- */
.sl-cols {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.sl-col { background: var(--white); padding: 28px 26px 26px; display: flex; flex-direction: column; gap: 10px; }
.sl-col__meta { font-family: var(--font-num); font-size: 11px; letter-spacing: .1em; color: var(--accent); }
.sl-col h3 { font-size: 21px; }
.sl-col > p { font-size: 13.5px; color: var(--muted); line-height: 1.9; }
.sl-col .preview-list { margin-top: 2px; }
.sl-col .link-arrow { align-self: flex-start; margin-top: auto; font-size: 13px; }

/* ---------- 6. 双列链接：校务公开 ---------- */
.sl-linklist { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; border-top: 1px solid var(--ink); }
.sl-linklist a {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 0; border-bottom: 1px solid var(--line);
  font-size: 14px; transition: color .2s, padding-left .2s;
}
.sl-linklist a::after { content: "→"; font-size: 12px; color: var(--muted); transition: color .2s; }
.sl-linklist a:hover { color: var(--accent); padding-left: 4px; }
.sl-linklist a:hover::after { color: var(--accent); }

/* ---------- 7. 公开目录表 ---------- */
.sl-catalog td:first-child { white-space: nowrap; font-weight: 500; }
.sl-catalog td:last-child { white-space: nowrap; }
.sl-catalog a { color: var(--accent); border-bottom: 1px solid rgba(160, 74, 51, .3); }
.sl-catalog a:hover { border-color: var(--accent); }

/* ---------- 8. 响应式 ---------- */
@media (max-width: 1024px) {
  .sl-club-grid { grid-template-columns: 1fr 1fr; }
  .sl-club:last-child { grid-column: 1 / -1; }
  .sl-cols { grid-template-columns: 1fr; }
  .sl-col .link-arrow { margin-top: 6px; }
  .sl-agenda__row { grid-template-columns: 92px minmax(0, 1fr); gap: 6px 20px; }
  .sl-agenda__desc { grid-column: 2 / -1; }
  .sl-linklist { gap: 0 28px; }
}

@media (max-width: 767px) {
  .sl-club-grid { grid-template-columns: 1fr; }
  .sl-club { padding: 20px 18px 22px; }
  .sl-agenda__row { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; }
  .sl-agenda__desc { grid-column: auto; }
  .sl-agenda__name { font-size: 17px; }
  .sl-list li { grid-template-columns: 78px minmax(0, 1fr); gap: 12px; }
  .sl-list strong { font-size: 15px; }
  .sl-linklist { grid-template-columns: 1fr; }
  .sl-col { padding: 22px 20px 24px; }
  .sl-figure--tall img { aspect-ratio: 4 / 3; }
}