/* ========================================
   PAGES CSS – Departments, Administration,
   Notices/Holidays, Rankings
   ======================================== */

/* ---- PAGE BANNER ---- */
.page-banner {
  background: linear-gradient(135deg, var(--deep) 0%, var(--deep2) 50%, #3d2a00 100%);
  padding: 3rem 0 2.5rem;
  color: #fff;
}
.breadcrumb { font-size: .8rem; color: rgba(255,255,255,.5); margin-bottom: .75rem; }
.breadcrumb a { color: var(--gold-light); }
.breadcrumb span { margin: 0 .35rem; }
.page-banner h1 { font-family: var(--font-display); font-size: clamp(1.6rem,3.5vw,2.5rem); color: #fff; margin-bottom: .6rem; }
.page-banner p { color: rgba(255,255,255,.65); font-size: .95rem; max-width: 720px; margin: 0; }

.active { color: var(--gold-dark) !important; font-weight: 700 !important; }

/* ================= DEPARTMENTS ================= */
.dept-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 1.5rem; margin-top: 1rem; }
.dept-card { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 1.75rem; transition: all .25s; }
.dept-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--gold); }
.dept-icon { font-size: 2.2rem; margin-bottom: .75rem; }
.dept-card h3 { font-size: 1.05rem; margin-bottom: .5rem; }
.dept-card p { font-size: .85rem; margin-bottom: 1rem; }
.dept-meta { display: flex; gap: .75rem; flex-wrap: wrap; }
.dept-meta span { font-size: .72rem; font-weight: 700; background: var(--gold-pale); color: var(--gold-dark); padding: .25rem .65rem; border-radius: 20px; border: 1px solid var(--border); }
.highlight-dept { background: var(--deep); border-color: var(--gold); }
.highlight-dept h3 { color: var(--gold-light); }
.highlight-dept p { color: rgba(255,255,255,.7); }
.highlight-dept .dept-meta span { background: rgba(200,150,12,.15); color: var(--gold-light); border-color: rgba(200,150,12,.3); }

/* ================= ADMINISTRATION ================= */
.admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 1.5rem; margin-top: 1rem; }
.admin-card { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 1.75rem; text-align: center; transition: all .25s; }
.admin-card:hover { box-shadow: var(--shadow-lg); border-color: var(--gold); }
.top-card { background: var(--deep); border-color: var(--gold); grid-column: 1 / -1; max-width: 420px; margin: 0 auto; }
.top-card h4, .top-card p { color: rgba(255,255,255,.85); }
.top-card h4 { color: var(--gold-light); }
.admin-avatar { display: flex; justify-content: center; margin-bottom: 1rem; }
.admin-avatar.small svg { width: 56px; height: 56px; }
.admin-card h4 { font-family: var(--font-display); font-size: 1.05rem; color: var(--deep); margin-bottom: .25rem; }
.admin-role { display: inline-block; font-size: .75rem; font-weight: 700; color: var(--gold-dark); background: var(--gold-pale); padding: .2rem .75rem; border-radius: 20px; margin-bottom: .75rem; }
.top-card .admin-role { background: rgba(200,150,12,.15); color: var(--gold-light); }
.admin-card p { font-size: .85rem; margin: 0; }

.committee-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 1.5rem; margin-top: 1rem; }
.committee-card { background: #fff; border-radius: 10px; padding: 1.5rem; box-shadow: var(--shadow); border-left: 3px solid var(--gold); }
.committee-card h4 { font-size: .98rem; margin-bottom: .5rem; }
.committee-card p { font-size: .85rem; margin-bottom: .75rem; }
.committee-head { font-size: .75rem; font-weight: 700; color: var(--gold-dark); }

/* ================= NOTICES & HOLIDAYS ================= */
.notice-page-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 3rem; align-items: start; }
.notice-page-list { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.25rem; }
.notice-page-item { background: #fff; border-radius: 10px; padding: 1.5rem; box-shadow: var(--shadow); border-left: 3px solid var(--gold); }
.notice-page-item.urgent { border-left-color: #dc3545; }
.np-tag { display: inline-block; font-size: .7rem; font-weight: 700; padding: .15rem .6rem; border-radius: 4px; background: var(--gold-pale); color: var(--gold-dark); margin-bottom: .6rem; letter-spacing: .04em; }
.np-tag.urgent-tag { background: #ffe0e0; color: #c00; }
.notice-page-item h4 { font-size: .95rem; margin-bottom: .5rem; }
.notice-page-item p { font-size: .85rem; margin-bottom: .6rem; }
.np-date { font-size: .75rem; color: var(--text-muted); }

.holiday-table-wrap { margin-top: 1.25rem; }
.holiday-table th, .holiday-table td { font-size: .85rem; }
.holiday-note { padding: .75rem 1.25rem; font-size: .75rem; color: var(--text-muted); background: var(--surface2); border-top: 1px solid var(--border); }

.exam-cal-card { background: #fff; border-radius: 10px; padding: 1.5rem; box-shadow: var(--shadow); margin-top: 1.5rem; border-top: 3px solid var(--gold); }
.exam-cal-card h3 { font-size: 1rem; margin-bottom: 1rem; }
.exam-cal-card ul { list-style: none; display: flex; flex-direction: column; gap: .6rem; }
.exam-cal-card li { font-size: .85rem; color: var(--text-muted); padding-left: 1rem; border-left: 2px solid var(--gold-pale); }
.exam-cal-card li strong { color: var(--deep); }

/* ================= RANKINGS ================= */
.rank-badges-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px,1fr)); gap: 1.5rem; margin-top: 1rem; }
.rank-badge-card { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 1.75rem; text-align: center; transition: all .25s; }
.rank-badge-card:hover { box-shadow: var(--shadow-lg); border-color: var(--gold); transform: translateY(-4px); }
.rank-badge-icon { font-size: 2.5rem; margin-bottom: .75rem; }
.rank-badge-card h3 { font-size: 1.05rem; margin-bottom: .5rem; }
.rank-badge-card p { font-size: .85rem; margin-bottom: .75rem; }
.rank-badge-meta { font-size: .72rem; font-weight: 700; color: var(--gold-dark); background: var(--gold-pale); padding: .25rem .75rem; border-radius: 20px; }

.rank-stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 1.25rem; margin-top: 1rem; }
.rank-stat-card { background: #fff; border-radius: 10px; padding: 1.75rem 1rem; text-align: center; box-shadow: var(--shadow); border-top: 3px solid var(--gold); }
.rank-stat-num { font-family: var(--font-display); font-size: 2.2rem; font-weight: 800; color: var(--deep); margin-bottom: .35rem; }
.rank-stat-label { font-size: .8rem; color: var(--text-muted); font-weight: 600; }

.achievement-timeline { display: flex; flex-direction: column; gap: 0; margin-top: 1.5rem; max-width: 760px; margin-left: auto; margin-right: auto; }
.ach-item { display: flex; gap: 1.5rem; align-items: flex-start; padding: 1.1rem 0; border-bottom: 1px solid var(--border); }
.ach-item:last-child { border-bottom: none; }
.ach-year { font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; color: var(--gold-dark); min-width: 70px; flex-shrink: 0; }
.ach-text { font-size: .9rem; color: var(--text-muted); padding-top: .25rem; }

/* ================= RESPONSIVE ================= */
@media(max-width:900px){
  .notice-page-grid { grid-template-columns: 1fr; }
  .top-card { grid-column: auto; max-width: 100%; }
}
@media(max-width:600px){
  .ach-item { gap: 1rem; }
  .ach-year { min-width: 56px; font-size: 1.1rem; }
}