/* career.css: styles for the career section only. Use tokens from base.css; prefix every class with .career-. See work/DESIGN.md.

   Anatomy
   .career-group   one group (Career, Education, Skills): a hairline across the
                   container, its label in the rail and its list in main.
   .career-entry   one <li>: period, role, organisation, description.
                   phone / md: stacked.  lg: period, role and organisation on
                   the left of main; the description beside them on the right.
   .career-photos  up to two photos after a group's entries, set off
                   by a hairline like one more row of the record: one above the
                   other on phones, side by side from tablet up.
   Every group, entry, photo, the skills block and the résumé link can be
   deleted on its own. */

.career-body { row-gap: 0; }
.career-group + .career-group { margin-top: var(--space-xl); }

/* Group: a hairline across the container, mirroring the section head. */
.career-group {
  row-gap: var(--space-m);
  padding-top: var(--space-s);
  border-top: var(--border-hair);
}

/* Entries: separated by hairlines across the main column only. */
.career-entry { padding-block: var(--space-m); }
.career-entry:first-child { padding-top: 0; }
.career-entry:last-child { padding-bottom: 0; }
.career-entry + .career-entry { border-top: var(--border-hair); }

.career-entry__role { margin-top: var(--space-2xs); }
.career-entry__org { margin-top: var(--space-3xs); }
.career-entry__desc {
  margin-top: var(--space-s);
  max-width: var(--measure);
}

/* Compact rows (Education): no description. Phones: the qualification, then
   the school with the date at the right, on two short lines. */
.career-list--compact .career-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--space-s);
  padding-block: var(--space-s);
}
.career-list--compact .career-entry:first-child { padding-top: 0; }
.career-list--compact .career-entry:last-child { padding-bottom: 0; }
.career-list--compact .career-entry__role { grid-column: 1 / -1; grid-row: 1; margin-top: 0; }
.career-list--compact .career-entry__org { grid-column: 1; grid-row: 2; margin-top: var(--space-3xs); }
.career-list--compact .career-entry__period {
  grid-column: 2;
  grid-row: 2;
  margin-top: var(--space-3xs);
  text-align: right;
}

/* Photos: a composed, formal treatment for the record: in full colour,
   square to the grid, a crisp ink keyline just outside the image, and a
   numbered caption like a plate in a report. */
.career-photos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-l) var(--grid-gap);
  align-items: start;
  padding-top: var(--space-m);
  border-top: var(--border-hair);
  counter-reset: career-photo;
}
.career-photo {
  margin: 0;
  counter-increment: career-photo;
  /* --shape is the photo's width divided by its height (1.5 = a 3:2 landscape).
     Side by side, each photo's width follows its shape, so they share one height. */
  --shape: 1.5;
}
.career-photo__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--shape);
  object-fit: cover;
  background-color: var(--surface);
  outline: 1px solid var(--text);
  outline-offset: var(--space-3xs);
}
.career-photo__caption {
  display: flex;
  gap: var(--space-xs);
  align-items: baseline;
  margin-top: var(--space-s); /* clears the keyline */
  font-family: var(--font-sans);
  font-size: var(--step--1);
  line-height: 1.45;
  color: var(--text-muted);
}
.career-photo__caption::before {
  content: counter(career-photo, decimal-leading-zero);
  flex: none;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--label);
}

/* Crop positions: these frame the current photos' faces; change or delete
   them if you swap a photo. */
.career-photo--first .career-photo__img { object-position: 50% 66%; }  /* faces sit low in the photo */
.career-photo--second { --shape: 0.62; } /* an upright photo, shown whole (1116 x 1800) */
.career-photo--second .career-photo__img { object-position: 50% 50%; }
/* Phones, where the photos stack: an upright photo at full width would be very tall. */
.career-photo--second { width: 62%; }

.career-resume { grid-column: main; margin-top: var(--space-l); }

@media (min-width: 48em) {
  .career-group { row-gap: 0; }
  /* The label stays in view beside a long list, below the sticky header. */
  .career-group__title {
    grid-column: rail;
    align-self: start;
    position: sticky;
    top: calc(var(--header-height) + var(--space-m));
  }
  .career-list,
  .career-tags,
  .career-photos { grid-column: main; }

  /* Compact rows on tablets: the date, then the qualification with the
     school beneath it, in columns shared by every row (a subgrid). */
  .career-list--compact {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--grid-gap);
  }
  .career-list--compact .career-entry {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    grid-template-rows: auto;
    align-items: baseline;
  }
  .career-list--compact .career-entry__period { grid-column: 1; grid-row: 1; margin-top: 0; text-align: left; }
  .career-list--compact .career-entry__role { grid-column: 2; grid-row: 1; }
  .career-list--compact .career-entry__org { grid-column: 2; grid-row: 2; }
  /* Side by side at one shared height: each photo's width is in proportion to its shape. */
  .career-photos {
    display: flex;
    margin-top: var(--space-m);
  }
  .career-photo { flex: var(--shape) 1 0; min-width: 0; }
  .career-photo--second { width: auto; }
}

@media (min-width: 64em) {

  /* Compact rows on wide screens: date, qualification and school on one
     line. Schools line up just after the longest qualification, which wraps
     first if space runs out. */
  .career-list--compact { grid-template-columns: auto auto minmax(max-content, 1fr); }
  .career-list--compact .career-entry__org { grid-column: 3; grid-row: 1; margin-top: 0; }

  /* Nine columns matching the page grid, so the description starts on a
     page column line (column 8). */
  .career-entry {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    grid-template-rows: auto auto auto 1fr; /* the last row absorbs a long description */
    column-gap: var(--grid-gap);
  }
  .career-entry > * { grid-column: 1 / 5; }
  .career-entry__desc {
    grid-column: 5 / 10;
    grid-row: 2 / -1;
    margin-top: var(--space-s); /* first line sits on the role's baseline */
  }
}