@charset "UTF-8";
body {
  background: #FDF9EE;
}

.search-container {
  position: absolute;
  right: 10px;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .search-form-container {
    padding: 0 20px;
  }
}
@media (max-width: 768px) {
  .search-form-container {
    padding: 0 20px;
  }
}
.search-form-container > div {
  max-width: 996px;
  margin: 0 auto;
  padding-top: 100px;
}
@media (max-width: 768px) {
  .search-form-container > div {
    padding-top: 30px;
  }
}
.search-form-container > div h1 {
  color: var(--gray-2, #565656);
  text-align: center;
  font-feature-settings: "liga" off, "clig" off;
  /* Headline/h1 */
  font-family: "Noto Sans TC";
  font-size: 48px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 72px */
  letter-spacing: 3px;
  margin-bottom: 24px;
}
@media (min-width: 768px) and (max-width: 1024px) {
  .search-form-container > div h1 {
    font-size: 30px;
  }
}
@media (max-width: 768px) {
  .search-form-container > div h1 {
    font-size: 30px;
  }
}
.search-form-container > div .input-form {
  border-radius: 100px;
  border: 1px solid var(--Secondary-1, #F9BD67);
  padding: 12px 24px;
}
.search-form-container > div .input-form .screen-text {
  color: var(--gray-2, #565656);
  /* headline/4 */
  font-family: "Noto Sans TC";
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%; /* 24px */
  letter-spacing: 1px;
  border-right: 1px solid #F9BD67;
  padding-right: 12px;
  width: 60px;
}
@media (max-width: 768px) {
  .search-form-container > div .input-form .screen-text {
    display: none;
  }
}
.search-form-container > div .input-form .input-group {
  padding-left: 12px;
}
.search-form-container > div .input-form .input-group input {
  flex: 1;
  background: transparent;
  outline: none;
  border: none;
  color: var(--gray-2, #565656);
  /* body/2 */
  font-family: "Noto Sans TC";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 24px */
  letter-spacing: 0.48px;
}
@media (max-width: 768px) {
  .search-form-container > div .input-form .input-group input {
    width: 100%;
    padding-right: 100px;
  }
}
.search-form-container > div .input-form .input-group button {
  background: transparent;
  outline: none;
  border: none;
}

.grid-results > div {
  width: 100%;
  max-width: 1200px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  row-gap: 50px;
  margin: 0 auto;
  padding: 100px 0 180px 0;
}
@media (min-width: 768px) and (max-width: 1024px) {
  .grid-results > div {
    grid-template-columns: repeat(3, 1fr);
    padding: 40px 20px 0px 20px;
    gap: 20px;
  }
}
@media (max-width: 768px) {
  .grid-results > div {
    grid-template-columns: repeat(2, 1fr);
    padding: 40px 20px 60px 20px;
    gap: 20px;
  }
}
.grid-results .result-item {
  overflow: hidden;
  transition: transform 0.2s ease;
}
.grid-results .result-item .the_post_thumbnail_container {
  overflow: hidden;
  border-radius: 30px;
}
.grid-results .result-item .the_post_thumbnail_container img {
  width: 100%;
  height: auto;
  border-radius: 30px;
  transition: transform 0.2s ease;
  object-fit: cover;
  aspect-ratio: 282/188;
}
.grid-results .result-item .the_post_thumbnail_container img:hover {
  transform: scale(1.05);
}
.grid-results .result-item .post-meta {
  margin-top: 24px;
}
.grid-results .result-item .post-meta a {
  color: var(--Secondary-1, #F9BD67);
  /* btn */
  font-family: "Noto Sans TC";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%; /* 16px */
  letter-spacing: 0.16px;
  padding: 12px 28px;
  border-radius: 100px;
  border: 1px solid var(--Secondary-1, #F9BD67);
}
@media (max-width: 768px) {
  .grid-results .result-item .post-meta a {
    padding: 10px;
    font-size: 14px;
  }
}
.grid-results .result-item .title {
  margin: 12px 0;
  color: var(--gray-1, #1C1C1C);
  /* headline/4 */
  font-family: "Noto Sans TC";
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%; /* 24px */
  letter-spacing: 1px;
}
.grid-results .result-item .title a {
  color: var(--gray-1, #1C1C1C);
  /* headline/4 */
  font-family: "Noto Sans TC";
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%; /* 24px */
  letter-spacing: 1px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 👇 關鍵修復屬性 👇 */
  word-break: break-all; /* 強制斷字，避免符號卡住 */
  overflow-wrap: break-word; /* 允許長詞斷行 */
  line-height: 1.4; /* 固定行高，避免計算誤差 */
  height: 2.8em; /* 2 行 × 1.4 = 確保容器高度精準 */
  letter-spacing: 0.01px; /* 👈 微調字距，觸發正確斷行（關鍵！）*/
  white-space: normal; /* 確保允許換行 */
}
.grid-results .result-item .excerpt {
  color: var(--gray-3, #7A7A7A);
  /* body/2 */
  font-family: "Noto Sans TC";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 24px */
  letter-spacing: 0.48px;
}

.pagination {
  padding-bottom: 150px;
}
@media (max-width: 768px) {
  .pagination {
    padding-bottom: 60px;
  }
}
.pagination ul {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 12px;
}
.pagination ul li a {
  display: flex;
  width: 50px;
  height: 50px;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--gray-3, #7A7A7A);
  text-align: center;
  /* btn */
  font-family: "Noto Sans TC";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%; /* 16px */
  letter-spacing: 0.16px;
}
.pagination ul li a:hover {
  color: var(--Secondary-1, #F9BD67);
  text-align: center;
  /* btn */
  font-family: "Noto Sans TC";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%; /* 16px */
  letter-spacing: 0.16px;
  text-decoration: none;
  background: #fff;
  border-radius: 999px;
  background: var(--gray-8, #FFF);
  /* shadow/400 */
  box-shadow: 0 6px 12px -6px rgba(24, 39, 75, 0.12), 0 8px 24px -4px rgba(24, 39, 75, 0.08);
  background: #fff;
}
.pagination ul li span.page-numbers.current {
  display: flex;
  width: 50px;
  height: 50px;
  align-items: center;
  justify-content: center;
  color: var(--Secondary-1, #F9BD67);
  text-align: center;
  /* btn */
  font-family: "Noto Sans TC";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%; /* 16px */
  letter-spacing: 0.16px;
  text-decoration: none;
  background: #fff;
  border-radius: 999px;
  background: var(--gray-8, #FFF);
  /* shadow/400 */
  box-shadow: 0 6px 12px -6px rgba(24, 39, 75, 0.12), 0 8px 24px -4px rgba(24, 39, 75, 0.08);
}

.search-page > div {
  padding-bottom: 200px;
}
@media (max-width: 768px) {
  .search-page > div {
    padding-bottom: 60px;
  }
}
.search-page > div .search-tag-container {
  padding-top: 30px;
}
.search-page > div .search-tag-container ul li a {
  /* body/2 */
  font-family: "Noto Sans TC";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 24px */
  letter-spacing: 0.48px;
}