/*
 * @Description: 子主题自定义样式 —— 全类型卡片拟态(Neumorphism)风格
 * 作用范围：所有 .posts-item 卡片（网址 / 文章 / 应用 / 书籍，default / min / max / big 均适配）
 * 默认凸起，悬停变凹陷，图标做小凹槽。仅改子主题，父主题升级不受影响。
 */

/* ===== 拟态变量：浅色 ===== */
:root {
  --neu-bg: #eef1f6;
  --neu-shadow-dark: rgba(163, 177, 198, 0.60);
  --neu-shadow-light: rgba(255, 255, 255, 0.95);
  --neu-distance: 6px;   /* 阴影偏移 */
  --neu-blur: 14px;      /* 阴影模糊 */
  --neu-radius: 16px;    /* 卡片圆角 */
  --neu-inset: 2px;      /* 图标凹槽内阴影强度 */
}

/* ===== 拟态变量：暗色 ===== */
.io-black-mode {
  --neu-bg: #26282c;
  --neu-shadow-dark: rgba(0, 0, 0, 0.55);
  --neu-shadow-light: rgba(78, 82, 88, 0.55);
}

/* ========== 通用卡片：默认凸起 ========== */
.posts-item {
  background-color: var(--neu-bg) !important;
  border-radius: var(--neu-radius);
  box-shadow:
    var(--neu-distance) var(--neu-distance) var(--neu-blur) var(--neu-shadow-dark),
    calc(-1 * var(--neu-distance)) calc(-1 * var(--neu-distance)) var(--neu-blur) var(--neu-shadow-light) !important;
  transition: box-shadow 0.28s ease, transform 0.28s ease, background-color 0.3s;
}

/* 覆盖父主题 .show-card .posts-item 的默认内阴影，避免叠加冲突 */
.show-card .posts-item {
  box-shadow:
    var(--neu-distance) var(--neu-distance) var(--neu-blur) var(--neu-shadow-dark),
    calc(-1 * var(--neu-distance)) calc(-1 * var(--neu-distance)) var(--neu-blur) var(--neu-shadow-light) !important;
}

/* ========== 悬停：凸起变凹陷（压下去） ========== */
.posts-item:hover {
  box-shadow:
    inset var(--neu-distance) var(--neu-distance) var(--neu-blur) var(--neu-shadow-dark),
    inset calc(-1 * var(--neu-distance)) calc(-1 * var(--neu-distance)) var(--neu-blur) var(--neu-shadow-light) !important;
  transform: translateY(0);
}

/* ========== 图标：小拟态凹槽（网址 / 应用 / 书籍通用） ========== */
/* 方形圆角：提升特异性(.posts-item.sites-item .item-media = 0-3-0)并加 !important，
   压过父主题 .posts-item.sites-item .item-media { border-radius: 40px } 的圆形 */
.posts-item.sites-item .item-media:where(.item-media) {
  background-color: var(--neu-bg);
  border-radius: 12px !important;
  box-shadow:
    inset var(--neu-inset) var(--neu-inset) 5px var(--neu-shadow-dark),
    inset calc(-1 * var(--neu-inset)) calc(-1 * var(--neu-inset)) 5px var(--neu-shadow-light);
}

.posts-item.sites-item .item-media:where(.item-media)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset var(--neu-inset) var(--neu-inset) 4px var(--neu-shadow-dark),
    inset calc(-1 * var(--neu-inset)) calc(-1 * var(--neu-inset)) 4px var(--neu-shadow-light);
}

/* 其余卡片(应用/书籍)图标同样方形 */
.posts-item.app-item .item-media:where(.item-media),
.posts-item.book-item .item-media:where(.item-media) {
  border-radius: 12px !important;
}

/* ========== 网址卡片：图标本体内缩露出凹槽 ========== */
.posts-item.sites-item .item-image {
  transform: scale(0.82);
}

/* 关闭父主题图标悬浮模糊背景光晕，避免与凹槽冲突 */
.posts-item.sites-item:hover .blur-img-bg {
  transform: scale(0);
}

/* ========== 文章卡片：封面大图不套凹槽，仅卡片本体浮雕 ========== */
.posts-item.post-item .item-media,
.posts-item.post-item .item-media::after {
  border-radius: var(--neu-radius);
  box-shadow: none;
}

/* ========== min 小卡：缩小阴影，避免拥挤 ========== */
.posts-item.style-sites-min,
.posts-item.style-post-min,
.posts-item.style-post-min-sm {
  --neu-distance: 4px;
  --neu-blur: 9px;
  --neu-radius: 12px;
}

/* ========== 保证卡片之间有足够间距承托阴影 ========== */
/* 必须与父主题 .posts-item 原 margin(0.5*--home-card-padding) 保持一致，
   否则列占宽超出栅格预留，每行卡片数会从 6 掉到 5 */
.posts-item {
  margin: calc(0.5 * var(--home-card-padding));
}

/* ========== 侧边栏：拟态化 ========== */
/* 侧边栏容器 */
.sidebar-tools {
  /* 留出阴影空间 */
  padding: 4px 6px;
}

/* 侧边栏小工具卡片：凸起浮雕（与主卡片一致） */
.sidebar-tools .card,
.sidebar .module-sidebar-widget,
.sidebar .widget {
  background-color: var(--neu-bg) !important;
  border-radius: var(--neu-radius) !important;
  box-shadow:
    var(--neu-distance) var(--neu-distance) var(--neu-blur) var(--neu-shadow-dark),
    calc(-1 * var(--neu-distance)) calc(-1 * var(--neu-distance)) var(--neu-blur) var(--neu-shadow-light) !important;
  border: 0 !important;
}

/* 侧边栏卡片悬停：变凹陷（与主卡片一致） */
.sidebar-tools .card:hover,
.sidebar .module-sidebar-widget:hover,
.sidebar .widget:hover {
  box-shadow:
    inset var(--neu-distance) var(--neu-distance) var(--neu-blur) var(--neu-shadow-dark),
    inset calc(-1 * var(--neu-distance)) calc(-1 * var(--neu-distance)) var(--neu-blur) var(--neu-shadow-light) !important;
}

/* 侧边栏卡片间距 */
.sidebar-tools .card,
.sidebar .module-sidebar-widget,
.sidebar .widget {
  margin-bottom: 16px;
}
.sidebar-tools .card:last-child,
.sidebar .module-sidebar-widget:last-child,
.sidebar .widget:last-child {
  margin-bottom: 0;
}

/* 标题下划线改柔和，融入拟态背景 */
.sidebar-tools .card-header::before,
.sidebar-header .card-header::before,
.module-sidebar-widget .module-header::after {
  background: var(--neu-shadow-light);
  opacity: 0.8;
}

/* 搜索框：凹陷凹槽 */
.sidebar .card .searchform input[type=text],
.sidebar-tools input[type=text],
.sidebar .widget input[type=search],
.sidebar .widget input[type=text] {
  background: var(--neu-bg) !important;
  border: 0 !important;
  box-shadow:
    inset var(--neu-inset) var(--neu-inset) 4px var(--neu-shadow-dark),
    inset calc(-1 * var(--neu-inset)) calc(-1 * var(--neu-inset)) 4px var(--neu-shadow-light) !important;
  border-radius: 10px !important;
}

/* 小工具内列表项/标签：轻凹陷或透明，去掉突兀白底 */
.sidebar .widget ul li,
.sidebar .widget li {
  background: transparent !important;
  border: 0 !important;
}

/* 侧边栏内的小型按钮/徽章 */
.sidebar .btn,
.sidebar .badge,
.sidebar-tools .btn {
  background: var(--neu-bg) !important;
  box-shadow:
    inset calc(-1 * var(--neu-inset)) calc(-1 * var(--neu-inset)) 4px var(--neu-shadow-light),
    inset var(--neu-inset) var(--neu-inset) 4px var(--neu-shadow-dark) !important;
  border: 0 !important;
}