/* ============================================================
   Relaunch result list (blocks/relaunch/job-list.html.twig) and
   the relaunch list pages. Mobile first. Shares section, chip and
   employer styles with relaunch-home.css (.rh-*).
   ============================================================ */
.rl-h1 { margin: 16px 0 12px; font-size: 22px; line-height: 1.25; font-weight: 700; color: var(--rl-accent, #144f7a); }
/* the old layout.css makes every h1 sticky (>= 768 px); here it would cover the sticky map */
.rl-h1, .rh-h1 { position: static; padding: 0; background: none; z-index: auto; }
.rl-list { --rj-accent: var(--rl-accent, #144f7a); --rj-cta: var(--rl-cta, #007186); --rj-line: #e1e5e9; --rj-muted: #5f6b76;
    color: #2b2f33; }

/* ---------- toolbar: only the list/map switch (floating on phones, none from 992 px) ---------- */
.rl-list__bar { display: flex; align-items: center; }
/* no job counts on the page (client review 2026-10-27); kept for screen readers, announced when a filter changes it */
.rl-list__count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rl-list__views { display: inline-flex; border: 1.5px solid #c9d1d8; border-radius: 999px; overflow: hidden; }
.rl-view { height: 36px; padding: 0 14px; border: 0; background: #fff; color: #3a4550; font-size: 14px; font-weight: 600; cursor: pointer; }
.rl-view.is-on { background: var(--rj-accent); color: #fff; }

/* ---------- heading and filter chips: sticky from 768 px (below) ---------- */
.rl-list__head .rh-head { margin-bottom: 10px; }
.rl-list__facets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 0 0 14px; }
.rl-facet { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rl-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 12px; border: 1.5px solid #c9d1d8;
    border-radius: 999px; background: #fff; color: #1f2933; font-size: 14px; font-weight: 600; cursor: pointer; }
.rl-chip:hover:not(:disabled), .rl-chip:focus-visible { border-color: var(--rj-accent); }
.rl-chip[aria-pressed="true"] { background: var(--rj-accent); border-color: var(--rj-accent); color: #fff; }
.rl-chip:disabled { opacity: .45; cursor: default; }
.rl-list__reset { border: 0; background: none; padding: 4px 0; color: var(--rj-accent); font-size: 14px; font-weight: 600; text-decoration: underline; cursor: pointer; }

/* ---------- body: list, map ---------- */
.rl-list__body { display: block; }
.rl-list__map { display: none; }
.rl-list--map .rl-list__results { display: none; }
.rl-list--map .rl-list__map { display: block; }
.rl-list__map #results_map.lmap { height: 68vh; min-height: 360px; border-radius: 12px; }
.rl-list__map img#results_map { width: 100%; height: auto; border-radius: 12px; }

/* ---------- job card ---------- */
.rl-list__items { display: flex; flex-direction: column; gap: 10px; }
.rj { position: relative; background: #fff; border: 1px solid var(--rj-line); border-radius: 12px; }
.rj[hidden] { display: none; }
.rj--top { border-left: 4px solid var(--rl-top, #c9930e); }
.rj:hover, .rj:focus-within { border-color: var(--rj-accent); }
.rj--top:hover, .rj--top:focus-within { border-left-color: var(--rl-top, #c9930e); }
.rj.result--highlight { background: #f3f7fa; }
.rj__link { display: block; padding: 14px 52px 14px 14px; color: inherit; text-decoration: none; }
.rj__link:hover, .rj__link:focus { text-decoration: none; color: inherit; }
.rj__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rj__badge { align-self: flex-start; padding: 1px 8px; border-radius: 999px; background: var(--rl-top-tint, #fbf0d6);
    color: var(--rl-top-ink, #6e5000); font-size: 12px; font-weight: 700; }
.rj__title { font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--rj-accent); }
.rj__employer { display: flex; align-items: center; gap: 8px; font-size: 14px; }
/* the logo at the lower right of the employer block, on free and paid cards alike. The text keeps one left edge down the
   list and wraps beside it. Width and height come from the HTML (sized by area, LogoService): nothing moves on load; the
   card is white, as most logos' background, so no frame. -38px: past the room .rj__link leaves for the heart */
.rj__who { display: flex; align-items: flex-end; gap: 12px; margin-right: -38px; }
.rj__facts { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rj__logo { flex: 0 0 auto; max-width: 28%; height: auto; object-fit: contain; }
.rj--top .rj__logo { max-width: 38%; }
.rj__meta { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 14px; color: var(--rj-muted); }
.rj__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.rj__tag { padding: 1px 8px; border-radius: 6px; background: #eef2f5; color: #3a4550; font-size: 13px; }
/* paid jobs: the benefits below, over the card's full width */
.rj__teaser { margin: 6px -38px 0 0; font-size: 14px; line-height: 1.4; color: #3a4550; }
.rj__teaser p, .rj__teaser ul { margin: 0; }
.rj__teaser p + p, .rj__teaser p + ul, .rj__teaser ul + p { margin-top: 4px; }
.rj__teaser ul { padding-left: 18px; }
.rj__watch { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent;
    color: var(--rj-accent); font-size: 20px; cursor: pointer; }
.rj__watch:hover, .rj__watch:focus-visible { background: var(--rl-accent-tint, #e8f0f6); }
.rj__watch.active { color: #c0392b; }
.rj__watch.active .fa-heart-o:before { content: "\f004"; }

.rl-list__nomatch { margin: 12px 0; padding: 16px; border-radius: 12px; background: #fff; border: 1px dashed #c9d1d8; color: var(--rj-muted); }
.rl-list__more { width: 100%; }
.rl-list .job-alert-teaser, .rl-list [class*="job-alert"] { margin-top: 16px; }

/* ---------- wide screens: map left, list right ---------- */
@media (min-width: 768px) {
    .rl-h1 { font-size: 26px; }
    /* heading and filters stay on top while the jobs scroll; the page background hides what passes below */
    .rl-list__head { position: sticky; top: 0; z-index: 5; padding-top: 10px; margin-top: -10px; background: #f1f1f1;
        box-shadow: 0 8px 8px -8px rgba(0, 0, 0, .12); }
    .rl-list__head .rl-list__facets { margin-bottom: 0; padding-bottom: 12px; }
    .rl-list__body { margin-top: 14px; }
}
@media (min-width: 992px) {
    .rl-list__views { display: none; }
    .rl-list__body { display: flex; align-items: flex-start; gap: 20px; }
    .rl-list__results { display: block !important; flex: 1 1 50%; min-width: 0; }
    /* map on the left, as in MoLo: it stays in place while the jobs scroll past on the right; half and half */
    .rl-list__map { display: block; flex: 0 0 calc(50% - 10px); position: sticky; top: calc(var(--rl-head-h, 0px) + 14px); order: -1; }
    .rl-list__map #results_map.lmap { height: calc(100vh - var(--rl-head-h, 0px) - 28px); max-height: 720px; }
}

/* ---------- phones: the first job within the first screen ---------- */
@media (max-width: 991px) {
    /* the switch floats above the bottom nav */
    .rl-list__views { position: fixed; left: 50%; bottom: calc(70px + env(safe-area-inset-bottom, 0px)); z-index: 1200;
        transform: translateX(-50%); box-shadow: 0 4px 16px rgba(0, 0, 0, .22); border-color: transparent; }
    .rl-view { height: 42px; padding: 0 18px; }
    .rl-list__views.is-away { display: none; }
    /* all chips in one row that scrolls sideways */
    .rl-list__facets { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
    .rl-list__facets::-webkit-scrollbar { display: none; }
    .rl-facet { flex-wrap: nowrap; flex: 0 0 auto; }
    .rl-chip, .rl-list__reset { flex: 0 0 auto; white-space: nowrap; }
    /* room for the floating switch at the end of the list */
    .rl-list__results { padding-bottom: 56px; }
}

/* a padded city list: after the city's own jobs (JobListService::orderSurroundings) */
.rl-list__sep { margin: 18px 0 10px; font-size: 17px; font-weight: 700; color: var(--rh-accent); }
.rl-list__sep[hidden] { display: none; }

/* ---------- region hub (state and county pages): cities and districts A-Z below the list ---------- */
/* a county's or city's way up to its county's cities and its state's districts */
.rl-region__up { margin: 8px 0 0; padding: 0; list-style: none; }
.rl-region__up a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; color: var(--rh-accent); }
.rl-region__up .fa { font-size: 12px; }
/* a city page's nearby cities: the distance under the name */
.rl-region__km { display: block; font-size: 13px; font-weight: 400; color: var(--rh-muted); }
.rl-region__list--near a { flex-direction: column; align-items: flex-start; justify-content: center; }
/* phones show 16 (relaunch-home.css), from 768 px 48; "Mehr anzeigen" only where more are hidden */
@media (min-width: 768px) {
    .rl-region__list.is-clamped > li:nth-child(n+49) { display: none; }
    .rh-showmore--wide { display: flex; }
}
@media (min-width: 992px) {
    .rl-region__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    /* long district names ("Landkreis Neustadt an der Aisch-Bad Windsheim") wrap instead of overflowing */
    .rl-region__list a { white-space: normal; }
}

/* ---------- empty state (watchlist) ---------- */
.rl-empty { max-width: 520px; margin: 12px 0 32px; padding: 28px 24px; background: #fff; border: 1px solid #e1e5e9; border-radius: 14px; text-align: center; }
.rl-empty > i { font-size: 34px; color: var(--rl-accent, #144f7a); }
.rl-empty p { margin: 10px 0 0; color: #3a4550; }
.rl-empty .rl-empty__title { font-weight: 700; color: #1f2933; }
.rl-empty .rh-button { display: inline-flex; margin-top: 18px; }
/* .rh-button sets display: flex, which would override the hidden attribute */
.rl-list__more[hidden] { display: none; }