/* Home page (mock-up Oct 2026): on desktop a hero the height of the country pages, with the SAP Salary & Rate Guide
   banner straight under it. Phones and tablets (< 1024px) keep the site's original hero, photo included. */

@media (min-width: 1024px) {
    .hero.hero--compact {
        /* !important: site rules .hero:not(...)x9 force a full-screen hero (30vh top padding) */
        --bar: 96px;
        --hero-h: max(500px, min(calc(317.14286px + 23.80952vw), 660px));
        height: auto !important;
        min-height: var(--hero-h) !important;
        max-height: none !important;
        padding-top: clamp(80px, 6vw, 88px) !important;
    }

    .hero--compact > .cont.h-full { flex: 1; display: flex; flex-direction: column; justify-content: center; height: auto; }

    .hero--compact .hero__title-box { max-width: 560px; padding: 0 0 clamp(16px, 2vw, 28px); }
    .hero--compact .hero__title { font-size: clamp(34px, 3.5vw, 52px); line-height: 1.2; }
    .hero--compact .hero__subtitle { margin-top: clamp(12px, 1.3vw, 18px); font-size: clamp(15px, 1.25vw, 18px); }

    /* photo: on the right, standing on the testimonial bar, filling the navy area under the menu;
       the photo's right edge lines up with the right edge of the content (the SAP Jobs button) */
    .hero--compact .hero__img {
        left: auto;
        right: max(20px, calc(50% - 638px));
        bottom: var(--bar);
        width: auto;
        max-width: none;
        height: calc(var(--hero-h) - var(--bar) - clamp(80px, 7vw, 100px));
        max-height: none;
        transform: none;
    }
    .hero--compact .hero__img picture { display: block; height: 100%; }
    .hero--compact .hero__img img { width: auto; height: 100%; object-position: center bottom; }
    .hero--compact .hero__decor { opacity: .04 !important; }

    /* slim testimonial / buttons bar with dividers */
    .hero--compact .hero__bottom {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        min-height: var(--bar);
        padding: 10px 0;
        background: #505B7C;
        backdrop-filter: none;
    }
    .hero--compact .hero__bottom .cont { flex: 1; align-items: center; }
    .hero--compact .hero__slider-box { max-width: 420px; padding-right: 24px; margin-right: 0; border-right: 1px solid rgba(255, 255, 255, .35); }
    .hero--compact .hero__slider { min-height: 0; }
    .hero--compact .hero__simplebar { max-height: none; }
    .hero--compact .hero__simplebar .simplebar-track { display: none; }
    .hero--compact .hero__descr > * { font-size: clamp(14px, 1.05vw, 15px); line-height: 19px; }
    .hero--compact .hero__pos { margin-top: 6px; font-size: 13px; }
    .hero--compact .hero__btn-box { margin-top: 0; }
    .hero.hero--compact .hero__btn { align-items: center; margin-top: 0; }
    .hero.hero--compact .hero__btn + .hero__btn { padding-left: clamp(20px, 2.4vw, 32px); border-left: 1px solid rgba(255, 255, 255, .35); }
    .hero.hero--compact .hero__btn .arrow-btn { width: 56px !important; height: 56px !important; }
    .hero.hero--compact .hero__btn .arrow-btn__icon { width: 20px !important; height: 20px !important; }
    .hero--compact .hero__btn-text { line-height: clamp(44px, 4vw, 56px); font-size: clamp(17px, 1.4vw, 20px); }

    /* guide banner straight under the hero; half the regular section spacing down to the next divider (as on other pages) */
    #salary-guide-banner + .specialist { margin-top: max(30px, min(calc(7.14286px + 2.97619vw), 50px)); }
}

/* floating side buttons (shown from 1282px): centred on the navy part of the hero, between the menu (71px) and the
   testimonial bar (96px): (71px + hero height - 96px) / 2 minus half the buttons' block (5 x 75px) */
@media (min-width: 1282px) {
    /* ...but never under the side buttons (178px wide): below ~1650px the photo stops 12px short of them */
    .hero--compact .hero__img { right: max(190px, calc(50% - 638px)); }
    .btn-box { top: calc(max(500px, min(calc(317.14286px + 23.80952vw), 660px)) / 2 - 200px); }
}