/* =========================================
   CONTENT CARDS
   ========================================= */

.content-card {
    padding: 26px;

    background: var(--surface-secondary);

    border: 1px solid var(--border);
    border-radius: 8px;

    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.12);
}


/* =========================================
   BUTTONS
   ========================================= */

.primary-button,
.secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 38px;

    padding: 0 16px;

    border-radius: 5px;

    font-size: 0.84rem;
    font-weight: 500;

    text-decoration: none;

    cursor: pointer;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}


.primary-button {
    color: white;

    background: var(--accent);

    border: 1px solid var(--accent);
}


.primary-button:hover {
    background: var(--accent-hover);

    border-color: var(--accent-hover);
}


.secondary-button {
    color: var(--text-primary);

    background: transparent;

    border: 1px solid var(--border);
}


.secondary-button:hover {
    background: var(--surface-hover);

    border-color: #55545e;
}


/* =========================================
   SECTION HEADINGS
   ========================================= */

.section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 22px;
}


.section-eyebrow {
    display: block;

    margin-bottom: 5px;

    color: var(--accent-light);

    font-family:
        "Cascadia Code",
        "Fira Code",
        Consolas,
        monospace;

    font-size: 0.7rem;
}


.section-heading h2,
.personality-card h2,
.placeholder-section h2 {
    font-size: 1.15rem;
    font-weight: 600;
}


.section-link {
    flex-shrink: 0;

    padding: 0;

    color: var(--accent-light);

    background: transparent;

    border: none;

    font-size: 0.8rem;

    cursor: pointer;
}


.section-link:hover {
    text-decoration: underline;
}


/* =========================================
   PLACEHOLDER CONTENT
   ========================================= */

.placeholder-section {
    min-height: 300px;
}


.placeholder-text {
    margin-top: 12px;

    color: var(--text-secondary);

    line-height: 1.6;

    font-size: 0.88rem;
}