/*
 * Career page — page-scoped CSS.
 * Loaded only on /career/ via excell_enqueue_career() in functions.php.
 */

/* ---- SEC 1: HERO ------------------------------------------- */

.career-hero {
    min-height: 55vh;
}
.career-hero-inner {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Collapse gap between the two H1 lines */
.career-hero .career-h1-line1 .elementor-heading-title {
    margin-bottom: 0;
    padding-bottom: 0;
    line-height: 1.15 !important;
}
.career-hero .career-h1-line2 .elementor-heading-title {
    line-height: 1.15 !important;
}

/* Breadcrumb text colour */
.career-hero .elementor-widget-breadcrumbs .elementor-breadcrumbs,
.career-hero .elementor-widget-breadcrumbs .elementor-breadcrumbs a {
    color: rgba(255, 255, 255, 0.65) !important;
    font-size: 13px !important;
}
.career-hero .elementor-widget-breadcrumbs .elementor-breadcrumbs-separator {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Button row — prevent Elementor from stretching to 100% */
.career-hero .career-hero-btns {
    width: auto !important;
    max-width: max-content !important;
    flex-wrap: wrap;
}
.career-hero .career-btn-primary,
.career-hero .career-btn-outline {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    width: auto !important;
    max-width: max-content !important;
}

@media (max-width: 767px) {
    .career-hero .career-hero-btns {
        max-width: 100% !important;
        width: 100% !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .career-hero .career-btn-primary,
    .career-hero .career-btn-outline {
        max-width: 100% !important;
        width: 100% !important;
        text-align: center;
    }
}

/* ---- SEC 2: WHO WE ARE (About) ----------------------------- */

.career-about {
    background-color: #FFFFFF !important;
}
.career-about-inner {
    margin-left: auto !important;
    margin-right: auto !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
}
.career-about .career-about-left {
    width: 46% !important;
    max-width: 46% !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    align-self: stretch !important;
    min-height: 420px;
    background-color: #E8EDE9;
    border-radius: 10px;
    overflow: hidden;
}
.career-about .career-about-right {
    width: 46% !important;
    max-width: 46% !important;
    flex-grow: 1 !important;
}
@media (max-width: 1024px) {
    .career-about-inner {
        flex-direction: column !important;
        flex-wrap: wrap !important;
    }
    .career-about .career-about-left,
    .career-about .career-about-right {
        width: 100% !important;
        max-width: 100% !important;
    }
}
.career-about .career-about-image .elementor-image,
.career-about .career-about-image .elementor-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    min-height: 420px;
}
/* Hide the default Elementor image placeholder icon */
.career-about .career-about-image .elementor-image img[src=""] {
    display: none;
}
/* Collapse gap between the two H2 lines */
.career-about .career-about-h2 .elementor-heading-title {
    line-height: 1.2 !important;
}
.career-about .career-about-h2-sub .elementor-heading-title {
    line-height: 1.2 !important;
}
/* Ghost button — strip default Elementor button padding/border */
.career-about .career-about-explore .elementor-button {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}
.career-about .career-about-explore {
    width: auto !important;
    max-width: max-content !important;
    flex-shrink: 0 !important;
}
@media (max-width: 1024px) {
    .career-about .career-about-right {
        padding-left: 0 !important;
    }
}

/* ---- SEC 3: OUR VALUES ------------------------------------- */

.career-values {
    background-color: #FAF8F4 !important;
}
.career-values-inner {
    margin-left: auto !important;
    margin-right: auto !important;
}
.career-values-sub p {
    text-align: center;
}
/* 6-col card grid */
.career-val-grid {
    width: 100% !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
}
.career-val-card {
    flex: 1 1 calc(16.66% - 14px) !important;
    min-width: 140px;
    background: #FFFFFF;
    border: 1px solid #EAE6DF;
    border-radius: 10px;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.career-val-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(26,61,43,0.08);
}
@media (max-width: 1024px) {
    .career-val-card { flex: 1 1 calc(33.33% - 12px) !important; }
}
@media (max-width: 767px) {
    .career-val-card { flex: 1 1 calc(50% - 8px) !important; }
}

/* Hide empty icon-image placeholder in value cards */
.career-val-card .career-val-icon-img {
    display: none;
}

/* ---- SEC 4: BENEFITS --------------------------------------- */

.career-benefits {
    background-color: #FAF8F4 !important;
}
.career-ben-inner {
    margin-left: auto !important;
    margin-right: auto !important;
}
/* 4-col card grid */
.career-ben-grid {
    width: 100% !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
}
.career-ben-card {
    flex: 1 1 calc(25% - 16px) !important;
    min-width: 200px;
    background: #FFFFFF;
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.career-ben-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(26,61,43,0.10);
}
.career-ben-card .career-ben-image .elementor-image,
.career-ben-card .career-ben-image .elementor-image img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
    border-radius: 10px 10px 0 0;
    background-color: #E8EDE9;
}
/* Hide empty img src */
.career-ben-card .career-ben-image .elementor-image img[src=""] {
    opacity: 0;
}
.career-ben-card .career-ben-title,
.career-ben-card .career-ben-desc {
    padding-left: 16px;
    padding-right: 16px;
}
.career-ben-card .career-ben-desc {
    padding-bottom: 20px;
}
@media (max-width: 1024px) {
    .career-ben-card { flex: 1 1 calc(50% - 10px) !important; }
}
@media (max-width: 767px) {
    .career-ben-card { flex: 1 1 100% !important; }
}

/* ============================================================
   ANIMATIONS — scroll-triggered via IntersectionObserver
   career.js adds `career-anim-ready` to <html>.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

    .career-anim-ready .ca-anim-fade-up {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
        will-change: opacity, transform;
    }
    .career-anim-ready .ca-anim-fade-up.ca-anim-visible {
        opacity: 1;
        transform: translateY(0);
    }

    /* Hero element stagger */
    .career-hero .career-h1-line1 { transition-delay: 80ms; }
    .career-hero .career-h1-line2 { transition-delay: 180ms; }
    .career-hero .career-hero-para { transition-delay: 300ms; }
    .career-hero .career-hero-btns { transition-delay: 420ms; }
}