/*
 * Styles for the things the reviewed design does not draw.
 *
 * mentorship.css is the reviewed file and is loaded before this one; nothing in
 * it is overridden here. This file covers exactly three things the design leaves
 * out, plus one robustness rule:
 *
 *   .mp-route   the "not trained yet / train with BBU first" route, which the
 *               build plan requires on the programme page's audience band and
 *               on the hub. The design has no equivalent block.
 *
 *   .mp-gallery-fallback  the no-script route to a full-size workbook page.
 *               The design's enlargement is a button that opens a dialog, and a
 *               button that cannot open anything is not an enlargement. This is
 *               the second route: a real link beside each thumbnail, visible
 *               until mentorship.js takes over and hides it. Everything else
 *               about the enlargement -- .mp-gallery-open, .mp-gallery-hint and
 *               the nine dialog rules -- is the design's own markup in
 *               mentorship.css and is ported, not restated, here.
 *
 *   .mp-band + .mp-band   adjacent bands of the same colour are still two bands,
 *               and without a separator they read as one. Sections can be absent
 *               (no confirmed dates, no second offer), so which two end up
 *               touching depends on the page; the rule is written for the case
 *               rather than for a fixed order.
 *
 *   .mp-band-white .lp-cert   the certificate card is white, and on a white band
 *               that is invisible, so it takes the cloud background. Scoped to
 *               the mentorship bands so the reviewed .lp-cert rule the four
 *               course pages also use is untouched.
 *
 * Everything else -- including .mp-also-see, .mp-hub-videos, .mp-instructor-video
 * and .mp-eligibility -- is defined in mentorship.css and is not restated here.
 * Every value below comes from the tokens mentorship.css and landing.css already
 * define. No token is redefined in this file.
 */

/* A route row: a sentence, and the one button that acts on it. */
.mp-route {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 32px;
  align-items: center;
  justify-content: space-between;
  margin-top: 36px;
  padding: 26px 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.mp-route > div {
  min-width: 0;
  flex: 1 1 32ch;
}

.mp-route h2 {
  margin: 0 0 8px;
  color: var(--ink);
  font: 600 clamp(24px, 2.4vw, 32px) / 1.2 'League Spartan', sans-serif;
}

.mp-route p {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .mp-route {
    padding: 22px;
  }
}

/*
 * Two bands of the same colour, side by side: draw the seam. 1px matches the rule
 * the review wall already uses, so a page that has one and a page that has the
 * other do not look like two different designs.
 */
.mp-band + .mp-band {
  border-top: 1px solid var(--line);
}

/* The certificate card, legible on a white band without touching .lp-cert itself. */
.mp-band-white .lp-cert {
  background: var(--cloud);
}

/*
 * The no-script route to a full-size workbook page. It sits under the caption,
 * where the design puts its "Open larger" hint, and it goes away the moment the
 * script that reveals the dialog has run.
 */
.mp-gallery-fallback {
  display: inline-block;
  margin-top: 4px;
  color: var(--cta);
  font: 600 13px / 1.4 'League Spartan', sans-serif;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mp-gallery-fallback:hover {
  text-decoration-thickness: 2px;
}

.mp-gallery-fallback:focus-visible {
  outline: 3px solid var(--cta);
  outline-offset: 3px;
  border-radius: var(--radius);
}

/* Phones: the header enroll button can't share a line with logo + menu, so it
   takes its own full-width row under them instead of an indented orphan. */
@media (max-width: 760px) {
  html.bbu-lp-js .mp-page .lp-header-bar .lp-header-cta {
    order: 3;
    flex: 1 0 100%;
    margin: 0 0 12px;
    min-height: 46px;
  }
}

/* Hero "Hear from a participant": a play button so it reads as a video. */
.mp-page .mp-hero-actions .mp-play-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 6px 22px 6px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  transition: border-color .2s, box-shadow .2s;
}
.mp-page .mp-hero-actions .mp-play-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--cta);
  color: var(--white);
  transition: background .2s, transform .2s;
}
.mp-page .mp-hero-actions .mp-play-icon svg { margin-left: 2px; }
.mp-page .mp-hero-actions .mp-play-cta:hover {
  border-color: var(--cta);
  box-shadow: 0 6px 18px rgba(24, 53, 76, 0.12);
  color: var(--ink);
}
.mp-page .mp-hero-actions .mp-play-cta:hover .mp-play-icon {
  background: var(--cta-hover);
  transform: scale(1.06);
}
.mp-page .mp-hero-actions .mp-play-cta:focus-visible {
  outline: 3px solid var(--cta);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .mp-page .mp-hero-actions .mp-play-cta,
  .mp-page .mp-hero-actions .mp-play-icon { transition: none; }
  .mp-page .mp-hero-actions .mp-play-cta:hover .mp-play-icon { transform: none; }
}

/* Two testimonials side by side at one shared height: a 16:9 and a 9:16
   video get columns in proportion to their shapes (256:81), so neither is
   cropped or letterboxed. Phones stack them; the portrait one is capped. */
.mp-page .mp-video-pair {
  display: grid;
  grid-template-columns: minmax(0, 256fr) minmax(0, 81fr);
  gap: 24px;
  align-items: start;
  max-width: 1120px;
  margin: 0 auto;
}
.mp-page .mp-video-pair .lp-video { margin: 0; max-width: none; }
.mp-page .mp-video-pair .is-portrait .lp-video video { aspect-ratio: 9 / 16; }
@media (max-width: 760px) {
  .mp-page .mp-video-pair { grid-template-columns: 1fr; gap: 32px; }
  .mp-page .mp-video-pair .is-portrait .lp-video { max-width: 340px; margin-inline: auto; }
}

/* Two vertical videos: equal columns, centred. */
.mp-page .mp-video-pair.is-portrait-pair {
  grid-template-columns: repeat(2, minmax(0, 360px));
  justify-content: center;
  gap: 32px;
}
@media (max-width: 760px) {
  .mp-page .mp-video-pair.is-portrait-pair { grid-template-columns: 1fr; }
}