/* ============================================
   ICT DEPARTMENT PAGE STYLES
   ============================================ */

.ict-banner {
  background: linear-gradient(135deg, #0f6e56 0%, #1d9e75 100%);
}

.ict-lab-img {
  border-radius: var(--radius-lg);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ict-intro-text h2 {
  margin-bottom: var(--space-md);
}

.ict-intro-text p {
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}

.ict-stats {
  margin-top: var(--space-lg);
  gap: var(--space-md);
}

.ict-stat {
  text-align: center;
  background: var(--color-bg);
  border-radius: var(--radius);
  padding: var(--space-md);
}

.ict-stat-num {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--color-success);
}

.ict-stat-label {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.section-subtitle {
  text-align: center;
  color: var(--color-text-muted);
  margin-top: calc(-1 * var(--space-md));
  margin-bottom: var(--space-xl);
}

/* ============================================
   CURRICULUM ACCORDION
   ============================================
   Concept: Each .accordion-item has a header (always
   visible/clickable) and a content panel (collapsed
   by default via max-height: 0). JS toggles an "open"
   class on click. This is the SAME max-height trick
   we used for the mobile nav menu!
*/

.curriculum-accordion {
  max-width: 800px;
  margin: 0 auto;
}

.accordion-item {
  background: var(--color-bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: var(--space-sm);
  overflow: hidden;
}

.accordion-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: none;
  border: none;
  text-align: left;
  font-size: var(--fs-base);
  color: var(--color-text);
}

.accordion-level {
  background: var(--color-success);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 700;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  flex-shrink: 0;
}

.accordion-title {
  flex: 1;
  font-weight: 600;
}

.accordion-icon {
  font-size: var(--fs-lg);
  color: var(--color-text-muted);
  transition: transform var(--transition);
  flex-shrink: 0;
}

.accordion-header[aria-expanded="true"] .accordion-icon {
  transform: rotate(45deg); /* turns the + into an × */
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.accordion-content .check-list {
  padding: 0 var(--space-lg) var(--space-lg);
}

/* --- Club Cards --- */
.club-card {
  text-align: center;
}

.club-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-md);
}

.club-card h3 {
  margin-bottom: var(--space-sm);
}

.club-card p {
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}

/* --- ICT Staff Card --- */
.ict-staff {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}

.ict-staff-photo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.ict-staff h4 {
  margin-bottom: var(--space-xs);
}

.ict-staff p {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

/* --- Numbered lab rules (overrides the ✓ bullet from .check-list) --- */
.check-list-numbered {
  counter-reset: ict-rule;
  list-style: none;
  padding: 0;
  margin: 0;
}
.check-list-numbered li {
  counter-increment: ict-rule;
  padding: var(--space-sm) 0 var(--space-sm) 2rem;
}
.check-list-numbered li::before {
  content: counter(ict-rule) '.';
  color: var(--color-primary);
  font-weight: 700;
  width: 1.5rem;
}

/* --- Class Schedule table --- */
.data-table {
  border-collapse: collapse;
}
.data-table th, .data-table td {
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border);
}
.data-table th {
  background: var(--color-bg);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  color: var(--color-primary);
}

/* ============================================
   ICT ENROLLMENT SLIDE-OVER PANEL
   ============================================ */
.ict-enroll-overlay {
  display: none;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0,0,0,0.45);
  z-index: 998;
}
.ict-enroll-overlay.open { display: block; }

.ict-enroll-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 420px;
  max-width: 92vw;
  background: #fff;
  z-index: 999;
  box-shadow: -8px 0 30px rgba(0,0,0,0.2);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.ict-enroll-panel.open { transform: translateX(0); }

.ict-enroll-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.ict-enroll-panel-header h3 {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--color-primary);
  margin: 0;
}
.ict-enroll-close {
  background: none;
  border: none;
  font-size: 1.1rem;
  color: var(--color-text-light);
  cursor: pointer;
  padding: 4px 8px;
}

.ict-enroll-panel-body {
  padding: 22px;
}

/* ---- ICT DEPARTMENT PAGE RESPONSIVE ---- */
@media (max-width: 900px) {
  .ict-hero { min-height: auto; padding: var(--space-xl) 0; }
  .curriculum-grid { grid-template-columns: 1fr; }
  .ict-features-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .ict-features-grid { grid-template-columns: 1fr; }
  .accordion-header { font-size: var(--fs-sm); }
}