/* Ambassador page only — visual identity distinct from landing home */

.page-ambassador {
  background: #faf9f7;
}

/* Nav: volunteer strip + teal active state */
.page-ambassador .nav {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(245, 250, 248, 0.98) 100%);
  border-bottom: 1px solid rgba(45, 150, 118, 0.14);
}

.page-ambassador .nav__links a.is-active {
  background: rgba(45, 150, 118, 0.12);
  color: var(--teal-deep);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--teal);
  border-radius: 9px 9px 0 0;
}

/* Hero: teal-first gradient, angled transition (not landing ellipse) */
.page-ambassador .hero {
  background: linear-gradient(118deg, #164e3f 0%, #2d9676 42%, #1a6aaa 78%, #0c2744 100%);
  padding: 76px 0 96px;
}

.page-ambassador .hero::before {
  background:
    radial-gradient(ellipse 85% 65% at 100% 0%, rgba(126, 232, 200, 0.22), transparent 55%),
    radial-gradient(ellipse 50% 45% at 0% 100%, rgba(23, 93, 146, 0.35), transparent 50%),
    repeating-linear-gradient(
      -8deg,
      transparent,
      transparent 14px,
      rgba(255, 255, 255, 0.025) 14px,
      rgba(255, 255, 255, 0.025) 28px
    );
}

.page-ambassador .hero::after {
  height: 64px;
  clip-path: polygon(0 100%, 0 55%, 50% 0, 100% 40%, 100% 100%);
  background: #faf9f7;
}

.page-ambassador .hero__inner {
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

/* Mirror layout: showcase on the left, copy on the right */
@media (min-width: 921px) {
  .page-ambassador .hero__inner {
    direction: rtl;
  }
  .page-ambassador .hero__copy,
  .page-ambassador .hero__visual {
    direction: ltr;
  }
}

.page-ambassador .hero__pill {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.88);
}

.page-ambassador .hero__pill-dot {
  background: #b8f5e0;
  box-shadow: 0 0 12px rgba(184, 245, 224, 0.6);
}

.page-ambassador .hero__h1 {
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.page-ambassador .hero__h1 em {
  color: #d4fff0;
  font-style: italic;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(184, 245, 224, 0.45);
  text-underline-offset: 5px;
}

.page-ambassador .hero__sub {
  max-width: 460px;
  color: rgba(255, 255, 255, 0.82);
}

/* Replace “student phone” feel with programme stack */
.page-ambassador .amb-hero-showcase {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 380px;
}

.page-ambassador .amb-showcase {
  position: relative;
  width: 100%;
  max-width: 340px;
}

.page-ambassador .amb-showcase__rail {
  position: absolute;
  left: 18px;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(184, 245, 224, 0.9), rgba(45, 150, 118, 0.35), transparent);
}

.page-ambassador .amb-showcase__stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-left: 36px;
}

.page-ambassador .amb-showcase__card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 16px 18px 16px 20px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.page-ambassador .amb-showcase__card:hover {
  transform: translateX(4px);
  border-color: rgba(184, 245, 224, 0.45);
}

.page-ambassador .amb-showcase__card--2 {
  margin-left: 12px;
}

.page-ambassador .amb-showcase__card--3 {
  margin-left: 24px;
}

.page-ambassador .amb-showcase__step {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: rgba(184, 245, 224, 0.95);
  margin-bottom: 6px;
}

.page-ambassador .amb-showcase__card strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.page-ambassador .amb-showcase__card span:last-child {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.45;
}

/* Stats: sage band */
.page-ambassador .stats--ambassador {
  background: linear-gradient(90deg, #eaf5f1 0%, #f0f7fc 50%, #eaf5f1 100%);
  border-bottom: 1px solid rgba(45, 150, 118, 0.12);
  border-top: none;
}

.page-ambassador .stats--ambassador .stat {
  border-right-color: rgba(45, 150, 118, 0.15);
}

.page-ambassador .stats--ambassador .stat__icon {
  color: var(--teal-deep);
}

.page-ambassador .stats--ambassador .stat__txt {
  color: var(--text-mid);
}

/* Role section: warmer surface */
.page-ambassador #role.sec {
  background: #faf9f7;
}

.page-ambassador #role .ccard {
  border-radius: 20px;
  border-width: 1px;
  box-shadow: 0 4px 24px rgba(12, 35, 54, 0.06);
}

.page-ambassador #role .ccard--navy {
  background: linear-gradient(145deg, #175d92 0%, #0f3154 100%);
  border-color: rgba(255, 255, 255, 0.08);
}

/* Journey: deep forest + ink (not same as landing navy band) */
.page-ambassador .sec--amb-journey {
  background: linear-gradient(165deg, #0f2922 0%, #1d4e3f 35%, #12324a 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.page-ambassador .sec--amb-journey::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 50% at 100% 0%, rgba(45, 150, 118, 0.25), transparent 55%);
}

.page-ambassador .sec--amb-journey .wrap {
  position: relative;
  z-index: 1;
}

.page-ambassador .sec--amb-journey .sec__tag {
  color: rgba(184, 245, 224, 0.75);
}

.page-ambassador .sec--amb-journey .sec__h {
  color: #fff;
}

.page-ambassador .sec--amb-journey .sec__lead {
  color: rgba(255, 255, 255, 0.68);
}

.page-ambassador .sec--amb-journey .step {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
}

.page-ambassador .sec--amb-journey .step__num {
  background: linear-gradient(135deg, #3dd4a8, #2d9676);
  box-shadow: 0 4px 16px rgba(45, 150, 118, 0.35);
}

.page-ambassador .sec--amb-journey .step__p em {
  color: #b8f5e0;
}

/* Tools section: paper + grid hint */
.page-ambassador .sec--amb-tools {
  background-color: #f5f2ed;
  background-image: radial-gradient(rgba(23, 93, 146, 0.06) 1px, transparent 1px);
  background-size: 20px 20px;
}

.page-ambassador .sec--amb-tools .sec__tag {
  color: var(--teal-deep);
}

.page-ambassador .features--amb-hub {
  gap: 22px;
}

.page-ambassador .features--amb-hub .fcard {
  border-radius: 18px;
  border-left: 4px solid var(--teal);
  box-shadow: 0 6px 28px rgba(12, 35, 54, 0.07);
}

.page-ambassador .features--amb-hub a.fcard:hover {
  border-left-color: var(--navy);
}

.page-ambassador .features--amb-hub .fcard__icon {
  border-radius: 14px;
}

/* Expectations + coordinators */
.page-ambassador #expectations {
  background: #faf9f7;
}

.page-ambassador #coordinators {
  background: #fff;
}

.page-ambassador #coordinators .match-ui {
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(23, 93, 146, 0.1);
}

/* Crisis bar */
.page-ambassador .crisis {
  background: #fff;
  border-color: var(--border);
}

/* CTA: slate → teal (different mood from landing CTA) */
.page-ambassador .cta--ambassador {
  background: linear-gradient(128deg, #1e293b 0%, #134e4a 45%, #175d92 100%);
}

.page-ambassador .cta--ambassador::before {
  background: radial-gradient(ellipse 65% 80% at 80% 20%, rgba(45, 150, 118, 0.35), transparent 60%);
}

.page-ambassador .cta--ambassador .cta__h em {
  color: #7ee8c8;
}

/* Footer slightly lifted from pure black footer of landing feel */
.page-ambassador .footer--amb {
  background: linear-gradient(180deg, #0a1628 0%, #050d18 100%);
  border-top: 1px solid rgba(45, 150, 118, 0.15);
}

@media (max-width: 920px) {
  .page-ambassador .hero__inner {
    direction: ltr;
  }

  /* Landing hides .hero__visual here; keep ambassador programme stack visible */
  .page-ambassador .hero__visual {
    display: flex;
  }

  .page-ambassador .amb-hero-showcase {
    min-height: 280px;
    margin-top: 8px;
  }

  .page-ambassador .amb-showcase__card--2,
  .page-ambassador .amb-showcase__card--3 {
    margin-left: 0;
  }
}

@media (max-width: 620px) {
  .page-ambassador .nav__links a.is-active {
    box-shadow: none;
    border-radius: 9px;
  }

  .page-ambassador .hero::after {
    clip-path: polygon(0 100%, 0 70%, 100% 45%, 100% 100%);
    height: 48px;
  }
}