/* ============================================================
   Optima Academy Online — page-specific styles
   Builds on css/case-study.css. Classes are prefixed .oa-.
   Accents echo the client palette (navy, sky blue, orange),
   kept secondary to the portfolio design.
   ============================================================ */

.oa-page {
  --cs-gradient: linear-gradient(90deg, #4fb3d9 0%, #2b6f9e 50%, #f7941d 100%);
  --cs-accent: #4fb3d9;
  --oa-navy: #0f2a47;
  --oa-sky: #4fb3d9;
  --oa-orange: #f7941d;
}

/* ------ Hero: title wraps; soft orbit rings drift behind ------ */
.oa-hero { position: relative; overflow: hidden; }
.oa-hero h1.large { white-space: normal; overflow-wrap: break-word; }
.oa-hero > .mxd-container { position: relative; z-index: 1; }
.oa-orbits { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.oa-orbit {
  position: absolute;
  display: block;
  border-radius: 50%;
  border: 1px solid rgba(79, 179, 217, 0.35);
}
.oa-orbit::after {            /* a small "planet" riding each ring */
  content: "";
  position: absolute;
  top: 12%; left: 12%;
  width: 1.2rem; height: 1.2rem;
  border-radius: 50%;
  background: var(--oa-orange);
  box-shadow: 0 0 24px rgba(247, 148, 29, 0.6);
}
.oa-orbit--a { top: 8%; right: -6rem; width: 38rem; height: 38rem; }
.oa-orbit--b { top: 24%; right: 10rem; width: 18rem; height: 18rem; border-color: rgba(247, 148, 29, 0.3); }
.oa-orbit--b::after { background: var(--oa-sky); box-shadow: 0 0 24px rgba(79, 179, 217, 0.6); top: auto; bottom: 8%; left: auto; right: 14%; }
@media only screen and (max-width: 767px) {
  .oa-orbit--a { width: 22rem; height: 22rem; right: -8rem; }
  .oa-orbit--b { display: none; }
}
.oa-hero-media .cs-media__frame {
  box-shadow: 0 40px 90px -50px rgba(79, 179, 217, 0.55), 0 30px 80px -50px rgba(247, 148, 29, 0.4);
}

/* ------ Intro copy beside manifests ------ */
.oa-intro { max-width: 48rem; margin-top: 2rem; }
@media only screen and (min-width: 1200px) { .oa-intro { margin-top: 5.4rem; } }
.oa-note { margin-top: 2.4rem; max-width: 46rem; }

/* ------ Evolution timeline: a line that fills as you scroll ------ */
.oa-timeline {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  margin: 0; padding: 0 0 0 3rem;
  list-style: none;
  --oa-progress: 1;
}
.oa-timeline::before,
.oa-timeline::after {
  content: "";
  position: absolute;
  left: 0.6rem; top: 0.8rem; bottom: 0.8rem;
  width: 2px;
  border-radius: 2px;
}
.oa-timeline::before { background: var(--cs-line); }
.oa-timeline::after {
  background: var(--cs-gradient);
  background: linear-gradient(180deg, var(--oa-sky), var(--oa-orange));
  transform-origin: top center;
  transform: scaleY(var(--oa-progress));
}
/* Tablet and up: cards in a grid; the single line becomes a bar atop each card */
@media only screen and (min-width: 768px) {
  .oa-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 2rem; padding: 0; }
  .oa-timeline::before,
  .oa-timeline::after { display: none; }
}
@media only screen and (min-width: 1200px) {
  .oa-timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.oa-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 2.2rem;
  border: 1px solid var(--cs-line);
  border-radius: var(--cs-radius);
  background: var(--base-tint);
}
.oa-step::before {             /* node on the line */
  content: "";
  position: absolute;
  left: -2.9rem; top: 2.6rem;
  width: 1.2rem; height: 1.2rem;
  border-radius: 50%;
  background: var(--base);
  border: 2px solid var(--oa-sky);
}
@media only screen and (min-width: 768px) {
  .oa-step { overflow: hidden; }
  .oa-step::before {
    left: 0; top: 0; right: 0;
    width: auto; height: 3px;
    border: 0; border-radius: 0;
    background: linear-gradient(90deg, var(--oa-sky), var(--oa-orange));
    transform-origin: left center;
    transform: scaleX(var(--oa-edge, 1));
  }
  .oa-step--ai::before { background: var(--oa-orange); }
}
.oa-step--ai { border-color: rgba(79, 179, 217, 0.6); }
.oa-step--ai::before { background: var(--oa-orange); border-color: var(--oa-orange); }
.oa-step__tag {
  color: var(--oa-sky);
  font: normal 600 1.2rem/1 var(--_font-accent);
  text-transform: uppercase;
  letter-spacing: 0.06rem;
}
.oa-step__title {
  margin: 0;
  color: var(--t-bright);
  font: normal 600 2rem/1.2 var(--_font-default);
  letter-spacing: -0.04rem;
}
.oa-step__text {
  margin: 0;
  color: var(--t-medium);
  font: normal 400 1.5rem/1.45 var(--_font-default);
}

/* ------ Modules ------ */
.oa-modules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 0; padding: 0;
  list-style: none;
}
@media only screen and (min-width: 1200px) { .oa-modules { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.oa-module {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 2rem 2rem 2rem 2.2rem;
  border-radius: var(--cs-radius);
  background: var(--base-tint);
  border-left: 3px solid var(--oa-sky);
}
.oa-module:nth-child(3n) { border-left-color: var(--oa-orange); }
.oa-module__name {
  color: var(--t-bright);
  font: normal 600 1.8rem/1.25 var(--_font-default);
  letter-spacing: -0.03rem;
}
.oa-module__desc {
  color: var(--t-medium);
  font: normal 400 1.4rem/1.45 var(--_font-default);
}

/* ------ Audience pathways ------ */
.oa-paths {
  margin: 3rem 0 0; padding: 0;
  list-style: none;
  border-top: 1px solid var(--cs-line);
}
.oa-path {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 1.6rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--cs-line);
  color: var(--t-bright);
  font: normal 600 2.2rem/1.2 var(--_font-default);
  letter-spacing: -0.04rem;
}
.oa-path::after {              /* fill bar sweeps in on reveal */
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, var(--oa-sky), var(--oa-orange));
  transform-origin: left center;
  transform: scaleX(var(--oa-fill, 1));
}
.oa-path__num {
  color: var(--oa-sky);
  font: normal 600 1.2rem/1 var(--_font-accent);
}

/* ------ Immersive: layered captures with slight depth ------ */
.oa-layers {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  perspective: 1400px;
}
@media only screen and (min-width: 992px) {
  .oa-layers { grid-template-columns: repeat(12, 1fr); align-items: start; }
  .oa-layer--back  { grid-column: 1 / span 8; grid-row: 1; }
  .oa-layer--front { grid-column: 5 / span 8; grid-row: 1; margin-top: 12rem; z-index: 1; }
  .oa-layer--front .cs-media__frame { box-shadow: 0 50px 100px -40px rgba(15, 42, 71, 0.55); }
}
.oa-layer { transform-style: preserve-3d; will-change: transform; }
.oa-layers__caption { margin-top: 1.6rem; }

/* ------ AI chat: a darker stage, video beside feature list ------ */
.oa-ai__stage {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  padding: 3rem;
  border-radius: calc(var(--cs-radius) * 1.5);
  background:
    radial-gradient(60rem 30rem at 85% 0%, rgba(79, 179, 217, 0.22), transparent 70%),
    radial-gradient(40rem 30rem at 0% 100%, rgba(247, 148, 29, 0.14), transparent 70%),
    #0c1b2c;
  color: #fff;
}
@media only screen and (min-width: 992px) {
  .oa-ai__stage { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 5rem; padding: 5rem; align-items: center; }
}
@media only screen and (max-width: 575px) { .oa-ai__stage { padding: 1.6rem; } }
.oa-ai__video { max-width: 44rem; width: 100%; justify-self: center; }
.oa-ai__stage .cs-caption { color: rgba(255, 255, 255, 0.7); }
.oa-ai__stage .cs-caption__label { color: #fff; }
.oa-ai__kicker {
  margin: 0 0 2rem;
  color: var(--oa-sky);
  font: normal 600 1.2rem/1 var(--_font-accent);
  text-transform: uppercase;
  letter-spacing: 0.1rem;
}
.oa-ai__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  margin: 0; padding: 0;
  list-style: none;
  counter-reset: oa-ai;
}
@media only screen and (min-width: 768px) { .oa-ai__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.oa-ai__list li {
  position: relative;
  padding: 1.8rem 1.8rem 1.8rem 5.2rem;
  border-radius: 1.2rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  counter-increment: oa-ai;
}
.oa-ai__list li::before {
  content: counter(oa-ai, decimal-leading-zero);
  position: absolute;
  left: 1.8rem; top: 2rem;
  color: var(--oa-orange);
  font: normal 600 1.2rem/1 var(--_font-accent);
}
.oa-ai__list h3 {
  margin: 0 0 0.6rem;
  color: #fff;
  font: normal 600 1.8rem/1.25 var(--_font-default);
  letter-spacing: -0.03rem;
}
.oa-ai__list p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font: normal 400 1.4rem/1.5 var(--_font-default);
}
.oa-ai__launcher { max-width: 32rem; margin-top: 2.4rem; }
.oa-ai__launcher .cs-media__frame { background: #fff; }
.oa-chatshot { max-width: 44rem; margin: 0 auto; background: #fff; }

/* ------ Availability map: circular reveal ------ */
.oa-map .cs-media__frame { clip-path: circle(var(--oa-reveal, 150%) at 60% 55%); }

/* ------ Phones row: real mobile captures, no device mockups ------ */
.oa-phones {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.4rem;
  margin: 0; padding: 0;
  list-style: none;
}
@media only screen and (min-width: 768px) { .oa-phones { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.oa-phones li { max-width: 34rem; width: 100%; justify-self: center; }
.oa-phone { border-radius: 2.4rem; }
.oa-phones__caption { margin-top: 1.6rem; }

/* ------ Previous project link ------ */
.oa-prev { display: flex; margin-bottom: 4rem; }
.oa-prev__link {
  display: inline-flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-left: 1.8rem;
  border-left: 2px solid transparent;
  border-image: var(--cs-gradient) 1;
}
.oa-prev__label {
  color: var(--t-medium);
  font: normal 600 1.2rem/1.4 var(--_font-accent);
  text-transform: uppercase;
}
.oa-prev__name {
  color: var(--t-bright);
  font: normal 600 2.8rem/1.1 var(--_font-default);
  letter-spacing: -0.06rem;
  transition: color 0.3s ease;
}
.oa-prev__link:hover .oa-prev__name,
.oa-prev__link:focus-visible .oa-prev__name { color: var(--oa-sky); }

/* ------ Reduced motion: everything static and fully shown ------ */
@media (prefers-reduced-motion: reduce) {
  .oa-layer { will-change: auto; }
  .oa-map .cs-media__frame { clip-path: none; }
}