/* 只修改字体为 Söhne */
@import url("https://fonts.googleapis.com/css2?family=Sohne:wght@300;400;500&display=swap");

/* 全局样式 */

body {
  box-sizing: border-box;
  padding: 0;
  margin: 0 auto;
  font-family: "Söhne", sans-serif !important; /* 替换为 Söhne 字体 */
  background-color: #000;
  color: #fff;
  padding: 60px 20px 20px 20px; /* 增加顶部留白 */
}

/* 容器 */
.container {
  max-width: 700px;
  max-height: 500px;
  margin: 0 auto;
  padding-bottom: 60px !important; /* 添加底部空间 */
}

/* 头部 */
.header {
  text-align: left; /* 左对齐 */
  margin-bottom: 60px; /* 增加下方留白 */
}

.header h1 {
  font-size: 3.5em; /* 放大标题 */
  color: #fff;
  position: relative;
  display: inline-block;
  margin-left: 10px; /* 向左移动 */
}

/* 文章列表 */
.articles {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding-bottom: 60px; /* 添加底部空间 */
}

/* 单个文章 */
.article {
  display: flex;
  flex-direction: row;
  background: #1c1c1c;
  border-radius: 5px; /* 减小边角弧度 */
  overflow: hidden;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  max-height: 741.65px; /* 调整高度限制 */
  cursor: pointer; /* 增加指针效果，提示可点击 */
}

.article:hover {
  transform: scale(1.025); /* 整个长方形胶囊放大 */
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.5); /* 增强阴影效果 */
}

/* 分割比例：1 : 3.236 */
.text-section {
  flex: 1;
  padding: 20px;
  background: #fff; /* 背景白色 */
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直居中 */
  position: relative;
}

.text-section h2 {
  font-size: 1.5em;
  margin-bottom: 10px;
  color: #000; /* 文字黑色 */
}

.text-section h3 {
  font-size: 1em;
  color: #333;
}

/* 图片部分 */
.image-section {
  flex: 3.236;
  position: relative;
}

.image-section img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-top-right-radius: 5px; /* 与容器边角保持一致 */
  border-bottom-right-radius: 5px;
  transition: transform 0.3s ease;
}

.article-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* 移除之前的图片悬停放大效果 */
/* .article:hover .image-section img {
  transform: scale(1.05);
} */

/* 响应式设计 */
@media (max-width: 1024px) {
  .container {
    width: 95%;
  }
}

@media (max-width: 768px) {
  .article {
    flex-direction: column;
    max-height: none; /* 移除高度限制 */
    height: auto;
  }

  .image-section img {
    border-top-right-radius: 0px !important; /* 移除右上角的圆角 */
    flex: none;
    height: 118.66px; /* 调整图片高度 */
  }
}

@media (max-width: 480px) {
  .header h1 {
    font-size: 2.5em;
    margin-left: 8px;
  }

  .text-section h2 {
    font-size: 1.2em;
  }

  .text-section h3 {
    font-size: 0.9em;
  }
  .image-section img {
    border-top-right-radius: 0px !important; /* 移除右上角的圆角 */
  }
}