/* page-national-foundation.css */

.page-heading-page-wrap {
  width: 100%;
}

.national-foundation {
  background-color: #d9d9d9;
  padding-bottom: 95px;
}

.national-foundation-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 1352px;
  width: stretch;
  gap: 36px;
  margin-top: 42px;
}

.national-foundation-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-primary);
  background-color: var(--color-white);
  width: 100%;
  max-width: 660px;
  height: 366px;
}

.national-foundation-icon {
}

.national-foundation-item-title {
  font-size: 1.5rem;
  color: var(--color-primary);
  font-weight: 600;
  margin: 25px auto 36px;
}

.national-foundation-text {
  max-width: 551px;
  color: var(--color-primary);
  padding: 0 30px;
}

/* foundation section */
.foundation-section {
  padding: 70px 0;
}

.foundation-section .section-wrap {
  width: 100%;
}

.foundation-section .section-container {
  max-width: 416px;
  width: 100%;
}

.foundation-section .section-text-wrap {
  max-width: 416px;
  height: 196px;
  align-items: center;
}

.foundation-section .section-text {
  max-width: 308px;
}

.foundation-container {
  flex-direction: row;
  justify-content: center;
}

.foundation-text-out-wrap {
  border: 1px solid var(--color-primary);
  padding: 15px;
  margin-left: -140px;
  width: 100%;
  max-width: 805px;
  z-index: -1;
}

.foundation-text-inside-wrap {
  align-content: center;
  background-color: var(--color-primary);
  padding: 120px 88px 104px 182px;
  width: 100%;
  max-width: 802px;
  height: 324px;
}

.foundation-text {
  color: var(--color-white);
  max-width: 510px;
}

/* org section */
.org-section {
  padding: 95px 0 167px;
  background-color: #e6f3ff;
}

.org-wrap {
  display: flex;
  width: 100%;
  max-width: 1178px;
  position: relative;
  border-bottom: 12px solid var(--color-primary);
  margin-top: 96px;
  z-index: 1;
  position: relative;
}

.org-icon {
  position: absolute;
  bottom: -47px;
  left: 50%;
  transform: translateX(-50%);
}

.org-text-item {
  display: flex;
  flex-direction: column;
  background-color: var(--color-white);
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  gap: 20px;
  flex: 1;
}

.org-text {
  max-width: 554px;
  text-align: center;
}

/* est limit section */
.est-limit-section {
  padding: 70px 0 190px;
  background-image: url(../../images/est-limit-section-bg.webp);
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: contain;
}

.est-limit-wrap {
  display: flex;
  gap: 80px;
  max-width: 964px;
  margin-top: 70px;
}

.est-limit-item {
  width: 100%;
  max-width: 442px;
}
.est-limit-title-wrap {
  display: flex;
  position: relative;
  align-items: flex-end;
}
.est-limit-title {
  width: 220px;
  text-align: center;
  color: var(--color-white);
  background-color: var(--color-primary);
  padding: 13px 0 2px;
  border-radius: 12px 12px 0 0;
}
.est-limit-title-deco {
  width: 117px;
  height: 25px;
  background-color: #d9d9d9;
  border-radius: 0 12px 0 0;
}
.est-limit-desc-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 35px;
  background-color: var(--color-primary);
  border-radius: 0 12px 12px 12px;
  height: 232px;
  justify-content: center;
}
.est-limit-desc-item {
  display: flex;
  gap: 4px;
  align-items: flex-start;
}
.est-limit-number {
  background-color: var(--color-white);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  line-height: 20px;
  color: var(--color-primary);
  text-align: center;
  align-content: center;
}
.est-limit-text {
  color: var(--color-white);
}
.est-limit-desc {
  margin: 20px auto;
  text-align: center;
}
.highlight-wrap {
  display: flex;
  gap: 20px;
  background-color: #fff0f0;
  padding: 18px 26.5px;
}
.highlight-note {
  width: 73px;
  height: 60px;
  border: 1px solid #c8274a;
  color: #c8274a;
  align-content: center;
  text-align: center;
}
.highlight-text {
  color: #c8274a;
  max-width: 295px;
}

.est-limit-head {
  white-space: nowrap;
  color: var(--color-white);
}
.est-limit-3000 {
  color: var(--color-primary);
  background-color: #ffeabc;
  max-width: 350px;
  text-align: center;
  padding: 5px 12.5px;
  margin-left: 16px;
}

.est-gold-text {
  color: var(--color-accent);
}

/* RWD 圖片切換：桌機顯示 desktop、手機顯示 mobile */
.org-img--mobile,
.bubble-arrow-dark-img--mobile,
.bubble-arrow-img--mobile {
  display: none;
}

/* one stop section */
.one-stop-section {
  padding: 84px 0 94px;
  background: linear-gradient(
    182.13deg,
    rgba(255, 195, 64, 0.5),
    rgba(255, 255, 255, 0.5)
  );
}
.speech-bubble-wrap {
  display: flex;
  align-items: center;
  margin: 36px auto 46px;
}
.speech-bubble-left {
  position: relative;
  background-color: var(--color-primary);
  border-radius: 60px;
  height: 48px;
  width: 407px;
  flex-shrink: 0;
  margin-right: -31px;
  text-align: center;
  align-content: center;
  z-index: 2;
}
.speech-bubble-dark {
  color: var(--color-white);
}
.bubble-arrow-dark-img {
  position: absolute;
  bottom: -20px;
  left: 12px;
}
.speech-bubble-right {
  position: relative;
  z-index: 1;
}
.speech-bubble {
  color: var(--color-white);
  background: linear-gradient(0deg, #0b2f53, #1969b9);
  border-radius: 60px;
  height: 134px;
  width: 440px;
  flex-shrink: 0;
  align-content: center;
  text-align: center;
  z-index: 1;
  position: relative;
  padding: 0 51px;
}
.bubble-arrow-img {
  position: absolute;
  bottom: -21px;
  right: 14px;
  z-index: 0;
}
.one-stop-wrap {
  display: flex;
  width: stretch;
  max-width: 772px;
}
.one-stop-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: stretch;
  max-width: 290px;
}
.one-stop-head {
  width: stretch;
  align-content: center;
  text-align: center;
  max-width: 174px;
  height: 56px;
  color: var(--color-white);
  background-color: var(--color-primary);
}
.est-gold {
  background-color: var(--color-accent);
}
.one-stop-inner-wrap {
  display: flex;
  flex-direction: column;
  background-color: var(--color-white);
  padding: 49px;
  align-items: center;
  gap: 32px;
  width: stretch;
  border: 1px solid var(--color-primary);
}
.gold-border {
  border: 1px solid var(--color-accent);
}
.one-stop-text {
  font-size: var(--font-size-xl);
}
.one-stop-hr {
  height: 1px;
  width: stretch;
  background-color: #000;
}
.one-stop-mid-wrap {
  display: flex;
  width: 248px;
  height: 500px;
  flex-direction: column;
  border: 2px solid var(--color-white);
  background-color: #316eac;
  padding: 38px 28.5px;
  margin: 0 -28px 26px;
  gap: 28px;
  z-index: 1;
  justify-content: center;
  align-self: end;
}
.one-stop-mid-text {
  color: var(--color-white);
  text-align: center;
  font-size: var(--font-size-xl);
}
.one-stop-mid-hr {
  height: 1px;
  width: 100%;
  background-color: var(--color-white);
}
/* ==================== 桌面基礎樣式 ==================== */

/* ==================== 大螢幕 (max-width: 1440px) ==================== */
@media (max-width: 1440px) {
  .foundation-section,
  .org-section,
  .est-limit-section,
  .one-stop-section {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* ==================== 平板 (max-width: 1024px) ==================== */
@media (max-width: 1024px) {
  .national-foundation-wrap {
    grid-template-columns: 1fr 1fr;
    display: grid;
    gap: 1.5rem;
  }

  .foundation-container {
    flex-direction: column;
    gap: 0;
  }
  .org-wrap {
    flex-direction: column;
    gap: 0;
    margin-top: 24px;
  }
  .est-limit-wrap {
    flex-direction: column;
    gap: 24px;
  }

  .foundation-text-out-wrap,
  .est-limit-item,
  .one-stop-item {
    width: 100%;
    max-width: 100%;
  }

  .est-limit-desc-wrap {
    grid-template-columns: 1fr 1fr;
    display: grid;
    gap: 16px;
  }

  .speech-bubble-wrap {
    flex-direction: column;
    gap: 16px;
  }
}

/* ==================== 768px 以下 ==================== */
@media (max-width: 768px) {
  .page-heading-title {
    max-width: 224px;
  }
  .national-foundation {
    padding: 0 10px 43px;
    margin-top: 125px;
  }

  .national-foundation .section-container {
    margin-top: -97px;
  }
  .foundation-section {
    padding: 36px 0 48px;
  }
  .est-limit-section {
    padding: 48px 0 35px;
  }

  .one-stop-section {
    padding: 33px 0 86px;
    background: linear-gradient(
      182deg,
      rgba(255, 195, 64, 0.5) -3.5%,
      rgba(255, 255, 255, 0.5) 98.26%
    );
  }
  .org-section {
    padding: 40px 1rem;
  }

  .national-foundation-wrap {
    grid-template-columns: 1fr;
    margin-top: 28px;
    width: fit-content;
  }

  .national-foundation-item {
    height: 254px;
    max-width: 275px;
    padding: 31.5px 20.5px;
  }

  .national-foundation-item-title {
    font-size: 13px;
    margin: 10px auto 16px;
  }

  .national-foundation-text {
    line-height: normal;
    padding: 0;
  }

  /* foundation */
  .foundation-section .section-text-wrap {
    height: auto;
    max-width: 302px;
  }

  .foundation-section .section-text {
    max-width: 248px;
  }
  .foundation-text-out-wrap {
    margin-left: 0;
    margin-top: -24px;
    padding: 6.5px;
  }

  .foundation-text-inside-wrap {
    padding: 52px 22.5px 36px;
    max-width: 314px;
    height: 208px;
  }

  .foundation-text {
    line-height: 1.4;
  }

  /* org */
  .org-wrap {
    max-width: 281px;
  }

  .org-text-item {
    padding: 32px 31px 20px;
    gap: 12px;
    align-items: flex-start;
  }

  .org-icon {
    width: auto;
    height: 32px;
    flex-shrink: 0;
    bottom: -25px;
    z-index: -1;
  }

  .org-text {
    line-height: normal;
  }

  /* est */
  .est-limit-wrap {
    margin-top: 36px;
    max-width: 312px;
  }
  .est-limit-title {
    width: 124px;
    height: 26px;
    align-content: center;
    padding: 0;
    font-weight: 500;
  }

  .est-limit-title-deco {
    width: 64px;
    height: 15px;
  }

  .est-limit-desc {
    margin: 16px auto;
  }

  .est-limit-desc-wrap {
    grid-template-columns: 1fr;
    padding: 35.5px 14px;
    gap: 14.5px;
    height: auto;
  }

  .highlight-wrap {
    padding: 18px 9px;
    gap: 12px;
  }

  .highlight-note {
    font-weight: 600;
  }

  .highlight-text {
    max-width: 200px;
    line-height: normal;
    align-content: center;
  }

  .est-limit-desc-item {
    align-items: center;
  }

  .est-limit-number {
    width: 16px;
    height: 16px;
    line-height: 16px;
  }

  .est-limit-3000 {
    max-width: 254px;
    padding: 4px 5px;
    margin-left: 0;
    margin-top: -13px;
  }

  /* one stop */
  .speech-bubble-wrap {
    margin: 28px auto 41.85px;
    align-items: flex-start;
  }

  .speech-bubble-left {
    width: stretch;
    margin-right: 0;
    max-width: 289px;
  }

  .speech-bubble {
    max-width: 306px;
    height: 104px;
    width: stretch;
    padding: 0 29px;
    line-height: normal;
  }
  .bubble-arrow-dark-img {
    bottom: -8px;
    z-index: -1;
  }

  .bubble-arrow-img {
    bottom: -10px;
    z-index: -1;
  }

  .one-stop-wrap {
    position: relative;
    z-index: 1;
    max-width: 287px;
  }
  .one-stop-inner-wrap {
    padding: 46px 11px;
  }

  .one-stop-mid-wrap {
    flex-shrink: 0;
    width: 86px;
    height: auto;
    padding: 44px 16px;
    align-self: flex-start;
    margin: 65px -24px 0;
    white-space: nowrap;
  }

  .one-stop-item {
    justify-content: flex-start;
  }

  .one-stop-head {
    font-size: 13px;
    position: relative;
    bottom: -3px;
    z-index: -1;
    width: 88px;
    height: 34px;
    padding: 6px 0 0;
    font-weight: 500;
  }

  .one-stop-text {
    font-size: var(--font-size-sm);
    height: 30px;
    align-content: center;
    text-align: center;
    line-height: normal;
    max-width: 61px;
  }

  .one-stop-mid-text {
    font-size: 13px;
    font-weight: 500;
  }

  /* 自辦/代辦最後兩項：較高/較慢、較低/較穩定 */
  .one-stop-inner-wrap .one-stop-text:nth-of-type(5),
  .one-stop-inner-wrap .one-stop-text:nth-of-type(6) {
    line-height: normal;
    height: auto;
  }

  /* RWD 圖片切換：手機顯示 mobile、隱藏 desktop */
  .org-img--desktop,
  .bubble-arrow-dark-img--desktop,
  .bubble-arrow-img--desktop {
    display: none;
  }

  .org-img--mobile,
  .bubble-arrow-dark-img--mobile,
  .bubble-arrow-img--mobile {
    display: block;
  }
}

/* ==================== 小平板 (max-width: 992px) ==================== */
@media (max-width: 992px) {
}

/* ==================== 手機 (max-width: 480px) ==================== */
@media (max-width: 480px) {
  .org-section,
  .est-limit-section {
    padding: 28px 12px;
  }

  .national-foundation-icon {
    width: 37px;
    height: auto;
  }

  .foundation-section .section-text {
  }

  .org-text {
  }

  .est-limit-title {
  }

  .est-limit-number {
    font-size: 1rem;
  }

  .est-limit-text,
  .est-limit-desc {
  }

  .highlight-text {
  }

  .est-limit-3000 {
  }

  .est-gold-text {
  }

  .speech-bubble {
  }

  .one-stop-head {
  }

  .one-stop-text {
  }

  /* 自辦/代辦最後兩項：較高/較慢、較低/較穩定 */
  .one-stop-inner-wrap .one-stop-text:nth-of-type(5),
  .one-stop-inner-wrap .one-stop-text:nth-of-type(6) {
    line-height: normal;
    height: auto;
  }

  /* RWD 圖片切換：手機顯示 mobile、隱藏 desktop */
  .org-img--desktop,
  .bubble-arrow-dark-img--desktop,
  .bubble-arrow-img--desktop {
    display: none;
  }

  .org-img--mobile,
  .bubble-arrow-dark-img--mobile,
  .bubble-arrow-img--mobile {
    display: block;
  }
}