/* [baiboon_staff] on the current site — matches the old /ทำเนียบครู/ cards (school green #008836, gold names) */
.bbs-dir{--bbs-green:#008836;--bbs-gold:#f9c41a;font-family:Prompt,sans-serif}
.bbs-dir-group{margin:0 0 56px;scroll-margin-top:120px}
.bbs-dir-h{margin:0 0 20px;display:flex;flex-direction:column;gap:2px;font-size:24px;line-height:1.3;font-weight:700}
.bbs-dir-en{color:#000;font-family:Inder,Prompt,sans-serif}
.bbs-dir-th{color:var(--bbs-green)}
.bbs-dir-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}
.bbs-dir-card{margin:0;display:flex;flex-direction:column;background:var(--bbs-green);overflow:hidden}
.bbs-dir-photo{aspect-ratio:2/3;background:#e7efe9;overflow:hidden}
.bbs-dir-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block;transition:transform .4s ease}
.bbs-dir-card:hover .bbs-dir-photo img{transform:scale(1.04)}
.bbs-dir-card figcaption{flex:1;padding:12px 14px 14px;display:flex;flex-direction:column;gap:4px;line-height:1.45}
.bbs-dir-card figcaption b{color:var(--bbs-gold);font-size:15px;font-weight:600}
.bbs-dir-card figcaption span{color:#fff;font-size:13px}
@media (max-width:600px){
  .bbs-dir-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .bbs-dir-h{font-size:20px}
  .bbs-dir-card figcaption{padding:10px}
  .bbs-dir-card figcaption b{font-size:14px}
  .bbs-dir-card figcaption span{font-size:12px}
}
@media (prefers-reduced-motion:reduce){.bbs-dir-photo img{transition:none}}