/* ═══════════════════════════════════════════════════════
   16-careers-join.css — Careers / Join Program Page
   Intecracy Group Theme v3.2.0
   ─────────────────────────────────────────────────────
   PAGE-SPECIFIC styles only.
   .cta-section, .btn-dark, footer → see 08-cta.css,
   05-buttons.css, 07-footer.css.
   ═══════════════════════════════════════════════════════ */

/* ── Program section ── */
.program-section {
    background: var(--navy-deep);
}

.program-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--program-intro-gap);
    align-items: center;
}

.program-content p {
    margin-bottom: var(--space-text-gap);
}

.program-badge {
    background: var(--program-badge-bg);
    border: 1px solid var(--teal-border);
    padding: var(--program-badge-pad-y) var(--program-badge-pad-x);
    text-align: center;
    border-radius: var(--radius-lg);
}

.program-badge-title {
    font-size: var(--program-badge-title-size);
    color: var(--teal);
    letter-spacing: var(--program-badge-title-tracking);
    margin-bottom: var(--program-badge-title-gap);
}

.program-badge-name {
    font-size: var(--program-badge-name-size);
    font-weight: 800;
    color: var(--text);
    line-height: 1.2;
    margin-bottom: var(--program-badge-name-gap);
}

.program-badge-sub {
    font-size: var(--program-badge-sub-size);
    color: var(--muted);
}

/* ── Benefits ── */
.benefits-section {
    background: var(--grad-dark-teal);
}

.benefits-section h2,
.benefits-section p {
    color: var(--text);
}

.benefits-section .line {
    background: rgba(255, 255, 255, 0.50);
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--benefits-grid-gap);
    margin-top: 60px;
}

.benefit-card {
    background: var(--benefit-card-bg);
    border: 1px solid var(--teal-border);
    border-radius: var(--radius-lg);
    padding: var(--benefit-card-pad-y) var(--benefit-card-pad-x);
    transition: background var(--transition-base),
                border-color var(--transition-base),
                transform var(--transition-base);
}

.benefit-card:hover {
    background: var(--benefit-card-bg-hover);
    border-color: var(--teal-border-h);
    transform: translateY(var(--benefit-card-lift));
}

.benefit-icon {
    width: var(--benefit-icon-size);
    height: var(--benefit-icon-size);
    margin-bottom: var(--benefit-icon-gap);
    color: var(--text);
}

.benefit-icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    stroke-width: 1.5;
    fill: none;
}

.benefit-card h3 {
    color: var(--text);
    font-size: var(--benefit-title-size);
}

.benefit-card p {
    font-size: var(--benefit-copy-size);
    color: var(--benefit-copy-color);
}

/* ── Standards ── */
.standards-section {
    background: var(--navy);
}

.standards-grid {
    display: grid;
    grid-template-columns: repeat(var(--standards-grid-columns), 1fr);
    gap: var(--standards-grid-gap);
}

.standard-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    padding: var(--standard-card-pad-y) var(--standard-card-pad-x);
    text-align: center;
    border-radius: var(--radius-lg);
    transition: background var(--transition-base),
                border-color var(--transition-base);
}

.standard-card:hover {
    border-color: var(--teal);
    background: var(--card-hover);
}

.standard-value {
    font-size: var(--standard-value-size);
    font-weight: 700;
    color: var(--teal);
    letter-spacing: var(--standard-value-tracking);
    margin-bottom: var(--standard-value-gap);
}

.standard-label {
    font-size: var(--standard-label-size);
    color: var(--muted);
    line-height: 1.6;
}

/* ── How it works ── */
.how-section {
    background: var(--navy-deep);
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(var(--steps-grid-columns), 1fr);
    gap: var(--steps-grid-gap);
    margin-top: 60px;
}

.step-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    padding: var(--step-card-pad-y) var(--step-card-pad-x);
    transition: background var(--transition-base),
                border-color var(--transition-base);
    position: relative;
    border-radius: var(--radius-lg);
}

.step-card:hover {
    border-color: var(--teal);
    background: var(--card-hover);
}

.step-number {
    font-size: var(--step-number-size);
    font-weight: 800;
    color: var(--step-number-color);
    line-height: 1;
    margin-bottom: var(--step-number-gap);
}

.step-card h3 {
    color: var(--text);
    font-size: var(--step-title-size);
    margin-bottom: var(--step-title-gap);
}

.step-card p {
    font-size: var(--step-copy-size);
    line-height: var(--service-card-copy-line-height);
}

/* ── Client benefits ── */
.client-section {
    background: var(--navy);
}

.client-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--client-grid-gap);
    align-items: start;
}

.client-content p {
    margin-bottom: var(--space-text-gap);
}

.client-example {
    background: var(--client-example-bg);
    border: 1px solid var(--card-border);
    padding: var(--client-example-pad);
    border-radius: var(--radius-lg);
}

.client-example h3 {
    color: var(--teal);
    font-size: var(--client-example-title-size);
    letter-spacing: var(--client-example-title-tracking);
    text-transform: uppercase;
    margin-bottom: var(--client-example-title-gap);
}

.example-step {
    display: flex;
    gap: var(--example-step-gap);
    margin-bottom: var(--example-step-bottom-gap);
    align-items: flex-start;
}

.example-num {
    min-width: var(--example-num-size);
    height: var(--example-num-size);
    background: var(--teal);
    color: var(--navy);
    font-size: var(--example-num-font-size);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}

.example-text {
    font-size: var(--example-text-size);
    color: var(--text);
    opacity: var(--example-text-opacity);
    line-height: 1.6;
}

.example-note {
    margin-top: var(--example-note-gap-top);
    padding-top: var(--example-note-pad-top);
    border-top: 1px solid var(--card-border);
    font-size: var(--example-note-size);
    color: var(--muted);
    font-style: italic;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .standards-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .program-intro,
    .client-grid {
        grid-template-columns: 1fr;
        gap: var(--program-intro-gap-md);
    }

    .benefits-grid {
        grid-template-columns: 1fr;
    }

    .standards-grid {
        grid-template-columns: 1fr;
    }

    .steps-grid {
        grid-template-columns: 1fr;
    }
}