/* ═══════════════════════════════════════════════════════
   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: minmax(0, 1.45fr) minmax(260px, 320px);
    gap: clamp(32px, 5vw, var(--program-intro-gap));
    align-items: start;
}

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

.program-content {
    max-width: none;
}

.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);
    width: 100%;
    max-width: 320px;
    justify-self: end;
}

.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);
    }

    .program-badge {
        max-width: none;
        justify-self: stretch;
    }

    .benefits-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 16px;
        margin-top: 36px;
    }

    .benefit-card {
        min-width: 0;
        padding: 24px 20px;
        border-radius: 18px;
    }

    .benefit-card h3,
    .benefit-card p,
    .benefit-icon {
        text-align: left;
    }

    .benefit-card p {
        max-width: none;
    }

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

    .how-section .section-header.text-center {
        text-align: left;
    }

    .how-section .section-header.text-center > h2,
    .how-section .section-header.text-center > .tag,
    .how-section .section-header.text-center > p {
        margin-left: 0;
        margin-right: 0;
        text-align: left;
    }

    .how-section .section-header.text-center > .line {
        margin-left: 0;
        margin-right: 0;
    }

    .steps-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 16px;
        margin-top: 32px;
    }

    .step-card {
        min-width: 0;
        padding: 24px 20px;
        border-radius: 18px;
    }

    .step-card h3,
    .step-card p {
        max-width: none;
    }
}

@media (max-width: 430px) {
    .benefits-section .container,
    .how-section .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .benefits-grid,
    .steps-grid {
        gap: 14px;
    }

    .benefit-card,
    .step-card {
        padding: 22px 18px;
    }
}



@media (max-width: 768px) {
    .program-section .container,
    .client-section .container,
    .cta-section .container {
        padding-left: 24px;
        padding-right: 24px;
    }

    .program-content {
        max-width: 100%;
    }

    .program-content p {
        margin-bottom: 16px;
    }

    .program-badge {
        padding: 34px 24px;
        min-height: 0;
    }

    .program-badge-acronym {
        font-size: clamp(44px, 14vw, 68px);
    }

    .program-badge-full {
        font-size: 16px;
        line-height: 1.35;
    }

    .benefits-section .section-header--editorial {
        margin-bottom: 0;
        max-width: none;
    }

    .benefit-card h3 {
        font-size: 22px;
        line-height: 1.28;
        margin-bottom: 10px;
    }

    .benefit-card p {
        font-size: 15px;
        line-height: 1.65;
    }

    .standards-section .section-header.text-center,
    .how-section .section-header.text-center {
        margin-bottom: 28px;
    }

    .standard-card {
        padding: 28px 22px;
    }

    .standard-value {
        font-size: 15px;
        margin-bottom: 10px;
    }

    .standard-label {
        font-size: 15px;
        line-height: 1.55;
    }

    .step-number {
        font-size: 36px;
        margin-bottom: 14px;
    }

    .step-card h3 {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .step-card p {
        font-size: 15px;
        line-height: 1.62;
    }

    .client-content {
        max-width: 100%;
    }

    .client-example {
        padding: 24px 20px;
    }

    .client-example h3 {
        font-size: 15px;
        line-height: 1.45;
        margin-bottom: 18px;
    }

    .example-step {
        gap: 12px;
        margin-bottom: 16px;
    }

    .example-text {
        font-size: 15px;
        line-height: 1.6;
    }

    .cta-content {
        max-width: 100%;
    }
}

@media (max-width: 430px) {
    .program-section .container,
    .benefits-section .container,
    .standards-section .container,
    .how-section .container,
    .client-section .container,
    .cta-section .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .program-badge {
        padding: 30px 20px;
        border-radius: 20px;
    }

    .program-badge-full,
    .program-badge-since {
        font-size: 14px;
    }

    .benefit-card h3,
    .step-card h3 {
        font-size: 19px;
    }

    .benefit-card p,
    .step-card p,
    .standard-label,
    .example-text {
        font-size: 14px;
    }

    .standard-card,
    .client-example {
        border-radius: 20px;
    }
}