/* source/css/diet.css */

/* === 列表部分 === */
#diet-container {
  display: grid; 
  /* 电脑端保持原逻辑 */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px; 
  padding: 20px 0;
}

.diet-card {
  background: var(--card-bg); border-radius: 12px; overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); transition: transform 0.3s;
  border: 1px solid var(--card-border);
}
/* 手机端取消 hover 上浮效果，防止点击时闪烁 */
@media (hover: hover) {
  .diet-card:hover { transform: translateY(-5px); box-shadow: 0 8px 16px rgba(0,0,0,0.2); }
}

.diet-img-box {
  width: 100%; height: 200px; overflow: hidden; position: relative; cursor: zoom-in;
}
.diet-img-box img {
  width: 100%; height: 100%; object-fit: cover;
  margin: 0!important; pointer-events: none;
  transform-origin: center center;
}
.diet-date {
  position: absolute; top: 10px; left: 10px;
  background: rgba(0,0,0,0.6); color: #fff; padding: 4px 8px;
  border-radius: 4px; font-size: 12px; backdrop-filter: blur(4px);
}
.diet-content { padding: 15px; }
.diet-title { font-size: 1.1em; font-weight: bold; margin-bottom: 8px; color: var(--font-color); }
.diet-desc { font-size: 0.9em; opacity: 0.8; margin-bottom: 10px; line-height: 1.5; color: var(--font-color); }
.diet-rating { color: #FFD700; font-size: 0.9em; }


/* === 弹窗部分 (移动端优化版) === */
#diet-modal-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 99999; opacity: 0; visibility: hidden;
  transition: all 0.3s ease; backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  
  /* 【改动】电脑端保留内边距，手机端下面会覆盖 */
  padding: 30px; 
  cursor: zoom-out;
}
#diet-modal-overlay.active { opacity: 1; visibility: visible; }

#diet-modal-content {
  width: auto; height: auto;
  max-width: 100%; max-height: 100%;
  box-shadow: none; border-radius: 0; 
  background: transparent;
  transform: scale(0.95); transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative; display: flex; 
  border: none;
  pointer-events: none;
}
#diet-modal-overlay.active #diet-modal-content { transform: scale(1); }

.modal-img-side {
  width: 100%; height: 100%; 
  /* 【改动】电脑端最小尺寸，手机端下面会覆盖 */
  min-width: 300px; min-height: 300px;
  position: relative; overflow: visible;
  background: transparent;
  --bg-image-url: none;
  display: flex; align-items: center; justify-content: center;
  pointer-events: auto;
  cursor: zoom-out;
}

.modal-img-side::before {
  content: ''; position: absolute;
  top: -100%; left: -100%; width: 300%; height: 300%;
  background-image: var(--bg-image-url);
  background-size: cover; background-position: center;
  filter: blur(50px) brightness(0.4) saturate(1.2);
  z-index: 0;
}

/* 清晰前景图 */
.modal-img-side img {
  position: relative; z-index: 2;
  max-width: 95vw; max-height: 90vh; 
  width: auto; height: auto;
  object-fit: contain;
  transform-origin: center center;
  border-radius: 16px; /* 电脑端圆角 */
  box-shadow: none !important;
  transition: none !important; 
  cursor: zoom-out;
}


/* =========================================
   📱 移动端专属优化 (新增部分)
========================================= */
@media screen and (max-width: 768px) {
  /* 1. 列表页：更紧凑 */
  #diet-container {
    gap: 15px; /* 间距缩小 */
    padding: 10px 5px; /* 两侧留一点点空隙，防止贴边 */
  }
  
  /* 2. 弹窗：接近全屏 */
  #diet-modal-overlay {
    padding: 0; /* 手机上不要四周的黑边，直接全屏 */
  }
  
  .modal-img-side {
    min-width: auto; /* 取消最小宽度限制，防止小屏手机撑破 */
    min-height: auto;
  }
  
  .modal-img-side img {
    max-width: 100vw; /* 宽度撑满屏幕 */
    max-height: 85vh; /* 高度留一点余地（避免被浏览器地址栏遮挡） */
    border-radius: 8px; /* 手机上圆角小一点更精致 */
  }
}