/* =========================================================
   WB002839 Manufacture (RWD + Modern CSS + Native Nesting)
   Target: Chrome 140 / Safari 18
========================================================= */
#WB002839.manufacture {
  --maxw: 1200px;
  --padx: clamp(16px, 3.5vw, 24px);
  --secY: clamp(40px, 6vw, 70px);
  --gap: clamp(12px, 2.5vw, 24px);

  --c-primary: #00b0bd;
  --c-primary-2: #00818a;
  --c-text: #333;
  --c-muted: #6b7280;
  --c-line: #ccc;

  --radius: 10px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .10);

  line-height: 1.6;
  color: var(--c-text);

  a {
    color: inherit;
    text-decoration: none;
  }

  img {
    max-width: 100%;
    height: auto;
    display: block;
  }

  /* 兼容舊版 .clearfix（就算 HTML 還有它也不會壞） */
  .clearfix::after {
    content: "";
    display: block;
    clear: both;
  }

  /* =======================================================
     Generic layout
  ======================================================= */
  .section {
    position: relative;
    width: 100%;
    padding: var(--secY) 0;

    h2 {
      margin: 0 0 10px;
      font-size: clamp(26px, 3.6vw, 36px);
      line-height: 1.2;
      font-weight: 400;
      text-align: center;
    }

    h3 {
      margin: 0 0 12px;
      font-size: clamp(22px, 3vw, 30px);
      line-height: 1.2;
      font-weight: 400;
    }

    p {
      margin: 0;
      text-align: justify;
    }
  }

  .content {
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--padx);
  }

  p.sectionDesc,
  p.sectionDesc-center {
    margin: 0 auto clamp(18px, 3vw, 30px);
    padding-inline: clamp(0px, 6vw, 140px);
    font-size: clamp(16px, 2.2vw, 20px);
    line-height: 1.6;
  }

  p.sectionDesc-center {
    text-align: center;
  }

  .imgCenter {
    margin-inline: auto;
  }

  /* 舊的 vAlignMiddle hack 改成現代寫法 */
  .vAlignMiddle {
    display: grid;
    place-items: center;

    &::before {
      content: none;
    }

    .vAlignContent {
      display: block;
    }
  }

  /* =======================================================
     Title line
  ======================================================= */
  .title-line {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    margin: 0 0 clamp(18px, 3vw, 30px);
    font-weight: 700;
    text-align: center;

    span {
      position: relative;
      display: inline-block;
      padding-inline: 6px;
    }

    &::before,
    &::after {
      content: "";
      height: 1px;
      background: #aeaeae;
    }
  }

  /* =======================================================
     Buttons / Links
  ======================================================= */
  .link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: clamp(16px, 2vw, 20px);
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
    user-select: none;

    &:active {
      transform: translateY(1px);
    }
  }

  .link-normal {
    background: var(--c-primary);
    color: #fff;

    &:hover {
      background: var(--c-primary-2);
    }
  }

  .link-outline {
    background: #fff;
    border: 1px solid var(--c-primary);
    color: var(--c-primary);

    &:hover {
      background: var(--c-primary);
      color: #fff;
    }
  }

  .link-block {
    display: block;
    width: min(420px, 100%);
    margin: 24px auto 0;
    text-align: center;
  }

  /* =======================================================
     Banner
  ======================================================= */
  #indBanner {
    min-height: min(520px, 72vh);
    padding: 0;
    color: #fff;
    background: url("../images/manufacture/bg_banner.jpg") center / cover no-repeat;

    h1 {
      margin: 0 0 10px;
      font-size: clamp(30px, 4.2vw, 44px);
      line-height: 1.2;
      text-align: left;
      color: #ffff00;
    }

    .pageDesc {
      max-width: 680px;
      font-size: clamp(16px, 2.2vw, 20px);
      line-height: 1.6;

      strong {
        color: #ffff99;
        font-weight: 400;
      }
    }
  }

  /* =======================================================
     Foreword cards (jobProblem)
  ======================================================= */
  #foreword {
    .jobProblem {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: var(--gap);
      color: #fff;
      margin-top: clamp(18px, 3vw, 28px);
    }

    .txt {
      cursor: pointer;

      .outline {
        position: relative;
        overflow: hidden;
        padding: 26px 14px 34px;
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        transform: translateZ(0);
      }

      .nameLayer {
        position: relative;
        z-index: 2;
        display: grid;
        place-items: center;
        gap: 10px;
        text-align: center;

        img {
          width: 64px;
          height: 64px;
        }

        p {
          margin: 0;
          font-size: clamp(18px, 2.2vw, 24px);
          font-weight: 700;
          text-align: center;
        }
      }

      .txtLayer {
        position: absolute;
        inset: 0;
        z-index: 3;
        display: grid;
        place-items: center;
        padding: 18px 16px;
        opacity: 0;
        transform: translateY(10px);
        transition: opacity .2s ease, transform .2s ease;

        p {
          margin: 0;
          font-size: clamp(14px, 2vw, 18px);
          text-align: justify;
        }
      }

      .mask {
        position: absolute;
        inset: 0;
        z-index: 2;
        opacity: 0;
        transform: translateY(8px);
        transition: opacity .2s ease, transform .2s ease;
      }

      .handTop {
        position: absolute;
        left: 50%;
        bottom: 10px;
        translate: -50% 0;
        z-index: 4;
        font-size: 24px;
        opacity: .9;
        animation: wb-handTop 1.5s ease-out infinite;
      }

      &:hover {
        .mask {
          opacity: 1;
          transform: translateY(0);
        }

        .txtLayer {
          opacity: 1;
          transform: translateY(0);
        }

        .handTop {
          animation-play-state: paused;
        }
      }
    }

    /* 顏色維持你原本的視覺分組 */
    .txt01, .txt10 { .outline { background: #00b0bd; } .mask { background: rgba(0, 81, 87, .90); } }
    .txt02 { .outline { background: #0bd8e7; } .mask { background: rgba(6, 125, 134, .90); } }
    .txt03, .txt09 { .outline { background: #70c7ef; } .mask { background: rgba(25, 161, 224, .90); } }
    .txt04 { .outline { background: #88b9b0; } .mask { background: rgba(81, 138, 127, .90); } }
    .txt05 { .outline { background: #33af84; } .mask { background: rgba(28, 96, 72, .90); } }
    .txt06 { .outline { background: #acd653; } .mask { background: rgba(119, 157, 38, .90); } }
    .txt07 { .outline { background: #7cca70; } .mask { background: rgba(70, 155, 57, .90); } }
    .txt08 { .outline { background: #7ccdc4; } .mask { background: rgba(63, 164, 153, .90); } }
  }

  /* prefers-reduced-motion */
  @media (prefers-reduced-motion: reduce) {
    #foreword .txt .handTop {
      animation: none;
    }

    #foreword .txt .mask,
    #foreword .txt .txtLayer {
      transition: none;
    }
  }

  /* =======================================================
     Problems
  ======================================================= */
  #problems {
    background: #cbe6e8;

    img {
      margin-top: clamp(16px, 3vw, 30px);
    }
  }

  /* =======================================================
     MainContent quick links + issue sections
  ======================================================= */
  #mainContent {
    background: #e9e9e9;

    .group {
      display: grid;
      gap: var(--gap);
      padding: clamp(18px, 4vw, 50px);
      grid-template-columns: repeat(4, minmax(0, 1fr));
      align-items: start;

      .list {
        display: grid;
        justify-items: center;
        gap: 10px;
        text-align: center;
        cursor: pointer;
        user-select: none;

        img {
          width: 120px;
          height: 120px;
          border-radius: 999px;
          background: var(--c-primary);
          transition: background-color .2s ease, transform .2s ease;
        }

        p {
          margin: 0;
          font-size: clamp(16px, 2.2vw, 20px);
          position: relative;
          text-align: center;
          transition: color .2s ease;
        }

        p::after {
          content: "";
          display: block;
          width: 0;
          height: 3px;
          margin: 10px auto 0;
          background: var(--c-primary-2);
          transition: width .2s ease;
          border-radius: 999px;
        }

        &:hover {
          img {
            background: var(--c-primary-2);
            transform: translateY(-2px);
          }

          p {
            color: var(--c-primary-2);
          }

          p::after {
            width: 52%;
          }
        }
      }
    }

    .issueGroup {
      .issue {
        padding-bottom: clamp(40px, 6vw, 80px);
      }

      .imgGroup {
        margin: clamp(24px, 5vw, 60px) 0;
        display: grid;
        gap: var(--gap);
        align-items: start;

        /* 預設：桌機 3 欄 */
        grid-template-columns: repeat(3, minmax(0, 1fr));

        /* 如果有 col-2，就整組改成 2 欄（用 :has 支援 Chrome/Safari） */
        &:has(.col-2) {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .list {
          text-align: center;

          a {
            position: relative;
            /* display: block; */
            border-radius: 12px;
            overflow: hidden;
            box-shadow: var(--shadow);
            img{
                display: inline;
            }
          }

          /* zoom icon */
          /* a::after {
            content: "";
            position: absolute;
            right: 10px;
            bottom: 10px;
            width: 26px;
            height: 26px;
            background: url("../images/icon_zoom.png") center / 26px 26px no-repeat;
            opacity: .95;
          } */

          p {
            margin-top: 10px;
            text-align: center;
            color: var(--c-muted);
            font-size: 14px;
          }
        }
      }

      .link-outline {
        font-size: clamp(18px, 2.6vw, 28px);
        background: #fff;

        &:hover {
          background: var(--c-primary);
        }
      }
    }
  }

  /* =======================================================
     Produce section (image + text two columns)
  ======================================================= */
  #produce {
    .txtLayer {
      display: grid;
      gap: var(--gap);
      grid-template-columns: 1fr 1fr;
      align-items: center;
      margin-top: clamp(16px, 3vw, 28px);

      p {
        margin: 0;
        font-size: clamp(16px, 2.2vw, 20px);
        text-align: justify;
      }
    }
  }

  /* =======================================================
     Responsive
  ======================================================= */
  @media (max-width: 992px) {
    #foreword .jobProblem {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #mainContent .group {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #mainContent .issueGroup .imgGroup {
      grid-template-columns: repeat(2, minmax(0, 1fr));

      &:has(.col-2) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    #produce .txtLayer {
      grid-template-columns: 1fr;
    }

    #indBanner {
      min-height: auto;
      padding: clamp(42px, 8vw, 70px) 0;
    }
  }

  @media (max-width: 576px) {
    p.sectionDesc,
    p.sectionDesc-center {
      padding-inline: 0;
    }

    #foreword .jobProblem {
      grid-template-columns: 1fr;
    }

    #mainContent .group {
      grid-template-columns: repeat(2, minmax(0, 1fr));

      .list img {
        width: 96px;
        height: 96px;
      }
    }

    #mainContent .issueGroup .imgGroup {
      grid-template-columns: 1fr;

      &:has(.col-2) {
        grid-template-columns: 1fr;
      }
    }
  }
}
@keyframes wb-handTop {
    0% { translate: -50% 0; }
    50% { translate: -50% -10px; }
    100% { translate: -50% 0; }
}