/* ============================
 NONE-OFFICE PAGE — Base Layout
 ============================ */

.none-office-page {
	padding: 40px 0;
}

.none-office-container {
	max-width: 900px;
	margin-inline: auto;
	padding: 0 20px;
}
.none-office-title{
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    font-weight: 700;
    text-align: center;
    margin-bottom: 25px;
}
/*.none-office-title {
	text-align: center;
	font-weight: 700;
	margin-bottom: 25px;
}*/


/* ============================
 ITEM
 ============================ */
/* กล่องรวมรูป + ข้อความ */
.none-office-item {
	width: 170px; /* หรือ 170px ถ้าชื่อยาวมาก */
	margin: 0 auto;
	display: flex; /* บังคับให้กล่องจัดกลาง */
	flex-direction: column; /* เรียงรูป + ข้อความลงล่าง */
	align-items: center; /* จัดทุกอย่างให้อยู่กลางแนวนอน */
	text-align: center; /* จัดข้อความให้อยู่กลาง */
}

/* กรอบรูปคงที่ */
.none-office-photo {
	width: 100px;
	height: 130px;
	padding: 4px;
	background-color: #f8fbff;
	border: 2px solid #7da0c8; 
	border-radius: 6px;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}
 
/* รูปด้านในปรับตัวเอง */
.none-office-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* ครอบเต็มกรอบแบบสวย */
}

.none-office-info {
    margin-top: 8px;
}
.none-office-info h5{
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  width: 100%;
  max-width: 210px;     /* ให้เท่ากับ .none-office-item */
  letter-spacing: -0.3px; /* ตัวช่วยสำหรับชื่อยาวสุด */
  margin-bottom: 2px;
}
.none-office-info h6 {
    font-size: 0.78rem;
    line-height: 1.4;
    word-break: keep-all;
    margin-bottom: 15px;
}


/* ============================
   CENTER MODE — 3 ITEMS ONLY
   ใช้เฉพาะแถวที่มี 3 คน
============================ */
/* แถว 3 รูป — ใช้เฉพาะหน้านี้ */
.none-office-grid.none-office-grid--center-3 {
  display: grid;
  grid-template-columns: repeat(3, 170px); 
  justify-content: center;                
  gap: 35px 20px;                        
}
/*--รายชื่อนักเรียนนายสิบ กองร้อยที่ 1/2--*/
/* ==============================
   กล่องครอบเนื้อหา (กลางหน้า)
================================ */
.cover-box-style {
  max-width: 900px;
  margin-inline: auto;
}

/* ==============================
   กล่องรายชื่อ นนส. (3 คอลัมน์ใหญ่)
================================ */
.non-nco-center-name {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* ==============================
   รายชื่อแต่ละคน
   (เลข | ชื่อ | นามสกุล)
================================ */
.non-nco-name-list {
  display: grid;
  grid-template-columns: 3ch 1fr 1.4fr;
  column-gap: 6px;
  row-gap: 4px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}
.page-title {
  white-space: nowrap;
  font-size: clamp(1.1rem, 3.5vw, 1.6rem);
}

.non-nco-name-list span {
  font-size: clamp(0.82rem, 0.9vw, 0.95rem);
  letter-spacing: -0.3px;
}
/* เลขลำดับ */
.non-nco-no {
  text-align: right;
  white-space: nowrap;
}

/* ==============================
   Responsive
================================ */
@media (max-width: 767px) {
  .non-nco-center-name {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .non-nco-center-name {
    grid-template-columns: 1fr;
  }
}
/*----แถวเรียง 3----*/
/*.empty-photo {
  width: 100px;
  height: 130px;
  background: transparent;
  border: none;
}*/
/* ============================
 GRID — 5 Columns (Desktop)
 ============================ */
.none-office-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 35px 20px;
	justify-items: center; /* ตัวนี้สำคัญที่สุด */
}

/* Tablet → 3 Columns */
@media (max-width: 1023px) {
	.none-office-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Mobile → 2 Columns */
@media (max-width: 767px) {
	.none-office-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 25px 15px;
	}
}

/* Small Mobile → 1 Column */
@media (max-width: 480px) {
	.none-office-grid {
		grid-template-columns: 1fr;
	}
}
/* ===== Responsive เฉพาะแถว 3 รูป ===== */

/* Tablet */
@media (max-width: 1023px) {
  .none-office-grid.none-office-grid--center-3 {
    grid-template-columns: repeat(3, 170px);
    justify-content: center;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .none-office-grid.none-office-grid--center-3 {
    grid-template-columns: repeat(2, 170px);
    justify-content: center;
  }
}

/* Small Mobile → เรียง 1 */
@media (max-width: 480px) {
  .none-office-grid.none-office-grid--center-3 {
    grid-template-columns: 170px;
    justify-content: center;
  }
}