/* ==========================================================================
   Page: home
   ========================================================================== */

/* Home page (index.html) — namespace: home- */

/* Shared bits for the home sections ------------------------------------- */
.home-stack { display: flex; flex-direction: column; gap: 32px; }
.home-head { max-width: 680px; }
.home-head__lead { font-size: 17.5px; }
.home-head__link { font-size: 15.5px; }

/* Hero -------------------------------------------------------------------- */
.home-hero {
  background-color: var(--c-navy);
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 22px 22px;
  color: var(--c-white);
}
.home-hero__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 56px;
  padding-block: 72px 80px;
}
.home-hero__text { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.home-hero__badge {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.10);
  font-size: 14px;
  font-weight: 600;
  line-height: normal;
}
.home-hero__title { font-size: 50px; font-weight: 900; line-height: 1.3; text-wrap: balance; }
.home-hero__accent { color: #9ED3FA; }
.home-hero__lead { max-width: 600px; font-size: 18.5px; line-height: 1.85; color: #D5E6F3; text-wrap: pretty; }
.home-hero__actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; }
.home-hero__dates { height: 56px; padding: 0 26px; font-size: 17px; font-weight: 700; } /* 54px + border (1.5px renders as 1px), as in the design */
.home-hero__trust {
  list-style: none;
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 14px;
  line-height: normal;
  color: var(--c-on-navy-muted);
}
.home-hero__trust li { display: flex; align-items: center; gap: 6px; }
.home-hero__trust svg { color: #9ED3FA; }

.home-hero__media { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* Video poster placeholder */
.home-video {
  position: relative;
  box-sizing: content-box; /* ratio on the content box, as in the design */
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-xl);
  background: var(--c-navy-deep);
}
.home-video::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(158, 211, 250, 0.10) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
}
.home-video__play {
  position: relative;
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--c-white);
  color: var(--c-navy);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.home-video__caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 14px 18px;
  background: rgba(7, 44, 71, 0.85);
  font-size: 14.5px;
  font-weight: 600;
  line-height: normal;
}

/* Upcoming dates card */
.home-next {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 20px 16px;
  border-radius: var(--radius-lg);
  background: var(--c-white);
  color: var(--c-ink);
  line-height: normal;
}
.home-next__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.home-next__label { font-size: 13px; font-weight: 700; color: var(--c-text-3); }
.home-next__link { flex-shrink: 0; font-size: 14.5px; }
.home-next__list { list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; }
.home-next__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.home-next__course { font-weight: 700; }
.home-next__date { flex-shrink: 0; color: var(--c-text-2); }

/* Quick facts ------------------------------------------------------------- */
.home-facts { background: var(--c-pale-2); border-bottom: 1px solid var(--c-border); }
.home-facts__inner { display: flex; flex-direction: column; gap: 14px; padding-block: 32px 20px; }
.home-facts__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 1040px;
  width: 100%;
  margin-inline: auto;
  list-style: none;
}
.home-fact { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 28px; text-align: center; line-height: normal; }
.home-fact + .home-fact { border-inline-start: 1px solid var(--c-border); }
.home-fact__value { font-family: var(--font-head); font-size: 38px; font-weight: 900; color: var(--c-navy); unicode-bidi: isolate; white-space: nowrap; line-height: 1.2; }
.home-fact__label { font-size: 14.5px; color: var(--c-text-2); }

/* Courses: featured course ------------------------------------------------ */
.home-featured {
  --min: 460px;
  --gap: 0px;
  overflow: hidden;
  border: 1.5px solid var(--c-primary);
  border-radius: 20px;
}
.home-featured__main { display: flex; flex-direction: column; gap: 16px; padding: 36px; }
.home-featured__pill { padding: 6px 12px; font-size: 13px; line-height: normal; }
.home-featured__title { font-size: 28px; font-weight: 800; line-height: 1.35; }
.home-featured__desc { font-size: 16.5px; line-height: 1.8; color: var(--c-text-2); }
.home-featured__tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.home-featured__tags li {
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: var(--c-pale);
  color: var(--c-navy);
  font-size: 13.5px;
  font-weight: 600;
  line-height: normal;
}
.home-featured__prices { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-top: 4px; }
.home-price { display: flex; align-items: baseline; gap: 8px; line-height: normal; }
.home-price__amount { font-family: var(--font-head); font-size: 30px; font-weight: 900; color: var(--c-ink); }
.home-price--intl .home-price__amount { font-size: 24px; font-weight: 800; }
.home-price__old { font-size: 15px; color: var(--c-text-3); }
.home-price__where { font-size: 13.5px; color: var(--c-text-2); }
.home-featured__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.home-featured__cta { height: 50px; padding: 0 26px; font-size: 16px; }

.home-featured__aside {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 36px;
  background: var(--c-pale-2);
  border-inline-start: 1px solid var(--c-border);
}
.home-featured__aside-title { font-family: var(--font-head); font-size: 18px; font-weight: 800; line-height: normal; }
.home-includes { --min: 220px; --gap: 12px; list-style: none; }
.home-includes li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.6; }
.home-includes svg { margin-top: 2px; color: var(--c-success); }

/* Courses: specialty cards ------------------------------------------------ */
.home-specs { --min: 260px; --gap: 20px; list-style: none; }
.home-specs > li { display: flex; }
.home-spec { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 24px; line-height: normal; }
.home-spec__kicker { font-size: 12.5px; font-weight: 700; color: var(--c-primary); }
.home-spec__title { font-size: 20px; font-weight: 800; line-height: 1.4; }
.home-spec__by { font-size: 14.5px; color: var(--c-text-2); }
.home-spec__meta { font-size: 14px; color: var(--c-text-2); }
.home-spec__price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid #E6EEF5;
}
.home-spec__amount { font-family: var(--font-head); font-size: 18px; font-weight: 800; }
.home-spec__intl { font-size: 14px; color: var(--c-text-2); }
.home-spec__more { display: flex; align-items: center; gap: 6px; color: var(--c-primary); font-size: 14.5px; font-weight: 700; }

/* Journey ----------------------------------------------------------------- */
.home-steps { --min: 220px; --gap: 20px; list-style: none; }
.home-step { display: flex; flex-direction: column; gap: 8px; padding-top: 20px; border-top: 3px solid var(--c-primary); }
.home-step__num { font-family: var(--font-head); font-size: 15px; font-weight: 800; line-height: normal; color: var(--c-primary); }
.home-step__title { font-size: 19px; font-weight: 800; line-height: normal; }
.home-step__desc { font-size: 15px; line-height: 1.75; color: var(--c-text-2); }
.home-step--gold { border-top-color: var(--c-gold); }
.home-step--gold .home-step__num { color: #8A6514; }

/* Team -------------------------------------------------------------------- */
.home-team { --min: 180px; --gap: 16px; list-style: none; }
.home-member { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 16px; text-align: center; }
.home-member__avatar {
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #DCEBF7;
  color: #4F7FA6;
}
/* With a dashboard photo: the photo fills the top of the card, name and role sit below it. */
.home-member--photo { padding: 0; gap: 4px; align-items: stretch; text-align: start; overflow: hidden; }
.home-member__photo { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; background: #DCEBF7; }
.home-member--photo .home-member__name { padding: 12px 14px 0; font-size: 15.5px; }
.home-member--photo .home-member__role { padding: 0 14px 14px; font-size: 13px; }
.home-member__name { font-size: 16.5px; font-weight: 800; line-height: normal; }
.home-member__role { font-size: 13.5px; line-height: 1.6; color: var(--c-text-2); }

/* Graduate stories -------------------------------------------------------- */
.home-stories { --min: 340px; --gap: 20px; }
.home-story { overflow: hidden; }
.home-story__video {
  position: relative;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-navy);
}
.home-story__play {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--c-white);
  color: var(--c-navy);
}
.home-story__caption { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; line-height: normal; }
.home-story__title { font-size: 16px; font-weight: 700; }
.home-story__meta { font-size: 14px; color: var(--c-text-2); }

/* FAQ teaser -------------------------------------------------------------- */
.home-faq { --min: 360px; --gap: 40px; align-items: start; }
.home-faq__intro { display: flex; flex-direction: column; gap: 12px; }
.home-faq__lead { font-size: 16.5px; line-height: 1.8; color: var(--c-text-2); }
.home-faq__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.home-faq__btn { height: 49px; padding: 0 20px; font-size: 15px; } /* 46px + border, as in the design */
.home-faq__wa { min-height: 46px; }
.home-faq__list { gap: 10px; }

/* Closing CTA band -------------------------------------------------------- */
.home-cta .cta-band__inner { gap: 28px; padding-block: 64px; }
.home-cta .cta-band__text { gap: 10px; max-width: 640px; }
.home-cta .cta-band__title { font-size: 32px; line-height: 1.35; }
.home-cta .cta-band__lead { font-size: 17px; line-height: 1.8; }
.home-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.home-cta__wa { height: 55px; padding: 0 22px; gap: 8px; font-size: 16px; font-weight: 700; } /* 52px + border, as in the design */

/* Mobile sticky bar ------------------------------------------------------- */
.home-sticky__text { flex-grow: 1; min-width: 0; }
.home-sticky__text strong { font-size: 17px; font-weight: 800; }
.home-sticky__text span { font-size: 12px; color: var(--c-text-2); }
.home-sticky__wa {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--c-success);
  border-radius: var(--radius-md);
  color: var(--c-success);
}
.home-sticky__wa:hover { background: var(--c-success-bg); color: var(--c-success); }
.home-sticky__btn { height: 48px; padding: 0 16px; flex-shrink: 0; border-radius: var(--radius-md); font-size: 16px; font-weight: 800; }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 900px) {
  .home-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block: 48px 56px; }
  .home-hero__lead { max-width: none; }
}

@media (max-width: 720px) {
  .home-hero__inner { gap: 24px; padding-block: 28px 32px; }
  .home-hero__text { gap: 16px; }
  .home-hero__badge { gap: 8px; padding: 6px 12px; font-size: 13px; }
  .home-hero__title { font-size: 30px; line-height: 1.35; }
  .home-hero__lead { font-size: 16px; line-height: 1.8; }
  .home-hero__actions .btn { flex: 1; height: 50px; font-size: 16.5px; }
  .home-hero__trust { margin-top: 0; }
  .home-video__play { width: 64px; height: 64px; }
  .home-video__caption { padding: 10px 14px; font-size: 13.5px; }
  .home-next { padding: 8px 16px 14px; }

  .home-facts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
  .home-fact { padding-inline: 8px; }
  .home-fact:nth-child(odd) { border-inline-start: 0; }
  .home-fact__value { font-size: clamp(22px, 7.4vw, 30px); }
  .home-fact__label { font-size: 13.5px; }

  .home-team { --min: 140px; --gap: 12px; }
  .home-member { padding: 18px 12px; }
  .home-member--photo { padding: 0; }

  .home-featured__main,
  .home-featured__aside { padding: 22px 18px; }
  .home-featured__title { font-size: 23px; }
  .home-featured__desc { font-size: 15.5px; }
  .home-head__lead { font-size: 16px; }

  .home-cta .cta-band__inner { padding-block: 48px; gap: 20px; }
  .home-cta .cta-band__title { font-size: 25px; }
  .home-cta .cta-band__lead { font-size: 16px; }
  .home-cta__actions .btn { flex: 1 1 auto; }
}

/* Click-to-play hero and story cards (backend wiring, not in the design export) */
.home-video .vc-player { background: var(--c-navy-deep); }
/* The hero's 16:9 talk fills its 16:10 card the way its poster does, so nothing jumps on click. */
.home-video video.vc-player { object-fit: cover; }
.home-video__play,
.home-story__play { position: relative; z-index: 1; cursor: pointer; transition: transform 0.15s ease; }
.home-video__play:hover,
.home-story__play:hover { transform: scale(1.06); }
.home-video__play:disabled,
.home-story__play:disabled { cursor: default; transform: none; opacity: 0.6; }
.home-video__caption { z-index: 1; }
.home-video.is-playing::before,
.home-video.is-playing .home-video__caption { display: none; }