.community-hero{
  --hero-a:#185fa5;
  --hero-b:#0ea5a7;
  --hero-c:#e55d48;
  --hero-d:#f4b400;
  position:relative;
  overflow:hidden;
  padding:72px 0 46px;
  background:
    linear-gradient(90deg, rgba(18, 63, 137, .045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(18, 63, 137, .045) 1px, transparent 1px),
    radial-gradient(circle at 84% 20%, color-mix(in srgb, var(--hero-b) 20%, transparent), transparent 34%),
    linear-gradient(115deg, #fbfdff 0 62%, color-mix(in srgb, var(--hero-b) 12%, #f7fbff) 62% 100%);
  background-size:46px 46px, 46px 46px, auto, auto;
}

.community-hero::before{
  content:"";
  position:absolute;
  right:clamp(20px, 9vw, 150px);
  top:38px;
  width:clamp(160px, 26vw, 340px);
  aspect-ratio:1;
  border-radius:50%;
  border:1px solid color-mix(in srgb, var(--hero-a) 18%, transparent);
  background:
    linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,.18)),
    conic-gradient(from 130deg, var(--hero-a), var(--hero-b), var(--hero-c), var(--hero-d), var(--hero-a));
  opacity:.18;
  transform:rotate(-10deg);
}

.community-hero::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:7px;
  background:linear-gradient(90deg, var(--hero-a) 0 25%, var(--hero-b) 25% 50%, var(--hero-c) 50% 75%, var(--hero-d) 75% 100%);
}

.community-hero .container{
  position:relative;
  z-index:1;
}

.community-hero .eyebrow{
  color:var(--hero-a);
  background:color-mix(in srgb, var(--hero-a) 10%, #fff);
  border:1px solid color-mix(in srgb, var(--hero-a) 16%, #fff);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.community-hero h1{
  max-width:840px;
  margin-top:18px;
  color:#0f172a;
  letter-spacing:0;
  word-break:keep-all;
}

.community-hero p{
  margin-top:14px;
  color:#475569;
  font-size:18px;
  line-height:1.7;
  word-break:keep-all;
}

.faculty-hero{--hero-a:#185fa5;--hero-b:#0b9293;--hero-c:#d94f3d;--hero-d:#e3ad00}
.notice-hero{--hero-a:#123f89;--hero-b:#e3ad00;--hero-c:#df503b;--hero-d:#0c9fb2}
.gallery-hero{--hero-a:#0c9fb2;--hero-b:#185fa5;--hero-c:#e3ad00;--hero-d:#df503b}
.network-hero{--hero-a:#0d2b4a;--hero-b:#0b9293;--hero-c:#e3ad00;--hero-d:#d94f3d}

.community-surface{
  background:
    radial-gradient(circle at 8% 12%, rgba(244, 180, 0, .1), transparent 28%),
    radial-gradient(circle at 90% 10%, rgba(14, 165, 167, .1), transparent 24%),
    #fbfdff;
}

body[data-page="faculty.html"] main > .section-sm,
body[data-page="notices.html"] main > .section-sm,
body[data-page="gallery.php"] main > .section-sm,
body[data-page="network.html"] main > .section-sm{
  background:
    radial-gradient(circle at 8% 12%, rgba(244, 180, 0, .09), transparent 26%),
    radial-gradient(circle at 88% 8%, rgba(14, 165, 167, .08), transparent 25%),
    #fbfdff;
}

body[data-page="faculty.html"] .faculty-filter{
  width:fit-content;
  padding:9px;
  margin-bottom:30px;
  background:#fff;
  border:1px solid #dbe7f8;
  border-radius:999px;
  box-shadow:0 18px 42px rgba(15, 23, 42, .08);
}

body[data-page="faculty.html"] .faculty-filter button{
  min-width:82px;
  font-weight:800;
}

body[data-page="faculty.html"] .faculty-filter button.active{
  background:linear-gradient(135deg, #123f89, #0b9293);
  box-shadow:0 12px 26px rgba(18, 63, 137, .24);
}

body[data-page="faculty.html"] .faculty-card{
  position:relative;
  overflow:hidden;
  border:1px solid #dbe7f8;
  border-radius:30px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, rgba(24,95,165,.4), rgba(14,165,167,.3), rgba(244,180,0,.35)) border-box;
  box-shadow:0 24px 54px rgba(15, 23, 42, .09);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

body[data-page="faculty.html"] .faculty-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:8px;
  background:linear-gradient(180deg, #185fa5, #0b9293, #f4b400);
}

body[data-page="faculty.html"] .faculty-card:hover{
  transform:translateY(-4px);
  box-shadow:0 30px 70px rgba(15, 23, 42, .13);
}

body[data-page="faculty.html"] .faculty-photo{
  border-radius:22px;
  box-shadow:0 18px 34px rgba(15, 23, 42, .12);
}

body[data-page="faculty.html"] .faculty-program{
  color:#0b4c88;
  background:linear-gradient(135deg, #e8f3ff, #e6fbf8);
  border:1px solid #cce2f8;
}

body[data-page="faculty.html"] .faculty-name{
  color:#0f172a;
}

body[data-page="faculty.html"] .faculty-email{
  color:#185fa5;
  text-decoration:none;
}

body[data-page="notices.html"] .notice-board{
  border:1px solid #dbe7f8;
  border-radius:30px;
  box-shadow:0 24px 56px rgba(15, 23, 42, .09);
}

body[data-page="notices.html"] .notice-board-head{
  background:linear-gradient(135deg, #123f89, #0b9293);
  color:#fff;
  border-bottom:0;
}

body[data-page="notices.html"] .notice-list-row{
  position:relative;
  color:#0f172a;
  transition:background .18s ease, transform .18s ease;
}

body[data-page="notices.html"] .notice-list-row::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:0;
  background:linear-gradient(180deg, #f4b400, #df503b);
  transition:width .18s ease;
}

body[data-page="notices.html"] .notice-list-row:hover{
  background:#f8fbff;
  transform:translateX(3px);
}

body[data-page="notices.html"] .notice-list-row:hover::before{
  width:6px;
}

body[data-page="notices.html"] .notice-list-row > div:first-child{
  display:inline-flex;
  align-items:center;
  width:max-content;
  min-height:32px;
  padding:0 12px;
  border-radius:999px;
  background:#eef6ff;
  color:#185fa5;
  font-weight:800;
}

body[data-page="notices.html"] .notice-list-row .notice-title{
  font-size:16px;
  font-weight:800;
}

body[data-page="gallery.php"] .gallery-carousel{
  padding-top:4px;
}

body[data-page="gallery.php"] .gallery-card{
  position:relative;
  overflow:hidden;
  border:1px solid #dbe7f8;
  border-radius:30px;
  box-shadow:0 22px 50px rgba(15, 23, 42, .1);
  transition:transform .22s ease, box-shadow .22s ease;
}

body[data-page="gallery.php"] .gallery-card:hover{
  transform:translateY(-6px);
  box-shadow:0 34px 74px rgba(15, 23, 42, .16);
}

body[data-page="gallery.php"] .gallery-card::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:6px;
  background:linear-gradient(90deg, #0c9fb2, #185fa5, #f4b400);
}

body[data-page="gallery.php"] .gallery-thumb{
  background:linear-gradient(135deg, #e8f3ff, #fff8df);
}

body[data-page="gallery.php"] .gallery-thumb img{
  transition:transform .35s ease;
}

body[data-page="gallery.php"] .gallery-card:hover .gallery-thumb img{
  transform:scale(1.045);
}

body[data-page="gallery.php"] .gallery-body{
  background:linear-gradient(180deg, #fff, #fbfdff);
}

body[data-page="gallery.php"] .gallery-body h3{
  color:#0f172a;
  font-weight:900;
  word-break:keep-all;
}

body[data-page="gallery.php"] .gallery-carousel-btn{
  display:grid;
  place-items:center;
  width:58px;
  height:58px;
  border-radius:50%;
  background:#fff;
  color:#0c6c85;
  font-size:34px;
  box-shadow:0 16px 36px rgba(15, 23, 42, .14);
}

body[data-page="gallery.php"] .gallery-carousel-btn[hidden]{
  display:none;
}

body[data-page="gallery.php"] .gallery-modal-card{
  border:1px solid rgba(255,255,255,.38);
  box-shadow:0 30px 90px rgba(0,0,0,.3);
}

body[data-page="network.html"] .network-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:22px;
  margin-top:0;
}

body[data-page="network.html"] .network-grid .card{
  position:relative;
  overflow:hidden;
  min-height:230px;
  padding:34px;
  border:1px solid #dbe7f8;
  border-radius:30px;
  background:#fff;
  box-shadow:0 24px 56px rgba(15, 23, 42, .09);
}

body[data-page="network.html"] .network-grid .card::before{
  content:"";
  display:grid;
  place-items:center;
  width:62px;
  height:62px;
  margin-bottom:22px;
  border-radius:20px;
  background:linear-gradient(135deg, #e8f3ff, #e6fbf8);
  color:#185fa5;
  font-family:"tabler-icons";
  font-size:32px;
}

body[data-page="network.html"] .network-grid .card:first-child::before{
  content:"\ed99";
}

body[data-page="network.html"] .network-grid .card:nth-child(2)::before{
  content:"\f1e3";
  background:linear-gradient(135deg, #fff5d8, #fff0ed);
  color:#a87000;
}

body[data-page="network.html"] .network-grid h3{
  margin-bottom:12px;
  color:#0f172a;
  font-size:27px;
  font-weight:900;
}

body[data-page="network.html"] .network-grid p{
  color:#475569;
  font-size:16px;
  line-height:1.76;
}

@media (max-width: 760px){
  .community-hero{
    padding:56px 0 36px;
  }

  .community-hero::before{
    right:-54px;
    top:24px;
    opacity:.12;
  }

  body[data-page="faculty.html"] .faculty-filter{
    width:100%;
    justify-content:center;
    border-radius:22px;
  }

  body[data-page="notices.html"] .notice-list-row > div:first-child{
    width:max-content;
  }

  body[data-page="gallery.php"] .gallery-carousel-btn{
    width:48px;
    height:48px;
    font-size:28px;
  }

  body[data-page="network.html"] .network-grid{
    grid-template-columns:1fr;
  }

  body[data-page="network.html"] .network-grid .card{
    min-height:0;
    padding:26px;
  }
}