/* ============================================================
   ALBASAER — CAREERS PAGE CSS (English / LTR)
   Figma: vmTA4IVgGrXqZYp0eeWe2h  node 906-5427
   ============================================================ */

/* ── Page wrapper ── */
.careers-page {
    background: #f9fafb;
}

/* ════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════ */
.careers-hero {
    position: relative;
    background: #101828;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 80px 24px 100px;
    min-height: 462px;
}

/* Decorative glows */
.careers-hero__glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.careers-hero__glow--red {
    width:  500px;
    height: 500px;
    top:    -160px;
    right:  -80px;
    background: rgba(138, 21, 56, 0.2);
    filter: blur(100px);
}

.careers-hero__glow--green {
    width:  300px;
    height: 300px;
    bottom: 0;
    left:   -80px;
    background: rgba(16, 185, 129, 0.1);
    filter: blur(80px);
}

/* Hero content */
.careers-hero__body {
    position: relative;
    z-index:  1;
    max-width: 1200px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
}

/* Badge pill */
.careers-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 39px;
    padding: 0 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16777200px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.35px;
    margin-bottom: 24px;
}

/* Main heading */
.careers-hero__title {
    color:       #fff;
    font-size:   56px;
    font-weight: 800;
    line-height: 70px;
    max-width:   560px;
    margin:      0 0 24px;
}

/* Sub-description */
.careers-hero__desc {
    color:       #e5e7eb;
    font-size:   18px;
    font-weight: 400;
    line-height: 29.25px;
    max-width:   571px;
    margin:      0;
}

/* ════════════════════════════════════════════
   TRAIT CARDS  (overlap hero by ~40px)
   ════════════════════════════════════════════ */
.careers-traits {
    position:   relative;
    z-index:    2;
    margin-top: -40px;
}

.careers-traits__inner {
    max-width: 1152px;
    margin:    0 auto;
    padding:   0 24px;
    display:   grid;
    grid-template-columns: repeat(3, 1fr);
    gap:       24px;
}

/* Single trait card */
.careers-trait-card {
    background:    #fff;
    border:        1px solid #f3f4f6;
    border-radius: 24px;
    box-shadow:    0 10px 15px rgba(0, 0, 0, 0.05),
                   0  4px  6px rgba(0, 0, 0, 0.05);
    display:       flex;
    flex-direction: column;
    align-items:   center;
    text-align:    center;
    padding:       32px 32px 32px;
    min-height:    221px;
}

/* Icon wrapper */
.careers-trait-card__icon-wrap {
    width:         56px;
    height:        56px;
    border-radius: 16px;
    display:       flex;
    align-items:   center;
    justify-content: center;
    flex-shrink:   0;
    margin-bottom: 16px;
}

/* Title */
.careers-trait-card__title {
    color:         #101828;
    font-size:     20px;
    font-weight:   700;
    line-height:   30px;
    margin:        0 0 8px;
}

/* Description */
.careers-trait-card__desc {
    color:       #6a7282;
    font-size:   14px;
    font-weight: 400;
    line-height: 22.75px;
    max-width:   286px;
    margin:      0;
}

/* ════════════════════════════════════════════
   JOBS SECTION
   ════════════════════════════════════════════ */
.careers-jobs {
    padding: 80px 0 96px;
}

.careers-jobs__inner {
    max-width: 1152px;
    margin:    0 auto;
    padding:   0 24px;
}

/* Section header row */
.careers-jobs__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   28px;
    min-height:      48px;
}

.careers-jobs__heading {
    color:       #101828;
    font-size:   32px;
    font-weight: 700;
    line-height: 48px;
    margin:      0;
}

.careers-jobs__count {
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    height:        33px;
    padding:       0 16px;
    background:    rgba(138, 21, 56, 0.1);
    border-radius: 16777200px;
    color:         #8a1538;
    font-size:     14px;
    font-weight:   700;
    line-height:   21px;
    white-space:   nowrap;
}

/* Jobs list */
.careers-jobs__list {
    display:        flex;
    flex-direction: column;
    gap:            28px;
}

/* Single job card */
.career-card {
    background:      #fff;
    border:          1px solid #f3f4f6;
    border-radius:   24px;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         0 33px;
    min-height:      125px;
    gap:             24px;
    transition:      box-shadow 0.2s ease, transform 0.2s ease;
}

.career-card:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* "View Details" button — left side */
.career-card__btn {
    flex-shrink:     0;
    width:           151px;
    height:          48px;
    background:      #f9fafb;
    border:          none;
    border-radius:   12px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           #101828;
    font-size:       16px;
    font-weight:     700;
    text-decoration: none;
    white-space:     nowrap;
    cursor:          pointer;
    transition:      background 0.2s ease, color 0.2s ease;
}

.career-card__btn:hover {
    background: #101828;
    color:      #fff;
    text-decoration: none;
}

/* Job info — right side */
.career-card__info {
    flex:           1;
    display:        flex;
    flex-direction: column;
    gap:            8px;
}

.career-card__title {
    color:       #101828;
    font-size:   20px;
    font-weight: 700;
    line-height: 30px;
    margin:      0;
    white-space: nowrap;
}

/* Metadata row */
.career-card__meta {
    display:     flex;
    align-items: center;
    gap:         16px;
}

.career-card__meta-item {
    display:     inline-flex;
    align-items: center;
    gap:         6px;
    color:       #6a7282;
    font-size:   14px;
    font-weight: 400;
    line-height: 21px;
    white-space: nowrap;
}

.career-card__meta-item svg {
    flex-shrink: 0;
    color:       #6a7282;
}

/* ════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .careers-hero__title {
        font-size:   44px;
        line-height: 56px;
    }

    .careers-traits__inner {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    .career-card__title {
        white-space: normal;
    }
}

@media (max-width: 768px) {
    .careers-hero {
        padding: 60px 24px 80px;
        min-height: auto;
    }

    .careers-hero__title {
        font-size:   36px;
        line-height: 46px;
        max-width:   100%;
    }

    .careers-hero__desc {
        font-size: 16px;
        max-width: 100%;
    }

    .careers-traits {
        margin-top: -24px;
    }

    .careers-traits__inner {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .careers-trait-card {
        min-height: auto;
    }

    .careers-jobs__header {
       
        gap:             12px;
    }

    .careers-jobs__heading {
        font-size:   22px;
        line-height: 25px;
    }

    .career-card {
        flex-direction:  column;
        align-items:     flex-start;
        padding:         24px;
        gap:             16px;
    }

    .career-card__info {
        align-items: flex-start;
        text-align:  left;
    }

    .career-card__meta {
        flex-wrap: wrap;
        gap: 12px;
    }

    .career-card__btn {
        width: 100%;
    }
}

/* ════════════════════════════════════════════
   CAREER DETAIL MODAL
   ════════════════════════════════════════════ */

/* Backdrop */
.career-modal-overlay {
    position:        fixed;
    inset:           0;
    background:      rgba(0, 0, 0, 0.5);
    z-index:         3000;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         24px;
    opacity:         0;
    visibility:      hidden;
    transition:      opacity 0.25s ease, visibility 0.25s ease;
}

.career-modal-overlay.is-open {
    opacity:    1;
    visibility: visible;
}

/* Panel */
.career-modal {
    background:     #fff;
    border-radius:  24px;
    box-shadow:     0 25px 50px rgba(0, 0, 0, 0.25);
    width:          800px;
    max-width:      100%;
    max-height:     90vh;
    display:        flex;
    flex-direction: column;
    overflow:       hidden;
    transform:      translateY(20px);
    transition:     transform 0.25s ease;
}

.career-modal-overlay.is-open .career-modal {
    transform: translateY(0);
}

/* ── Header ── */
.career-modal__header {
    position:      relative;
    border-bottom: 1px solid #f3f4f6;
    padding:       32px 32px 24px;
    flex-shrink:   0;
}

.career-modal__close {
    position:        absolute;
    top:             32px;
    left:            32px;
    width:           40px;
    height:          40px;
    background:      #f3f4f6;
    border:          none;
    border-radius:   50%;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           #6a7282;
    transition:      background 0.2s;
}

.career-modal__close:hover {
    background: #e5e7eb;
}

.career-modal__header-content {
    padding-left:   64px;
    display:        flex;
    flex-direction: column;
    gap:            12px;
}

.career-modal__title-row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             16px;
}

.career-modal__title {
    color:       #101828;
    font-size:   28px;
    font-weight: 700;
    line-height: 35px;
    margin:      0;
    flex:        1;
}

.career-modal__icon-badge {
    width:           48px;
    height:          48px;
    background:      #eff6ff;
    border-radius:   14px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    color:           #3b82f6;
}

.career-modal__meta {
    display:     flex;
    align-items: center;
    gap:         20px;
    flex-wrap:   wrap;
}

.career-modal__meta-item {
    display:     inline-flex;
    align-items: center;
    gap:         6px;
    color:       #6a7282;
    font-size:   15px;
    font-weight: 400;
    line-height: 22.5px;
    white-space: nowrap;
}

/* ── Body (scrollable rich-text area) ── */
.career-modal__body {
    flex:       1;
    overflow-y: auto;
    padding:    32px;
}

.career-modal__content {
    color:       #4a5565;
    font-size:   16px;
    line-height: 1.8;
}

.career-modal__content h3,
.career-modal__content h4 {
    color:       #101828;
    font-size:   18px;
    font-weight: 700;
    line-height: 27px;
    margin:      24px 0 12px;
}

.career-modal__content h3:first-child,
.career-modal__content h4:first-child {
    margin-top: 0;
}

.career-modal__content p {
    margin: 0 0 12px;
}

.career-modal__content ul,
.career-modal__content ol {
    padding-left: 20px;
    margin:       0 0 16px;
}

.career-modal__content li {
    margin-bottom: 8px;
}

.career-modal__content strong {
    font-weight: 700;
    color:       #101828;
}

/* ── Footer ── */
.career-modal__footer {
    background:      #f9fafb;
    border-top:      1px solid #f3f4f6;
    border-radius:   0 0 24px 24px;
    height:          117px;
    display:         flex;
    align-items:     center;
    justify-content: flex-end;
    gap:             16px;
    padding:         0 32px;
    flex-shrink:     0;
}

.career-modal__btn-close {
    height:      52px;
    min-width:   88px;
    padding:     0 20px;
    background:  #fff;
    border:      none;
    border-radius: 14px;
    box-shadow:  0 1px 2px rgba(0, 0, 0, 0.16);
    color:       #6a7282;
    font-size:   16px;
    font-weight: 700;
    cursor:      pointer;
    transition:  background 0.2s;
    white-space: nowrap;
}

.career-modal__btn-close:hover {
    background: #f3f4f6;
}

.career-modal__btn-apply {
    height:          52px;
    min-width:       229px;
    padding:         0 20px;
    background:      #0a66c2;
    border-radius:   14px;
    box-shadow:      0 4px 6px rgba(28, 57, 142, 0.2), 0 2px 4px rgba(28, 57, 142, 0.2);
    color:           #fff;
    font-size:       16px;
    font-weight:     700;
    text-decoration: none;
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    justify-content: center;
    white-space:     nowrap;
    transition:      background 0.2s;
}

.career-modal__btn-apply:hover {
    background:      #0958a8;
    color:           #fff;
    text-decoration: none;
}

/* ── Modal responsive ── */
@media (max-width: 768px) {
    .career-modal {
        max-height:    95vh;
        border-radius: 16px;
    }

    .career-modal__close {
        top:  20px;
        left: 20px;
    }

    .career-modal__header-content {
        padding-left: 52px;
    }

    .career-modal__title {
        font-size:   20px;
        line-height: 28px;
    }

    .career-modal__meta {
        gap: 12px;
    }

    .career-modal__body {
        padding: 20px;
    }

    .career-modal__footer {
        height:    auto;
        padding:   16px 20px;
        flex-wrap: wrap;
    }

    .career-modal__btn-close,
    .career-modal__btn-apply {
        flex:      1;
        min-width: unset;
        justify-content: center;
    }
}