/**
 * public/assets/css/pages/programs.css
 * Styles specific to the Programs page only.
 */

/* ══════════════════════════════════════════════════════
   STICKY PROGRAM NAV TABS
══════════════════════════════════════════════════════ */
.prog-nav-wrap {
  position:   sticky;
  top:        68px; /* navbar height */
  z-index:    var(--z-sticky);
  background: var(--clr-white);
  border-bottom: 2px solid var(--clr-border);
  box-shadow: var(--shadow-sm);
}

.prog-nav {
  display:    flex;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.prog-nav::-webkit-scrollbar { display: none; }

.prog-nav__btn {
  flex-shrink:     0;
  display:         flex;
  align-items:     center;
  gap:             8px;
  padding:         16px 20px;
  font-size:       var(--fs-sm);
  font-weight:     var(--fw-semi);
  font-family:     var(--font-body);
  color:           var(--clr-text-muted);
  background:      transparent;
  border:          none;
  border-bottom:   3px solid transparent;
  cursor:          pointer;
  white-space:     nowrap;
  transition:
    color        var(--t-fast),
    border-color var(--t-fast),
    background   var(--t-fast);
  margin-bottom:   -2px;
}
.prog-nav__btn:hover        { color: var(--clr-primary); background: var(--clr-bg-alt); }
.prog-nav__btn.active       { color: var(--clr-primary); border-bottom-color: var(--clr-accent); }
.prog-nav__icon             { font-size: 16px; }

/* ══════════════════════════════════════════════════════
   PROGRAM OVERVIEW CARDS (top grid)
══════════════════════════════════════════════════════ */
.overview-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--sp-md);
}

.overview-card {
  background:    var(--clr-white);
  border:        1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  overflow:      hidden;
  transition:
    transform    var(--t-mid) var(--ease),
    box-shadow   var(--t-mid) var(--ease),
    border-color var(--t-mid);
}
.overview-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: transparent; }

.overview-card__header {
  height:          120px;
  display:         flex;
  align-items:     center;
  padding:         var(--sp-md);
  position:        relative;
  overflow:        hidden;
}
/* Decorative circle inside header */
.overview-card__header::after {
  content:       '';
  position:      absolute;
  bottom:        -20px;
  right:         -20px;
  width:         100px;
  height:        100px;
  border-radius: 50%;
  background:    rgba(255,255,255,.12);
}
.overview-card__icon { font-size: 38px; position: relative; z-index: 1; }

.overview-card__body    { padding: var(--sp-md); }
.overview-card__body h3 { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-medium); color: var(--clr-primary); margin-bottom: 8px; }
.overview-card__body p  { font-size: var(--fs-sm); color: var(--clr-text-muted); line-height: var(--lh-relaxed); margin-bottom: 14px; }

.overview-card__link {
  display:     inline-flex;
  align-items: center;
  gap:         5px;
  font-size:   var(--fs-sm);
  font-weight: var(--fw-semi);
  color:       var(--clr-primary-mid);
  transition:  gap var(--t-fast);
}
.overview-card__link:hover { gap: 9px; }

/* ══════════════════════════════════════════════════════
   PROGRAM DETAIL SECTIONS
══════════════════════════════════════════════════════ */
.prog-section {
  padding:      var(--sp-2xl) 0;
  scroll-margin-top: 130px; /* sticky nav + main nav */
}

.prog-detail-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--sp-xl);
  align-items:           center;
}

/* Flip: image right, text left */
.prog-detail-grid--flip { direction: rtl; }
.prog-detail-grid--flip > * { direction: ltr; }

/* Image */
.prog-img-wrap  { position: relative; }
.prog-img {
  width:          100%;
  height:         420px;
  object-fit:     cover;
  object-position: center top;
  border-radius:  var(--radius-lg);
  filter:         brightness(.92);
  display:        block;
}

/* Accent border behind image */
.prog-img-wrap::before {
  content:       '';
  position:      absolute;
  top:           16px;
  left:          -16px;
  width:         100%;
  height:        100%;
  border:        2px solid var(--clr-accent-light);
  border-radius: var(--radius-lg);
  z-index:       -1;
}
/* Flipped version — border on right */
.prog-img-wrap--flip::before { left: auto; right: -16px; }

/* Floating stat card on image */
.prog-stat-float {
  position:      absolute;
  bottom:        -18px;
  right:         -18px;
  background:    var(--clr-white);
  border-radius: var(--radius-md);
  padding:       14px 20px;
  box-shadow:    var(--shadow-lg);
  text-align:    center;
  animation:     float 4s ease-in-out infinite;
}
.prog-stat-float--left { right: auto; left: -18px; }
.prog-stat-float .num  { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 600; color: var(--clr-primary); line-height: 1; }
.prog-stat-float .lbl  { font-size: var(--fs-xs); color: var(--clr-text-muted); margin-top: 3px; }

/* Content */
.prog-content h2 {
  font-family:   var(--font-display);
  font-size:     var(--fs-2xl);
  font-weight:   var(--fw-medium);
  color:         var(--clr-primary);
  line-height:   var(--lh-tight);
  margin-bottom: var(--sp-sm);
}
.prog-content h2 em { font-style: italic; color: var(--clr-earth); }

.prog-content p {
  font-size:     var(--fs-base);
  color:         var(--clr-text-muted);
  line-height:   var(--lh-relaxed);
  margin-bottom: 14px;
}

/* Features 2-col grid */
.prog-features {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   10px;
  margin:                var(--sp-md) 0;
}

.prog-feat {
  display:     flex;
  align-items: flex-start;
  gap:         10px;
  font-size:   var(--fs-sm);
  color:       var(--clr-text-muted);
}

.prog-feat__icon {
  width:           28px;
  height:          28px;
  border-radius:   var(--radius-sm);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       13px;
  flex-shrink:     0;
}

/* Eligibility box */
.eligibility-box {
  background:    var(--clr-bg-alt);
  border:        1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding:       var(--sp-md);
  margin:        var(--sp-md) 0;
}
.eligibility-box h4 {
  font-size:      var(--fs-sm);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color:          var(--clr-primary);
  margin-bottom:  10px;
}
.eligibility-box ul { display: flex; flex-direction: column; gap: 6px; }
.eligibility-box li {
  display:     flex;
  align-items: flex-start;
  gap:         8px;
  font-size:   var(--fs-sm);
  color:       var(--clr-text-muted);
}
.elig-dot {
  width:         5px;
  height:        5px;
  background:    var(--clr-accent);
  border-radius: 50%;
  flex-shrink:   0;
  margin-top:    7px;
}

.prog-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: var(--sp-md); }

/* Section divider between program detail blocks */
.prog-divider { border: none; height: 1px; background: var(--clr-border); margin: 0; }

/* ══════════════════════════════════════════════════════
   IMPACT HIGHLIGHT STRIP
══════════════════════════════════════════════════════ */
.highlight-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
}
.highlight-item {
  text-align:   center;
  padding:      var(--sp-md) var(--sp-sm);
  border-right: 1px solid rgba(255,255,255,.08);
}
.highlight-item:last-child { border-right: none; }

/* ══════════════════════════════════════════════════════
   TESTIMONIALS
══════════════════════════════════════════════════════ */
.testimonials-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--sp-md);
}

/* ══════════════════════════════════════════════════════
   APPLICATION SECTION
══════════════════════════════════════════════════════ */
.apply-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--sp-xl);
  align-items:           start;
}

/* Application steps */
.apply-steps { display: flex; flex-direction: column; gap: 14px; margin-top: var(--sp-sm); }

.apply-step { display: flex; gap: 14px; align-items: flex-start; }
.apply-step__num {
  width:           32px;
  height:          32px;
  border-radius:   50%;
  background:      var(--clr-accent);
  color:           var(--clr-primary);
  font-size:       var(--fs-sm);
  font-weight:     700;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  font-family:     var(--font-body);
}
.apply-step__text h4 { font-size: var(--fs-sm); font-weight: 600; color: var(--clr-white); margin-bottom: 2px; }
.apply-step__text p  { font-size: var(--fs-sm); color: rgba(255,255,255,.55); line-height: var(--lh-normal); }

/* Application form */
.apply-form {
  background:    rgba(255,255,255,.06);
  border:        1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-lg);
  padding:       var(--sp-lg);
}

/* ══════════════════════════════════════════════════════
   PROGRAMS PAGE RESPONSIVE
══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .overview-grid         { grid-template-columns: repeat(2, 1fr); }
  .prog-detail-grid      { grid-template-columns: 1fr; gap: var(--sp-lg); }
  .prog-detail-grid--flip{ direction: ltr; }
  .prog-features         { grid-template-columns: 1fr; }
  .highlight-grid        { grid-template-columns: repeat(2, 1fr); }
  .highlight-item:nth-child(2){ border-right: none; }
  .highlight-item:nth-child(3){ border-top: 1px solid rgba(255,255,255,.08); }
  .testimonials-grid     { grid-template-columns: repeat(2, 1fr); }
  .apply-grid            { grid-template-columns: 1fr; gap: var(--sp-lg); }
}

@media (max-width: 640px) {
  .overview-grid         { grid-template-columns: 1fr; }
  .prog-img              { height: 260px; }
  .prog-img-wrap::before { display: none; }
  .prog-stat-float       { right: 12px; bottom: 12px; }
  .prog-stat-float--left { right: auto; left: 12px; }
  .highlight-grid        { grid-template-columns: 1fr 1fr; }
  .highlight-item        { border-bottom: 1px solid rgba(255,255,255,.08); }
  .highlight-item:nth-child(even){ border-right: none; }
  .testimonials-grid     { grid-template-columns: 1fr; }
  .prog-actions          { flex-direction: column; }
  .prog-actions .btn     { width: 100%; text-align: center; }
  .apply-form            { padding: var(--sp-md); }
}