/**
 * Brand images below the jobs hero image.
 *
 * Measured aspect ratios: Hatz and Hatz Components are square (1:1), Akovis is
 * a wide wordmark at roughly 9:1. Capping only the height would make the
 * wordmark nine times the area of the squares, so both axes are capped and each
 * logo is fitted into that box with its aspect ratio intact -- the squares fill
 * it vertically, the wordmark horizontally.
 *
 * Two gotchas this file works around:
 *
 * 1. Hatz Components is an SVG. SVGs are frequently exported with only a
 *    viewBox and no width/height attributes, so they have no intrinsic size and
 *    collapse when both axes are `auto`. They get an explicit height to resolve
 *    against and derive their width from the viewBox ratio.
 *
 * 2. The selectors are scoped to the wrapper on purpose. A bare single-class
 *    selector ties with UIkit's own `.uk-panel` / `.uk-grid` rules on
 *    specificity, and UIkit's stylesheet loads later, so it would win and the
 *    flex centring would silently do nothing.
 */
.com-fnetjobs-brand-images .com-fnetjobs-brand-images__list {
    --com-fnetjobs-brand-image-height: 80px;
    --com-fnetjobs-brand-image-width: 200px;

    align-items: center;
}

.com-fnetjobs-brand-images .com-fnetjobs-brand-images__item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: var(--com-fnetjobs-brand-image-height);
    max-width: var(--com-fnetjobs-brand-image-width);
}

.com-fnetjobs-brand-images .com-fnetjobs-brand-images__image {
    display: block;
    width: auto;
    height: auto;
    max-width: var(--com-fnetjobs-brand-image-width);
    max-height: 100%;
    object-fit: contain;
    object-position: left center;
}

.com-fnetjobs-brand-images .com-fnetjobs-brand-images__image[src$=".svg"],
.com-fnetjobs-brand-images .com-fnetjobs-brand-images__image[src$=".SVG"] {
    height: 100%;
    width: auto;
}

/*
 * Tighten the gap to the job list below. The wrapper keeps its top padding
 * (spacing to the hero image) but drops the bottom padding, and the adjacent
 * list section gets a reduced top padding instead of UIkit's full section
 * padding. Scoped to the sibling combinator so the list keeps its normal
 * spacing when no brand images are configured.
 */
.com-fnetjobs-brand-images.uk-section {
    padding-bottom: 0;
}

.com-fnetjobs-brand-images + .uk-section-default {
    padding-top: 40px;
}

@media (max-width: 639px) {
    .com-fnetjobs-brand-images .com-fnetjobs-brand-images__list {
        --com-fnetjobs-brand-image-height: 56px;
        --com-fnetjobs-brand-image-width: 145px;
    }

    .com-fnetjobs-brand-images + .uk-section-default {
        padding-top: 28px;
    }
}