/* ============================================
   ZETRE - Career Mobile (max-width: 767px)
   ============================================ */

.page-hero {
    padding: calc(56px + var(--space-6)) 0 var(--space-10);
}
.page-hero-content h1 { font-size: var(--text-2xl); }
.page-hero-content p { font-size: var(--text-sm); }
.page-hero-shape { width: 250px; height: 250px; top: -100px; right: -60px; }
.hero-wave svg { height: 30px; }

/* Section header */
.section-header h2 {
    font-size: var(--text-xl);
}

/* Perks grid single column */
.perks-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
}

.perk-item {
    padding: var(--space-4);
}

.perk-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    font-size: var(--text-lg);
}

.perk-item h4 { font-size: var(--text-sm); }
.perk-item p { font-size: var(--text-xs); }

/* Job cards */
.job-card-header {
    padding: var(--space-4);
    gap: var(--space-3);
    flex-wrap: wrap;
}

.job-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    font-size: var(--text-lg);
}

.job-title-area h3 { font-size: var(--text-base); }
.job-title-area {
    flex: 1;
    min-width: 0;
}

.job-tags {
    gap: var(--space-1);
    flex-wrap: wrap;
}

.job-tag {
    font-size: 10px;
    padding: 1px var(--space-2);
}

.job-toggle {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

/* Details */
.job-requirements,
.job-responsibilities {
    padding: 0 var(--space-4) var(--space-4);
}

.job-apply-form {
    margin: 0 var(--space-4) var(--space-4);
    padding: var(--space-4);
}

.form-row {
    grid-template-columns: 1fr;
}

/* Toast mobile */
.toast {
    top: auto;
    bottom: 84px;
    right: var(--space-4);
    left: var(--space-4);
    justify-content: center;
}