/* Reset and Base Styles */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Elementor Container Override */
.elementor-html-tag {
    width: 100% !important;
    max-width: none !important;
}

.elementor-widget-html {
    width: 100% !important;
    max-width: none !important;
}


body {
    font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #EFEFEF;
}


.container {
    width: 100%;
    margin: 0;
    padding: 20px;
    box-sizing: border-box;
}

/* Loading Overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.3s ease-out;
}

.loading-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #e3e3e3;
    border-top: 4px solid #14171F;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* Positions Overview Styles */
.positions-overview {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 2rem;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.position-card {
    position: relative;
    height: 300px;
    border-radius: 0;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.4s ease, box-shadow 0.4s ease, opacity 0.4s ease;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.position-card.selected {
    transform: scale(1.08);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

/* 选中状态下的背景蒙版保持0.1黑色 */
.position-card.selected[data-job="admin"] .position-background {
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url('https://hkujcesgri.hku.hk/wp-content/uploads/2025/08/admin_2.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.position-card.selected[data-job="ra"] .position-background {
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url('https://hkujcesgri.hku.hk/wp-content/uploads/2025/08/research_2.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.position-card.selected[data-job="student_helper"] .position-background {
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url('https://hkujcesgri.hku.hk/wp-content/uploads/2025/08/student_2.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.position-card.deselected {
    transform: scale(0.95);
    opacity: 0.7;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* 非选中状态下保持白色蒙版不变（如果有的话，这里不做额外处理，保持原有样式） */

.position-card:hover {
    transform: translateY(-10px) scale(1.03);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

.position-background {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
}

/* Individual position backgrounds */
.position-card[data-job="admin"] .position-background {
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url('https://hkujcesgri.hku.hk/wp-content/uploads/2025/08/admin_2.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.position-card[data-job="ra"] .position-background {
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url('https://hkujcesgri.hku.hk/wp-content/uploads/2025/08/research_2.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.position-card[data-job="student_helper"] .position-background {
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url('https://hkujcesgri.hku.hk/wp-content/uploads/2025/08/student_2.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.position-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: transparent;
    color: white;
    padding: 2rem;
    text-align: left;
}

.position-overlay * {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.position-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.position-summary {
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 1.5rem !important;
    opacity: 0.9;
}

.view-details-btn {
    background: #14171F;
    color: white;
    border: 2px solid #14171F;
    padding: 0.7rem 1.5rem;
    border-radius: 0;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.view-details-btn:hover {
    background: #B89642;
    border-color: #B89642;
    transform: scale(1.05);
}

/* Job List Styles */
.job-list {
    background: white;
    border-radius: 0;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
    overflow: hidden;
    opacity: 0;
    max-height: 0;
    transition: all 0.5s ease-in-out;
}

.job-list.show {
    opacity: 1;
    max-height: 2000px;
}

.job-list.hidden {
    display: none;
}

.list-container {
    padding: 2rem;
}

.list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e9ecef;
}

.category-title {
    font-size: 2rem;
    color: #2c3e50;
    font-weight: 600;
}

.list-content {
    margin-top: 1rem;
}

.jobs-table-wrapper {
    overflow-x: hidden;
    border-radius: 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.jobs-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    font-size: 1rem;
}

.jobs-table thead {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    color: #2c3e50;
}

.jobs-table thead th {
    padding: 1rem 1.5rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.jobs-table tbody tr {
    border-bottom: 1px solid #e9ecef;
    transition: all 0.3s ease;
}

.jobs-table tbody tr:last-child {
    border-bottom: none;
}

.jobs-table tbody tr:hover,
.jobs-table tbody tr.hover {
    background: linear-gradient(135deg, #f8f9ff 0%, #f5f7ff 100%);
    transform: scale(1.01);
    box-shadow: 0 2px 10px rgba(102, 126, 234, 0.1);
}

.jobs-table td {
    padding: 1.2rem 1.5rem;
    vertical-align: top;
}

.job-title-cell {
    width: 50%;
}

.job-title-link {
    background: none;
    border: none;
    color: #2c3e50;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    padding: 0;
    transition: all 0.3s ease;
    text-decoration: none;
    display: block;
    width: 100%;
    word-wrap: break-word;
    white-space: normal;
    line-height: 1.4;
}

.job-title-link:hover {
    color: #667eea;
    text-shadow: 0.5px 0 0 currentColor;
    transform: translateX(5px);
}

.job-date-cell {
    width: 25%;
    color: #495057;
    font-weight: 500;
}

.job-status-cell {
    width: 25%;
    text-align: center;
}

.status-badge {
    display: inline-block;
    padding: 0.4rem 1rem;
    border-radius: 0;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge.available {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    box-shadow: 0 2px 10px rgba(40, 167, 69, 0.3);
    transition: all 0.3s ease;
}

.status-badge.available:hover {
    background: linear-gradient(135deg, #20c997, #17a2b8);
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4);
}

.status-badge.closed {
    background: #6c757d;
    color: white;
}

/* Job Details Styles */
.job-details {
    background: white;
    border-radius: 0;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
    overflow: hidden;
    opacity: 0;
    max-height: 0;
    transition: all 0.5s ease-in-out;
}

.job-details.show {
    opacity: 1;
    max-height: 2000px;
}

.job-details.hidden {
    display: none;
}

.details-container {
    padding: 2rem;
}

.details-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e9ecef;
}

.details-nav {
    margin-bottom: 1rem;
}

.back-btn {
    background: linear-gradient(135deg, #6c757d, #495057);
    color: white;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 0;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.back-btn:hover {
    background: linear-gradient(135deg, #495057, #343a40);
    transform: translateX(-3px);
}

.job-title {
    font-size: 2rem;
    color: #2c3e50;
    font-weight: 600;
    margin-top: 0.5rem;
    max-width: 600px;
    word-wrap: break-word;
    line-height: 1.3;
}

.close-btn {
    background: none;
    border: none;
    font-size: 2rem;
    color: #6c757d;
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.close-btn:hover {
    background: #f8f9fa;
    color: #495057;
}

.description-section {
    margin-bottom: 2rem;
}

.job-description {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #495057;
}

.details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

.details-grid h3 {
    color: #2c3e50;
    font-size: 1.3rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.responsibilities-list,
.requirements-list,
.benefits-list {
    list-style: none;
}

.responsibilities-list li,
.requirements-list li,
.benefits-list li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
    line-height: 1.5;
}

.responsibilities-list li::before {
    content: "✓";
    color: #28a745;
    font-weight: bold;
    position: absolute;
    left: 0;
}

.requirements-list li::before {
    content: "•";
    color: #14171F;
    font-weight: bold;
    position: absolute;
    left: 0;
}

.benefits-list li::before {
    content: "★";
    color: #ffc107;
    font-weight: bold;
    position: absolute;
    left: 0;
}

.apply-section {
    text-align: center;
    padding-top: 2rem;
    border-top: 2px solid #e9ecef;
}

.apply-btn {
    background: linear-gradient(135deg, #14171F, #B89642);
    color: white;
    border: none;
    padding: 1rem 3rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 5px 20px rgba(0, 123, 255, 0.3);
}

.apply-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 123, 255, 0.4);
}

/* Application Form Styles */
.application-form {
    background: white;
    border-radius: 0;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.5s ease-in-out;
}

.application-form.show {
    opacity: 1;
    max-height: 3000px;
}

.application-form.hidden {
    display: none;
}

.form-container {
    padding: 2rem;
}

.form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e9ecef;
}

.form-title {
    font-size: 1.8rem;
    color: #2c3e50;
    font-weight: 600;
}

.form-fields {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.form-field {
    display: flex;
    flex-direction: column;
}

.form-field label {
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.form-field label.required::after {
    content: " *";
    color: #dc3545;
}

.form-field input,
.form-field select,
.form-field textarea {
    padding: 0.75rem 1rem;
    border: 2px solid #e9ecef;
    border-radius: 0;
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    font-family: inherit;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    border-color: #14171F;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.form-field textarea {
    resize: vertical;
    min-height: 100px;
}

.form-field input[type="file"] {
    padding: 0.5rem;
    border: 2px dashed #dee2e6;
    background: #f8f9fa;
}

.form-field.error input,
.form-field.error select,
.form-field.error textarea {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.field-error {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    font-weight: 500;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding-top: 2rem;
    border-top: 2px solid #e9ecef;
}

.cancel-btn,
.submit-btn {
    padding: 0.75rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.cancel-btn {
    background: #6c757d;
    color: white;
    border-color: #6c757d;
}

.cancel-btn:hover {
    background: #5a6268;
    border-color: #5a6268;
}

.submit-btn {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    border-color: #28a745;
}

.submit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 20px rgba(40, 167, 69, 0.3);
}

.submit-btn:disabled {
    background: #6c757d;
    border-color: #6c757d;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Message Styles */
.success-message,
.error-message {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.success-message.show,
.error-message.show {
    opacity: 1;
}

.success-message.hidden,
.error-message.hidden {
    display: none;
}

.success-content,
.error-content {
    background: white;
    padding: 3rem;
    border-radius: 0;
    text-align: center;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.success-icon {
    width: 60px;
    height: 60px;
    background: #28a745;
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    font-weight: bold;
    margin: 0 auto 1rem auto;
}

.error-icon {
    width: 60px;
    height: 60px;
    background: #dc3545;
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    font-weight: bold;
    margin: 0 auto 1rem auto;
}

.success-content h3,
.error-content h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #2c3e50;
}

.success-content p,
.error-content p {
    color: #6c757d;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.ok-btn {
    background: #14171F;
    color: white;
    border: none;
    padding: 0.75rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ok-btn:hover {
    background: #B89642;
    transform: translateY(-1px);
}

/* Phone Input Container Styles */
.phone-input-container {
    display: flex;
    gap: 8px;
    align-items: center;
}

.country-code-input {
    flex: 0 0 80px;
    max-width: 80px;
    min-width: 80px;
    width: 80px !important;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 0;
    font-size: 14px;
    text-align: center;
}

.country-code-input:focus {
    outline: none;
    border-color: #14171F;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.phone-number-input {
    flex: 1;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 0;
    font-size: 14px;
}

.phone-number-input:focus {
    outline: none;
    border-color: #14171F;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

/* Modal Overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 9998;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-overlay.show {
    opacity: 1;
}

.modal-overlay.hidden {
    display: none;
}

/* Utility Classes */
.hidden {
    display: none !important;
}

.show {
    display: block !important;
}

/* Responsive Design */

@media (max-width: 768px) {
    .container {
        padding: 10px;
    }
    
    .header h1 {
        font-size: 1.6rem;
    }
    
    .header-perks {
        padding: 1rem;
    }
    
    .header-perks h2 {
        font-size: 1.3rem;
    }
    
    .positions-overview {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .position-card {
        height: auto;
        min-height: 250px;
    }
    
    .position-background {
        min-height: 250px;
        height: 100%;
    }
    
    .position-overlay {
        position: relative;
        padding: 1.5rem;
        min-height: 250px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }
    
    .position-title {
        font-size: 1.1rem;
        margin-bottom: 0.4rem;
        white-space: nowrap; /* 防止标题换行 */
        overflow: hidden;
        text-overflow: ellipsis; /* 如果太长则显示省略号 */
    }
    
    .position-summary {
        font-size: 0.85rem;
        line-height: 1.4;
        margin-bottom: 1rem !important;
    }
    
    .view-details-btn {
        padding: 0.6rem 1.2rem;
        font-size: 0.9rem;
        width: auto;
        align-self: flex-start;  /* 让按钮左对齐，不拉伸 */
    }
    
    .details-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    /* 优化移动端job-details显示 */
    .job-details.show {
        max-height: none;
        height: auto;
    }
    
    .job-details {
        margin-bottom: 1rem;
        border-radius: 0;
    }
    
    /* 确保详情内容区域有足够的最小高度和适当的滚动 */
    .details-container {
        padding: 1rem;
        min-height: auto;
    }
    
    /* 优化详情页面的标题和内容间距 */
    .details-header {
        display: flex;
        flex-direction: column;
        margin-bottom: 1rem;
        padding-bottom: 1rem;
        border-bottom: 2px solid #e9ecef;
    }
    
    /* 第一行：返回按钮和关闭按钮 */
    .details-nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
    }
    
    /* 将关闭按钮移到details-nav容器中（通过CSS） */
    .details-header {
        position: relative;
    }
    
    .close-btn {
        position: absolute;
        top: 0;
        right: 0;
    }
    
    /* 第二行：职位标题 */
    .job-title {
        font-size: 1.3rem;
        margin-top: 2rem; /* 为上面的按钮行留出空间 */
        margin-bottom: 0;
        word-break: break-word;
        line-height: 1.4;
    }
    
    
    /* 优化列表样式以适应移动端 */
    .responsibilities-list li,
    .requirements-list li,
    .benefits-list li {
        font-size: 0.9rem;
        line-height: 1.4;
        margin-bottom: 0.5rem;
    }
    
    /* 优化详情页面的按钮和交互元素 */
    .back-btn {
        font-size: 0.85rem;
        padding: 0.5rem 1rem;
        margin-bottom: 1rem;
    }
    
    .close-btn {
        padding: 0.5rem 0.7rem;
        font-size: 1.2rem;
        height: fit-content;
    }
    
    .apply-btn {
        width: 100%;
        margin-top: 1.5rem;
        padding: 1rem;
        font-size: 1rem;
    }
    
    /* 优化职位描述文字 */
    .job-description {
        font-size: 0.95rem;
        line-height: 1.5;
        margin-bottom: 1.5rem;
    }
    
    .form-actions {
        flex-direction: column;
    }
    
    .cancel-btn,
    .submit-btn {
        width: 100%;
    }

    /* Table responsive styles */
    .list-container,
    .details-container,
    .form-container {
        padding: 1rem;
    }

    .category-title,
    .job-title {
        font-size: 1.5rem;
    }

    .jobs-table-wrapper {
        box-shadow: none;
        border-radius: 0;
    }

    .jobs-table {
        font-size: 0.9rem;
    }

    .jobs-table thead th {
        padding: 0.8rem 1rem;
        font-size: 0.8rem;
    }

    .jobs-table td {
        padding: 1rem;
    }

    .job-title-link {
        font-size: 1rem;
    }

    .job-date-cell {
        font-size: 0.9rem;
    }

    .status-badge {
        font-size: 0.75rem;
        padding: 0.3rem 0.8rem;
    }

    /* 优化应用表单的移动端显示 */
    .application-form.show {
        max-height: none;
        height: auto;
    }
    
    .application-form {
        margin-bottom: 1rem;
        border-radius: 0;
    }
    
    .back-btn {
        font-size: 0.8rem;
        padding: 0.5rem 1rem;
    }
}
/* ==========================================================================
   Design language — /recruitment/ migration, 2026-08-03
   ==========================================================================

   Brings this page onto the same system as /home-2/, the Events Hub and
   /voices/: black full-bleed band, gold accent, Poppins display, square
   corners. Tokens mirror events-hub.css so the set stays in step.

   This block is APPENDED rather than shipped as a separate override sheet on
   purpose. A second stylesheet would have to out-specify 900 lines of existing
   rules to win, and ties do not break in the newcomer's favour — !important on
   both sides changes nothing. Same file, later in source order, so equal
   specificity resolves here without a single !important.

   The rules above still own all LAYOUT: form grids, the jobs table, the modal
   stack. Only the visual layer is restated here. Nothing below touches an id
   or a class that recruitment.js binds to.
   ========================================================================== */

.rc {
  --rc-gold:     #B89642;
  --rc-ink:      #14171F;
  --rc-ink-soft: #4A4E58;
  --rc-mute:     #8A8F99;
  --rc-bg:       #EFEFEF;
  --rc-line:     #D8D8D8;
  --rc-ease:     cubic-bezier(.22,.9,.3,1);

  display: block;
  position: relative;
  font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--rc-ink);
  padding-bottom: 90px;
}

/* the page ground runs edge to edge; the 1140 shell would leave white margins */
.rc::before {
  content: "";
  position: absolute;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  top: 0; bottom: 0;
  background: var(--rc-bg);
  z-index: -1;
}

/* ---------- title band ---------- */
.rc-band {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  background: #000;
  color: #fff;
}
.rc-band__inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 64px 0 60px;
}
.rc-band__title {
  font-family: "Poppins", "Noto Sans", sans-serif;
  font-size: clamp(34px, 3.4vw, 52px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
}

.rc-shell {
  max-width: 1140px;
  margin: 0 auto;
  padding: 54px 0 0;
}

.rc-lead {
  font-family: "Poppins", "Noto Sans", sans-serif;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.005em;
  color: var(--rc-ink);
  max-width: 20ch;
  margin: 0 0 44px;
}

/* ---------- why us ---------- */
.rc-why {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 0 72px;
  align-items: start;
  padding: 34px 0 38px;
  border-top: 1px solid var(--rc-line);
  border-bottom: 1px solid var(--rc-line);
}
.rc-why__title {
  font-family: "Poppins", "Noto Sans", sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--rc-ink);
  margin: 0;
}
.rc-why__list { list-style: none; margin: 0; padding: 0; }
.rc-why__list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 14px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--rc-ink-soft);
}
.rc-why__list li:last-child { margin-bottom: 0; }
/* a gold rule rather than a bullet — the type pill and the date are the only
   other places gold appears, so it stays a punctuation mark, not decoration */
.rc-why__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .72em;
  width: 10px; height: 2px;
  background: var(--rc-gold);
}
.rc-why__list strong {
  font-family: "Poppins", "Noto Sans", sans-serif;
  font-weight: 600;
  color: var(--rc-ink);
}

/* ---------- impact statement ---------- */
.rc-impact {
  margin: 46px 0 0;
  font-family: "Poppins", "Noto Sans", sans-serif;
  font-size: clamp(26px, 3.2vw, 44px);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--rc-ink);
}
.rc-impact__line { display: block; }
.rc-impact__line:last-child { color: var(--rc-gold); }

/* ---------- position cards ---------- */
/* The overview grid sat at max-width 1400 while everything else on the page
   is 1140, so the cards used to hang past the copy on both sides. */
.rc .container { max-width: 1140px; margin: 0 auto; padding: 46px 0 0; }
.rc .positions-overview { max-width: none; gap: 24px; }
.rc .position-card {
  height: 340px;
  box-shadow: none;
  transition: transform .35s var(--rc-ease);
}
.rc .position-card:hover { transform: scale(1.03); box-shadow: none; }
.rc .position-card.selected { transform: scale(1.03); box-shadow: none; }
.rc .position-card.deselected { transform: none; opacity: .55; box-shadow: none; }
/* the artwork is photographic and the caption sits on top of it, so it needs
   its own contrast rather than relying on whichever frame is underneath */
.rc .position-overlay {
  padding: 26px 22px 24px;
  background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,.15) 62%, rgba(0,0,0,0));
}
.rc .position-overlay * { text-shadow: none; }
.rc .position-title {
  font-family: "Poppins", "Noto Sans", sans-serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.18;
  text-transform: uppercase;
  letter-spacing: -.005em;
  margin-bottom: 8px;
}
.rc .position-summary { font-size: 15px; line-height: 1.5; opacity: .9; }

/* ---------- buttons ---------- */
.rc .view-details-btn,
.rc .apply-btn,
.rc .submit-btn,
.rc .ok-btn {
  font-family: "Poppins", "Noto Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 12px 22px;
  border: 0;
  background: var(--rc-ink);
  color: #fff;
  backdrop-filter: none;
  transition: background .22s var(--rc-ease);
}
.rc .view-details-btn:hover,
.rc .apply-btn:hover,
.rc .submit-btn:hover,
.rc .ok-btn:hover {
  background: var(--rc-gold);
  color: #fff;
  transform: none;
}
.rc .back-btn, .rc .cancel-btn {
  font-family: "Poppins", "Noto Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: transparent;
  color: var(--rc-ink-soft);
  border: 1px solid var(--rc-line);
}
.rc .back-btn:hover, .rc .cancel-btn:hover {
  color: var(--rc-gold);
  border-color: var(--rc-gold);
  background: transparent;
}

/* ---------- panels: list, details, form ---------- */
.rc .job-list, .rc .job-details, .rc .application-form { box-shadow: none; border: 1px solid var(--rc-line); }
.rc .list-header, .rc .details-header, .rc .form-header {
  background: var(--rc-ink);
  color: #fff;
}
.rc .category-title, .rc .job-title, .rc .form-title {
  font-family: "Poppins", "Noto Sans", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -.005em;
  color: #fff;
}
.rc .close-btn { color: #fff; }
.rc .close-btn:hover { color: var(--rc-gold); background: transparent; }
.rc .details-content h3, .rc .description-section h3 {
  font-family: "Poppins", "Noto Sans", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--rc-mute);
}
.rc .jobs-table thead th {
  font-family: "Poppins", "Noto Sans", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--rc-mute);
  background: transparent;
  border-bottom: 1px solid var(--rc-line);
}
.rc .job-title-link { color: var(--rc-ink); font-weight: 600; }
.rc .job-title-link:hover { color: var(--rc-gold); }

@media (max-width: 1024px) {
  .rc-band__inner { padding: 46px 16px 42px; }
  .rc-shell { padding: 40px 16px 0; }
  .rc-why { grid-template-columns: 150px minmax(0, 1fr); gap: 0 30px; }
  .rc-why__title { font-size: 24px; }
  .rc .container { padding: 36px 16px 0; }
}

@media (max-width: 767px) {
  .rc-band__inner { padding: 36px 16px 32px; }
  .rc-shell { padding: 30px 16px 0; }
  .rc-lead { max-width: none; margin-bottom: 30px; }
  .rc-why { grid-template-columns: minmax(0, 1fr); gap: 16px 0; }
  .rc-why__title { font-size: 20px; }
  .rc .positions-overview { grid-template-columns: minmax(0, 1fr); }
}

/* The theme puts `list-style: disc` on content lists at a specificity the
   plain `.rc-why__list { list-style: none }` above cannot beat, so the cards
   rendered a theme bullet AND the gold rule. Killed on the item as well as
   the list — the marker is set on the li, not the ul. */
.rc .rc-why__list,
.rc .rc-why__list li { list-style: none !important; }
.rc .rc-why__list li::marker { content: "" !important; }

/* "Administrative Coordinator" is one word too long for the card at 21px and
   was breaking mid-word. Let it hyphenate at a real boundary instead. */
.rc .position-title { overflow-wrap: break-word; hyphens: none; }

/* ==========================================================================
   Opening composition — full width, 2026-08-03
   ==========================================================================
   Went through a two-column arrangement (sentence left, list right) and back.
   Everything now runs the full width of the rail, stacked, on request.

   The point of the original complaint still has to be answered, though: the
   sentence looked cheap because it was locked to a 20ch column and broke into
   four short ragged lines. At full rail width the same sentence sets in two,
   so the max-width is gone rather than merely widened.

   "Why us?" sits ABOVE its list rather than in a label column beside it —
   a left-hand label would be the left/right split again, just smaller.
   ========================================================================== */
.rc .rc-lead {
  max-width: none;
  margin: 0 0 42px;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.24;
}

.rc .rc-why {
  display: block;
  padding: 34px 0 36px;
  border-top: 1px solid var(--rc-line);
  border-bottom: 1px solid var(--rc-line);
}
.rc .rc-why__title {
  font-family: "Poppins", "Noto Sans", sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--rc-ink);
  margin: 0 0 22px;
}
.rc .rc-why__list li {
  padding-left: 22px;
  margin-bottom: 15px;
  font-size: 16.5px;
  line-height: 1.6;
}
.rc .rc-impact { margin-top: 48px; }

@media (max-width: 767px) {
  .rc .rc-lead { margin-bottom: 28px; }
  .rc .rc-why { padding: 26px 0 28px; }
  .rc .rc-why__title { font-size: 21px; }

  /* 🚨 Let the job title WRAP. The older mobile block above still carries
     `.position-title { white-space: nowrap; overflow: hidden; text-overflow:
     ellipsis }` — "防止标题换行" — and that rule is (0,1,0), so the newer
     `.rc .position-title` at (0,2,0) overrode its font-size but never its
     white-space. The title has therefore been setting at the .rc size of 21px
     while still forbidden to wrap.

     "Administrative Coordinator" needs 336px at 21px and the card gives it 247,
     so 89px went under the ellipsis — Rick logged it as "Table can't show all
     wording", and on three of the phones he named that exact post. The other two
     openings are short enough to fit, which is why it looked intermittent.

     Two lines on a phone is the right answer for a card heading; an ellipsis on
     a job title is not. */
  .rc .position-title {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}