/* MBA Way — Figma 5904:877
   Desktop: intro row + 852 media | 852 accordion
   ========================================================= */

.mbawaySection {
  /* Desktop 50px; ≤768 → 16px top height = corner width */
  --mba-strip-h: 50px;
  --mba-strip-corner-h: calc(var(--mba-strip-h) * 2.64);
  --mba-title-fs: clamp(32px, calc(32px + 16 * ((100vw - 1200px) / 720)), 48px);
  --mba-lead-fs: clamp(15px, calc(15px + 3 * ((100vw - 1200px) / 720)), 18px);
  --mba-open-fs: clamp(28px, calc(28px + 20 * ((100vw - 1200px) / 720)), 48px);
  --mba-closed-fs: clamp(22px, calc(22px + 10 * ((100vw - 1200px) / 720)), 32px);
  --mba-body-fs: clamp(15px, calc(15px + 3 * ((100vw - 1200px) / 720)), 18px);
  --mba-sub-fs: clamp(18px, calc(18px + 6 * ((100vw - 1200px) / 720)), 24px);
  --mba-col-gap: clamp(28px, calc(28px + 48 * ((100vw - 1200px) / 720)), 76px);
  --mba-intro-gap: clamp(24px, calc(24px + 56 * ((100vw - 1200px) / 720)), 80px);

  position: relative;
  background: var(--color-light-black);
  color: var(--color-white);
  padding-top: 0;
  padding-bottom: clamp(48px, calc(48px + 32 * ((100vw - 1200px) / 720)), 80px);
  margin-top: 0;
  overflow-x: clip;
  overflow-y: visible;
}

/* Figma Frame 78 — left vitality accent + power-red bar + right L-corner */
.mbawayStrip {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--mba-strip-h);
  z-index: 3;
  pointer-events: none;
  overflow: visible;
}

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

/* Left #ED1C24 — Figma Line 9 (~290/1924) */
.mbawayStripAccent {
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(140px, 15.07vw, 290px);
  height: var(--mba-strip-h);
  background: var(--color-vitality-red);
  z-index: 1;
}

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

.mbawayInner {
  position: relative;
  z-index: 1;
  padding-top: var(--mba-strip-h);
}

/* Intro: title 852 | lead 788 — Figma space-between */
.mbawayIntro {
  display: grid;
  grid-template-columns: minmax(0, 852fr) minmax(0, 788fr);
  gap: var(--mba-intro-gap);
  align-items: end;
  margin-bottom: clamp(32px, calc(32px + 28 * ((100vw - 1200px) / 720)), 60px);
  margin-top: clamp(28px, calc(28px + 20 * ((100vw - 1200px) / 720)), 48px);
}

.mbawayTitle {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--mba-title-fs);
  font-weight: 400;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--color-white);
}

.mbawayLead {
  margin: 0;
  font-size: var(--mba-lead-fs);
  line-height: 1.8;
  color: var(--color-white);
}

/* Body: media 852 | accordion 852 */
.mbawayBody {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--mba-col-gap);
  align-items: start;
}

.mbawayMedia {
  position: relative;
  width: 100%;
  aspect-ratio: 852 / 800;
  overflow: hidden;
  background: #1a1718 center / cover no-repeat
    url("../assets/images/mba-way-video-poster.webp");
}

.mbawayVideo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border: 0;
}

.mbawayAccordion {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.mbawayItem {
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.mbawayItem:first-child {
  border-top: none;
}

.mbawayTrigger {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 16px;
  padding: 40px 0 0;
  margin: 0;
  text-align: left;
  color: var(--color-white);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.mbawayItem:first-child .mbawayTrigger {
  padding-top: 0;
}

.mbawayItem.isOpen .mbawayTrigger {
  padding-bottom: 0;
}

.mbawayTriggerTitle {
  font-family: var(--font-display);
  font-size: var(--mba-closed-fs);
  font-weight: 400;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--color-white);
}

.mbawayItem.isOpen .mbawayTriggerTitle {
  font-size: var(--mba-open-fs);
}

.mbawayBodyPanel {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 20px 0 0;
  width: 100%;
}

.mbawayItem.isOpen .mbawayBodyPanel {
  display: flex;
}

.mbawayItemDesc {
  margin: 0;
  font-size: var(--mba-body-fs);
  line-height: 1.8;
  color: var(--color-white);
}

.mbawayPanelBlock {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  width: 100%;
}

.mbawaySubhead {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--mba-sub-fs);
  line-height: 1.8;
  text-transform: uppercase;
  color: var(--color-white);
}

.mbawayPoints {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
}

.mbawayPoints .accentListItem {
  width: fit-content;
  max-width: 100%;
  align-items: flex-start;
}

.mbawaySection.isScrollMode .mbawayPoints .accentListItem {
  position: relative;
  border-left-color: rgba(255, 255, 255, 0.15);
}

.mbawaySection.isScrollMode .mbawayPoints .accentListItem::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 0;
  width: 3px;
  height: calc(var(--line-progress, 0) * 100%);
  background: var(--color-power-red);
  pointer-events: none;
  transition: height 0.2s ease-out;
}

.mbawayPoints .accentListItem span,
.mbawayPoints .accentListItem p {
  margin: 0;
  font-size: var(--mba-body-fs);
  line-height: 1.8;
  color: var(--color-white);
}

.mbawayExperiential {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}

.mbawayTags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}

.mbawayTag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 20px;
  background: rgba(255, 255, 255, 0.02);
  border: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-white);
  white-space: nowrap;
}

/* Closed items need bottom breathing room before next border */
.mbawayItem:not(.isOpen) {
  padding-bottom: 40px;
}

.mbawayItem.isOpen {
  padding-bottom: 40px;
}

.mbawayItem:last-child {
  padding-bottom: 0;
}

/* Intro + body share one grid on desktop so lead and accordion align */
@media (min-width: 1101px) {
  .mbawayFit {
    display: grid;
    grid-template-columns: minmax(0, 852fr) minmax(0, 788fr);
    column-gap: var(--mba-col-gap);
    row-gap: clamp(32px, calc(32px + 28 * ((100vw - 1200px) / 720)), 60px);
    padding-top: clamp(28px, calc(28px + 20 * ((100vw - 1200px) / 720)), 48px);
  }

  .mbawayIntro {
    display: contents;
    margin: 0;
  }

  .mbawayBody {
    display: contents;
  }

  .mbawayTitle {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
  }

  .mbawayLead {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
  }

  .mbawayMedia {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
  }

  .mbawayAccordion {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
  }
}

.mbawaySticky {
  position: relative;
}

/* ---------- Desktop sticky scroll (strip full-width, content scale) ---------- */
@media (min-width: 1101px) {
  .mbawaySection.isScrollMode {
    padding-bottom: 0;
  }

  .mbawaySection.isScrollMode .mbawayPin {
    height: calc(var(--mbaway-steps, 4) * 100lvh);
  }

  .mbawaySection.isScrollMode .mbawaySticky {
    position: sticky;
    top: 0;
    height: 100lvh;
    max-height: 100dvh;
    overflow: hidden;
    background: var(--color-light-black);
  }

  .mbawaySection.isScrollMode .mbawayStrip {
    z-index: 4;
  }

  .mbawaySection.isScrollMode .mbawayInner {
    position: relative;
    z-index: 1;
  }

  .mbawaySection.isScrollMode .mbawayFit {
    transform: scale(var(--mbaway-fit-scale, 1));
    transform-origin: top left;
    width: 100%;
    transition: transform 0.35s ease-out;
  }

  /* Smooth panel reveal — no abrupt hide/show on fast scroll */
  .mbawaySection.isScrollMode .mbawayBodyPanel {
    display: flex;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding-top: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition:
      max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.35s ease,
      padding-top 0.35s ease,
      transform 0.35s ease,
      visibility 0s linear 0.35s;
  }

  .mbawaySection.isScrollMode .mbawayItem.isOpen .mbawayBodyPanel {
    max-height: 900px;
    opacity: 1;
    visibility: visible;
    padding-top: 20px;
    transform: translateY(0);
    transition:
      max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.35s ease 0.06s,
      padding-top 0.35s ease,
      transform 0.35s ease 0.06s,
      visibility 0s;
  }

  .mbawaySection.isScrollMode .mbawayTriggerTitle {
    transition: opacity 0.3s ease, font-size 0.3s ease;
  }

  .mbawaySection.isScrollMode .mbawayItem:not(.isOpen) .mbawayTriggerTitle {
    opacity: 0.5;
  }

  .mbawaySection.isScrollMode .mbawayItem.isOpen .mbawayTriggerTitle {
    opacity: 1;
  }

  .mbawaySection.isScrollMode .mbawayItem:not(.isOpen) {
    transition: padding-bottom 0.3s ease;
  }
}

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .mbawaySection {
    --mba-strip-h: 16px;
    --mba-title-fs: clamp(28px, calc(28px + 8 * ((100vw - 769px) / 331)), 36px);
    --mba-open-fs: clamp(24px, calc(24px + 8 * ((100vw - 769px) / 331)), 32px);
    --mba-closed-fs: clamp(20px, calc(20px + 6 * ((100vw - 769px) / 331)), 26px);
  }

  .mbawayFit {
    display: block;
    padding-top: 0;
  }

  .mbawayTitle,
  .mbawayLead,
  .mbawayMedia,
  .mbawayAccordion {
    grid-column: auto;
    grid-row: auto;
  }

  .mbawayIntro,
  .mbawayBody {
    display: flex;
    flex-direction: column;
  }

  .mbawayIntro {
    align-items: flex-start;
    gap: 20px;
    margin-top: clamp(24px, 4vw, 32px);
    margin-bottom: 32px;
  }

  .mbawayBody {
    gap: 32px;
  }

  .mbawayMedia {
    order: 0;
    max-width: 100%;
    aspect-ratio: 16 / 10;
  }

  .mbawayAccordion {
    order: 1;
    width: 100%;
  }

  .mbawayTrigger {
    padding-top: 28px;
  }

  .mbawayItem:not(.isOpen),
  .mbawayItem.isOpen {
    padding-bottom: 28px;
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  .mbawaySection {
    --mba-strip-h: 16px;
    --mba-title-fs: clamp(24px, 7vw, 32px);
    --mba-open-fs: clamp(22px, 6vw, 28px);
    --mba-closed-fs: clamp(18px, 5vw, 24px);
    --mba-lead-fs: 15px;
    --mba-body-fs: 15px;
    --mba-sub-fs: 18px;
    padding-bottom: 40px;
  }

  .mbawayIntro {
    margin-top: 24px;
    margin-bottom: 24px;
    gap: 16px;
  }

  .mbawayMedia {
    aspect-ratio: 4 / 3;
  }

  .mbawayBodyPanel {
    gap: 16px;
    padding-top: 16px;
  }

  .mbawayPanelBlock {
    gap: 14px;
  }

  .mbawayPoints {
    gap: 14px;
  }

  .mbawayTag {
    padding: 4px 14px;
    font-size: 13px;
    white-space: normal;
  }

  .mbawayTrigger {
    padding-top: 24px;
  }

  .mbawayItem:first-child .mbawayTrigger {
    padding-top: 0;
  }

  .mbawayItem:not(.isOpen),
  .mbawayItem.isOpen {
    padding-bottom: 24px;
  }
}

@media (max-width: 480px) {
  .mbawayMedia {
    aspect-ratio: 1 / 1;
  }

  .mbawayTags {
    gap: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mbawayVideo {
    display: none;
  }
}