/**
 * RSJob Accordion 樣式表
 * 基於模板02.html，轉換 class 前綴從 job-accordion__ 到 rsjob__
 *
 * 版本: 1.0.0
 * 建立日期: 2025-10-23
 */

/* ===== CSS 變數 ===== */
:root {
  --color01: #A1A1A1;
  --color02: #333333;
  --color03: #666666;
  --accent: #F29345;
}

/* ===== 主容器 ===== */
.rsjob__container {
  width: 1080px;
  position: relative;
  margin: 0 auto;
}

/* 響應式設計：當螢幕寬度小於1080px時，寬度為100% */
@media (max-width: 1079px) {
  .rsjob__container {
    width: 100%;
    padding: 0 15px;
    box-sizing: border-box;
  }
}

/* ===== 第一層 Tabs 切換區域 ===== */
.rsjob__tabs {
  margin-bottom: 40px;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  display: inline-flex;
  flex-wrap: wrap;
}

.rsjob__tab {
  width: 80px;
  height: 40px;
  background: #F3F3F3;
  border-radius: 30px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  display: flex;
  cursor: pointer;
  transition: all 0.3s ease;
}

.rsjob__tab:hover {
  background: #E0E0E0;
}

.rsjob__tab--active {
  background: var(--accent) !important;
}

.rsjob__tab--active:hover {
  background: #E08A3A !important;
}

.rsjob__tab-text {
  width: 68px;
  text-align: center;
  color: #36322E;
  font-size: 16px;
  font-family: "Noto Sans CJK TC", sans-serif;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.80px;
  word-wrap: break-word;
}

.rsjob__tab--active .rsjob__tab-text {
  color: white;
}

/* ===== 第二層分類群組 Accordion ===== */
.rsjob__accordion {
  width: 1080px;
  position: relative;
  margin-bottom: 20px;
}

@media (max-width: 1079px) {
  .rsjob__accordion {
    width: 100% !important;
  }
}

.rsjob__header {
  width: 100%;
  padding: 10px 32px 10px 32px;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--color01);
  box-sizing: border-box;
  cursor: pointer;
  background: white;
  transition: background-color 0.3s ease;
}

.rsjob__header:hover {
  background: #f8f9fa;
}

.rsjob__header-title {
  text-align: center;
  color: var(--color02);
  font-size: 20px;
  font-family: "Noto Sans CJK TC", sans-serif;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 1px;
  word-wrap: break-word;
}

.rsjob__header-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rsjob__header-info-count {
  text-align: center;
  color: var(--color03);
  font-size: 16px;
  font-family: "Noto Sans CJK TC", sans-serif;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.80px;
  word-wrap: break-word;
}

.rsjob__icon-arrow {
  width: 24px;
  height: 24px;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease;
}

.rsjob__icon-arrow svg {
  width: 10px;
  height: 5px;
}

.rsjob__icon-arrow--expanded svg {
  transform: rotate(180deg);
}

/* ===== 第三層 Job 文章項目 ===== */
.rsjob__job-item {
  margin-bottom: 10px;
}

.rsjob__item {
  width: 100%;
  position: relative;
  background: rgba(245, 195, 61, 0.08);
  border-radius: 10px;
  padding: 20px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  cursor: pointer;
  transition: all 0.3s ease;
}

.rsjob__item:hover {
  background: rgba(245, 195, 61, 0.12);
  transform: translateY(-1px);
}

.rsjob__item-title {
  color: var(--color02);
  font-size: 20px;
  font-family: "Noto Sans CJK TC", sans-serif;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 1px;
  word-wrap: break-word;
  flex: 1;
  text-align: left; /* 固定左置 */
}

.rsjob__item-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.rsjob__btn {
  padding: 10px 16px;
  background: white;
  border-radius: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.rsjob__btn:hover {
  background: #f8f9fa;
  border-color: var(--accent);
  transform: translateY(-1px);
}

.rsjob__btn-text {
  text-align: center;
  color: var(--accent);
  font-size: 16px;
  font-family: "Noto Sans CJK TC", sans-serif;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.80px;
  white-space: nowrap;
}

/* ===== 展開面板樣式 ===== */
.rsjob__panel-content {
  width: 100%;
  position: relative;
  background: rgba(245, 195, 61, 0.08);
  border-radius: 10px;
  padding: 20px 40px;
  box-sizing: border-box;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

/* ===== 職缺內容樣式 ===== */
.rsjob__section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.rsjob__section-heading {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.rsjob__heading-icon {
  width: 22px;
  height: 0;
  transform: rotate(90deg);
  transform-origin: top left;
  outline: 3px var(--accent) solid;
  outline-offset: -1.50px;
}

.rsjob__heading-text {
  color: var(--accent);
  font-size: 20px;
  font-family: "Noto Sans TC", sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
}

.rsjob__paragraph {
  color: var(--color03);
  font-size: 14px;
  font-family: "Noto Sans CJK TC", sans-serif;
  font-weight: 400;
  line-height: 22.40px;
  letter-spacing: 0.70px;
  word-wrap: break-word;
}

/* ===== 載入更多按鈕 ===== */
.rsjob__load-more-container {
  text-align: center;
  margin-top: 20px;
}

.rsjob__load-more-btn {
  padding: 12px 24px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 25px;
  font-size: 16px;
  font-family: "Noto Sans CJK TC", sans-serif;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.3s ease;
}

.rsjob__load-more-btn:hover {
  background: #E08A3A;
  transform: translateY(-1px);
}

.rsjob__load-more-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
}

/* ===== 狀態訊息 ===== */
.rsjob__loading {
  text-align: center;
  padding: 40px;
  color: var(--color03);
  font-family: "Noto Sans CJK TC", sans-serif;
}

.rsjob__error {
  text-align: center;
  padding: 20px;
  color: #d63384;
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: 5px;
  font-family: "Noto Sans CJK TC", sans-serif;
}

.rsjob__no-data {
  text-align: center;
  padding: 40px;
  color: var(--color03);
  font-family: "Noto Sans CJK TC", sans-serif;
}

.rsjob__no-jobs {
  text-align: center;
  padding: 20px;
  color: var(--color03);
  background: #f8f9fa;
  border-radius: 5px;
  font-family: "Noto Sans CJK TC", sans-serif;
}

.rsjob__no-more {
  text-align: center;
  padding: 20px;
  color: var(--color03);
  font-family: "Noto Sans CJK TC", sans-serif;
  font-style: italic;
}

/* ===== 動畫效果 ===== */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.rsjob__job-item {
  animation: fadeIn 0.3s ease-out;
}

.rsjob__accordion-content {
  animation: fadeIn 0.3s ease-out;
  margin-top: 20px; /* 與分類 header 保持間距 */
  padding-top: 10px; /* 額外的內部間距 */
}

/* ===== 展開狀態的無縫連接樣式 ===== */
.rsjob__job-item .rsjob__item {
  margin-bottom: 0px; /* 展開時無間隙 */
}

.rsjob__job-item .rsjob__panel-content {
  margin-top: 0px;
  border-top: 1px solid var(--accent); /* 1px 橘色分隔線 */
  border-top-left-radius: 0px; /* 移除上方圓角，實現無縫連接 */
  border-top-right-radius: 0px;
}

/* 展開狀態下的標題區塊樣式調整 */
.rsjob__job-item:has(.rsjob__panel-content[style*="display: block"]) .rsjob__item,
.rsjob__job-item:has(.rsjob__panel-content[style*="display: flex"]) .rsjob__item {
  border-bottom-left-radius: 0px; /* 移除下方圓角，與內容區塊無縫連接 */
  border-bottom-right-radius: 0px;
}

/* ===== 響應式設計 ===== */
@media (max-width: 768px) {
  .rsjob__tabs {
    justify-content: center;
  }

  .rsjob__tab {
    width: 70px;
    height: 36px;
  }

  .rsjob__tab-text {
    width: 60px;
    font-size: 14px;
  }

  .rsjob__header {
    padding: 8px 16px;
    flex-direction: column;
    gap: 10px;
    position: relative;
    border-bottom: 1px solid var(--color01);
  }

  .rsjob__header-title {
    font-size: 18px;
  }

  .rsjob__item {
    padding: 15px 16px;
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }

  .rsjob__item-title {
    font-size: 18px;
    text-align: left;
  }

  .rsjob__item-actions {
    align-self: flex-end;
  }

  .rsjob__panel-content {
    padding: 15px 16px;
  }
}

@media (max-width: 480px) {
  .rsjob__tab {
    width: 60px;
    height: 32px;
    margin-bottom: 5px;
  }

  .rsjob__tab-text {
    width: 50px;
    font-size: 12px;
  }

  .rsjob__item-title {
    font-size: 16px;
  }

  .rsjob__btn {
    padding: 8px 12px;
  }

  .rsjob__btn-text {
    font-size: 14px;
  }
}

/* ===== 印刷樣式 ===== */
@media print {
  .rsjob__btn,
  .rsjob__load-more-container {
    display: none;
  }

  .rsjob__panel-content {
    display: block !important;
  }

  .rsjob__item {
    cursor: default;
  }
}