/* 聯絡頁面基礎設定 */
.contact-page {
  background-color: #fcfcfc;
  padding-bottom: 80px;
}

.contact-hero {
  background-color: #FCEBD5;
  padding: 60px 20px 100px;
  text-align: center;
}

.contact-hero h1 { color: #8D5A44; font-size: 2rem; margin-bottom: 10px; }

/* 卡片容器 */
.contact-wrapper {
  max-width: 1100px;
  margin: -60px auto 0; /* 讓卡片往上壓在 Hero 區 */
  padding: 0 20px;
}

.contact-card {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.1);
  display: grid;
  grid-template-columns: 1.2fr 1fr; /* 桌面版左右分欄 */
  overflow: hidden;
  border: 1px solid #f0f0f0;
}

/* 資訊側樣式 */
.info-side { padding: 40px; }
.info-side h3 { color: #e67e22; margin-bottom: 30px; }

.info-item {
  display: flex;
  gap: 15px;
  margin-bottom: 25px;
}

.info-item .icon { font-size: 1.5rem; }
.info-item strong { display: block; color: #333; margin-bottom: 3px; }
.info-item p { color: #666; margin: 0; }

/* LINE 綠色方塊 */
.line-box {
  background: #f0fdf4;
  padding: 20px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 30px;
}

.line-btn {
  background: #06C755;
  color: white;
  padding: 10px 20px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  margin-top: 10px;
}

.qr-img { width: 90px; height: 90px; border: 2px solid white; border-radius: 8px; }

.map-side { min-height: 450px; }

/* 📱 手機版 RWD 排版修正 */
@media (max-width: 768px) {
  .contact-hero { padding: 50px 20px 80px; }
  
  .contact-wrapper {
    margin-top: -50px;
    padding: 0 15px;
  }

  .contact-card {
    grid-template-columns: 1fr; /* 改為垂直排列 */
  }

  .info-side { padding: 30px 20px; }
  
  .line-box {
    flex-direction: column; /* LINE 資訊在手機改為上下排 */
    text-align: center;
    gap: 15px;
  }

  .map-side {
    height: 300px; /* 手機版地圖縮小高度 */
    min-height: 300px;
  }
}