/* Careers page styling */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root {
    --careers-navy: #173158;
    --careers-pink: #E83161;
    --careers-muted: #5D6F8A;
    --careers-light: #F7F8F9;
    --careers-border: #EDEFF2;
}

.careers-intro,
.careers-jobs {
    font-family: 'Poppins', 'Inter', sans-serif;
}

/* ---------- Banner: outer bounds 1630x400 from Figma ---------- */
.careers-breadcrumb-section {
    padding-top: 16px;
    padding-bottom: 0;
}

.careers-banner-section .hero-split-wrap {
    max-width: 1630px;
    height: 400px !important;
}

.careers-banner-section .hero-split-left,
.careers-banner-section .hero-split-right {
    height: 400px !important;
    min-height: 0 !important;
}

@media (min-width: 1200px) {
    .careers-banner-section .hero-split-wrap {
        max-width: 1640px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        --bs-gutter-x: 0 !important;
        gap: 10px !important;
    }

    .careers-banner-section .col-lg-8 {
        width: 1230px !important;
        flex: 0 0 1230px !important;
        max-width: 1230px !important;
    }

    .careers-banner-section .col-lg-4 {
        width: 400px !important;
        flex: 0 0 400px !important;
        max-width: 400px !important;
    }

    .careers-banner-section .hero-side-image {
        width: 400px !important;
        height: 400px !important;
        object-fit: cover !important;
    }
}

.careers-banner-section .careers-banner-left {
    overflow: hidden;
    padding: 60px 65px;
}

/* Title @ 48 bold */
.careers-banner-section .hero-split-left h1 {
    font-size: 48px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: 0;
    margin-bottom: 25px;
}

/* Description box: 676x120 */
.careers-banner-section .careers-banner-desc-box {
    width: 676px;
    max-width: 100%;
    height: 120px;
    margin-bottom: 1.25rem;
}

.careers-banner-section .hero-split-left .hero-desc,
.careers-banner-section .hero-split-left .hero-sub-desc {
    font-size: 20px;
    line-height: 1.5;
    font-weight: 400;
    margin-bottom: 0.5rem;
}

.careers-banner-section .hero-split-left .hero-sub-desc {
    margin-bottom: 0;
}

.careers-banner-section .careers-banner-left .hero-text {
    position: relative;
    z-index: 2;
}

/* Decorative pluses inside the gradient card */
.careers-banner-section .careers-banner-left .careers-banner-shape {
    position: absolute;
    right: -2px;
    bottom: -1px;
    z-index: 0;
    pointer-events: none;
    line-height: 0;
}

.careers-banner-section .careers-banner-left .careers-banner-shape svg {
    display: block;
    height: auto;
    max-height: 100%;
}

/* CTA button — 260x60 */
.careers-banner-section .careers-banner-btn {
    width: 260px;
    height: 60px;
    font-size: 16px;
}

.careers-banner-section .careers-banner-btn svg {
    position: absolute;
    left: 24px;
}

/* Intro section: navy heading box + light copy box */
.careers-intro {
    padding: 80px 0 30px;
    background: #fff;
}

.careers-intro-wrap {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 18px;
}

.careers-intro-left,
.careers-intro-right {
    flex: 0 0 811px;
    width: 811px;
    height: 811px;
    max-width: 811px;
    min-width: 0;
}

.careers-intro-left {
    background: #173158;
    padding: 87px 82px 0px 92px;
}

.careers-intro-right {
    position: relative;
    background: #F7F8F9;
    color: #183158;
    padding: 132px 119px 499px 117px;
}

.careers-intro-title {
    margin: 0;
    color: #fff;
    font-size: 60px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 0;
    max-width: 560px;
}

.careers-intro-arrow {
    position: absolute;
    top: 42px;
    right: 47px;
    display: inline-flex;
    line-height: 0;
}

.careers-intro-arrow img {
    width: 50px;
    height: 50px;
    display: block;
}

.careers-intro-right p {
    margin: 0 0 18px;
    color: #183158;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    max-width: 560px;
}

.careers-intro-right p strong {
    font-weight: 700;
    color: #183158;
}

.careers-intro-right p:last-child {
    margin-bottom: 0;
}

/* Job cards grid */
.careers-jobs {
    padding: 60px 0 80px;
    background: #fff;
}

.careers-jobs-grid {
    display: grid;
    grid-template-columns: repeat(3, 520px);
    justify-content: space-between;
    gap: 40px;
}

.career-card {
    background: #F7F8F9;
    width: 520px;
    height: 520px;
    padding: 55px 60px;
    display: flex;
    flex-direction: column;
}

.career-card-title {
    margin: 0 0 18px;
    color: #183158;
    font-size: 36px;
    font-weight: 600;
    line-height: 1.2;
}

.career-card-body {
    flex: 1 1 auto;
}

.career-card-text {
    margin: 0 0 30px;
    color: #183158;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.55;
}

.career-card-text:last-child {
    margin-bottom: 0;
}

.career-card-text strong {
    font-weight: 700;
}

.career-card-btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 25px;
    width: 270px;
    height: 60px;
    padding: 0 17px 0 22px;
    background: #E73161;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;
    border: 2px solid transparent;
    border-radius: 0;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.career-card-btn:hover,
.career-card-btn:focus {
    background: #fff !important;
    color: #173158 !important;
    /* border: 2px solid #E83161 !important; */
    text-decoration: none;
}

.career-card-btn:hover svg path,
.career-card-btn:focus svg path {
    fill: #E83161 !important;
}

.career-card-btn svg {
    flex-shrink: 0;
}

/* Below the 1640px desktop fit – let the two boxes shrink together */
@media (max-width: 1679.98px) {

    .careers-intro-left,
    .careers-intro-right {
        flex: 0 0 calc(50% - 9px);
        width: auto;
        height: auto;
        aspect-ratio: 1 / 1;
        max-width: none;
        padding: 60px 64px;
    }
}

/* Tablet */
@media (max-width: 1199.98px) {

    .careers-intro-left,
    .careers-intro-right {
        padding: 40px 36px;
    }

    .careers-intro-title {
        font-size: 36px;
    }

    .careers-jobs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: stretch;
        gap: 24px;
    }

    .career-card {
        width: auto;
        height: auto;
        min-height: 0;
        padding: 28px 24px;
    }
}

/* Mobile */
@media (max-width: 711.98px) {
    .careers-intro {
        padding: 30px 0 10px;
    }

    .careers-intro-wrap {
        flex-direction: column;
        gap: 14px;
    }

    .careers-intro-left,
    .careers-intro-right {
        flex: 1 1 100%;
        width: 100%;
        height: auto;
        aspect-ratio: auto;
        padding: 28px 22px;
    }

    .careers-intro-title {
        font-size: 28px;
        line-height: 1.2;
    }

    .careers-intro-arrow {
        top: 18px;
        right: 18px;
    }

    .careers-intro-arrow svg {
        width: 32px;
        height: 32px;
    }

    .careers-intro-right p {
        font-size: 15px;
    }

    .careers-jobs {
        padding: 0px 0 30px;
    }

    .careers-jobs-grid {
        grid-template-columns: 1fr;
        justify-content: stretch;
        gap: 18px;
    }

    .career-card {
        width: auto;
        height: auto;
    }

    .career-card {
        padding: 24px 22px;
    }

    .career-card-title {
        font-size: 22px;
        max-width: 100%;
    }

    .career-card-btn {
        width: 100%;
        justify-content: center;
    }

    /* Standardized Mobile Intro Blocks */
    .kp-mobile-intro-navy {
        width: 100% !important;
        max-width: 322px !important;
        height: 322px !important;
        background: #173158 !important;
        display: flex !important;
        /* align-items: center !important; */
        padding: 50px 60px !important;
        margin: 0 0 10px !important;
    }

    .kp-mobile-intro-navy h2 {
        color: #FFFFFF !important;
        font-size: 30px !important;
        font-weight: 600 !important;
        line-height: 1.15 !important;
        width: 260px !important;
        margin: 0 !important;
        text-align: center !important;
    }

    .kp-mobile-intro-light {
        width: 100% !important;
        max-width: 322px !important;
        /* height: 606px !important; */
        background: #F7F8F9 !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 30px 30px !important;
        margin: 0 0 10px !important;
    }

    .kp-mobile-intro-light .large-text {
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #173158 !important;
        line-height: 1.3 !important;
        width: 261px !important;
        margin-bottom: 25px !important;
        text-align: center !important;
    }

    .kp-mobile-intro-light .small-text {
        font-size: 12px !important;
        color: #173158 !important;
        line-height: 1.6 !important;
        width: 260px !important;
        margin-bottom: 20px !important;
        text-align: center !important;
    }

    .kp-mobile-intro-light .small-text:last-child {
        margin-bottom: 0 !important;
    }

    /* Mobile Job Slider */
    .kp-mobile-job-slider-container {
        overflow: hidden;
        position: relative;
        /* padding-bottom: 20px; */
    }

    .kp-mobile-job-slider-track {
        display: flex;
        transition: transform 0.3s ease;
        touch-action: pan-y;
        will-change: transform;
    }

    .kp-job-card-mobile {
        flex: 0 0 322px;
        width: 322px;
        height: 433px;
        background: #F7F8F9;
        padding: 40px 30px;
        margin-right: 15px;
        display: flex;
        flex-direction: column;
    }

    .kp-job-card-mobile h3 {
        font-size: 30px !important;
        font-weight: 600 !important;
        color: #173158 !important;
        margin-bottom: 5px !important;
    }

    .kp-job-card-mobile p {
        font-size: 12px !important;
        color: #173158 !important;
        line-height: 1.6 !important;
        margin-bottom: 15px !important;
    }

    .kp-job-card-mobile .btn-mobile {
        margin-top: auto;
        width: 260px !important;
        height: 40px !important;
        background: #E83161 !important;
        color: #FFFFFF !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 15px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        border-radius: 0 !important;
    }

    .kp-job-pagination {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-top: 30px;
    }

    .kp-job-dot {
        width: 12px;
        height: 12px;
        background: #EDEFF2;
        border: 0;
        padding: 0;
        border-radius: 0;
        /* Square dot */
        appearance: none;
        -webkit-appearance: none;
        cursor: pointer;
    }

    .kp-job-dot.is-active {
        background: #E83161;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   Laptop Screen Overrides (992px to 1639.98px)
   Mirrors the same range used by /categories, /brands, /products,
   /offers, /about-us, /contact-us and /help-center so the careers
   banner, intro and jobs grid fit the laptop viewport without being
   clipped by the global 1640px .kp-container width. PC (≥1640px) and
   mobile (<768px) layouts are not touched.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) and (max-width: 1639.98px) {

    /* Containers: make fluid for the laptop range. */
    .kp-container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 40px !important;
        padding-right: 40px !important;
    }

    /* Banner — override the in-file @media (min-width: 1200px) rule that
       forces .careers-banner-section .col-lg-8 to 1230px and .col-lg-4
       to 400px. Same specificity + !important and later source order, so
       it wins inside the 1200–1639.98 overlap. */
    .careers-banner-section .hero-split-wrap {
        max-width: 100% !important;
        height: 380px !important;
        gap: 10px !important;
        --bs-gutter-x: 0 !important;
    }

    .careers-banner-section .col-lg-8 {
        width: auto !important;
        flex: 1 1 0% !important;
        max-width: none !important;
    }

    .careers-banner-section .col-lg-4 {
        width: 350px !important;
        flex: 0 0 350px !important;
        max-width: 350px !important;
    }

    .careers-banner-section .hero-split-left,
    .careers-banner-section .hero-split-right {
        height: 380px !important;
        min-height: 0 !important;
    }

    .careers-banner-section .careers-banner-left {
        padding: 40px 40px !important;
    }

    .careers-banner-section .hero-split-left h1 {
        font-size: 38px !important;
        line-height: 1.12 !important;
        margin-bottom: 16px !important;
    }

    .careers-banner-section .careers-banner-desc-box {
        /* width: 100% !important; */
        max-width: 500px !important;
        height: auto !important;
        margin-bottom: 1rem !important;
    }

    .careers-banner-section .hero-split-left .hero-desc,
    .careers-banner-section .hero-split-left .hero-sub-desc {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    .careers-banner-section .careers-banner-btn {
        width: 220px !important;
        height: 52px !important;
        font-size: 15px !important;
    }

    .careers-banner-section .hero-side-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .careers-banner-section .careers-banner-shape svg {
        max-width: 320px !important;
        max-height: 320px !important;
    }
}

/* Intro typography + Jobs grid: at 1200–1639 the existing
   3×520 = 1640px jobs grid still overflows because the in-file
   (max-width: 1199.98px) collapse to 2-columns doesn't fire in this
   range. Switch to a 3-column fluid grid and trim intro title size. */
@media (min-width: 1200px) and (max-width: 1639.98px) {
    .careers-intro-title {
        font-size: 44px !important;
    }

    .careers-intro-right p {
        font-size: 15px !important;
        max-width: 100% !important;
    }

    .careers-jobs-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 24px !important;
        justify-content: stretch !important;
    }

    .career-card {
        width: auto !important;
        height: auto !important;
        min-height: 440px !important;
        padding: 36px 28px !important;
    }

    .career-card-title {
        font-size: 28px !important;
        max-width: 100% !important;
    }

    .career-card-btn {
        width: 230px !important;
        height: 52px !important;
        font-size: 13px !important;
    }
}

/* ───────── Shift Breakpoint for Careers Page (apply mobile until 712px, then tablet) ───────── */
@media (min-width: 712px) and (max-width: 767.98px) {

    /* Hide Mobile Layout */
    .d-md-none {
        display: none !important;
    }

    /* Show Tablet/Desktop Layout */
    .d-none.d-md-block {
        display: block !important;
    }

    .d-none.d-md-flex {
        display: flex !important;
    }

    .d-none.d-md-inline {
        display: inline !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   Tablet Screen Overrides (712px to 991.98px)
   The global .kp-container is 1640px with no responsive fallback in
   this range, so the careers banner was being clipped on tablet
   widths and the banner image col was hidden by markup. The existing
   `(max-width: 1679.98px)` rule already collapses the intro boxes and
   `(max-width: 1199.98px)` collapses the jobs grid to 2-col, so most
   page sections are already responsive — this block fills the
   container + banner gap.

   Mobile <712 keeps the existing `(max-width: 711.98px)` rules, and
   laptop 992–1639.98 keeps its own block. PC ≥1640 is not touched.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 712px) and (max-width: 991.98px) {

    /* Containers: make fluid for the tablet range. */
    .kp-container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
    }



    /* Banner — the image col (`col-12 col-lg-4 d-none d-lg-block`) is
       hidden below lg in markup. Force it visible at tablet and shrink
       both columns into a fluid flex split. */
    .careers-banner-section .hero-split-wrap {
        max-width: 100% !important;
        height: 320px !important;
        gap: 10px !important;
        --bs-gutter-x: 0 !important;
    }

    .careers-banner-section .hero-split-wrap>.col-lg-8,
    .careers-banner-section .hero-split-wrap>.col-lg-4 {
        flex: 0 0 calc(50% - 5px) !important;
        max-width: calc(50% - 5px) !important;
        width: calc(50% - 5px) !important;
    }

    /* Override the markup `d-none d-lg-block` so the image col becomes
       visible inside the tablet range. */
    .careers-banner-section .hero-split-wrap>.col-lg-4 {
        display: block !important;
    }

    .careers-banner-section .hero-split-left,
    .careers-banner-section .hero-split-right {
        height: 320px !important;
        min-height: 0 !important;
    }

    .careers-banner-section .careers-banner-left {
        padding: 28px 28px !important;
    }

    .careers-banner-section .hero-split-left h1 {
        font-size: 28px !important;
        line-height: 1.15 !important;
        margin-bottom: 12px !important;
    }

    .careers-banner-section .careers-banner-desc-box {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin-bottom: 0.75rem !important;
    }

    .careers-banner-section .hero-split-left .hero-desc,
    .careers-banner-section .hero-split-left .hero-sub-desc {
        font-size: 12px !important;
        line-height: 1.45 !important;
    }

    .careers-banner-section .careers-banner-btn {
        width: 200px !important;
        height: 44px !important;
        font-size: 13px !important;
    }

    /* Decorative pluses SVG inside the gradient card — clamp so it
       doesn't dominate the narrower tablet card. */
    .careers-banner-section .careers-banner-left .careers-banner-shape svg {
        max-width: 220px !important;
        max-height: 220px !important;
        opacity: 0.45 !important;
        display: none !important;
    }

    /* Right image col content */
    .careers-banner-section .hero-side-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .careers-banner-section .hero-arrow-chip-image {
        top: 12px !important;
        left: 12px !important;
    }

    .careers-banner-section .hero-arrow-chip-image svg {
        width: 38px !important;
        height: 38px !important;
    }

    /* Intro + jobs sections — the existing `(max-width: 1679.98px)` and
       `(max-width: 1199.98px)` rules already collapse intro boxes and
       jobs grid. Polish a few sizes for the tablet sub-range. */
    .careers-intro {
        padding: 40px 0 20px !important;
    }

    .careers-intro-left,
    .careers-intro-right {
        padding: 32px 28px !important;
    }

    .careers-intro-title {
        font-size: 30px !important;
        line-height: 1.15 !important;
    }

    .careers-intro-right p {
        font-size: 14px !important;
        line-height: 1.55 !important;
    }

    .careers-intro-right p:first-child {
        font-size: 18px !important;
    }

    .careers-intro-arrow {
        top: 18px !important;
        right: 18px !important;
    }

    .careers-intro-arrow img {
        width: 36px !important;
        height: 36px !important;
    }

    .careers-jobs {
        padding: 40px 0 60px !important;
    }

    .careers-jobs-grid {
        gap: 16px !important;
    }

    .career-card {
        padding: 24px 22px !important;
        min-height: 360px !important;
    }

    .career-card-title {
        font-size: 22px !important;
        max-width: 100% !important;
        margin-bottom: 12px !important;
    }

    .career-card-text {
        font-size: 13px !important;
        line-height: 1.55 !important;
    }

    .career-card-body {
        margin-bottom: 18px !important;
    }

    .career-card-btn {
        width: 220px !important;
        height: 48px !important;
        font-size: 13px !important;
        padding: 0 0 0 18px !important;
        gap: 15px !important;
    }
}

/* ─── Banner "CONTACT WITH US" button hover ─── */
.careers-banner-section .careers-banner-btn {
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
    border: 2px solid transparent;
}

.careers-banner-section .careers-banner-btn:hover,
.careers-banner-section .careers-banner-btn:focus {
    background: #fff !important;
    color: #173158 !important;
    /* border-color: #E83161 !important; */
    text-decoration: none;
}

.careers-banner-section .careers-banner-btn:hover svg path,
.careers-banner-section .careers-banner-btn:focus svg path {
    fill: #E83161 !important;
}

/* ─── Mobile banner button hover ─── */
.kp-mobile-careers-banner-btn {
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.kp-mobile-careers-banner-btn:hover,
.kp-mobile-careers-banner-btn:focus {
    background: #ffffff !important;
    color: #173158 !important;
    text-decoration: none !important;
}

.kp-mobile-careers-banner-btn:hover svg path,
.kp-mobile-careers-banner-btn:focus svg path {
    fill: #E83161 !important;
}

.kp-mobile-banner-content a:hover,
.kp-mobile-banner-content a:focus {
    background: #fff !important;
    color: #173158 !important;
    border: 2px solid #E83161 !important;
    text-decoration: none;
}

/* ─── "SUBMIT YOUR PROFILE" mobile button hover ─── */
.kp-job-card-mobile .btn-mobile:hover,
.kp-job-card-mobile .btn-mobile:focus {
    background: #fff !important;
    color: #E83161 !important;
    border: 2px solid #E83161 !important;
    text-decoration: none;
}

.kp-job-card-mobile .btn-mobile:hover svg path,
.kp-job-card-mobile .btn-mobile:focus svg path {
    fill: #E83161 !important;
}

/* ─── Sticky Breadcrumb ─── */
.careers-breadcrumb-sticky {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: var(--nav-mega-top, 140px) !important;
    z-index: 950 !important;
    background: #ffffff !important;
    padding: 20px 0 !important;
}

/* Banner split right image color layer opacity override */
.careers-banner-section .hero-split-right::before {
    background: #173158;
    opacity: 0.2;
}

@media (min-width: 712px) and (max-width: 991.98px) {
    .careers-breadcrumb-sticky {
        top: 85px !important;
    }
}