/* layout_technology.css
   Styles specific to the Technology page
   Author: Yu Liu
*/

body {
    font-family: 'Roboto', sans-serif;
    background-color: #ffffff;
    margin: 0;
  }
  
  html, body {
    overflow-x: hidden;
    overflow-y: scroll; /* 防止滚动条影响布局跳动 */
  }
  
  .container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    background-color: #ffffff;
  }
  
  .page-section {
    padding: 2rem 2rem;
  }
  
  .page-title {
    font-size: 2rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 1rem;
  }
  
  #about .column p {
    color: #333 !important;
  }

  .intro-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #333333 !important;
  }
  
  .thumbnail.technology {
    background-color: #dfdfdf;
    border-top: 4px solid #b0d4ff;
    border-bottom: 4px solid #90b0e0;
  }
  
  .thumbnail.technology:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  }
  
  /* Technology 卡片分色标识 */
.color-bar.guidance {
  background-color: #08f084;
}

.color-bar.feedback {
  background-color: #1529db;
}

.color-bar.input {
  background-color: #df2121;
}

.thumbnail.technology.guidance {
  border-top: 4px solid #f3f3f3;
  border-bottom: 4px solid #a5a5a5;
}

.thumbnail.technology.indicator {
  border-top: 4px solid #f3f3f3;
  border-bottom: 4px solid #a5a5a5;
}

.thumbnail.technology.presenter {
  border-top: 4px solid #f3f3f3;
  border-bottom: 4px solid #a5a5a5;
}
.pattern-subnav {
  background: none;
  border: none;
  padding: 0;
}

.pattern-subnav .dropdown-menu {
  list-style: none;
  display: flex;
  gap: 2rem;
  margin: 0;
  padding: 0;
}

.pattern-subnav .dropdown {
  position: relative;
}

.pattern-subnav .dropdown span {
  cursor: pointer;
  font-weight: bold;
  color: #007bff;
}

.pattern-subnav .dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  border: 1px solid #ddd;
  padding: 0.5rem 1rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.pattern-subnav .dropdown-content li {
  padding: 0.3rem 0;
}

.pattern-subnav .dropdown-content li a {
  text-decoration: none;
  color: #007bff;
  font-size: 0.95rem;
}

.pattern-subnav .dropdown:hover .dropdown-content {
  display: block;
}

.image-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 比例（9/16 = 0.5625） */
  overflow: hidden;
  border-radius: 12px;
  margin-bottom: 1rem;
}

.tech-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

a.git-button {
  background-color: #007bff;
  color: white;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  border-radius: 6px;
  text-decoration: none;
  display: inline-block;
  margin-top: 1rem;
  transition: background-color 0.3s ease;
}

a.git-button:hover {
  background-color: #0056b3;
}


@media screen and (max-width: 800px) {
  /* 布局方向调整 */
  .intro,
  .pattern-page-container {
    flex-direction: column;
    gap: 1rem;
  }

  /* 容器宽度适配小屏 */
  .container {
    width: 95%;
  }

  /* 侧边栏样式适配 */
  .pattern-sidebar {
    width: 100%;
    position: static;
    border: none;
    border-bottom: 1px solid #ccc;
    border-radius: 0;
    background-color: #fafafa;
  }

  .pattern-main-content {
    max-width: 100%;
  }

  /* 子导航样式优化 */
  .pattern-subnav h3 {
    margin-top: 1rem;
  }

  .pattern-subnav ul {
    padding-left: 0.5rem;
  }

  /* 文本排版适配 */
  .page-section {
    padding: 1rem 1rem;
  }

  .intro-text {
    font-size: 1rem;
    line-height: 1.6;
  }

  /* 子导航下拉菜单支持点击展开 */
  .pattern-subnav .dropdown:focus-within .dropdown-content {
    display: block;
  }

  /* 可选：缩略图在移动端仍保留轻微交互视觉反馈 */
  .thumbnail.technology:active {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
  }
}