/**
 * @file
 * The /careers landing layout (the shared pieces are in
 * careers-components.css). Logical properties only.
 */

:where(.gdrfad-dds) .careers-landing,
.gdrfad-dds-embedded .careers-landing {
  display: flex;
  flex-direction: column;
  gap: var(--padding-padding-3xl, 64px);
}

/* The closing band sits on the footer; without it (applications closed)
 * the last section keeps its space. One :has() per rule. */
:where(.gdrfad-dds) .site-main:has(.careers-landing),
.gdrfad-dds-embedded .site-main:has(.careers-landing) {
  padding-block-end: 0;
}

:where(.gdrfad-dds) .careers-landing:not(:has(.careers-closing)),
.gdrfad-dds-embedded .careers-landing:not(:has(.careers-closing)) {
  padding-block-end: var(--padding-padding-3xl, 64px);
}

:where(.gdrfad-dds) .careers-closing ~ .careers-section,
.gdrfad-dds-embedded .careers-closing ~ .careers-section {
  padding-block-end: var(--padding-padding-3xl, 64px);
}

/* The hero runs edge to edge: undo the page shell's top padding and width
 * cap for the landing (its sections use .dds-container themselves). One
 * :has() per rule. */
:where(.gdrfad-dds) .site-main:has(.careers-landing),
.gdrfad-dds-embedded .site-main:has(.careers-landing) {
  padding-block-start: 0;
}

:where(.gdrfad-dds) .site-main > *:has(.careers-landing),
.gdrfad-dds-embedded .site-main > *:has(.careers-landing) {
  max-inline-size: none;
  padding-inline: 0;
}

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

:where(.gdrfad-dds) .careers-section__title,
.gdrfad-dds-embedded .careers-section__title {
  margin: 0;
  font-size: var(--font-size-h3, 32px);
  line-height: var(--line-height-h3, 40px);
}

:where(.gdrfad-dds) .careers-section__lead,
:where(.gdrfad-dds) .careers-section__text,
.gdrfad-dds-embedded .careers-section__lead,
.gdrfad-dds-embedded .careers-section__text {
  margin: 0;
  max-inline-size: 72ch;
  color: var(--surface-on-surface-variant, #4b4545);
}

/* Hero. */
:where(.gdrfad-dds) .careers-hero,
.gdrfad-dds-embedded .careers-hero {
  border-block-end: 1px solid var(--surface-outline-variant, #cec4c4);
  background: var(--surface-surface, #fff);
}

:where(.gdrfad-dds) .careers-hero__inner,
.gdrfad-dds-embedded .careers-hero__inner {
  display: grid;
  gap: var(--gap-gap-xl, 24px);
  padding-block: var(--padding-padding-xl, 24px) var(--padding-padding-xxl, 32px);
}

:where(.gdrfad-dds) .careers-hero__text,
.gdrfad-dds-embedded .careers-hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--gap-gap-xl, 24px);
}

:where(.gdrfad-dds) .careers-hero__eyebrow,
.gdrfad-dds-embedded .careers-hero__eyebrow {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  min-block-size: 28px;
  padding-inline: var(--padding-padding-md, 12px);
  border-radius: var(--radius-pill, 999px);
  background: var(--secondary-secondary-variant, #ffeed8);
  color: var(--secondary-on-secondary-variant, #6d4d00);
  font-size: var(--font-size-caption, 14px);
  font-weight: 700;
}

:where(.gdrfad-dds) .careers-hero__title,
.gdrfad-dds-embedded .careers-hero__title {
  margin: 0;
  font-size: var(--font-size-hero, 56px);
  line-height: var(--line-height-hero, 1.12);
  letter-spacing: -0.01em;
}

:where(.gdrfad-dds) :is(:lang(ar) .careers-hero__title),
.gdrfad-dds-embedded :is(:lang(ar) .careers-hero__title) {
  letter-spacing: 0;
}

:where(.gdrfad-dds) .careers-hero__intro,
.gdrfad-dds-embedded .careers-hero__intro {
  margin: 0;
  max-inline-size: 60ch;
  color: var(--surface-on-surface-variant, #4b4545);
  font-size: 18px;
  line-height: 1.6;
}

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

:where(.gdrfad-dds) .careers-cta,
.gdrfad-dds-embedded .careers-cta {
  min-block-size: 48px;
  font-size: var(--font-size-body, 16px);
}

:where(.gdrfad-dds) .careers-cta__minutes,
.gdrfad-dds-embedded .careers-cta__minutes {
  font-weight: 400;
  opacity: 0.85;
}

:where(.gdrfad-dds) .careers-hero__meta,
.gdrfad-dds-embedded .careers-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-gap-md, 12px) var(--gap-gap-xl, 24px);
  margin: 0;
  padding: 0;
  color: var(--surface-on-surface-variant, #4b4545);
  font-size: var(--font-size-caption, 14px);
  list-style: none;
}

:where(.gdrfad-dds) .careers-hero__meta li,
.gdrfad-dds-embedded .careers-hero__meta li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

:where(.gdrfad-dds) .careers-hero__art,
.gdrfad-dds-embedded .careers-hero__art {
  overflow: hidden;
  border-radius: var(--radius-md, 16px);
  aspect-ratio: 4 / 1;
}

:where(.gdrfad-dds) .careers-hero__art svg,
.gdrfad-dds-embedded .careers-hero__art svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

/* Ramp tokens only, so the art looks the same in both themes. */
:where(.gdrfad-dds) .careers-hero__art .a-p20,
.gdrfad-dds-embedded .careers-hero__art .a-p20 { fill: var(--primary-primary20, #60111e); }
:where(.gdrfad-dds) .careers-hero__art .a-p30,
.gdrfad-dds-embedded .careers-hero__art .a-p30 { fill: var(--primary-primary30, #7e2833); }
:where(.gdrfad-dds) .careers-hero__art .a-p35,
.gdrfad-dds-embedded .careers-hero__art .a-p35 { fill: var(--primary-primary35, #8e343e); }
:where(.gdrfad-dds) .careers-hero__art .a-p40,
.gdrfad-dds-embedded .careers-hero__art .a-p40 { fill: var(--primary-primary40, #9d3f49); }
:where(.gdrfad-dds) .careers-hero__art .a-s40,
.gdrfad-dds-embedded .careers-hero__art .a-s40 { fill: var(--secondary-secondary40, #7b5809); }
:where(.gdrfad-dds) .careers-hero__art .a-s60,
.gdrfad-dds-embedded .careers-hero__art .a-s60 { fill: var(--secondary-secondary60, #b38a3b); }
:where(.gdrfad-dds) .careers-hero__art .a-s95,
.gdrfad-dds-embedded .careers-hero__art .a-s95 { fill: var(--secondary-secondary95, #ffeed8); }

@media (min-width: 768px) {
  :where(.gdrfad-dds) .careers-hero__inner {
    padding-block: var(--padding-padding-3xl, 64px) 72px;
  }

  :where(.gdrfad-dds) .careers-hero__art {
    aspect-ratio: 3 / 1;
  }
}


@container gdrfad-dds (min-width: 768px) {
  .gdrfad-dds-embedded .careers-hero__inner {
    padding-block: var(--padding-padding-3xl, 64px) 72px;
  }

  .gdrfad-dds-embedded .careers-hero__art {
    aspect-ratio: 3 / 1;
  }
}

@media (min-width: 1280px) {
  :where(.gdrfad-dds) .careers-hero__inner {
    grid-template-columns: minmax(0, 1fr) 560px;
    align-items: center;
    gap: var(--gap-gap-3xl, 64px);
  }

  :where(.gdrfad-dds) .careers-hero__art {
    aspect-ratio: 4 / 3;
  }
}


@container gdrfad-dds (min-width: 1280px) {
  .gdrfad-dds-embedded .careers-hero__inner {
    grid-template-columns: minmax(0, 1fr) 560px;
    align-items: center;
    gap: var(--gap-gap-3xl, 64px);
  }

  .gdrfad-dds-embedded .careers-hero__art {
    aspect-ratio: 4 / 3;
  }
}

/* Track cards. */
:where(.gdrfad-dds) .careers-cards,
.gdrfad-dds-embedded .careers-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--gap-gap-xl, 24px);
  margin-block-start: var(--gap-gap-sm, 8px);
}

/* Terms sheet (native popover). Without popover support it shows inline. */
:where(.gdrfad-dds) .careers-sheet,
.gdrfad-dds-embedded .careers-sheet {
  max-block-size: min(85dvh, 720px);
  overflow: auto;
  border-radius: var(--radius-md, 16px);
}

:where(.gdrfad-dds) .careers-sheet:popover-open,
.gdrfad-dds-embedded .careers-sheet:popover-open {
  display: flex;
  flex-direction: column;
  gap: var(--gap-gap-lg, 16px);
}

:where(.gdrfad-dds) .careers-sheet__head,
.gdrfad-dds-embedded .careers-sheet__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-gap-md, 12px);
}

:where(.gdrfad-dds) .careers-sheet__title,
.gdrfad-dds-embedded .careers-sheet__title {
  margin: 0;
  font-size: var(--font-size-h5, 24px);
  line-height: var(--line-height-h5, 32px);
}

/* Apply stays in reach at the sheet's bottom edge while the terms scroll
 * (the negative offsets cancel the sheet's own padding). */
:where(.gdrfad-dds) .careers-sheet__foot,
.gdrfad-dds-embedded .careers-sheet__foot {
  position: sticky;
  inset-block-end: calc(-1 * var(--padding-padding-xl, 24px));
  display: flex;
  justify-content: flex-end;
  margin: 0 calc(-1 * var(--padding-padding-xl, 24px)) calc(-1 * var(--padding-padding-xl, 24px));
  padding: var(--padding-padding-md, 12px) var(--padding-padding-xl, 24px);
  border-block-start: 1px solid var(--surface-outline-variant, #cec4c4);
  background: var(--surface-surface, #fff);
}

@supports not selector(:popover-open) {
  :where(.gdrfad-dds) .careers-sheet,
  .gdrfad-dds-embedded .careers-sheet {
    display: flex;
    flex-direction: column;
    gap: var(--gap-gap-lg, 16px);
    margin-block-start: var(--gap-gap-xl, 24px);
    border: 1px solid var(--surface-outline-variant, #cec4c4);
  }

  :where(.gdrfad-dds) .careers-sheet__close,
  .gdrfad-dds-embedded .careers-sheet__close {
    display: none;
  }
}

/* Compare: a table from 768px, cards below. */
:where(.gdrfad-dds) .careers-compare__table-wrap,
.gdrfad-dds-embedded .careers-compare__table-wrap {
  display: none;
  overflow-x: auto;
}

:where(.gdrfad-dds) .careers-compare__table,
.gdrfad-dds-embedded .careers-compare__table {
  inline-size: 100%;
  border-collapse: collapse;
  background: var(--surface-surface, #fff);
}

:where(.gdrfad-dds) .careers-compare__table th,
:where(.gdrfad-dds) .careers-compare__table td,
.gdrfad-dds-embedded .careers-compare__table th,
.gdrfad-dds-embedded .careers-compare__table td {
  padding: var(--padding-padding-md, 12px);
  border-block-end: 1px solid var(--surface-outline-variant, #cec4c4);
  text-align: center;
}

:where(.gdrfad-dds) .careers-compare__table th[scope="row"],
.gdrfad-dds-embedded .careers-compare__table th[scope="row"] {
  font-weight: 400;
  text-align: start;
}

/* The group band: its header and the empty cell that carries it across. */
:where(.gdrfad-dds) .careers-compare__group > th,
:where(.gdrfad-dds) .careers-compare__group > td,
.gdrfad-dds-embedded .careers-compare__group > th,
.gdrfad-dds-embedded .careers-compare__group > td {
  background: var(--surface-surface-container-low, #f6f3f5);
}

:where(.gdrfad-dds) .careers-compare__table th[scope="rowgroup"],
.gdrfad-dds-embedded .careers-compare__table th[scope="rowgroup"] {
  font-size: var(--font-size-caption, 14px);
  text-align: start;
}

:where(.gdrfad-dds) .careers-compare__cards,
.gdrfad-dds-embedded .careers-compare__cards {
  display: grid;
  gap: var(--gap-gap-lg, 16px);
}

:where(.gdrfad-dds) .careers-compare__card,
.gdrfad-dds-embedded .careers-compare__card {
  padding: var(--padding-padding-lg, 16px);
}

:where(.gdrfad-dds) .careers-compare__card-title,
.gdrfad-dds-embedded .careers-compare__card-title {
  margin: 0 0 var(--gap-gap-md, 12px);
  font-size: var(--font-size-h6, 20px);
}

:where(.gdrfad-dds) .careers-compare__list,
.gdrfad-dds-embedded .careers-compare__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--gap-gap-sm, 8px) var(--gap-gap-lg, 16px);
  margin: 0;
}

:where(.gdrfad-dds) .careers-compare__list dd,
.gdrfad-dds-embedded .careers-compare__list dd {
  margin: 0;
}

:where(.gdrfad-dds) .careers-mark--yes,
.gdrfad-dds-embedded .careers-mark--yes {
  color: var(--success-success, #0d6d2d);
}

:where(.gdrfad-dds) .careers-mark--no,
.gdrfad-dds-embedded .careers-mark--no {
  color: var(--surface-on-surface-variant, #4b4545);
}

@media (min-width: 768px) {
  :where(.gdrfad-dds) .careers-compare__table-wrap {
    display: block;
  }

  :where(.gdrfad-dds) .careers-compare__cards {
    display: none;
  }
}


@container gdrfad-dds (min-width: 768px) {
  .gdrfad-dds-embedded .careers-compare__table-wrap {
    display: block;
  }

  .gdrfad-dds-embedded .careers-compare__cards {
    display: none;
  }
}

/* Have these ready. */
:where(.gdrfad-dds) .careers-ready,
.gdrfad-dds-embedded .careers-ready {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--gap-gap-xl, 24px);
}

:where(.gdrfad-dds) .careers-ready__card,
.gdrfad-dds-embedded .careers-ready__card {
  display: flex;
  flex-direction: column;
  gap: var(--gap-gap-md, 12px);
  padding: 28px;
}

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

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

:where(.gdrfad-dds) .careers-ready__card .careers-chips,
.gdrfad-dds-embedded .careers-ready__card .careers-chips {
  margin-block-start: auto;
}

:where(.gdrfad-dds) .careers-ready__note,
.gdrfad-dds-embedded .careers-ready__note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-weight: 700;
}

/* Notes and the closing band. */
:where(.gdrfad-dds) .careers-notes,
.gdrfad-dds-embedded .careers-notes {
  gap: var(--gap-gap-md, 12px);
}

:where(.gdrfad-dds) .careers-closing,
.gdrfad-dds-embedded .careers-closing {
  background: var(--primary-primary-variant, #ffedec);
  color: var(--primary-on-primary-variant, #7e2833);
}

:where(.gdrfad-dds) .careers-closing__inner,
.gdrfad-dds-embedded .careers-closing__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-gap-xl, 24px);
  padding-block: var(--padding-padding-xxl, 32px);
}

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

/* Sticky Start bar: phones only, once the hero has scrolled away. */
:where(.gdrfad-dds) [data-careers-sticky],
.gdrfad-dds-embedded [data-careers-sticky] {
  display: none;
}

@supports (animation-timeline: view()) {
  @media (max-width: 767.98px) /* scope-css: viewport (a bar fixed to the screen) */ {
    :where(.gdrfad-dds) .careers-landing,
    .gdrfad-dds-embedded .careers-landing {
      timeline-scope: --careers-hero;
    }

    :where(.gdrfad-dds) .careers-hero,
    .gdrfad-dds-embedded .careers-hero {
      view-timeline: --careers-hero block;
    }

    :where(.gdrfad-dds) [data-careers-sticky],
    .gdrfad-dds-embedded [data-careers-sticky] {
      position: fixed;
      z-index: 20;
      inset-inline: 0;
      inset-block-end: 0;
      display: flex;
      padding: var(--padding-padding-md, 12px) var(--page-gutter, 16px);
      border-block-start: 1px solid var(--surface-outline-variant, #cec4c4);
      background: var(--surface-surface, #fff);
      box-shadow: var(--elevation-3, 0 8px 24px rgb(0 0 0 / 12%));
      animation: careers-bar linear both;
      animation-timeline: --careers-hero;
      animation-range: exit 0% exit 100%;
    }

    :where(.gdrfad-dds) [data-careers-sticky] .dds-button,
    .gdrfad-dds-embedded [data-careers-sticky] .dds-button {
      inline-size: 100%;
    }

    /* Page-level: the page root itself, also when the landing is embedded
     * in another theme (only while the sticky bar is on the page). */
    html:where(.gdrfad-dds),
    html:has(.gdrfad-dds-embedded [data-careers-sticky]) {
      scroll-padding-block-end: calc(var(--careers-bar-h, 72px) + 16px);
    }

    :where(.gdrfad-dds) body,
    body:has(.gdrfad-dds-embedded [data-careers-sticky]) {
      padding-block-end: calc(var(--careers-bar-h, 72px) + 16px);
    }
  }
}

/* An invisible bar must not take focus: visibility is hidden at the start. */
@keyframes careers-bar {
  from {
    opacity: 0;
    transform: translateY(100%);
    visibility: hidden;
  }

  to {
    opacity: 1;
    transform: none;
    visibility: visible;
  }
}

@media (prefers-reduced-motion: reduce) {
  @keyframes careers-bar {
    from {
      opacity: 0;
      visibility: hidden;
    }

    to {
      opacity: 1;
      visibility: visible;
    }
  }
}