/*
 * ============================================================
 *  EVA — ACADEMICS PAGE STYLES
 *  Scope: academics_secondary.html (template for all four
 *         academic division pages — duplicate and swap content)
 *
 *  REUSE AUDIT — what this page inherits from shared files:
 *  ┌─ base.css        → all tokens, eva-section-label,
 *  │                     eva-section-title, eva-divider
 *  ├─ layout.css      → eva-topbar, eva-navbar, eva-footer,
 *  │                     eva-back-to-top
 *  ├─ components.css  → eva-btn (all variants), eva-badge,
 *  │                     eva-page-hero, eva-breadcrumb,
 *  │                     eva-stats, eva-testimonial,
 *  │                     eva-admission (CTA section)
 *  └─ utilities.css   → eva-section, eva-section--light,
 *                        eva-section--white, eva-body-text,
 *                        eva-serif-text
 *
 *  Only the five patterns below are genuinely new.
 *  When duplicating this page for Nursery / Primary / Crèche,
 *  this CSS file is shared unchanged — only the HTML content
 *  and colour-modifier classes need to differ.
 * ============================================================
 */

.eva-content-hero {
  min-height: 370px;
  position: relative;
  display: flex;
  align-items: end;
  overflow: hidden;
  border-bottom: 4px solid var(--clr-gold);
}

.eva-content-hero__image {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
}

.eva-content-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(42, 16, 16, 0.94), rgba(42, 16, 16, 0.42));
}

.eva-content-hero__content { padding-top: 5rem; padding-bottom: 4rem; }
.eva-content-sidebar { top: 95px; }

@media (max-width: 767px) {
  .eva-content-hero { min-height: 310px; }
  .eva-content-hero__content { padding-top: 4rem; padding-bottom: 3rem; }
}


/* ══════════════════════════════════════════════════════════════
   PROGRAMME INTRO  (image + overview text split)
   Block: .eva-prog-intro
   The two-column layout that opens every academic page:
   left = image with decorative frame, right = overview prose.
══════════════════════════════════════════════════════════════ */

.eva-prog-intro__img-wrap {
  position: relative;
}

.eva-prog-intro__img {
  width: 100%;
  border-radius: var(--radius-md);
  object-fit: cover;
  height: 480px;
  display: block;
  position: relative;
  z-index: 2;
}

/* Gold offset frame — mirrors the director photo treatment */
.eva-prog-intro__frame {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 100%;
  height: 100%;
  border: 4px solid var(--clr-gold);
  border-radius: var(--radius-md);
  z-index: 1;
}

/* Floating age-range badge on the image */
.eva-prog-intro__age-badge {
  position: absolute;
  bottom: -20px;
  right: -20px;
  background: var(--clr-primary);
  border-radius: var(--radius-md);
  padding: 1rem 1.4rem;
  z-index: 3;
  box-shadow: var(--shadow-card);
  text-align: center;
}

.eva-prog-intro__age-num {
  font-family: var(--ff-display);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--clr-gold);
  line-height: 1;
  display: block;
}

.eva-prog-intro__age-label {
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clr-white-65);
  font-weight: 500;
  display: block;
  margin-top: 0.25rem;
}

/* Accreditation / recognition badges row */
.eva-prog-intro__accred {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.eva-prog-intro__accred-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--clr-light);
  border: 1px solid var(--clr-muted-bg);
  color: var(--clr-primary);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-pill);
}

.eva-prog-intro__accred-pill i {
  color: var(--clr-gold);
}

/* Key outcomes list */
.eva-prog-intro__outcomes {
  list-style: none;
  padding: 0;
  margin: 1.2rem 0 0;
}

.eva-prog-intro__outcomes li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.92rem;
  color: var(--clr-muted);
  line-height: 1.65;
  margin-bottom: 0.65rem;
}

.eva-prog-intro__outcomes li::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--clr-gold);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 0.42rem;
}

@media (max-width: 991px) {
  .eva-prog-intro__img {
    height: 320px;
  }

  .eva-prog-intro__age-badge {
    right: 0;
  }
}

@media (max-width: 767px) {
  .eva-prog-intro__img-wrap {
    margin-bottom: 3rem;
  }
}


/* ══════════════════════════════════════════════════════════════
   STREAM / SUBJECT CARDS  (Sciences, Arts, Commerce etc.)
   Block: .eva-stream-card
   Used in the Curriculum section to show the three academic
   streams at secondary level. For other divisions, swap out
   the content to show subjects or learning areas instead.
══════════════════════════════════════════════════════════════ */

.eva-stream-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--clr-primary-10);
  background: var(--clr-white);
  height: 100%;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.eva-stream-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
}

.eva-stream-card__header {
  padding: 1.8rem 1.6rem 1.4rem;
  position: relative;
}

/* Each stream gets its own accent colour via a modifier */
.eva-stream-card--sciences .eva-stream-card__header {
  background: linear-gradient(135deg, var(--clr-primary) 0%, var(--clr-secondary) 100%);
}

.eva-stream-card--arts .eva-stream-card__header {
  background: linear-gradient(135deg, var(--clr-accent) 0%, var(--clr-secondary) 100%);
}

.eva-stream-card--commerce .eva-stream-card__header {
  background: linear-gradient(135deg, var(--clr-gold) 0%, var(--clr-gold-dark) 100%);
}

.eva-stream-card__icon {
  width: 48px;
  height: 48px;
  background: var(--clr-white-12);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--clr-white);
  margin-bottom: 1rem;
}

.eva-stream-card--commerce .eva-stream-card__icon {
  color: var(--clr-dark);
}

.eva-stream-card__name {
  font-family: var(--ff-display);
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--clr-white);
  margin-bottom: 0.3rem;
}

.eva-stream-card--commerce .eva-stream-card__name {
  color: var(--clr-dark);
}

.eva-stream-card__tagline {
  font-size: 0.78rem;
  color: var(--clr-white-75);
  font-style: italic;
  font-family: var(--ff-serif);
}

.eva-stream-card--commerce .eva-stream-card__tagline {
  color: rgba(42, 16, 16, 0.65);
}

.eva-stream-card__body {
  padding: 1.4rem 1.6rem 1.8rem;
}

.eva-stream-card__subjects-label {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--clr-gold);
  margin-bottom: 0.7rem;
}

.eva-stream-card__subjects {
  list-style: none;
  padding: 0;
  margin: 0 0 1.2rem;
}

.eva-stream-card__subjects li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--clr-muted);
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--clr-primary-08);
}

.eva-stream-card__subjects li:last-child {
  border-bottom: none;
}

.eva-stream-card__subjects li i {
  color: var(--clr-gold);
  font-size: 0.75rem;
  flex-shrink: 0;
}

.eva-stream-card__career-label {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--clr-primary);
  margin-bottom: 0.5rem;
}

.eva-stream-card__careers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.eva-stream-card__career-tag {
  font-size: 0.72rem;
  background: var(--clr-light);
  color: var(--clr-primary);
  border-radius: var(--radius-pill);
  padding: 0.18rem 0.6rem;
  font-weight: 600;
}


/* ══════════════════════════════════════════════════════════════
   CURRICULUM ACCORDION
   Block: .eva-curriculum
   Term-by-term or year-by-year syllabus breakdown.
   Built on Bootstrap's native accordion — this CSS only
   overrides the visual skin, adding zero new JS.
══════════════════════════════════════════════════════════════ */

.eva-curriculum .accordion-item {
  border: 1px solid var(--clr-primary-10);
  border-radius: var(--radius-md) !important;
  overflow: hidden;
  margin-bottom: 0.75rem;
}

.eva-curriculum .accordion-button {
  font-family: var(--ff-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--clr-primary);
  background: var(--clr-white);
  padding: 1.1rem 1.4rem;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
}

.eva-curriculum .accordion-button:not(.collapsed) {
  background: var(--clr-primary);
  color: var(--clr-gold);
}

/* Replace Bootstrap's chevron with our gold one */
.eva-curriculum .accordion-button::after {
  filter: none;
  background-image: none;
  content: '\F282'; /* bi-chevron-down unicode */
  font-family: 'bootstrap-icons';
  font-size: 0.85rem;
  color: var(--clr-gold);
  width: auto;
  height: auto;
  transition: transform var(--transition-base);
}

.eva-curriculum .accordion-button:not(.collapsed)::after {
  transform: rotate(180deg);
  color: var(--clr-gold);
}

.eva-curriculum .accordion-body {
  padding: 1.2rem 1.4rem 1.6rem;
  background: var(--clr-white);
}

.eva-curriculum__subject-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.eva-curriculum__subject-pill {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--clr-light);
  border: 1px solid var(--clr-muted-bg);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.7rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--clr-dark);
}

.eva-curriculum__subject-pill i {
  color: var(--clr-gold);
  font-size: 0.75rem;
  flex-shrink: 0;
}

.eva-curriculum__note {
  font-size: 0.8rem;
  color: var(--clr-muted);
  font-style: italic;
  font-family: var(--ff-serif);
  margin: 0;
}


/* ══════════════════════════════════════════════════════════════
   CO-CURRICULAR ACTIVITIES STRIP
   Block: .eva-activity
   Icon + label cards in a responsive grid showing clubs,
   sports and activities available to students.
══════════════════════════════════════════════════════════════ */

.eva-activity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 1rem;
}

.eva-activity {
  background: var(--clr-white);
  border: 1px solid var(--clr-primary-10);
  border-radius: var(--radius-md);
  padding: 1.2rem 0.8rem 1rem;
  text-align: center;
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
  cursor: default;
}

.eva-activity:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px var(--clr-primary-10);
  border-color: var(--clr-gold);
}

.eva-activity__icon {
  width: 48px;
  height: 48px;
  background: var(--clr-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--clr-gold);
  margin: 0 auto 0.7rem;
  transition: background var(--transition-base);
}

.eva-activity:hover .eva-activity__icon {
  background: var(--clr-gold);
  color: var(--clr-dark);
}

.eva-activity__name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--clr-primary);
  line-height: 1.3;
}


/* ══════════════════════════════════════════════════════════════
   STAFF SPOTLIGHT CARDS
   Block: .eva-staff-card
   Compact card showing a teacher's photo, name, subject
   and a short bio. Used in the "Our Teachers" section.
══════════════════════════════════════════════════════════════ */

.eva-staff-card {
  background: var(--clr-white);
  border: 1px solid var(--clr-primary-10);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-align: center;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  height: 100%;
}

.eva-staff-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
}

.eva-staff-card__img-wrap {
  height: 220px;
  overflow: hidden;
  position: relative;
  background: var(--clr-muted-bg);
}

.eva-staff-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform var(--transition-slow);
}

.eva-staff-card:hover .eva-staff-card__img {
  transform: scale(1.05);
}

/* Initials fallback when no photo is available */
.eva-staff-card__initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-display);
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--clr-gold);
  background: var(--clr-primary);
}

.eva-staff-card__body {
  padding: 1.2rem 1rem 1.4rem;
}

.eva-staff-card__name {
  font-family: var(--ff-display);
  font-size: 1rem;
  color: var(--clr-primary);
  font-weight: 700;
  margin-bottom: 0.2rem;
}

.eva-staff-card__subject {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clr-gold);
  font-weight: 600;
  margin-bottom: 0.65rem;
}

.eva-staff-card__bio {
  font-size: 0.82rem;
  color: var(--clr-muted);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 575px) {
  .eva-activity-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}