/* ==========================================================================
   YOOAN · Product Card（缺口版）
   放置位置：assets/css/product-card.css，在 product-experience.css 之后加载
   依赖：type-tokens.css 里的令牌（每个 var() 都写了兜底值，令牌名不一致也不会崩）
   纯 CSS，无 JS 库
   ========================================================================== */

.ypc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;            /* 同一行卡片等高，底部关键数字对齐 */
}
@media (max-width: 1100px) { .ypc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .ypc-grid { grid-template-columns: 1fr; gap: 20px; } }

/* ---------- 1. 参数（改这里就能整体调手感） ---------- */
.ypc {
  --ypc-radius: 28px;              /* 卡片外圆角 */
  --ypc-pad: 12px;                 /* 图片四周白边 = "窗框"宽度 */
  --ypc-img-radius: calc(var(--ypc-radius) - var(--ypc-pad));  /* 内圆角 = 外圆角 − 内边距 */
  --ypc-btn: 52px;                 /* 缺口里的圆按钮直径 */
  --ypc-gap: 8px;                  /* 按钮与卡片之间的缝 */
  --ypc-notch: calc(var(--ypc-btn) + var(--ypc-gap));   /* 缺口总尺寸 60px */
  --ypc-fillet: 16px;              /* 缺口三个转角的圆角 */
  --ypc-ease: cubic-bezier(.4, 0, .2, 1);   /* 与 CTA 系统同一条曲线 */

  --ypc-ink: #0E1733;
  --ypc-muted: rgba(14, 23, 51, .62);
  --ypc-line: rgba(14, 23, 51, .10);
  --ypc-card: #FFFFFF;
  --ypc-cream: #FBF7E9;

  position: relative;
  display: block;
  height: 100%;
  color: var(--ypc-ink);
  text-decoration: none;
  border-radius: var(--ypc-radius);
  /* 阴影放在"外层"，这样它会沿着缺口的形状走（内层被 mask 挖掉的部分也没有阴影） */
  filter: drop-shadow(0 8px 12px rgba(14, 23, 51, .06));
  transition: transform 220ms var(--ypc-ease), filter 500ms var(--ypc-ease);
}

/* ---------- 2. 卡片形状：白底 + 右下角挖缺口 ---------- */
.ypc__shape {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--ypc-card);
  border-radius: var(--ypc-radius);
  overflow: hidden;

  /* 缺口原理：最上层是一整块"实心"，下面 5 层拼出缺口形状并合并(add)，
     最后用 subtract 从实心里减掉缺口。
     5 层 = 两个矩形 + 缺口内角的四分之一圆 + 两个外凸圆角的"补丁" */
  --n: var(--ypc-notch);
  --r: var(--ypc-fillet);
  -webkit-mask-image:
    linear-gradient(#000 0 0),
    linear-gradient(#000 0 0),
    linear-gradient(#000 0 0),
    radial-gradient(circle at 100% 100%, #000 calc(var(--r) - .5px), transparent var(--r)),
    radial-gradient(circle at 0 0, transparent calc(var(--r) - .5px), #000 var(--r)),
    radial-gradient(circle at 0 0, transparent calc(var(--r) - .5px), #000 var(--r));
          mask-image:
    linear-gradient(#000 0 0),
    linear-gradient(#000 0 0),
    linear-gradient(#000 0 0),
    radial-gradient(circle at 100% 100%, #000 calc(var(--r) - .5px), transparent var(--r)),
    radial-gradient(circle at 0 0, transparent calc(var(--r) - .5px), #000 var(--r)),
    radial-gradient(circle at 0 0, transparent calc(var(--r) - .5px), #000 var(--r));
  -webkit-mask-size:
    100% 100%,
    calc(var(--n) - var(--r)) var(--n),
    var(--n) calc(var(--n) - var(--r)),
    var(--r) var(--r),
    var(--r) var(--r),
    var(--r) var(--r);
          mask-size:
    100% 100%,
    calc(var(--n) - var(--r)) var(--n),
    var(--n) calc(var(--n) - var(--r)),
    var(--r) var(--r),
    var(--r) var(--r),
    var(--r) var(--r);
  -webkit-mask-position:
    0 0,
    right 0 bottom 0,
    right 0 bottom 0,
    right calc(var(--n) - var(--r)) bottom calc(var(--n) - var(--r)),
    right var(--n) bottom 0,
    right 0 bottom var(--n);
          mask-position:
    0 0,
    right 0 bottom 0,
    right 0 bottom 0,
    right calc(var(--n) - var(--r)) bottom calc(var(--n) - var(--r)),
    right var(--n) bottom 0,
    right 0 bottom var(--n);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-composite: source-out, source-over, source-over, source-over, source-over, source-over;
          mask-composite: subtract, add, add, add, add, add;
}

/* ---------- 3. 图片"窗口" ---------- */
.ypc__media {
  position: relative;
  margin: var(--ypc-pad) var(--ypc-pad) 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--ypc-img-radius);
  overflow: hidden;
  background: #E9E4D6;             /* 图片加载前的占位色，避免白块闪烁 */
  isolation: isolate;              /* Safari 圆角裁切 + 缩放时不漏角 */
}
.ypc__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--ypc-focus, 50% 50%);  /* 单张图可在 style 里改焦点 */
  transition: transform 700ms var(--ypc-ease), opacity 500ms var(--ypc-ease);
}
/* 截面实拍图：默认隐藏，悬停淡入（只有传了 section_image 才会输出这张图） */
.ypc__media .ypc__alt { opacity: 0; background: #EEF0F2; }

/* ---------- 4. 文字区 ---------- */
.ypc__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px 24px 22px;
}
.ypc__opening {
  margin: 0 0 8px;
  font-size: var(--type-label, 12px);
  line-height: 1.5;
  color: var(--ypc-muted);
}
.ypc__title {
  margin: 0;
  font-size: var(--type-h3, 22px);
  font-weight: var(--fw-heading, 470);
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ypc__model {
  margin: 6px 0 0;
  font-family: var(--font-mono, "Geist Mono", ui-monospace, monospace);
  font-size: var(--type-label, 12px);
  letter-spacing: .02em;
  color: var(--ypc-muted);
}
.ypc__summary {
  margin: 12px 0 0;
  font-size: var(--type-dense, 15px);
  line-height: 1.5;
  color: var(--ypc-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 关键数字行：margin-top:auto 把它推到卡片底部；右侧留出缺口位置 */
.ypc__key {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: auto 0 0;
  padding: 16px var(--ypc-notch) 0 0;
  border-top: 1px solid var(--ypc-line);
  min-height: calc(var(--ypc-notch) - 22px);
}
.ypc__text { padding-bottom: 18px; }   /* 文字与关键数字行之间的呼吸空间 */

.ypc__key-value {
  font-family: var(--font-mono, "Geist Mono", ui-monospace, monospace);
  font-size: var(--type-numeral, 19px);
  font-weight: var(--fw-strong, 600);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ypc__key-label {
  font-size: var(--type-label, 12px);
  color: var(--ypc-muted);
}
.ypc__key--empty .ypc__key-label { font-size: var(--type-dense, 15px); color: var(--ypc-ink); }

/* ---------- 5. 缺口里的圆按钮（纯装饰，整张卡片本身就是链接） ---------- */
.ypc__btn {
  position: absolute;
  right: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  width: var(--ypc-btn);
  height: var(--ypc-btn);
  border-radius: 50%;
  background: var(--ypc-ink);
  color: var(--ypc-cream);
  font-size: 20px;
  line-height: 1;
  transition: background-color 500ms var(--ypc-ease);
}
.ypc__btn span {
  display: block;
  transition: transform 500ms var(--ypc-ease);   /* ↗\FE0E 转 45° 变成 →，与 CTA 系统一致 */
}

/* ---------- 6. 悬停 / 键盘焦点（只在有鼠标的设备上触发悬停） ---------- */
@media (hover: hover) and (pointer: fine) {
  .ypc:hover { transform: translateY(-4px); filter: drop-shadow(0 16px 20px rgba(14, 23, 51, .11)); }
  .ypc:hover .ypc__media img { transform: scale(1.04); }
  .ypc:hover .ypc__media.has-alt .ypc__main { opacity: 0; }
  .ypc:hover .ypc__media.has-alt .ypc__alt  { opacity: 1; }
  .ypc:hover .ypc__btn span { transform: rotate(45deg); }
}
.ypc:has(.ypc__link:focus-visible) .ypc__shape { box-shadow: inset 0 0 0 2px var(--ypc-ink); }
.ypc:has(.ypc__link:focus-visible) .ypc__btn { background: #F5A20E; color: var(--ypc-ink); }
.ypc:has(.ypc__link:focus-visible) .ypc__btn span { transform: rotate(45deg); }

@media (prefers-reduced-motion: reduce) {
  .ypc, .ypc *, .ypc *::before { transition-duration: 1ms !important; }
  .ypc:hover { transform: none; }
}

/* 手机：卡片略收紧 */
@media (max-width: 640px) {
  .ypc { --ypc-radius: 24px; --ypc-pad: 10px; --ypc-btn: 48px; }
  .ypc__body { padding: 18px 20px 20px; }
}

/* ---------- 7. 2026-09-26 落地到 Products 页筛选区的补充 ---------- */

/* 筛选/搜索用 hidden 属性隐藏卡片；.ypc 写了 display:block 会把它顶掉，必须补这一条 */
.ypc[hidden] { display: none !important; }

/* 只显示「图 + 名称」：名称放在缺口左侧，与圆按钮同一行、垂直居中 */
.ypc--name-only .ypc__body {
  flex: 1;
  justify-content: center;
  min-height: calc(var(--ypc-notch) + 14px);
  padding: 14px calc(var(--ypc-notch) + 6px) 14px 22px;
}
.ypc--name-only .ypc__text { padding-bottom: 0; }
.ypc--name-only .ypc__title {
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.28;
  text-wrap: pretty;
}
/* 放进现有筛选网格：沿用 .yp-product-grid 的列数，只统一间距 */
.yp-catalog .yp-product-grid { gap: 24px; align-items: stretch; }
@media (max-width: 640px) { .yp-catalog .yp-product-grid { gap: 20px; } }

/* 整卡点击覆盖层（外层是 article，链接铺满整张卡片，含缺口里的圆按钮） */
.ypc__link { position: absolute; inset: 0; z-index: 2; border-radius: var(--ypc-radius); }
.ypc__link:focus-visible { outline: none; }