/**
 * 文章分類頁面組件樣式
 * @package mytheme
 */
@font-face {
  font-family: "KGPrimaryWhimsy";
  src: url("../../fonts/KGPrimaryWhimsy.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
/* 分類頁面區塊 */
.category-page {
  padding: 52px 0 120px;
  scroll-margin-top: 80px;
}

.category-page-title-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  text-align: left;
  margin-bottom: 28px;
}
.category-page-head {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.category-page-tagline {
  position: relative;
  font-family: "KGPrimaryWhimsy";
  font-size: 16px;
  color: #ffac27;
}
.category-page-title {
  align-self: stretch;
  height: 35px;
  font-size: 24px;
  font-weight: 500;
  position: relative;
  font-family: Inter;
  color: #000;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.category-page-dec {
  align-self: stretch;
  height: 3px;
  position: relative;
  background-color: #53bf6f;
}
.category-page-des {
  align-self: stretch;
  height: 24px;
  position: relative;
  line-height: 56.59px;
  font-family: Inter;
  color: #000;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* 文章列表 3x3 網格 */
.category-posts-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

/* 文章卡片 */
.category-post {
  width: 100%;
  max-width: 364px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  font-family: Inter;
}
.category-post-image {
  align-self: stretch;
  position: relative;
  background-color: #d9d9d9;
  display: block;
  overflow: hidden;
  text-decoration: none;
  transition: filter 0.3s ease;
}
.category-post-image:hover {
  filter: brightness(1.1);
}
.category-post-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.category-post-inner-wrap {
  box-shadow: 0px 11.300000190734863px 11.3px rgba(0, 0, 0, 0.25);
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  padding: 25px 23px;
  gap: 32px;
  flex: 1;
}
.category-post-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
}
.category-post-head {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.category-post-title {
  position: relative;
  font-size: var(--font-size-xl);
  line-height: 1.4;
  display: flex;
  align-items: center;
  font-weight: 700;
  text-decoration: none;
  color: #000;
}
.category-post-title:hover {
  color: #53bf6f;
}
.category-post-date {
  position: relative;
  font-size: 14px;
  line-height: 1.4;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
}
.category-post-excerpt {
  align-self: stretch;
  position: relative;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.category-post-btn {
  width: 152px;
  height: 32px;
  border-radius: 39.62px;
  background: conic-gradient(
    from 90deg at 50% 50%,
    rgba(168, 217, 181, 0.72) 0deg,
    #53bf6f 360deg
  );
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 65px;
  box-sizing: border-box;
  text-decoration: none;
  transition: opacity 0.3s;
}
.category-post-btn:hover {
  opacity: 0.85;
}
.category-post-btn-text {
  position: relative;
  line-height: 1;
  white-space: nowrap;
}

.category-page-dot-wrap {
  margin-top: 48px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  color: #5a8164;
  font-family: Inter;
}
.category-page-dot-active {
  height: 41px;
  width: 41px;
  border-radius: 20.5px;
  background-color: #5a8164;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  color: #fff;
  text-decoration: none;
}
.category-page-dot-text-active {
  line-height: 1;
}
.category-page-dot {
  height: 41px;
  width: 41px;
  border-radius: 20.5px;
  border: 1px solid #5a8164;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #5a8164;
}
.category-page-dot:hover {
  background-color: rgba(90, 129, 100, 0.15);
}
.category-page-dot-prev {
  height: 41px;
  width: 71px;
  border-radius: 20.5px;
  border: 1px solid #5a8164;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #5a8164;
}
.category-page-dot-prev:hover {
  background-color: rgba(90, 129, 100, 0.15);
}
.category-page-dot-next {
  height: 41px;
  width: 71px;
  border-radius: 20.5px;
  border: 1px solid #5a8164;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #5a8164;
}
.category-page-dot-next:hover {
  background-color: rgba(90, 129, 100, 0.15);
}
.category-page-dot-text3 {
  line-height: 1;
  white-space: nowrap;
}

/* 響應式 - 768px：3欄改 2欄 */
@media (max-width: 768px) {
  .category-page {
    padding: 36px 0 80px;
  }

  .category-posts-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .category-post-title {
    font-size: 1.125rem;
  }

  .category-post-inner-wrap {
    padding: 20px;
    gap: 20px;
  }

  .category-page-dot-active,
  .category-page-dot {
    height: 36px;
    width: 36px;
    border-radius: 18px;
  }

  .category-page-dot-prev,
  .category-page-dot-next {
    height: 36px;
    width: 60px;
    border-radius: 18px;
  }
}

/* 手機版 ≤480px：與最新消息頁相同排版 */
@media (max-width: 480px) {
  .category-page {
    padding: 20px 0 82.7px;
    scroll-margin-top: 36px;
  }

  .category-page-title-wrap {
    margin-bottom: 20px;
  }

  .category-page-tagline {
    line-height: normal;
  }

  .category-page-title {
    font-size: 1rem;
    height: auto;
  }

  .category-page-des {
    font-size: 12px;
    height: auto;
    line-height: normal;
  }

  .category-posts-list {
    grid-template-columns: 1fr 1fr;
    gap: 20px 12px;
  }

  /* 手機版只顯示 6 篇 */
  .category-post:nth-child(n + 7) {
    display: none;
  }

  .category-post {
    gap: 0;
  }

  .category-post-image {
    background-color: transparent;
  }

  .category-post-image img {
    height: auto;
  }

  .category-post-inner-wrap {
    padding: 14px 11.5px;
    gap: 12px;
    box-shadow: 2px 2px 10.4px 0 rgba(0, 0, 0, 0.25);
  }

  .category-post-inner {
    gap: 8px;
  }

  .category-post-head {
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
  }

  .category-post-title {
    font-size: 12px;
  }

  .category-post-date {
    font-size: 10px;
    font-weight: 400;
  }

  .category-post-excerpt {
    font-size: 10px;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .category-post-btn {
    width: 73px;
    height: 16px;
    padding: 8px 24px;
    font-size: 10px;
    background: conic-gradient(
      from 90deg at 14.9% 50%,
      rgba(168, 217, 181, 0.72) 0deg,
      #53bf6f 360deg
    );
    align-self: center;
  }

  /* 分頁 */
  .category-page-dot-wrap {
    margin-top: 24px;
    gap: 8px;
  }

  .category-page-dot-active,
  .category-page-dot {
    height: 28px;
    width: 28px;
    border-radius: 14px;
    font-size: 12px;
  }

  .category-page-dot-prev,
  .category-page-dot-next {
    height: 28px;
    width: 50px;
    border-radius: 14px;
    font-size: 12px;
  }
}