/* ================================
   Responsive Footer
================================ */

/* Tablet และต่ำกว่า */
@media (max-width: 900px) {
    .main-footer .grid-3 {
        grid-template-columns: 1fr;
        text-align: center;
        row-gap: 20px;
    }

    .main-footer .text-left,
    .main-footer .text-right {
        text-align: center;
        align-items: center;
    }

    .main-footer .text-right {
        flex-direction: column;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .main-footer {
        padding: 24px 16px;
    }

    .main-footer p {
        font-size: 18px;
        line-height: 1.6;
    }

    .main-footer .back-to-top {
        font-size: 20px;
        padding: 10px 18px;
        margin: 8px 0;
    }

    .logout-footer-btn {
        width: 100%;
        max-width: 240px;
        text-align: center;
        padding: 10px 0;
    }

    .footer-divider {
        width: 60%;
        margin: 12px auto;
    }
}
/* ==================================================
   COMMANDER – FIRST (ผบ.ศม.)
   Mobile-first → Tablet → Desktop
================================================== */

/* ---------- Base (Mobile-first) ---------- */
.commander-layout{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  max-width:900px;
  margin:0 auto;
  padding:0 16px;
}

.commander-photo-col{
  width:100%;
  max-width:320px;
  text-align:center;
}

.commander-photo{
  width:100%;
  height:auto;
}

.commander-image-frame{
  border:2px solid #7da0c8;
  padding:4px;
  background:#f8fbff;
  border-radius:6px;
  aspect-ratio:170 / 261;
  object-fit:cover;
}

.commander-name-first{
  margin-top:10px;
  font-size:20px;
  font-weight:700;
  line-height:1.35;
  text-align:center;
}

.commander-position{
  display:block;
  margin-top:4px;
  font-size:16px;
  font-weight:400;
  line-height:1.35;
  opacity:.95;
}

.commander-text-col{
  width:100%;
  max-width:100%;
}

.commander-logo-box{
  display:flex;
  justify-content:center;
  margin-bottom:16px;
}

.commander-logo-first{
  width:84px;
  height:auto;
}

.commander-header{
  text-align:center;
  margin-bottom:16px;
}

.commander-body{
  font-size:0.95rem;
  line-height:1.8;
  color:#24466c;
}

.indent{ text-indent:1rem; }

/* ---------- Tablet & Desktop ≥768 ---------- */
@media (min-width: 768px){
  .commander-layout{
    flex-direction:row;
    justify-content:center;
    align-items:flex-start;
    gap:40px;
    max-width:980px;
  }

  .commander-photo-col{
    flex:0 0 240px;
    max-width:none;
  }

  .commander-name-first{ font-size:22px; }
  .commander-position{ font-size:18px; }

  .commander-text-col{
    flex:1;
    max-width:600px;
  }

  .commander-logo-box{
    justify-content:flex-end;
    margin-bottom:20px;
  }

  .commander-logo-first{ width:100px; }
  .commander-header{ margin-bottom:20px; }
  .commander-body{ font-size:0.92rem; }
}

/* ---------- Mobile safety ≤767 ---------- */
@media (max-width: 767px){
  .commander-logo-box{ justify-content:center; }
}

/* ---------- Small Mobile ≤480 ---------- */
@media (max-width: 480px){
  .commander-name-first{ font-size:19px; }
  .commander-position{ font-size:15px; }
  .commander-logo-first{ width:78px; }
  .commander-body{ font-size:0.94rem; }
}


/* ==================================================
   COMMANDER – SECOND / THIRD / FOURTH
================================================== */

/* ---------- Tablet ≤1023 ---------- */
@media (max-width: 1023px){
  .commander-wrapper{
    grid-template-columns:1.1fr .9fr;
    grid-template-areas:"left right";
    gap:28px;
  }

  .commander-paragraph{
    font-size:18px;
    line-height:1.8;
    text-align:left;
  }

  .commander-portrait{ width:220px; }
  .commander-name{ font-size:20px; }
}

/* ---------- Mobile ≤767 ---------- */
@media (max-width: 767px){
  .commander-wrapper{
    grid-template-columns:1fr;
    grid-template-areas:
      "right"
      "left";
    gap:22px;
  }

  .commander-right{ text-align:center; }
  .commander-paragraph{ font-size:16px; }
  .commander-portrait{ width:200px; }
  .commander-logo{ width:90px; }
  .commander-name{ font-size:18px; }
  .commander-position,
  .commander-role{ font-size:14px; }
}

/* ---------- Small Mobile ≤480 ---------- */
@media (max-width: 480px){
  .commander-paragraph{ font-size:15px; }
  .commander-portrait{ width:180px; }
  .commander-logo{ width:80px; }
}
/*--เพิ่ม ผบ.ชา--*/
@media (max-width: 355px){
  .commander-name,
  .commander-caption{
    font-size: clamp(14px, 4.5vw, 18px);
    white-space: normal;
    display: block;
    text-align: center;
  }
}

/* ==================================================
   MOTTO
================================================== */

.motto-block{ text-align:center; }

.motto-text{
  font-size:28px;
  font-weight:700;
  line-height:1.8;
}

.motto-text .indent{
  display:block;
  margin-top:6px;
}

/* Tablet */
@media (max-width: 768px){
  .motto-text{ font-size:24px; }
}

/* Small Mobile */
@media (max-width: 480px){
  .motto-text{
    font-size:22px;
    line-height:1.7;
    padding-inline:10px;
  }
}


/* ==================================================
   CAV SIXTH
================================================== */

/* Tablet */
@media (max-width: 768px){
  .cavSixth-page{ padding-inline:20px; }
  .dot-item{ font-size:20px; }
}

/* Mobile */
@media (max-width: 480px){
  .cavSixth-page{
    padding-inline:16px;
    min-height:auto;
  }

  .dotlist-block{ gap:14px; }
  .dot-item{
    font-size:18px;
    gap:10px;
  }

  .dot-item img{
    width:18px;
    height:18px;
  }
}


/* ==================================================
   BATTLE – THIRD
================================================== */
@media (max-width: 768px){
  .battle-officer-row{ flex-wrap:wrap; }
  .battle-card--center{ transform:none; }
}


/* ==================================================
   ROYAL
================================================== */

/* ---------- Base / Desktop ---------- */
.royal-page{
  max-width:1100px;
  margin-inline:auto;
  padding-inline:16px;
}

.royal-wrapper{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:"left right";
  gap:48px;
  align-items:center;
}

.royal-left{ grid-area:left; padding:10px; }
.royal-right{
  grid-area:right;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  text-align:center;
}

.royal-text{ text-align:center; }
.royal-logo{ height:170px; }
.royal-paragraph{
  font-size:22px;
  line-height:2;
  text-indent:2em;
}

/* ---------- Tablet ≤1023 ---------- */
@media (max-width: 1023px){
  .royal-wrapper{ gap:28px; }
  .royal-paragraph{ font-size:20px; }
  .royal-logo{ height:155px; }
}

/* ---------- Mobile ≤767 ---------- */
@media (max-width: 767px){
  .royal-wrapper{
    display:flex !important;
    flex-direction:column !important;
    gap:22px;
  }

  .royal-right{ order:1 !important; }
  .royal-left{ order:2 !important; padding:0; }
  .royal-paragraph{ font-size:18px; }
}

/* ---------- Small Mobile ≤380 ---------- */
@media (max-width: 380px){
  .royal-paragraph{ font-size:17px; }
}

/*-----mobile/รอง ผบ.พัน/ผบ.ร้อย ปก 3 นาย------*/

@media (max-width: 480px) {
  .battle-page{
    padding: 16px;          
  }

  .battle-officer-row{
    flex-direction: column; 
    align-items: center;
    gap: 18px;              
    margin-top: 18px;
    justify-content: center;
  }
  
  .battle-card{
    width: min(92vw, 320px);
    max-width: 100%; /* ป้องกันล้นขวา */
    padding: 12px;
  }

  .commander-image-frame-battle{
    width: 100%;
    max-width: 100%; /* ป้องกันรูปดันการ์ดล้น */
    height: auto;
    aspect-ratio: 170 / 261;
  }

  .battle-card--center{
    transform: none;
  }

  .battle-card h6{
    font-size: 0.88rem;      
    line-height: 1.3;
  }
}
/*--เรียงลำดับ ผบ.ชา--*/
@media (max-width: 480px) {

  /* การ์ดกลางขึ้นก่อน */
  .battle-card--center {
    order: 1;
  }

  /* การ์ดซ้ายเป็นลำดับที่ 2 */
  .battle-card:first-child {
    order: 2;
  }

  /* การ์ดขวาเป็นลำดับที่ 3 */
  .battle-card:last-child {
    order: 3;
  }
}

/* 2) หน้าจอ 481px–768px : 2 คอลัมน์ (2 ใบด้านบน + 1 ใบด้านล่าง) */
@media (min-width: 481px) and (max-width: 768px) {
  .battle-officer-row{
    justify-content: center;
    align-items: flex-start; /* สำคัญมาก: ให้การ์ดที่ถูกยกขึ้นไม่ทำให้ layout เอียง */
    flex-wrap: wrap;
    gap: 22px;
  }

  .battle-card{
    flex: 1 1 calc(50% - 30px); /* แบ่ง 2 คอลัมน์ */
    max-width: 300px;
  }
}
/*----*/
   .commander-image-frame-battle{
    width: 170px;            /* จะคง 170 ก็ได้ หรือจะ 100% ก็ได้ */
    /* ถ้าต้องการให้รูปขยายตามการ์ด ให้ใช้บรรทัดล่างแทน */
    /* width: 100%; max-width: 200px; */
    height: auto;
    aspect-ratio: 170 / 261;
  }
}
/*---กลุ่มข้อความ โคลง กลอน ขวัญ--*/
@media (max-width: 768px) {

    .memory-page {
        padding: 2rem 1rem;
        align-items: flex-start; /* มือถือไม่ควร center แนวตั้ง */
    }

    .memory-inner {
        max-width: 100%;
    }

    .memory-lead {
        font-size: 1rem;
    }

    /* TEXT */
    .memory-text {
        font-size: 1rem;
        line-height: 1.8;
    }

    /* DOT LIST */
    .memory-dotlist--centered .dotlist li {
        font-size: 1.1rem;
        line-height: 1.7;
    }

    .memory-dotlist--centered .dotlist li::before {
        font-size: 1.5rem;
        flex: 0 0 1.1em;
    }

    /* POEM */
    .memory-poem .poem {
        font-size: 1.1rem;
        line-height: 1.8;
    }

    /* QUOTE */
    .memory-quote blockquote {
        font-size: 1.1rem;
    }
}
@media (min-width: 1200px) {
    .memory-inner {
        max-width: 1000px;
    }

    .memory-dotlist--centered .dotlist li {
        font-size: 1.3rem;
    }
}
/*--เราสู้--*/
@media (max-width: 768px) {

    .memory-poem--wefight {
        grid-template-columns: 1fr; /* ✅ เรียงลง */
        row-gap: 2.5rem;
    }

    .memory-poem--wefight .poem {
        font-size: 1.05rem;
        line-height: 1.8;
    }
}
@media (min-width: 1200px) {
    .memory-inner {
        max-width: 1000px;
    }
}
/*---End กลุ่มข้อความ---*/
/*--Responsive V.2 : activities/section--*/
/* มือถือ / จอแคบ */
@media (max-width: 768px) {
  .school-grid {
    grid-template-columns: 1fr; /* 1 คอลัมน์ */
    justify-items: center;
    gap: 18px;
  }

  .school-item {
    display: flex;
    justify-content: center;
    width: 100%; /* ← ตัวนี้สำคัญที่สุด */
  }

  .school-figure {
    max-width: 100%;
  }

  .school-figure img {
    width: 100%;
    max-width: 299px;
    height: 210px;
    object-fit: cover;
  }

  .school-title {
    font-size: 1.35rem;
    margin-bottom: 14px;
  }
}

/* จอเล็กมาก */
@media (max-width: 480px) {
  .school-title {
    font-size: 1.25rem;
  }
  .school-figure img {
    height: 200px;
  }
}
/*----*/

/* ===== FIX: Activities Mobile Center ===== */
@media (max-width: 768px) {

  /* ปิด flex เดิมที่ทำให้รูปชิดซ้าย */
  .school-item {
    display: block;
    width: 100%;
    text-align: center;
  }

  /* ให้ figure อยู่กลาง */
  .school-figure {
    margin-inline: auto;
  }

  /* ให้รูปอยู่กลาง 100% */
  .school-figure img {
    display: block;
    margin-inline: auto;
  }
}


/*--แผนกต่างๆ--*/