/* =========================================================
   Open Positions Section
   ========================================================= */

.open-positions-section {
    padding-block: var(--section-padding);
    background-color: var(--color-ink-50);
}

.open-positions-section h2 {
    margin-bottom: var(--space-xll);
    color: var(--color-heading);
}

.open-positions-section .open-positions-list {
    gap: var(--space-sl);
    max-width: 720px;
    width: 100%;
    margin-inline: auto;
}

/* ---------- Card ---------- */

.open-positions-section .open-positions-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

/* ---------- Header (Clickable) ---------- */

.open-positions-section .open-positions-card-header {
    padding: var(--space-md) var(--space-md) var(--space-xm);
    cursor: pointer;
    user-select: none;
    gap: var(--space-xss);
}

.open-positions-section .open-positions-card-info {
    gap: var(--space-xss);
}

.open-positions-section .open-positions-eyebrow {
    font-size: var(--font-size-micro, 11px);
    color: var(--color-slate-500);
    text-transform: uppercase;
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-quote);
    font-family: var(--font-mono);
}

.open-positions-section .open-positions-title {
    color: var(--color-heading);
    margin: 0;
}

/* ---------- Toggle Button ---------- */

.open-positions-section .open-positions-toggle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--color-ink-50);
    border: 1px solid var(--color-border);
    cursor: pointer;
    color: var(--color-heading);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    flex-shrink: 0;
}

.open-positions-section .open-positions-card-header:hover .open-positions-toggle {
    border-color: var(--color-ink-200);
}

/* Plus Icon (Default) */
.open-positions-section .open-positions-toggle::before {
    content: "";
    display: block;
    width: 10px;
    height: 21px;
    background-color: currentColor;
    mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><path d="M14 8H8v6H6V8H0V6h6V0h2v6h6v2z"/></svg>');
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><path d="M14 8H8v6H6V8H0V6h6V0h2v6h6v2z"/></svg>');
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

/* ---------- Active State ---------- */

.open-positions-section .open-positions-card.is-active .open-positions-toggle {
    background-color: var(--color-teal-700);
    border-color: var(--color-teal-700);
    color: var(--color-white);
}

.open-positions-section .open-positions-card.is-active .open-positions-card-header:hover .open-positions-toggle {
    background-color: var(--color-heading);
    border-color: var(--color-heading);
}

/* Minus Icon (Active) */
.open-positions-section .open-positions-card.is-active .open-positions-toggle::before {
    mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><path d="M14 8H0V6h14v2z"/></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><path d="M14 8H0V6h14v2z"/></svg>');
}

/* ---------- Body ---------- */

.open-positions-section .open-positions-card-body {
    padding: 0 var(--space-md);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s ease, opacity 0.3s ease, padding 0.35s ease;
}

.open-positions-section .open-positions-card.is-active .open-positions-card-body {
    max-height: 600px;
    opacity: 1;
    padding: 0 var(--space-md) var(--space-md);
}

.open-positions-section .open-positions-card-body p {
    color: var(--color-slate-500);
    margin-bottom: var(--space-xm);
    font-size: var(--font-size-h6);
    line-height: var(--line-height-caption);
    /* max-width: 600px; */
}

@media (max-width:767px) {
    .open-positions-section .open-positions-wrapper {
        align-items: flex-start;
    }
}