/*=============== ABOUT PAGE (single-column flow) ===============*/
/* about.html is one scrollable column: profile → intro → currently →
 * interests → "Talk with Ame" (full-body image linking to the chatroom).
 * Skills/coursework live on the recruiter page; chat lives in the chatroom.
 * Loaded only by about.html.
 */

.content-container.about-single {
    grid-template-columns: 1fr;
    max-width: 780px;
    width: 100%;
    gap: 0;
    padding: 0 20px;
    margin: 8px auto 0;
    box-sizing: border-box;
}

.about-section {
    max-width: 780px;
    margin: 34px auto 0;
    padding: 0 20px;
    box-sizing: border-box;
    text-align: left;
}

/* Keep the profile card and the sections below on the same side margins. */
@media (max-width: 768px) {
    .content-container.about-single {
        padding: 0 16px;
        margin-top: 4px;
    }

    .about-section {
        padding: 0 16px;
        margin-top: 26px;
    }

    .profile-layers {
        width: 100%;
        margin: 0 auto 1.25rem;
    }

    /* Match the card header's 16px inset so the box looks even. */
    .profile-layers .content--table {
        margin: 0.75rem 1rem 1rem;
    }
}

/* Talk with Ame */
.about-chat { text-align: center; }

.about-chat-link {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.about-chat-cat {
    width: 220px;
    max-width: 60vw;
    height: auto;
    display: block;
    filter: drop-shadow(0 12px 24px rgba(17, 24, 39, 0.16));
    transition: transform 0.2s ease;
}

.about-chat-link:hover .about-chat-cat {
    transform: translateY(-4px) scale(1.02);
}

.about-chat-label {
    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
    font-size: 0.95rem;
    font-weight: 600;
    color: hsl(230, 100%, 50%);
}

.about-chat-link:hover .about-chat-label { text-decoration: underline; }

/* The table's own header sits flush on the rows (no gray strip). */
.profile-layers .content--table .heading { margin-bottom: 0; }

/* Education logos (profile card) */
.edu-line,
.lang-line {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Desktop: a clean two-column table — label on the left, every value
   right-aligned (including the multi-line Education / Languages rows),
   with a hairline between rows so the columns read as one table. */
@media (min-width: 769px) {
    .profile-layers { width: min(100%, 460px); }

    .profile-layers .status {
        gap: 0;
        padding: 0.25rem 1rem;
    }

    .profile-layers .status dt,
    .profile-layers .status dd {
        padding: 0.7rem 0;
        border-bottom: 1px solid #f0f0f0;
    }

    .profile-layers .status dt:nth-last-of-type(1),
    .profile-layers .status dd:last-child { border-bottom: none; }

    .profile-layers .status dt { padding-right: 1.5rem; line-height: 1.45; }

    .profile-layers .status dd {
        justify-content: flex-end;
        text-align: right;
        line-height: 1.45;
        text-wrap: balance;
    }

    .profile-layers .status dd.edu-line,
    .profile-layers .status dd.lang-line {
        align-items: flex-end;
        gap: 6px;
    }
}

.profile-layers .status dd.lang-line { gap: 2px; }

.edu-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.edu-logo {
    height: 18px;
    width: auto;
}

.edu-logo--ucla { height: 13px; }