/* Career — guild internship posting and application. */

/* The house mask hides the left so the headline stays quiet and lets the
   construction plate show around the posting. On a narrow screen the card
   sits below the headline, so the plate stays visible down there. */
.qg-career .qg-cr-field {
  inset: 0;
  width: 100%;
  height: 100%;
}

@media (max-width: 1080px) {
  .qg-career .qg-cr-field,
  html[data-theme='dark'] .qg-career .qg-cr-field {
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.72) 22%, #000 40%, #000 100%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.72) 22%, #000 40%, #000 100%);
    -webkit-mask-composite: source-over;
    mask-composite: add;
  }
}

.qg-career .qg-hero__badge .qg-abacus {
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  /* Emoji ignore color, so flatten the glyph and retint it to --qg-blue. */
  filter: brightness(0) saturate(100%) invert(25%) sepia(50%) saturate(1938%) hue-rotate(181deg) brightness(100%) contrast(152%);
}

html[data-theme='dark'] .qg-career .qg-hero__badge .qg-abacus {
  filter: brightness(0) saturate(100%) invert(50%) sepia(25%) saturate(1734%) hue-rotate(180deg) brightness(106%) contrast(82%);
}

.qg-career .qg-hero h1 {
  font-size: clamp(18px, 6.1cqi, 32px);
}

.qg-career .qg-cr-line2 {
  display: block;
  margin-top: 0.12em;
  color: var(--qg-accent);
}

/* The meet block used to make this column taller than the role card, so the
   headline sat above the card. Keep that column height and center the copy
   in it, which drops the text into line with the card. */
@media (min-width: 1081px) {
  .qg-career .qg-hero__inner {
    min-height: 589px;
    align-items: center;
  }
}

.qg-career .qg-hero__sub {
  margin-top: 52px;
}

.qg-career .qg-hero__sub + .qg-hero__sub {
  margin-top: 0.85em;
}

.qg-cr-em {
  color: var(--qg-accent);
  font-weight: 600;
}

.qg-cr-admin {
  margin: 18px 0 0;
  font-size: 13px;
}

.qg-cr-admin a {
  color: var(--qg-link);
  font-weight: 600;
  text-decoration: none;
}

.qg-cr-admin a:hover {
  text-decoration: underline;
}

/* LinkedIn-style role card */
.qg-cr-job {
  padding: 22px 22px 18px;
  background: var(--qg-surface);
  border: 1px solid var(--qg-line);
  border-radius: 12px;
  box-shadow: var(--qg-sh-float);
}

.qg-cr-job__head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.qg-cr-job__logo {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--qg-line);
  background: #004aad;
}

.qg-cr-job__kicker {
  display: block;
  margin-bottom: 2px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--qg-text-faint);
}

.qg-cr-job__title {
  margin: 0;
  font-family: var(--qg-font-display);
  font-size: 1.45rem;
  line-height: 1.15;
  letter-spacing: -0.03em;
  font-weight: 650;
  color: var(--qg-text);
}

.qg-cr-job__company {
  margin: 4px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--qg-accent);
}

.qg-cr-job__meta {
  margin: 3px 0 0;
  font-size: 13.5px;
  color: var(--qg-text-muted);
}

body.qg-career .qg-cr-job__lanes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.qg-career .qg-cr-job__lanes li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--qg-text);
}

.qg-career .qg-cr-job__lanes i {
  width: 1.1em;
  color: var(--qg-accent);
  font-size: 14px;
  text-align: center;
}

.qg-cr-job__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.qg-cr-job__facts li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--qg-surface-3);
  border: 1px solid var(--qg-line);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--qg-text-body);
}

.qg-cr-job__facts i {
  color: var(--qg-accent);
  font-size: 11px;
}

.qg-cr-pay {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 16px;
  padding: 14px 14px 13px;
  border-radius: 10px;
  background: var(--qg-accent-soft);
  border: 1px solid var(--qg-accent-line);
}

.qg-cr-pay__mark {
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--qg-accent);
  color: #fff;
  font-weight: 700;
}

.qg-cr-pay strong {
  display: block;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--qg-text);
}

.qg-cr-pay span {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--qg-text-body);
}

.qg-cr-job__apply {
  display: flex;
  margin-top: 28px;
}

.qg-cr-job__apply .qg-btn {
  width: 100%;
  justify-content: center;
}

.qg-cr-job__about {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--qg-line);
}

.qg-cr-job__about h2 {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--qg-text);
}

.qg-cr-job__about p,
.qg-cr-job__about li {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--qg-text-body);
}

.qg-home .qg-cr-job__about ul {
  margin: 10px 0 0;
  padding-left: 1.6em;
  list-style: disc;
}

.qg-home .qg-cr-job__about li {
  display: list-item;
  list-style: disc outside;
  padding-left: 0.35em;
}

.qg-cr-job__about li + li {
  margin-top: 4px;
}

.qg-cr-note {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--qg-text-muted);
}

.qg-cr-note strong {
  color: var(--qg-text-body);
}

/* Bands */
.qg-career .qg-cr-band--tint {
  background: var(--qg-surface-2);
  border-block: 1px solid var(--qg-line);
}

.qg-cr-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.qg-cr-points .qg-tile p {
  margin: 8px 0 0;
}

.qg-career .qg-cr-tracks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.qg-cr-track {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px;
  background: var(--qg-surface);
  border: 1px solid var(--qg-line);
  border-radius: var(--qg-r-card);
}

.qg-cr-track .qg-eyebrow {
  margin: 0;
}

.qg-cr-track h3 {
  margin: 0;
}

.qg-cr-track p {
  margin: 0;
  color: var(--qg-text-body);
  line-height: 1.55;
}

.qg-cr-role__terms {
  margin-top: auto;
  font-weight: 600;
  color: var(--qg-text);
  letter-spacing: -0.01em;
}

.qg-cr-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
  gap: 28px;
  align-items: start;
}

.qg-cr-duties {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.qg-cr-duties li {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.qg-cr-duties strong {
  display: block;
  margin-bottom: 2px;
  color: var(--qg-text);
}

.qg-cr-duties p {
  margin: 0;
  color: var(--qg-text-body);
  line-height: 1.5;
}

.qg-cr-comp {
  padding: 22px;
  border-radius: var(--qg-r-card);
  background: var(--qg-abyss);
  color: #fff;
}

.qg-cr-comp .qg-eyebrow,
.qg-cr-comp h3,
.qg-cr-comp p,
.qg-cr-comp li {
  color: #fff;
}

.qg-cr-comp .qg-eyebrow {
  color: var(--qg-gold);
}

.qg-cr-comp h3 {
  margin: 8px 0 8px;
  font-family: var(--qg-font-display);
  font-size: 2rem;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.qg-cr-comp p {
  margin: 0 0 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
}

.qg-cr-portal-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.qg-cr-portal-actions .qg-btn {
  width: 100%;
  justify-content: center;
}

.qg-cr-comp ul {
  margin: 0;
  padding-left: 18px;
  color: rgba(255, 255, 255, 0.86);
  list-style: disc;
}

.qg-cr-comp li {
  list-style: disc;
}

.qg-cr-comp li + li {
  margin-top: 6px;
}

.qg-cr-form,
.qg-cr-success {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.qg-cr-form[hidden],
.qg-cr-success {
  display: none;
}

.qg-cr-success.is-on {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.qg-cr-success__mark {
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--qg-pos-soft);
  color: var(--qg-pos);
}

.qg-cr-success h3 {
  margin: 0 0 6px;
}

.qg-cr-success p {
  margin: 0;
  color: var(--qg-text-muted);
}

.qg-cr-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--qg-text);
}

.qg-cr-field input,
.qg-cr-field select,
.qg-cr-field textarea {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 15px;
  color: var(--qg-text);
  background: var(--qg-surface);
  border: 1px solid var(--qg-line-strong);
  border-radius: var(--qg-r-ctl);
  padding: 12px 14px;
}

.qg-cr-field textarea {
  min-height: 120px;
  resize: vertical;
}

.qg-cr-field input:focus,
.qg-cr-field select:focus,
.qg-cr-field textarea:focus {
  outline: 2px solid var(--qg-accent);
  outline-offset: 1px;
  border-color: var(--qg-accent);
}

.qg-cr-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.qg-cr-file {
  position: relative;
}

.qg-cr-file input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.qg-cr-file__btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: var(--qg-r-ctl);
  border: 1px dashed var(--qg-line-strong);
  background: var(--qg-surface-2);
  color: var(--qg-text-body);
  font-size: 14.5px;
  cursor: pointer;
}

.qg-cr-file__btn i {
  color: var(--qg-accent);
}

.qg-cr-file__btn.is-set {
  border-style: solid;
  color: var(--qg-text);
  background: var(--qg-surface);
}

.qg-cr-hint {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--qg-text-muted);
}

.qg-cr-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--qg-text-body);
}

.qg-cr-check input {
  margin-top: 3px;
  flex: none;
  accent-color: var(--qg-accent);
}

.qg-cr-form .qg-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.qg-cr-msg {
  min-height: 1.2em;
  margin: 0;
  font-size: 13.5px;
  color: var(--qg-neg);
}

.qg-cr-msg.is-ok {
  color: var(--qg-pos);
}

.qg-cr-fine {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--qg-text-muted);
}

.qg-cr-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 1080px) {
  .qg-cr-points,
  .qg-cr-tracks,
  .qg-cr-split,
  .qg-cr-row {
    grid-template-columns: 1fr;
  }

  .qg-cr-comp h3 {
    font-size: 1.7rem;
  }
}
