/**
 * @file
 * The shared careers pieces: track card, terms, documents, callout, stage
 * timeline. Attached by the templates themselves, so they look right
 * wherever they render (the front theme, or Claro for the admin Preview).
 *
 * Tokens come from the front theme; every var() has a fallback for Claro.
 * Logical properties only; no prefers-color-scheme (the theme decides).
 */

:where(.gdrfad-dds) .careers-chips,
.gdrfad-dds-embedded .careers-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Track card. */
:where(.gdrfad-dds) .careers-track-card,
.gdrfad-dds-embedded .careers-track-card {
  display: flex;
  flex-direction: column;
  gap: var(--gap-gap-lg, 16px);
  padding: var(--padding-padding-xl, 24px);
}

:where(.gdrfad-dds) .careers-track-card__head,
.gdrfad-dds-embedded .careers-track-card__head {
  display: flex;
  align-items: center;
  gap: var(--gap-gap-md, 12px);
}

:where(.gdrfad-dds) .careers-track-card__title,
.gdrfad-dds-embedded .careers-track-card__title {
  margin: 0;
  font-size: var(--font-size-h6, 20px);
  line-height: var(--line-height-h6, 28px);
}

:where(.gdrfad-dds) .careers-track-card__summary,
.gdrfad-dds-embedded .careers-track-card__summary {
  margin: 0;
  color: var(--surface-on-surface-variant, #4b4545);
}

:where(.gdrfad-dds) .careers-track-card__actions,
.gdrfad-dds-embedded .careers-track-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-gap-sm, 8px);
  margin-block-start: auto;
}

@media (hover: hover) {
  :where(.gdrfad-dds) .careers-track-card,
  .gdrfad-dds-embedded .careers-track-card {
    transition: transform var(--motion-base, 200ms) var(--ease-out, ease), box-shadow var(--motion-base, 200ms) var(--ease-out, ease), border-color var(--motion-base, 200ms);
  }

  :where(.gdrfad-dds) .careers-track-card:hover,
  .gdrfad-dds-embedded .careers-track-card:hover {
    border-color: var(--primary-primary, #9d3f49);
    box-shadow: var(--elevation-3, 0 8px 24px rgb(0 0 0 / 12%));
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(.gdrfad-dds) .careers-track-card:hover,
  .gdrfad-dds-embedded .careers-track-card:hover {
    transform: none;
  }
}

:where(.gdrfad-dds) .careers-track-card--help,
.gdrfad-dds-embedded .careers-track-card--help {
  border-style: dashed;
  background: transparent;
  box-shadow: none;
}

/* Terms. */
:where(.gdrfad-dds) .careers-terms,
.gdrfad-dds-embedded .careers-terms {
  display: flex;
  flex-direction: column;
  gap: var(--gap-gap-lg, 16px);
}

:where(.gdrfad-dds) .careers-terms__title,
.gdrfad-dds-embedded .careers-terms__title {
  margin: 0;
  font-size: var(--font-size-h6, 20px);
}

:where(.gdrfad-dds) .careers-terms__lines,
.gdrfad-dds-embedded .careers-terms__lines {
  display: flex;
  flex-direction: column;
  gap: var(--gap-gap-sm, 8px);
  margin: 0;
  padding-inline-start: 1.5em;
}

/* The documents a track asks for. */
:where(.gdrfad-dds) .careers-documents__title,
.gdrfad-dds-embedded .careers-documents__title {
  margin: 0 0 var(--gap-gap-sm, 8px);
  font-size: var(--font-size-body, 16px);
}

:where(.gdrfad-dds) .careers-documents__list,
.gdrfad-dds-embedded .careers-documents__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: var(--gap-gap-sm, 8px);
  margin: 0;
  padding: 0;
  list-style: none;
}

:where(.gdrfad-dds) .careers-documents__item,
.gdrfad-dds-embedded .careers-documents__item {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-gap-sm, 8px);
  padding: var(--padding-padding-sm, 8px) var(--padding-padding-md, 12px);
  border: 1px solid var(--surface-outline-variant, #cec4c4);
  border-radius: var(--radius-xs, 8px);
  font-size: var(--font-size-body, 16px);
  line-height: var(--line-height-body, 24px);
}

:where(.gdrfad-dds) .careers-documents__icon,
.gdrfad-dds-embedded .careers-documents__icon {
  margin-block-start: 2px;
  color: var(--primary-primary, #9d3f49);
}

:where(.gdrfad-dds) .careers-documents__text,
.gdrfad-dds-embedded .careers-documents__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-inline-size: 0;
}

:where(.gdrfad-dds) .careers-documents__name,
.gdrfad-dds-embedded .careers-documents__name {
  font-weight: 700;
}

:where(.gdrfad-dds) .careers-documents__condition,
.gdrfad-dds-embedded .careers-documents__condition {
  color: var(--surface-on-surface-variant, #4b4545);
  font-size: var(--font-size-body, 16px);
  line-height: var(--line-height-body, 24px);
}

/* Callout (the theme's dds-callout does the tones). */
:where(.gdrfad-dds) .careers-callout__tracks,
.gdrfad-dds-embedded .careers-callout__tracks {
  margin: var(--gap-gap-xs, 4px) 0 0;
  padding-inline-start: 1.25em;
}

/* Stage timeline: vertical on phones, horizontal from 768px. */
:where(.gdrfad-dds) .careers-timeline__list,
.gdrfad-dds-embedded .careers-timeline__list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-gap-lg, 16px);
  margin: 0;
  padding: 0;
  list-style: none;
}

:where(.gdrfad-dds) .careers-timeline__node,
.gdrfad-dds-embedded .careers-timeline__node {
  position: relative;
  display: flex;
  gap: var(--gap-gap-md, 12px);
}

:where(.gdrfad-dds) .careers-timeline__marker,
.gdrfad-dds-embedded .careers-timeline__marker {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: 36px;
  block-size: 36px;
  border: 2px solid var(--surface-outline, #807575);
  border-radius: 50%;
  background: var(--surface-surface, #fff);
  font-weight: 700;
}

:where(.gdrfad-dds) .careers-timeline--explain .careers-timeline__marker,
.gdrfad-dds-embedded .careers-timeline--explain .careers-timeline__marker {
  border-color: var(--primary-primary, #9d3f49);
  background: var(--primary-primary-variant, #ffedec);
  color: var(--primary-on-primary-variant, #7e2833);
}

:where(.gdrfad-dds) .careers-timeline__node--done .careers-timeline__marker,
.gdrfad-dds-embedded .careers-timeline__node--done .careers-timeline__marker {
  border-color: var(--success-success, #0d6d2d);
  background: var(--success-success, #0d6d2d);
  color: var(--success-on-success, #fff);
}

:where(.gdrfad-dds) .careers-timeline__node--current .careers-timeline__marker,
.gdrfad-dds-embedded .careers-timeline__node--current .careers-timeline__marker {
  border-color: var(--primary-primary, #9d3f49);
  background: var(--primary-primary, #9d3f49);
  color: var(--primary-on-primary, #fff);
}

:where(.gdrfad-dds) .careers-timeline__node--not_reached,
.gdrfad-dds-embedded .careers-timeline__node--not_reached {
  opacity: 0.6;
}

:where(.gdrfad-dds) .careers-timeline__label,
.gdrfad-dds-embedded .careers-timeline__label {
  margin: 0;
  font-size: var(--font-size-body, 16px);
  font-weight: 700;
}

:where(.gdrfad-dds) .careers-timeline__hint,
:where(.gdrfad-dds) .careers-timeline__date,
:where(.gdrfad-dds) .careers-timeline__note,
.gdrfad-dds-embedded .careers-timeline__hint,
.gdrfad-dds-embedded .careers-timeline__date,
.gdrfad-dds-embedded .careers-timeline__note {
  margin: 0;
  color: var(--surface-on-surface-variant, #4b4545);
  font-size: var(--font-size-caption, 14px);
}

:where(.gdrfad-dds) .careers-timeline__note,
.gdrfad-dds-embedded .careers-timeline__note {
  margin-block-start: var(--gap-gap-lg, 16px);
}

@media (min-width: 768px) {
  :where(.gdrfad-dds) .careers-timeline__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gap-gap-xl, 24px);
  }

  :where(.gdrfad-dds) .careers-timeline__node {
    flex-direction: column;
  }

  :where(.gdrfad-dds) .careers-timeline__node:not(:last-child)::after {
    content: "";
    position: absolute;
    inset-block-start: 18px;
    inset-inline-start: 48px;
    inset-inline-end: calc(-1 * var(--gap-gap-xl, 24px) + 12px);
    border-block-start: 2px solid var(--surface-outline-variant, #cec4c4);
  }
}


@container gdrfad-dds (min-width: 768px) {
  .gdrfad-dds-embedded .careers-timeline__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gap-gap-xl, 24px);
  }

  .gdrfad-dds-embedded .careers-timeline__node {
    flex-direction: column;
  }

  .gdrfad-dds-embedded .careers-timeline__node:not(:last-child)::after {
    content: "";
    position: absolute;
    inset-block-start: 18px;
    inset-inline-start: 48px;
    inset-inline-end: calc(-1 * var(--gap-gap-xl, 24px) + 12px);
    border-block-start: 2px solid var(--surface-outline-variant, #cec4c4);
  }
}

@media (forced-colors: active) {
  :where(.gdrfad-dds) .careers-timeline__marker,
  :where(.gdrfad-dds) .careers-documents__item,
  .gdrfad-dds-embedded .careers-timeline__marker,
  .gdrfad-dds-embedded .careers-documents__item {
    border-color: CanvasText;
  }
}

/* The switched-off portal (gdrfad-careers-offline.html.twig): a card like
   the tracker's notices. */
:where(.gdrfad-dds) .careers-offline,
.gdrfad-dds-embedded .careers-offline {
  max-inline-size: 640px;
  margin-block: var(--gap-gap-lg, 24px);
}

:where(.gdrfad-dds) .careers-offline__card,
.gdrfad-dds-embedded .careers-offline__card {
  display: grid;
  justify-items: start;
  gap: var(--gap-gap-md, 16px);
  padding: var(--padding-padding-lg, 16px);
  border: 1px solid var(--surface-outline-variant, #d6d6d6);
  border-radius: var(--radius-md, 12px);
  background: var(--surface-surface, #fff);
  box-shadow: var(--elevation-1, 0 1px 2px rgb(0 0 0 / 0.08));
}

@media (min-width: 768px) {
  :where(.gdrfad-dds) .careers-offline__card {
    padding: var(--padding-padding-xl, 32px);
  }
}

@container gdrfad-dds (min-width: 768px) {
  .gdrfad-dds-embedded .careers-offline__card {
    padding: var(--padding-padding-xl, 32px);
  }
}

:where(.gdrfad-dds) .careers-offline__icon,
.gdrfad-dds-embedded .careers-offline__icon {
  inline-size: 48px;
  block-size: 48px;
}

:where(.gdrfad-dds) .careers-offline__title,
.gdrfad-dds-embedded .careers-offline__title {
  margin: 0;
  font-size: var(--font-size-h2, 28px);
  /* The site theme's h1 line height is made for its own, larger headings. */
  line-height: 1.3;
}

:where(.gdrfad-dds) .careers-offline__text,
.gdrfad-dds-embedded .careers-offline__text {
  margin: 0;
  color: var(--surface-on-surface-variant, #545454);
}

:where(.gdrfad-dds) .careers-offline__actions,
.gdrfad-dds-embedded .careers-offline__actions {
  margin: var(--gap-gap-sm, 8px) 0 0;
}