/* Relaunch job detail page (city/city-job-relaunch.html.twig, D3 2026-10-28). Loaded after relaunch-home.css and
   before the old css/job.css, so rules are scoped under .rl-job / .rl-jobpage to win over it. */

/* paid job: the employer's picture as a band, at most 200 px */
.rl-jobteaser { margin: 0 auto; max-width: 1140px; }
.rl-jobteaser img { display: block; width: 100%; height: auto; max-height: 200px; object-fit: cover; border-radius: 10px; }
@media (min-width: 768px) { .rl-jobteaser img { border-radius: 16px; } }

/* previous / next job (MoLo's sedcard-nav): from 768 px at the right end of the breadcrumb row (as the state map
   badge, relaunch-home.css .rl-crumbs), icons only up to 991 px; on phones a floating pill above the bottom navigation, as the list's
   switch (relaunch-list.css .rl-list__views): sticky, so it rests at the end of the job and never covers the footer */
.rl-prevnext { display: flex; gap: 8px; }
.rl-prevnext--top { display: none; }
.rl-prevnext__link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 38px; height: 40px; padding: 0 14px;
    border: 1px solid var(--rl-line, #e1e5e9); border-radius: 999px; background: #fff; color: var(--rl-accent, #144f7a); font-size: 14px; font-weight: 600; }
.rl-prevnext__link[hidden] { display: none; }
.rl-prevnext__link:hover, .rl-prevnext__link:focus-visible { border-color: var(--rl-accent, #144f7a); text-decoration: none; }
.rl-prevnext[hidden] { display: none; }
.rl-prevnext--float { position: sticky; bottom: calc(70px + env(safe-area-inset-bottom, 0px)); z-index: 1200; gap: 0; width: fit-content; margin: 24px auto 0;
    border: 1px solid var(--rl-line, #e1e5e9); border-radius: 999px; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .2); overflow: hidden; }
.rl-prevnext--float .rl-prevnext__link { width: 56px; height: 44px; padding: 0; border: 0; border-radius: 0; font-size: 16px; }
.rl-prevnext--float .rl-prevnext__link + .rl-prevnext__link { border-left: 1px solid var(--rl-line, #e1e5e9); }
.rl-prevnext--float .rl-prevnext__txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rl-jobpage .rl-crumbs .breadcrumb { padding-right: 0; min-height: 0; }
@media (min-width: 768px) {
    .rl-prevnext--float { display: none; }
    .rl-jobcrumbs { padding-top: 6px; }
    .rl-prevnext--top { display: flex; position: absolute; top: 8px; right: calc((100% - 750px) / 2 + 15px); }
    .rl-prevnext--top .rl-prevnext__link { height: 32px; padding: 0 10px; }
    .rl-prevnext--top .rl-prevnext__txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .rl-jobpage .rl-crumbs .breadcrumb { padding-right: 140px; }
}
@media (min-width: 992px) {
    .rl-prevnext--top { right: calc((100% - 970px) / 2 + 15px); }
    .rl-prevnext--top .rl-prevnext__txt { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
    .rl-jobpage .rl-crumbs .breadcrumb { padding-right: 400px; }
}
@media (min-width: 1200px) { .rl-prevnext--top { right: calc((100% - 1170px) / 2 + 15px); } }

/* head: the headline keeps its text (SEO), a little smaller from 768 px */
.rl-jobhead { position: relative; }
.rl-jobpage .rl-jobhead__h1 { margin: 4px 0 6px; padding-right: 52px !important; font-size: 22px; line-height: 1.25; font-weight: 700; color: var(--rh-accent); position: static; padding: 0; background: none; }
/* over the old .job .watchlist.main (relative, inline-block): at the headline's right end */
.rl-jobpage .job .watchlist.main.rl-jobhead__watch { position: absolute; top: 0; right: 0; left: auto; width: 44px; margin: 0; text-align: center; cursor: pointer; }
.rl-jobpage .job .watchlist.main.rl-jobhead__watch i { font-size: 28px; line-height: 1; }
.rl-jobpage .job .watchlist.main.rl-jobhead__watch p { margin: 2px 0 0; font-size: 11px; }
.rl-jobhead__title { margin: 0 0 6px; font-size: 17px; line-height: 1.3; color: #2b2f33; font-weight: 600; }
.rl-jobhead__org { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 16px; margin: 0 0 4px; }
.rl-jobhead__orgscope { display: inline; }
/* the logo at the right: sized by area in the HTML (--rl-lw, --rl-lh), its room reserved, so nothing moves on load.
   The row may run a little into the gap below, so a square logo does not raise the head. Phones: beside the employer
   and the date, the title above them at full width, at 4/5 of the size */
/* multiply: the white background of the JPEG logos takes on the page's grey, no white box and no frame */
.rl-jobhead__logo { position: absolute; top: 0; right: 0; display: block; object-fit: contain; overflow: hidden; mix-blend-mode: multiply;
    width: calc(var(--rl-lw) * .8px); height: calc(var(--rl-lh) * .8px); }
.rl-jobhead__org { position: relative; }
.has-logo .rl-jobhead__org { min-height: calc(var(--rl-lh) * .8px); padding-right: calc(var(--rl-lw) * .8px + 12px); align-content: flex-start; }
@media (min-width: 768px) {
    .rl-jobhead__org { position: static; }
    .rl-jobhead__row { position: relative; }
    .has-logo.rl-jobhead__row { min-height: calc(var(--rl-lh) * 1px); padding-right: calc(var(--rl-lw) * 1px + 24px); }
    .has-logo .rl-jobhead__org { min-height: 0; padding-right: 0; }
    /* 12 px below the row's top: room under "Merken", which sits above the logo's right end */
    .rl-jobhead__logo { top: 12px; width: calc(var(--rl-lw) * 1px); height: calc(var(--rl-lh) * 1px); }
}
.rl-jobhead__name { font-weight: 700; color: var(--rh-accent); }
.rl-jobhead__date { color: var(--rh-muted); font-size: 14px; }

/* sections */
.rl-job .rl-jobsec { margin-top: 24px; }
/* the aside's headings: the old job.css sets 20 px above them */
/* teal with its icon and rule, as on the old page: dark, the headings looked like bold text (client) */
.rl-jobpage .rl-job h2 { margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--rh-cta); font-size: 19px; font-weight: 700; color: var(--rh-cta); }
.rl-job h2 .fa, .rl-job h2 i { display: none; }
/* the side column's sections: the same 26 px above each heading */
.rl-jobpage .rl-job .application-address h2, .rl-jobpage .rl-job .contact-persons h2, .rl-jobpage .rl-job .external-links h2 { margin-top: 26px; }
.rl-jobtext { font-size: 16px; line-height: 1.6; }
.rl-jobtext ul { padding-left: 20px; }
.rl-jobmore { display: inline-block; padding: 11px 0; line-height: 1.3; font-weight: 700; color: var(--rh-accent); }
.rl-jobmore .fa { font-size: 12px; }
/* the old job.css puts its own icon before the company profile link */
.rl-jobpage .job-biz a.rl-jobmore::before { margin-right: 8px; }

/* facts: the old label tables as compact two-column lists */
.rl-jobfacts { display: grid; grid-template-columns: 1fr; gap: 0 32px; margin-top: 18px; }
.rl-jobfacts > div { margin-top: 4px; }
.rl-jobpage .rl-jobfacts h2 { font-size: 17px; }
.rl-jobpage .rl-jobfacts > div + div h2 { margin-top: 14px; }
.rl-job .rl-jobfacts dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0 0 14px; }
.rl-job .rl-jobfacts dt, .rl-job .rl-jobfacts dd { float: none; width: auto; margin: 0; text-align: left; white-space: normal; overflow: visible; }
.rl-job .rl-jobfacts dt { font-weight: 400; color: var(--rh-muted); }
.rl-job .rl-jobfacts dd { font-weight: 600; }

/* benefits of a paid job */
.rl-benefits h3 { margin: 12px 0 6px; font-size: 15px; font-weight: 700; color: var(--rh-muted); }
.rl-benefits ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rl-benefits li { padding: 5px 12px; border-radius: 999px; background: var(--rl-top-tint, #eef3f7); font-size: 14px; }
.rl-benefits li::before { content: none; }

/* workplace, map, application: the address block's rows are flattened (display: contents keeps the markup, and so
   the JobPosting data, as it is) so its parts can be ordered: workplace with the map first (client: the most
   important), then application and contact persons, then the links (profile, website) */
.rl-jobside { display: flex; flex-direction: column; margin-top: 26px; scroll-margin-top: 12px; }
.rl-jobside > .row, .rl-jobside > .row > address { display: contents; }
.rl-jobside [class*="col-"] { padding-left: 0; padding-right: 0; width: 100%; float: none; }
.rl-jobside > [itemprop="jobLocation"] > address > * { order: -1; }
.rl-jobside .external-links { order: 2; }
.rl-jobpage .rl-jobside .external-links a.url { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 0;
    border: 0; border-radius: 0; background: none; color: var(--rh-accent); font-size: 15px; font-weight: 600; text-align: left; }
.rl-jobpage .rl-jobside .external-links a.url:hover { background: none; color: var(--rh-accent); text-decoration: underline; }
.rl-jobpage .rl-jobside .external-links a.url::before { margin-right: 0 !important; width: 22px; font-size: 18px; top: 0; }
.rl-jobside .application-address, .rl-jobside .address { margin-bottom: 0; }

/* gallery: rounded as the cards, map and banner; the large picture's frame clips the picture and the arrows' shading */
.rl-jobpage .gallery .main-pic { border-radius: 10px; overflow: hidden; }
.rl-jobpage .gallery .thumbnails .pic a, .rl-jobpage .gallery .thumbnails .pic img { border-radius: 6px; }
.rl-jobpage .gallery .thumbnails .pic a { display: block; overflow: hidden; }

/* a revealed e-mail address (its link then has the mailto): the whole address, on two lines if it must */
.rl-jobpage .job a.btn-email[href^="mailto:"] { height: auto; white-space: normal; }
.rl-jobpage .job a.btn-email[href^="mailto:"] span { overflow: visible; white-space: normal; overflow-wrap: anywhere; font-size: 14px; line-height: 1.3; }

/* video previews: the picture fills the 16:9 box. Without consent it is a 1 px placeholder, which would otherwise grow into a square and spill out */
.rl-jobpage .job .video-thumbnail { position: relative; overflow: hidden; border-radius: 10px; background: #e8ebef; cursor: pointer; }
.rl-jobpage .job .video-thumbnail img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; object-fit: cover; }

/* a block without links has no heading (shared address blocks) */
.rl-jobside .external-links:not(:has(a)) { display: none; }

/* company profile (city/city-business-relaunch.html.twig): the side column first on phones, the jobs */
.rl-bizslogan { margin: 10px 0 0; font-size: 16px; font-weight: 600; color: var(--rh-accent, #144f7a); }
.rl-bizpage .job-branch ul { margin: 0; padding-left: 18px; }
.rl-bizhq { font-size: 13px; font-weight: 700; color: var(--rh-cta); }
.rl-bizjobs { scroll-margin-top: 12px; }
.rl-bizjobs .rl-list__bar { display: none; }
/* its own cards need neither logo nor employer: location and tags on one row */
.rl-bizjobs .rj__facts { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 3px 12px; }
.rl-bizjobs .rj__tags { margin-top: 0; }
.rj__go { position: absolute; top: 50%; right: 16px; transform: translateY(-50%); color: var(--rh-accent); }
.rl-bizjobs .rl-list__head { position: static; margin-top: 0; padding-top: 0; background: none; box-shadow: none; }
.rl-bizjobs .rh-head h2 { flex: 1 1 auto; }
.rl-bizjobs .rl-list__body { margin-top: 0; }
.rl-biznojobs p { margin: 0 0 6px; }
/* the other locations: the first 10, the rest open in a box with its own scrollbar */
.rl-bizloc { order: 3; margin-top: 26px; }
.rl-bizloc__list { margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.4; }
.rl-bizloc__list li { padding: 8px 0; border-bottom: 1px solid var(--rl-line, #e1e5e9); }
.rl-bizloc__list li:last-child { border-bottom: 0; }
.rl-bizloc__list b, .rl-bizloc__list span { display: block; }
.rl-bizloc__more { display: none; }
.rl-bizloc.is-open .rl-bizloc__more { display: block; }
.rl-bizloc.is-open .rl-bizloc__list { max-height: 480px; overflow-y: auto; }
.rl-bizloc__all { margin-top: 8px; padding: 0; border: 0; background: none; color: var(--rh-accent, #144f7a); font-size: 15px; font-weight: 600; cursor: pointer; }
.rl-bizloc__all:hover, .rl-bizloc__all:focus-visible { text-decoration: underline; }
.rl-bizloc__all[hidden] { display: none; }

/* the employer's other jobs */
.rl-jobothers .rh-head h2 { flex: 1 1 auto; }
.rl-jobothers__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.rl-jobothers__item { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 12px 14px;
    border: 1px solid var(--rh-line); border-radius: 10px; background: #fff; color: inherit; }
.rl-jobothers__item:hover, .rl-jobothers__item:focus-visible { border-color: var(--rh-accent); text-decoration: none; }
.rl-jobothers__name { font-weight: 700; color: var(--rh-accent); }
.rl-jobothers__meta { grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 3px 12px; }
.rl-jobothers__city { font-size: 14px; color: var(--rh-muted); }
.rl-jobothers__tag { padding: 1px 8px; border-radius: 6px; background: #eef2f5; color: #3a4550; font-size: 13px; }
.rl-jobothers__go { grid-column: 2; grid-row: 1 / span 2; color: var(--rh-accent); }

@media (min-width: 768px) {
    .rl-jobpage .rl-jobhead__h1 { font-size: 25px; }
    .rl-jobhead__title { font-size: 18px; }
    .rl-jobfacts { grid-template-columns: 1fr 1fr; }
    .rl-jobpage .rl-jobfacts > div + div h2 { margin-top: 0; }
}
@media (min-width: 992px) {
    .rl-jobgrid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; }
    .rl-jobothers { max-width: calc(100% - 380px); }
    .rl-jobside { position: sticky; top: 16px; margin-top: 18px; }
    .rl-bizpage .rl-jobside { grid-column: 2; grid-row: 1; }
    .rl-bizpage .rl-jobmain { grid-column: 1; grid-row: 1; }
}