/* ============================================================
   FPGAjobs — listing layout.

   Structure, not colour: the geometry of a listing row and the list it sits
   in. Loaded before the skin, so a skin can override anything here, and every
   skin gets the same density without redefining it.

   The split matters. "What should the site look like" and "how many postings
   fit on a screen" turned out to be different questions with different
   answers — four skins were tried and every one of them showed the same one
   and a half postings above the fold, because the card, not the palette, was
   what filled the screen. Density is defined once, here.

   The measurement this was written against: a 1280x1080 window on the home
   page showed **1 posting** fully visible, with the first one starting 763px
   down the page.
   ============================================================ */

/* === THE LIST ===
   A plain block, deliberately not a Bootstrap `.row`. Each posting used to be
   wrapped in one, which is a flex container with negative margins and gutters
   — three mechanisms acting on a stack of single items, and the gutters were
   part of what made the stack tall. */
.job-list {
  display: flex;
  flex-direction: column;
}

/* A date's worth of postings. The grouping was already computed in
   `index.html` and thrown away; a listing whose whole promise is freshness
   should say where today ends. One line, and the only chrome in the list. */
.job-list-day {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0;
  padding: 0.85rem 0.5rem 0.3rem;
}
.job-list-day:first-child { padding-top: 0.25rem; }

/* === A ROW ===
   Six facts, six columns, one line — at `lg`. Below that the columns cannot
   all fit, so the row folds into three lines and the columns that survive are
   the ones that identify the posting.

   `align-items: center` and a fixed logo size are what keep the rows on a
   rhythm: a listing you can scan is one where the eye can predict where the
   next title will be. */
.job-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "logo title age"
    "logo meta  meta"
    "logo tags  tags";
  column-gap: 0.7rem;
  row-gap: 0.2rem;
  align-items: center;
  padding: 0.55rem 0.5rem;
  border-bottom: 1px solid transparent;   /* the skin supplies the colour */
}

.job-row-logo {
  grid-area: logo;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  object-fit: contain;
  border-radius: 5px;
  align-self: start;
  margin-top: 0.15rem;
}

/* The stand-in when an employer has no artwork: their initial, set in a tile
   the same size as a logo so the column stays a column. Colour is the skin's. */
.job-row-monogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  user-select: none;
}

.job-row-title {
  grid-area: title;
  margin: 0;
  min-width: 0;
  font-size: 0.95rem;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.01em;
  /* Not truncated. A long title wraps to a second line and makes that one row
     taller, which is worth more than a clipped one — the title is the fact a
     reader is deciding on, and `Senior FPGA/Emulation Validation Enginee…` is
     a row they have to open to understand. */
  overflow-wrap: anywhere;
}

.job-row-meta {
  grid-area: meta;
  display: flex;
  gap: 0.6rem;
  min-width: 0;
  font-size: 0.82rem;
}

.job-row-co,
.job-row-loc {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-row-tags {
  grid-area: tags;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  min-width: 0;
}

.job-row-age {
  grid-area: age;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  justify-content: flex-end;
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.job-row-flag {
  display: inline-block;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.12rem 0.35rem;
  margin-right: 0.4rem;
  border-radius: 3px;
  vertical-align: 0.08em;
  white-space: nowrap;
}

/* === ONE LINE ===
   At `lg` the wrapper around employer and place stops existing as a box and
   its two children become grid items in their own right, so they can sit in
   separate columns here and on one line on a phone without being written
   twice. */
@media (min-width: 992px) {
  .job-row {
    /* Fixed widths for every column but the title, and that is the whole
       point of them. Each row is its own grid — fifty grids, not one — so a
       track sized `auto` or `fr` is measured against that row's own content
       and lands somewhere different on the next one. The first version used
       `fr` throughout and the employer column wandered by fifty pixels down
       the page: a list you cannot read down a column of is a list with no
       advantage over the cards it replaced.

       Only the title flexes, because it is the one field whose length varies
       by a factor of five and the one a reader is actually reading. */
    grid-template-columns:
      32px              /* logo    */
      minmax(0, 1fr)    /* title   */
      11rem             /* company */
      13rem             /* place   */
      12rem             /* tags    */
      3rem;             /* age     */
    grid-template-areas: "logo title co loc tags age";
    row-gap: 0;
    padding: 0.4rem 0.5rem;
  }

  .job-row-meta { display: contents; }
  .job-row-co  { grid-area: co; font-size: 0.85rem; }
  .job-row-loc { grid-area: loc; font-size: 0.85rem; }

  .job-row-title {
    font-size: 0.98rem;
    /* Two lines at most on a wide screen, where a title long enough to need a
       third is a title with a department and a location in it. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .job-row-tags { flex-wrap: nowrap; justify-content: flex-end; }
}

/* === PAGINATION ===
   The listing's own footer, not a section of the page. */
.job-list-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 1.25rem;
  margin-top: 0.5rem;
}
.job-list-foot .pagination { margin: 0; }

/* === THE POSTING PAGE ===
   Untouched by all of this on purpose — a posting is read, not scanned, and
   the page that shows one was not the problem. */