/* QuickGrid —— 右侧四快捷入口（Figma 1888:1581，139×196，白底圆角 8）。
   2×2 排列，每项 48×66 = 圆底 40 + 间距 6 + 文字 20。
   定位：与 banner 并排，196 + 8 + 139 = 343 铺满内容宽。 */

.mzh-quick-grid {
  /* 行宽按设计稿 139 : (196+139) 分配；375 下 (343−8)×139/335 = 139 ✓
     比例固定 → 高度与 banner 严格相等（高 = 宽 × 196/139） */
  flex: 0 0 calc((100% - var(--home-layout-media-gap)) * 139 / 335);
  aspect-ratio: 139 / 196;
  min-width: 0;
  background: var(--color-bg-primary);
  border-radius: var(--quick-grid-radius);
  padding: var(--quick-grid-pad-y) var(--quick-grid-pad-x);
  display: grid;
  grid-template-columns: repeat(2, var(--quick-grid-item-w));
  grid-auto-rows: var(--quick-grid-item-h);
  column-gap: var(--quick-grid-col-gap);
  row-gap: var(--quick-grid-row-gap);
  align-content: start;
  overflow: clip;
}

.mzh-quick-grid__item {
  width: var(--quick-grid-item-w);
  height: var(--quick-grid-item-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--quick-grid-item-gap);
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
}

.mzh-quick-grid__disc {
  flex: none;
  width: var(--quick-grid-disc);
  height: var(--quick-grid-disc);
  border-radius: var(--radius-full);
  background: var(--color-bg-brand-alpha-10);
  overflow: clip;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mzh-quick-grid__icon {
  display: block;
  width: var(--quick-grid-icon);
  height: var(--quick-grid-icon);
}

.mzh-quick-grid__label {
  flex: none;
  font-size: var(--typography-caption-font-size);
  line-height: var(--typography-caption-line-height);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* 轻提示：入口对应的页面还没做时给反馈（同 TabBar 的做法） */
.mzh-quick-grid__toast {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--tab-bar-toast-offset);
  width: fit-content;
  margin: 0 auto;
  z-index: var(--tab-bar-toast-z);
  padding: var(--tab-bar-toast-pad-y) var(--tab-bar-toast-pad-x);
  border-radius: var(--tab-bar-toast-radius);
  background: var(--tab-bar-toast-bg);
  color: var(--tab-bar-toast-fg);
  font-size: var(--typography-caption-font-size);
  line-height: var(--typography-caption-line-height);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.mzh-quick-grid__toast--show {
  opacity: 1;
}