/* =============================================
   pages/careers.css
   ============================================= */

.careers {
    padding: var(--section-pad) 0;
    background: var(--bg);
    transition: background var(--t);
}

.careers-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--s-12);
    align-items: start;
}

.hiring-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-bottom: var(--s-5);
}

.careers-text > p {
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: var(--s-6);
}

.careers-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-3);
    margin-bottom: var(--s-8);
}

.career-item {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: var(--s-4);
}

.career-item h4 { font-size: 12px; margin-bottom: var(--s-1); }
.career-item p  { font-size: 11px; line-height: 1.5; }

.careers-perks h3 { font-size: 16px; margin-bottom: var(--s-4); }

.perks-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}

.perks-list li { font-size: 13px; color: var(--text); }

.careers-form-wrap {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: var(--s-8);
}

.careers-form-wrap h3 { font-size: 18px; margin-bottom: var(--s-5); }

@media (max-width: 1000px) { .careers-grid    { grid-template-columns: 1fr; gap: var(--s-10); } }
@media (max-width: 600px)  { .careers-details { grid-template-columns: 1fr; } }