/* ============================================================
   CAREERS PAGE — bell-careers-* styles
   Mirrors the live bellequipment.com Careers Elementor layout
   ============================================================ */

/* Shared max-width wrapper (mirrors products.css) */
.bell-con-boxed-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-5);
}

/* Pull hero flush with header, matching home page behaviour.
   Bypass CSS-variable chain entirely — set physical and logical properties directly. */
.bell-page .bell-el-fd9c2c2 {
    margin-top: -30px;
    margin-block-start: -30px;
    padding-top: 0;
    padding-block-start: 0;
    /* Match the About page's video hero height (var(--hero-height)) instead
       of group.css's own min-height:650px / aspect-ratio box. */
    min-height: var(--hero-height, 600px);
}
.bell-el-fd9c2c2 .bell-wrapper {
    aspect-ratio: unset;
    max-height: none;
    height: var(--hero-height, 600px);
}
/* Scale the iframe to fill the fixed height without letterboxing, same
   technique as .bell-about-video-hero__inner iframe in about.css. */
.bell-el-fd9c2c2 .bell-video iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, calc(var(--hero-height, 600px) * 16 / 9));
    height: max(var(--hero-height, 600px), calc(100% * 9 / 16));
    transform: translate(-50%, -50%);
    inset: auto;
}

/* --- Video Hero --- */
.bell-careers-video-hero {
    position: relative;
    width: 100%;
    background: #000;
    line-height: 0;
    margin-top: -30px;
}

.bell-careers-video-hero__inner {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 82vh;
    overflow: hidden;
    background: #000;
}

.bell-careers-video-hero__inner iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.bell-careers-video-hero__overlay {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.4s;
}

.bell-careers-video-hero__overlay.is-hidden {
    opacity: 0;
    pointer-events: none;
}

.bell-careers-video-hero__play {
    width: 72px;
    height: 72px;
    background: rgba(253, 186, 49, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, background 0.2s;
}

.bell-careers-video-hero__overlay:hover .bell-careers-video-hero__play {
    transform: scale(1.1);
    background: #fdba31;
}

.bell-careers-video-hero__play svg {
    width: 28px;
    height: 28px;
    fill: #fff;
    margin-left: var(--space-1);
}

/* --- Page heading row --- */
.bell-careers-heading-row {
    background-color: #EBEBEB;
    border-top: 5px solid var(--color-primary, #FDBA31);
    padding: var(--space-5) 0;
    text-align: center;
}

.bell-careers-heading-row h1,
.bell-careers-heading-row h2 {
    font-family: var(--font-heading, sans-serif);
    font-size: var(--fs-h1, 2rem);
    font-weight: var(--fw-heading, 400);
    color: #1a1a1a;
    margin: 0;
}

/* --- Intro (full-width, centred — matches the About "Who we are" intro) --- */
.bell-careers-intro {
    background-color: #fff;
    padding: var(--space-7) 0 var(--space-4);
    text-align: center;
}

.bell-careers-intro-text {
    font-size: 0.95rem;
    color: #555;
    /* line-height/margin-bottom come from .bell-prose */
}

/* --- Nav buttons wrapper --- */
.bell-careers-nav-wrapper {
    background-color: #fff;
    padding: var(--space-5) 0 1.75rem;
}

/* Same as the About / Group Products nav: 4 across, a shorter last row is centred */
.bell-careers-nav-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-5);
}
.bell-careers-nav-buttons > * {
    flex: 0 0 calc((100% - 3 * var(--space-5)) / 4);
    min-width: 0;
}

/* Same breakpoints as the About / Group Products nav grid: 4 across, 2 on tablet and phone, 1 on small phones */
@media (max-width: 1023px) {
    .bell-careers-nav-buttons > * {
        flex-basis: calc((100% - var(--space-5)) / 2);
    }
}

/* Visual skin lives in the shared .bell-careers-nav-btn rule in bell-site.css — only layout here.
   !important on font-family/font-weight: group.css's ".bell-kit a" rule (class+tag = higher specificity
   than this class-only selector) otherwise silently overrides the font on this <a>-based button — same
   cascade problem documented on .bell-contact-submit/.gp-btn-dropdown__trigger below, different property. */
.bell-careers-nav-btn {
    display: block;
    text-align: center;
    padding: 15px var(--space-5);
    font-family: var(--font-heading, 'Roboto Condensed', sans-serif) !important;
    font-weight: 600 !important;
    font-size: 14px;
    text-decoration: none;
    letter-spacing: 0.03em;
}

.bell-careers-nav-btn:hover {
    text-decoration: none;
}

/* --- Section header (grey band with title) --- */
.bell-careers-section-header {
    background: #EBEBEB;
    padding: var(--space-5) 0;
    margin-bottom: 0;
    text-align: center;
}

.bell-careers-section-header h2 {
    font-family: var(--font-heading, 'Roboto Condensed', sans-serif);
    font-size: var(--fs-h3, 1.75rem);
    font-weight: var(--fw-heading, 400);
    color: #1a1a1a;
    text-transform: uppercase;
    margin: 0;
}

/* --- Section body (content + image) --- */
.bell-careers-section-body {
    background: #fff;
    padding: var(--space-8) 0 0;
}

.bell-careers-section-body--alt {
    background: #f5f5f5;
}

.bell-careers-section-body__inner {
    display: grid;
    gap: var(--space-7);
    align-items: start;
}

/* Text+image layouts: vertically centre the columns against each other, and
   align the text/button toward whichever side the image is on (the centred
   look is only for the full-width Job Opportunities section). */
.bell-careers-section-body__inner--text-img,
.bell-careers-section-body__inner--img-text {
    align-items: center;
}
/* Image is column 2 (right) — text/buttons in column 1 lean right, toward it.
   !important beats inline style="text-align:center" left over from CMS content. */
.bell-careers-section-body__inner--text-img .bell-careers-section-body__text,
.bell-careers-section-body__inner--text-img .bell-careers-section-body__text p {
    text-align: right !important;
}
.bell-careers-section-body__inner--text-img .bell-careers-section-actions {
    justify-content: flex-end;
}
/* Image is column 1 (left) — text/buttons in column 2 lean left, toward it */
.bell-careers-section-body__inner--img-text .bell-careers-section-body__text,
.bell-careers-section-body__inner--img-text .bell-careers-section-body__text p {
    text-align: left !important;
}
.bell-careers-section-body__inner--img-text .bell-careers-section-actions {
    justify-content: flex-start;
}

.bell-careers-section-body__inner--text-img {
    grid-template-columns: 1fr 1fr;
}

.bell-careers-section-body__inner--img-text {
    grid-template-columns: 1fr 1fr;
}

.bell-careers-section-body__inner--two-img-text {
    grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 1023px) {
    .bell-careers-section-body__inner--text-img,
    .bell-careers-section-body__inner--img-text,
    .bell-careers-section-body__inner--two-img-text {
        grid-template-columns: 1fr;
    }
}

.bell-careers-section-body__text p {
    font-size: 0.95rem;
    color: #555;
    /* line-height/margin-bottom come from .bell-prose. Alignment is
       intentionally left alone here so the admin's own choice (e.g.
       centring Job Opportunities) is respected; the text-img/img-text
       variants above still force their directional alignment on purpose. */
}

.bell-careers-section-body__text p strong {
    font-weight: 700;
}

.bell-careers-section-body__images {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.bell-careers-section-body__img {
    width: 100%;
    height: auto;
    /* Reserve space before the (lazy-loaded) image arrives so the grid row's
       height — and therefore the vertical centering against the text column
       — doesn't shift once it loads in. */
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    border-radius: 2px;
}

/* Data-table graphics (e.g. the apprenticeship trade table) must render in full —
   cropping to the standard 4:3 photo ratio cuts off rows of the table. */
.bell-careers-section-body__img--table {
    aspect-ratio: auto;
    object-fit: contain;
}

/* Job opportunities - "Who we are" subheading */
.bell-careers-who-we-are {
    background: linear-gradient(135deg, var(--color-secondary, #1a1a2e) 0%, #2d3a5e 100%);
    padding: var(--space-4) 0;
    margin-bottom: var(--space-6);
}

.bell-careers-who-we-are h3 {
    font-family: var(--font-heading, 'Roboto Condensed', sans-serif);
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--color-primary, #fdba31);
    text-transform: uppercase;
    margin: 0;
}

/* --- Section actions row (CTA + back to top) --- */
.bell-careers-section-actions {
    padding: var(--space-5) 0 var(--space-7);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

button.bell-careers-cta-btn {
    cursor: pointer;
}

/* Visual skin lives in the shared .bell-careers-cta-btn rule in bell-site.css — only layout here.
   !important on font-family/font-size: group.css has a "button, button a, a.bell-button" rule with
   !important on those two properties (targets this <button>-based CTA), which otherwise silently wins
   over this class-only selector regardless of specificity. */
.bell-careers-cta-btn {
    display: inline-block;
    padding: 15px var(--space-5);
    font-family: var(--font-heading, 'Roboto Condensed', sans-serif) !important;
    font-weight: 400;
    font-size: 14px !important;
    letter-spacing: 0.03em;
}

.bell-careers-back-top-row {
    background: #fff;
    padding: var(--space-3) 0;
    text-align: center;
}

.bell-careers-section-body--alt + .bell-careers-back-top-row {
    background: #f5f5f5;
}

/* !important on font-family/color: group.css's ".bell-kit a" rule (class+tag = higher specificity
   than this class-only selector) otherwise silently overrides the font/colour on this <a>-based link. */
.bell-careers-back-top {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0;
    background: transparent;
    color: #1a1a1a !important;
    font-family: var(--font-body, sans-serif) !important;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s ease;
}

.bell-careers-back-top:hover,
.bell-careers-back-top:focus {
    color: var(--color-primary, #FFC200) !important;
    text-decoration: none;
}

.bell-careers-back-top svg {
    width: 12px;
    height: 12px;
    fill: currentColor;
}

/* Two-image grid for graduates */
.bell-careers-two-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

@media (max-width: 479px) {
    .bell-careers-two-images {
        grid-template-columns: 1fr;
    }
    .bell-careers-nav-buttons > * {
        flex-basis: 100%;
    }
}

/* ── Careers portal popup modal ───────────────────────────── */
.careers-popup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0,0,0,0.65);
    align-items: center;
    justify-content: center;
}
.careers-popup-overlay.is-open {
    display: flex;
}
.careers-popup {
    position: relative;
    width: 80vw;
    height: 85vh;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.4);
    display: flex;
    flex-direction: column;
}
.careers-popup__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid #e0e0e0;
    background: #1a1a1a;
    color: #fff;
    border-radius: 4px 4px 0 0;
    flex-shrink: 0;
}
.careers-popup__title {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}
.careers-popup__close {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 var(--space-1);
    opacity: 0.8;
}
.careers-popup__close:hover { opacity: 1; }
.careers-popup__iframe {
    flex: 1;
    border: none;
    width: 100%;
    border-radius: 0 0 4px 4px;
}
@media (max-width: 767px) {
    .careers-popup { width: 96vw; height: 90vh; }
}

/* Reset browser default button styling for popup trigger buttons */
button.bell-button {
    border: none;
    cursor: pointer;
}

/* ── Group site: deeper pull-up so content sits behind the large Bell logo ── */
.site-group .bell-page .bell-el-fd9c2c2 { margin-top: -90px; margin-block-start: -90px; }
.site-group .bell-careers-video-hero    { margin-top: -90px; }