/* =============================================================================
 * bento.css — 功能卡片矩阵（真实首页 Bento 布局）
 * ========================================================================== */

.bento {
  padding: 48px 24px 64px; background: var(--bg); max-width: var(--maxw); margin: 0 auto;
}
.bento__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 210px);
  gap: 16px;
}

.bento__item {
  position: relative; border-radius: var(--r); padding: 24px;
  color: #fff; overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: transform .35s ease, box-shadow .35s ease;
}
.bento__item:hover { transform: translateY(-5px); box-shadow: var(--sh); }
.bento__item--large { grid-column: 1 / 3; grid-row: 1 / 3; padding: 32px; }

/* 子项网格定位（按 data.js 顺序） */
.bento__grid .bento__item:nth-child(2) { grid-column: 3 / 5; grid-row: 1; }
.bento__grid .bento__item:nth-child(3) { grid-column: 3 / 5; grid-row: 2; }
.bento__grid .bento__item:nth-child(4) { grid-column: 1; grid-row: 3; }
.bento__grid .bento__item:nth-child(5) { grid-column: 2; grid-row: 3; }
.bento__grid .bento__item:nth-child(6) { grid-column: 3; grid-row: 3; }
.bento__grid .bento__item:nth-child(7) { grid-column: 4; grid-row: 3; }

.bento__title { display: flex; flex-wrap: wrap; gap: 0 8px; font-size: 22px; font-weight: 800; line-height: 1.2; letter-spacing: -.3px; }
.bento__item--large .bento__title { font-size: 22px; flex-direction: column; gap: 2px; }
.bento__title-line--accent { color: transparent; background: var(--hero-warm); -webkit-background-clip: text; background-clip: text; }
.bento__subtitle { margin-top: 8px; font-size: 15px; color: rgba(255,255,255,.85); }
.bento__desc { margin-top: 4px; font-size: 14px; color: rgba(255,255,255,.65); }

.bento__arrow {
  position: absolute; right: 18px; bottom: 18px; width: 34px; height: 34px;
  border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.12); color: #fff; backdrop-filter: blur(4px);
  transition: background .2s, transform .2s;
}
.bento__item:hover .bento__arrow { background: rgba(255,255,255,.25); transform: scale(1.08); }
.bento__arrow svg { transform: rotate(-45deg); }

.bento__shine {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, rgba(255,255,255,.18) 0%, transparent 40%);
  opacity: .6;
}