/* ============================================================
   WORKFLOWS — every ready-made workflow at once, straight after the hero.

   The cards are the picker component that also appears further down the
   page (js/process-picker.js builds them), but here they stand in a grid on
   the section's own ground instead of sliding three at a time inside a box.
   The section's claim is breadth, so all of them are on the table: one
   glance says "these are the jobs", and any card opens into its process.
   Everything below is scoped to .wfi .wfi-pick so the carousel copy further
   down keeps its own behaviour.
   ============================================================ */

.wfi {
    padding: 96px 0 88px;
    background: var(--cream);
    /* the same hairline every ruled section on the page draws at its top edge */
    border-top: 1px solid var(--line);
}
.wfi .sec-eyebrow { color: var(--brand-magenta); }
.wfi .sec-title { margin-bottom: 0; }

/* The picker's own section padding assumes it is standing alone on a page. */
.wfi .wfi-pick { padding: 0; margin-top: 56px; }
.wfi .wfi-pick .pl-viewport { overflow: visible; margin: 0; padding: 0; }
.wfi .wfi-pick .pl-track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    transform: none;
}

/* --- one card ------------------------------------------------------------ */
.wfi .wfi-pick .pl-card {
    flex: none; width: auto; min-height: 0;
    display: flex; flex-direction: column;
    padding: 22px 22px 20px;
    border: 1px solid #D8D0CD;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(22, 18, 26, 0.04), 0 14px 32px -28px rgba(22, 18, 26, 0.18);
    opacity: 1;
    transform: none;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.28s ease;
}
.wfi .wfi-pick .pl-card:hover,
.wfi .wfi-pick .pl-card:focus-visible {
    border-color: var(--ink);
    transform: translateY(-3px);
    box-shadow: 0 1px 2px rgba(22, 18, 26, 0.05), 0 26px 48px -30px rgba(22, 18, 26, 0.28);
}

/* the head: the tinted mark on the left, the department on the right */
.wfi .wfi-pick .pl-vis {
    flex: none; min-height: 0;
    flex-direction: row; align-items: center; justify-content: space-between; gap: 12px;
    padding: 0; border: 0; border-radius: 0; background: none; overflow: visible;
}
.wfi .wfi-pick .pl-ico {
    width: 48px; height: 48px; border-radius: 14px;
    background: #FBFAFE; border: 1px solid #ECE8F3; box-shadow: none;
}
.wfi .wfi-pick .pl-ico svg { width: 24px; height: 24px; }
.wfi .wfi-pick .pl-ico-tag {
    padding: 5px 9px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--cream);
    font-size: 0.625rem; letter-spacing: 0.09em; color: #6B6472;
}

/* the body: title and blurb, then a ruled foot with the trigger on the left
   and the open link on the right. The two halves draw the rule between them
   so it reads as one line across the card. */
.wfi .wfi-pick .pl-card-body {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr auto;
    column-gap: 0;
    padding-top: 18px;
}
.wfi .wfi-pick .pl-card-title { grid-column: 1 / -1; font-size: 1.125rem; }
.wfi .wfi-pick .pl-card-desc { grid-column: 1 / -1; margin-top: 6px; }
.wfi .wfi-pick .pl-card-trig {
    grid-column: 1; align-self: stretch; min-width: 0;
    display: flex; align-items: center;
    margin: 18px 0 0; padding-top: 14px;
    border-top: 1px solid #EFEDF3;
}
.wfi .wfi-pick .pl-trig-label { display: none; }
.wfi .wfi-pick .pl-trig-row { min-width: 0; }
.wfi .wfi-pick .pl-trig-row b { white-space: nowrap; }
.wfi .wfi-pick .pl-trig-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The open control is a round arrow rather than a label: the whole card is
   the button and says so in its aria-label, and a label here would fight the
   trigger for the width of the foot. The words stay in the DOM at zero size. */
.wfi .wfi-pick .pl-card-cta {
    grid-column: 2; align-self: stretch;
    display: flex; align-items: center;
    margin: 18px 0 0; padding: 14px 0 0 12px;
    border-top: 1px solid #EFEDF3; border-bottom: 0;
    opacity: 1; transform: none; font-size: 0; line-height: 0;
}
.wfi .wfi-pick .pl-card-cta::after {
    content: "\2192";
    display: grid; place-items: center;
    width: 30px; height: 30px; border-radius: 999px;
    border: 1px solid var(--line); background: #fff; color: var(--ink);
    font-size: 0.9375rem; line-height: 1; font-weight: 500;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.wfi .wfi-pick .pl-card:hover .pl-card-cta::after,
.wfi .wfi-pick .pl-card:focus-visible .pl-card-cta::after {
    background: var(--ink); border-color: var(--ink); color: #fff;
}

/* the last card is the invitation: it lies across two columns, so the
   eight cards fill three rows exactly, and it reads left to right */
.wfi .wfi-pick .pl-card.is-custom {
    grid-column: span 2;
    flex-direction: row; align-items: center; gap: 22px;
    border-style: dashed; border-color: #E0C6E0; background: #FFFCFF;
}
.wfi .wfi-pick .pl-vis-custom { flex: none; justify-content: flex-start; gap: 0; }
.wfi .wfi-pick .pl-vis-plus { width: 48px; height: 48px; border-radius: 14px; }
.wfi .wfi-pick .pl-vis-hint { display: none; }
.wfi .wfi-pick .is-custom .pl-card-body { padding-top: 0; align-content: center; grid-template-rows: auto auto; column-gap: 22px; }
.wfi .wfi-pick .is-custom .pl-card-title { grid-column: 1; }
.wfi .wfi-pick .is-custom .pl-card-desc { grid-column: 1; }
.wfi .wfi-pick .is-custom .pl-card-cta { grid-column: 2; grid-row: 1 / -1; align-self: center; margin: 0; padding: 0; border-top: 0; }

/* the note under the grid */
.wfi .wfi-pick .pl-note { margin-top: 30px; }

/* --- opening a card: the grid fades, the process page takes the stage --- */
.wfi .wfi-pick.is-open .pl-detail { opacity: 1; transform: none; pointer-events: auto; }
.wfi .wfi-pick.is-open .pl-slider { opacity: 0; transform: scale(1.02); pointer-events: none; }

/* The cards do not rise in: the picker driver (js/process-picker.js) still
   stages the carousel copies further down the page, and this grid ignores
   those cues so every card is on the table from the first frame. */
.wfi .wfi-pick.js-anim .pl-card,
.wfi .wfi-pick.is-in .pl-card { opacity: 1; transform: none; transition-delay: 0s; }

@media (max-width: 980px) {
    .wfi .wfi-pick .pl-track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .wfi .wfi-pick .pl-card.is-custom { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    .wfi { padding: 64px 0 60px; }
    .wfi .wfi-pick { margin-top: 40px; }
    .wfi .wfi-pick .pl-track { grid-template-columns: minmax(0, 1fr); }
    .wfi .wfi-pick .pl-card { padding: 18px 18px 16px; border-radius: 16px; }
    .wfi .wfi-pick .pl-card.is-custom { flex-direction: column; align-items: stretch; gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .wfi .wfi-pick .pl-card,
    .wfi .wfi-pick.is-in .pl-card { transition: none; }
    .wfi .wfi-pick .pl-card:hover { transform: none; }
}