/* Employer chapters pair company identities with their role history. */
.experience-section { container: experience / inline-size; }
.experience-intro { margin-bottom: 0; }
.experience-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.experience-heading > span { flex: none; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }

.career-group, .career-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.15fr); gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.career-item:last-child { padding-bottom: 0; border-bottom: 0; }
.employer-header { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.employer-copy { min-width: 0; }
.employer-header h3 { margin: 2px 0 0; font-size: 16px; line-height: 1.5; letter-spacing: -.2px; text-wrap: pretty; }
.employer-header p { margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.employer-header .career-tenure { margin-top: 6px; font-variant-numeric: tabular-nums; }
.employer-header .career-tenure + p { margin-top: 3px; }
.employer-header .career-context { max-width: 28ch; margin-top: 16px; font-size: 13px; line-height: 1.75; }
/* A white backing preserves the artwork's original colors in both themes. */
.employer-logo { position: relative; display: grid; place-items: center; flex: none; width: 52px; height: 52px; overflow: hidden; border: 1px solid #e3e7ef; border-radius: 7px; background: #fff; }
.employer-logo img { display: block; width: 36px; height: 36px; object-fit: contain; }
.employer-logo--mbc img { position: absolute; top: 50%; left: 50%; width: 88px; height: 88px; max-width: none; transform: translate(-50%, -50%); }
.employer-logo--dewa img { object-fit: cover; object-position: right center; }
.employer-logo--infosys img { width: 44px; }

.career-roles, .career-item-copy { min-width: 0; padding-left: 24px; border-left: 1px solid var(--line); }
.career-role, .career-item-copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(160px, auto); column-gap: 18px; row-gap: 4px; align-content: start; }
.career-role + .career-role { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.experience-section .role-top { display: contents; }
.experience-section h4 { grid-column: 1; grid-row: 1 / 3; min-width: 0; margin: 0; font: 600 15px/1.5 Manrope, Arial, sans-serif; letter-spacing: -.1px; text-wrap: pretty; }
.career-role:first-child h4 { color: var(--purple); }
.role-specialty { display: block; margin-top: 3px; color: var(--muted); font: 400 12.5px/1.6 Roboto, Arial, sans-serif; letter-spacing: 0; }
.experience-section .role-date { grid-column: 2; grid-row: 1; align-self: start; padding-top: 2px; color: var(--text); font-size: 12px; line-height: 1.7; text-align: right; }
.experience-section .role-location { grid-column: 2; grid-row: 2; align-self: start; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; text-align: right; }
.experience-section .tags { grid-column: 1 / -1; grid-row: 3; margin: 7px 0 0; gap: 6px; }
.experience-section .tags li { padding: 5px 9px; border: 0; border-radius: var(--radius-chip); background: var(--tag); color: var(--muted); font-size: 12px; line-height: 1.5; }

@container experience (max-width: 900px) {
  .career-group, .career-item { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 20px; }
  .career-roles, .career-item-copy { padding-left: 20px; }
  .career-role, .career-item-copy { column-gap: 14px; grid-template-columns: minmax(0, 1fr) minmax(140px, auto); }
}

@container experience (max-width: 700px) {
  .experience-heading { display: block; }
  .experience-heading > span { display: block; margin-top: 10px; }
  .career-group, .career-item { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .career-roles, .career-item-copy { padding-left: 0; border-left: 0; }
}

@container experience (max-width: 480px) {
  .career-group, .career-item { padding-top: 24px; padding-bottom: 24px; }
  .career-role, .career-item-copy { display: flex; flex-direction: column; gap: 5px; }
  .experience-section h4 { order: 2; }
  .experience-section .role-date { order: 1; padding: 0; text-align: left; color: var(--muted); }
  .experience-section .role-location { order: 3; text-align: left; }
  .experience-section .tags { order: 4; margin-top: 7px; }
}