/* Homepage teaching method (block/slider/view_method_feature.tpl), after MasterClass's feature banner:
   the picture fills most of the frame and fades into the page under the text column on the right.
   Colours follow the header's light/dark switch (html[data-meduc-theme]); dark is the default. */
.mcl {
  --mcl-bg: 5 5 6; /* page colour as RGB channels so the picture can fade into it */
  --mcl-ink: #fff;
  --mcl-muted: rgb(255 255 255 / .74);
  --mcl-line: rgb(255 255 255 / .55);
  --mcl-pill-bg: #fff;
  --mcl-pill-ink: #111;
  --mcl-red: #ed204f;
  padding: clamp(72px, 7vw, 112px) 0;
  overflow: hidden;
  background: rgb(var(--mcl-bg));
  color: var(--mcl-ink);
  font-family: Inter, Arial, sans-serif;
}
html[data-meduc-theme="light"] .mcl {
  --mcl-bg: 245 245 247;
  --mcl-ink: #15171c;
  --mcl-muted: rgb(21 23 28 / .72);
  --mcl-line: rgb(21 23 28 / .45);
  --mcl-pill-bg: #15171c;
  --mcl-pill-ink: #fff;
  --mcl-red: #bd263a;
}
.mcl *, .mcl *::before, .mcl *::after { box-sizing: border-box; }
.mcl [hidden] { display: none !important; }
.mcl-shell { width: min(92%, 1600px); margin-inline: auto; }

/* Banner */
.mcl-banner { position: relative; isolation: isolate; height: clamp(440px, 46vw, 760px); overflow: hidden; border-radius: 4px; }
.mcl-media { position: absolute; inset: 0 auto 0 0; z-index: 0; width: 78%; }
.mcl-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.mcl-banner:not(.mcl-banner--text)::after { position: absolute; inset: 0; z-index: 1; content: ""; background: linear-gradient(90deg, rgb(var(--mcl-bg) / 0) 0, rgb(var(--mcl-bg) / 0) 42%, rgb(var(--mcl-bg) / .55) 58%, rgb(var(--mcl-bg)) 77%); pointer-events: none; }
.mcl-copy { position: absolute; inset: 0 0 0 auto; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 32%; padding: 24px 2%; text-align: center; }
.mcl-banner--text .mcl-copy { position: relative; width: 100%; height: 100%; }
.mcl-pill { display: inline-block; padding: 6px 16px; border-radius: 100px; background: var(--mcl-pill-bg); color: var(--mcl-pill-ink); font: 600 17px/1.3 Inter, Arial, sans-serif; }
.mcl .mcl-title { margin: 26px 0 0; color: var(--mcl-ink); font: 800 clamp(44px, 4vw, 68px)/1.12 Inter, Arial, sans-serif; letter-spacing: -.02em; text-wrap: balance; }
.mcl-subtitle { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 340px; margin: 12px 0 0; color: var(--mcl-ink); font: 600 18px/1.4 Inter, Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.mcl-subtitle::before, .mcl-subtitle::after { flex: 1; height: 1px; content: ""; background: var(--mcl-line); }
.mcl-subtitle span { flex: none; max-width: 82%; }
.mcl-dash { display: block; width: 24px; height: 4px; margin: 30px auto 18px; background: var(--mcl-ink); }
.mcl-text { max-width: 340px; margin: 0; color: var(--mcl-muted); font: 500 clamp(15px, 1.15vw, 18px)/1.55 Inter, Arial, sans-serif; }
.mcl-actions { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 34px; }
.mcl .mcl-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-width: 220px; min-height: 58px; padding: 12px 30px; border: 2px solid var(--mcl-line); border-radius: 6px; background: transparent; color: var(--mcl-ink) !important; font: 700 18px/1.2 Inter, Arial, sans-serif; text-decoration: none !important; transition: border-color .18s, background-color .18s; }
.mcl .mcl-button:hover { border-color: var(--mcl-ink); background: rgb(127 127 127 / .12); }
.mcl-button svg { width: 20px; height: 20px; fill: currentColor; }
.mcl .mcl-link { color: var(--mcl-muted) !important; font: 600 14px/1.4 Inter, Arial, sans-serif; text-decoration: none !important; }
.mcl .mcl-link:hover { color: var(--mcl-ink) !important; text-decoration: underline !important; text-underline-offset: 4px; }
.mcl a:focus-visible, .mcl button:focus-visible { outline: 2px solid var(--mcl-red); outline-offset: 3px; }

/* Video playing inside the banner */
.mcl-player { position: absolute; inset: 0; z-index: 5; background: #000; }
.mcl-frame, .mcl-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.mcl-close { position: absolute; top: 14px; right: 14px; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid #ffffff59; border-radius: 50%; background: #000000b3; color: #fff; font: 400 28px/1 Inter, Arial, sans-serif; cursor: pointer; }

/* Phones and tablets: the picture on top, fading down into the text. */
@media (max-width: 900px) {
  .mcl-shell { width: calc(100% - 32px); }
  .mcl-banner { height: auto; overflow: visible; }
  .mcl-media { position: relative; inset: auto; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; }
  .mcl-banner:not(.mcl-banner--text)::after { inset: 0 0 auto; height: calc((100vw - 32px) * .75); background: linear-gradient(180deg, rgb(var(--mcl-bg) / 0) 55%, rgb(var(--mcl-bg)) 100%); }
  .mcl-copy { position: relative; inset: auto; width: 100%; margin-top: -48px; padding: 0 8px; }
  .mcl-banner--text .mcl-copy { margin-top: 0; }
  .mcl .mcl-title { margin-top: 20px; font-size: clamp(38px, 10vw, 52px); }
  .mcl-player { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; }
  .mcl-frame { height: auto; aspect-ratio: 16 / 9; }
}
@media (prefers-reduced-motion: reduce) { .mcl-button { transition: none; } }