/* ============================================================================
   MTL STUDENTS · Direction A « Nuit » · page Emplois
   ----------------------------------------------------------------------------
   Loaded after nuit.css. Nothing in nuit.css is touched: every rule here is
   either a new page-scoped component (.emp-*) or a narrow, declared override.

   The brief for this page is unusual. There is exactly one real listing, and
   the live /jobs-2 still ships Wix's demo taxonomy over it. So the design
   problem is not "how do we lay out a list", it is "how does one honest row
   look finished". The answer used here: give the single offer the weight of a
   card rather than a table row, keep the count and the empty state visibly
   truthful, and let the filters actually run.
   ========================================================================== */

/* [hidden] is how the filter script hides things, and every .emp-* block below
   sets an explicit display. Without this the attribute would lose the
   specificity tie against its own class and quietly do nothing. */
[hidden] { display: none !important; }

/* nuit.css's .btn never declares a background. That is invisible on the home
   page, where every ghost button is an <a>. This page has two ghost buttons
   that must be <button> (reset, and the one in the empty state), and a
   <button> without a declared background paints itself with the UA's
   buttonface: a solid light pill with cream text on it, i.e. unreadable.
   Scoped to --ghost so the pink .btn--primary submit is untouched.
   Promotion candidate for nuit.css: `.btn { background: transparent }`. */
button.btn--ghost { background: transparent; }

/* ----------------------------------------------------------------- hero -- */

/* The board starts immediately under the title, so the hero gives back the
   bottom half of its padding. */
.emp-hero { padding-bottom: clamp(1.5rem, 3vw, 3rem); }
.emp-hero .hero__grid { align-items: end; }

/* ---------------------------------------------------------------- board -- */

.emp-board {
  background: var(--ink-2);
  padding-block: clamp(3rem, 7vw, 6rem) clamp(4rem, 9vw, 8.5rem);
}
.emp-board__h { margin-top: 1rem; }

/* ------------------------------------------------------------- controls -- */

/* Search takes the wide column because it is the only control that can reach
   every field of the record. The two selects are equal and secondary.
   minmax(0, …) on all three: a long option label must not be able to push the
   grid past its container. */
.emp-tools {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 1rem clamp(1rem, 2.5vw, 2rem);
  align-items: end;
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
  padding-bottom: clamp(1.25rem, 3vw, 1.75rem);
  border-bottom: 1px solid var(--cream-14);
}

.emp-field { display: grid; gap: .5rem; min-width: 0; }
.emp-field label {
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cream-45);
}

/* Same underline language as the newsletter field in nuit.css, so the two
   forms on this page read as one system. */
.emp-field input,
.emp-field select {
  width: 100%;
  min-width: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(247, 240, 232, .3);
  border-radius: 0;
  color: var(--cream);
  font: inherit;
  font-size: 1rem;
  padding: .7rem .2rem;
  transition: border-color .25s var(--ease);
}
.emp-field input::placeholder { color: var(--cream-45); }
.emp-field input:hover,
.emp-field select:hover { border-bottom-color: var(--cream-70); }
.emp-field input:focus,
.emp-field select:focus { border-bottom-color: var(--gold); outline: none; }

/* Chrome paints a light native menu over a dark page unless it is told the
   page is dark; the arrow is ours because the native one is not. */
.emp-field select {
  color-scheme: dark;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 1.75rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23F8D870' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .35rem center;
}
/* Safari refuses to inherit page colours into the option list. */
.emp-field option { background: var(--ink-2); color: var(--cream); }

/* Search fields get a UA clear button that is invisible on a dark ground. */
.emp-field input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 14px; height: 14px;
  cursor: pointer;
  background: currentColor;
  opacity: .45;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M3 3l8 8M11 3l-8 8' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M3 3l8 8M11 3l-8 8' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.emp-field input[type="search"]:hover::-webkit-search-cancel-button { opacity: 1; }

.emp-reset { padding-block: .75em; white-space: nowrap; }

.emp-note {
  margin-top: 1rem;
  font-size: .75rem;
  line-height: 1.6;
  color: var(--cream-45);
  max-width: 66ch;
  border-left: 2px solid var(--orange);
  padding-left: .85rem;
}

/* ----------------------------------------------------------- count line -- */

/* Their own line, with the grammar fixed and the number wired to the filters.
   On the live site this number is a static "1" printed under a dropdown of
   ice-cream flavours. */
.emp-status { margin-top: clamp(1.75rem, 4vw, 2.5rem); }
.emp-count {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cream-45);
}
.emp-count b {
  font-family: var(--display);
  font-variation-settings: 'wdth' 118;
  font-size: 1.25rem;
  color: var(--gold);
  letter-spacing: 0;
  margin-left: .15em;
  vertical-align: -.08em;
}

/* --------------------------------------------------------------- listing -- */

.emp-list { display: grid; gap: 1rem; margin-top: 1.25rem; }

/* One listing, so it gets the weight of the event card on the home page
   rather than the weight of a table row. The oxblood gradient is the same
   component language as .event__card, on purpose. */
.emp-job {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.35rem, 3vw, 2.25rem);
  background: linear-gradient(160deg, var(--oxblood) 0%, var(--ink-3) 76%);
  border: 1px solid var(--cream-14);
  border-radius: 6px;
  transition: border-color .35s var(--ease);
}
.emp-job:hover { border-color: rgba(248, 96, 192, .4); }

.emp-job__rail { border-right: 1px solid var(--cream-14); padding-right: 1rem; }
.emp-job__num {
  display: block;
  font-family: var(--quote);
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
  line-height: .9;
  color: var(--orange);
}
.emp-job__rank {
  display: block;
  margin-top: .4rem;
  font-size: .5625rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cream-45);
}

.emp-job__org {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}
.emp-job__title {
  font-family: var(--display);
  font-variation-settings: 'wdth' 110;
  font-weight: 700;
  font-size: clamp(1.4rem, 1.1rem + 1.5vw, 2.5rem);
  line-height: 1.04;
  letter-spacing: -.02em;
  margin-block: .5rem .55rem;
  overflow-wrap: break-word;
  text-wrap: balance;
}
.emp-job__loc { color: var(--cream-70); font-size: .9375rem; }

.emp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
}
.emp-tag {
  padding: .38em .85em;
  border: 1px solid var(--cream-14);
  border-radius: 999px;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cream-70);
  background: rgba(18, 16, 15, .35);
}
/* The live listing does not state a job type anywhere, and we do not invent
   one. The gap is shown rather than filled. */
.emp-tag--todo {
  color: var(--cream-45);
  border-style: dashed;
  background: none;
  text-transform: none;
  letter-spacing: .04em;
  font-weight: 500;
}

/* ---------------------------------------------------------------- détails -- */

/* Native <details>: their "Détails" action keeps working with scripting off,
   which is the whole rule of this page in miniature. */
.emp-det { margin-top: 1.5rem; }
.emp-det summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.emp-det summary::-webkit-details-marker { display: none; }
.emp-det summary::marker { content: ''; }
/* nuit.css styles :focus-visible for a, button and input but not summary. */
.emp-det summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.emp-det summary svg { transition: rotate .3s var(--ease); }
.emp-det[open] summary svg { rotate: 180deg; }

.emp-det__in {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--cream-14);
}
.emp-det__dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 1.25rem;
  margin: 0 0 1.5rem;
}
.emp-det__dl dt {
  font-size: .625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cream-45);
}
.emp-det__dl dd { margin: .3rem 0 0; font-weight: 600; font-size: 1rem; }
.emp-det__todo { color: var(--cream-45); font-weight: 500 !important; font-style: italic; }

.emp-det__ph {
  max-width: 60ch;
  margin-bottom: 1.5rem;
  color: var(--cream-45);
  font-size: .9375rem;
}
.emp-det__ph b { color: var(--cream-70); font-weight: 600; }

/* ------------------------------------------------------------ empty state -- */

/* A one-row board empties on almost any filter, so the empty state is a
   designed screen and not an afterthought: it says what happened, and it
   gives back a way out and a way to be told about the next offer. */
.emp-empty {
  margin-top: 1.25rem;
  padding: clamp(2rem, 6vw, 3.5rem) clamp(1.25rem, 4vw, 3rem);
  border: 1px dashed var(--cream-14);
  border-radius: 6px;
  background: var(--ink-3);
  text-align: center;
}
.emp-empty__t {
  font-family: var(--display);
  font-variation-settings: 'wdth' 112;
  font-weight: 700;
  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.85rem);
  letter-spacing: -.015em;
}
.emp-empty__d {
  margin: .75rem auto 1.5rem;
  max-width: 46ch;
  color: var(--cream-45);
  font-size: .9375rem;
}

/* --------------------------------------------------------------- l'aveu -- */

.emp-aside {
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-left: clamp(1rem, 3vw, 1.75rem);
  border-left: 2px solid var(--pink);
  font-family: var(--quote);
  font-style: italic;
  font-size: clamp(1.05rem, .95rem + .6vw, 1.5rem);
  line-height: 1.35;
  color: var(--cream-70);
  max-width: 54ch;
  text-wrap: pretty;
}

/* ---------------------------------------------------------- employeurs -- */

.emp-hire { padding-block: clamp(4rem, 9vw, 8rem); }
.emp-hire__grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 900px) {
  .emp-tools { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .emp-field--q { grid-column: 1 / -1; }
  .emp-reset { grid-column: 1 / -1; justify-self: start; }
  .emp-hire__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .emp-tools { grid-template-columns: minmax(0, 1fr); }

  /* The numeral rail becomes a horizontal strip: keeping the 5rem column at
     390px would leave the job title about 200px wide. */
  .emp-job { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .emp-job__rail {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    border-right: 0;
    padding-right: 0;
    border-bottom: 1px solid var(--cream-14);
    padding-bottom: .75rem;
  }
  .emp-job__num { font-size: 2rem; }
  .emp-job__rank { margin-top: 0; }
  .emp-det summary { width: 100%; justify-content: center; }
}