/* ==========================================================================
   UNESCO OpenLearning — Flow hero banner, v6
   Source: design/unesco-hero-flow-v6.html

   Two independent ceilings:
     --hero-max  3840px / 3840px  painted background, artwork, scrims
     --hero-col   1200px / 1200px  copy column, centred inside the background
   Layer order: gradient -> radial scrim -> artwork -> linear scrim -> copy.
   Artwork is 3840 x 435; the fade is a CSS mask keyed to the rendered box.
   Applies to the homepage (.hero) and course about page (.course-hero).
   ========================================================================== */

.hero,
.course-hero {
  --hero-g1: #0C5FA4;
  --hero-g2: #1378C9;
  --hero-g3: #2189D8;
  --hero-g4: #1A7FD0;

  --hero-shade: 3, 34, 66;
  --hero-shade2: 6, 48, 88;
  --hero-radial-a: .72;
  --hero-scrim-a1: .38;
  --hero-scrim-a2: .30;
  --hero-scrim-tail: 1.34;

  --hero-ink: #fff;
  --hero-accent: #0069B4;
  --hero-accent-hover: #005A96;
  --hero-border: rgba(255, 255, 255, .80);
  --hero-art-opacity: 1;

  --hero-max: 3840px;
  --hero-col: 1200px;
  --hero-col-x: max(32px, calc(50% - var(--hero-col) / 2));

  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-sizing: border-box;

  /* break out of the 1200px page shell; centred, capped at 3840px */
  width: min(100vw, var(--hero-max));
  max-width: none;
  margin-inline: calc(50% - min(50vw, var(--hero-max) / 2));
  padding-inline: 0;

  background: linear-gradient(107deg,
    var(--hero-g1) 0%,
    var(--hero-g2) 38%,
    var(--hero-g3) 70%,
    var(--hero-g4) 100%);
  color: var(--hero-ink);
}

/* above 3840px the banner letterboxes onto the page background */
.marketing-hero::before {
  content: none;
}

.hero {
  display: flex;
  align-items: center;
  padding-block: clamp(32px, 5.4vw, 72px);
  min-height: clamp(260px, 30vw, 435px);
  container-type: normal;
}

/* ---------- scrims ---------- */
.hero::before,
.hero::after,
.course-hero::before,
.course-hero::after {
  position: absolute;
  inset: 0;
  width: auto;
  content: "";
  pointer-events: none;
  transform: none;
}

/* anchored to the column's left edge */
.hero::before,
.course-hero::before {
  z-index: 0;
  background: radial-gradient(120% 130% at var(--hero-col-x) 118%,
    rgba(var(--hero-shade), var(--hero-radial-a)) 0%,
    rgba(var(--hero-shade), calc(var(--hero-radial-a) * .42)) 38%,
    rgba(var(--hero-shade), 0) 66%);
}

/* runs from the column's left edge to just past its right edge */
.hero::after,
.course-hero::after {
  z-index: 2;
  background: linear-gradient(100deg,
    rgba(var(--hero-shade2), calc(var(--hero-scrim-a1) * .55)) 0%,
    rgba(var(--hero-shade2), var(--hero-scrim-a1)) var(--hero-col-x),
    rgba(var(--hero-shade2), var(--hero-scrim-a2)) calc(var(--hero-col-x) + var(--hero-col) * .42),
    rgba(var(--hero-shade2), 0) calc(var(--hero-col-x) + var(--hero-col) * var(--hero-scrim-tail)));
}

/* ---------- artwork: 3840 x 435, centred slice ---------- */
.hero-flow-artwork,
.course-hero-flow-artwork {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  transform: none;
  opacity: var(--hero-art-opacity);
  -webkit-mask-image: linear-gradient(90deg,
    rgba(0, 0, 0, .10) 0%,
    rgba(0, 0, 0, .14) 14%,
    rgba(0, 0, 0, .27) 34%,
    rgba(0, 0, 0, .55) 52%,
    rgba(0, 0, 0, .88) 72%,
    #000 100%);
          mask-image: linear-gradient(90deg,
    rgba(0, 0, 0, .10) 0%,
    rgba(0, 0, 0, .14) 14%,
    rgba(0, 0, 0, .27) 34%,
    rgba(0, 0, 0, .55) 52%,
    rgba(0, 0, 0, .88) 72%,
    #000 100%);
}

/* ---------- 1200px copy column ---------- */
.hero-content,
.course-hero-inner {
  position: relative;
  z-index: 3;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--hero-col);
  margin-inline: auto;
  padding-inline: clamp(20px, 3.2vw, 48px);
}

/* ---------- homepage type ---------- */
.hero h1 {
  max-width: 20ch;
  margin: 0 0 clamp(12px, 1.9vw, 28px);
  color: var(--hero-ink);
  font: 800 clamp(30px, 4.4vw, 64px)/1.08 "Inter", system-ui, sans-serif;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.hero-copy {
  max-width: 46ch;
  margin: 0 0 clamp(18px, 2.8vw, 40px);
  color: var(--hero-ink);
  font: 400 clamp(15px, 1.55vw, 22px)/1.5 "Inter", system-ui, sans-serif;
  text-wrap: pretty;
}

/* ---------- search ---------- */
.hero .search-box {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 14px);
  box-sizing: border-box;
  width: 100%;
  max-width: min(72%, 704px);
  min-height: 0;
  padding: clamp(6px, .75vw, 11px);
  padding-inline-start: clamp(16px, 2vw, 29px);
  background: #fff;
  border: 0;
  border-radius: 999px;
  box-shadow: none;
}

.hero .search-box:focus-within {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.hero .search-box .material-icons {
  flex: 0 0 auto;
  margin: 0;
  color: #6E7780;
  font-size: clamp(18px, 1.7vw, 24px);
}

.hero .search-box input {
  flex: 1;
  align-self: stretch;
  box-sizing: border-box;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  color: #212121;
  background: transparent;
  border: 0;
  outline: 0;
  box-shadow: none;
  font: 400 clamp(14px, 1.35vw, 19px)/1.25 "Inter", system-ui, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero .search-box input::placeholder {
  color: #6E7780;
  opacity: 1;
}

.hero .search-box button {
  flex: 0 0 auto;
  height: auto;
  padding: clamp(7px, .85vw, 12px) clamp(14px, 2.2vw, 32px);
  color: #fff;
  background: var(--hero-accent);
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  cursor: pointer;
  font: 600 clamp(14px, 1.35vw, 19px)/1 "Inter", system-ui, sans-serif;
  text-shadow: none;
  transition: background-color .16s ease;
}

.hero .search-box button:hover {
  background: var(--hero-accent-hover);
}

.hero .search-box button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* ---------- popular searches ---------- */
.popular-topics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(7px, .8vw, 12px);
  margin-top: clamp(16px, 2.2vw, 32px);
  font-size: clamp(12px, 1.15vw, 16px);
}

.popular-topics > span {
  color: var(--hero-ink);
  opacity: .9;
  font: 400 1em/1 "Inter", system-ui, sans-serif;
}

.popular-topics > a {
  display: inline-block;
  padding: clamp(5px, .5vw, 7px) clamp(11px, 1.2vw, 17px);
  color: var(--hero-ink);
  text-decoration: none;
  border: 1px solid var(--hero-border);
  border-radius: 999px;
  font: 400 1em/1 "Inter", system-ui, sans-serif;
  transition: background-color .16s ease, border-color .16s ease;
}

.popular-topics > a:hover {
  color: var(--hero-ink);
  background: rgba(255, 255, 255, .18);
  border-color: #fff;
}

.popular-topics > a:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* touch targets: WCAG 2.5.8 asks for 24px minimum */
@media (pointer: coarse) {
  .popular-topics > a { min-height: 28px; padding-block: 6px; }
  .hero .search-box button { min-height: 44px; }
}

/* ---------- narrow ---------- */
@media (max-width: 45em) {
  .hero-content { max-width: 100%; }
  .hero h1 { max-width: 100%; }
  .hero .search-box { max-width: 100%; }
  .popular-topics > span { width: 100%; margin-bottom: 2px; }
  /* hidden by position — reorder the markup to change which terms survive */
  .popular-topics > a:nth-of-type(n + 4) { display: none; }
}

/* ---------- increased contrast ---------- */
@media (prefers-contrast: more) {
  .hero,
  .course-hero {
    --hero-g1: #062B49;
    --hero-g2: #0A3E68;
    --hero-g3: #0F5286;
    --hero-g4: #0C4874;
    --hero-radial-a: .80;
    --hero-scrim-a1: .46;
    --hero-scrim-a2: .36;
    --hero-scrim-tail: 1.46;
    --hero-border: rgba(255, 255, 255, .92);
    --hero-accent: #005A96;
    --hero-art-opacity: .55;
  }
}

/* ---------- forced colors ---------- */
@media (forced-colors: active) {
  .hero,
  .course-hero {
    background: Canvas;
    border-block-end: 1px solid CanvasText;
    color: CanvasText;
  }
  /* homepage colours are set explicitly below; the course hero is left to the system */
  .hero { forced-color-adjust: none; }
  .hero::before,
  .hero::after,
  .course-hero::before,
  .course-hero::after,
  .hero-flow-artwork,
  .course-hero-flow-artwork { display: none; }
  .hero h1,
  .hero-copy,
  .popular-topics > span { color: CanvasText; }
  .hero .search-box { background: Field; border: 1px solid CanvasText; }
  .hero .search-box input { color: FieldText; }
  .hero .search-box button { background: ButtonFace; color: ButtonText; border: 1px solid ButtonText; }
  .popular-topics > a { color: LinkText; border-color: LinkText; }
  .popular-topics > a:focus-visible,
  .hero .search-box button:focus-visible,
  .hero .search-box:focus-within { outline: 3px solid Highlight; }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero *,
  .course-hero * {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ---------- print ---------- */
@media print {
  .hero,
  .course-hero {
    background: none;
    min-height: 0;
    padding-block: 16px;
    color: #000;
  }
  .hero::before,
  .hero::after,
  .course-hero::before,
  .course-hero::after,
  .hero-flow-artwork,
  .course-hero-flow-artwork { display: none; }
  .hero h1,
  .hero-copy,
  .popular-topics > span { color: #000; }
  .popular-topics > a { color: #000; border-color: #767676; }
  .hero .search-box { display: none; }
}