/* =========================================================
   Programs — Figma 5904:1224 (1920×1000)
   Strips: 5905:660 / Frame 78–80
   ≥1201 desktop | 769–1200 tablet | ≤768 mobile
   ========================================================= */

.programsSection {
  --prog-tab-h: clamp(44px, calc(44px + 10 * ((100vw - 1200px) / 720)), 54px);
  --prog-tab-fs: clamp(16px, calc(16px + 12 * ((100vw - 1200px) / 720)), 28px);
  --tab-slide-ms: 7000ms;
  --tab-scroll-ms: 850ms;
  --prog-title-fs: clamp(36px, calc(36px + 28 * ((100vw - 1200px) / 720)), 64px);
  --prog-body-fs: clamp(16px, calc(16px + 4 * ((100vw - 1200px) / 720)), 20px);
  --prog-acc-fs: clamp(22px, calc(22px + 10 * ((100vw - 1200px) / 720)), 32px);
  --prog-step-fs: clamp(15px, calc(15px + 5 * ((100vw - 1200px) / 720)), 20px);
  --prog-elig-fs: clamp(15px, calc(15px + 3 * ((100vw - 1200px) / 720)), 18px);
  --prog-panel-pad-y: clamp(48px, calc(48px + 99 * ((100vw - 1200px) / 720)), 147px);
  --prog-panel-pad-x: clamp(28px, calc(28px + 120 * ((100vw - 1200px) / 720)), 148px);
  --prog-gap: clamp(32px, calc(32px + 88 * ((100vw - 1200px) / 720)), 120px);
  --prog-acc-gap: clamp(32px, calc(32px + 28 * ((100vw - 1200px) / 720)), 60px);
  /* Desktop 50px; ≤768 → 16px top height = corner width */
  --prog-strip-h: 50px;
  --prog-strip-corner-h: calc(var(--prog-strip-h) * 2.64);

  position: relative;
  /* Figma 5904:876 — content starts ~8px; no large top padding */
  padding-top: 0;
  padding-bottom: clamp(40px, 5vw, 72px);
  background-color: #111;
  background-image: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)),
    url("../assets/images/programs-bg.webp");
  background-size: cover;
  background-position: center;
  overflow-x: clip;
  overflow-y: visible;
}

/* Figma Frame 78 — bar + left vitality accent + right L-corner */
.programsStrip {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 3;
  pointer-events: none;
  line-height: 0;
}

.programsStripTop {
  top: 0;
  height: var(--prog-strip-h);
  overflow: visible;
}

.programsStripTop img {
  display: none;
}

.programsStripBar {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--prog-strip-h);
  background: var(--color-power-red);
}

/* Left #ED1C24 segment — Figma Line 7 (~275/1924) */
.programsStripAccent {
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(140px, 14.3vw, 275px);
  height: var(--prog-strip-h);
  background: var(--color-vitality-red);
  z-index: 1;
}

/* Right vertical corner — width always matches top bar height */
.programsStripCorner {
  position: absolute;
  right: 0;
  top: 0;
  width: var(--prog-strip-h);
  height: var(--prog-strip-corner-h);
  background: var(--color-power-red);
  z-index: 2;
}

.programsStripBottom {
  display: none;
}

.programsWrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  /* flush under horizontal bar; right corner overlays tabs */
  padding-top: var(--prog-strip-h);
}

.programsTabs {
  display: flex;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: rgba(35, 31, 32, 0.55);
}

.programsTabs::-webkit-scrollbar {
  display: none;
}

.programsTab {
  position: relative;
  flex: 1 1 0;
  min-width: max-content;
  height: var(--prog-tab-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px clamp(16px, 2vw, 40px);
  background: rgba(88, 89, 91, 0.05);
  color: var(--color-white);
  font-family: "Fira Sans", sans-serif;
  font-weight: 300;
  font-size: var(--prog-tab-fs);
  line-height: normal;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition), font-weight var(--transition);
}

.programsTab[data-program-tab="mba"] {
  flex: 0 0 clamp(120px, calc(120px + 122 * ((100vw - 1200px) / 720)), 242px);
}

.programsTab.isActive {
  background: var(--color-white);
  color: var(--color-power-red);
  font-weight: 600;
}

.programsPanels {
  width: 100%;
}

.programsPanel {
  display: grid;
  grid-template-columns: minmax(0, 763fr) minmax(0, 559fr);
  gap: var(--prog-gap);
  align-items: start;
  background: var(--color-white);
  padding: var(--prog-panel-pad-y) var(--prog-panel-pad-x);
  min-height: clamp(420px, 50vw, 822px);
}

.programsInfo {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, calc(24px + 16 * ((100vw - 1200px) / 720)), 40px);
  max-width: 763px;
}

.programsTitle {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--prog-title-fs);
  line-height: 1.5;
  color: var(--color-power-red);
  text-transform: uppercase;
  text-shadow: 0 0 25px var(--color-white);
  margin: 0;
}

.programsDescription {
  font-family: "Fira Sans", sans-serif;
  font-weight: 400;
  font-size: var(--prog-body-fs);
  line-height: 1.8;
  color: var(--color-black);
  margin: 0;
}

.programsCollab {
  font-family: "Fira Sans", sans-serif;
  font-weight: 500;
  font-size: clamp(14px, calc(14px + 2 * ((100vw - 1200px) / 720)), 16px);
  line-height: 1.5;
  color: var(--color-cool-gray);
  margin: -12px 0 0;
}

.programsCriterion {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-size: clamp(14px, calc(14px + 2 * ((100vw - 1200px) / 720)), 16px);
  line-height: 1.6;
  color: var(--color-light-black);
  margin: 0;
}

.programsDisclaimer {
  font-family: "Fira Sans", sans-serif;
  font-weight: 400;
  font-size: clamp(13px, calc(13px + 2 * ((100vw - 1200px) / 720)), 15px);
  line-height: 1.6;
  color: var(--color-light-black);
  margin: 0;
}

.programsDisclaimer strong {
  font-weight: 700;
  color: var(--color-power-red);
  text-transform: uppercase;
}

.programsAccordion {
  display: flex;
  flex-direction: column;
  gap: var(--prog-acc-gap);
  width: 100%;
  max-width: 559px;
  justify-self: end;
}

.programsAccordionItem {
  background: var(--color-white);
  width: 100%;
}

.programsAccordionTrigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #f7f7f7;
  padding: clamp(12px, 1.1vw, 16px) clamp(14px, 1.2vw, 18px);
  text-align: left;
}

.programsAccordionTrigger span {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--prog-acc-fs);
  line-height: 1.3;
  color: var(--color-light-black);
  text-transform: uppercase;
  text-shadow: 0 0 25px rgba(255, 255, 255, 0.4);
  flex: 1;
  min-width: 0;
}

.programsAccordionIcon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
  transition: transform var(--transition);
}

.programsAccordionItem.isOpen .programsAccordionIcon {
  transform: rotate(180deg);
}

.programsAccordionBody {
  display: none;
  padding-top: clamp(20px, calc(20px + 8 * ((100vw - 1200px) / 720)), 28px);
}

.programsAccordionItem.isOpen .programsAccordionBody {
  display: block;
}

/* Eligibility — red left bar items */
.programsEligibilityList {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: clamp(16px, 2vw, 40px);
}

.programsEligibilityList .accentListItem {
  width: 100%;
  align-items: flex-start;
}

.programsEligibilityList .accentListItem p {
  font-family: "Fira Sans", sans-serif;
  font-weight: 300;
  font-size: var(--prog-elig-fs);
  line-height: 1.5;
  color: var(--color-light-black);
  margin: 0;
}

/* Admissions — numbered steps 01–05 */
.programsStepsList {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.5vw, 28px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.programsStep {
  display: flex;
  align-items: flex-start;
  gap: clamp(12px, 1.5vw, 20px);
  width: 100%;
}

.programsStepNum {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-light-black);
  border-left: 3px solid var(--color-power-red);
  color: var(--color-white);
  font-family: "Fira Sans", sans-serif;
  font-weight: 500;
  font-size: var(--prog-step-fs);
  line-height: normal;
  padding: 5px 10px;
  white-space: nowrap;
}

.programsStep p {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: "Fira Sans", sans-serif;
  font-weight: 300;
  font-size: var(--prog-step-fs);
  line-height: 1.5;
  color: var(--color-light-black);
}

/* =========================================================
   Tablet 769–1200
   ========================================================= */
@media (max-width: 1200px) {
  .programsSection {
    --prog-title-fs: clamp(32px, 4vw, 44px);
    --prog-tab-fs: clamp(14px, 1.8vw, 20px);
    --prog-panel-pad-y: clamp(36px, 5vw, 64px);
    --prog-panel-pad-x: clamp(24px, 3vw, 40px);
    --prog-gap: clamp(28px, 4vw, 48px);
    --prog-strip-h: 16px;
    padding-bottom: clamp(32px, 4vw, 48px);
  }

  .programsPanel {
    grid-template-columns: 1fr;
  }

  .programsAccordion {
    max-width: none;
    justify-self: stretch;
  }

  .programsInfo {
    max-width: none;
  }

  .programsTab[data-program-tab="mba"] {
    flex: 0 0 auto;
  }
}

/* =========================================================
   Mobile ≤768
   ========================================================= */
@media (max-width: 768px) {
  .programsSection {
    --prog-title-fs: clamp(26px, 7vw, 32px);
    --prog-body-fs: clamp(15px, 3.8vw, 16px);
    --prog-acc-fs: clamp(18px, 4.5vw, 22px);
    --prog-step-fs: clamp(14px, 3.6vw, 16px);
    --prog-elig-fs: clamp(14px, 3.6vw, 15px);
    --prog-panel-pad-y: 28px;
    --prog-panel-pad-x: 18px;
    --prog-gap: 16px;
    --prog-acc-gap: 20px;
    --prog-strip-h: 16px;
    padding-top: 0;
    padding-bottom: 40px;
  }

  .programsTabs {
    gap: 0;
  }

  .programsTab {
    flex: 0 0 auto;
    padding-inline: 14px;
    font-size: clamp(13px, 3.2vw, 15px);
  }

  .programsPanel {
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--prog-gap);
  }

  .programsInfo,
  .programsAccordion {
    max-width: none;
    justify-self: stretch;
  }

  .programsStep {
    gap: 12px;
  }

  .programsEligibilityList {
    gap: 14px;
  }
}

@media (max-width: 450px) {
  .programsSection {
    --prog-title-fs: clamp(22px, 7.5vw, 26px);
    --prog-panel-pad-x: 14px;
  }
}