/* Campus ambassador page: the mix the founder chose on 17 Oct.
 * The redesign's hero and black campus band (white logo chips in a two-row infinite ticker),
 * the original What you do and What you get (careers.css, with the duty doodles set to one
 * box each), Who we're looking for on the cream ground, and the two-column form with numbered
 * steps. Loaded after careers.css and site-launch.css, before company-theme.css.
 */

.cr-amb {
  --amb-band: #141412;
  --amb-on-band: #FFFFFF;
  --amb-on-band-soft: #D9D3CC; /* 13.4:1 on the band */
  --amb-band-link: #FF8A5C;    /* 7.6:1 on the band */
  overflow-x: clip;
}

/* ---------- Section titles: the redesign's scale ---------- */
.cr-amb .df-section-title { font-size: 40px; font-weight: 800; line-height: 45px; letter-spacing: -0.035em; }

/* ---------- Hero (redesign): no swash, the megaphone level with the title block ---------- */
.cr-amb.df-page { padding-top: 24px; }
.cr-amb .df-heading { align-items: center; gap: 48px; margin-bottom: 0; }
.cr-amb .df-heading > div { max-width: 760px; }
.cr-amb .df-heading h1 { max-width: 560px; font-size: 56px; font-weight: 800; line-height: 56px; letter-spacing: -0.045em; }
.cr-amb .df-heading p { max-width: 760px; margin-top: 20px; font-size: 19px; line-height: 29px; }
.cr-amb .df-heading .cr-amb-hero-art { flex: 0 0 252px; width: 252px; height: 210px; transform: none; }
.cr-amb .cr-amb-hero-art img { width: 100%; height: 100%; object-fit: contain; object-position: right center; }
.cr-amb .df-heading .cr-hero-actions .fine { margin-top: 0; font-size: 14px; line-height: 1.4; }

/* ---------- The black campus band (redesign) ---------- */
.cr-amb .cr-band { position: relative; margin-top: 78px; margin-inline: calc(50% - 50vw); padding: 72px calc(50vw - 50%) 80px; background: var(--amb-band); color: var(--amb-on-band); }
/* The scalloped top edge: half discs of the band colour standing on its top line. */
.cr-amb .cr-band::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 6px; background: radial-gradient(circle at 12px 6px, var(--amb-band) 6px, transparent 6.5px) 0 0 / 24px 6px repeat-x; }
.cr-amb .cr-band .df-section-title { color: var(--amb-on-band); }
.cr-amb .cr-band .cr-section-head > div { max-width: none; }
.cr-amb .cr-band .cr-section-head p { color: var(--amb-on-band-soft); }

/* A chip: white in both themes, so every university mark keeps its own colours. */
.cr-amb .cr-band .cr-campuses.df-brand-list { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; padding: 0; list-style: none; }
.cr-amb .cr-band .cr-campuses > li { width: auto; flex: none; }
.cr-amb .cr-band .cr-campus .df-brand { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 20px 12px 12px; border: 0; border-radius: 18px; background: #FFFFFF; color: #141412; }
.cr-amb .cr-band .cr-campus-logo { flex: 0 0 40px; width: 40px; height: 40px; border: 1px solid #EEE5DC; border-radius: 10px; }
.cr-amb .cr-band .cr-campus-logo img { padding: 3px; }
.cr-amb .cr-band .cr-campuses .df-brand-name { color: #141412; font-size: 17px; font-weight: 700; line-height: 1.2; letter-spacing: 0; white-space: nowrap; }
.cr-amb .cr-band .cr-campuses .df-brand-category { margin-top: 2px; color: #6B6660; font-size: 13px; font-weight: 600; white-space: nowrap; }
.cr-amb .cr-band .cr-campus-track + .cr-campus-track { margin-top: 14px; }

/* Ticker (ambassador.js adds .is-ticker): the window runs edge to edge, each track slides by one
   list's width at about 24 px a second, row two the other way. Hover or focus inside pauses it,
   and so does the Pause campuses toggle (.is-ticker-paused). */
.cr-amb .cr-band.is-ticker .cr-campus-window { margin-inline: calc(50% - 50vw); padding-block: 0; overflow: hidden; -webkit-mask-image: none; mask-image: none; }
.cr-amb .cr-band.is-ticker .cr-campus-track { will-change: transform; }
.cr-amb .cr-band.is-ticker .cr-campuses.df-brand-list { flex-wrap: nowrap; gap: 14px; padding-right: 14px; }
.cr-amb .cr-band.is-ticker .cr-campus-window:is(:hover, :focus-within) .cr-campus-track { animation-play-state: paused; }

.cr-amb .cr-band .cr-campus-foot { margin-top: 28px; }
.cr-amb .cr-band .cr-campus-other { color: var(--amb-band-link); font-weight: 700; }
.cr-amb .cr-band .cr-ticker-toggle { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--amb-on-band); border-radius: 999px; color: var(--amb-on-band); background: transparent; font-size: 15px; font-weight: 700; text-decoration: none; }
.cr-amb .cr-band .cr-ticker-toggle[hidden] { display: none; }
.cr-amb .cr-band .cr-ticker-toggle:hover { background: rgba(255, 255, 255, .1); }
.cr-amb .cr-band .cr-ticker-toggle[aria-pressed="true"] { background: var(--amb-on-band); color: var(--amb-band); }
.cr-amb .cr-band :is(a, button):focus-visible { outline-color: var(--amb-on-band); }

/* ---------- What you do: one box per duty doodle ----------
   Each drawing sits in the same 164 by 136 box, 24 px in from the tile's right edge and
   centred on its height. The boxes are measured on the drawings themselves (their
   transparent margins differ), so the boy, the plane and the girl read at one size. */
.cr-amb .cr-duties .df-card-visual { position: relative; display: flex; align-items: center; overflow: hidden; }
.cr-amb .cr-duties .df-card-saving { max-width: 52%; }
.cr-amb .cr-duty-art { position: absolute; top: 50%; display: block; transform: translateY(-50%); pointer-events: none; }
.cr-amb .cr-duty-art img { display: block; width: 100%; height: 100%; padding: 0; object-fit: contain; }
.cr-amb .cr-duty-art--wave { right: 21px; width: 130px; height: 142px; }
.cr-amb .cr-duty-art--plane { right: 21px; width: 170px; height: 120px; }
.cr-amb .cr-duty-art--girl { right: -6px; width: 177px; height: 177px; transform: translateY(calc(-50% - 3.5px)); }

/* ---------- Who we're looking for: the redesign's paper band, the kid centred ----------
   Edge to edge in the paper colour (white; a step above the ground in the dark) with the
   scalloped top. The waving kid is centred in the title's column, in the height left under
   the title, at 224 px of drawing; its box is trimmed to the drawing with negative margins so
   the transparent edges of the file do not push the row taller than the list. */
.cr-amb .cr-fit { position: relative; margin-inline: calc(50% - 50vw); padding: 88px calc(50vw - 50%); border-block: 0; background: var(--tud-color-bg-surface); align-items: stretch; }
.cr-amb .cr-fit::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 6px; background: radial-gradient(circle at 12px 6px, var(--tud-color-bg-surface) 6px, transparent 6.5px) 0 0 / 24px 6px repeat-x; }
.cr-amb .cr-fit > div:first-child { display: flex; flex-direction: column; }
.cr-amb .cr-fit-art { flex: none; width: 284px; height: auto; margin: auto; padding-top: 24px; }
.cr-amb .cr-fit-art img { display: block; width: 284px; height: 284px; margin-block: -28px -33px; object-fit: contain; transform: translateX(-7px); }
.cr-amb .cr-fit .partners-benefits { display: block; }
.cr-amb .cr-fit .partners-benefits li { display: flex; gap: 14px; max-width: none; padding: 14px 0; border-top: 1px solid var(--tud-color-border-strong); color: var(--tud-color-text-primary); font-size: 16px; line-height: 1.55; }
.cr-amb .cr-fit .partners-benefits li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 10px; border-radius: 50%; background: currentColor; }

/* ---------- Apply: numbered step dots and the high five under the steps ---------- */
.cr-amb .cr-next li::before { width: 28px; height: 28px; background: var(--tud-color-text-primary); color: var(--tud-color-bg-canvas); }
.cr-amb .cr-next li:not(:last-child)::after { content: none; }
.cr-amb .cr-apply { align-items: start; }
/* The copy column keeps its own height and follows the scroll beside the form (see the sticky
   rule below); the high five (224 px of drawing) is centred in its
   width, about 48 px under the last step (25 px margin, the step's 18 px padding, the drawing's edge). */
.cr-amb .cr-apply-copy { position: static; display: flex; flex-direction: column; }
.cr-amb .cr-apply-art { flex: none; width: 286px; height: 234px; margin: 25px auto 0; padding: 0; }
.cr-amb .cr-apply-art img { width: 100%; height: 100%; object-fit: contain; }
.cr-amb .cr-consent { padding: 0; background: none; }
.cr-amb .cr-consent:has(input[aria-invalid="true"]) { padding: 14px 16px; }

/* Two columns: the copy column follows the scroll beside the long form, 100 px down like the
   other sticky columns on the site (the header is 77 px). It needs its own height (659 px, 704 px
   in the narrowest two-column widths) plus that offset and some air to fit the window; shorter
   windows keep it static so nothing is cut off. */
@media (min-width: 901px) and (min-height: 770px) {
  .cr-amb .cr-apply-copy { position: sticky; top: 100px; }
}
@media (min-width: 901px) and (max-width: 999px) and (max-height: 819px) {
  .cr-amb .cr-apply-copy { position: static; }
}

@media (max-width: 900px) {
  .cr-amb .cr-fit-art, .cr-amb .cr-apply-art { display: block; }
  .cr-amb .df-heading .cr-amb-hero-art { flex-basis: 180px; width: 180px; height: 150px; }
}

@media (max-width: 600px) {
  .cr-amb .df-section-title { font-size: 30px; line-height: 35px; }
  .cr-amb .df-heading h1 { max-width: none; padding-right: 0; font-size: 40px; line-height: 41px; }
  .cr-amb .df-heading p { font-size: 17px; line-height: 26px; }
  .cr-amb .df-heading .cr-amb-hero-art { position: static; display: block; width: 132px; height: 110px; margin-top: 24px; transform: none; }
  .cr-amb .cr-amb-hero-art img { object-position: left center; }
  .cr-amb .cr-band { margin-top: 52px; padding-block: 44px 48px; }
  .cr-amb .cr-band .cr-campus-foot { flex-direction: column; align-items: flex-start; gap: 12px; }
  .cr-amb .cr-fit { padding-block: 56px; }
  .cr-amb .cr-fit-art { width: 190px; height: auto; margin: 0 auto; padding-top: 16px; }
  .cr-amb .cr-fit-art img { width: 190px; height: 190px; margin-block: -18px -22px; transform: translateX(-5px); }
  .cr-amb .cr-apply-art { width: 183px; height: 157px; margin: 32px auto 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .cr-amb .cr-band .cr-campus-track { animation: none !important; transform: none !important; }
  .cr-amb .cr-band .cr-ticker-copy { display: none !important; }
}

/* ---------- Dark ----------
   The band lifts to a warm brown a step above the ground, so it still reads as its own
   section; the chips stay white for the marks. */
:root[data-theme="dark"] .cr-amb { --amb-band: #2E241D; --amb-on-band: #F6EFE4; --amb-on-band-soft: #D9CFC2; }
:root[data-theme="dark"] .cr-amb .cr-band .cr-ticker-toggle:hover { background: rgba(246, 239, 228, .1); }