/*************************************************************************
 * Your custom CSS file
 *************************************************************************/

.custom-dropdown {
  width: 240px;
}

.custom-textbox {
  width: 240px;
}

#dialog-1,
#dialog-2,
#dialog-3,
#dialog-4,
#share-dialog {
  display: none;
}

#share-url {
  width: 100%;
  -webkit-touch-callout: default !important;
  -webkit-user-select: text !important;
  -khtml-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}

#share-url-copy-prompt {
  display: none;
  color: #007bff;
}

.custom-list > p {
  margin: 0 0; /* 或根据需要调整 */
  margin-top: 0;
  padding-left: 1em;
  /* 如果你需要保持段落间的样式一致 */
}

/* 改善图片显示效果的样式 */
.project-image-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: 10px;
}

.project-image {
  max-width: 100%;
  max-height: 300px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-image:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* 优化长方形图片的显示 */
.landscape-image {
  max-width: 450px;
  max-height: 250px;
}

/* 响应式改进 */
@media screen and (max-width: 768px) {
  .project-image-container {
    min-height: 150px;
    padding: 8px;
  }
  
  .project-image {
    max-height: 200px;
  }
  
  .landscape-image {
    max-width: 100%;
    max-height: 180px;
  }
}

/* 为图片添加加载动画 */
.image-loading {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* 备选方案：固定宽高比的图片容器 */
.aspect-ratio-container {
  position: relative;
  width: 100%;
  max-width: 450px;
  margin: 15px auto;
}

.aspect-ratio-container::before {
  content: "";
  display: block;
  padding-top: 56.25%; /* 16:9 宽高比，您可以根据图片调整 */
}

.aspect-ratio-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 图片懒加载效果 */
.lazy-image {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.lazy-image.loaded {
  opacity: 1;
}

/* 图片居中显示的额外选项 */
.center-image-layout {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.center-image-layout .project-image {
  max-width: 400px;
  max-height: 250px;
}