/*
 * Job list, teaser and job page, the part the site CSS does not cover.
 *
 * The look comes from the prototype CSS on the site (m-jobs, field, chip, jobcard,
 * jobhead, g-btn), scoped there to .gessulat. This file only adds what that CSS has no
 * rule for, because the prototype does not have it: the clickable card, the busy state
 * during a request, the paging, a screen reader class that does not depend on the site
 * CSS, and a few spacings and sizes of the job page.
 *
 * Everything is scoped to [data-innio-jobs], the quick search's [data-innio-jobs-search]
 * and the job page's [data-innio-job], so nothing here reaches the rest of the page.
 */

/* The whole card is clickable, through the button's link stretched over the card. The
   button keeps its focus ring, and the card does not become a link around a heading. */
[data-innio-jobs] .jobcard {
    position: relative;
}

/* On small screens the site CSS turns the card into a single column, and the grid would
   stretch the button to the full width. It stays as wide as its content and moves to the
   right. On wider screens it sits in its own auto column, so this changes nothing there. */
[data-innio-jobs] .jobcard .g-btn {
    justify-self: end;
}

[data-innio-jobs] .jobcard .g-btn::after {
    content: "";
    inset: 0;
    position: absolute;
}

[data-innio-jobs] .u-sr-only,
[data-innio-jobs-search] .u-sr-only,
[data-innio-job] .u-sr-only {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* Quick search (M06). The prototype CSS on the site sets border and background of these
   fields but not padding and radius, so the theme's form reset (Hello Elementor: padding
   .5rem 1rem, radius 3px) shows through. These values are the prototype's computed ones. */
[data-innio-jobs-search] .quicksearch__q input {
    border-radius: 0;
    padding: 1px 2px;
}

[data-innio-jobs-search] .quicksearch__sel select {
    border-radius: 0;
    padding: 0 24px 0 0;
}

/* While a request is running the list stays readable but is marked as busy, so it does
   not look as if the click was lost. */
[data-innio-jobs] [aria-busy="true"] {
    opacity: 0.55;
    transition: opacity 120ms ease;
}

/* The job page. Every page of the site opens with a hero under its floating navigation;
   without a hero template above the job (Jobs > Career site) the navigation would sit on
   the title. */
[data-innio-job].innio-job--plain {
    padding-top: 96px;
}

[data-innio-job] .innio-job__back {
    margin-bottom: 16px;
}

/* The apply box holds only the button, so the box itself goes; the button stays sticky.
   One class more than the site CSS, which loads after this file. */
[data-innio-job] .jobhead .jobhead__apply {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
}

/* The site CSS gives the section around .jobhead only 16px at the bottom, because in the
   prototype a separate job text section follows it. Here the job text sits inside
   .jobhead, so the section ends on the text and takes the same space as at its top
   (.mod--intro + .mod). The site rule's selector weighs eight classes and loads after this
   file, hence !important. */
[data-innio-job] > .mod:has(> .wrap > .jobhead) {
    padding-bottom: clamp(32px, 4vw, 48px) !important;
}

/* Paragraphs in the job text get 18px from the theme, the lists next to them 16px from
   .bullets. Both take the text size of the lists. */
[data-innio-job] .jobtext p {
    font-size: var(--fs-p-m, 1rem);
    line-height: 1.6;
}

/* The prototype's CTA has no rule for the button, it would sit right under the text. */
[data-innio-job] .m-editorial__text .g-btn {
    margin-top: 24px;
}

/* Paging. The prototype has 37 hand-written jobs on one page and no paging to copy. */
[data-innio-jobs] .innio-jobs__pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 28px;
}

[data-innio-jobs] .innio-jobs__page {
    border: 1px solid var(--gray-30, #e6e7ea);
    border-radius: 4px;
    color: var(--black, #1f1f27);
    line-height: 38px;
    min-width: 40px;
    text-align: center;
    text-decoration: none;
}

[data-innio-jobs] .innio-jobs__page:hover {
    border-color: var(--purple-70, #6721ff);
}

[data-innio-jobs] .innio-jobs__page.is-current {
    background: var(--purple-20, #f3edff);
    border-color: var(--purple-70, #6721ff);
    color: var(--purple-70, #6721ff);
}

/* Rows (variant="rows"), for landing pages like /en/hungary/. No prototype classes and
   no colour of their own: background, text colour and font come from the Elementor
   container around the widget, the lines follow the text colour. Hello Elementor does not
   reset lists, hence the reset here. */
[data-innio-jobs].innio-jobs--rows .innio-jobs__rows {
    list-style: none;
    margin: 0;
    padding: 0;
}

[data-innio-jobs].innio-jobs--rows .jobrow {
    border-bottom: 1px solid color-mix(in srgb, currentColor 60%, transparent);
    margin: 0;
}

[data-innio-jobs].innio-jobs--rows .jobrow__link,
[data-innio-jobs].innio-jobs--rows .jobrow__link:hover {
    align-items: baseline;
    color: inherit;
    column-gap: 24px;
    display: grid;
    grid-template-columns: 1fr auto;
    padding: 13px 8px;
    text-decoration: none;
}

/* Type in a rule of one class weight, so the typography of the widget's Style tab
   (Elementor writes it as {{WRAPPER}} .jobrow__link) wins over it. The font is the kit's
   text font, the body of Hello Elementor has the system font. */
:where([data-innio-jobs].innio-jobs--rows) .jobrow__link,
:where([data-innio-jobs].innio-jobs--rows) .innio-jobs__more {
    font-family: var(--e-global-typography-text-font-family, inherit);
    font-size: 16px;
    line-height: 1.4;
}

/* A long title wraps before it reaches the location, as in the design. */
[data-innio-jobs].innio-jobs--rows .jobrow__title {
    max-width: 36em;
}

[data-innio-jobs].innio-jobs--rows .jobrow__link:hover .jobrow__title {
    text-decoration: underline;
    text-underline-offset: 3px;
}

[data-innio-jobs].innio-jobs--rows .jobrow__link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

[data-innio-jobs].innio-jobs--rows .jobrow__location {
    text-align: right;
    white-space: nowrap;
}

[data-innio-jobs].innio-jobs--rows .innio-jobs__more {
    margin: 24px 0 0;
}

[data-innio-jobs].innio-jobs--rows .innio-jobs__more a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Below Elementor's mobile breakpoint the location goes under the title. The :hover
   selector is listed too, otherwise the two-column rule above wins on hover (and on a
   tap, which a touch device keeps as hover). */
@media (max-width: 767px) {
    [data-innio-jobs].innio-jobs--rows .jobrow__link,
    [data-innio-jobs].innio-jobs--rows .jobrow__link:hover {
        grid-template-columns: 1fr;
        row-gap: 2px;
    }

    [data-innio-jobs].innio-jobs--rows .jobrow__location {
        text-align: left;
        white-space: normal;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-innio-jobs] [aria-busy="true"] {
        transition: none;
    }
}