/* Company directory — aligned with portal glass theme (candidate + public) */

.employer-directory .visually-hidden,
.employer-dir-filters .visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.employer-directory {
    --ed-ink: var(--ss-ink, var(--ss-rail-bg-solid));
    --ed-muted: var(--ss-muted, #717b74);
    --ed-line: var(--ss-border-light, #dfdcd3);
    --ed-accent: var(--ss-primary, var(--ss-primary));
    --ed-sticky-top: 16px;
    --ed-pane-height: calc(100dvh - 32px);
    color: var(--ed-ink);
}

.employer-directory-shell {
    padding-bottom: 64px;
}

.employer-directory-section {
    margin-top: 1.5rem !important;
}

.employer-directory__hero {
    margin-bottom: 22px;
}

.employer-directory__search-card {
    position: relative;
    z-index: 1;
    margin-bottom: 22px;
}

.employer-directory__search.portal-search-hero__form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.employer-directory__chips {
    margin-bottom: 20px;
}

.employer-directory__layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(250px, 290px) minmax(0, 1fr);
    column-gap: 18px;
    row-gap: 12px;
    align-items: start;
}

.employer-directory__filters-col,
.employer-directory__results {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.employer-directory__col-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    box-sizing: border-box;
    min-height: 3.25rem;
    height: 3.25rem;
    margin: 0;
    overflow: visible;
    background: transparent;
    z-index: 2;
}

.employer-dir-filters__title,
.employer-dir-filters__title.portal-card__title {
    margin: 0 !important;
    line-height: 1.2 !important;
}

.employer-directory__sort-form {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    margin: 0;
    min-width: 0;
}

.employer-directory__sort.form-select,
.employer-directory__sort {
    display: inline-block;
    box-sizing: border-box;
    width: auto;
    min-width: 12.5rem;
    height: 2.5rem !important;
    min-height: 2.5rem !important;
    max-height: none !important;
    margin: 0;
    padding: 0.4rem 2.4rem 0.4rem 0.9rem !important;
    border: 1px solid var(--ed-line);
    border-radius: 999px;
    background-color: #fff;
    color: var(--ed-ink);
    font-size: 0.88rem !important;
    line-height: 1.35 !important;
    overflow: visible;
    vertical-align: middle;
    appearance: none;
    -webkit-appearance: none;
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 12px 8px;
}

.employer-dir-filters {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
    padding: 18px 20px !important;
    margin: 0;
}

.employer-dir-filters__clear {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ed-accent);
    text-decoration: none;
    white-space: nowrap;
}

.employer-dir-filters__clear:hover {
    text-decoration: underline;
}

.employer-dir-filter-group {
    border-bottom: 1px solid var(--ed-line);
    padding: 10px 0;
}

.employer-dir-filter-group:first-child {
    padding-top: 0;
}

.employer-dir-filter-group:last-of-type {
    border-bottom: 0;
    padding-bottom: 0;
}

.employer-dir-filter-group__title {
    list-style: none;
    cursor: pointer;
    font-size: 0.84rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ed-muted);
    margin-bottom: 10px;
}

.employer-dir-filter-group__title::-webkit-details-marker {
    display: none;
}

.employer-dir-filter-group__body {
    display: grid;
    gap: 8px;
}

.employer-dir-filter-search {
    min-height: 38px !important;
    font-size: 0.84rem !important;
}

.employer-dir-filter-options {
    display: grid;
    gap: 6px;
    padding-right: 2px;
}

.employer-dir-filter-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    align-items: start;
    font-size: 0.84rem;
    color: var(--ed-ink);
    cursor: pointer;
    line-height: 1.35;
    margin: 0;
}

.employer-dir-filter-option input {
    margin-top: 3px;
    accent-color: var(--ed-accent);
}

.employer-dir-filter-option__label {
    min-width: 0;
    word-break: break-word;
}

.employer-dir-filter-option__count {
    color: var(--ed-muted);
    white-space: nowrap;
    font-size: 0.78rem;
}

.employer-dir-filters__apply {
    width: 100%;
    margin-top: 12px;
    flex: 0 0 auto;
}

.employer-dir-filters__form {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
}

.employer-dir-filters__scroll {
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
    padding-right: 0;
}

.employer-directory__count {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.2;
    color: var(--ed-ink) !important;
    font-weight: 650;
}

.employer-directory__results-scroll {
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
    padding-right: 0;
}

.employer-directory__list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    width: 100%;
}

.employer-dir-filters__scroll::-webkit-scrollbar {
    width: 8px;
}

.employer-dir-filters__scroll::-webkit-scrollbar-thumb {
    background: rgba(23, 33, 29, 0.22);
    border-radius: 999px;
}

.employer-dir-filters__scroll::-webkit-scrollbar-track {
    background: transparent;
}

/* Company cards reuse portal-job-card; minor tweaks only */
.portal-company-card .portal-job-card__row {
    align-items: flex-start;
}

.portal-company-card .portal-company-logo--job {
    margin-top: 2px;
}

.portal-company-card__star {
    color: var(--ss-warning);
}

.portal-company-card .portal-job-card__actions {
    align-self: center;
}

/* ─── Portal workspace (candidate / employer) ───────────────────────────── */

body.portal-body .employer-directory {
    --ed-ink: var(--p2-ink, var(--ss-rail-bg-solid));
    --ed-muted: var(--p2-muted, var(--ss-muted));
    --ed-line: var(--p2-line, var(--ss-border));
    --ed-accent: var(--p2-coral, var(--ss-primary));
    --ed-sticky-top: 96px;
    --ed-pane-height: calc(100dvh - 112px);
}

body.portal-body .employer-directory__col-head {
    background: color-mix(in srgb, var(--ss-bg-body) 96%, transparent);
}

body.portal-body .employer-directory--embedded .portal-page-header {
    margin-bottom: 22px;
}

body.portal-body .employer-directory__search-card {
    border-color: var(--p2-line) !important;
    background: rgba(255,255,255,0.92) !important;
    box-shadow: var(--p2-shadow, 0 18px 44px rgba(30, 40, 34, 0.1)) !important;
}

body.portal-body .employer-dir-filters {
    border-color: var(--p2-line) !important;
    background: rgba(255,255,255,0.92) !important;
    box-shadow: var(--p2-shadow, 0 18px 44px rgba(30, 40, 34, 0.1)) !important;
}

body.portal-body .employer-directory__chips .portal-category-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body.portal-body .employer-directory__chips .portal-category-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--p2-line);
    border-radius: 999px;
    background: rgba(255,255,255,0.92);
    color: var(--p2-ink);
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 700;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

body.portal-body .employer-directory__chips .portal-category-chip.is-active,
body.portal-body .employer-directory__chips .portal-category-chip:hover {
    border-color: #f0b7aa;
    background: #fff0ec;
    transform: translateY(-1px);
}

body.portal-body .employer-directory__chips .portal-category-chip__count {
    display: inline-grid;
    place-items: center;
    min-width: 1.4rem;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--ss-primary-soft);
    color: var(--ss-primary-deep);
    font-size: 0.68rem;
    font-weight: 850;
}

body.portal-body .portal-company-card {
    align-items: flex-start;
    flex-wrap: nowrap;
}

body.portal-body .portal-company-card .portal-job-card__row {
    flex: 1 1 auto;
    min-width: 0;
}

body.portal-body .portal-company-card .portal-job-card__body {
    min-width: 0;
}

body.portal-body .portal-company-card .portal-job-card__title a {
    display: block;
    overflow-wrap: anywhere;
}

body.portal-body .portal-company-card .portal-job-card__skills {
    margin-top: 10px;
}

body.portal-body .portal-company-card .portal-job-card__actions {
    flex: 0 0 auto;
    align-self: center;
    padding-left: 8px;
}

/* ─── Public employers page (wider grid optional) ───────────────────────── */

.employer-directory:not(.employer-directory--embedded) .employer-directory__list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.employer-directory:not(.employer-directory--embedded) .portal-company-card {
    height: 100%;
    flex-direction: column;
    align-items: stretch;
}

.employer-directory:not(.employer-directory--embedded) .portal-company-card .portal-job-card__actions {
    align-self: stretch;
    margin-top: 12px;
    padding-left: 0;
}

@media (max-width: 1080px) {
    .employer-directory__layout {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .employer-directory__filters-col,
    .employer-directory__results {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .employer-directory__col-head {
        height: auto;
        min-height: 3.25rem;
        flex-wrap: wrap;
    }

    .employer-dir-filters {
        max-height: none;
        overflow: visible;
        flex: none;
    }

    .employer-dir-filters__form,
    .employer-dir-filters__scroll,
    .employer-directory__results-scroll {
        flex: none;
        max-height: none;
        overflow: visible;
    }
}

@media (max-width: 720px) {
    .employer-directory__search.portal-search-hero__form {
        grid-template-columns: 1fr;
    }

    body.portal-body .portal-company-card {
        flex-direction: column;
        align-items: stretch;
    }

    body.portal-body .portal-company-card .portal-job-card__actions {
        align-self: stretch;
        padding-left: 0;
        margin-top: 12px;
    }

    body.portal-body .portal-company-card .portal-job-card__actions .portal-btn {
        width: 100%;
        justify-content: center;
    }
}

a.portal-job-card.portal-company-card {
    display: flex;
    text-decoration: none;
    color: inherit;
}

a.portal-job-card.portal-company-card:focus-visible {
    outline: 2px solid var(--ed-accent);
    outline-offset: 3px;
}

.portal-job-card__title .portal-badge {
    margin-left: 0.45rem;
    font-size: 0.7rem;
    vertical-align: middle;
}

.employer-directory__sort {
    min-width: 12.5rem;
}

.employer-dir-filter-hint {
    margin: 0 0 8px;
    color: var(--ed-muted);
    font-size: 0.75rem;
    line-height: 1.4;
}

.employer-dir-salary {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.salary-slider {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 2px 0 6px;
}

.salary-slider__readout {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.salary-slider__value {
    margin: 0;
    color: var(--ed-ink);
    font-size: 1.12rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.2;
}

.salary-slider__hint {
    margin: 0;
    color: var(--ed-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-align: right;
}

.salary-slider__input {
    --salary-track: 8px;
    --salary-thumb: 22px;
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: var(--salary-thumb);
    margin: 6px 0;
    padding: 0;
    border: 0;
    background: transparent;
    outline: none;
    cursor: pointer;
}

.salary-slider__input::-webkit-slider-runnable-track {
    height: var(--salary-track);
    border-radius: 999px;
    background: linear-gradient(
        to right,
        var(--ed-accent) 0 var(--salary-pct, 0%),
        #e8e4da var(--salary-pct, 0%) 100%
    );
}

.salary-slider__input::-moz-range-track {
    height: var(--salary-track);
    border: 0;
    border-radius: 999px;
    background: linear-gradient(
        to right,
        var(--ed-accent) 0 var(--salary-pct, 0%),
        #e8e4da var(--salary-pct, 0%) 100%
    );
}

.salary-slider__input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: var(--salary-thumb);
    height: var(--salary-thumb);
    margin-top: calc((var(--salary-track) - var(--salary-thumb)) / 2);
    border: 3px solid var(--ed-accent);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(23, 33, 29, 0.18);
    cursor: grab;
}

.salary-slider__input::-moz-range-thumb {
    box-sizing: border-box;
    width: var(--salary-thumb);
    height: var(--salary-thumb);
    border: 3px solid var(--ed-accent);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(23, 33, 29, 0.18);
    cursor: grab;
}

.salary-slider__input:focus-visible {
    outline: 2px solid var(--ed-accent);
    outline-offset: 4px;
}

.salary-slider__scale {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: var(--ed-muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.employer-dir-filter-option:focus-within {
    outline: 2px solid var(--ed-accent);
    outline-offset: 2px;
    border-radius: 8px;
}

.employer-directory__filters-summary {
    display: none;
    cursor: pointer;
    list-style: none;
    font-weight: 700;
    padding: 10px 12px;
    border: 1px solid var(--ed-line);
    border-radius: 12px;
    background: #fff;
}

.employer-directory__filters-summary::-webkit-details-marker {
    display: none;
}

.employer-directory__results.is-loading {
    position: relative;
    pointer-events: none;
}

.employer-directory__results.is-loading::after {
    content: "Updating results";
    position: absolute;
    top: 0.45rem;
    right: 0;
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ed-ink);
    background: color-mix(in srgb, var(--ss-bg-body) 96%, transparent);
    border: 1px solid var(--ed-line);
    border-radius: 999px;
    z-index: 3;
}

.employer-directory__search--jobs.portal-search-hero__form {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) auto;
}

.employer-directory__results .portal-job-card,
.employer-directory__results .portal-company-card {
    min-width: 0;
    overflow: visible;
}

.employer-directory__results .portal-job-card__title,
.employer-directory__results .portal-job-card__title a,
.employer-directory__results .portal-job-card__meta,
.employer-directory__results .portal-job-card__eyebrow {
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
}

.employer-directory__results .portal-btn {
    overflow: visible;
    text-overflow: unset;
    white-space: nowrap;
    overflow-wrap: normal;
}

@media (max-width: 1080px) {
    .employer-directory__filters-summary {
        display: block;
        margin-bottom: 10px;
    }

    .employer-directory__filters-toggle {
        min-width: 0;
    }
}

@media (max-width: 720px) {
    .employer-directory__search--jobs.portal-search-hero__form {
        grid-template-columns: 1fr;
    }

    .employer-directory,
    .employer-directory__layout,
    .employer-dir-filters,
    .employer-directory__results {
        max-width: 100%;
        overflow-x: clip;
    }

    .employer-directory__results .portal-job-list .portal-job-card {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .employer-directory__results .portal-job-list .portal-job-card__row,
    .employer-directory__results .portal-job-list .portal-job-card__body {
        width: 100%;
        min-width: 0;
    }

    .employer-directory__results .portal-job-list .portal-job-card__actions {
        display: flex;
        flex-wrap: wrap;
        align-self: stretch;
        width: 100%;
        gap: 10px;
        margin-top: 2px;
        padding-left: 0;
    }

    .employer-directory__results .portal-job-list .portal-job-card__actions .portal-btn {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        white-space: nowrap;
    }

    .employer-directory__col-head {
        height: auto;
        min-height: 0;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 8px;
    }

    .employer-directory__sort-form,
    .employer-directory__sort,
    .employer-directory__sort.form-select {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .salary-slider__readout {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .salary-slider__hint {
        text-align: left;
    }
}
/* ─── Jobs / Companies mode switch ───────────────────────────────────────── */

/* Heading block stacks: intro copy on top, the mode switch centred beneath it. */
.directory-head--stacked {
    display: block !important;
    text-align: center;
}

.directory-head--stacked .directory-head__intro {
    max-width: 720px;
    margin: 0 auto;
}

/* Full-width centring track for the two wide mode buttons. */
.directory-mode-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
    min-width: 0;
    margin: 22px 0 24px;
}

.directory-mode {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    width: 100%;
    max-width: 560px;
    padding: 6px;
    border: 1px solid var(--ed-line);
    border-radius: 14px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 2px 10px rgba(13, 17, 23, .04);
}

/* Font colour is forced with !important so later template/theme sheets
   (tpl-overrides, sunstack-ui-v3, red-accent) cannot recolour the labels —
   that is what made the active label merge into its own coral background. */
.directory-mode__tab {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 24px;
    border-radius: 10px;
    color: #3d4742 !important;
    font-family: Inter, "Segoe UI", Arial, sans-serif !important;
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}

.directory-mode__tab:hover {
    color: #17201e !important;
    background: var(--ss-primary-soft, #fff0ec) !important;
}

.directory-mode__tab.is-active,
.directory-mode__tab.is-active:hover {
    background: var(--ed-accent) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px var(--ss-primary-glow, rgba(212, 42, 31, .28));
}

.directory-mode__tab:focus-visible {
    outline: 2px solid var(--ed-accent);
    outline-offset: 2px;
}

/* ─── Job search card (Jobs tab) ─────────────────────────────────────────── */

/* Wide, centred search card — mirrors the hero search bar: a single rounded
   pill spanning the content column, split into keyword / location / button. */
.job-search-card.portal-search-hero,
.job-search-card {
    width: min(100%, 1080px);
    margin: 0 auto 26px;
    padding: 8px !important;
    border: 1px solid var(--ed-line) !important;
    border-radius: 999px !important;
    background: #fff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 12px 34px rgba(13, 17, 23, .08);
}

.job-search-form {
    display: block;
    margin: 0;
}

/* Balanced search bar: two equal fields split by a hairline, then the button. */
.job-search-form__fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0;
}

.job-search-field {
    display: flex;
    align-items: center;
    min-width: 0;
    margin: 0;
    padding: 0 26px;
}

.job-search-field input {
    width: 100%;
    min-width: 0;
    height: 54px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent !important;
    color: var(--ed-ink) !important;
    font-family: Inter, "Segoe UI", Arial, sans-serif !important;
    font-size: .98rem;
    font-weight: 500;
    -webkit-appearance: none;
    appearance: none;
}

.job-search-field input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.job-search-field input::placeholder {
    color: var(--ss-placeholder, #98a2b3) !important;
    font-weight: 500;
    opacity: 1;
}

.job-search-form__divider {
    width: 1px;
    height: 32px;
    background: var(--ed-line);
}

.job-search-form__submit {
    min-height: 50px;
    margin: 2px;
    padding: 0 40px !important;
    border-radius: 999px !important;
    color: #fff !important;
    white-space: nowrap;
}

.job-search-card__clear {
    padding: 0 16px 8px;
    font-size: .84rem;
    text-align: center;
}

/* ─── Job results grid (Jobs tab) ────────────────────────────────────────── */

/* The Jobs tab has no filter column, so the results occupy the full width and
   the cards sit side by side in a responsive grid. */
.employer-directory__layout--full {
    grid-template-columns: minmax(0, 1fr) !important;
}

.job-result-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
    align-items: stretch;
    width: 100%;
    min-width: 0;
}

.job-result-grid > .portal-job-card:not(.portal-job-card--listing) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    height: 100%;
    min-width: 0;
    margin: 0;
    padding: 20px;
}

/* The directory listing card keeps its own layout inside this wrapper. It is a
   flex COLUMN (head row + body) exactly like it is in `.portal-job-list`, so
   the same rules apply on /jobs/search as on /jobs. Without the `:not(...)`
   guard the flex rule above won the cascade and collapsed the card back into a
   single column, which is what overlapped the company name and the metadata.
   It must NOT be set to `display: grid` here: the card's children are a flex
   head row plus a body, and a grid container with inherited `grid-template-*
   tracks laid them out in an unintended 2-up arrangement that pushed the
   Apply button outside the card. */
.job-result-grid > .portal-job-card--listing {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* 12px, matching the card's own row rhythm in `.portal-job-list`, so the
       Jobs tab and the Companies tab space their rows identically. */
    gap: 12px;
    height: 100%;
    min-width: 0;
}

.job-result-grid .portal-job-card__row {
    flex: 1 1 auto;
    min-width: 0;
    align-items: flex-start;
}

.job-result-grid .portal-job-card:not(.portal-job-card--listing) .portal-job-card__body {
    flex: 1 1 auto;
    min-width: 0;
}

.job-result-grid .portal-job-card__title {
    margin: 4px 0 6px;
    font-size: 1.02rem;
    line-height: 1.3;
}

.job-result-grid .portal-job-card__title a {
    overflow-wrap: anywhere;
}

.job-result-grid .portal-job-card:not(.portal-job-card--listing) .portal-job-card__meta {
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.job-result-grid .portal-job-card:not(.portal-job-card--listing) .portal-job-card__actions {
    display: flex;
    gap: 10px;
    align-self: stretch;
    width: 100%;
    margin-top: auto;
    padding-top: 16px;
}

.job-result-grid .portal-job-card:not(.portal-job-card--listing) .portal-job-card__actions .portal-btn {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
}

/* On /jobs/search the cards sit in `.job-result-grid`, not `.portal-job-list`,
   so the red Apply Now / Save styling (scoped to `.portal-job-card--listing`
   under `.portal-job-list`) never reached them and the primary button rendered
   as a bare white `.portal-btn`. These rules give the grid variant the same
   button treatment. */
.job-result-grid .portal-job-card--listing .portal-job-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    max-width: 100%;
    min-width: 0;
}

.job-result-grid .portal-job-card--listing .portal-job-card__actions .portal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 22px !important;
    border-radius: 12px !important;
    font-size: .9375rem !important;
    font-weight: 700 !important;
    white-space: nowrap;
    flex: 0 0 auto;
    text-decoration: none;
}

.job-result-grid .portal-job-card--listing .portal-job-card__save {
    border: 1px solid var(--fj-line) !important;
    background: var(--fj-card) !important;
    color: var(--fj-body) !important;
    cursor: pointer;
}

.job-result-grid .portal-job-card--listing .portal-job-card__save:hover {
    border-color: var(--fj-blue) !important;
    color: var(--fj-blue) !important;
    background: var(--fj-blue-soft) !important;
}

/* Red primary action, matching the Find Jobs listing card.

   This is deliberately NOT scoped to a container (`.portal-job-list` /
   `.job-result-grid`). The same card renders in both the Companies tab
   (`/jobs`, inside `.portal-job-list`) and the Jobs tab (`/jobs/search`, inside
   `.job-result-grid`); scoping to only one of them is what left the Apply
   button with white text on a transparent background — an invisible white box
   — on the Jobs tab. Keyed off the card class alone, it works in either place. */
.portal-job-card--listing .portal-job-card__actions .portal-btn--primary {
    border: 0 !important;
    background: var(--ss-primary, #e8322f) !important;
    background-image: none !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(232, 50, 47, .26);
}

.portal-job-card--listing .portal-job-card__actions .portal-btn--primary:hover {
    background: #cf2723 !important;
    color: #fff !important;
}

.job-result-grid .portal-job-card--listing .portal-job-card__actions .portal-btn--primary {
    border: 0 !important;
    background: var(--ss-primary, #e8322f) !important;
    background-image: none !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(232, 50, 47, .26);
}

.job-result-grid .portal-job-card--listing .portal-job-card__actions .portal-btn--primary:hover {
    background: #cf2723 !important;
    color: #fff !important;
}

/* The recommendation pill hugs its own text here as well. */
.job-result-grid .portal-job-card--listing .portal-job-card__actions--recommended {
    align-items: flex-end;
}

.job-result-grid .portal-job-card--listing .portal-job-card__recommend {
    position: static;
    align-self: flex-end;
    width: max-content;
    max-width: 100%;
    flex-grow: 0;
}

@media (max-width: 900px) {
    .job-search-card.portal-search-hero,
    .job-search-card {
        border-radius: 22px !important;
    }

    .job-search-form__fields {
        grid-template-columns: 1fr;
        row-gap: 0;
    }

    .job-search-form__divider {
        display: none;
    }

    .job-search-field {
        padding: 0 20px;
        border-bottom: 1px solid var(--ed-line);
    }

    .job-search-form__submit {
        width: calc(100% - 4px);
        margin: 4px 2px 2px;
    }
}

@media (max-width: 720px) {
    .directory-mode {
        max-width: 100%;
    }

    .directory-mode__tab {
        padding: 11px 12px;
    }

    .job-search-card.portal-search-hero,
    .job-search-card {
        width: 100%;
        border-radius: 18px !important;
    }

    .job-result-grid {
        grid-template-columns: 1fr;
    }
}/* ─── Companies directory showcase (Find Jobs → Companies) ───────────────── */

/* Hero: left copy + search, echoing the reference layout. */
.directory-showcase__hero {
    margin-bottom: 20px;
}

.directory-showcase__hero-copy {
    max-width: 720px;
}

.directory-showcase__kicker {
    margin: 0 0 8px;
    color: var(--ed-muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.directory-showcase__title {
    margin: 0 0 10px;
    color: var(--ed-ink);
    font-family: var(--ss-font-display, Inter, "Segoe UI", Arial, sans-serif);
    font-size: clamp(1.9rem, 3.6vw, 2.9rem);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.08;
}

.directory-showcase__title em {
    font-style: normal;
    color: var(--ed-accent);
}

.directory-showcase__lede {
    margin: 0 0 20px;
    color: var(--ed-muted);
    font-size: .98rem;
    line-height: 1.55;
}

/* Wide centred search bar: keyword / location / submit in one rounded pill. */
.directory-showcase__search {
    width: 100%;
}

.directory-showcase__search-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0;
    width: 100%;
    padding: 6px;
    border: 1px solid var(--ed-line);
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(13, 17, 23, .07);
}

.directory-showcase__search-field {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 0 20px;
}

.directory-showcase__search-field input {
    width: 100%;
    min-width: 0;
    height: 46px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ed-ink);
    font-family: inherit;
    font-size: .95rem;
    font-weight: 500;
}

.directory-showcase__search-field input::placeholder {
    color: var(--ss-placeholder, #98a2b3);
    opacity: 1;
}

.directory-showcase__search-field input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.directory-showcase__search-divider {
    width: 1px;
    height: 28px;
    background: var(--ed-line);
}

.directory-showcase__search-submit {
    min-height: 46px;
    padding: 0 28px !important;
    border-radius: 999px !important;
}

.directory-showcase__clear {
    margin-top: 10px;
    padding-left: 8px;
    font-size: .84rem;
}

/* Popular searches chips. */
.directory-showcase__popular {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}

.directory-showcase__popular-label {
    color: var(--ed-muted);
    font-size: .8rem;
    font-weight: 600;
}

.directory-showcase__popular-chip {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 14px;
    border: 1px solid var(--ed-line);
    border-radius: 999px;
    background: #fff;
    color: var(--ed-ink);
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.directory-showcase__popular-chip:hover {
    border-color: var(--ed-accent);
    color: var(--ed-accent);
    background: var(--ss-primary-soft, #fff0ec);
}

/* Category highlights strip. */
.directory-showcase__highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin: 0 0 24px;
}

.directory-showcase__highlight {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid var(--ed-line);
    border-radius: 14px;
    background: #fff;
    color: var(--ed-ink);
    text-decoration: none;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.directory-showcase__highlight:hover,
.directory-showcase__highlight.is-active {
    border-color: var(--ed-accent);
    box-shadow: 0 8px 20px rgba(13, 17, 23, .07);
    transform: translateY(-1px);
}

.directory-showcase__highlight-label {
    font-size: .86rem;
    font-weight: 700;
    line-height: 1.25;
}

.directory-showcase__highlight-count {
    color: var(--ed-muted);
    font-size: .74rem;
    font-weight: 600;
}

/* Three-column showcase layout: filters | results | right rail. */
.employer-directory__layout--showcase {
    grid-template-columns: minmax(230px, 260px) minmax(0, 1fr) minmax(220px, 260px);
}

/* Results read as a vertical stack of full-width cards on this page. */
.employer-directory--showcase .employer-directory__list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.employer-directory--showcase .portal-company-card {
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 14px;
    height: auto;
    padding: 18px 20px;
}

.employer-directory--showcase .portal-company-card .portal-job-card__row {
    flex: 1 1 auto;
    min-width: 0;
}

.employer-directory--showcase .portal-company-card .portal-job-card__actions {
    flex: 0 0 auto;
    align-self: center;
    margin-top: 0;
    padding-left: 0;
}

/* ─── Right rail ─────────────────────────────────────────────────────────── */

.directory-aside {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.directory-aside__card {
    padding: 16px 18px !important;
    margin: 0;
}

.directory-aside__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}

.directory-aside__title {
    margin: 0;
    color: var(--ed-ink);
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: -.01em;
}

.directory-aside__link {
    color: var(--ed-accent);
    font-size: .76rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.directory-aside__link:hover {
    text-decoration: underline;
}

.directory-aside__link--block {
    display: inline-block;
    margin-top: 12px;
}

/* Top hiring company logos. */
.directory-aside__logos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.directory-aside__logo {
    display: grid;
    place-items: center;
    min-height: 46px;
    padding: 6px;
    border: 1px solid var(--ed-line);
    border-radius: 10px;
    background: #fff;
    text-decoration: none;
    overflow: hidden;
}

.directory-aside__logo img {
    max-width: 100%;
    max-height: 32px;
    object-fit: contain;
}

.directory-aside__logo-mark {
    color: var(--ed-muted);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .02em;
}

/* Trending skills tags. */
.directory-aside__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.directory-aside__tag {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 12px;
    border: 1px solid var(--ed-line);
    border-radius: 999px;
    background: #fff;
    color: var(--ed-ink);
    font-size: .75rem;
    font-weight: 600;
}

/* Career resources list. */
.directory-aside__resources {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.directory-aside__resources li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.directory-aside__resource-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 9px;
    background: var(--ss-primary-soft, #fff0ec);
    font-size: .9rem;
}

.directory-aside__resource-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.directory-aside__resource-title {
    color: var(--ed-ink);
    font-size: .83rem;
    font-weight: 700;
    line-height: 1.3;
}

.directory-aside__resource-copy {
    color: var(--ed-muted);
    font-size: .74rem;
    line-height: 1.35;
}

/* "Are You Hiring?" call-out. */
.directory-aside__hiring {
    padding: 18px !important;
    margin: 0;
    text-align: center;
    border: 1px solid rgba(212, 42, 31, .22) !important;
    background: var(--ss-primary-soft, #fff0ec) !important;
}

.directory-aside__hiring-title {
    margin: 0 0 6px;
    color: var(--ed-ink);
    font-size: .98rem;
    font-weight: 800;
}

.directory-aside__hiring-copy {
    margin: 0 0 12px;
    color: var(--ed-muted);
    font-size: .8rem;
    line-height: 1.45;
}

.directory-aside__hiring-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--ed-accent) !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: var(--ed-accent) !important;
    font-weight: 800 !important;
    text-decoration: none !important;
}

.directory-aside__hiring-btn:hover {
    background: var(--ed-accent) !important;
    color: #fff !important;
}

@media (max-width: 1180px) {
    .employer-directory__layout--showcase {
        grid-template-columns: minmax(220px, 250px) minmax(0, 1fr);
    }

    .directory-aside {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .directory-showcase__search-form {
        grid-template-columns: 1fr;
        border-radius: 20px;
        row-gap: 0;
    }

    .directory-showcase__search-divider {
        display: none;
    }

    .directory-showcase__search-field {
        padding: 0 16px;
        border-bottom: 1px solid var(--ed-line);
    }

    .directory-showcase__search-submit {
        width: calc(100% - 4px);
        margin: 6px 2px 2px;
    }

    .employer-directory__layout--showcase {
        grid-template-columns: 1fr;
    }

    .directory-aside {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .directory-showcase__highlights {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    }

    .employer-directory--showcase .portal-company-card {
        flex-direction: column;
        align-items: stretch;
    }

    .employer-directory--showcase .portal-company-card .portal-job-card__actions {
        align-self: stretch;
        margin-top: 12px;
    }

    .employer-directory--showcase .portal-company-card .portal-job-card__actions .portal-btn {
        width: 100%;
        justify-content: center;
    }
}/* ─── Find Jobs → Companies: listing cards + rail behaviours ─────────────── */

/* NOTE: the listing card's own layout lives in the "reference theme" block at
   the bottom of this file (search for `Listing cards`). The legacy flex rules
   that used to sit here were removed because they fought that CSS Grid layout
   (`flex: 1 1 0` on the body and `display: flex` on the card) and produced the
   overlapping company / title / metadata columns. */

.portal-job-card--listing .portal-job-card__title a {
    text-decoration: none;
}

/* ─── Right rail: shared blocks used by the Jobs listing page ────────────── */

.directory-aside__copy {
    margin: 0 0 10px;
    color: var(--ed-muted);
    font-size: .8rem;
    line-height: 1.45;
}

.directory-aside__alert-form {
    display: grid;
    gap: 8px;
    margin: 0;
}

.directory-aside__alert-form input[type="email"] {
    width: 100%;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid var(--ed-line);
    border-radius: 10px;
    background: #fff;
    color: var(--ed-ink);
    font-family: inherit;
    font-size: .84rem;
}

.directory-aside__alert-form input[type="email"]::placeholder {
    color: var(--ss-placeholder, #98a2b3);
}

.directory-aside__alert-form .portal-btn {
    min-height: 42px;
    border-radius: 10px;
    justify-content: center;
}

.directory-aside__tag {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 12px;
    border: 1px solid var(--ed-line);
    border-radius: 999px;
    background: #fff;
    color: var(--ed-ink);
    font-size: .75rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.directory-aside__tag:hover {
    border-color: var(--ed-accent);
    color: var(--ed-accent);
    background: var(--ss-primary-soft, #fff0ec);
}

.directory-aside__resource-icon {
    display: grid;
    place-items: center;
    color: var(--ed-accent);
}

@media (max-width: 1180px) {
    .employer-directory__layout--showcase {
        grid-template-columns: minmax(220px, 250px) minmax(0, 1fr);
    }

    .employer-directory__layout--showcase .directory-aside {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .employer-directory__layout--showcase {
        grid-template-columns: 1fr;
    }

    .employer-directory__layout--showcase .directory-aside {
        grid-template-columns: 1fr;
    }
}/* ═══════════════════════════════════════════════════
   Find Jobs → Companies: reference theme
   Scoped to .employer-directory--showcase so no other directory page changes.
   Palette from the approved reference: blue primary, red secondary accent,
   dark slate ink, warm off-white page background.
   ═══════════════════════════ */

.employer-directory--showcase {
    --fj-blue: #2563eb;
    --fj-blue-dark: #1d4ed8;
    --fj-blue-soft: #eff4ff;
    --fj-red: #e8322f;
    --fj-red-soft: #fdecec;
    --fj-green: #16a34a;
    --fj-green-soft: #e8f7ee;
    --fj-amber-soft: #fef4e6;
    --fj-ink: #0f172a;
    --fj-body: #475569;
    --fj-muted: #64748b;
    --fj-line: #e5e9f0;
    --fj-card: #ffffff;
    --fj-bg: #f7f8fa;
    --fj-radius: 14px;
    --fj-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 24px rgba(15, 23, 42, .05);
    color: var(--fj-body);
}

/* Warm page canvas behind the whole section. */
.portal-public-shell:has(.employer-directory--showcase),
.portal-public-latest:has(.employer-directory--showcase) {
    background: var(--fj-bg, #f7f8fa);
}

.portal-public-latest:has(.employer-directory--showcase) {
    padding-bottom: 48px;
}

/* ─── Hero: two columns, copy left / art right ───────────────────────────── */

.directory-showcase__hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center;
    gap: 32px;
    margin: 4px 0 26px;
}

.directory-showcase__hero-copy {
    max-width: 620px;
}

.directory-showcase__kicker {
    margin: 0 0 10px;
    color: var(--fj-blue);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.directory-showcase__title {
    margin: 0 0 12px;
    color: var(--fj-ink);
    font-family: var(--ss-font-display, Inter, "Segoe UI", Arial, sans-serif);
    font-size: clamp(2rem, 3.6vw, 3rem);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.06;
}

.directory-showcase__title em {
    font-style: normal;
    color: var(--fj-blue);
}

.directory-showcase__lede {
    margin: 0 0 22px;
    color: var(--fj-body);
    font-size: 1rem;
    line-height: 1.6;
}

/* Hero art + floating stat card. */
.directory-showcase__hero-art {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    min-width: 0;
}

.directory-showcase__hero-art > img {
    width: 100%;
    max-width: 460px;
    height: auto;
    object-fit: contain;
}

.directory-showcase__stats {
    position: absolute;
    right: 0;
    bottom: 8px;
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--fj-line);
    border-radius: var(--fj-radius);
    background: var(--fj-card);
    box-shadow: var(--fj-shadow);
}

.directory-showcase__stat {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.directory-showcase__stat-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 9px;
}

.directory-showcase__stat-icon--blue {
    background: var(--fj-blue-soft);
    color: var(--fj-blue);
}

.directory-showcase__stat-icon--red {
    background: var(--fj-red-soft);
    color: var(--fj-red);
}

.directory-showcase__stat-icon--green {
    background: var(--fj-green-soft);
    color: var(--fj-green);
}

.directory-showcase__stat-body {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    white-space: nowrap;
}

.directory-showcase__stat-body strong {
    color: var(--fj-ink);
    font-size: .95rem;
    font-weight: 800;
}

.directory-showcase__stat-body small {
    color: var(--fj-muted);
    font-size: .68rem;
    font-weight: 600;
}

/* ─── Wide centred search pill ───────────────────────────────────────────── */

.directory-showcase__search {
    width: 100%;
    max-width: 720px;
}

.directory-showcase__search-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0;
    width: 100%;
    padding: 6px;
    border: 1px solid var(--fj-line);
    border-radius: 999px;
    background: var(--fj-card);
    box-shadow: var(--fj-shadow);
}

.directory-showcase__search-field {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 0 18px;
}

.directory-showcase__search-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: var(--fj-muted);
}

.directory-showcase__search-field:focus-within .directory-showcase__search-icon {
    color: var(--fj-blue);
}

.directory-showcase__search-field input {
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--fj-ink);
    font-family: inherit;
    font-size: .93rem;
    font-weight: 500;
}

.directory-showcase__search-field input::placeholder {
    color: var(--fj-muted);
    opacity: 1;
}

.directory-showcase__search-field input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.directory-showcase__search-divider {
    width: 1px;
    height: 26px;
    background: var(--fj-line);
}

.directory-showcase__search-submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 26px !important;
    border: 0;
    border-radius: 999px !important;
    background: var(--fj-blue) !important;
    color: #fff !important;
    font-size: .9rem !important;
    font-weight: 700 !important;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(37, 99, 235, .28);
    transition: background .2s ease, transform .2s ease;
}

.directory-showcase__search-submit:hover {
    background: var(--fj-blue-dark) !important;
    transform: translateY(-1px);
}

.directory-showcase__clear {
    margin-top: 10px;
    padding-left: 8px;
    font-size: .84rem;
}

/* ─── Popular searches ───────────────────────────────────────────────────── */

.directory-showcase__popular {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}

.directory-showcase__popular-label {
    color: var(--fj-muted);
    font-size: .8rem;
    font-weight: 600;
}

.directory-showcase__popular-chip {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 14px;
    border: 1px solid var(--fj-line);
    border-radius: 999px;
    background: var(--fj-card);
    color: var(--fj-body);
    font-size: .78rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.directory-showcase__popular-chip:hover {
    border-color: var(--fj-blue);
    color: var(--fj-blue);
    background: var(--fj-blue-soft);
}

/* ─── Category tiles ─────────────────────────────────────────────────────── */

.directory-showcase__highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 12px;
    margin: 0 0 26px;
    padding: 16px !important;
    border: 1px solid var(--fj-line);
    border-radius: var(--fj-radius);
    background: var(--fj-card);
    box-shadow: var(--fj-shadow);
}

.directory-showcase__highlight {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 10px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: var(--fj-body);
    text-align: center;
    text-decoration: none;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.directory-showcase__highlight:hover,
.directory-showcase__highlight.is-active {
    border-color: var(--fj-blue);
    background: var(--fj-blue-soft);
    color: var(--fj-blue);
    transform: translateY(-2px);
}

.directory-showcase__highlight-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--fj-blue-soft);
    color: var(--fj-blue);
}

.directory-showcase__highlight:nth-child(2n) .directory-showcase__highlight-icon {
    background: var(--fj-red-soft);
    color: var(--fj-red);
}

.directory-showcase__highlight:nth-child(3n) .directory-showcase__highlight-icon {
    background: var(--fj-amber-soft);
    color: #d97706;
}

.directory-showcase__highlight:nth-child(4n) .directory-showcase__highlight-icon {
    background: var(--fj-green-soft);
    color: var(--fj-green);
}

.directory-showcase__highlight-label {
    color: var(--fj-ink);
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.3;
}

.directory-showcase__highlight.is-active .directory-showcase__highlight-label,
.directory-showcase__highlight:hover .directory-showcase__highlight-label {
    color: var(--fj-blue);
}

/* ─── Mode switch (Jobs / Companies) on this page ────────────────────────── */

.employer-directory--showcase .directory-mode-wrap {
    justify-content: flex-start;
    margin: 0 0 18px;
}

.employer-directory--showcase .directory-mode {
    max-width: 320px;
    border-color: var(--fj-line);
    border-radius: 999px;
    background: var(--fj-card);
}

.employer-directory--showcase .directory-mode__tab {
    min-height: 40px;
    padding: 9px 20px;
    border-radius: 999px;
    color: var(--fj-body) !important;
    font-size: .86rem;
}

.employer-directory--showcase .directory-mode__tab.is-active,
.employer-directory--showcase .directory-mode__tab.is-active:hover {
    background: var(--fj-blue) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    box-shadow: 0 6px 16px rgba(37, 99, 235, .26);
}

/* ─── Filters column ─────────────────────────────────────────────────────── */

.employer-directory--showcase .employer-directory__col-head {
    background: transparent;
}

.employer-directory--showcase .employer-dir-filters__title {
    color: var(--fj-ink);
    font-size: .95rem;
    font-weight: 800;
}

.employer-directory--showcase .employer-dir-filters {
    border: 1px solid var(--fj-line) !important;
    border-radius: var(--fj-radius) !important;
    background: var(--fj-card) !important;
    box-shadow: var(--fj-shadow);
}

.employer-directory--showcase .employer-dir-filter-group {
    border-bottom-color: var(--fj-line);
}

.employer-directory--showcase .employer-dir-filter-group__title {
    color: var(--fj-ink);
    font-size: .74rem;
    letter-spacing: .06em;
}

.employer-directory--showcase .employer-dir-filter-option {
    color: var(--fj-body);
    font-size: .83rem;
}

.employer-directory--showcase .employer-dir-filter-option input {
    accent-color: var(--fj-blue);
}

.employer-directory--showcase .employer-dir-filter-option__count {
    color: var(--fj-muted);
}

.employer-directory--showcase .employer-dir-filter-search {
    border-color: var(--fj-line) !important;
    border-radius: 9px !important;
    font-size: .82rem !important;
}

.employer-directory--showcase .employer-dir-filters__clear {
    color: var(--fj-blue);
}

/* ─── Results header ─────────────────────────────────────────────────────── */

.employer-directory--showcase .employer-directory__count {
    color: var(--fj-ink) !important;
    font-size: 1rem;
    font-weight: 700;
}

.employer-directory--showcase .employer-directory__sort.form-select,
.employer-directory--showcase .employer-directory__sort {
    border-color: var(--fj-line);
    background-color: var(--fj-card);
    color: var(--fj-body);
}

/* ─── Listing cards ──────────────────────────────────────────────────────── */

.employer-directory--showcase .portal-job-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.portal-job-card--listing {
    position: relative;
    /* The card is a flex COLUMN of two rows:

         .portal-job-card__head    -> identity (left) + actions (right)
         .portal-job-card__body    -> title, metadata, skills

       Each row is its own flex container, so there are no shared grid tracks
       for an outside `!important` rule to hijack. This replaces the previous
       named-area grid, which the shared public-shell / glass-panel rules were
       able to override, pushing the Apply button outside the card. */
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
    /* `border-box` keeps the padding inside the 100% width; without it a
       padded card can measure wider than its column and the right-hand
       controls overflow past the card edge. */
    box-sizing: border-box;
    /* The card is a flex item in `.portal-job-list`; never let it grow past
       the results column. */
    max-width: 100%;
    min-width: 0;
    padding: 24px;
    margin: 0 !important;
    border: 1px solid var(--fj-line) !important;
    border-radius: 20px !important;
    background: var(--fj-card) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    /* The glass-panel treatment sets `overflow: visible`; the card must clip
       instead so nothing can paint outside its rounded border. */
    overflow: hidden;
}

.portal-job-card--listing:hover {
    border-color: #c7d6f7 !important;
    box-shadow: 0 2px 4px rgba(15, 23, 42, .05), 0 16px 40px rgba(15, 23, 42, .1);
    transform: translateY(-2px);
}

/* ── Row 1: identity on the left, actions on the right ──────────────────── */
.portal-job-card--listing .portal-job-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* `wrap` is the safety valve: if the results column is too narrow to hold
       the company name and the two controls side by side, the actions drop
       onto their own line instead of overflowing the card. */
    flex-wrap: wrap;
    gap: 12px 24px;
    width: 100%;
    min-width: 0;
}

/* ── Top-left: identity (logo + company name) ───────────────────────────── */
.portal-job-card--listing .portal-job-card__identity {
    display: flex;
    align-items: center;
    gap: 16px;
    /* Absorb the free space so the actions are pushed to the right edge. */
    flex: 1 1 auto;
    min-width: 0;
}

.portal-job-card--listing .portal-job-card__identity-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
}

/* Keep the logo vertically centred against the company name. */
.portal-job-card--listing .portal-company-logo--job {
    align-self: center;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border: 1px solid var(--fj-line);
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
}

.portal-job-card--listing .portal-job-card__eyebrow {
    margin: 0;
    color: var(--fj-ink);
    /* 1rem, the same size as the vacancy-count label beside it. The two share
       one line, so they only read as a single line while they match. */
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.01em;
    /* Wrap naturally onto a second line. `line-clamp` is deliberately NOT
       used: it truncates with an ellipsis as soon as the text needs a second
       line, which clipped names like "Nashik Engineering Works". */
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
}

.portal-job-card--listing .portal-job-card__eyebrow a {
    color: inherit;
    text-decoration: none;
}

.portal-job-card--listing .portal-job-card__eyebrow a:hover {
    color: var(--fj-blue);
}

/* "Highly Recommended" is a short fixed phrase: it sizes to its own text. */
.portal-job-card--listing .portal-job-card__recommend {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* `max-content` (not a percentage or `fit-content`) is what keeps the pill
       shrink-wrapped no matter which flex/grid parent it lands in. */
    width: max-content;
    max-width: 100%;
    align-self: flex-end;
    flex-grow: 0;
    min-height: 20px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--fj-blue) !important;
    color: #fff !important;
    font-size: .68rem;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Job title leads the card ───────────────────────────────────────────── */
/* The markup emits the job title as its own `__body` row ABOVE the head row,
   so the title is the first thing on the card. This rule comes after the
   `__body` rule below on purpose: it re-declares only `gap` and `width`, so the
   shared column flex layout is never duplicated here. */
.portal-job-card--listing .portal-job-card__body--lead {
    gap: 0;
    width: 100%;
}

/* ── Bottom: metadata + skills ──────────────────────────────────────────── */
.portal-job-card--listing .portal-job-card__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Full width of the card: the detail content sits directly beneath the
       company name and is never offset into a second column. */
    width: 100%;
    min-width: 0;
    padding: 0;
}

.portal-job-card--listing .portal-job-card__title {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.01em;
}

.portal-job-card--listing .portal-job-card__title a {
    color: var(--fj-ink);
    text-decoration: none;
    overflow-wrap: break-word;
    word-break: normal;
}

.portal-job-card--listing .portal-job-card__title a:hover {
    color: var(--fj-blue);
}

/* Metadata renders as a wrapping flex row of self-contained items. Every item
   keeps its icon and label together, so no icon or symbol is ever left
   orphaned on a line of its own. */
.portal-job-card--listing .portal-job-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--fj-body);
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1.5;
}

.portal-job-card--listing .portal-job-card__meta-item {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
}

.portal-job-card--listing .portal-job-card__meta-part {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
    /* Icon + label stay together on one line. Only the salary pill is allowed
       to wrap (handled below and at the mobile breakpoint). */
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
}

.portal-job-card--listing .portal-job-card__meta-part svg {
    flex-shrink: 0;
    color: var(--fj-muted);
}

.portal-job-card--listing .portal-job-card__meta-text {
    min-width: 0;
    overflow-wrap: break-word;
    word-break: normal;
}

/* Salary carries more weight than the other metadata. */
.portal-job-card--listing .portal-job-card__meta-value--salary {
    color: var(--fj-ink);
    font-weight: 600;
}

.portal-job-card--listing .portal-job-card__meta-value--salary .portal-job-card__meta-text {
    white-space: nowrap;
}

/* Skill tags: one row, wrapping only when the card is too narrow. */
.portal-job-card--listing .portal-job-card__skills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.portal-job-card--listing .portal-badge,
.portal-job-card--listing .portal-badge--neutral {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 4px 14px;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--fj-blue-soft) !important;
    color: var(--fj-blue) !important;
    font-size: .84375rem !important;
    font-weight: 500 !important;
    white-space: nowrap;
    text-decoration: none;
}

/* ── Top-right: actions ─────────────────────────────────────────────────── */
/* Save and Apply Now sit on the right of the head row, vertically level with
   the company name and flush with the card's inner right edge. */
.portal-job-card--listing .portal-job-card__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    /* `0 1 auto` lets the group shrink before it would overflow, and
       `margin-left: auto` keeps it pinned right even if `__identity` cannot
       absorb the space. */
    flex: 0 1 auto;
    margin-left: auto;
    width: auto;
    max-width: 100%;
    min-width: 0;
    padding: 0;
}

/* The badge is taken out of flow so Save / Apply stay on the title's line.
   It paints in the card's top padding, right-aligned above those buttons. */
.portal-job-card--listing.portal-job-card--recommended {
    padding-top: 32px;
}

.portal-job-card--listing .portal-job-card__actions--recommended {
    position: relative;
    align-items: center;
    justify-content: flex-end;
}

.portal-job-card--listing .portal-job-card__lead-row:has(.portal-job-card__actions--recommended) {
    align-items: center;
}

.portal-job-card--listing .portal-job-card__actions--recommended .portal-job-card__recommend {
    position: absolute;
    top: auto;
    right: 0;
    bottom: calc(100% + 6px);
    left: auto;
    align-self: flex-end;
    width: max-content;
    max-width: 100%;
    flex-grow: 0;
    flex-basis: auto;
}

.portal-job-card--listing .portal-job-card__actions .portal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 22px !important;
    border-radius: 12px !important;
    font-size: .9375rem !important;
    font-weight: 700 !important;
    white-space: nowrap;
    flex-shrink: 0;
}

.portal-job-card--listing .portal-job-card__save {
    border: 1px solid var(--fj-line) !important;
    background: var(--fj-card) !important;
    color: var(--fj-body) !important;
    cursor: pointer;
}

.portal-job-card--listing .portal-job-card__save:hover {
    border-color: var(--fj-blue) !important;
    color: var(--fj-blue) !important;
    background: var(--fj-blue-soft) !important;
}

.portal-job-card--listing .portal-job-card__actions .portal-btn--primary {
    border: 0 !important;
    background: var(--ss-primary, #e8322f) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(232, 50, 47, .26);
    text-decoration: none;
}

.portal-job-card--listing .portal-job-card__actions .portal-btn--primary:hover {
    background: #cf2723 !important;
    transform: translateY(-1px);
}

/* ── Row order: title, then the company/controls row ───────────────────── */
/* The listing markup emits the job title as its own `__body` row above the
   company row, so `order` puts them in sequence:

     1. lead body  -> job title               (`order: 0`, the default)
     2. head       -> logo + company | Save / Apply Now
     3. body       -> openings, then the other metadata + skills

   These are deliberately NOT inside a media query: the order has to hold at
   every width, or the company row snaps back above the title on narrow
   screens. Nothing else in the stylesheet sets `order` on card children. */
.portal-job-card--listing .portal-job-card__head {
    order: 2;
}

.portal-job-card--listing .portal-job-card__body {
    order: 3;
}

.portal-job-card--listing .portal-job-card__actions {
    order: 0;
}

.portal-job-card--listing .portal-job-card__body--lead {
    width: 100%;
}

/* ── The openings line is the company name's line ───────────────────────── */
/* The company name and logo belong on the same line as the vacancy count, not
   on a line of their own. The card is a flex column, so a metadata item cannot
   sit beside a sibling row — but it CAN start a new line inside the metadata
   row. So: the city and category stay on the line under the title, and the
   vacancy count breaks to a fresh line. The company row, which follows the
   metadata row, then lands level with that break.

   `flex-basis: 100%` is what forces the break: the item still takes only the
   width of its own content, but the line cannot fit anything after it.

   The line height is pinned here rather than left to the text so the gap
   between the two rows is identical for every font the page might load. */
.portal-job-card--listing .portal-job-card__meta {
    row-gap: 8px;
}

.portal-job-card--listing .portal-job-card__body {
    gap: 0;
}

/* Applies at EVERY width: the company row is ordered after the title by the
   `order` rules above, so the openings line has to start a new line and hold it
   open at all sizes — not only on wide screens. */
.portal-job-card--listing .portal-job-card__meta-item:has(.portal-job-card__meta-text:not(:empty)):nth-child(3) {
    flex-basis: 100%;
    height: 44px;
}

/* The skills chips are the card's last line, so they keep the row rhythm that
   the metadata row just gave up. */
.portal-job-card--listing .portal-job-card__skills {
    margin-top: 12px;
}

/* ── Company name reads at the same size as the openings label ──────────── */
/* 1rem / 700 on both, so `resilience pvt.Limited` and `10 Openings` sit on the
   line as equals instead of the company name shouting over it. */
.portal-job-card--listing .portal-job-card__eyebrow {
    font-size: 1rem;
    line-height: 1.3;
}

.portal-job-card--listing .portal-job-card__eyebrow a {
    color: var(--fj-blue);
    text-decoration: none;
}

.portal-job-card--listing .portal-job-card__eyebrow a:hover {
    color: var(--fj-blue-dark);
    text-decoration: underline;
}

/* The company icon rides with the company name: 40px, shrunk from 56px so it
   matches the line the name sits on, and never larger than that line. */
.portal-job-card--listing .portal-company-logo--job {
    align-self: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
}

@media (min-width: 721px) {
    .portal-job-card--listing .portal-job-card__identity {
        gap: 12px;
    }

    /* The identity block carries no extra height of its own: its two children
       are the 40px tile and the name, so the row is exactly as tall as the
       company name. */
    .portal-job-card--listing .portal-job-card__identity-copy {
        gap: 0;
    }
}

/* ── Narrow cards: controls drop below the job information ──────────────── */
/* Below 721px there is no room for the controls beside the company name, so
   the head row wraps and the actions take the full width. */
@media (max-width: 720px) {
    .portal-job-card--listing {
        gap: 16px;
        padding: 20px;
    }

    .portal-job-card--listing .portal-job-card__identity {
        align-items: flex-start;
        min-width: 0;
    }

    /* The company name stays at 1rem here too. It is deliberately not bumped:
       the name shares its line with the "N Openings" label, and the two only
       read as one line while they are the same size. */

    .portal-job-card--listing .portal-job-card__title {
        font-size: 1.1875rem;
    }

    /* Metadata stacks one item per line on narrow screens. Every item keeps its
       own icon + label together, so nothing is orphaned or clipped. */
    .portal-job-card--listing .portal-job-card__meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    /* The company row has to land between the job title and the openings line.
       A column cannot insert a sibling into the middle of itself, so on narrow
       screens the whole card switches to a single column of `order`-sequenced
       rows: title (1) -> company (2) -> openings (3) -> rest of the metadata.
       The metadata row stops being its own flex container for this, which is
       why it is flattened into `display: contents` — its items then sort
       against the card's own children.

       `contents` keeps the element in the accessibility tree while removing its
       own box, so the `<ul>`/`<li>` semantics still read the same. */
    .portal-job-card--listing .portal-job-card__head {
        order: 2;
    }

    .portal-job-card--listing .portal-job-card__body {
        display: contents;
    }

    .portal-job-card--listing .portal-job-card__meta {
        display: contents;
    }

    .portal-job-card--listing .portal-job-card__meta-item:nth-child(3) {
        order: 3;
        flex-basis: auto;
        height: auto;
    }

    .portal-job-card--listing .portal-job-card__meta-item:not(:nth-child(3)) {
        order: 4;
    }

    .portal-job-card--listing .portal-job-card__skills {
        order: 5;
    }

    /* Salary wraps instead of forcing the card wider than the viewport. */
    .portal-job-card--listing .portal-job-card__meta-value--salary .portal-job-card__meta-text {
        white-space: normal;
    }

    .portal-job-card--listing .portal-job-card__actions {
        flex-wrap: wrap;
        justify-content: stretch;
        align-self: stretch;
        width: 100%;
    }

    /* Buttons share the row evenly and may shrink, so "Apply Now" is never
       pushed past the card edge on a narrow screen. */
    .portal-job-card--listing .portal-job-card__actions .portal-btn {
        flex: 1 1 0;
        min-width: 0;
        padding: 0 16px !important;
    }
}

/* ─── Right rail ─────────────────────────────────────────────────────────── */

.employer-directory--showcase .directory-aside {
    position: sticky;
    top: 16px;
}

.employer-directory--showcase .directory-aside__card {
    padding: 16px 18px !important;
    border: 1px solid var(--fj-line) !important;
    border-radius: var(--fj-radius) !important;
    background: var(--fj-card) !important;
    box-shadow: var(--fj-shadow);
}

.employer-directory--showcase .directory-aside__title {
    color: var(--fj-ink);
    font-size: .93rem;
    font-weight: 800;
}

.employer-directory--showcase .directory-aside__link {
    color: var(--fj-blue);
}

.employer-directory--showcase .directory-aside__copy {
    color: var(--fj-body);
}

.employer-directory--showcase .directory-aside__logo {
    min-height: 52px;
    border-color: var(--fj-line);
    border-radius: 10px;
}

.employer-directory--showcase .directory-aside__logo img {
    max-height: 30px;
}

.employer-directory--showcase .directory-aside__logo:hover {
    border-color: var(--fj-blue);
}

.employer-directory--showcase .directory-aside__logo-mark {
    color: var(--fj-muted);
}

.employer-directory--showcase .directory-aside__alert-form input[type="email"] {
    border-color: var(--fj-line);
    color: var(--fj-ink);
}

.employer-directory--showcase .directory-aside__alert-form .portal-btn {
    border: 0 !important;
    background: var(--fj-blue) !important;
    color: #fff !important;
}

.employer-directory--showcase .directory-aside__alert-form .portal-btn:hover {
    background: var(--fj-blue-dark) !important;
}

.employer-directory--showcase .directory-aside__tag {
    border-color: var(--fj-line);
    color: var(--fj-body);
}

.employer-directory--showcase .directory-aside__tag:hover {
    border-color: var(--fj-blue);
    color: var(--fj-blue);
    background: var(--fj-blue-soft);
}

.employer-directory--showcase .directory-aside__resource-icon {
    background: var(--fj-blue-soft);
    color: var(--fj-blue);
}

.employer-directory--showcase .directory-aside__resource-title {
    color: var(--fj-ink);
}

.employer-directory--showcase .directory-aside__resource-copy {
    color: var(--fj-muted);
}

.employer-directory--showcase .directory-aside__hiring {
    border: 1px solid var(--fj-line) !important;
    border-radius: var(--fj-radius) !important;
    background: var(--fj-blue-soft) !important;
}

.employer-directory--showcase .directory-aside__hiring-title {
    color: var(--fj-ink);
}

.employer-directory--showcase .directory-aside__hiring-copy {
    color: var(--fj-body);
}

.employer-directory--showcase .directory-aside__hiring-btn {
    border: 0 !important;
    border-radius: 10px !important;
    background: var(--fj-blue) !important;
    color: #fff !important;
}

.employer-directory--showcase .directory-aside__hiring-btn:hover {
    background: var(--fj-blue-dark) !important;
    color: #fff !important;
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 1180px) {
    .directory-showcase__hero {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .directory-showcase__hero-art {
        justify-content: flex-start;
    }

    .directory-showcase__hero-art > img {
        max-width: 340px;
    }

    .directory-showcase__stats {
        position: static;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-top: -30px;
    }
}

@media (max-width: 900px) {
    .directory-showcase__search-form {
        grid-template-columns: 1fr;
        border-radius: 20px;
        row-gap: 0;
    }

    .directory-showcase__search-divider {
        display: none;
    }

    .directory-showcase__search-field {
        padding: 0 16px;
        border-bottom: 1px solid var(--fj-line);
    }

    .directory-showcase__search-submit {
        width: calc(100% - 4px);
        margin: 6px 2px 2px;
        justify-content: center;
    }

    .directory-showcase__stats {
        grid-template-columns: 1fr;
        margin-top: 16px;
    }
}

@media (max-width: 720px) {
    .directory-showcase__highlights {
        grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
        gap: 8px;
    }

    .directory-showcase__highlight-icon {
        width: 40px;
        height: 40px;
    }

    .employer-directory--showcase .directory-mode {
        max-width: 100%;
    }
}

/* Final Companies-tab pass. This stylesheet is injected by /jobs/search after
   the document head, so the grid card geometry and primary action stay
   authoritative after all shared layout rules have loaded. */
.job-result-grid > .portal-job-card--listing {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    align-self: start !important;
    height: auto !important;
    min-width: 0 !important;
    gap: 10px !important;
}

.job-result-grid > .portal-job-card--listing .portal-job-card__lead-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
}

.job-result-grid > .portal-job-card--listing .portal-job-card__body--lead {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
}

.job-result-grid > .portal-job-card--listing .portal-job-card__title,
.job-result-grid > .portal-job-card--listing .portal-job-card__title a {
    margin: 0 !important;
    font-size: clamp(1.08rem, 1.42vw, 1.35rem) !important;
    line-height: 1.16 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
}

.job-result-grid > .portal-job-card--listing .portal-job-card__lead-row > .portal-job-card__actions {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 7px !important;
    width: auto !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    max-width: 62% !important;
}

.job-result-grid > .portal-job-card--listing .portal-job-card__buttons {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 7px !important;
    min-width: 0 !important;
}

.job-result-grid > .portal-job-card--listing .portal-job-card__buttons .portal-btn {
    min-height: 40px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    font-size: .82rem !important;
    white-space: nowrap !important;
}

.job-result-grid > .portal-job-card--listing .portal-job-card__buttons .portal-btn--primary,
.job-result-grid > .portal-job-card--listing .portal-job-card__actions .portal-btn--primary {
    background: var(--ss-primary) !important;
    background-image: none !important;
    border-color: var(--ss-primary) !important;
    color: var(--ss-primary-contrast, #fff) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

@media (max-width: 720px) {
    .job-result-grid > .portal-job-card--listing .portal-job-card__lead-row {
        flex-direction: column !important;
    }

    .job-result-grid > .portal-job-card--listing .portal-job-card__lead-row > .portal-job-card__actions,
    .job-result-grid > .portal-job-card--listing .portal-job-card__buttons {
        width: 100% !important;
    }

    .job-result-grid > .portal-job-card--listing .portal-job-card__buttons .portal-btn {
        flex: 1 1 0 !important;
    }
}

/* Equal-track Companies/Jobs result grid. Every card in a row shares the
   same width and height, while its inner content remains flex-based and
   readable. */
.job-result-grid {
    align-items: stretch !important;
    grid-auto-flow: row !important;
}

.job-result-grid > .portal-job-card--listing {
    align-self: stretch !important;
    height: 100% !important;
    min-height: 410px !important;
}

.job-result-grid > .portal-job-card--listing > .portal-job-card__head {
    flex: 0 0 auto !important;
}

.job-result-grid > .portal-job-card--listing > .portal-job-card__body:not(.portal-job-card__body--lead) {
    flex: 1 1 auto !important;
}

@media (min-width: 1101px) {
    .job-result-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 721px) and (max-width: 1100px) {
    .job-result-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 720px) {
    .job-result-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .job-result-grid > .portal-job-card--listing {
        min-height: 0 !important;
        height: auto !important;
    }
}

/* Public /employers has only two direct children in its showcase layout:
   filters and results. The third track was reserved for an older standalone
   rail, leaving a large unused strip on the right of every company card.
   Remove only that unused track on this page and let the card internals use
   the recovered width. The Find Jobs showcase keeps its existing layout. */
.employer-directory-shell .employer-directory__layout--showcase {
    grid-template-columns: minmax(230px, 260px) minmax(0, 1fr) !important;
}

@media (max-width: 1080px) {
    .employer-directory-shell .employer-directory__layout--showcase {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

.employer-directory-shell .employer-directory__results,
.employer-directory-shell .employer-directory__results-scroll,
.employer-directory-shell .employer-directory__list {
    min-width: 0;
    width: 100%;
}

.employer-directory-shell .portal-company-card {
    width: 100%;
    box-sizing: border-box;
}

.employer-directory-shell .portal-company-card .portal-job-card__row {
    flex: 1 1 auto;
    min-width: 0;
    align-items: flex-start;
}

.employer-directory-shell .portal-company-card .portal-job-card__body {
    flex: 1 1 auto;
    min-width: 0;
}

.employer-directory-shell .portal-company-card .portal-job-card__actions {
    flex: 0 0 auto;
    align-self: center;
    margin-left: auto;
}

/* ─── Embedded directory (job seeker / employer panel) ───────────────────────
   The public showcase page lays out filters | results | right rail across three
   columns. Inside a signed-in panel the available width is already reduced by
   the sidebar, so carrying the 220-260px right rail over left the results
   column far too narrow and the company cards wrapped into a cramped stack
   (title, tags and the action button all squeezing each other).

   The in-panel directory drops the rail and gives the results column the full
   remaining width, so company cards render wide with the name, metadata and
   tags aligned in one readable block against the "View profile" action.

   Scoped to `.employer-directory--embedded`, so the public /employers page
   keeps its three-column showcase untouched. */
body.portal-body .employer-directory--embedded .employer-directory__layout--showcase {
    grid-template-columns: minmax(230px, 270px) minmax(0, 1fr);
}

body.portal-body .employer-directory--embedded .employer-directory__results {
    min-width: 0;
}

/* The rail is hidden in-panel: it repeats the company cards and squeezes them. */
body.portal-body .employer-directory--embedded .employer-directory__results-scroll > .directory-aside {
    display: none;
}

/* Wider card with the identity block taking the free space and the action
   pinned to the right, level with the company name. */
body.portal-body .employer-directory--embedded .portal-company-card {
    align-items: flex-start;
    gap: 18px;
    padding: 18px 22px;
}

body.portal-body .employer-directory--embedded .portal-company-card .portal-job-card__row {
    gap: 18px;
    align-items: flex-start;
}

body.portal-body .employer-directory--embedded .portal-company-card .portal-job-card__body {
    flex: 1 1 auto;
    min-width: 0;
}

body.portal-body .employer-directory--embedded .portal-company-card .portal-job-card__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 4px;
    line-height: 1.3;
}

body.portal-body .employer-directory--embedded .portal-company-card .portal-job-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 8px;
    row-gap: 4px;
    margin: 0;
    line-height: 1.5;
}

body.portal-body .employer-directory--embedded .portal-company-card .portal-job-card__skills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

body.portal-body .employer-directory--embedded .portal-company-card .portal-job-card__actions {
    flex: 0 0 auto;
    align-self: flex-start;
    padding-left: 0;
    margin-top: 2px;
}

/* Below the panel's two-column floor, stack: filters, then the wide cards. */
@media (max-width: 1080px) {
    body.portal-body .employer-directory--embedded .employer-directory__layout--showcase {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    body.portal-body .employer-directory--embedded .portal-company-card {
        flex-direction: column;
        align-items: stretch;
        padding: 16px 18px;
    }

    body.portal-body .employer-directory--embedded .portal-company-card .portal-job-card__actions {
        align-self: stretch;
        margin-top: 12px;
    }
}