/* source/css/leetcode_cook.css */

/* --- Cook Style Design System --- */
:root {
  --apple-card-bg: rgba(255, 255, 255, 0.65);
  --apple-border: 1px solid rgba(255, 255, 255, 0.4);
  --apple-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.08);
  --apple-blur: blur(20px);
}

/* 深色模式适配 */
[data-theme="dark"] {
  --apple-card-bg: rgba(30, 30, 30, 0.6);
  --apple-border: 1px solid rgba(255, 255, 255, 0.1);
  --apple-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3);
}

.cook-card-wrapper {
  display: flex;
  justify-content: center;
  margin: 40px 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

.cook-card {
  position: relative;
  background: var(--apple-card-bg);
  backdrop-filter: var(--apple-blur); /* 核心：磨砂玻璃 */
  -webkit-backdrop-filter: var(--apple-blur);
  border: var(--apple-border);
  border-radius: 24px; /* 库克风的大圆角 */
  box-shadow: var(--apple-shadow);
  padding: 10px;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow: hidden;
  max-width: 100%;
}

/* 悬浮时的灵动效果 */
.cook-card:hover {
  transform: translateY(-5px) scale(1.01);
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.85);
}

.cook-card a {
  display: block;
  line-height: 0;
  border: none;
}

.cook-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  mix-blend-mode: multiply; /* 让白色背景透明化 */
}

[data-theme="dark"] .cook-card img {
  mix-blend-mode: normal;
  opacity: 0.9;
}

/* 装饰性标题 */
.cook-card-label {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #86868b;
  text-transform: uppercase;
  margin-bottom: 12px;
}