/* 000 — Shared About School page header. Uses the existing CMS title, summary and image. */
.p000-about-page{background:#f5f8f6}
.p000-about-page .inner-page-hero,
.p000-about-page.p425-past-directors .inner-page-hero,
.p000-about-page.p415-history-page .inner-page-hero{background:#eef6f0!important;border-bottom:1px solid #e2eee6!important;overflow:visible}
.p000-about-page .inner-page-hero::before{display:none!important}
.p000-about-page .inner-page-hero-inner,
.p000-about-page.p425-past-directors .inner-page-hero-inner,
.p000-about-page.p425-past-directors .inner-page-hero.has-image .inner-page-hero-inner{
  box-sizing:border-box;display:block!important;min-height:0!important;
  width:100%;max-width:min(1160px,calc(100% - 36px));
  padding:19px 0 23px!important;margin:0 auto!important;
}
.p000-about-page .content-breadcrumb,
.p000-about-page.p425-past-directors .content-breadcrumb{
  margin:0 0 14px!important;display:flex;align-items:center;gap:8px;
  color:#5c776a!important;font:600 13px/1.55 Sarabun,sans-serif!important
}
.p000-about-page .content-breadcrumb a{color:#0b7550!important}
.p000-about-page .content-breadcrumb span{color:#718779!important}
.p000-about-hero-card{
  box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,38%);
  align-items:center;gap:clamp(18px,3.4vw,42px);padding:clamp(20px,2.6vw,32px);
  min-height:245px;background:#104d3d;color:#fff;border-radius:22px;
  box-shadow:0 14px 26px rgba(14,74,52,.08);overflow:hidden;
}
.p000-about-hero-copy{min-width:0}
.p000-about-eyebrow{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:9px;
  color:#caeadc;font:700 13px/1.45 Sarabun,sans-serif}
.p000-about-eyebrow i{font-size:13px}
.p000-about-eyebrow span{letter-spacing:.03em;color:#a8d7c2;font-size:11px;font-weight:650}
.p000-about-page .p000-about-hero-card .inner-page-title h1,
.p000-about-page.p425-past-directors .p000-about-hero-card .inner-page-title h1,
.p000-about-page.p428-about-subpage .p000-about-hero-card .inner-page-title h1{
  color:#fff!important;font:800 clamp(27px,3.1vw,39px)/1.24 Sarabun,sans-serif!important;
  margin:0!important;letter-spacing:-.015em;text-shadow:none!important;overflow-wrap:break-word;
}
.p000-about-page .p000-about-hero-card .inner-page-summary{color:#e3f1e9!important;
  font:400 clamp(14px,1.3vw,16px)/1.72 Sarabun,sans-serif!important;
  max-width:56ch;margin:11px 0 0!important}
.p000-about-hero-media{box-sizing:border-box;position:relative;overflow:hidden;height:190px;min-width:0;
  background:#d9eee2;border-radius:14px;border:1px solid rgba(255,255,255,.2)}
.p000-about-hero-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;}
.p000-about-page .inner-page-grid{padding-top:20px!important}
.p000-about-page.p425-past-directors .inner-page-grid{padding-top:20px!important}
/* CMS, added to existing "ข้อมูลหน้า / บทความ" page — not an installer */
.p000-about-admin{scroll-margin-top:82px}
.p000-about-admin-title{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.p000-about-admin-title h3{font:800 20px/1.3 Sarabun,sans-serif;color:#174b39;margin:0 0 6px}
.p000-about-admin-title h3 i{color:#14865d;margin-right:6px}
.p000-about-admin-title p{font:400 14px/1.6 Sarabun,sans-serif;color:#5f796c;margin:0}
.p000-about-admin-grid{display:grid;grid-template-columns:minmax(180px,34%) minmax(0,1fr);gap:18px;align-items:start}
.p000-about-admin-photo{border-radius:14px;overflow:hidden;border:1px solid #daebe0;background:#eaf2eb;min-height:145px}
.p000-about-admin-photo img{display:block;width:100%;height:175px;object-fit:cover}
.p000-about-admin-form{display:flex;flex-direction:column;gap:12px;min-width:0}
.p000-about-admin-form .p407-field{margin:0}
.p000-about-admin-form button{align-self:flex-start}
.p000-about-admin-note{margin:15px 0 0;font-size:13px;line-height:1.6;color:#547565}
.p000-about-builder-note{display:flex;align-items:flex-start;gap:9px;padding:10px 13px;margin:14px 0;
  border:1px solid #dbebe1;border-radius:11px;background:#f0f8f3;color:#295c45;font:500 13px/1.55 Sarabun,sans-serif}
@media(max-width:760px){
  .p000-about-page .inner-page-hero-inner,
  .p000-about-page.p425-past-directors .inner-page-hero-inner{max-width:calc(100% - 24px);padding:13px 0 15px!important}
  .p000-about-page .content-breadcrumb{margin-bottom:10px!important;font-size:12px!important}
  .p000-about-hero-card{grid-template-columns:minmax(0,1fr);gap:16px;padding:21px 19px;min-height:0;border-radius:17px}
  .p000-about-page .p000-about-hero-card .inner-page-title h1,
  .p000-about-page.p425-past-directors .p000-about-hero-card .inner-page-title h1{font-size:clamp(25px,6.2vw,34px)!important}
  .p000-about-hero-media{height:170px;border-radius:12px}
  .p000-about-page .inner-page-grid{padding-top:15px!important}
  .p000-about-admin-grid{grid-template-columns:1fr}
  .p000-about-admin-photo img{height:160px}
}
@media(prefers-reduced-motion:reduce){.p000-about-hero-card *{animation:none!important}}

/* 000-P002: About mega-menu sub-group headings are quieter than the main menu title. */
.site-header .site-nav .p416-about-menu .p424-menu-column > h3 {
  font-family:Sarabun,sans-serif!important;
  font-size:14px!important;
  line-height:1.45!important;
  font-weight:700!important;
  color:#507263!important;
  letter-spacing:0!important;
  padding:0 2px 8px!important;
  margin:0 0 6px!important;
  border-bottom:1px solid #e0eae4!important;
}
/* 000-P002: Compact ONLY the school personnel directory; keep all staff and categories. */
.p000-about-page .p423-directory > .p422-directory-group:first-child {
  margin-top:0!important;
}
.p000-about-page .p423-directory .p422-people-grid {
  gap:16px!important;
}
/* Former portrait cards were 360px / 280px. New maximums are 288px / 224px (-20%). */
.p000-about-page .p423-directory :is(.p423-directory-director,.p423-directory-deputy) .p422-person-card {
  box-sizing:border-box!important;
  width:min(288px,100%)!important;
  flex:0 1 288px!important;
  max-width:288px!important;
}
.p000-about-page .p423-directory :is(.p423-directory-teachers,.p423-directory-support) .p422-person-card {
  box-sizing:border-box!important;
  width:min(224px,100%)!important;
  flex:0 1 min(224px,calc((100% - 48px)/4))!important;
  min-width:0!important;
  max-width:224px!important;
}
@media(max-width:1080px){
  .p000-about-page .p423-directory :is(.p423-directory-teachers,.p423-directory-support) .p422-person-card {
    flex-basis:min(224px,calc((100% - 32px)/3))!important;
  }
}
@media(max-width:700px){
  .p000-about-page .p423-directory :is(.p423-directory-teachers,.p423-directory-support) .p422-person-card {
    flex-basis:min(224px,calc((100% - 14px)/2))!important;
  }
  .p000-about-page .p423-directory :is(.p423-directory-director,.p423-directory-deputy) .p422-person-card {
    flex-basis:min(288px,100%)!important;
  }
  .p000-about-page .p423-directory .p422-people-grid {gap:14px!important;}
}
@media(max-width:360px){
  .p000-about-page .p423-directory :is(.p423-directory-teachers,.p423-directory-support) .p422-person-card {
    flex-basis:min(224px,100%)!important;
  }
}