/* ===========================================================================
   JGMCH — professional polish layer
   Keeps the existing teal theme, layout and content. Adds only:
   elevation, type rhythm, spacing, hover micro-interactions, accents.
   Palette used is the site's own: teal #0e849f, dark teal #004762,
   info link #3498db. Shadows are dark-teal at low opacity (in-theme).
   =========================================================================== */

:root{
  --jg-teal:#0e849f; --jg-dark:#004762; --jg-info:#3498db;
  --jg-ink:#173a44; --jg-body:#465257; --jg-muted:#7c8b92;
  --jg-line:#e7eef1; --jg-tint:#f4f9fa;
  --jg-e1:0 1px 2px rgba(0,71,98,.05), 0 8px 20px rgba(0,71,98,.06);
  --jg-e2:0 6px 14px rgba(0,71,98,.08), 0 20px 40px rgba(0,71,98,.12);
}

html{ scroll-behavior:smooth; }
body{ color:var(--jg-body); line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

/* Type rhythm ------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6{ color:var(--jg-ink); letter-spacing:-.01em; }
h3.text-center{ font-weight:700; font-size:1.75rem; }
p{ color:var(--jg-body); }

/* Section heading accent (encodes hierarchy, not decoration) --------------- */
h3.text-center{ position:relative; padding-bottom:.75rem; }
h3.text-center::after{
  content:""; display:block; width:52px; height:3px; border-radius:3px;
  background:var(--jg-teal); margin:.85rem auto 0;
}
h3.text-center.text-white::after{ background:#fff; opacity:.9; }

/* Interactive transitions ------------------------------------------------- */
.card,.notice-card,#hero-section .row.m-0 a.border,.btn,
#gallery-section .item img,#main_navbar .nav-link,.dropdown-item{
  transition:transform .25s ease, box-shadow .25s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* Navbar ------------------------------------------------------------------ */
#main_navbar{ box-shadow:0 2px 14px rgba(0,71,98,.06); }
#main_navbar .nav-link{ font-weight:500; color:#2b3b41; padding:.55rem .9rem!important; position:relative; }
#main_navbar .nav-link:hover,#main_navbar .nav-link.active{ color:var(--jg-teal)!important; }
#main_navbar .nav-link::after{
  content:""; position:absolute; left:.9rem; right:.9rem; bottom:2px; height:2px;
  background:var(--jg-teal); transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
#main_navbar .nav-link:hover::after,#main_navbar .nav-link.active::after{ transform:scaleX(1); }
.dropdown-menu{ border:0; border-radius:12px; box-shadow:var(--jg-e2); padding:.4rem; }
.dropdown-item{ border-radius:8px; padding:.5rem .75rem; font-size:.92rem; }
.dropdown-item:hover{ background:var(--jg-tint); color:var(--jg-teal); }
/* Mobile menu toggler (inline SVG burger — the old font glyph rendered white) */
#main_navbar .navbar-toggler{ color:var(--jg-teal)!important; border:1px solid var(--jg-line); border-radius:10px;
  padding:.3rem .5rem; line-height:0; box-shadow:none; transition:background .2s ease, border-color .2s ease; }
#main_navbar .navbar-toggler:hover{ background:var(--jg-tint); border-color:var(--jg-teal); }
#main_navbar .navbar-toggler:focus{ box-shadow:0 0 0 .2rem rgba(14,132,159,.22); outline:none; }
#main_navbar .navbar-toggler .nav-burger{ display:block; }

/* Brand bar --------------------------------------------------------------- */
#brand-section .bg-lightblue{ box-shadow:inset 0 -3px 0 rgba(0,0,0,.06); }

/* Hero carousel ----------------------------------------------------------- */
.hero-owl{ border-radius:16px; box-shadow:var(--jg-e2); }
.hero-owl .owl-dots{ margin-top:14px; }
.hero-owl .owl-dots .owl-dot span{ width:9px; height:9px; background:#cfe0e5!important; transition:all .25s; }
.hero-owl .owl-dots .owl-dot.active span{ width:26px; border-radius:5px; background:var(--jg-teal)!important; }
.hero-owl .owl-nav button{
  width:46px; height:46px; border-radius:50%!important;
  background:rgba(255,255,255,.9)!important; color:var(--jg-dark)!important;
  box-shadow:0 4px 14px rgba(0,71,98,.18); font-size:22px!important;
  position:absolute; top:50%; transform:translateY(-50%);
}
.hero-owl .owl-nav .owl-prev{ left:14px; } .hero-owl .owl-nav .owl-next{ right:14px; }
.hero-owl .owl-nav button:hover{ background:var(--jg-teal)!important; color:#fff!important; }

/* Hero + sidebar symmetry (desktop): both fixed to the same height (close to
   the hero's natural size) so the columns align exactly, top and bottom. ----- */
@media (min-width:992px){
  #hero-section .row.g-3{ align-items:flex-start; }
  #hero-section .hero-owl{ position:relative; }
  /* Force every Owl layer to the same fixed height (Owl otherwise collapses
     its stage to a clone's height). */
  #hero-section .hero-owl,
  #hero-section .hero-owl .owl-stage-outer,
  #hero-section .hero-owl .owl-stage,
  #hero-section .hero-owl .owl-item,
  #hero-section .hero-owl .item{ height:560px!important; }
  #hero-section .hero-owl .item img{ height:560px!important; object-fit:cover; display:block; }
  #hero-section .hero-owl .owl-dots{ position:absolute; left:0; right:0; bottom:12px; margin:0; z-index:5; }
  #hero-section .hero-owl .owl-dots .owl-dot span{ background:rgba(255,255,255,.6)!important; }
  #hero-section .hero-owl .owl-dots .owl-dot.active span{ background:#fff!important; }
  /* Sidebar locked to the same height; items distributed to fill evenly. */
  #hero-section .col-lg-3 .row.m-0{
    min-height:560px; display:flex; flex-direction:column; flex-wrap:nowrap; justify-content:space-between; transition:min-height .25s ease;
  }
  #hero-section .col-lg-3 .row.m-0 > *{ width:100%; flex:0 0 auto; }
}

/* Admission sidebar — compact spacing so the box is not overly tall -------- */
#hero-section .row.m-0 h5{
  border-radius:12px 12px 0 0; font-weight:600; letter-spacing:.02em;
  padding:.65rem 1rem!important; box-shadow:0 6px 16px rgba(14,132,159,.22);
}
#hero-section .row.m-0 a.border,
#hero-section .row.m-0 .border{ border-color:var(--jg-line)!important; border-radius:9px!important; }
#hero-section .row.m-0 a.border{ margin:3px 0; }
#hero-section .row.m-0 a.border .p-2{ padding:.45rem .6rem!important; }
#hero-section .row.m-0 > div > .border{ padding:.45rem .65rem!important; margin:3px 0; }
#hero-section .row.m-0 .border > p{ margin-bottom:.25rem; font-weight:600; }
#hero-section .row.m-0 ol{ margin:0; padding-left:1.15rem; }
#hero-section .row.m-0 ol > li{ margin-bottom:.1rem; }
#hero-section .row.m-0 ol ul{ margin:.1rem 0; padding-left:1rem; }
#hero-section .row.m-0 ol li,
#hero-section .row.m-0 ol li a{ font-size:.83rem; line-height:1.35; }
#hero-section .row.m-0 a.border .p-2 img{ width:26px!important; }
#hero-section .row.m-0 a.border:hover{ background:var(--jg-tint); border-color:var(--jg-teal)!important; transform:translateX(3px); }
#hero-section .row.m-0 ol li a:hover{ color:var(--jg-teal); }
#hero-section .row.m-0 p[data-bs-toggle="collapse"]{ font-weight:600; }
#hero-section .row.m-0 .collapse-chevron{ transition:transform .25s ease; }
#hero-section .row.m-0 p[aria-expanded="true"] .collapse-chevron{ transform:rotate(180deg); }

/* Card elevation system (affiliation / leadership / committees) ------------ */
.card{ border:0!important; border-radius:16px!important; box-shadow:var(--jg-e1); }
.card:hover{ transform:translateY(-5px); box-shadow:var(--jg-e2); }
.card .card-body{ padding:1.35rem; }

/* Leadership avatar frame */
.card .text-center[style*="e9ecef"]{ background:linear-gradient(180deg,#eef5f7,#e3edf0)!important; }
.card img.rounded-2{ box-shadow:0 6px 16px rgba(0,71,98,.14); }

/* Notice Board cards ------------------------------------------------------ */
.notice-card{
  background:#fff!important; border:0!important; border-radius:16px!important;
  box-shadow:var(--jg-e2); padding:0!important; overflow:hidden;
}
.notice-card>h5{
  margin:0; padding:1rem 1.15rem; font-size:1.05rem; font-weight:700;
  color:var(--jg-dark); border-bottom:2px solid var(--jg-line);
}
.notice-card .scrollable-content{ padding:.35rem 1.05rem; }
.notice-card .scrollable-content ul li{ padding:.6rem 0; border-bottom:1px solid var(--jg-line); }
.notice-card .scrollable-content ul li:last-child{ border-bottom:0; }
.notice-card .scrollable-content ul li a{ color:#3c4a51!important; font-size:.9rem; line-height:1.45; }
.notice-card .scrollable-content ul li a:hover{ color:var(--jg-teal)!important; }
.notice-card .btn{ margin:.85rem 1.05rem 1.1rem; }

/* Custom scrollbars */
.scrollable-content{ scrollbar-width:thin; scrollbar-color:#bcd7de transparent; }
.scrollable-content::-webkit-scrollbar{ width:5px; }
.scrollable-content::-webkit-scrollbar-thumb{ background:#bcd7de; border-radius:10px; }
.scrollable-content::-webkit-scrollbar-thumb:hover{ background:var(--jg-teal); }

/* Buttons ----------------------------------------------------------------- */
.btn{ border-radius:10px; font-weight:500; letter-spacing:.02em; }
.btn[style*="lightblue"],.notice-card .btn{ background:var(--jg-teal)!important; border:0; }
.btn[style*="lightblue"]:hover,.notice-card .btn:hover{
  background:var(--jg-dark)!important; color:#fff; transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(14,132,159,.32);
}

/* News scroller ----------------------------------------------------------- */
#attention-section .attention{ letter-spacing:.06em; }

/* Gallery ----------------------------------------------------------------- */
#gallery-section .item{ padding:6px; }
/* Uniform image tiles; caption is an overlay so captioned/uncaptioned tiles match. */
#gallery-section .g-tile{ position:relative; display:block; border-radius:14px; overflow:hidden;
  box-shadow:var(--jg-e1); aspect-ratio:4/3; background:#e9eff1; }
#gallery-section .g-tile img{ width:100%; height:100%; object-fit:cover; display:block; }
#gallery-section .g-tile:hover img{ transform:scale(1.05); }
/* "Read details" button — opens a modal with the full caption */
#gallery-section .g-detail-btn{
  position:absolute; left:10px; bottom:10px; z-index:2;
  display:inline-flex; align-items:center; gap:.35rem;
  background:rgba(0,71,98,.9); color:#fff; border:0; border-radius:999px;
  padding:.42rem .85rem; font-size:.78rem; font-weight:600; cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.25); transition:background .2s ease, transform .2s ease;
}
#gallery-section .g-detail-btn:hover{ background:var(--jg-teal); transform:translateY(-1px); }
#gallery-section .g-detail-btn i{ font-size:.9rem; }
#gallery-section .owl-nav button{
  width:42px; height:42px; border-radius:50%!important;
  background:#fff!important; color:var(--jg-dark)!important; box-shadow:var(--jg-e1);
  position:absolute; top:40%; font-size:20px!important;
}
#gallery-section .owl-nav .owl-prev{ left:-6px; } #gallery-section .owl-nav .owl-next{ right:-6px; }
#gallery-section .owl-nav button:hover{ background:var(--jg-teal)!important; color:#fff!important; }

/* Footer ------------------------------------------------------------------ */
footer{ box-shadow:inset 0 3px 0 rgba(255,255,255,.04); }
/* Ensure all footer body text stays legible on the dark-teal background
   (overrides the global p color and the dim text-white-50). */
footer p, footer .small, footer li, footer span{ color:rgba(255,255,255,.75)!important; }
footer h5{ color:#7fd4e6!important; font-size:.95rem; letter-spacing:.06em; text-transform:uppercase; font-weight:600; margin-bottom:1rem; }
footer .fw-bold, footer strong{ color:#fff!important; }
footer a{ color:rgba(255,255,255,.8)!important; transition:color .2s, padding-left .2s; }
footer a:hover{ color:#fff!important; padding-left:3px; }

/* Accessibility ----------------------------------------------------------- */
:focus-visible{ outline:2px solid var(--jg-teal); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition:none!important; animation:none!important; }
}

/* ===========================================================================
   About the Hospital — professional redesign (teal theme, accessible)
   =========================================================================== */
.about-pro{ background:linear-gradient(180deg,#ffffff 0%,var(--jg-tint) 100%); }
.about-pro .about-eyebrow{
  color:#0a6a7f; font-weight:700; text-transform:uppercase; letter-spacing:.12em;
  font-size:.78rem; margin-bottom:.5rem;
}
.about-pro .about-title{ font-size:2rem; color:var(--jg-ink); margin-bottom:1rem; }
.about-pro .about-title::after{ content:""; display:block; width:56px; height:3px; border-radius:3px; background:var(--jg-teal); margin-top:.85rem; }
.about-pro .about-lead{ font-size:1.06rem; line-height:1.8; color:#3f4c52; max-width:44rem; }

/* Consistent section headings across the home page (match .about-title) */
.section-title{ font-size:2rem; font-weight:700; line-height:1.2; letter-spacing:-.01em; }
@media (max-width:575.98px){ .section-title{ font-size:1.6rem; } }

/* Timeline stats */
.about-stats{ display:flex; flex-wrap:wrap; gap:0; margin-top:1.75rem; }
.about-stat{ flex:1 1 0; min-width:150px; padding:0 1.25rem; border-left:2px solid var(--jg-line); }
.about-stat:first-child{ padding-left:0; border-left:0; }
.about-stat .stat-num{ font-size:1.9rem; font-weight:700; color:var(--jg-teal); line-height:1; }
.about-stat .stat-label{ font-size:.84rem; color:var(--jg-ink); font-weight:600; margin-top:.5rem; line-height:1.4; }

/* Affiliation panel (dark teal, high-contrast) */
.affiliation-panel{
  background:linear-gradient(150deg,var(--jg-teal) 0%,var(--jg-dark) 100%);
  color:#fff; border-radius:18px; padding:1.9rem; box-shadow:0 18px 40px rgba(0,71,98,.22);
}
.affiliation-panel .affiliation-head{
  font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:.92rem;
  display:flex; align-items:center; gap:.5rem; padding-bottom:1rem; margin-bottom:.5rem;
  border-bottom:1px solid rgba(255,255,255,.18);
}
.affiliation-panel .affiliation-head i{ font-size:1.15rem; color:#bff0fb; }
.affiliation-panel .affiliation-row{ display:flex; gap:.9rem; align-items:flex-start; padding:1rem 0; border-bottom:1px solid rgba(255,255,255,.12); }
.affiliation-panel .affiliation-row:last-child{ border-bottom:0; padding-bottom:0; }
.affiliation-panel .af-icon{
  flex:0 0 auto; width:40px; height:40px; border-radius:11px; background:rgba(255,255,255,.14);
  display:flex; align-items:center; justify-content:center; font-size:1.1rem; color:#fff;
}
.affiliation-panel .af-label{ display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.7); margin-bottom:.15rem; }
.affiliation-panel .af-value{ display:block; font-weight:600; line-height:1.4; }

/* Leadership cards */
.about-pro .leader-card{
  background:#fff; border-radius:18px; overflow:hidden; box-shadow:var(--jg-e1);
  display:flex; flex-direction:column; transition:transform .25s ease, box-shadow .25s ease;
}
.about-pro .leader-card:hover{ transform:translateY(-6px); box-shadow:var(--jg-e2); }
.about-pro .leader-photo-wrap{
  background:linear-gradient(160deg,#eef6f8,#dbe9ee); padding:1.9rem 0 1.2rem; text-align:center; position:relative;
}
.about-pro .leader-photo-wrap::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--jg-teal); opacity:.9; }
.about-pro .leader-photo{
  width:118px; height:118px; border-radius:50%; object-fit:cover;
  border:4px solid #fff; box-shadow:0 8px 20px rgba(0,71,98,.18);
}
.about-pro .leader-body{ padding:1.4rem 1.4rem 1.5rem; text-align:center; flex:1 1 auto; }
.about-pro .leader-role{ color:#0a6a7f; font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.76rem; }
.about-pro .leader-name{ font-size:1.12rem; font-weight:700; color:var(--jg-ink); margin:.25rem 0 .1rem; }
.about-pro .leader-qual{ font-size:.83rem; color:var(--jg-muted); line-height:1.4; }
.about-pro .leader-contact{ margin-top:1rem; padding-top:1rem; border-top:1px solid var(--jg-line); text-align:left; }
.about-pro .leader-contact .lc-row{ display:flex; gap:.55rem; align-items:flex-start; font-size:.82rem; color:#54636b; margin-bottom:.5rem; line-height:1.4; }
.about-pro .leader-contact .lc-row:last-child{ margin-bottom:0; }
.about-pro .leader-contact .lc-row i{ color:var(--jg-teal); font-size:.95rem; margin-top:.1rem; flex:0 0 auto; }
.about-pro .leader-contact .lc-row a{ color:#0a6a7f; text-decoration:none; word-break:break-word; }
.about-pro .leader-contact .lc-row a:hover{ text-decoration:underline; }

@media (max-width:575.98px){
  .about-stat{ flex:1 1 100%; border-left:0; padding:.5rem 0; }
  .about-pro .about-title{ font-size:1.6rem; }
}

/* ===========================================================================
   Home page — professional section refinements (no content change)
   =========================================================================== */

/* Notice Board — SVG icon badge header + "View all" link */
.notice-card .notice-head{ display:flex; align-items:center; gap:.6rem; }
.notice-card .nc-badge{
  flex:0 0 auto; width:38px; height:38px; border-radius:11px;
  background:linear-gradient(150deg,var(--jg-teal),var(--jg-dark)); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.02rem;
  box-shadow:0 5px 12px rgba(14,132,159,.32);
}
.notice-card .nc-viewall{
  margin:.35rem 1.05rem 1.05rem; align-self:flex-start;
  display:inline-flex; align-items:center; gap:.4rem;
  color:#0a6a7f; font-weight:600; font-size:.9rem; text-decoration:none;
}
.notice-card .nc-viewall i{ transition:transform .2s ease; }
.notice-card .nc-viewall:hover{ color:var(--jg-dark); }
.notice-card .nc-viewall:hover i{ transform:translateX(4px); }

/* Notice Board section — a touch more breathing room + heading eyebrow rhythm */
#attention-section .attention{ font-size:1.15rem; }
#attention-section .bi-megaphone-fill{ opacity:.9; }

/* Gallery — subtle tinted band + refined caption card feel */
#gallery-section{ background:var(--jg-tint); }
#gallery-section .g-tile{ transition:transform .25s ease, box-shadow .25s ease; }
#gallery-section .item:hover .g-tile{ transform:translateY(-4px); box-shadow:var(--jg-e2); }

/* Consistent section vertical rhythm on desktop */
@media (min-width:992px){
  #gallery-section{ padding-top:1rem; }
}

/* ===========================================================================
   Inner pages — professional Bootstrap + teal system
   =========================================================================== */

/* Banner ------------------------------------------------------------------ */
.inner-banner{
  background:linear-gradient(120deg,var(--jg-teal) 0%,var(--jg-dark) 100%);
  color:#fff; padding:2.4rem 0; position:relative; overflow:hidden;
}
.inner-banner::after{
  content:""; position:absolute; right:-40px; top:-40px; width:220px; height:220px;
  background:radial-gradient(circle,rgba(255,255,255,.10),transparent 70%); pointer-events:none;
}
.inner-banner-title{ font-size:1.9rem; font-weight:700; margin:0; color:#fff; letter-spacing:-.01em; }
.inner-banner-sub{ margin:.4rem 0 0; color:rgba(255,255,255,.85); }
.inner-breadcrumb{ margin-top:.6rem; font-size:.85rem; display:flex; align-items:center; gap:.45rem; color:rgba(255,255,255,.8); }
.inner-breadcrumb a{ color:rgba(255,255,255,.9); text-decoration:none; }
.inner-breadcrumb a:hover{ color:#fff; text-decoration:underline; }
.inner-breadcrumb .sep{ font-size:.7rem; opacity:.7; }

/* Page background rhythm */
.page-wrap{ background:var(--jg-tint); }

/* Section eyebrow (reusable) */
.eyebrow{ color:#0a6a7f; font-weight:700; text-transform:uppercase; letter-spacing:.12em; font-size:.76rem; }

/* Filter chips ------------------------------------------------------------ */
.filter-bar{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.5rem; }
.filter-chip{
  display:inline-flex; align-items:center; gap:.35rem; padding:.45rem 1rem; border-radius:999px;
  font-size:.88rem; font-weight:500; text-decoration:none; background:#fff; color:#3f4c52;
  border:1px solid var(--jg-line); transition:all .2s ease;
}
.filter-chip:hover{ border-color:var(--jg-teal); color:var(--jg-teal); }
.filter-chip.active{ background:var(--jg-teal); border-color:var(--jg-teal); color:#fff; box-shadow:0 6px 14px rgba(14,132,159,.28); }

/* Directory / department cards -------------------------------------------- */
.dir-group-title{ display:flex; align-items:center; gap:.6rem; font-size:1.05rem; font-weight:700; color:var(--jg-dark); margin:0 0 1rem; }
.dir-group-title .bar{ width:5px; height:22px; border-radius:3px; background:var(--jg-teal); }
.dir-card{
  display:block; background:#fff; border-radius:14px; padding:1.15rem 1.25rem; height:100%;
  box-shadow:var(--jg-e1); text-decoration:none; transition:transform .25s ease, box-shadow .25s ease;
  border-left:3px solid transparent;
}
.dir-card:hover{ transform:translateY(-4px); box-shadow:var(--jg-e2); border-left-color:var(--jg-teal); }
.dir-card .dir-icon{ width:42px; height:42px; border-radius:11px; background:var(--jg-tint); color:var(--jg-teal); display:flex; align-items:center; justify-content:center; font-size:1.2rem; margin-bottom:.75rem; }
.dir-card .dir-name{ font-weight:700; color:var(--jg-ink); }
.dir-card .dir-desc{ font-size:.85rem; color:var(--jg-muted); margin-top:.35rem; line-height:1.45; }
.dir-card .dir-meta{ font-size:.78rem; color:#0a6a7f; margin-top:.6rem; }

/* Content card (list containers, detail) ---------------------------------- */
.content-card{ background:#fff; border-radius:16px; box-shadow:var(--jg-e1); }
.content-card .card-head{ padding:1.1rem 1.4rem; border-bottom:1px solid var(--jg-line); font-weight:700; color:var(--jg-dark); display:flex; align-items:center; gap:.5rem; }
.content-card .card-head i{ color:var(--jg-teal); }

/* Notice / list rows ------------------------------------------------------ */
.list-row{ display:flex; align-items:flex-start; gap:.85rem; padding:1rem 1.4rem; border-bottom:1px solid var(--jg-line); text-decoration:none; transition:background .2s ease; }
.list-row:last-child{ border-bottom:0; }
.list-row:hover{ background:var(--jg-tint); }
.list-row .lr-icon{ flex:0 0 auto; width:38px; height:38px; border-radius:10px; background:var(--jg-tint); color:var(--jg-teal); display:flex; align-items:center; justify-content:center; font-size:1.05rem; }
.list-row .lr-title{ font-weight:600; color:var(--jg-ink); line-height:1.4; }
.list-row .lr-meta{ font-size:.8rem; color:var(--jg-muted); margin-top:.2rem; display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.list-row .badge-cat{ background:rgba(14,132,159,.1); color:#0a6a7f; font-weight:600; padding:.15rem .55rem; border-radius:6px; font-size:.72rem; }
.badge-urgent{ background:#fdecea; color:#c0392b; font-weight:700; padding:.15rem .5rem; border-radius:6px; font-size:.7rem; }

/* Data table -------------------------------------------------------------- */
.pro-table{ width:100%; border-collapse:separate; border-spacing:0; }
.pro-table thead th{ background:var(--jg-tint); color:var(--jg-dark); font-weight:600; font-size:.82rem; text-transform:uppercase; letter-spacing:.03em; padding:.85rem 1rem; text-align:left; border-bottom:2px solid var(--jg-line); }
.pro-table tbody td{ padding:.85rem 1rem; border-bottom:1px solid var(--jg-line); vertical-align:middle; }
.pro-table tbody tr:hover{ background:var(--jg-tint); }
.status-pill{ display:inline-block; padding:.2rem .6rem; border-radius:999px; font-size:.75rem; font-weight:600; }
.status-open{ background:#e6f7ee; color:#1e7e46; }
.status-closing_soon{ background:#fff4e0; color:#a15c00; }
.status-closed,.status-cancelled{ background:#eef1f3; color:#5a6b76; }
.status-awarded{ background:#e7f0fb; color:#1f5fa8; }

/* Attachments list -------------------------------------------------------- */
.attach-list a{ display:flex; align-items:center; gap:.6rem; padding:.65rem .9rem; border:1px solid var(--jg-line); border-radius:10px; margin-bottom:.6rem; text-decoration:none; color:#0a6a7f; font-weight:500; transition:all .2s; }
.attach-list a:hover{ border-color:var(--jg-teal); background:var(--jg-tint); }
.attach-list a i.file{ color:#c0392b; font-size:1.15rem; }

/* Detail sidebar info card ------------------------------------------------ */
.info-card{ background:#fff; border-radius:16px; box-shadow:var(--jg-e1); overflow:hidden; }
.info-card .info-head{ background:linear-gradient(150deg,var(--jg-teal),var(--jg-dark)); color:#fff; padding:.9rem 1.2rem; font-weight:700; }
.info-card dl{ margin:0; padding:.5rem 1.2rem 1rem; }
.info-card dl > div{ padding:.7rem 0; border-bottom:1px solid var(--jg-line); }
.info-card dl > div:last-child{ border-bottom:0; }
.info-card dt{ font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--jg-muted); font-weight:600; }
.info-card dd{ margin:.2rem 0 0; color:var(--jg-ink); font-weight:500; }

/* Quick-links sidebar ----------------------------------------------------- */
.side-links{ background:#fff; border-radius:16px; box-shadow:var(--jg-e1); padding:1.25rem; }
.side-links-title{ font-size:1rem; font-weight:700; color:var(--jg-dark); margin:0 0 .75rem; padding-bottom:.6rem; border-bottom:2px solid var(--jg-line); }
.side-links a{ display:flex; align-items:center; gap:.6rem; padding:.6rem .5rem; border-radius:9px; color:#3f4c52; text-decoration:none; transition:all .2s; }
.side-links a i:first-child{ color:var(--jg-teal); width:20px; }
.side-links a .arrow{ font-size:.75rem; opacity:.5; transition:transform .2s; }
.side-links a:hover{ background:var(--jg-tint); color:var(--jg-teal); }
.side-links a:hover .arrow{ transform:translateX(3px); opacity:1; }

/* Prose (page/notice/department body) ------------------------------------- */
.prose{ color:#3f4c52; line-height:1.8; }
.prose h2{ font-size:1.4rem; font-weight:700; color:var(--jg-ink); margin:1.6rem 0 .7rem; }
.prose h3{ font-size:1.18rem; font-weight:600; color:var(--jg-ink); margin:1.3rem 0 .6rem; }
.prose p{ margin:.7rem 0; }
.prose ul,.prose ol{ margin:.7rem 0 .7rem 1.3rem; }
.prose a{ color:#0a6a7f; }
.prose img{ max-width:100%; height:auto; border-radius:10px; }
.prose table{ width:100%; border-collapse:collapse; margin:1rem 0; }
.prose td,.prose th{ border:1px solid var(--jg-line); padding:.6rem; }

/* Forms ------------------------------------------------------------------- */
.form-pro .form-control,
.form-pro .form-select{ border-radius:10px; border:1px solid #000; }
.form-pro .form-control{ padding:.7rem .9rem; }
.form-pro .form-select{ padding:.7rem 2.25rem .7rem .9rem; }
.form-pro .form-control:focus,
.form-pro .form-select:focus{ border-color:var(--jg-teal); box-shadow:0 0 0 .2rem rgba(14,132,159,.15); }
.form-pro label{ font-weight:600; font-size:.85rem; color:var(--jg-ink); margin-bottom:.35rem; }
.btn-teal{ background:var(--jg-teal); color:#fff; border:0; border-radius:10px; padding:.65rem 1.5rem; font-weight:600; transition:all .2s; }
.btn-teal:hover{ background:var(--jg-dark); color:#fff; transform:translateY(-1px); box-shadow:0 8px 18px rgba(14,132,159,.3); }

/* Footer social icons ------------------------------------------------------ */
.footer-social a{ color:#fff; opacity:.8; font-size:1.15rem; line-height:1; transition:opacity .2s ease, transform .2s ease; }
.footer-social a:hover{ opacity:1; transform:translateY(-2px); }

/* News ticker -------------------------------------------------------------- */
.news-ticker{ background:linear-gradient(90deg,var(--jg-dark) 0%,#013a51 100%); }
.news-ticker__inner{ display:flex; align-items:stretch; min-height:48px; }
.news-ticker__label{
  display:inline-flex; align-items:center; gap:.5rem; flex-shrink:0;
  background:linear-gradient(180deg,#f7cb52,#f2b638); color:#08333f;
  font-weight:800; text-transform:uppercase; letter-spacing:.07em; font-size:.82rem;
  padding:.55rem 1.4rem .55rem 1.05rem;
  clip-path:polygon(0 0,100% 0,calc(100% - 15px) 100%,0 100%);
}
.news-ticker__label i{ font-size:1.05rem; }
.news-ticker__label .nt-live{
  width:8px; height:8px; border-radius:50%; background:#c0392b;
  box-shadow:0 0 0 0 rgba(192,57,43,.6); animation:nt-pulse 1.7s ease-out infinite;
}
@keyframes nt-pulse{ 0%{box-shadow:0 0 0 0 rgba(192,57,43,.55)} 70%{box-shadow:0 0 0 8px rgba(192,57,43,0)} 100%{box-shadow:0 0 0 0 rgba(192,57,43,0)} }
.news-ticker__viewport{
  position:relative; overflow:hidden; flex-grow:1; display:flex; align-items:center;
  padding-left:1.4rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 34px,#000 calc(100% - 40px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 34px,#000 calc(100% - 40px),transparent);
}
.news-ticker__track{
  display:flex; align-items:center; list-style:none; margin:0; padding:0; white-space:nowrap;
  will-change:transform; animation-name:nt-scroll; animation-timing-function:linear; animation-iteration-count:infinite;
}
.news-ticker__viewport:hover .news-ticker__track{ animation-play-state:paused; }
.news-ticker__item{ position:relative; padding:0 1.6rem; }
.news-ticker__item + .news-ticker__item::before{ content:"•"; position:absolute; left:-.2rem; color:rgba(255,255,255,.32); }
.news-ticker__item a{ color:#e7f2f5; text-decoration:none; font-size:.92rem; display:inline-flex; align-items:center; transition:color .2s ease; }
.news-ticker__item a:hover{ color:#fff; text-decoration:underline; }
.nt-new{
  background:#c0392b; color:#fff; font-size:.64rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  padding:.12rem .42rem; border-radius:4px; margin-right:.5rem;
}
@keyframes nt-scroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion: reduce){
  .news-ticker__track{ animation:none; }
  .news-ticker__viewport{ overflow-x:auto; -ms-overflow-style:none; scrollbar-width:none; }
  .news-ticker__viewport::-webkit-scrollbar{ display:none; }
}
@media (max-width:575.98px){
  .news-ticker__label{ font-size:.75rem; padding:.5rem 1rem .5rem .8rem; }
  .news-ticker__item a{ font-size:.85rem; }
}

/* Gallery grid (index) ---------------------------------------------------- */
.gallery-tile{ position:relative; display:block; border-radius:14px; overflow:hidden; box-shadow:var(--jg-e1); aspect-ratio:4/3; }
.gallery-tile img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.gallery-tile:hover img{ transform:scale(1.06); }
.gallery-tile .cap{ position:absolute; left:0; right:0; bottom:0; padding:1.5rem .9rem .8rem; color:#fff; background:linear-gradient(transparent,rgba(0,71,98,.85)); font-weight:600; font-size:.9rem; }

/* Empty state ------------------------------------------------------------- */
.empty-state{ text-align:center; padding:3rem 1rem; color:var(--jg-muted); }
.empty-state i{ font-size:2.5rem; color:#c7d6db; }

/* ===========================================================================
   Multi-level navigation (menu → submenu → sub-submenu)
   =========================================================================== */
.dropdown-submenu{ position:relative; }
.dropdown-submenu > .sub-toggle::after{
  display:inline-block; content:""; float:right; margin-top:.55em; margin-left:.5rem;
  border-top:.3em solid transparent; border-bottom:.3em solid transparent;
  border-left:.32em solid currentColor; border-right:0; transition:transform .2s ease;
}

@media (min-width:992px){
  /* open top-level dropdowns on hover too (smoother, matches the live site) */
  #main_navbar .nav-item.dropdown:hover > .dropdown-menu{ display:block; }
  /* flyout submenus to the right */
  .dropdown-submenu > .dropdown-menu{
    top:-.5rem; left:100%; margin:0 0 0 .15rem; display:none; min-width:15rem;
  }
  .dropdown-submenu:hover > .dropdown-menu{ display:block; }
  /* keep an invisible bridge so diagonal mouse travel doesn't drop the flyout */
  .dropdown-submenu:hover::before{ content:""; position:absolute; right:-.2rem; top:0; width:.4rem; height:100%; }
}

@media (max-width:991.98px){
  /* mobile: expand nested submenu inline on tap */
  .dropdown-submenu > .dropdown-menu{ display:none; position:static; float:none; border:0; box-shadow:none;
    padding:.15rem 0 .15rem .9rem; margin:.1rem 0; background:transparent; }
  .dropdown-submenu.show > .dropdown-menu{ display:block; }
  .dropdown-submenu.show > .sub-toggle::after{ transform:rotate(90deg); }
  #main_navbar .dropdown-menu{ box-shadow:none; border:1px solid var(--jg-line); }
}

/* Chevron icons for multi-level nav (replace default carets) --------------- */
#main_navbar .dropdown-toggle::after{ display:none !important; }
.dropdown-submenu > .sub-toggle::after{ display:none !important; content:none !important; }
.nav-caret{ font-size:.62rem; margin-left:.3rem; opacity:.7; vertical-align:middle; transition:transform .2s ease; display:inline-block; }
.nav-caret-sub{ font-size:.7rem; margin-left:.5rem; opacity:.65; transition:transform .2s ease; }
/* rotate the top-level chevron when its dropdown is open */
#main_navbar .nav-item.dropdown > .dropdown-toggle[aria-expanded="true"] .nav-caret{ transform:rotate(180deg); }
@media (min-width:992px){
  /* on hover the flyout chevron stays pointing to the flyout direction (right) */
  .dropdown-submenu:hover > .sub-toggle .nav-caret-sub{ opacity:1; color:var(--jg-teal); }
}
@media (max-width:991.98px){
  /* on mobile the submenu expands downward, so point the chevron down when open */
  .dropdown-submenu.show > .sub-toggle .nav-caret-sub{ transform:rotate(90deg); }
}

/* ===========================================================================
   Footer — live-matching (Reach Us · Webmail · Visitor's counter)
   =========================================================================== */
.site-footer{ background:var(--color-darkblue); color:#e6eef1; }
.site-footer .footer-head{ color:#fff36b !important; font-weight:600; font-size:1.18rem; margin-bottom:1rem; }
.site-footer .footer-line{ color:#e6eef1 !important; font-size:.92rem; line-height:1.7; margin-bottom:.85rem; }
.site-footer .footer-line a{ color:#5bbfd4 !important; text-decoration:none; }
.site-footer .footer-line a:hover{ color:#8fd6e6 !important; text-decoration:underline; }
.site-footer .footer-links{ list-style:none; padding:0; margin:0; }
.site-footer .footer-links li{ margin-bottom:.7rem; }
.site-footer .footer-links li a{
  color:#5bbfd4 !important; text-decoration:none; font-size:.92rem; font-style:italic;
  display:inline-flex; align-items:baseline; gap:.55rem;
}
.site-footer .footer-links li a::before{ content:"\25B7"; color:#8fd6e6; font-size:.72rem; font-style:normal; }
.site-footer .footer-links li a:hover{ color:#8fd6e6 !important; text-decoration:underline; }
.site-footer .footer-divider{ height:6px; background:rgba(255,255,255,.18); border-radius:4px; margin:0 var(--bs-gutter-x,.75rem); }
.site-footer .footer-copy{ color:#e6eef1 !important; font-size:.9rem; }
.site-footer .footer-copy .footer-accent,
.site-footer a.footer-accent{ color:#fff36b !important; font-size:.9rem; }
.site-footer a.footer-accent:hover{ opacity:.85; text-decoration:underline !important; }

/* Footer visitor counter badge */
.site-footer .visitor-badge{
  display:inline-flex; align-items:center; gap:.5rem; margin-top:.9rem;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
  border-radius:10px; padding:.5rem .8rem;
}
.site-footer .visitor-badge i{ color:#fff36b; }
.site-footer .visitor-badge .vb-label{ color:#e6eef1; font-size:.82rem; }
.site-footer .visitor-badge .vb-count{
  color:#fff; font-weight:700; letter-spacing:.12em; font-variant-numeric:tabular-nums;
  background:rgba(0,0,0,.28); padding:.15rem .55rem; border-radius:6px; font-size:.95rem;
}

/* Embedded content inside migrated page bodies (maps, iframes, nested grids) */
.prose iframe{ width:100% !important; max-width:100%; border:0; border-radius:10px; }
.prose .container{ max-width:100% !important; padding-left:0; padding-right:0; }
.prose .row{ margin-left:0; margin-right:0; row-gap:1rem; }
.prose .ratio iframe,.prose iframe[src*="google.com/maps"]{ min-height:340px; }

/* Broaden: any embedded map/iframe inside the content area is responsive */
.page-wrap iframe, .content-card iframe{ width:100% !important; max-width:100% !important; border:0; border-radius:10px; }
/* Only un-cap NESTED containers inside migrated page bodies — NOT the page's
   own `.page-wrap > .container` layout wrapper (that must stay centred/capped). */
.content-card .container{ max-width:100% !important; padding-left:0 !important; padding-right:0 !important; }
.content-card .row{ margin-left:0; margin-right:0; row-gap:1rem; }
.content-card section, .content-card .container{ width:100%; }

/* ===========================================================================
   Elegant tables — applied site-wide (content pages + data tables)
   =========================================================================== */
.prose table, table.pro-table{
  width:100%; border-collapse:separate !important; border-spacing:0;
  background:#fff; border-radius:14px; overflow:hidden;
  box-shadow:0 1px 2px rgba(0,71,98,.05), 0 10px 24px rgba(0,71,98,.07);
  margin:1.5rem 0; font-size:.92rem; border:1px solid var(--jg-line);
}
/* Header */
.prose table thead th, table.pro-table thead th{
  background:linear-gradient(180deg,#0e849f,#0a6a80) !important; color:#fff !important;
  font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em;
  padding:.9rem 1.15rem !important; text-align:left; border:0 !important; white-space:nowrap;
}
/* Cells */
.prose table td, .prose table th, table.pro-table td{
  padding:.8rem 1.15rem !important; border:0 !important;
  border-bottom:1px solid var(--jg-line) !important; vertical-align:middle;
  font-variant-numeric:tabular-nums; color:#3f4c52;
}
.prose table tbody tr:last-child td, table.pro-table tbody tr:last-child td{ border-bottom:0 !important; }
/* Zebra + hover */
.prose table tbody tr:nth-child(even), table.pro-table tbody tr:nth-child(even){ background:#f7fbfc; }
.prose table tbody tr:hover, table.pro-table tbody tr:hover{ background:var(--jg-tint); }
/* Emphasise first column */
.prose table tbody td:first-child, table.pro-table tbody td:first-child{ font-weight:600; color:var(--jg-ink); }
/* Body tables (bed distribution etc.) that only have a bare table: give it a caption-less clean look */
.prose table thead + tbody tr:first-child td{ border-top:0; }

/* Neutralise Bootstrap's bordered/striped classes inside content so they inherit the elegant look */
.prose table.table-bordered td, .prose table.table-bordered th,
.prose table.table td, .prose table.table th{ border:0 !important; border-bottom:1px solid var(--jg-line) !important; }

/* Responsive: let wide content-page tables scroll on small screens */
@media (max-width:767.98px){
  .prose table{ display:block; overflow-x:auto; white-space:nowrap; }
}

/* ============================================================
   Leadership profile card (Principal / MSVP / Dean pages)
   ============================================================ */
.leader-profile{display:flex;gap:2.25rem;align-items:flex-start;flex-wrap:wrap}
.lp-media{position:relative;flex:0 0 auto;width:220px;margin:0 auto}
.lp-photo{width:220px;height:264px;object-fit:cover;object-position:center top;
  border-radius:16px;border:1px solid #e3e9ec;box-shadow:var(--jg-e2);
  background:#eef3f5;display:block}
.lp-media::before{content:"";position:absolute;inset:auto -10px -10px auto;width:70%;height:70%;
  border-radius:16px;background:linear-gradient(135deg,rgba(14,132,159,.10),rgba(0,71,98,.14));
  z-index:-1}
.lp-badge{position:absolute;left:50%;bottom:-15px;transform:translateX(-50%);white-space:nowrap;
  background:linear-gradient(135deg,#0e849f,#004762);color:#fff;font-size:.8rem;font-weight:600;
  padding:.35rem .95rem;border-radius:999px;box-shadow:var(--jg-e1);
  display:inline-flex;align-items:center;gap:.4rem}
.lp-badge i{font-size:.9rem}
.lp-info{flex:1 1 320px;min-width:280px;padding-top:.25rem}
.lp-eyebrow{display:inline-block;text-transform:uppercase;letter-spacing:.08em;font-size:.74rem;
  font-weight:700;color:#0a6a7f;background:#e8f4f7;padding:.28rem .75rem;border-radius:6px;margin-bottom:.7rem}
.lp-name{font-size:1.75rem;line-height:1.2;font-weight:800;color:#083b49;margin:.15rem 0 .2rem}
.lp-title{color:#5b6b70;font-size:1rem;margin:0 0 1.2rem;padding-bottom:1.1rem;border-bottom:2px solid #eef2f4}
.lp-meta{list-style:none;padding:0;margin:0;display:grid;gap:1rem}
.lp-meta li{display:flex;gap:.9rem;align-items:flex-start}
.lp-ic{flex:0 0 auto;width:42px;height:42px;border-radius:11px;display:inline-flex;align-items:center;
  justify-content:center;background:linear-gradient(135deg,#0e849f,#0a6a7f);color:#fff;font-size:1.05rem;
  box-shadow:var(--jg-e1)}
.lp-meta .lp-k{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:#8a969b;
  font-weight:700;margin-bottom:.15rem}
.lp-meta .lp-v{display:block;color:#2f3d42;font-weight:500;line-height:1.55}
.lp-meta a{color:#0a6a7f;text-decoration:none;word-break:break-word}
.lp-meta a:hover{text-decoration:underline}
@media (max-width:575.98px){
  .leader-profile{gap:1.75rem;justify-content:center;text-align:left}
  .lp-name{font-size:1.45rem}
  .lp-info{padding-top:.5rem}
}

/* ============================================================
   Medical Education Unit committee table
   ============================================================ */
.meu-table{ margin:1rem 0 1.5rem; }
.meu-table td.nm{ white-space:nowrap; font-weight:600; color:var(--jg-ink); }
.meu-table tbody td{ vertical-align:middle; }
.meu-table tr.sub td{
  background:linear-gradient(160deg,#eef6f8,#dbe9ee) !important;
  color:var(--jg-dark); font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; font-size:.78rem; text-align:center;
}
.meu-summary{ list-style:none; padding:0; margin:.5rem 0 0; display:grid; gap:.6rem; }
.meu-summary li{ position:relative; padding:.7rem 1rem .7rem 2.2rem; background:#f7fbfc;
  border:1px solid var(--jg-line); border-radius:10px; color:#2f3d42; }
.meu-summary li::before{ content:"\F633"; font-family:"bootstrap-icons"; position:absolute;
  left:.85rem; top:.68rem; color:#0e849f; font-size:.95rem; }
/* On mobile the shared rule scrolls the table; keep names unbroken there too. */
@media (max-width:575.98px){
  .meu-table td.nm{ white-space:nowrap; }
}

/* ============================================================
   Download list (converted from scraped "label + Click here" tables)
   ============================================================ */
.doc-list{ list-style:none; padding:0; margin:1rem 0; display:grid; gap:.6rem; }
.doc-list li{ margin:0; }
.doc-list a{ display:flex; align-items:center; gap:.8rem; padding:.8rem 1rem;
  border:1px solid var(--jg-line); border-radius:11px; text-decoration:none;
  color:#0a6a7f; font-weight:500; transition:all .2s; }
.doc-list a:hover{ border-color:var(--jg-teal); background:var(--jg-tint); }
.doc-list .dl-file{ flex:0 0 auto; color:#c0392b; font-size:1.25rem; }
.doc-list .dl-label{ flex:1 1 auto; color:var(--jg-ink); line-height:1.4; }
.doc-list a:hover .dl-label{ color:var(--jg-teal); }
.doc-list .dl-go{ flex:0 0 auto; color:var(--jg-teal); opacity:.5;
  transition:transform .2s, opacity .2s; }
.doc-list a:hover .dl-go{ opacity:1; transform:translateY(1px); }

/* ============================================================
   Facilities icon-card grid
   ============================================================ */
.facility-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1.25rem; margin:1.75rem 0 .5rem; }
.facility-card{ background:#fff; border:1px solid var(--jg-line); border-radius:16px;
  padding:2rem 1.25rem; text-align:center; box-shadow:var(--jg-e1);
  transition:transform .2s, box-shadow .2s, border-color .2s; }
.facility-card:hover{ transform:translateY(-4px); box-shadow:var(--jg-e2); border-color:var(--jg-teal); }
.facility-card .fc-icon{ display:inline-flex; align-items:center; justify-content:center;
  width:74px; height:74px; border-radius:50%; margin-bottom:1rem; font-size:1.9rem; color:#fff;
  background:linear-gradient(135deg,#0e849f,#004762); box-shadow:var(--jg-e1);
  transition:transform .2s; }
.facility-card:hover .fc-icon{ transform:scale(1.06); }
.facility-card h5{ margin:0; font-weight:700; color:var(--jg-dark); font-size:1.05rem; }

/* ============================================================
   Facilities photo grid
   ============================================================ */
.facilities-page{ max-width:920px; margin:0 auto; }
.fac-head{ text-align:center; margin:0 0 2rem; }
.fac-eyebrow{ display:inline-block; text-transform:uppercase; letter-spacing:.1em;
  font-size:.72rem; font-weight:700; color:#0a6a7f; background:#e8f4f7;
  padding:.3rem .85rem; border-radius:999px; }
.fac-head h2{ font-size:1.9rem; font-weight:800; color:#083b49; margin:.75rem 0 0; }
.fac-head h2::after{ content:""; display:block; width:54px; height:3px; border-radius:3px;
  margin:.65rem auto 0; background:linear-gradient(90deg,#0e849f,#004762); }
/* Scope beats `.prose p` so the auto margins actually centre the box. */
.fac-head .fac-sub{ color:#5b6b70; margin:.75rem auto 0 !important; max-width:34rem; line-height:1.6; }

.facility-photos{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin:0; }
.facility-photo{ margin:0; background:#fff; border:1px solid var(--jg-line); border-radius:16px;
  overflow:hidden; box-shadow:var(--jg-e1);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.facility-photo:hover{ transform:translateY(-4px); box-shadow:var(--jg-e2); border-color:var(--jg-teal); }
.facility-photo .fp-img{ aspect-ratio:1/1; background:var(--jg-tint);
  display:flex; align-items:center; justify-content:center; padding:1.5rem; }
/* Source art is teal line-work on white; multiply drops the white onto the tint
   so every card frames identically and nothing gets cropped. */
.facility-photo .fp-img img{ max-width:100%; max-height:100%; object-fit:contain;
  mix-blend-mode:multiply; transition:transform .35s ease; }
.facility-photo:hover .fp-img img{ transform:scale(1.06); }
.facility-photo figcaption{ padding:.85rem 1rem; text-align:center; font-weight:700;
  color:var(--jg-dark); font-size:1.02rem; border-top:1px solid var(--jg-line); }
.facility-photo:hover figcaption{ color:var(--jg-teal); }
@media (max-width:820px){ .facility-photos{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .facility-photos{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce){
  .facility-photo, .facility-photo .fp-img img{ transition:none; }
  .facility-photo:hover, .facility-photo:hover .fp-img img{ transform:none; }
}

/* ============================================================
   About the Hostel — digital document
   ============================================================ */
.doc-page{ max-width:900px; margin:0 auto; }
.doc-lead{ font-size:1.08rem; color:#40525a; line-height:1.65; margin-bottom:1.1rem; }
/* Scope with the element so `.prose a` can't repaint the label teal-on-teal. */
.doc-page a.doc-pdf{ display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1.1rem;
  background:linear-gradient(135deg,#0e849f,#004762); color:#fff; font-weight:600;
  border-radius:10px; text-decoration:none; box-shadow:var(--jg-e1); transition:all .2s; }
.doc-page a.doc-pdf:hover{ color:#fff; transform:translateY(-2px); box-shadow:var(--jg-e2); }
.doc-sec{ margin-top:2.25rem; }
.doc-sec > h2{ display:flex; align-items:center; gap:.7rem; font-size:1.45rem; font-weight:800;
  color:#083b49; padding-bottom:.7rem; margin-bottom:1.1rem; border-bottom:2px solid var(--jg-line); }
.doc-sec .doc-ico{ display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; flex:0 0 auto; border-radius:12px; font-size:1.2rem; color:#fff;
  background:linear-gradient(135deg,#0e849f,#004762); box-shadow:var(--jg-e1); }
.doc-sec h3{ font-size:1.12rem; font-weight:700; color:var(--jg-dark); margin:1.4rem 0 .6rem; }
.doc-sec ul{ padding-left:0; list-style:none; margin:0 0 .5rem; }
.doc-sec ul li{ position:relative; padding:.35rem 0 .35rem 1.6rem; line-height:1.6; color:#33424a; }
.doc-sec ul li::before{ content:"\F270"; font-family:"bootstrap-icons"; position:absolute;
  left:0; top:.4rem; color:var(--jg-teal); font-size:.95rem; }
.doc-callout{ background:linear-gradient(160deg,#eef6f8,#dbe9ee); border:1px solid #cfe2e8;
  border-radius:14px; padding:1.1rem 1.3rem; margin:1.2rem 0; }
.doc-callout h4{ display:flex; align-items:center; gap:.5rem; font-size:1.05rem; font-weight:800;
  color:#083b49; margin:0 0 .5rem; }
.doc-callout ul{ margin:0; }
.doc-callout ul li::before{ color:#0a6a7f; }
.doc-quote{ border-left:4px solid var(--jg-teal); background:#f7fbfc; margin:0 0 1.25rem;
  padding:1rem 1.25rem; border-radius:0 12px 12px 0; font-style:italic; color:#40525a; line-height:1.7; }

/* Numbered document checklist (Hostel Clearance) — scoped to beat .prose ol */
.doc-page .doc-steps{ list-style:none; counter-reset:step; padding:0; margin:.6rem 0 0;
  display:grid; gap:.75rem; }
.doc-page .doc-steps li{ counter-increment:step; position:relative;
  padding:.9rem 1.1rem .9rem 3.6rem; background:#f7fbfc; border:1px solid var(--jg-line);
  border-radius:12px; color:#33424a; line-height:1.55; }
.doc-page .doc-steps li::before{ content:counter(step); position:absolute; left:.9rem; top:50%;
  transform:translateY(-50%); width:2rem; height:2rem; border-radius:50%; display:flex;
  align-items:center; justify-content:center; font-weight:700; font-size:.9rem; color:#fff;
  background:linear-gradient(135deg,#0e849f,#004762); box-shadow:var(--jg-e1); }

/* Headline stat cards (General Information "at a glance") */
.doc-page .stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1rem; margin:.4rem 0 1.4rem; }
.doc-page .stat{ background:linear-gradient(160deg,#eef6f8,#dbe9ee); border:1px solid #cfe2e8;
  border-radius:14px; padding:1.15rem 1rem; text-align:center; }
.doc-page .stat-num{ display:block; font-size:1.7rem; font-weight:800; color:#083b49; line-height:1.1; }
.doc-page .stat-label{ display:block; margin-top:.35rem; font-size:.82rem; color:#5b6b70;
  font-weight:600; line-height:1.3; }

/* ============================================================
   Directory search / filter bar (Committees, Departments)
   ============================================================ */
.dir-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  flex-wrap:wrap; margin-bottom:1.6rem; }
.dir-search{ position:relative; flex:1 1 320px; max-width:460px; }
.dir-search > i{ position:absolute; left:1rem; top:50%; transform:translateY(-50%);
  color:var(--jg-muted); pointer-events:none; font-size:1.05rem; }
.dir-search input{ width:100%; height:48px; padding:.6rem 1rem .6rem 2.8rem;
  border:1px solid var(--jg-line); border-radius:12px; background:#fff; color:var(--jg-ink);
  font-size:1rem; box-shadow:var(--jg-e1); transition:border-color .2s, box-shadow .2s; }
.dir-search input::placeholder{ color:var(--jg-muted); }
.dir-search input:focus{ outline:none; border-color:var(--jg-teal);
  box-shadow:0 0 0 3px rgba(14,132,159,.15); }
.dir-count{ color:var(--jg-muted); font-size:.9rem; font-weight:600; white-space:nowrap; }
@media (max-width:575.98px){ .dir-search{ max-width:none; } }

/* ============================================================
   Rich directory toolbar — search + sort segmented + filter chips
   ============================================================ */
.dir-bar{ display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; background:#fff;
  border:1px solid var(--jg-line); border-radius:16px; padding:.55rem; box-shadow:var(--jg-e1);
  margin-bottom:1rem; }
.dir-bar .dir-search{ flex:1 1 240px; max-width:none; }
.dir-bar .dir-search input{ height:46px; background:var(--jg-tint); border-color:transparent; box-shadow:none; }
.dir-bar .dir-search input:focus{ background:#fff; border-color:var(--jg-teal); }
.dir-controls{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }

/* Segmented sort control */
.seg{ display:inline-flex; background:var(--jg-tint); border-radius:11px; padding:3px; }
.seg-btn{ border:0; background:transparent; color:var(--jg-body); font-weight:600; font-size:.85rem;
  padding:.5rem .8rem; min-height:40px; border-radius:8px; cursor:pointer; white-space:nowrap;
  display:inline-flex; align-items:center; gap:.35rem; transition:color .15s; }
.seg-btn:hover{ color:var(--jg-teal); }
.seg-btn.is-active{ background:#fff; color:var(--jg-teal); box-shadow:var(--jg-e1); }
.seg-btn:focus-visible{ outline:2px solid var(--jg-teal); outline-offset:2px; }

/* Filter chips */
.chip-row{ display:flex; gap:.4rem; flex-wrap:wrap; }
.chip{ border:1px solid var(--jg-line); background:#fff; color:var(--jg-body); font-weight:600;
  font-size:.85rem; padding:.5rem .9rem; min-height:40px; border-radius:999px; cursor:pointer;
  white-space:nowrap; transition:all .15s; }
.chip:hover{ border-color:var(--jg-teal); color:var(--jg-teal); }
.chip.is-active{ background:linear-gradient(135deg,#0e849f,#004762); color:#fff; border-color:transparent; }
.chip:focus-visible{ outline:2px solid var(--jg-teal); outline-offset:2px; }

.dir-countbar{ margin:0 .3rem 1.4rem; color:var(--jg-muted); font-size:.88rem; font-weight:600; }

@media (max-width:767.98px){
  .dir-bar .dir-search{ flex:1 1 100%; }
  .dir-controls{ width:100%; justify-content:space-between; }
}

/* ============================================================
   Gallery lightbox — prev / next navigation
   ============================================================ */
#lightbox{ background:rgba(8,20,24,.55); }
#lightbox .modal-content{ background:transparent !important; border:0; box-shadow:none; }
.lb-topbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem; }
.lb-count{ color:#fff; font-size:.85rem; font-weight:600; opacity:.9; text-shadow:0 1px 3px rgba(0,0,0,.6); }
.lb-stage{ display:block; }
/* Wrapper shrinks to the rendered image (fit-content) and centres, so the arrows
   hug the image edges — not the full modal — for any portrait/landscape aspect. */
.lb-imgwrap{ position:relative; width:fit-content; max-width:100%; margin:0 auto; line-height:0; }
#lightbox-img{ max-width:100%; max-height:80vh; width:auto; display:block;
  border-radius:12px; background:#0d1417; }
.lb-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:46px; height:46px;
  border:0; border-radius:50%; background:rgba(0,0,0,.5); color:#fff; font-size:1.4rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .2s, transform .15s; }
.lb-nav:hover{ background:rgba(0,0,0,.8); }
.lb-nav:active{ transform:translateY(-50%) scale(.92); }
.lb-nav:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.lb-prev{ left:10px; right:auto; } .lb-next{ right:10px; left:auto; }
@media (max-width:575.98px){
  .lb-nav{ width:40px; height:40px; font-size:1.2rem; }
}

/* ============================================================
   Faculty table — portrait column
   ============================================================ */
.faculty-table th:first-child, .faculty-table td:first-child{ width:74px; text-align:center; }
.fac-photo-cell{ padding:.5rem !important; }
.fac-photo{ width:58px; height:58px; border-radius:10px; object-fit:cover; object-position:center top;
  border:1px solid var(--jg-line); box-shadow:var(--jg-e1); background:#eef3f5; display:inline-block; }
.fac-photo-empty{ display:inline-flex; align-items:center; justify-content:center;
  color:#9fb8c0; font-size:1.4rem; }

/* ============================================================
   Contact page — Key Contacts cards
   ============================================================ */
.text-teal{ color:var(--jg-teal) !important; }
.lead-intro{ color:#40525a; font-size:1.05rem; line-height:1.6; max-width:60rem; }
.sec-title{ display:flex; align-items:center; gap:.6rem; font-size:1.15rem; font-weight:800;
  color:var(--jg-dark); margin:0 0 1rem; }
.sec-title .bar{ display:inline-block; width:5px; height:20px; border-radius:3px;
  background:linear-gradient(180deg,#0e849f,#004762); }
.ct-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1rem; margin-bottom:.5rem; }
.ct-card{ background:#fff; border:1px solid var(--jg-line); border-radius:14px; padding:1.15rem 1.25rem;
  box-shadow:var(--jg-e1); transition:transform .2s, box-shadow .2s, border-color .2s; }
.ct-card:hover{ transform:translateY(-3px); box-shadow:var(--jg-e2); border-color:var(--jg-teal); }
.ct-ico{ width:42px; height:42px; border-radius:11px; display:inline-flex; align-items:center;
  justify-content:center; background:linear-gradient(135deg,#0e849f,#004762); color:#fff;
  font-size:1.15rem; margin-bottom:.75rem; box-shadow:var(--jg-e1); }
.ct-title{ font-weight:700; color:var(--jg-dark); font-size:1rem; margin:0 0 .1rem; }
.ct-name{ color:var(--jg-muted); font-size:.88rem; margin:0 0 .7rem; }
.ct-links{ display:grid; gap:.35rem; }
.ct-links a{ display:flex; align-items:center; gap:.55rem; color:#0a6a7f; text-decoration:none;
  font-size:.9rem; word-break:break-word; }
.ct-links a i{ color:var(--jg-teal); flex:0 0 auto; }
.ct-links a:hover{ text-decoration:underline; }

/* ===========================================================================
   Document Formats modal — teal-token styled, professional presentation
   =========================================================================== */
#docFormatsModal .modal-content{ border-radius:16px; overflow:hidden; }
#docFormatsModal .modal-header{
  background:linear-gradient(135deg,var(--jg-teal) 0%,var(--jg-dark) 100%);
  padding:1.1rem 1.5rem;
}
#docFormatsModal .modal-title{ font-size:1.08rem; letter-spacing:.01em; color:#fff; }
#docFormatsModal .modal-title i{ opacity:.9; }
#docFormatsModal .doc-note{
  background:var(--jg-tint); border-left:3px solid var(--jg-teal);
  border-radius:10px; color:var(--jg-ink);
}
#docFormatsModal .doc-note i{ color:var(--jg-teal); flex:0 0 auto; }
#docFormatsModal .doc-note a{
  color:var(--jg-dark); font-weight:600; text-decoration:underline;
  text-underline-offset:2px;
}
#docFormatsModal .doc-note a:hover{ color:var(--jg-teal); }
#docFormatsModal .doc-list li + li{ margin-top:.55rem; }
#docFormatsModal .doc-list a{
  display:flex; align-items:center; gap:.9rem;
  padding:.85rem 1rem;
  border:1px solid var(--jg-line); border-radius:11px;
  text-decoration:none; color:var(--jg-ink);
  transition:border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}
#docFormatsModal .doc-list a:hover,
#docFormatsModal .doc-list a:focus-visible{
  border-color:var(--jg-teal); background:var(--jg-tint);
  transform:translateX(3px); box-shadow:0 4px 14px rgba(14,132,159,.10);
}
#docFormatsModal .doc-list .bi-file-earmark-pdf-fill{
  color:#d32f2f; font-size:1.55rem; flex:0 0 auto; line-height:1;
}
#docFormatsModal .doc-list .doc-title{ flex:1 1 auto; font-weight:500; line-height:1.3; }
#docFormatsModal .doc-cta{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.8rem; font-weight:600; color:var(--jg-teal);
  padding:.32rem .75rem; border-radius:999px;
  background:rgba(14,132,159,.09);
  flex:0 0 auto; transition:background .2s ease, color .2s ease;
}
#docFormatsModal .doc-list a:hover .doc-cta,
#docFormatsModal .doc-list a:focus-visible .doc-cta{
  background:var(--jg-teal); color:#fff;
}
@media (max-width:575.98px){
  #docFormatsModal .modal-body{ padding:1.25rem!important; }
  #docFormatsModal .doc-list .doc-cta span,
  #docFormatsModal .doc-list .doc-cta{ font-size:.75rem; }
}

/* ===========================================================================
   Responsive tables — auto-applied wrapper (see JS in layouts/public.blade)
   =========================================================================== */
.prose .table-responsive,
.prose-table-scroll{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  margin:1.5rem 0;
  border-radius:14px;
  box-shadow:0 1px 2px rgba(0,71,98,.05), 0 10px 24px rgba(0,71,98,.07);
  /* Fade edges hint at horizontally scrollable content */
  background:
    linear-gradient(90deg, #fff 30%, rgba(255,255,255,0)) 0 0 / 40px 100%,
    linear-gradient(-90deg, #fff 30%, rgba(255,255,255,0)) 100% 0 / 40px 100%,
    linear-gradient(90deg, rgba(0,71,98,.10), rgba(255,255,255,0)) 0 0 / 14px 100%,
    linear-gradient(-90deg, rgba(0,71,98,.10), rgba(255,255,255,0)) 100% 0 / 14px 100%;
  background-repeat:no-repeat;
  background-attachment:local, local, scroll, scroll;
}
/* Table sits flush inside the wrapper (wrapper owns radius/shadow) */
.prose .table-responsive > table,
.prose-table-scroll > table{
  margin:0 !important; box-shadow:none !important; border-radius:0 !important;
  min-width:100%;
}
/* Override the old ≤768px "display:block" rule when the table is wrapped —
   wrapper handles the scroll, table must keep proper table layout. */
@media (max-width:767.98px){
  .prose .table-responsive > table,
  .prose-table-scroll > table{ display:table !important; white-space:nowrap !important; }
}
/* Slim scrollbar on the wrapper */
.prose-table-scroll::-webkit-scrollbar{ height:8px; }
.prose-table-scroll::-webkit-scrollbar-thumb{ background:rgba(14,132,159,.35); border-radius:999px; }
.prose-table-scroll::-webkit-scrollbar-thumb:hover{ background:var(--jg-teal); }
.prose-table-scroll::-webkit-scrollbar-track{ background:transparent; }