/* ===== 首页栏目栅格：每行栏目数可后台配置（PC / 移动端独立） =====
   PHP 注入以下 CSS 变量（见 index.php 与 admin/links.php）：
     --cols-pc / --cols-mobile    每行栏目数
     --gap-pc  / --gap-mobile     栅格间距
     --fs-pc   / --fs-mobile      栏目文字字号
     --img-pc  / --img-mobile     图标/图片边长上限
     --pad-pc  / --pad-mobile     单元格纵向内边距
     --padx-pc / --padx-mobile    单元格横向内边距
   未注入时使用回退默认值（PC 5 列 / 移动 3 列）。
   说明：repeat(var(--cols), minmax(0, 1fr)) —— minmax(0,…) 保证栏目被内容撑破时
   也不会溢出容器，列宽由 fr 均分剩余空间，故列数增加时各格等比缩小且始终铺满整行。 */

.grid {
  --cols:    var(--cols-mobile, 3);
  --gap:     var(--gap-mobile, 10px);
  --fs:      var(--fs-mobile, 13px);
  --img-max: var(--img-mobile, 54px);
  --pad:     var(--pad-mobile, 14px);
  --padx:    var(--padx-mobile, 6px);

  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--gap);
}

/* PC 端：≥768px 切换到 PC 配置 */
@media (min-width: 768px) {
  .grid {
    --cols:    var(--cols-pc, 5);
    --gap:     var(--gap-pc, 18px);
    --fs:      var(--fs-pc, 14px);
    --img-max: var(--img-pc, 64px);
    --pad:     var(--pad-pc, 16px);
    --padx:    var(--padx-pc, 12px);
  }
}

/* 后台预览：脱离真实视口宽度，按所选端强制套用对应配置
   （选择器权重高于上面的 .grid，故可覆盖媒体查询结果） */
.lp-pc .grid {
  --cols:    var(--cols-pc, 5);
  --gap:     var(--gap-pc, 18px);
  --fs:      var(--fs-pc, 14px);
  --img-max: var(--img-pc, 64px);
  --pad:     var(--pad-pc, 16px);
  --padx:    var(--padx-pc, 12px);
}
.lp-mb .grid {
  --cols:    var(--cols-mobile, 3);
  --gap:     var(--gap-mobile, 10px);
  --fs:      var(--fs-mobile, 13px);
  --img-max: var(--img-mobile, 54px);
  --pad:     var(--pad-mobile, 14px);
  --padx:    var(--padx-mobile, 6px);
}

.cell {
  min-width: 0; /* 关键：允许栅格项收缩，避免长内容把行撑破 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 14px;
  padding: var(--pad) var(--padx);
  box-shadow: 0 4px 16px rgba(31, 45, 61, .06);
  transition: transform .15s ease, box-shadow .15s ease;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.cell:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(47, 111, 237, .18);
}

/* 图片：宽度取「格宽百分比」与「上限」的较小值 + 1:1 比例
   => 列数增加导致格宽变小时图片等比缩小；object-fit:cover 保证不变形、不裁空 */
.cell-img {
  width: min(56%, var(--img-max));
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #4a7bf7, #6f5bf7);
  margin-bottom: 8px;
  overflow: hidden;
  flex: none;
}
.placeholder-img {
  background: #eef1f6;
  color: #b5bcc9;
  border: 2px dashed #cfd6e2;
}

/* 文字：字号随列数由 PHP 计算注入；自动换行、长词断行，保证不截断不溢出 */
.cell-text {
  font-size: var(--fs);
  line-height: 1.35;
  color: #2b3a4d;
  text-align: center;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.cell.placeholder {
  cursor: default;
  background: #fbfcfe;
}
.cell.placeholder:hover { transform: none; box-shadow: 0 4px 16px rgba(31, 45, 61, .06); }
.cell.placeholder .cell-text { color: #aab2c0; }