/* ═══════════════════════════════════════════════════
   MAINAKOB - Members Page CSS
═══════════════════════════════════════════════════ */

.members-page {
  position: relative; z-index: 10;
  max-width: 1100px; margin: 0 auto;
  padding: 20px 20px 100px;
}

/* ─── Header ────────────────────────────────────── */
.members-header {
  position: relative; /* สร้างกรอบอ้างอิงสำหรับปุ่มย้อนกลับ */
  display: flex; 
  align-items: center; 
  justify-content: center; /* บังคับให้เนื้อหาตรงกลาง (ชื่อแก๊ง) อยู่กึ่งกลางหน้าจอ */
  margin-bottom: 28px; 
  padding-top: 8px;
  min-height: 50px; /* กำหนดความสูงขั้นต่ำเพื่อให้มิติคงที่ */
}

.back-btn {
  /* เปลี่ยนเป็น absolute เพื่อดึงปุ่มออกจากตรรกะแถวของ Flexbox ชื่อแก๊งจะได้ไม่โดนเบียด */
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  
  display: flex; 
  align-items: center; 
  gap: 6px;
  padding: 8px 14px;
  background: rgba(59,130,246,0.08);
  border: 1px solid rgba(59,130,246,0.2);
  border-radius: 8px;
  color: var(--blue-bright); 
  text-decoration: none;
  font-size: 13px; 
  font-weight: 600; 
  letter-spacing: 1px;
  transition: all 0.2s; 
  white-space: nowrap;
  z-index: 5;
}

.back-btn:hover { 
  background: rgba(59,130,246,0.15); 
}

.header-title { 
  /* บังคับศูนย์กลางแนวนอนและแนวตั้ง */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center; 
}

.members-header .gang-accent-line { 
  max-width: 60px; 
  margin: 0 auto; /* จัดเส้นขีดให้อยู่ตรงกลางของชื่อแก๊ง */
}

.members-header .gang-name { 
  font-size: clamp(32px, 6vw, 52px); 
  letter-spacing: 4px; 
}

/* ─── Stats Bar ─────────────────────────────────── */
.stats-bar {
  display: flex; align-items: center; justify-content: center;
  gap: 0; margin-bottom: 28px;
  background: rgba(10,20,40,0.6);
  border: 1px solid rgba(59,130,246,0.15);
  border-radius: 16px; padding: 16px;
  backdrop-filter: blur(10px);
  flex-wrap: wrap;
}
.stat-item {
  display: flex; align-items: center; gap: 10px;
  flex: 1; min-width: 100px; justify-content: center;
  padding: 8px 12px;
}
.stat-icon {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.founder-color { background: rgba(245,158,11,0.15); color: var(--founder); border: 1px solid rgba(245,158,11,0.2); }
.leader-color { background: rgba(167,139,250,0.15); color: var(--leader); border: 1px solid rgba(167,139,250,0.2); }
.support-color { background: rgba(52,211,153,0.15); color: var(--support); border: 1px solid rgba(52,211,153,0.2); }
.member-color { background: rgba(96,165,250,0.15); color: var(--member); border: 1px solid rgba(96,165,250,0.2); }
.stat-num {
  font-family: 'Saira Condensed', sans-serif;
  font-size: 28px; font-weight: 900; color: white; line-height: 1;
}
.stat-label {
  font-size: 10px; letter-spacing: 2px; color: var(--text-dim);
  text-transform: uppercase;
}
.stat-divider {
  width: 1px; height: 40px;
  background: rgba(59,130,246,0.15);
}

/* ─── Search ────────────────────────────────────── */
.search-wrap {
  position: relative; margin-bottom: 28px;
}
.search-icon {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  color: var(--text-faint); font-size: 15px;
}
.search-input {
  width: 100%; padding: 13px 48px;
  background: rgba(10,20,40,0.8);
  border: 1px solid rgba(59,130,246,0.2);
  border-radius: 12px; color: white;
  font-family: 'Noto Sans Thai', 'Rajdhani', sans-serif;
  font-size: 15px; outline: none;
  transition: all 0.2s; backdrop-filter: blur(10px);
}
.search-input:focus { border-color: var(--blue-bright); background: rgba(10,20,40,0.95); box-shadow: 0 0 0 3px rgba(59,130,246,0.1); }
.search-input::placeholder { color: var(--text-faint); }
.search-clear {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--text-dim); cursor: pointer;
  font-size: 16px; padding: 4px; transition: color 0.2s;
}
.search-clear:hover { color: white; }

/* ─── Members Groups ────────────────────────────── */
.members-content { animation: fadeInUp 0.5s ease both; }
.role-group { margin-bottom: 40px; }
.role-group-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 20px;
}
.role-group-title {
  font-family: 'Saira Condensed', sans-serif;
  font-size: 22px; font-weight: 700; letter-spacing: 3px;
  text-transform: uppercase;
}
.role-group-line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(59,130,246,0.3), transparent);
}
.role-count {
  font-size: 12px; letter-spacing: 1px; color: var(--text-faint);
  background: rgba(255,255,255,0.05);
  padding: 2px 8px; border-radius: 100px;
}
.role-founder .role-group-title { color: var(--founder); }
.role-leader .role-group-title { color: var(--leader); }
.role-support .role-group-title { color: var(--support); }
.role-member .role-group-title { color: var(--member); }

/* ─── Member Grid ───────────────────────────────── */
.members-grid {
  display: grid;
  /* ปรับขยายจาก 130px เป็น 180px เพื่อให้การ์ดใหญ่และกว้างขึ้นกําลังดี */
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  /* เพิ่มระยะห่างระหว่างการ์ดเล็กน้อยให้ดูไม่อึดอัด */
  gap: 20px;
}

.member-card-item {
  cursor: pointer;
  background: rgba(13, 26, 53, 0.8);
  border: 1px solid rgba(59, 130, 246, 0.12);
  border-radius: 16px; 
  overflow: hidden;
  transition: all 0.25s;
  animation: fadeIn 0.3s ease both;
  backdrop-filter: blur(5px);
}

.member-card-item:hover {
  transform: translateY(-6px);
  border-color: rgba(59, 130, 246, 0.4);
  box-shadow: 0 12px 30px rgba(0,0,0,0.4), 0 0 0 1px rgba(59,130,246,0.2);
}

.member-thumb {
  width: 100%; 
  aspect-ratio: 1;
  background: var(--navy-light);
  overflow: hidden; 
  position: relative;
}

.member-thumb img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  transition: transform 0.3s; 
}

.member-card-item:hover .member-thumb img { 
  transform: scale(1.05); 
}

.member-thumb-placeholder {
  width: 100%; 
  height: 100%;
  display: flex; 
  align-items: center; 
  justify-content: center;
  font-size: 48px; /* ปรับขนาดไอคอน Placeholder เพิ่มขึ้นตามขนาดรูป */
  color: rgba(59, 130, 246, 0.3);
}

/* ส่วนข้อมูลใต้ภาพ ปรับขนาดให้สมดุลกับการ์ดที่ใหญ่ขึ้น */
.member-card-info { 
  padding: 14px 10px; /* เพิ่มพื้นที่ขอบใน */
  text-align: center; 
}

.member-card-name {
  font-weight: 700; 
  font-size: 15px; /* ปรับตัวอักษรชื่อจาก 13px -> 15px */
  color: white;
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis;
  letter-spacing: 0.5px;
}

.member-card-role {
  font-size: 11px; /* ปรับตัวอักษรตำแหน่งจาก 10px -> 11px */
  letter-spacing: 1.5px;
  text-transform: uppercase; 
  margin-top: 5px; /* เพิ่มระยะห่างจากชื่อเล็กน้อย */
}

.role-badge-founder { color: var(--founder); }
.role-badge-leader { color: var(--leader); }
.role-badge-support { color: var(--support); }
.role-badge-member { color: var(--member); }

/* ─── Member Detail Modal ───────────────────────── */
.member-card {
  background: rgba(10, 20, 40, 0.92);
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: 24px; 
  overflow: hidden;
  width: 100%; 
  /* 1. ขยายหน้ากว้างของการ์ดให้ใหญ่ขึ้นเต็มตาเท่ารูปแรก (ปรับจาก 340px เป็น 390px) */
  max-width: 600px; 
  animation: slideUp 0.35s cubic-bezier(0.34,1.56,0.64,1) both;
  backdrop-filter: blur(20px);
  box-shadow: 0 30px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.05);
}

.card-img-wrap {
  width: 100%; 
  aspect-ratio: 1; 
  background: var(--navy-light); 
  position: relative; 
  overflow: hidden;

  /* 2. ปรับความเนียนในการ Fade ขอบล่างภาพให้สมดุลกับกล่องที่ขยายใหญ่ขึ้น */
  -webkit-mask-image: linear-gradient(to bottom, black 65%, transparent 98%);
  mask-image: linear-gradient(to bottom, black 65%, transparent 98%);
}

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

/* 3. จัดระยะ Padding และดึงระยะกล่องข้อความด้านล่างขึ้นไปเกยทับขอบรูปให้ดูโปรเฟสชันนอล */
.card-info { 
  /* ขยาย Padding ซ้าย-ขวา-ล่าง ให้กว้างขวางมีพื้นที่หายใจแบบรูปแรก */
  padding: 0px 32px 30px 32px; 
  text-align: center; 
  /* ดึงเนื้อหาขยับขึ้นไปเกยขอบจางของรูปภาพอย่างพอดีตา */
  margin-top: -35px; 
  position: relative;
  z-index: 2;
}

#modal-name {
  font-family: 'Saira Condensed', sans-serif;
  /* 4. เพิ่มขนาดฟอนต์ชื่อขึ้นเป็น 26px ให้เด่นชัด สมส่วนกับขนาดกล่อง */
  font-size: 26px; 
  font-weight: 900;
  letter-spacing: 2px; 
  color: white; 
  text-transform: uppercase;
  margin-bottom: 12px; 
}

.role-badge {
  display: inline-flex; 
  align-items: center; 
  gap: 6px;
  /* ขยายขนาดป้ายตำแหน่งให้หนาและยาวขึ้นเล็กน้อย ไม่ให้ดูเล็กจิ๋วเกินไป */
  padding: 5px 16px; 
  border-radius: 100px;
  font-size: 11px; 
  font-weight: 700; 
  letter-spacing: 2px;
  text-transform: uppercase; 
  margin-bottom: 26px; 
  
  /* คงเฉดสีที่คุณตั้งค่าไว้ */
  background: rgba(245,158,11,0.1);
  border: 1px solid rgba(245,158,11,0.35);
  color: var(--gold-light);
}

/* 5. เส้นแบ่งบาง ๆ และระยะปุ่ม Social ด้านล่าง */
.social-links { 
  display: flex; 
  gap: 12px; 
  justify-content: center; 
  /* เส้นคั่นสีขาวบางสไตล์หรูหราเหนือกลุ่มปุ่ม */
  border-top: 1px solid rgba(255, 255, 255, 0.08); 
  padding-top: 22px; 
}

.social-btn {
  display: inline-flex; 
  align-items: center; 
  gap: 8px;
  /* เพิ่มขนาดปุ่มให้ใหญ่และกดง่ายขึ้น (ขยับเป็น 9px 18px) */
  padding: 9px 18px; 
  border-radius: 10px;
  font-size: 13px; 
  font-weight: 600; 
  text-decoration: none;
  transition: all 0.2s; 
  border: 1px solid transparent;
}

.social-btn.fb { background: rgba(24,119,242,0.15); border-color: rgba(24,119,242,0.3); color: #4fa3f7; }
.social-btn.fb:hover { background: #1877f2; color: white; border-color: #1877f2; transform: translateY(-2px); }
.social-btn.ig { background: rgba(220,39,67,0.1); border-color: rgba(220,39,67,0.25); color: #f06070; }
.social-btn.ig:hover { background: linear-gradient(135deg, #f09433, #dc2743, #bc1888); color: white; border-color: transparent; transform: translateY(-2px); }

/* ─── States ────────────────────────────────────── */
.loading-state {
  text-align: center; padding: 60px;
  color: var(--text-dim); font-size: 16px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.no-result {
  text-align: center; padding: 60px 20px;
  color: var(--text-faint);
}
.no-result i { font-size: 40px; margin-bottom: 12px; opacity: 0.4; display: block; }

/* ─── Responsive ────────────────────────────────── */
@media (max-width: 1024px) {
  .members-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
  .stat-num { font-size: 24px; }
}
@media (max-width: 768px) {
  .members-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
  .member-card-item { backdrop-filter: blur(2px); } /* Optimize blur */
  .member-card { max-width: 480px; backdrop-filter: blur(10px); }
  .stat-item { padding: 8px; min-width: 80px; }
  .stat-icon { width: 34px; height: 34px; font-size: 14px; }
  .stat-num { font-size: 22px; }
  .role-group-title { font-size: 18px; }
}
@media (max-width: 600px) {
  .stats-bar { gap: 0; padding: 10px 4px; flex-wrap: wrap; }
  .stat-item { padding: 6px; gap: 6px; min-width: 45%; flex: 1 1 45%; }
  .stat-icon { width: 30px; height: 30px; font-size: 13px; }
  .stat-num { font-size: 20px; }
  .stat-label { font-size: 9px; }
  .stat-divider { display: none; } /* Hide divider on small screens when wrapped */
  .members-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
  .member-card-name { font-size: 14px; }
  .member-card-role { font-size: 10px; }
  .members-header .gang-name { font-size: clamp(28px, 6vw, 42px); }
  .card-info { padding: 0 20px 20px; }
  #modal-name { font-size: 22px; }
  .role-badge { padding: 4px 12px; font-size: 10px; }
}
@media (max-width: 400px) {
  .members-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .member-card-item { border-radius: 12px; }
}