/* =========================================================
   PASHUPATI SECONDARY SCHOOL
   REFINED GLOBAL STYLESHEET
   ---------------------------------------------------------
   Purpose : Shared styling for all public website pages
   Standard: SR Infotech School Website Framework
   Notes   : Duplicate and conflicting header rules removed;
             responsive behaviour consolidated and documented.
========================================================= */

/* =========================================================
   STYLESHEET INDEX
   01. Design Tokens
   02. Reset & Base
   03. Shared Layout
   04. Work-in-Progress Banner
   05. Header
   06. Navigation
   07. Homepage Hero
   08. Shared Section Heading
   09. Homepage Notices
   10. School Overview
   11. Quick Access
   12. Gallery Preview
   13. Contact CTA
   14. Footer
   15. Inner Page Hero
   16. Notice Listing
   17. Directory Pages
   18. About School
   19. Alumni Controls
   20. Notice Detail
========================================================= */


/* =========================================================
   01. DESIGN TOKENS
========================================================= */


:root{

  --brand:#1e4d8f;
  --brand-dark:#153b70;
  --brand-soft:#edf4fc;
  --ink:#1f2d3d;
  --muted:#66758a;
  --surface:#fff;
  --page:#f6f8fb;
  --line:#dfe7f1;
  --footer:#101f3a;
  --danger:#d72525;
  --radius:14px;
  --shadow:0 10px 28px rgba(22,50,86,.10);
  --container:1400px;
  --transition:.22s ease;
  --shadow-soft:0 6px 20px rgba(22,50,86,.065);
  --shadow-hover:0 18px 36px rgba(22,50,86,.14);

}


/* =========================================================
   02. RESET & BASE
========================================================= */


*{

  box-sizing:border-box;
  margin:0;
  padding:0;

}

html{

  scroll-behavior:smooth;

}

body{

  min-width:320px;
  font-family:"Noto Sans Devanagari","Mukta",sans-serif;
  color:var(--ink);
  background:var(--page);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;

}

body.menu-open{

  overflow:hidden;

}

a{

  color:inherit;
  text-decoration:none;

}

button,
input,
select,
textarea{

  font:inherit;

}

button{

  border:0;

}

img{

  display:block;
  max-width:100%;

}


/* =========================================================
   03. SHARED LAYOUT
========================================================= */


.wrap{

  width:min(100%,var(--container));
  margin-inline:auto;
  padding-inline:28px;

}


/* =========================================================
   04. WORK-IN-PROGRESS BANNER
========================================================= */


.wip-banner{

  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:7px 48px 7px 16px;
  text-align:center;
  color:var(--danger);
  background:#fff5f5;
  border-bottom:2px solid #ef3f3f;
  font-weight:700;

}

.wip-close{

  position:absolute;
  right:14px;
  top:50%;
  width:28px;
  height:28px;
  border-radius:50%;
  color:#c52b2b;
  background:transparent;
  cursor:pointer;
  transform:translateY(-50%);

}

.wip-close:hover{

  background:#ffe2e2;

}


/* =========================================================
   05. HEADER
========================================================= */

/* Header Surface */
.site-header{
  background:var(--surface);
  border-bottom:1px solid var(--line);
}

/*
  The header uses two columns:
  1. School identity
  2. Contact controls

  The header container is intentionally wider than normal page
  sections so the complete desktop header remains on one row.
*/
.site-header .header-inner{
  width:min(100%,1700px);
  min-height:104px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:28px;
}

/* School Identity */
.school-identity{
  min-width:0;
  display:flex;
  align-items:center;
  gap:18px;
}

.school-logo{
  width:76px;
  height:76px;
  flex:0 0 76px;
  object-fit:contain;
  padding:5px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:50%;
  box-shadow:0 6px 18px rgba(22,50,86,.10);
}

.school-copy{
  min-width:0;
}

.school-copy h1{
  color:#183b68;
  font-size:clamp(1.45rem,2vw,2.12rem);
  line-height:1.25;
  font-weight:800;
  white-space:nowrap;
}

/* School Location */
.school-meta{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:nowrap;
  margin-top:8px;
  color:#5d6b7d;
  font-size:.9rem;
  font-weight:600;
  white-space:nowrap;
}

.school-meta-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.school-meta-icon{
  width:26px;
  height:26px;
  flex:0 0 26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  font-size:.78rem;
}

.province-icon{
  color:#295fb4;
  background:#eef4ff;
}

.location-icon{
  color:#dc3c57;
  background:#fff1f3;
}

.school-meta-divider{
  color:#b8c2ce;
  font-weight:400;
}

/* Header Contact */
.header-contact{
  min-width:max-content;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:11px;
}

.contact-chip{
  min-height:48px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 13px;
  color:#30445f;
  background:#f5f8fc;
  border:1px solid var(--line);
  border-radius:11px;
  transition:
    transform var(--transition),
    border-color var(--transition),
    box-shadow var(--transition);
}

.contact-chip:hover{
  transform:translateY(-2px);
  border-color:#cad8e9;
  box-shadow:0 5px 18px rgba(22,50,86,.06);
}

.chip-icon{
  color:var(--brand);
  font-size:1.05rem;
}

.contact-chip small{
  display:block;
  color:#7a8798;
  font-size:.68rem;
  line-height:1.1;
  font-weight:700;
}

.contact-chip strong{
  display:block;
  margin-top:2px;
  font-size:.85rem;
  line-height:1.2;
  white-space:nowrap;
}

.header-social-btn{
  width:42px;
  height:42px;
  flex:0 0 42px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--brand);
  background:#f1f5fb;
  border:1px solid #dce5f1;
  border-radius:10px;
  font-family:Arial,sans-serif;
  font-weight:700;
  transition:var(--transition);
}

.header-social-btn:hover{
  color:#fff;
  background:var(--brand);
  transform:translateY(-2px);
}

/* Medium Desktop */
@media (max-width:1450px) and (min-width:1101px){
  .site-header .header-inner{
    gap:18px;
  }

  .school-copy h1{
    font-size:1.65rem;
  }

  .school-meta{
    gap:8px;
    font-size:.8rem;
  }

  .school-meta-icon{
    width:23px;
    height:23px;
    flex-basis:23px;
  }

  .contact-chip{
    min-height:44px;
    padding:7px 10px;
  }

  .contact-chip strong{
    font-size:.78rem;
  }
}

/* Tablet: hide long email chip but keep one-row header */
@media (max-width:1100px) and (min-width:821px){
  .site-header .header-inner{
    gap:18px;
  }

  .email-chip{
    display:none;
  }

  .school-copy h1{
    font-size:1.5rem;
  }

  .school-meta{
    font-size:.8rem;
  }
}

/* Mobile */
@media (max-width:820px){
  .site-header .header-inner{
    width:min(100%,var(--container));
    min-height:auto;
    display:flex;
    padding-top:13px;
    padding-bottom:13px;
  }

  .school-logo{
    width:64px;
    height:64px;
    flex-basis:64px;
  }

  .school-copy h1{
    font-size:1.5rem;
    white-space:normal;
  }

  .header-contact{
    display:none;
  }

  .school-meta{
    flex-wrap:wrap;
    gap:5px 9px;
    white-space:normal;
    font-size:.8rem;
  }

  .school-meta-divider{
    display:none;
  }
}

@media (max-width:560px){
  .school-identity{
    gap:11px;
  }

  .school-logo{
    width:57px;
    height:57px;
    flex-basis:57px;
  }

  .school-copy h1{
    font-size:1.2rem;
  }

  .school-meta{
    margin-top:5px;
    font-size:.74rem;
  }

  .school-meta-item{
    width:100%;
  }
}


/* =========================================================
   06. NAVIGATION
========================================================= */


.navbar{

  position:sticky;
  top:0;
  z-index:100;
  color:#fff;
  background:var(--brand);
  border-top:1px solid var(--brand-dark);
  border-bottom:1px solid var(--brand-dark);
  box-shadow:0 5px 16px rgba(13,45,86,.12);

}

.nav-inner{

  position:relative;

}

.navbar ul{

  list-style:none;

}

#mainMenu{

  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  padding:9px 0;

}

#mainMenu>li{

  position:relative;

}

.navbar a,.dropdown-toggle{

  position:relative;
  display:flex;
  align-items:center;
  gap:5px;
  padding:10px 15px;
  color:rgba(255,255,255,.95);
  background:transparent;
  border-radius:8px;
  font-size:.98rem;
  font-weight:650;
  cursor:pointer;
  transition:.22s;

}

#mainMenu>li>a:hover,#mainMenu>li>.dropdown-toggle:hover{

  color:#fff;
  background:rgba(255,255,255,.10);
  transform:translateY(-1px);

}

#mainMenu>li>a.active{

  color:var(--brand-dark);
  background:#fff;
  box-shadow:0 4px 12px rgba(8,35,72,.16);

}

.login-link{

  margin-left:4px;
  border:1px solid rgba(255,255,255,.42);

}

.login-link:hover{

  color:var(--brand-dark) !important;
  background:#fff !important;

}

.dropdown{

  position:absolute;
  top:calc(100% + 7px);
  left:0;
  min-width:235px;
  padding:7px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:0 14px 34px rgba(13,45,86,.18);
  opacity:0;
  visibility:hidden;
  transform:translateY(7px);
  transition:.18s;

}

.dropdown a{

  display:block;
  padding:10px 12px;
  color:#2d405a;
  white-space:nowrap;
  border-radius:7px;
  font-size:.94rem;
  font-weight:550;

}

.dropdown a:hover{

  color:var(--brand);
  background:var(--brand-soft);
  transform:none;

}

.has-dropdown:hover .dropdown,.has-dropdown:focus-within .dropdown,.has-dropdown.open .dropdown{

  opacity:1;
  visibility:visible;
  transform:translateY(0);

}

.menu-toggle{

  display:none;

}


/* =========================================================
   07. HOMEPAGE HERO
========================================================= */


.hero-section{

  padding:34px 0 28px;

}

.hero-grid{

  display:grid;
  grid-template-columns:minmax(0,1fr) 290px;
  gap:26px;
  align-items:stretch;

}

.hero-media{

  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(160deg,#dfe3e8,#c7cdd6);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 14px 36px rgba(22,50,86,.14);

}

.slide{

  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .6s ease;

}

.slide.active{

  z-index:1;
  opacity:1;

}

.slide img{

  width:100%;
  height:100%;
  object-fit:cover;

}

.slide-caption{

  position:absolute;
  right:0;
  bottom:0;
  left:0;
  padding:42px 18px 15px;
  color:#fff;
  background:linear-gradient(transparent,rgba(10,20,35,.84));
  font-size:.94rem;
  font-weight:600;

}

.arrow{

  position:absolute;
  top:50%;
  z-index:3;
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:rgba(0,0,0,.38);
  border:1px solid rgba(255,255,255,.25);
  border-radius:50%;
  cursor:pointer;
  transform:translateY(-50%);

}

.arrow.left{

  left:13px;

}

.arrow.right{

  right:13px;

}

.arrow:hover{

  background:rgba(0,0,0,.62);

}

.dots{

  position:absolute;
  right:0;
  bottom:46px;
  left:0;
  z-index:3;
  display:flex;
  justify-content:center;
  gap:8px;

}

.dot{

  width:9px;
  height:9px;
  padding:0;
  background:rgba(255,255,255,.58);
  border-radius:50%;
  cursor:pointer;
  transition:.2s;

}

.dot.active{

  width:23px;
  background:#fff;
  border-radius:999px;

}

.sidebar{

  display:flex;
  flex-direction:column;
  gap:16px;

}

.staff-card{

  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:20px 16px;
  text-align:center;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  transition:.2s;

}

.staff-card:hover{

  transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(22,50,86,.14);

}

.staff-avatar{

  width:96px;
  height:96px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 12px;
  color:#fff;
  background:linear-gradient(140deg,#8fa6c9,#5a749e);
  border:4px solid #eef3f9;
  border-radius:50%;
  font-size:1.3rem;
  font-weight:700;

}

.staff-avatar img{

  width:100%;
  height:100%;
  object-fit:cover;

}

.staff-card h2{

  color:#183b68;
  font-size:1.04rem;
  line-height:1.4;

}

.staff-card p{

  display:inline-block;
  margin-top:8px;
  padding:7px 12px;
  color:var(--brand);
  background:var(--brand-soft);
  border-radius:999px;
  font-size:.78rem;
  font-weight:600;

}


/* =========================================================
   08. SHARED SECTION HEADING
========================================================= */


.events-section{

  padding:24px 0 64px;

}

.section-heading{

  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:20px;

}

.section-heading-main{

  display:flex;
  align-items:center;
  gap:13px;

}

.section-icon{

  width:46px;
  height:46px;
  flex:0 0 46px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:var(--brand);
  border-radius:12px;
  box-shadow:0 7px 18px rgba(30,77,143,.20);

}

.section-heading h2{

  color:#183b68;
  font-size:1.45rem;
  line-height:1.3;
  font-weight:800;

}

.section-heading p{

  margin-top:3px;
  color:#718096;
  font-size:.88rem;

}

.section-link{

  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 12px;
  color:var(--brand);
  background:#fff;
  border:1px solid #d5e2f2;
  border-radius:9px;
  font-size:.9rem;
  font-weight:700;
  transition:.2s;

}

.section-link:hover{

  color:#fff;
  background:var(--brand);
  transform:translateY(-1px);

}


/* =========================================================
   09. HOMEPAGE NOTICES
========================================================= */


#noticesList{

  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:15px;

}

.notice-card{

  position:relative;
  min-height:112px;
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:17px 18px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 5px 18px rgba(22,50,86,.055);
  transition:.2s;

}

.notice-card::before{

  content:"";
  position:absolute;
  top:17px;
  bottom:17px;
  left:0;
  width:4px;
  background:var(--brand);
  border-radius:0 5px 5px 0;

}

.notice-card:hover{

  transform:translateY(-3px);
  border-color:#cfdeef;
  box-shadow:0 12px 28px rgba(22,50,86,.11);

}

.notice-symbol{

  width:38px;
  height:38px;
  flex:0 0 38px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-left:3px;
  color:var(--brand);
  background:var(--brand-soft);
  border-radius:10px;

}

.notice-content{

  min-width:0;
  flex:1;

}

.notice-title{

  color:#183b68;
  font-size:1rem;
  line-height:1.55;
  font-weight:700;

}

.notice-title a:hover{

  color:var(--brand);

}

.notice-date{

  margin-top:8px;
  color:#718096;
  font-size:.8rem;

}

.notice-arrow{

  align-self:center;
  color:#9aabc0;
  font-size:1.1rem;
  transition:.2s;

}

.notice-card:hover .notice-arrow{

  color:var(--brand);
  transform:translateX(3px);

}

.notice-empty{

  grid-column:1/-1;
  min-height:auto;

}


/* =========================================================
   14. FOOTER
========================================================= */


footer{

  padding:48px 0 0;
  color:#d8e0ee;
  background:var(--footer);

}

.foot-grid{

  display:grid;
  grid-template-columns:1.3fr 1fr 1.1fr;
  gap:40px;
  padding-bottom:34px;

}

.foot-grid h2{

  margin-bottom:14px;
  color:#fff;
  font-size:1.05rem;

}

.foot-grid p{

  margin-bottom:12px;
  font-size:.88rem;
  line-height:1.7;
  opacity:.88;

}

.foot-links{

  list-style:none;

}

.foot-links li{

  padding:9px 0;
  border-bottom:1px solid rgba(255,255,255,.12);
  font-size:.92rem;

}

.foot-links li::before{

  content:"›";
  margin-right:8px;
  color:#f2c94c;
  font-weight:700;

}

.foot-links a:hover{

  color:#fff;

}

.social-row{

  display:flex;
  gap:10px;
  margin-top:8px;

}

.social-btn{

  width:35px;
  height:35px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.2);
  border-radius:7px;
  font-family:Arial,sans-serif;
  font-weight:700;
  transition:.2s;

}

.social-btn:hover{

  background:rgba(255,255,255,.16);
  border-color:#f2c94c;
  transform:translateY(-2px);

}

.foot-bottom{

  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  padding:18px 24px;
  color:#fff;
  border-top:1px solid rgba(255,255,255,.12);
  text-align:center;
  font-size:.85rem;
  font-weight:600;

}

.credit{

  color:#f2c94c;

}

@media (max-width:1100px){

  .email-chip{

    display:none;

  }

  .hero-grid{

    grid-template-columns:minmax(0,1fr) 260px;

  }

}

@media (max-width:820px){

  .wrap{

    padding-inline:16px;

  }

  .header-inner{

    min-height:auto;
    padding:13px 0;

  }

  .school-logo{

    width:64px;
    height:64px;
    flex-basis:64px;

  }

  .school-copy h1{

    font-size:1.5rem;

  }

  .header-contact{

    display:none;

  }

  .menu-toggle{

    min-height:52px;
    display:flex;
    align-items:center;
    gap:8px;
    margin-left:auto;
    padding:0 16px;
    color:#fff;
    background:transparent;
    cursor:pointer;

  }

  #mainMenu{

    position:fixed;
    top:0;
    right:0;
    bottom:0;
    z-index:120;
    width:min(340px,86vw);
    display:block;
    padding:76px 18px 24px;
    overflow-y:auto;
    background:var(--brand-dark);
    box-shadow:-12px 0 35px rgba(0,0,0,.24);
    transform:translateX(105%);
    transition:transform .25s ease;

  }

  #mainMenu.open{

    transform:translateX(0);

  }

  #mainMenu>li{

    width:100%;

  }

  .navbar a,.dropdown-toggle{

    width:100%;
    justify-content:space-between;
    padding:12px 13px;

  }

  .login-link{

    margin:8px 0 0;

  }

  .dropdown{

    position:static;
    min-width:0;
    max-height:0;
    padding:0 0 0 12px;
    overflow:hidden;
    background:transparent;
    border:0;
    box-shadow:none;
    opacity:1;
    visibility:visible;
    transform:none;
    transition:max-height .22s ease,padding .22s ease;

  }

  .has-dropdown.open .dropdown{

    max-height:260px;
    padding-top:5px;
    padding-bottom:5px;

  }

  .dropdown a{

    color:rgba(255,255,255,.88);

  }

  .dropdown a:hover{

    color:#fff;
    background:rgba(255,255,255,.10);

  }

  .hero-section{

    padding:22px 0 18px;

  }

  .hero-grid{

    grid-template-columns:1fr;
    gap:18px;

  }

  .sidebar{

    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;

  }

  .staff-card{

    padding:16px 10px;

  }

  .staff-avatar{

    width:80px;
    height:80px;

  }

  #noticesList{

    grid-template-columns:1fr;

  }

  .foot-grid{

    grid-template-columns:1fr;
    gap:28px;

  }

}

@media (max-width:560px){

  .school-identity{

    gap:11px;

  }

  .school-logo{

    width:57px;
    height:57px;
    flex-basis:57px;

  }

  .school-copy h1{

    font-size:1.2rem;

  }
.section-heading{

    align-items:flex-start;

  }

  .section-heading h2{

    font-size:1.2rem;

  }

  .section-heading p{

    display:none;

  }

  .section-link{

    font-size:.8rem;
    padding:7px 9px;

  }

}

@media (max-width:480px){

  .sidebar{

    grid-template-columns:1fr;

  }

  .hero-media{

    border-radius:11px;

  }

  .arrow{

    width:34px;
    height:34px;

  }

}

@media (prefers-reduced-motion:reduce){

  *,*::before,*::after{

    scroll-behavior:auto !important;
    transition-duration:.01ms !important;

  }

}


/* =========================================================
   10. SCHOOL OVERVIEW
========================================================= */


.school-overview{

  padding:12px 0 28px;

}

.overview-grid{

  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(340px,.75fr);
  gap:22px;
  align-items:stretch;

}

.overview-card{

  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);

}

.overview-copy{

  padding:30px;

}

.eyebrow{

  display:inline-block;
  margin-bottom:8px;
  color:var(--brand);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;

}

.overview-copy h2,
.simple-heading h2{

  color:#183b68;
  font-size:clamp(1.35rem,2vw,1.75rem);
  line-height:1.35;
  font-weight:800;

}

.overview-copy p{

  max-width:820px;
  margin-top:13px;
  color:#5f6f83;
  font-size:.96rem;
  line-height:1.85;

}

.primary-link{

  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:18px;
  color:var(--brand);
  font-size:.9rem;
  font-weight:750;

}

.primary-link:hover{

  color:var(--brand-dark);

}

.overview-facts{

  display:grid;
  grid-template-columns:1fr;
  gap:12px;

}

.fact-card{

  min-height:98px;
  display:grid;
  grid-template-columns:48px 1fr;
  grid-template-rows:auto auto;
  column-gap:13px;
  align-content:center;
  padding:17px 18px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 5px 18px rgba(22,50,86,.055);

}

.fact-icon{

  grid-row:1 / 3;
  width:46px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  align-self:center;
  color:#fff;
  background:var(--brand);
  border-radius:12px;
  font-weight:800;

}

.fact-card strong{

  color:#183b68;
  font-size:1.02rem;
  line-height:1.35;

}

.fact-card small{

  color:#718096;
  font-size:.82rem;
  font-weight:600;

}


/* =========================================================
   11. QUICK ACCESS
========================================================= */


.quick-access{

  padding:12px 0 36px;

}

.simple-heading{

  margin-bottom:18px;

}

.quick-grid{

  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;

}

.quick-card{

  min-height:116px;
  display:grid;
  grid-template-columns:42px 1fr auto;
  align-items:center;
  gap:12px;
  padding:17px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 5px 18px rgba(22,50,86,.05);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;

}

.quick-card:hover{

  transform:translateY(-3px);
  border-color:#cad9eb;
  box-shadow:0 12px 26px rgba(22,50,86,.10);

}

.quick-icon{

  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--brand);
  background:var(--brand-soft);
  border-radius:11px;
  font-weight:800;

}

.quick-card h3{

  color:#183b68;
  font-size:.98rem;
  line-height:1.35;

}

.quick-card p{

  margin-top:4px;
  color:#758397;
  font-size:.78rem;
  line-height:1.5;

}

.quick-arrow{

  color:#9aabc0;
  font-size:1.08rem;
  transition:.2s ease;

}

.quick-card:hover .quick-arrow{

  color:var(--brand);
  transform:translateX(3px);

}

@media (max-width:1100px){

  .quick-grid{

    grid-template-columns:repeat(2,minmax(0,1fr));

  }

}

@media (max-width:820px){

  .overview-grid{

    grid-template-columns:1fr;

  }

  .overview-facts{

    grid-template-columns:repeat(3,minmax(0,1fr));

  }

  .fact-card{

    min-height:126px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:7px;

  }

}

@media (max-width:620px){

  .overview-copy{

    padding:22px;

  }

  .overview-facts{

    grid-template-columns:1fr;

  }

  .fact-card{

    min-height:92px;
    display:grid;
    grid-template-columns:46px 1fr;
    grid-template-rows:auto auto;

  }

  .quick-grid{

    grid-template-columns:1fr;

  }

}


/* =========================================================
   12. GALLERY PREVIEW
========================================================= */


.gallery-preview{

  padding:18px 0 54px;

}

.gallery-heading{

  align-items:center;

}

.gallery-preview-grid{

  display:grid;
  grid-template-columns:1.35fr .85fr .85fr;
  grid-template-rows:repeat(2,190px);
  gap:14px;

}

.gallery-preview-item{

  position:relative;
  overflow:hidden;
  min-height:0;
  background:#dbe3ed;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 6px 20px rgba(22,50,86,.07);

}

.gallery-preview-large{

  grid-row:1 / 3;

}

.gallery-preview-item img{

  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .45s ease;

}

.gallery-preview-item::after{

  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(transparent 45%,rgba(9,24,43,.78));

}

.gallery-preview-item span{

  position:absolute;
  right:15px;
  bottom:13px;
  left:15px;
  z-index:2;
  color:#fff;
  font-size:.9rem;
  font-weight:700;

}

.gallery-preview-item:hover img{

  transform:scale(1.055);

}


/* =========================================================
   13. CONTACT CTA
========================================================= */


.contact-cta{

  padding:0 0 62px;

}

.contact-cta-card{

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  padding:30px 32px;
  color:#fff;
  background:linear-gradient(120deg,var(--brand-dark),var(--brand));
  border-radius:var(--radius);
  box-shadow:0 16px 36px rgba(22,50,86,.18);

}

.contact-cta-card .eyebrow{

  color:#d9e8fb;

}

.contact-cta-card h2{

  max-width:760px;
  font-size:clamp(1.25rem,2vw,1.7rem);
  line-height:1.4;

}

.contact-cta-card p{

  max-width:760px;
  margin-top:9px;
  color:rgba(255,255,255,.82);
  font-size:.9rem;

}

.contact-cta-actions{

  display:flex;
  gap:10px;
  flex-shrink:0;

}

.cta-primary,
.cta-secondary{

  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:10px 15px;
  border-radius:9px;
  font-size:.88rem;
  font-weight:750;
  transition:transform .2s ease,background .2s ease,color .2s ease;

}

.cta-primary{

  color:var(--brand-dark);
  background:#fff;

}

.cta-secondary{

  color:#fff;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.35);

}

.cta-primary:hover,
.cta-secondary:hover{

  transform:translateY(-2px);

}

.cta-secondary:hover{

  background:rgba(255,255,255,.18);

}

@media (max-width:900px){

  .gallery-preview-grid{

    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:260px 170px 170px;

  }

  .gallery-preview-large{

    grid-column:1 / 3;
    grid-row:auto;

  }

  .contact-cta-card{

    align-items:flex-start;
    flex-direction:column;

  }

}

@media (max-width:560px){

  .gallery-preview-grid{

    grid-template-columns:1fr;
    grid-template-rows:none;

  }

  .gallery-preview-large{

    grid-column:auto;

  }

  .gallery-preview-item{

    aspect-ratio:16 / 10;

  }

  .contact-cta-card{

    padding:24px 21px;

  }

  .contact-cta-actions{

    width:100%;
    flex-direction:column;

  }

  .cta-primary,
  .cta-secondary{

    width:100%;

  }

}

@media (min-width:821px){

  .menu-toggle{

    display:none !important;

  }

  #mainMenu{

    position:static !important;
    width:auto !important;
    display:flex !important;
    transform:none !important;
    padding:9px 0 !important;
    overflow:visible !important;
    background:transparent !important;
    box-shadow:none !important;

  }

  #mainMenu>li{

    width:auto !important;

  }

}


/* =========================================================
   15. INNER PAGE HERO
========================================================= */


.inner-hero{

  padding:42px 0;
  color:#fff;
  background:linear-gradient(120deg,var(--brand-dark),var(--brand));

}

.inner-hero-content{

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;

}

.breadcrumbs{

  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
  color:rgba(255,255,255,.76);
  font-size:.82rem;
  font-weight:600;

}

.breadcrumbs a:hover{

  color:#fff;

}

.inner-hero h2{

  font-size:clamp(1.65rem,3vw,2.35rem);
  line-height:1.3;
  font-weight:800;

}

.inner-hero-intro{

  max-width:760px;
  margin-top:8px;
  color:rgba(255,255,255,.84);
  font-size:.93rem;

}

.inner-hero-icon{

  width:74px;
  height:74px;
  flex:0 0 74px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--brand);
  background:#fff;
  border-radius:18px;
  box-shadow:0 12px 28px rgba(0,0,0,.16);
  font-size:1.65rem;
  font-weight:800;

}


/* =========================================================
   16. NOTICE LISTING PAGE
========================================================= */


.notice-page-section{

  padding:48px 0 68px;

}

.notice-toolbar{

  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:22px;

}

.notice-toolbar h2{

  color:#183b68;
  font-size:1.5rem;
  line-height:1.35;
  font-weight:800;

}

.notice-toolbar p{

  margin-top:4px;
  color:var(--muted);
  font-size:.86rem;

}

.notice-search{

  width:min(100%,390px);
  min-height:48px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 14px;
  color:var(--muted);
  background:#fff;
  border:1px solid var(--line);
  border-radius:11px;
  box-shadow:0 4px 16px rgba(22,50,86,.045);
  transition:.2s;

}

.notice-search:focus-within{

  border-color:#a9c1df;
  box-shadow:0 0 0 4px rgba(23,79,155,.08);

}

.notice-search input{

  width:100%;
  padding:11px 0;
  color:var(--ink);
  background:transparent;
  border:0;
  outline:0;
  font-size:.9rem;

}

.notice-page-list{

  display:grid;
  gap:13px;

}

.notice-list-card{

  display:grid;
  grid-template-columns:48px minmax(0,1fr) auto;
  align-items:center;
  gap:16px;
  min-height:112px;
  padding:17px 18px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 5px 18px rgba(22,50,86,.055);
  transition:.2s;

}

.notice-list-card:hover{

  transform:translateY(-2px);
  border-color:#c9d8ea;
  box-shadow:0 12px 28px rgba(22,50,86,.10);

}

.notice-list-number{

  width:46px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--brand);
  background:var(--brand-soft);
  border-radius:11px;
  font-weight:800;

}

.notice-list-content{

  min-width:0;

}

.notice-list-date{

  margin-bottom:5px;
  color:#758397;
  font-size:.78rem;
  font-weight:600;

}

.notice-list-card h3{

  color:#183b68;
  font-size:1.02rem;
  line-height:1.55;
  font-weight:700;

}

.notice-list-card h3 a:hover{

  color:var(--brand);

}

.notice-read-link{

  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  color:var(--brand);
  border:1px solid #d5e2f2;
  border-radius:8px;
  font-size:.8rem;
  font-weight:700;
  white-space:nowrap;
  transition:.2s;

}

.notice-read-link:hover{

  color:#fff;
  background:var(--brand);
  border-color:var(--brand);

}

.notice-read-link b{

  transition:transform .2s;

}

.notice-read-link:hover b{

  transform:translateX(3px);

}

.notice-list-message{

  padding:30px 22px;
  color:var(--muted);
  background:#fff;
  border:1px dashed #cdd9e8;
  border-radius:12px;
  text-align:center;
  font-size:.92rem;

}

@media (max-width:700px){

  .inner-hero{

    padding:32px 0;

  }

  .inner-hero-icon{

    display:none;

  }

  .notice-toolbar{

    align-items:stretch;
    flex-direction:column;

  }

  .notice-search{

    width:100%;

  }

  .notice-list-card{

    grid-template-columns:42px minmax(0,1fr);
    gap:12px;

  }

  .notice-list-number{

    width:42px;
    height:42px;

  }

  .notice-read-link{

    grid-column:2;
    justify-self:start;
    margin-top:2px;

  }

}

@media (max-width:430px){

  .notice-list-card{

    grid-template-columns:1fr;

  }

  .notice-list-number{

    display:none;

  }

  .notice-read-link{

    grid-column:auto;

  }

}

.active-parent{

  color:var(--brand-dark) !important;
  background:#fff !important;
  box-shadow:0 4px 12px rgba(8,35,72,.16);

}

.dropdown-active{

  color:var(--brand) !important;
  background:var(--brand-soft) !important;
  font-weight:700 !important;

}


/* =========================================================
   17. DIRECTORY PAGES: STAFF / COMMITTEES / ALUMNI
========================================================= */


.staff-page-section{

  padding:48px 0 70px;

}

.staff-toolbar{

  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:24px;

}

.staff-toolbar h2{

  color:#183b68;
  font-size:1.5rem;
  line-height:1.35;
  font-weight:800;

}

.staff-toolbar p{

  margin-top:4px;
  color:var(--muted);
  font-size:.86rem;

}

.staff-search{

  width:min(100%,410px);
  min-height:48px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 14px;
  color:var(--muted);
  background:#fff;
  border:1px solid var(--line);
  border-radius:11px;
  box-shadow:0 4px 16px rgba(22,50,86,.045);
  transition:border-color .2s ease, box-shadow .2s ease;

}

.staff-search:focus-within{

  border-color:#a9c1df;
  box-shadow:0 0 0 4px rgba(23,79,155,.08);

}

.staff-search span{

  font-size:1.2rem;

}

.staff-search input{

  width:100%;
  padding:11px 0;
  color:var(--ink);
  background:transparent;
  border:0;
  outline:0;
  font-size:.9rem;

}

.staff-search input::placeholder{

  color:#8c99aa;

}

.staff-page-grid{

  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;

}

.staff-profile-card{

  min-width:0;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 6px 20px rgba(22,50,86,.065);
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;

}

.staff-profile-card:hover{

  transform:translateY(-4px);
  border-color:#c8d8eb;
  box-shadow:0 15px 32px rgba(22,50,86,.12);

}

.staff-profile-photo{

  position:relative;
  width:100%;
  aspect-ratio:4 / 3.65;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:linear-gradient(145deg,#b7c8df,#6f8db6);
  font-size:2rem;
  font-weight:800;

}

.staff-profile-photo::after{

  content:"";
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  height:34%;
  pointer-events:none;
  background:linear-gradient(transparent,rgba(14,42,78,.16));

}

.staff-profile-photo img{

  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .4s ease;

}

.staff-profile-card:hover .staff-profile-photo img{

  transform:scale(1.035);

}

.photo-fallback{

  background:linear-gradient(145deg,var(--brand),var(--brand-dark));

}

.staff-profile-content{

  padding:18px 17px 19px;
  text-align:center;

}

.staff-profile-content h3{

  color:#183b68;
  font-size:1.02rem;
  line-height:1.45;
  font-weight:800;

}

.staff-profile-post{

  display:inline-flex;
  min-height:30px;
  align-items:center;
  justify-content:center;
  margin-top:8px;
  padding:6px 11px;
  color:var(--brand);
  background:var(--brand-soft);
  border-radius:999px;
  font-size:.78rem;
  line-height:1.4;
  font-weight:700;

}

.staff-profile-phone{

  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-top:12px;
  color:#65758a;
  font-size:.82rem;
  font-weight:600;
  transition:color .2s ease;

}

.staff-profile-phone:hover{

  color:var(--brand);

}

.staff-list-message{

  grid-column:1 / -1;
  padding:32px 22px;
  color:var(--muted);
  background:#fff;
  border:1px dashed #cdd9e8;
  border-radius:12px;
  text-align:center;
  font-size:.92rem;

}

@media (max-width:1120px){

  .staff-page-grid{

    grid-template-columns:repeat(3,minmax(0,1fr));

  }

}

@media (max-width:800px){

  .staff-page-grid{

    grid-template-columns:repeat(2,minmax(0,1fr));

  }

  .staff-toolbar{

    align-items:stretch;
    flex-direction:column;

  }

  .staff-search{

    width:100%;

  }

}

@media (max-width:500px){

  .staff-page-grid{

    grid-template-columns:1fr;

  }

  .staff-profile-card{

    display:grid;
    grid-template-columns:116px minmax(0,1fr);

  }

  .staff-profile-photo{

    height:100%;
    min-height:150px;
    aspect-ratio:auto;

  }

  .staff-profile-content{

    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    padding:16px;
    text-align:left;

  }

  .staff-profile-phone{

    justify-content:flex-start;

  }

}

.staff-hero-icon{

  overflow:hidden;
  padding:11px;

}

.staff-hero-icon img{

  width:100%;
  height:100%;
  object-fit:contain;
  opacity:.96;

}

.staff-search{

  position:relative;

}

.staff-search-icon{

  flex:0 0 auto;

}

.staff-search-clear{

  width:30px;
  height:30px;
  flex:0 0 30px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#738398;
  background:#eef3f9;
  border-radius:50%;
  font-size:1rem;
  line-height:1;
  cursor:pointer;
  transition:background .2s ease,color .2s ease,transform .2s ease;

}

.staff-search-clear:hover{

  color:#fff;
  background:var(--brand);
  transform:rotate(90deg);

}

.staff-search-clear[hidden]{

  display:none;

}

.staff-profile-card{

  position:relative;

}

.staff-profile-card::before{

  content:"";
  position:absolute;
  top:0;
  right:0;
  left:0;
  z-index:2;
  height:4px;
  background:var(--brand);

}

.staff-profile-card[data-role="leadership"]::before{

  background:#174f9b;

}

.staff-profile-card[data-role="teacher"]::before{

  background:#20805a;

}

.staff-profile-card[data-role="staff"]::before{

  background:#bf7219;

}

.staff-profile-photo{

  aspect-ratio:4 / 4.25;
  padding:8px 8px 0;
  background:linear-gradient(180deg,#f8fbff,#edf3f9);

}

.staff-profile-photo::after{

  display:none;

}

.staff-profile-photo img{

  object-fit:contain;
  object-position:center top;
  background:#fff;
  border-radius:10px 10px 0 0;

}

.staff-profile-card:hover .staff-profile-photo img{

  transform:scale(1.018);

}

.photo-fallback{

  padding:0;
  background:linear-gradient(145deg,var(--brand),var(--brand-dark));

}

.staff-profile-post{

  border:1px solid #dce8f5;

}

.staff-profile-card[data-role="teacher"] .staff-profile-post{

  color:#176c4a;
  background:#eaf7f1;
  border-color:#ccebdc;

}

.staff-profile-card[data-role="staff"] .staff-profile-post{

  color:#9b5a13;
  background:#fff4e6;
  border-color:#f3d7b4;

}

.staff-profile-phone{

  width:max-content;
  max-width:100%;
  margin:13px auto 0;
  padding:7px 11px;
  color:#5e7087;
  background:#f5f8fc;
  border:1px solid #e0e8f2;
  border-radius:999px;

}

.staff-profile-phone:hover{

  color:#fff;
  background:var(--brand);
  border-color:var(--brand);

}

@media (max-width:500px){

  .staff-profile-photo{

    padding:6px;
    background:#f4f7fb;

  }

  .staff-profile-photo img{

    border-radius:9px;

  }

  .staff-profile-phone{

    margin-left:0;

  }

}

.staff-search{

  width:min(100%,480px);

}

.staff-profile-card:hover{

  transform:translateY(-6px);
  box-shadow:var(--shadow-hover);

}

.staff-profile-card[data-role="teacher"]::before{

  background:#2f8c63;

}

.staff-profile-post{

  border:none;

}

.staff-profile-content{

  padding-bottom:16px;

}


/* =========================================================
   18A. LEGACY ABOUT PAGE SUPPORT
========================================================= */


.intro-section{

  padding:55px 0 70px;

}

.intro-section .content{

  max-width:980px;
  line-height:2.05;

}

.intro-section p{

  color:#4d5d74;
  font-size:1rem;
  margin-bottom:18px;

}

.intro-section h2{

  margin-top:38px;
  margin-bottom:18px;
  color:#174f9b;
  font-size:1.45rem;
  font-weight:800;

}

.intro-section ul{

  margin-top:14px;

}

.intro-section li{

  margin-bottom:11px;
  line-height:1.9;

}

.intro-section li::marker{

  color:#174f9b;

}

.about-hero-logo{

  overflow:hidden;
  padding:11px;

}

.about-hero-logo img{

  width:100%;
  height:100%;
  object-fit:contain;

}


/* =========================================================
   18B. ABOUT SCHOOL PAGE
========================================================= */


.about-history-section{

  padding:58px 0 38px;

}

.about-history-grid{

  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);
  gap:30px;
  align-items:start;

}

.about-history-copy{

  padding:30px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);

}

.about-history-copy h2{

  color:#183b68;
  font-size:clamp(1.4rem,2.1vw,1.85rem);
  line-height:1.4;
  font-weight:800;

}

.about-history-copy p{

  margin-top:16px;
  color:#596a80;
  font-size:.96rem;
  line-height:1.95;

}

.about-history-copy .about-lead{

  color:#3f536d;
  font-size:1rem;
  font-weight:600;

}

.about-photo-card{

  position:sticky;
  top:92px;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);

}

.about-photo-frame{

  aspect-ratio:4/4.3;
  overflow:hidden;
  background:#e9eef5;

}

.about-photo-frame img{

  width:100%;
  height:100%;
  object-fit:cover;

}

.about-photo-caption{

  padding:17px 18px 19px;

}

.about-photo-caption strong{

  display:block;
  color:#183b68;
  font-size:1rem;

}

.about-photo-caption span{

  display:block;
  margin-top:4px;
  color:#718096;
  font-size:.82rem;

}

.about-timeline-section{

  padding:32px 0 58px;

}

.about-section-heading{

  margin-bottom:22px;

}

.about-timeline{

  position:relative;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px;

}

.about-timeline::before{

  content:"";
  position:absolute;
  top:29px;
  right:7%;
  left:7%;
  height:2px;
  background:#cfdded;

}

.timeline-card{

  position:relative;
  z-index:1;
  min-height:190px;
  padding:18px 16px;
  text-align:center;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 6px 20px rgba(22,50,86,.06);

}

.timeline-year{

  min-width:72px;
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 11px;
  color:#fff;
  background:var(--brand);
  border-radius:999px;
  font-size:.88rem;
  font-weight:800;
  box-shadow:0 6px 15px rgba(23,79,155,.2);

}

.timeline-card h3{

  margin-top:18px;
  color:#183b68;
  font-size:.98rem;

}

.timeline-card p{

  margin-top:8px;
  color:#728196;
  font-size:.8rem;
  line-height:1.6;

}

.about-purpose-section{

  padding:10px 0 54px;

}

.about-purpose-grid{

  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;

}

.purpose-card{

  display:grid;
  grid-template-columns:52px 1fr;
  gap:16px;
  padding:26px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 7px 22px rgba(22,50,86,.065);

}

.purpose-icon{

  width:52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:var(--brand);
  border-radius:14px;
  font-size:1.25rem;
  font-weight:800;

}

.purpose-card h2{

  color:#183b68;
  font-size:1.2rem;
  line-height:1.45;

}

.purpose-card p{

  margin-top:10px;
  color:#637389;
  font-size:.9rem;
  line-height:1.8;

}

.purpose-commitment .purpose-icon{

  background:#287b5a;

}

.about-features-section{

  padding:48px 0 58px;
  background:#edf3f9;
  border-top:1px solid #dde7f1;
  border-bottom:1px solid #dde7f1;

}

.about-features-grid{

  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:13px;

}

.feature-item{

  display:grid;
  grid-template-columns:34px 1fr;
  gap:11px;
  align-items:start;
  padding:16px 17px;
  background:#fff;
  border:1px solid #dae4ef;
  border-radius:11px;

}

.feature-item span{

  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:#287b5a;
  border-radius:50%;
  font-size:.78rem;
  font-weight:800;

}

.feature-item p{

  color:#53657b;
  font-size:.88rem;
  line-height:1.7;

}

.about-facts-section{

  padding:52px 0 66px;

}

.about-facts-grid{

  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:15px;

}

.about-fact-card{

  padding:25px 18px;
  text-align:center;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 7px 22px rgba(22,50,86,.06);

}

.about-fact-card strong{

  display:block;
  color:var(--brand);
  font-size:1.35rem;
  line-height:1.35;
  font-weight:800;

}

.about-fact-card span{

  display:block;
  margin-top:6px;
  color:#718096;
  font-size:.82rem;
  font-weight:600;

}

@media (max-width:1000px){

  .about-timeline{

    grid-template-columns:repeat(3,minmax(0,1fr));

  }

  .about-timeline::before{

    display:none;

  }

}

@media (max-width:820px){

  .about-history-grid{

    grid-template-columns:1fr;

  }

  .about-photo-card{

    position:static;

  }

  .about-photo-frame{

    aspect-ratio:16/10;

  }

  .about-purpose-grid{

    grid-template-columns:1fr;

  }

  .about-facts-grid{

    grid-template-columns:repeat(2,minmax(0,1fr));

  }

}

@media (max-width:620px){

  .about-history-copy{

    padding:22px;

  }

  .about-timeline{

    grid-template-columns:1fr;

  }

  .timeline-card{

    min-height:auto;
    text-align:left;

  }

  .timeline-card h3{

    margin-top:12px;

  }

  .about-features-grid{

    grid-template-columns:1fr;

  }

}

@media (max-width:460px){

  .about-facts-grid{

    grid-template-columns:1fr;

  }

  .purpose-card{

    grid-template-columns:1fr;

  }

}

.staff-profile-photo.committee-photo-fallback{

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:22px;
  color:var(--brand);
  background:#f3f7fc;
  border-bottom:1px solid var(--line);

}

.committee-photo-fallback::after{

  display:none;

}

.committee-initials{

  width:92px;
  height:92px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:linear-gradient(145deg,var(--brand),var(--brand-dark));
  border:6px solid #e3ebf5;
  border-radius:50%;
  font-size:1.45rem;
  font-weight:800;
  box-shadow:0 10px 24px rgba(23,79,155,.18);

}

.committee-photo-fallback small{

  color:#718096;
  font-size:.78rem;
  font-weight:600;

}


/* =========================================================
   19. ALUMNI FILTER CONTROLS
========================================================= */


.alumni-filter-row{

  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  gap:12px;
  flex-wrap:wrap;

}

.alumni-select-wrap{

  display:grid;
  gap:6px;

}

.alumni-select-wrap > span{

  color:#52657d;
  font-size:.78rem;
  font-weight:700;

}

.alumni-select{

  min-width:170px;
  min-height:46px;
  padding:10px 38px 10px 13px;
  color:var(--ink);
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  outline:none;
  font-family:inherit;
  font-size:.88rem;

}

.alumni-select:focus{

  border-color:#a9c1df;
  box-shadow:0 0 0 4px rgba(23,79,155,.08);

}

.alumni-load-btn{

  min-height:46px;
  border:0;
  cursor:pointer;

}

.alumni-load-btn:disabled{

  opacity:.65;
  cursor:wait;

}

@media (max-width:800px){

  .alumni-filter-row{

    justify-content:flex-start;

  }

}

@media (max-width:520px){

  .alumni-filter-row,
  .alumni-select-wrap,
  .alumni-select,
  .alumni-load-btn{

    width:100%;

  }

}

.alumni-load-btn{

  height:48px;
  padding:0 24px;
  border:none;
  border-radius:12px;
  background:var(--brand);
  color:#fff;
  font-weight:700;
  cursor:pointer;
  transition:.25s;

}

.alumni-load-btn:hover{

  background:var(--brand-dark);
  transform:translateY(-2px);

}

.committee-photo-fallback{

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:14px;
  background:#f7fbff;

}

.fallback-logo{

  width:110px;
  height:110px;
  object-fit:contain;
  background:#fff;
  border-radius:50%;
  padding:12px;
  box-shadow:0 8px 22px rgba(23,79,155,.15);
  transition:.25s;

}

.staff-profile-card:hover .fallback-logo{

  transform:scale(1.05);

}

.committee-photo-fallback small{

  color:#70839d;
  font-size:.82rem;
  font-weight:600;

}
/* =========================================================
   NOTICE DETAIL PAGE
========================================================= */

/* Notice Hero */

.notice-detail-hero h2{
  max-width:980px;
}


/* Notice Layout */

.notice-detail-section{
  padding:48px 0 70px;
}

.notice-detail-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 290px;
  gap:24px;
  align-items:start;
}


/* Notice Article Card */

.notice-article-card{
  overflow:hidden;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}


/* Article Toolbar */

.notice-article-toolbar{
  min-height:58px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:10px 22px;
  background:#f7f9fc;
  border-bottom:1px solid var(--line);
}

.notice-action-group{
  display:flex;
  align-items:center;
  gap:8px;
}

.notice-action-link,
.notice-action-button{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  color:var(--brand);
  background:#fff;
  border:1px solid #d6e2f0;
  border-radius:9px;
  font-size:.82rem;
  font-weight:700;
  cursor:pointer;
  transition:var(--transition);
}

.notice-action-link:hover,
.notice-action-button:hover{
  color:#fff;
  background:var(--brand);
  border-color:var(--brand);
  transform:translateY(-1px);
}


/* Article Header */

.notice-article-header{
  padding:32px 34px 24px;
  border-bottom:1px solid #e8edf4;
}

.notice-category-badge{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:6px 11px;
  color:var(--brand);
  background:var(--brand-soft);
  border-radius:999px;
  font-size:.78rem;
  font-weight:800;
}

.notice-article-header h1{
  max-width:900px;
  margin-top:13px;
  color:#183b68;
  font-size:clamp(1.45rem,2.6vw,2rem);
  line-height:1.45;
  font-weight:800;
}

.notice-published-date{
  margin-top:10px;
  color:#76859a;
  font-size:.85rem;
}

.notice-published-date strong{
  color:#52657d;
}


/* Article Body */

.notice-article-body{
  max-width:900px;
  padding:30px 34px 34px;
  color:#33465e;
  font-size:1rem;
  line-height:2;
  white-space:normal;
}


/* Notice Attachment */

.notice-attachment{
  margin:0 34px 34px;
  padding:22px;
  background:#f7f9fc;
  border:1px solid var(--line);
  border-radius:12px;
}

.notice-attachment-heading{
  display:flex;
  align-items:center;
  gap:12px;
}

.notice-attachment-icon{
  width:42px;
  height:42px;
  flex:0 0 42px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--brand);
  background:#fff;
  border:1px solid #dfe7f1;
  border-radius:11px;
}

.notice-attachment-heading h2{
  color:#183b68;
  font-size:1rem;
}

.notice-attachment-heading p{
  margin-top:2px;
  color:#77869a;
  font-size:.78rem;
}

.notice-image-preview{
  display:block;
  overflow:hidden;
  margin-top:18px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
}

.notice-image-preview img{
  width:100%;
  max-height:720px;
  object-fit:contain;
}

.notice-file-button{
  min-height:43px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:16px;
  padding:9px 16px;
  color:#fff;
  background:var(--brand);
  border-radius:9px;
  font-size:.86rem;
  font-weight:750;
  transition:var(--transition);
}

.notice-file-button:hover{
  background:var(--brand-dark);
  transform:translateY(-2px);
}


/* Notice Sidebar */

.notice-detail-sidebar{
  position:sticky;
  top:84px;
  display:grid;
  gap:16px;
}

.notice-side-card{
  padding:22px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
}

.notice-side-logo{
  width:84px;
  height:84px;
  object-fit:contain;
  margin:0 auto 13px;
  padding:8px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:50%;
}

.notice-side-card h2{
  color:#183b68;
  font-size:1rem;
  line-height:1.4;
}

.notice-side-card > p{
  margin-top:5px;
  color:#78879a;
  font-size:.8rem;
}

.notice-side-links{
  margin-top:10px;
  list-style:none;
}

.notice-side-links li{
  border-bottom:1px solid #e7edf4;
}

.notice-side-links li:last-child{
  border-bottom:0;
}

.notice-side-links a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 0;
  color:#52657d;
  font-size:.84rem;
  font-weight:650;
}

.notice-side-links a::after{
  content:"›";
  color:var(--brand);
  font-size:1rem;
}

.notice-side-links a:hover{
  color:var(--brand);
}


/* Notice Not Found */

.notice-not-found-section{
  padding:70px 0;
}

.notice-not-found-card{
  max-width:680px;
  margin:0 auto;
  padding:42px 28px;
  text-align:center;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.notice-not-found-card > span{
  display:block;
  color:var(--danger);
  font-size:2.5rem;
}

.notice-not-found-card h1{
  margin-top:10px;
  color:#183b68;
  font-size:1.7rem;
}

.notice-not-found-card p{
  margin-top:8px;
  color:var(--muted);
}


/* Responsive */

@media(max-width:960px){
  .notice-detail-layout{
    grid-template-columns:1fr;
  }

  .notice-detail-sidebar{
    position:static;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:640px){
  .notice-article-toolbar{
    align-items:stretch;
    flex-direction:column;
  }

  .notice-action-group{
    width:100%;
  }

  .notice-action-link,
  .notice-action-button{
    flex:1;
  }

  .notice-article-header,
  .notice-article-body{
    padding-right:22px;
    padding-left:22px;
  }

  .notice-attachment{
    margin-right:22px;
    margin-left:22px;
  }

  .notice-detail-sidebar{
    grid-template-columns:1fr;
  }
}


/* Print Styles */

@media print{
  .wip-banner,
  .site-header,
  .navbar,
  .notice-detail-hero,
  .notice-article-toolbar,
  .notice-detail-sidebar,
  footer{
    display:none!important;
  }

  body{
    color:#000;
    background:#fff;
  }

  .notice-detail-section{
    padding:0;
  }

  .notice-detail-layout{
    display:block;
  }

  .notice-article-card{
    border:0;
    box-shadow:none;
  }

  .notice-article-header,
  .notice-article-body{
    padding-right:0;
    padding-left:0;
  }

  .notice-attachment{
    margin-right:0;
    margin-left:0;
    break-inside:avoid;
  }
}
/* =========================================================
   NOTICE LISTING PAGE - FINAL POLISH
========================================================= */


/* Notice Search */

.notice-search{
  position:relative;
}

.notice-search-icon{
  flex:0 0 auto;
  font-size:1.15rem;
}

.notice-search-clear{
  width:30px;
  height:30px;
  flex:0 0 30px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#738398;
  background:#eef3f9;
  border-radius:50%;
  font-size:1rem;
  line-height:1;
  cursor:pointer;
  transition:var(--transition);
}

.notice-search-clear:hover{
  color:#fff;
  background:var(--brand);
  transform:rotate(90deg);
}

.notice-search-clear[hidden]{
  display:none;
}


/* Notice Meta Information */

.notice-list-meta{
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
  margin-bottom:5px;
}

.notice-list-date{
  margin:0;
}


/* Latest Notice Badge */

.notice-latest-badge{
  min-height:24px;
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  color:#fff;
  background:#d94c4c;
  border-radius:999px;
  font-size:.68rem;
  line-height:1;
  font-weight:800;
}

.notice-list-card.is-latest{
  border-color:#c8daee;
  box-shadow:0 9px 25px rgba(22,50,86,.09);
}

.notice-list-card.is-latest .notice-list-number{
  color:#fff;
  background:var(--brand);
}


/* Notice Description */

.notice-list-excerpt{
  max-width:880px;
  margin-top:7px;
  color:#6b7b8f;
  font-size:.82rem;
  line-height:1.65;
}


/* Mobile */

@media(max-width:700px){
  .notice-list-excerpt{
    display:none;
  }
}
/* =========================================================
   21. GALLERY PAGE
========================================================= */

/* Gallery Section */

.gallery-page-section{
  padding:48px 0 70px;
}


/* Gallery Toolbar */

.gallery-toolbar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:20px;
}

.gallery-toolbar h2{
  color:#183b68;
  font-size:1.5rem;
  line-height:1.35;
  font-weight:800;
}

.gallery-toolbar p{
  margin-top:4px;
  color:var(--muted);
  font-size:.86rem;
}


/* Gallery Search */

.gallery-search{
  position:relative;
  width:min(100%,420px);
  min-height:48px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 14px;
  color:var(--muted);
  background:#fff;
  border:1px solid var(--line);
  border-radius:11px;
  box-shadow:0 4px 16px rgba(22,50,86,.045);
  transition:var(--transition);
}

.gallery-search:focus-within{
  border-color:#a9c1df;
  box-shadow:0 0 0 4px rgba(23,79,155,.08);
}

.gallery-search input{
  width:100%;
  padding:11px 0;
  color:var(--ink);
  background:transparent;
  border:0;
  outline:0;
  font-size:.9rem;
}

.gallery-search-clear{
  width:30px;
  height:30px;
  flex:0 0 30px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#738398;
  background:#eef3f9;
  border-radius:50%;
  font-size:1rem;
  line-height:1;
  cursor:pointer;
  transition:var(--transition);
}

.gallery-search-clear:hover{
  color:#fff;
  background:var(--brand);
  transform:rotate(90deg);
}

.gallery-search-clear[hidden]{
  display:none;
}


/* Category Filters */

.gallery-filter-row{
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
  margin-bottom:24px;
}

.gallery-filter{
  min-height:38px;
  padding:7px 13px;
  color:#586b82;
  background:#fff;
  border:1px solid #dbe5f0;
  border-radius:999px;
  font-size:.8rem;
  font-weight:700;
  cursor:pointer;
  transition:var(--transition);
}

.gallery-filter:hover{
  color:var(--brand);
  border-color:#b8cee7;
  transform:translateY(-1px);
}

.gallery-filter.active{
  color:#fff;
  background:var(--brand);
  border-color:var(--brand);
  box-shadow:0 6px 15px rgba(30,77,143,.18);
}


/* Gallery Grid */

.gallery-page-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}

.gallery-page-card{
  min-width:0;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow-soft);
  transition:var(--transition);
}

.gallery-page-card:hover{
  transform:translateY(-5px);
  border-color:#c8d8eb;
  box-shadow:var(--shadow-hover);
}

.gallery-page-open{
  width:100%;
  display:block;
  color:inherit;
  background:transparent;
  text-align:left;
  cursor:pointer;
}

.gallery-page-image{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#edf2f7;
}

.gallery-page-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .45s ease;
}

.gallery-page-card:hover .gallery-page-image img{
  transform:scale(1.055);
}

.gallery-page-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:rgba(15,43,79,.08);
  opacity:0;
  font-size:1.55rem;
  transition:var(--transition);
}

.gallery-page-card:hover .gallery-page-overlay,
.gallery-page-open:focus-visible .gallery-page-overlay{
  background:rgba(15,43,79,.46);
  opacity:1;
}

.gallery-page-content{
  padding:15px 16px 17px;
}

.gallery-page-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:7px;
}

.gallery-category-badge{
  display:inline-flex;
  min-height:25px;
  align-items:center;
  padding:4px 9px;
  color:#176c4a;
  background:#eaf7f1;
  border-radius:999px;
  font-size:.7rem;
  font-weight:800;
}

.gallery-date{
  color:#8190a4;
  font-size:.7rem;
  font-weight:600;
}

.gallery-page-content h3{
  color:#183b68;
  font-size:.96rem;
  line-height:1.5;
  font-weight:750;
}

.gallery-image-error{
  color:#8292a7;
  background:#f1f5f9;
}

.gallery-image-error > span{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

.gallery-image-error i{
  font-size:2rem;
}

.gallery-image-error small{
  font-size:.76rem;
}


/* Gallery Empty / Error State */

.gallery-list-message{
  grid-column:1/-1;
  padding:34px 22px;
  color:var(--muted);
  background:#fff;
  border:1px dashed #cdd9e8;
  border-radius:12px;
  text-align:center;
  font-size:.92rem;
}


/* Lightbox */

body.gallery-lightbox-open{
  overflow:hidden;
}

.gallery-lightbox{
  position:fixed;
  inset:0;
  z-index:1000;
  display:grid;
  place-items:center;
  padding:58px 80px 54px;
  color:#fff;
  background:rgba(5,13,25,.94);
  backdrop-filter:blur(6px);
}

.gallery-lightbox[hidden]{
  display:none;
}

.gallery-lightbox-figure{
  max-width:min(1180px,100%);
  max-height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}

.gallery-lightbox-figure img{
  max-width:100%;
  max-height:calc(100vh - 170px);
  object-fit:contain;
  border-radius:8px;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
}

.gallery-lightbox-figure figcaption{
  max-width:760px;
  text-align:center;
}

.gallery-lightbox-figure strong{
  display:block;
  font-size:1rem;
}

.gallery-lightbox-figure span{
  display:block;
  margin-top:3px;
  color:rgba(255,255,255,.7);
  font-size:.78rem;
}

.gallery-lightbox-close{
  position:absolute;
  top:18px;
  right:22px;
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.25);
  border-radius:50%;
  font-size:1.6rem;
  cursor:pointer;
  transition:var(--transition);
}

.gallery-lightbox-close:hover{
  background:rgba(255,255,255,.2);
  transform:rotate(90deg);
}

.gallery-lightbox-nav{
  position:absolute;
  top:50%;
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.25);
  border-radius:50%;
  font-size:2rem;
  cursor:pointer;
  transform:translateY(-50%);
  transition:var(--transition);
}

.gallery-lightbox-nav:hover{
  background:rgba(255,255,255,.2);
}

.gallery-lightbox-prev{
  left:22px;
}

.gallery-lightbox-next{
  right:22px;
}

.gallery-lightbox-counter{
  position:absolute;
  right:0;
  bottom:18px;
  left:0;
  color:rgba(255,255,255,.75);
  text-align:center;
  font-size:.8rem;
  font-weight:700;
}


/* Responsive Gallery */

@media(max-width:1100px){
  .gallery-page-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media(max-width:820px){
  .gallery-toolbar{
    align-items:stretch;
    flex-direction:column;
  }

  .gallery-search{
    width:100%;
  }

  .gallery-page-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .gallery-lightbox{
    padding:56px 52px 48px;
  }

  .gallery-lightbox-nav{
    width:42px;
    height:42px;
  }

  .gallery-lightbox-prev{
    left:8px;
  }

  .gallery-lightbox-next{
    right:8px;
  }
}

@media(max-width:520px){
  .gallery-page-grid{
    grid-template-columns:1fr;
  }

  .gallery-page-image{
    aspect-ratio:16/10;
  }

  .gallery-lightbox{
    padding:60px 10px 48px;
  }

  .gallery-lightbox-nav{
    top:auto;
    bottom:48px;
  }

  .gallery-lightbox-prev{
    left:18px;
  }

  .gallery-lightbox-next{
    right:18px;
  }

  .gallery-lightbox-counter{
    bottom:18px;
  }
}
/* =========================================================
   STAFF PAGE — ROLE-BASED GROUP LAYOUT
========================================================= */

/*
  The main #staffGrid now contains complete role sections,
  not profile cards directly.
*/

#staffGrid.staff-page-grid{
  display:block;
}


/* Role Group */

.staff-role-group{
  margin-bottom:50px;
}

.staff-role-group:last-child{
  margin-bottom:0;
}


/* Role Heading */

.staff-role-heading{
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-bottom:20px;
  padding:10px 18px;
  color:var(--brand);
  background:linear-gradient(
    90deg,
    rgba(237,244,252,.35),
    rgba(237,244,252,1),
    rgba(237,244,252,.35)
  );
  border-radius:12px;
  text-align:center;
}

.staff-role-icon{
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:var(--brand);
  border-radius:50%;
  font-size:.85rem;
}

.staff-role-heading h2{
  color:#183b68;
  font-size:1.15rem;
  line-height:1.4;
  font-weight:800;
}


/* Shared Role Grid */

.staff-role-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}


/* =========================================================
   PRINCIPAL
========================================================= */

.principal-group .staff-role-grid{
  grid-template-columns:minmax(260px,410px);
  justify-content:center;
}


/* =========================================================
   ASSISTANT PRINCIPALS
========================================================= */

.assistant-principal-group .staff-role-grid{
  grid-template-columns:repeat(
    2,
    minmax(260px,410px)
  );
  justify-content:center;
}


/* =========================================================
   TEACHERS AND STAFF
========================================================= */

.teacher-staff-group .staff-role-heading{
  color:#237554;
  background:linear-gradient(
    90deg,
    rgba(234,247,241,.35),
    rgba(234,247,241,1),
    rgba(234,247,241,.35)
  );
}

.teacher-staff-group .staff-role-icon{
  background:#2f8c63;
}


/* =========================================================
   SEARCH RESULT SUPPORT
========================================================= */

.staff-role-group .staff-list-message{
  width:100%;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1120px){

  .teacher-staff-group .staff-role-grid{
    grid-template-columns:repeat(
      3,
      minmax(0,1fr)
    );
  }

}


@media(max-width:800px){

  .teacher-staff-group .staff-role-grid{
    grid-template-columns:repeat(
      2,
      minmax(0,1fr)
    );
  }

  .assistant-principal-group .staff-role-grid{
    grid-template-columns:repeat(
      2,
      minmax(0,1fr)
    );
  }

}


@media(max-width:560px){

  .staff-role-group{
    margin-bottom:36px;
  }

  .staff-role-heading{
    justify-content:flex-start;
    margin-bottom:15px;
  }

  .principal-group .staff-role-grid,
  .assistant-principal-group .staff-role-grid,
  .teacher-staff-group .staff-role-grid{
    grid-template-columns:1fr;
  }

}