/* 桌面小组件外观。玻璃材质复用 home.css 的选择器组（.home-widget-body 已并进去）。 */

/*
 * 组件不铺满整个格子，而是对齐「图标的视觉外框」：
 *   高 = 图标块高 * 行数 + 行距 * (行数 - 1)
 *   左右各内缩一个 --icon-inset-x（图标底在列内居中留出的空白）
 * 这样 2 行组件的上下缘正好等于两个上下相邻图标的上下缘。
 * --icon-block-h / --icon-inset-x 由 homeMeasureMetrics() 实测后写在 #desktop-strip 上，
 * 不能写死：列宽随屏幕变，写死会在小屏上错位。
 */
.home-widget {
  align-self: start;
  margin-left: var(--icon-inset-x, 0px);
  margin-right: var(--icon-inset-x, 0px);
  height: calc(
    var(--icon-block-h, 87px) * var(--w-rows, 1) +
    var(--desktop-row-gap, 4px) * (var(--w-rows, 1) - 1)
  );
  min-width: 0;
  cursor: pointer;
}

.home-widget-body {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px) saturate(180%) brightness(1.05);
  -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(1.05);
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.035);
  color: var(--c-title);
}

/* ===== 拍立得 2x2 ===== */
/*
 * 这一层是把 .home-widget-body 的玻璃底整个撤掉：背景、模糊、投影、
 * 以及 home.css 里那两个画玻璃描边的伪元素都要关，纸片才是直接贴在桌面上的。
 */
.home-widget-body.is-bare {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}
.home-widget-body.is-bare::before,
.home-widget-body.is-bare::after {
  content: none;
}

.wg-pola {
  width: 100%;
  height: 100%;
  padding: 15px 0 5px;           /* 上方留给别针探头 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 相纸比例锁在 aspect-ratio 上：格子高度随机型变，用百分比会把相纸拉变形 */
.wg-pola-stack {
  position: relative;
  height: 100%;
  max-width: 84%;
  aspect-ratio: 118 / 133;
}

.wg-pola-back,
.wg-pola-card {
  position: absolute;
  inset: 0;
  background: #fff;
  border-radius: 1px;
}
/* 后面那张只露边，转得比前面多，四角各探出一点 */
.wg-pola-back {
  transform: rotate(3.5deg);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
}
.wg-pola-card {
  transform: rotate(-1.8deg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  /* 下边框比其他三边宽得多，这是拍立得的关键比例 */
  padding: 5.5% 5.5% 16%;
  display: flex;
}
.wg-pola-photo {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.06);
}
.wg-pola-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
}

.wg-pola-clip {
  position: absolute;
  z-index: 2;
  top: -6%;
  left: 50%;
  width: 17%;
  transform: translateX(-50%) rotate(-1.8deg);
  color: #c3c3d0;
}

/* ===== 日记卡片 2x4 ===== */
/* 不额外画底：直接透出 .home-widget-body 的那层玻璃，和时钟组件一致 */
.wg-diary {
  width: 100%;
  height: 100%;
  padding: 12px 16px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wg-diary-top {
  width: 100%;
  flex-shrink: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.wg-diary-left {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

/* 粗斜体衬线：Georgia 在 iOS / macOS 上都有，是这套数字最接近的现成字体 */
.wg-diary-time,
.wg-diary-date {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 25px;
  line-height: 1;
  letter-spacing: 0.3px;
  color: var(--c-text);
}
.wg-diary-sec {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 13px;
  line-height: 1;
  color: var(--c-sub, rgba(0, 0, 0, 0.45));
}

/*
 * 白圈头像，做法同通讯录页的 .ct-hero.is-side .ct-hero-avatar：
 * content-box + padding 撑出白环，圈的粗细加在头像本体之外，本体始终是正圆。
 */
.wg-diary-avatar {
  flex: 1 1 auto;
  min-height: 0;
  aspect-ratio: 1 / 1;
  box-sizing: content-box;
  margin: 7px 0 6px;
  padding: 3px;
  border: 1px solid var(--c-border-m);
  border-radius: 50%;
  background: var(--c-bg);
}
.wg-diary-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
}

.wg-diary-title {
  flex-shrink: 0;
  max-width: 100%;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--c-text);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wg-diary-handle {
  flex-shrink: 0;
  max-width: 100%;
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.2;
  color: var(--c-sub, rgba(0, 0, 0, 0.45));
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}