/* =============================================================================
   Module: jobs  (modules/jobs.php)
   -----------------------------------------------------------------------------
   The open positions, as a numbered chain of wide rows separated by hairlines.
   The number sits left, the title and its one line in the middle, the control
   right; on hover the row fills from the left, which is the same gesture as
   .button--quiet, the Diagnostik tiles, .link-cards__card and .link-underline,
   because a thing filling from the left means the same everywhere on this site.

   The fill is an ELEMENT and not a pseudo-element for the same reason as in
   those: the words have to sit over it.

   TWO STATES, and the second one is the exception:

     without a script  the panel is open where it stands and the control is not
                       there at all - a posting is readable, findable and
                       printable with nothing running
     with one          the panel is closed and the control opens it in the
                       site-wide overlay (assets/js/modules/modal.js)

   Which is why the rule at the foot of this file keys off html:not(.js), the
   same way assets/css/modules/accordion.css does.
   ============================================================================= */

/* The head sits ABOVE the chain and not beside it: a row is as wide as the
   container, and a headline in a column next to it would leave the job titles
   nowhere to break. */
.jobs__head {
    margin-block-end: var(--space-2xl);
}

.jobs {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;

    /* The first row needs the line above it as much as the ones below need
       theirs: the chain has to read as a set, not as a heading plus a list. */
    border-block-start: var(--border-width) solid var(--color-line);
}

.jobs__item {
    border-block-end: var(--border-width) solid var(--color-line);
}

/* --- The row ---------------------------------------------------------------- */

.jobs__row {
    position: relative;
    display: grid;
    align-items: baseline;
    gap: var(--space-xs) var(--space-lg);
    padding-block: var(--space-lg);
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        'number body'
        '.      open';
}

/* From 768px the control moves out of the flow of the text and onto the end of
   the row, where the arrow points. Below that width it would leave the title a
   column too narrow to set two words in. */
@media (min-width: 768px) {
    .jobs__row {
        align-items: center;
        gap: var(--space-xl);
        padding-block: var(--space-xl);
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: 'number body open';
    }
}

.jobs__number {
    grid-area: number;
    margin: 0;
    color: var(--color-accent);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);

    /* Two digits, so the titles line up whether the number is 01 or 11. */
    font-variant-numeric: tabular-nums;
}

.jobs__body {
    grid-area: body;
}

.jobs__title {
    margin: 0;
    color: var(--color-heading);
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-heading);
}

.jobs__teaser {
    margin: 0;
    margin-block-start: var(--space-2xs);
    max-width: var(--measure);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
}

/* --- The control -------------------------------------------------------------
   Hidden until assets/js/modules/modal.js reveals it: without a script the
   panel below is already open and there would be nothing for it to do.
   -------------------------------------------------------------------------- */

.jobs__open {
    grid-area: open;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    min-height: 44px;
    padding-inline: var(--space-lg);
    border: var(--border-width) solid var(--color-line-strong);
    border-radius: var(--radius-pill);
    background-color: transparent;
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    white-space: nowrap;
    transition: background-color var(--transition-base), color var(--transition-base),
                border-color var(--transition-base);
}

@media (min-width: 768px) {
    .jobs__open {
        justify-self: end;
    }
}

.jobs__open[hidden] {
    display: none;
}

.jobs__arrow {
    flex: none;
    transition: transform var(--transition-base);
}

/* The whole row is the hover surface, not just the control: the control is
   where the pointer ends up, but the title is what it is aimed at. */
.jobs__row:hover .jobs__open,
.jobs__open:focus-visible {
    border-color: var(--color-accent);
    background-color: var(--color-accent);
    color: var(--color-primary);
}

.jobs__row:hover .jobs__arrow,
.jobs__open:focus-visible .jobs__arrow {
    transform: translateX(0.25rem);
}

/* --- The description ---------------------------------------------------------
   Inside the overlay it is ordinary .prose; the only thing this module has to
   say about it is what it looks like on the page itself, with no script.
   -------------------------------------------------------------------------- */

.jobs__apply {
    margin-block-start: var(--space-lg);
}

/* THE NO-SCRIPT STATE. `hidden` is what the modal toggles, so the panel carries
   it in the markup; this puts it back on the page for a visitor whose browser
   never runs assets/js/modules/modal.js. More specific than the browser's own
   [hidden] rule, which is all it has to beat. */
html:not(.js) .jobs__panel[hidden] {
    display: block;
    margin-block-end: var(--space-xl);
}

/* Opened in place, the row directly above it already carries the title. In the
   overlay - which only exists when a script runs - the panel stands on its own
   and keeps it. */
html:not(.js) .jobs__panel[hidden] > .jobs__panel-title {
    display: none;
}