/* SAP Salary & Rate Guide promo banner (app/modules/salary_report/views/_promo_banner.php).
   HTML at every width: book image | text | the site's own CTA buttons; Europe map faded in behind on the right. */

.sgb {
    position: relative;
    overflow: hidden;
    font-family: var(--font-main);
}
.sgb--dark { background: radial-gradient(40% 130% at 12% 50%, #16327B 0%, #0D2260 45%, #05153B 80%); color: var(--cl-white); }
.sgb--light { background: #EEF0F5; color: var(--cl-dark-blue); }

.sgb { isolation: isolate; } /* the map (z-index -1) sits above the banner background, below the content */
.sgb__map {
    /* whole of Europe behind the buttons, as in the banner artwork: the UK just left of the buttons, cut by the banner
       top and bottom, faded out to the east */
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 0;
    height: 330px;
    transform: translate(-28%, -50%);
    pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, #000 72%, transparent 100%);
            mask-image: linear-gradient(90deg, #000 72%, transparent 100%);
}
.sgb__map picture { display: block; height: 100%; }
.sgb__map img { display: block; width: auto; max-width: none; height: 100%; }

.sgb__inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(20px, 1.8vw, 36px);
    max-width: 1316px;
    margin: 0 auto;
    padding: clamp(18px, 2vw, 28px) 20px;
}
/* keep the buttons clear of the site's floating side buttons (shown from 1282px) */
@media (min-width: 1282px) {
    .sgb__inner { padding-right: max(20px, calc(200px - (100vw - 1316px) / 2)); }
}

.sgb__bookbox { flex-shrink: 0; display: block; }
.sgb__book { display: block; width: clamp(130px, 11.5vw, 172px); height: auto; margin: -10px 0; }

.sgb__text { flex: 1; min-width: 0; }
.sgb__tag {
    margin: 0 0 10px;
    color: var(--cl-yellow);
    font-family: var(--font-sec);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.sgb--light .sgb__tag { color: #B08A00; }
.sgb__new {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 9px;
    border-radius: 12px;
    background: var(--cl-yellow);
    color: var(--cl-dark-blue);
    letter-spacing: 0;
}
.sgb__title {
    margin: 0;
    color: inherit;
    font-family: var(--font-main);
    font-size: clamp(20px, 1.65vw, 26px);
    font-weight: 400;
    line-height: 1.25;
}
.sgb__title span { display: block; color: var(--cl-yellow); }
.sgb__lead {
    max-width: 560px;
    margin: 12px 0 0;
    font-family: var(--font-sec);
    font-size: clamp(14px, 1.1vw, 16px);
    line-height: 1.6;
    opacity: .9;
}

.sgb__btns { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 14px; flex-shrink: 0; }
.sgb .sgb__btn { background: transparent; }
.sgb--light .sgb__btn { background: rgba(255, 255, 255, .55); }
.sgb--dark .sgb__btn { background: rgba(5, 21, 59, .5); }
.sgb .sgb__btn .btn__text { font-family: var(--font-main); white-space: nowrap; }
.sgb--dark .sgb__btn:hover { background: var(--cl-yellow); border-color: var(--cl-yellow); }
.sgb--dark .sgb__btn:hover .btn__text { color: var(--cl-dark-blue); }
.sgb .sgb__btn { align-items: center; }

/* light: buttons get a solid navy background on hover (the site's .btn hover), so the white text never sits on the map */
.sgb--light .sgb__btn:hover { background: var(--cl-dark-blue); border-color: var(--cl-dark-blue); }

/* tablet: buttons under the text */
@media (max-width: 1100px) {
    .sgb__btns { position: static; } /* the map is placed on the whole banner instead */
    .sgb__map { left: 50%; height: 380px; transform: translate(-35%, -50%); }
    .sgb__inner { flex-wrap: wrap; }
    .sgb__text { flex-basis: calc(100% - 240px); }
    .sgb__btns { flex-direction: row; flex-wrap: wrap; width: 100%; padding-left: calc(clamp(130px, 11.5vw, 172px) + clamp(20px, 1.8vw, 36px)); }
}

/* phone: stacked, book on top */
@media (max-width: 640px) {
    .sgb__inner { flex-direction: column; align-items: flex-start; padding: 28px 20px 32px; }
    .sgb__book { width: 130px; margin: 0 0 6px -4px; }
    .sgb__text { flex-basis: auto; }
    .sgb__btns { flex-direction: column; align-items: flex-start; padding-left: 0; }
    .sgb__map {
        /* starts at the left edge of the screen so Ireland and Portugal show; eastern Europe runs off to the right */
        left: 0;
        height: 340px;
        transform: translate(-20px, -50%);
        opacity: .6;
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
                mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
    }
}

/* ---------- Country page (sap-recruitment/{slug}) ---------- */
/* separator above the banner, same line as the page's other section dividers */
.sgb-sep {
    width: calc(100% - 40px);
    max-width: 1276px;
    height: 2px;
    /* top margin = ac(100px, 60px), same as the page's other section dividers (.faq, .testimonials--country) */
    /* bottom margin (gap to the banner) = half of that, ac(50px, 30px) */
    margin: max(60px, min(calc(14.28571px + 5.95238vw), 100px)) auto max(30px, min(calc(7.14286px + 2.97619vw), 50px));
    background-color: var(--cl-tealish);
}
/* FAQ divider sits close under the banner, as in the mockup */
#salary-guide-banner + .faq { margin-top: max(30px, min(calc(7.14286px + 2.97619vw), 50px)); } /* ac(50px, 30px), same as above the banner */

/* salary guide button under "Search SAP Talent in ..." */
/* talent + guide buttons: as wide as the longer label (the site caps them at 350px, too narrow for "Netherlands SAP Salary & Rates Guide") */
.specialist__btns { display: inline-grid; gap: 14px; max-width: 100%; margin-top: auto; }
.specialist--country .specialist__card .specialist__btns .specialist__btn { width: 100%; max-width: none; margin: 0; }
/* labels keep clear of the border; a long one ("United Kingdom SAP Salary & Rates Guide") wraps to two even lines
   when the card is too narrow, instead of running into or past the border. No vertical padding: the arrow circle
   sets the button's height, so there is no gap under it */
.specialist--country .specialist__card .specialist__btns .specialist__btn { align-items: center; }
.specialist--country .specialist__card .specialist__btns .btn__text {
    padding: 0 18px 0 12px;
    white-space: normal;
    text-wrap: balance;
}

/* banner placed between page sections (SAP Jobs, SAP Talent): half the regular section spacing above it */
.sgb-gap { margin-top: max(30px, min(calc(7.14286px + 2.97619vw), 50px)); }
/* ...and the same gap below it: the next section (clients / star-text, both start with a divider line) */
.sgb-gap + section { margin-top: max(30px, min(calc(7.14286px + 2.97619vw), 50px)) !important; }

/* "Register CV" + "{Country} SAP Salary & Rates Guide" side by side (star-text section, country page) */
.star-text__btns { display: flex; flex-wrap: wrap; gap: 14px 20px; margin-top: max(15px, min(calc(.14286px + 1.93452vw), 28px)); }
.star-text__btns .star-text__btn { margin: 0 !important; }
/* phones: "United Kingdom SAP Salary & Rates Guide" wraps at a line height that keeps both lines within the arrow
   circle's height (no gap under the circle) */
@media (max-width: 640px) {
    .star-text__btns .star-text__btn { align-items: center; max-width: 100%; }
    .star-text__btns .btn__text { line-height: 1.15; text-wrap: balance; }
}