/* =========================================================
   org-chart.css (FULL REPLACE) — Desktop + Mobile (ตามดีไซน์)
   - Desktop: ใช้ SVG วาดเส้น (นิ่ง ไม่กระพริบ)
   - Mobile: ปิด SVG แล้วใช้ CSS วาดเส้นแบบ “แกนซ้าย + โค้งเข้า head”
             โค้งเฉพาะรูปแรก (Root) และรูปสุดท้ายของกลุ่ม (Head สุดท้าย)
             ที่เหลือ “เส้นตรงเข้า”
   ========================================================= */

.rub-org-chart{
  position:relative;
  padding:70px 20px 45px;
  overflow:hidden;

  --line:#A07A43;
  --lw:1px;

  /* ===== SCALE ===== */
  --scale:1.25; /* เพิ่มขนาดทุกวงกลม +25% */

  /* spacing ตาม design */
  --gap-root-to-l2:74px;
  --gap-l2-to-l3:52px;

  --gap-x-l2:150px;
  --gap-x-l3:90px;

  /* base sizes */
  --root:130px;
  --l2:92px;
  --l3:64px;

  /* scaled sizes */
  --root-s: calc(var(--root) * var(--scale));
  --l2-s:   calc(var(--l2) * var(--scale));
  --l3-s:   calc(var(--l3) * var(--scale));
}

/* ===================== SVG (DESKTOP/TABLET) ===================== */
.rub-org-lines{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:1;
  shape-rendering:geometricPrecision;
}

.rub-org-lines path{
  fill:none;
  stroke:var(--line);
  stroke-width:var(--lw);
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray:none !important;
  stroke-dashoffset:0 !important;
  animation:none !important;
}

/* ===================== LAYOUT (DESKTOP/TABLET) ===================== */
.rub-org-root{
  display:flex;
  justify-content:center;
  margin-bottom:var(--gap-root-to-l2);
  position:relative;
  z-index:2;
}

.rub-org-chart > .rub-org-children[data-depth="0"]{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  flex-wrap:nowrap;
  width:100%;
  max-width:1100px;
  margin:0 auto;
  position:relative;
  z-index:2;
}

.rub-org-branch{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--gap-l2-to-l3);
  width:360px;
  max-width:360px;
}

.rub-org-children[data-depth="1"]{
  display:inline-flex;
  justify-content:center;
  align-items:flex-start;
  gap:var(--gap-x-l3);
  flex-wrap:nowrap;
}

/* Person */
.rub-org-person{
  text-align:center;
  position:relative;
  z-index:3;
}

/* ===== AVATAR (SCALED) ===== */
.rub-org-avatar{
  width:var(--l2-s);
  height:var(--l2-s);
  border-radius:999px;
  border:4px solid var(--line);
  padding:4px;
  margin:0 auto 10px;
  box-sizing:border-box;
  background:#fff;
  position:relative;
  z-index:3;
}

/* inner blue ring */
.rub-org-avatar::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  border:8px solid #97C3E8;
  pointer-events:none;
  z-index:1;
}

.rub-org-avatar img{
  width:100%;
  height:100%;
  border-radius:999px;
  object-fit:cover;
  display:block;
  position:relative;
  z-index:2;
}

/* Typography */
.rub-org-name,
.rub-org-role{
  position:relative;
  z-index:4;
  padding:0 12px;
  white-space:nowrap;
}

.rub-org-name{
  font-weight:600;
  font-size:16px;
  color:#6fb0df;
}

.rub-org-role{
  font-size:12px;
  color:#9aa3ad;
}

/* Root bigger */
.rub-org-root .rub-org-avatar{
  width:var(--root-s);
  height:var(--root-s);
}
.rub-org-root .rub-org-name{
  font-size:20px;
}

/* Level 3 smaller */
.rub-org-children[data-depth="1"] .rub-org-avatar{
  width:var(--l3-s);
  height:var(--l3-s);
}
.rub-org-children[data-depth="1"] .rub-org-name{ font-size:14px; }
.rub-org-children[data-depth="1"] .rub-org-role{ font-size:11px; }

/* Responsive (desktop->tablet) */
@media (max-width: 1100px){
  .rub-org-chart > .rub-org-children[data-depth="0"]{
    flex-wrap:wrap;
    gap:30px 40px;
  }
  .rub-org-children[data-depth="1"]{
    flex-wrap:wrap;
    gap:22px 30px;
  }
}

/* ===================== FIX: Equal slots + tighter text (Desktop/Tablet) ===================== */

/* แถว Level 2 (ลูกของ Root) ให้ช่องกว้างเท่ากันเสมอ */
.rub-org-chart > .rub-org-children[data-depth="0"]{
  display:grid !important;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0 28px;                 /* ปรับระยะห่างระหว่างคน */
  justify-items:center;
  align-items:start;
  width:100%;
  max-width:1100px;
  margin:0 auto;
}

/* ให้แต่ละ branch กินพื้นที่ 1 ช่องเท่า ๆ กัน */
.rub-org-chart > .rub-org-children[data-depth="0"] > .rub-org-branch{
  width:100% !important;
  max-width:none !important;
}

/* คุม “กรอบคน” ไม่ให้กว้างเกินไป */
.rub-org-chart > .rub-org-children[data-depth="0"] > .rub-org-branch > .rub-org-person{
  width:100%;
  max-width:220px;             /* ปรับได้ 200–240 ตามดีไซน์ */
}

/* ทำให้ชื่อ/ตำแหน่งไม่แผ่กว้าง: ให้ wrap ได้ และคุมความกว้าง */
.rub-org-chart > .rub-org-children[data-depth="0"] .rub-org-name,
.rub-org-chart > .rub-org-children[data-depth="0"] .rub-org-role{
  white-space:normal !important;   /* override เดิมที่เป็น nowrap */
  max-width:220px;
  margin-left:auto;
  margin-right:auto;
  overflow-wrap:anywhere;
  text-align:center;
}
/* ===== เพิ่มขนาด Level 2 +20% ===== */
.rub-org-chart > .rub-org-children[data-depth="0"] 
> .rub-org-branch 
> .rub-org-person 
> .rub-org-avatar{
  width: calc(var(--l2-s) * 1.2);
  height: calc(var(--l2-s) * 1.2);
}
.rub-org-chart > .rub-org-children[data-depth="0"] .rub-org-name{
  font-size:18px;
}
.rub-org-person-link{
  display:inline-block;
  color:inherit;
  text-decoration:none;
}
/* ===================== HOVER LINK UI (เหมือนภาพตัวอย่าง) ===================== */

/* ทำให้ลิงก์ครอบคนเป็นชิ้นเดียว และทำ layer ได้ */
.rub-org-person-link{
  position:relative;
  display:inline-block;
  text-decoration:none;
  color:inherit;
  cursor:pointer;
}

/* ปุ่มวงกลม + ลูกศร ที่มุมขวาบนของรูป (hover เท่านั้น) */
.rub-org-avatar{
  position:relative; /* สำคัญ */
}

.rub-org-avatar::after{
  content:"↗";
  position:absolute;
  right:-10px;
  top:-12px;
  width:52px;
  height:52px;
  border-radius:999px;
  background:rgba(235,246,255,1);
  border:5px solid #ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:27px;
  font-weight:400;
  color:#86BCE9;

  opacity:0;
  transform:scale(0.92);
  transition:opacity .18s ease, transform .18s ease;
  pointer-events:none;
  z-index:6;
}

/* hover state */
.rub-org-person-link:hover::before{
  opacity:1;
  transform:translate(-50%,-50%) scale(1.01);
}

.rub-org-person-link:hover .rub-org-avatar::after{
  opacity:1;
  transform:rotate(3deg);
}

@media (max-width: 991px){
	.rub-org-chart > .rub-org-children[data-depth="0"]{
		display:flex !important;
	}
}

/* ===== MOBILE FIX: layout ต้องไปจัดที่ a.rub-org-person-link ===== */
@media (max-width: 767px){

  /* ROOT ยังจัดกลางเหมือนเดิม (ถ้า root ไม่ได้ครอบด้วย a ก็ไม่เป็นไร) */
  .rub-org-root .rub-org-person{ text-align:center !important; }
  .rub-org-root .rub-org-person-link{
    display:inline-block !important;
    width:auto !important;
    text-align:center !important;
  }

  /* ✅ คนระดับถัดไป + ลูก: ให้ “ลิงก์” เป็น grid 2 คอลัมน์ */
  .rub-org-chart > .rub-org-children[data-depth="0"] > .rub-org-branch > .rub-org-person{
    display:block !important;         /* ไม่ให้ .rub-org-person เป็น grid */
    text-align:left !important;
  }

  .rub-org-chart > .rub-org-children[data-depth="0"] > .rub-org-branch > .rub-org-person > .rub-org-person-link{
    grid-template-columns: var(--m-col) 1fr !important;
    align-items:center !important;

    width:100% !important;           /* ✅ ยืดเต็มแถว */
    max-width:none !important;
    text-align:left !important;
  }

  /* avatar อยู่คอลัมน์ซ้าย */
  .rub-org-chart > .rub-org-children[data-depth="0"] .rub-org-person-link .rub-org-avatar{
    margin:0 !important;
    justify-self:center !important;
  }

  /* ชื่อ/role อยู่คอลัมน์ขวา ชิดซ้าย */
  .rub-org-chart > .rub-org-children[data-depth="0"] .rub-org-person-link .rub-org-name,
  .rub-org-chart > .rub-org-children[data-depth="0"] .rub-org-person-link .rub-org-role{
    text-align:left !important;
    margin:0 !important;
    max-width:100% !important;
  }
  .rub-org-chart > .rub-org-children[data-depth="0"] .rub-org-person-link .rub-org-role{
    margin-top:4px !important;
  }

  /* ลูก depth=1 ถ้าก็มีลิงก์เหมือนกัน ให้ใช้ pattern เดียวกัน */
  .rub-org-children[data-depth="1"] > .rub-org-branch > .rub-org-person{
    display:block !important;
    text-align:left !important;
  }
  .rub-org-children[data-depth="1"] > .rub-org-branch > .rub-org-person > .rub-org-person-link{
    display:grid !important;
    grid-template-columns: var(--m-col) 1fr !important;
    column-gap: 18px !important;
    align-items:center !important;
    width:100% !important;
  }
  .rub-org-children[data-depth="1"] .rub-org-person-link .rub-org-name,
  .rub-org-children[data-depth="1"] .rub-org-person-link .rub-org-role{
    text-align:left !important;
    margin:0 !important;
  }
}
@media (max-width: 767px){
  .rub-org-children .rub-org-person-link,
  .rub-org-children .rub-org-person{
    width:100%;
  }

  .rub-org-children .rub-org-person-link{
    display:grid;
    grid-template-columns: var(--m-col) 1fr;
    column-gap: 7px !important;
    align-items:center;
    text-align:left;
  }

  .rub-org-m-left{ display:flex; justify-content:center; margin-left:25px;}
  .rub-org-m-right{ display:block; }

  .rub-org-m-right .rub-org-name,
  .rub-org-m-right .rub-org-role{
    text-align:left !important;
    margin:0 !important;
  }
	.rub-org-chart > .rub-org-children[data-depth="0"] > .rub-org-branch > .rub-org-person > .rub-org-person-link{
		display:flex !important;
	}
	.rub-org-chart > .rub-org-children[data-depth="0"] > .rub-org-branch > .rub-org-person{
		max-width:320px;
	}
  .rub-org-m-right .rub-org-role{ margin-top:6px !important; }
	.rub-org-chart > .rub-org-children[data-depth="0"] > .rub-org-branch,
	.rub-org-root{
		margin-bottom:50px;
	}
	.rub-org-chart > .rub-org-children[data-depth="0"] .rub-org-name{
		font-size:16px;
	}
	.rub-org-root .rub-org-name{
		font-size:26px;
		font-family:"El Messiri", Sans-serif;
	}
	/* ✅ ต้องเปิด SVG บนมือถือ ไม่งั้น JS วาดแล้วไม่เห็น */
  .rub-org-lines{ 
    display:block !important;
  }
}