/* ===== 內容區 ===== */

.page-header {
    background: 
    linear-gradient(rgba(10,20,40,0.85), rgba(10,20,40,0.85)),
    url("../assets/images/ai-bg.jpg") center/cover no-repeat;
    text-align: center;
    padding: 80px 20px;
    color: white;
}

.page-header h1 {
    font-size: 50px;
    margin-bottom: 10px;
    letter-spacing: 4px;
}

.page-header p {
    width: 400px;
    height: 4px;
    background: #ff5c5c;
    margin: 0 auto;
}

.container{
  max-width: 1100px;
  margin: 0 auto;      /* 取消 60px */
  padding: 0 20px;
}

.section{
  padding: 60px 0;     /* 統一用 section 控制間距 */
}

/* ✅ 桌機左右兩欄 */
.contact-grid{
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 24px;
  align-items: start;
}

/* ✅ 卡片共用 */
.card{
  background: #fff;
  border-radius: 14px;
  padding: 26px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

/* 左邊：聯絡資訊 */
.info h2{
  font-size: 22px;
  margin: 0 0 10px;
}

.info .desc{
  color: #555;
  line-height: 1.8;
  margin: 0 0 18px;
}

/* 每一列 icon + 文字 */
.info-list{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.info-item{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.7;
  color: #222;
}

.info-item .label{
  font-weight: 700;
  margin-right: 6px;
}

/* FB 按鈕做得更精緻 */
.fb-btn{
  display: inline-block;
  margin-top: 18px;
  padding: 12px 18px;
  border-radius: 10px;
  text-decoration: none;
  color: #fff;
  font-weight: 600;
  background: #1877f2;
  box-shadow: 0 8px 20px rgba(24,119,242,.25);
}

.fb-btn:hover{
  opacity: .92;
}

/* 右邊：地圖卡片 */
.map iframe{
  width: 100%;
  height: 420px;
  border: none;
  border-radius: 12px;
}

.extra-title{
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 700;
}

/* 標題：入會須知 */
.join-title{
  text-align: center;
  margin: 10px 0 18px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 2px;
}

/* 整個區塊的上下距離 */
.join-info-image{
  margin-top: 40px;   /* 可改 24~40 */
  text-align: center;
}

/* 圖片吃滿 container */
.join-info-image img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
}

/* ✅ 手機：變直排 */
@media (max-width: 900px){
  .contact-grid{
    grid-template-columns: 1fr;
  }
  .map iframe{
    height: 320px;
  }
}