/* ผังโครงสร้างองค์กร การ์ดกระจกฝ้าขนาดเท่ากัน */

.sheet:has(.org) {
  padding-right: calc(var(--g) + 48px);
  padding-bottom: 72px;
}

.sheet:has(.org) > h1 {
  min-height: 44px;
  padding-right: 280px;
}

.org-search {
  float: right;
  width: 260px;
  margin: -52px 0 12px;
}

.org-search span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.org-search input {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #fff;
  border-radius: 8px;
  background: #ffffffb8;
  color: var(--ink);
  font: inherit;
  backdrop-filter: blur(14px) saturate(1.4);
}

/* กากบาทล้างคำค้นของเบราว์เซอร์เป็นสีน้ำเงินของระบบ ไม่เข้ากับเว็บ */
.org-search input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  cursor: pointer;
  background: center / 12px 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 2l8 8M10 2L2 10' stroke='%234d4d4d' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

.org-search input:focus-visible,
.org-nav button:focus-visible,
.org-nav a:focus-visible,
.org-phone a:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.org-layout { clear: both; }

.org-nav {
  margin: 0 0 20px;
  padding: 12px;
  border: 1px solid #ffffffb3;
  border-radius: 16px;
  background: #ffffff99;
  box-shadow: inset 0 1px 0 #ffffff80, 0 12px 30px #00000014;
  backdrop-filter: blur(14px) saturate(1.4);
}

.org-nav p {
  margin: 0 8px 8px;
  color: var(--mute);
  font-size: 13px;
}

.org-nav button,
.org-nav a {
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 8px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.org-nav button[aria-pressed="true"],
.org-nav a[aria-current="page"] {
  background: #9e5da522;
  color: var(--brand-dark);
  font-weight: 700;
}

.org-board {
  --org-stem: 48px;
  --org-drop: 22px;
  --org-reach: 28px;
  --org-gap: 20px;
  --org-branch: 56px;
  --org-ink: var(--brand);
  --org-h: repeating-linear-gradient(
    to right,
    var(--brand) 0 3px,
    transparent 3px 6px
  );
  --org-v: repeating-linear-gradient(
    to bottom,
    var(--brand) 0 3px,
    transparent 3px 6px
  );
  --duration-base: 250ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  padding-top: 28px;
}

.org-tier {
  display: flex;
  justify-content: center;
  position: relative;
  margin: 0;
  padding-bottom: var(--org-stem);
}

/* เส้นตั้งจากกลางแถวบน ลงไปชนเส้นนอนของแถวล่าง */
.org-tier::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 1px;
  height: calc(var(--org-stem) + 1px);
  background: var(--org-v);
  transform: translateX(-50%);
}

.org-node {
  position: relative;
  width: min(220px, 46%);
  padding: var(--org-drop) 16px 0;
}

.org-tier:first-child .org-node { padding-top: 0; }

/* เส้นนอนและเส้นตั้งหนา 1px ช่วงละ 3px ให้บางเท่ากัน */
.org-node::before,
.org-node::after {
  content: "";
  position: absolute;
  top: 0;
  z-index: 0;
  width: 50%;
  height: calc(var(--org-drop) + var(--org-reach));
  border: 0;
  pointer-events: none;
}

.org-node::before {
  right: 50%;
  background: var(--org-h) top / 100% 1px no-repeat;
}

.org-node::after {
  left: 50%;
  background:
    var(--org-h) top / 100% 1px no-repeat,
    var(--org-v) left / 1px 100% no-repeat;
}

.org-node:first-child::before { background: none; }

.org-node:last-child::after { background: none; }

.org-node:last-child::before {
  background:
    var(--org-h) top / 100% 1px no-repeat,
    var(--org-v) right / 1px 100% no-repeat;
}

.org-tier:first-child .org-node::before,
.org-tier:first-child .org-node::after { display: none; }

.org-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
  position: relative;
  column-gap: var(--org-gap);
  padding-top: var(--org-drop);
}

.org-cols::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12.5%;
  right: 12.5%;
  height: 1px;
  background: var(--org-h);
}

.org-col {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 16px;
  align-items: start;
  min-width: 0;
  padding-top: var(--org-drop);
}

.org-col::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: calc(var(--org-drop) * -1);
  left: 50%;
  width: 1px;
  height: calc(var(--org-drop) * 2 + 1px);
  background: var(--org-v);
  transform: translateX(-50%);
  pointer-events: none;
}

.org.is-filtered .org-tier::after,
.org.is-filtered .org-node::before,
.org.is-filtered .org-node::after,
.org.is-filtered .org-col::before,
.org.is-filtered .org-cols::before { display: none; }

.org.is-filtered .org-tier,
.org.is-filtered .org-node,
.org.is-filtered .org-col,
.org.is-filtered .org-cols { padding-top: 0; padding-bottom: 0; }

.org.is-filtered .org-board { padding-bottom: 48px; }

.org.is-filtered .org-cols {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.org.is-filtered .org-tier,
.org.is-filtered .org-col {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  width: 100%;
}

.org.is-filtered .org-tier { margin: 0 0 32px; }

.org.is-filtered .org-node {
  width: auto;
  min-width: 0;
  padding: 0;
}

.org.is-filtered .org-col h2 {
  margin: 0 0 4px;
  font-size: 18px;
  text-align: left;
}

.org.is-filtered .org-card[hidden],
.org.is-filtered .org-tier[hidden],
.org.is-filtered .org-col[hidden],
.org.is-filtered .org-node[hidden] { display: none; }

.org.is-filtered .org-card,
.org.is-filtered .org-tier .org-card {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0 0 18px;
  overflow: hidden;
}

.org.is-filtered .org-card::before { display: none; }

.org.is-filtered .org-card img,
.org.is-filtered .org-tier .org-card img,
.org.is-filtered .org-card img.is-inset {
  position: static;
  top: auto;
  left: auto;
  width: 100%;
  height: 200px;
  max-width: none;
  max-height: none;
  transform: none;
  background: #ead8f0;
}

.org.is-filtered .org-card .staff-fallback {
  position: static;
  width: 72px;
  height: 72px;
  margin: 64px auto;
  transform: none;
}

.org.is-filtered .org-name,
.org.is-filtered .org-tier .org-name {
  margin: 14px 16px 0;
  font-size: 20px;
  white-space: normal;
}

.org.is-filtered .org-role {
  margin: 4px 16px 0;
  font-size: 14px;
}

.org.is-filtered .org-phone {
  margin: 8px 16px 0;
  font-size: 15px;
}

@media (hover: hover) {
  .org.is-filtered .org-card:hover img,
  .org.is-filtered .org-card:focus-within img {
    transform: none;
  }
}

.org-col h2 {
  grid-column: 1 / -1;
  min-width: 0;
  min-height: 2.8em;
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
  overflow-wrap: anywhere;
  text-align: center;
}

.org-card[hidden],
.org-tier[hidden],
.org-col[hidden] { display: none; }

.org-card {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  height: auto;
  margin: 28px auto 0;
  padding: 98px 10px 10px;
  border: 1px solid #ffffffd0;
  border-radius: 16px;
  background: #ffffffb0;
  box-shadow: inset 0 1px 0 #ffffffb3, 0 8px 18px #00000012;
  text-align: center;
  backdrop-filter: blur(14px) saturate(1.45);
  transition:
    transform var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}

@media (hover: hover) {
  .org-card:hover,
  .org-card:focus-within {
    transform: translateY(-4px);
    box-shadow: inset 0 1px 0 #ffffffb3, 0 16px 28px #7d448524;
  }
}

/* เลนส์ฝ้าขอบจาง อยู่ในการ์ด ไม่ล้นขอบ และคนละมุม */
.org-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #9e5da524;
  border: 0;
  box-shadow: none;
  backdrop-filter: blur(12px) saturate(1.35);
  -webkit-mask-image: radial-gradient(circle, #000 35%, transparent 72%);
  mask-image: radial-gradient(circle, #000 35%, transparent 72%);
  opacity: 0.8;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-out);
}

@media (hover: hover) {
  .org-card:hover::before,
  .org-card:focus-within::before { opacity: 1; }
}

.org-col > .org-card:nth-child(6n+2)::before { top: 10px; left: 8px; }
.org-col > .org-card:nth-child(6n+3)::before { top: 12px; right: 8px; }
.org-col > .org-card:nth-child(6n+4)::before { bottom: 10px; left: 8px; }
.org-col > .org-card:nth-child(6n+5)::before { right: 8px; bottom: 12px; }
.org-col > .org-card:nth-child(6n+6)::before { top: 40px; left: 8px; }
.org-col > .org-card:nth-child(6n+7)::before { top: 22px; right: 10px; }

.org-tier .org-node:nth-child(1) .org-card::before { top: 14px; left: 10px; }
.org-tier .org-node:nth-child(2) .org-card::before { top: 16px; right: 10px; }
.org-tier:nth-child(3) .org-node:nth-child(1) .org-card::before { top: auto; bottom: 12px; left: 10px; }
.org-tier:nth-child(3) .org-node:nth-child(2) .org-card::before { top: auto; right: auto; bottom: 14px; left: 12px; }

.org-tier .org-card { width: 100%; margin-bottom: 0; padding-top: 124px; }

.org-card img {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: -26px;
  width: auto;
  max-width: 86%;
  height: 108px;
  max-height: 108px;
  object-fit: contain;
  object-position: bottom center;
  transform: translateX(-50%);
  transition: transform var(--duration-base) var(--ease-out);
}

@media (hover: hover) {
  .org-card:hover img,
  .org-card:focus-within img {
    transform: translateX(-50%) translateY(-6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .org-card,
  .org-card img,
  .org-card::before { transition: none; }
}

.org-tier .org-card img { top: -32px; height: 136px; }

.org-role,
.org-name,
.org-phone { position: relative; z-index: 1; margin: 0; }

.org-name {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

.org-tier .org-name { font-size: 16px; }

.org-role {
  margin-top: 2px;
  color: var(--mute);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.35;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.org-phone {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.3;
}

.org-phone a { color: var(--brand-dark); text-decoration: none; }

.org-empty { margin: 12px 0 0; color: var(--mute); }

/* ฝ่ายไปอยู่ช่องว่างใต้เมนูหลัก การ์ดได้ความกว้างของหน้าคืน */
@media (min-width: 901px) {
  .org-nav {
    position: fixed;
    left: calc(var(--g) + 80px);
    top: calc(var(--g) + 340px);
    width: 260px;
    z-index: 4;
    margin: 0;
    overflow: auto;
    max-height: calc(100vh - var(--g) - 356px);
    --duration-base: 250ms;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    transition: top var(--duration-base) var(--ease-out);
  }

  .org-nav.is-over-menu { z-index: 60; }

  body:has(.org-nav) footer.site-foot {
    position: relative;
    z-index: 6;
  }
}

@media (max-width: 1100px) {
  .org-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .org-cols::before { left: 25%; right: 25%; }

  .org-node { width: min(220px, 70%); }
}

@media (max-width: 900px) {
  .sheet:has(.org) > h1 { padding-right: 0; }

  .org-search {
    float: none;
    width: 100%;
    margin: 0 0 16px;
  }

  .org-tier { flex-direction: column; align-items: center; }

  .org-tier::after,
  .org-node::before,
  .org-node::after,
  .org-cols::before,
  .org-col::before { display: none; }

  .org-cols { grid-template-columns: 1fr; }

  .org-more { display: none; }
}

.org-more {
  --duration-base: 250ms;
  --duration-slow: 1400ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  position: fixed;
  right: var(--g);
  bottom: 28px;
  left: auto;
  z-index: 5;
  margin: 0;
  padding: 8px 16px;
  border: 1px solid #ffffffd0;
  border-radius: 999px;
  background: #ffffffcc;
  color: var(--brand-dark);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 8px 18px #00000012;
  transition:
    opacity var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

.org-more::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 8px;
  border-right: 1.5px solid var(--brand-dark);
  border-bottom: 1.5px solid var(--brand-dark);
  transform: rotate(45deg) translateY(-2px);
  animation: org-more-nudge var(--duration-slow) var(--ease-out) infinite;
}

.org-more.is-gone {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

.org.is-filtered .org-more { display: none; }

/* การ์ดฝ่าย: รูปบนพื้นสีแบรนด์ที่ต่างกัน ชื่อ หน้าที่ เบอร์ อีเมล */
.sheet .staff-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.staff-card {
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 28px #00000014;
  text-align: center;
}

.staff-photo {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 240px;
}

.staff-card:nth-child(8n + 1) .staff-photo { background: #e7d0ee; }
.staff-card:nth-child(8n + 2) .staff-photo { background: #d4b3e0; }
.staff-card:nth-child(8n + 3) .staff-photo { background: #f3e4f6; }
.staff-card:nth-child(8n + 4) .staff-photo { background: #c9a6d4; }
.staff-card:nth-child(8n + 5) .staff-photo { background: #eddff3; }
.staff-card:nth-child(8n + 6) .staff-photo { background: #dcc0e6; }
.staff-card:nth-child(8n + 7) .staff-photo { background: #f7eef8; }
.staff-card:nth-child(8n + 8) .staff-photo { background: #c4a0cf; }

.org-card .staff-fallback {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 8px;
  width: 64px;
  height: 64px;
  margin: 0;
  transform: translateX(-50%);
}

.staff-fallback {
  width: 96px;
  height: 96px;
  margin-bottom: 36px;
  background: var(--brand-dark);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4' fill='black'/%3E%3Cpath fill='black' d='M4 20c1.2-3.6 4-5.5 8-5.5S18.8 16.4 20 20z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4' fill='black'/%3E%3Cpath fill='black' d='M4 20c1.2-3.6 4-5.5 8-5.5S18.8 16.4 20 20z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.staff-photo img {
  width: auto;
  max-width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  object-fit: contain;
  object-position: bottom center;
  transform-origin: center bottom;
  transition: transform var(--duration-slow) var(--ease-spring);
}

.org-card img.is-inset {
  top: -20px;
  height: 108px;
  max-height: 108px;
  max-width: 86%;
}

.staff-photo img.is-inset {
  height: 94%;
  max-height: 94%;
  max-width: 100%;
}

@media (hover: hover) {
  .staff-card:hover .staff-photo img {
    transform: scale(1.05);
    transition-duration: var(--duration-base);
    transition-timing-function: var(--ease-out);
  }
}

.sheet .staff-name {
  margin: 14px 16px 0;
  color: var(--brand-dark);
  font-size: 18px;
  line-height: 1.35;
}

.sheet .staff-role {
  margin: 6px 16px 0;
  color: #5c5c5c;
  font-size: 14px;
  line-height: 1.45;
}

.sheet .staff-meta {
  margin: 12px 0 0;
  padding: 0 16px 18px;
  list-style: none;
  text-align: left;
}

.staff-meta li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 8px;
  color: #333;
  font-size: 15px;
  line-height: 1.4;
}

.staff-meta a { color: inherit; text-decoration: none; }

.staff-meta li::before {
  content: "";
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  background: var(--brand);
  -webkit-mask: var(--mark) center / contain no-repeat;
  mask: var(--mark) center / contain no-repeat;
}

.staff-focus { --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 3h12a1 1 0 0 1 1 1v17l-7-4-7 4V4a1 1 0 0 1 1-1z'/%3E%3C/svg%3E"); }

.staff-phone { --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 3h3l1.5 4-2 1.2a12 12 0 0 0 6.3 6.3L17 12.5 21 14v3a2 2 0 0 1-2.2 2A17 17 0 0 1 5 5.2 2 2 0 0 1 7 3z'/%3E%3C/svg%3E"); }

.staff-mail { --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm9 7L4 7v.2l8 5 8-5V7l-8 5z'/%3E%3C/svg%3E"); }

@media (max-width: 1200px) {
  .sheet .staff-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .sheet .staff-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .sheet .staff-grid { grid-template-columns: 1fr; }
}

@keyframes org-more-nudge {
  50% { transform: rotate(45deg) translateY(2px); }
}

@media (prefers-reduced-motion: reduce) {
  .org-more::after { animation: none; }

  .org-nav,
  .staff-photo img { transition: none; }
}

/* ===== หน้าคน ===== */

.staff-profile {
  max-width: 720px;
}

.staff-profile img {
  display: block;
  width: min(100%, 240px);
  height: auto;
  margin-bottom: 16px;
  background: #ead8f0;
}

.staff-profile h2 {
  margin: 28px 0 8px;
  font-size: 22px;
}

/* ===== มือถือ: หน้าฝ่าย people เลิกกระจกฝ้า (F11) ===== */
/* พื้นโปร่ง+เบลอบนจอเล็กทำให้ตัวหนังสือกลืนกับพื้นหลังและกินแรงเครื่อง */
@media (max-width: 768px) {
  .org-search input,
  .org-nav,
  .org-card,
  .org-more {
    background: #fff;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .org-nav,
  .org-card {
    border: 0;
  }

  .org-card::before {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}