@charset "UTF-8";
.phone-wrap{
  margin: auto 3rem;
}
/* ===== 業績區塊 Performance ===== */
.performance{
  padding: 0 0 5rem;
}

/* 大圖 */
.performance-hero{
  width: 100%;
  overflow: hidden;
}

.performance-hero img{
  width: 100%;
  height: 100%;
  display: block;
}

/* logo + 標題內文 */
.performance-body{
  padding: 2.2rem 0 1.2rem;
}

.performance-logo{
  width: 130px;            /* 依你的 logo 調 */
  height: auto;
  display: block;
  margin: 2rem 0;
}

.performance-title{
  margin: 0 0 1rem;
  color: #4d4d4d;
}

.performance-desc{
  color: #4d4d4d;
  line-height: 2;
}

/* 圖片牆：手機 2 欄，最後一張橫跨兩欄 */
.performance-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 1.5rem 0 2rem;
}

.card{
  position: relative;
  overflow: hidden;
  background: #fff;
}

.card img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.card span,
.card figcaption{
  position: absolute;
  left: 10px;
  bottom: 5px;
  font-size: .75rem;
  letter-spacing: .06em;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}



/* 結尾標題 + 裝飾英文 */
.performance-footer{
  padding-top: .5rem;
}

.performance-end{
  margin: 1rem 0 .6rem;
  color: #4d4d4d;
}

.performance-en{
  font-family: "Cormorant Infant", serif;
  font-size: .75rem;
  color: #4d4d4d;
  line-height: 1.2;
}


/* ------------------------------------------------- */
/* 平板專用樣式 */
  @media (min-width: 768px) and (max-width: 1023px){
   .phone-wrap{/* 畫面留白區域 */
    margin: 1.5rem 6.5rem;
  }
  .performance-logo{/* 大傳logo */
    width: 180px; 
    margin: 2rem 0;
  }
  .performance-grid{/*業績照 */
    gap: 15px;
    padding: 1rem 0;
  }
  .performance-en{/*底部裝飾英文 */
    font-size: 1rem;
    margin-bottom: 3rem;
  }
 }

 /* ------------------------------------------------- */

  /* 桌機小螢幕（含 iPad 橫向）優化樣式 */
  @media (min-width: 1024px) and (max-width: 1279px) {
    .phone-wrap{/* 畫面留白區域 */
     margin: 0;
    }
    .row-wrap{
      margin: 2.5rem 10rem;
    }
    .performance-hero{/* 大圖 */
      width: 100vw;
      height: 75vh;
      overflow: hidden;
    }
    .performance-grid{
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      padding: 1.5rem 0;
    } 
    .row-performance{
      display: flex;
      flex-direction: row;
      background-color: #dedede;
    }
    .br-none{
      display: none;
    }
    .performance-hero{
      width: 60%;
      order: 2;
    }
    .performance-body{
      width: 40%;
      order: 1;
      margin: auto 5rem;
    }
    .performance-logo{
       width: 180px;
      margin: 5rem 0 3rem;
    }
    .performance-grid{
      margin-top: 5rem;
    }
    .performance-footer{
      padding-top: 0;
    }
  
  }
  /* ------------------------------------------------- */

  /* 桌機小螢幕（含 iPad 橫向）優化樣式 */
  @media (min-width: 1280px) and (max-width: 1599px) {
    .phone-wrap{/* 畫面留白區域 */
      margin: 0;
    }
    .row-wrap{
      width: min(900px, calc(100% - 10rem));
      margin: 2rem auto;
      transition: width 0.35s ease;
    }
    .performance-hero{/* 大圖 */
      width: 100vw;
      height: 75vh;
      overflow: hidden;
    }
    .performance-body{/* logo + 標題內文 */
      padding: 0 1rem;
    }
    .performance-grid{
      max-width: 900px;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      padding: 1.5rem 0;
      gap:15px;
    } 
    .row-performance{
      display: flex;
      flex-direction: row;
      background-color: #dedede;
    }
    .br-none{
      display: none;
    }
    .performance-hero{
      width: 60%;
      order: 2;
    }
    .performance-body{
      width: 40%;
      order: 1;
      margin: auto 5rem;
    }
    .performance-logo{
      width: 180px;
      margin: 3rem 0;
    }
    .performance-grid{
      margin-top: 5rem;
    }
    .performance-footer{
      padding-top: 0;
    }
  }

  /* ------------------------------------------------- */

  /* 大螢幕專用樣式 */
  @media (min-width: 1600px) {
    .phone-wrap{/* 畫面留白區域 */
     margin: 0;
    }
    .row-wrap{
      width: min(1280px, calc(100% - 15rem));
      margin: 2rem auto;
      transition: width 0.35s ease;
    }
    .performance-hero{/* 大圖 */
      width: 100vw;
      height: 75vh;
      overflow: hidden;
    }
    .performance-body{/* logo + 標題內文 */
      padding: 0 5rem;
    }
    .performance-grid{
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      padding: 1.5rem 0;
      gap:20px;
    } 
    .row-performance{
      display: flex;
      flex-direction: row;
      background-color: #dedede;
    }
    .br-none{
      display: none;
    }
    .performance-hero{
      width: 60%;
      order: 2;
    }
    .performance-body{
      width: 40%;
      order: 1;
      margin: auto 5rem;
    }
    .performance-logo{
       width: 180px;
      margin: 3rem 0;
    }
    .performance-grid{
      margin-top: 5rem;
    }
    .performance-footer{
      padding-top: 0;
    }
  }