/*
 * Profile pages — the user's own profile, public profiles and the edit form.
 *
 * Page-specific styles, loaded last in the manifest so they can adjust anything above. Reusable
 * pieces (buttons, fields, inputs) come from the component stylesheets; this file only styles the
 * profile card and how the form sections are grouped on this page.
 */

/* ---- Page frame ----------------------------------------------------------------------------- */

.profile-page {
    max-width: 48rem;
    margin: 0 auto;
    padding: var(--space-7) var(--gutter);
}

/* ---- Profile card --------------------------------------------------------------------------- */

.profile-card {
    background: var(--colour-surface);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

/* The cover banner sits flush at the card's top edge; the card's own overflow clipping rounds
   its upper corners. Profiles without a cover render nothing here, so the header simply starts
   lower. */
.profile-card__cover {
    border-bottom: 1px solid var(--colour-border);
}

.profile-card__cover-image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 1;
    object-fit: cover;
}

.profile-card__header {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-6);
    background: var(--colour-surface-sunken);
    border-bottom: 1px solid var(--colour-border);
}

.profile-card__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background: var(--colour-primary-surface);
    color: var(--colour-primary);
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
}

/* A stored picture fills the same circle as the generated initial. */
img.profile-card__avatar--image {
    object-fit: cover;
}

.profile-card__identity {
    min-width: 0;
    flex: 1;
}

.profile-card__name {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--colour-ink);
    overflow-wrap: anywhere;
}

.profile-card__company {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
    color: var(--colour-ink);
    overflow-wrap: anywhere;
}

.profile-card__username {
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
    color: var(--colour-ink-quiet);
    overflow-wrap: anywhere;
}

.profile-card__edit {
    flex-shrink: 0;
}

.profile-card__heading {
    margin: 0;
    padding: var(--space-6);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--colour-ink);
    border-bottom: 1px solid var(--colour-border);
}

.profile-card__body {
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* ---- Sections ------------------------------------------------------------------------------- */

.profile-section__title {
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--colour-ink-quiet);
}

.profile-card__bio {
    margin: 0;
    line-height: var(--leading-body);
    color: var(--colour-ink);
    overflow-wrap: anywhere;
}

.profile-card__bio--empty {
    color: var(--colour-ink-faint);
    font-style: italic;
}

/* ---- Meta rows -------------------------------------------------------------------------------- */

.profile-meta {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.profile-meta__row {
    display: flex;
    align-items: baseline;
    gap: var(--space-4);
}

.profile-meta__label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--colour-ink-quiet);
    min-width: 9rem;
}

.profile-meta__value {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--colour-ink);
}

/* The website row on the public profile links out. Only the host is shown, so the text is short, but the
   stored URL can be long and the value column is narrow: it has to be allowed to break rather than widen the
   row. The block is shared with `social/profile/show`, which is why this member of the family lives here with
   its siblings rather than in the social page's own file. */
.profile-meta__link {
    overflow-wrap: break-word;
}

/* ---- Photo block (edit page) ------------------------------------------------------------------ */

.profile-photo {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-6);
    border-bottom: 1px solid var(--colour-border);
}

.profile-photo__box {
    position: relative;
    width: 6.5rem;
    height: 6.5rem;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    overflow: hidden;
    background: var(--colour-primary-surface);
    box-shadow: var(--shadow-sm);
}

.profile-photo__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-photo__initial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    color: var(--colour-primary);
}

/* The overlay while an upload is in flight. Display toggles with the class the page's behaviour
   module adds; the opacity fade is the only animation, so the state reads even with motion off. */
.profile-photo__loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--colour-surface) 60%, transparent);
    opacity: 0;
    transition: opacity var(--duration-base) var(--easing);
}

.profile-photo__box.is-uploading .profile-photo__loading {
    opacity: 1;
}

.profile-photo__controls {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    flex: 1;
    min-width: 0;
}

.profile-photo__upload {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.profile-photo__hint {
    margin-top: var(--space-2);
}

/* ---- Cover block (edit page) ---------------------------------------------------------------- */

.profile-cover {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6);
    border-bottom: 1px solid var(--colour-border);
}

.profile-cover__box {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 1;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--colour-border);
    background: var(--colour-surface-sunken);
}

.profile-cover__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The banner a profile without a cover shows on the edit page: the sunken surface, so the
   block keeps its shape and the upload controls stay where they are. */
.profile-cover__empty {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--colour-surface-sunken);
}

/* Same overlay as the avatar: toggled by the page's behaviour module, faded only with opacity. */
.profile-cover__loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--colour-surface) 60%, transparent);
    opacity: 0;
    transition: opacity var(--duration-base) var(--easing);
}

.profile-cover__box.is-uploading .profile-cover__loading {
    opacity: 1;
}

.profile-cover__controls {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

.profile-cover__upload {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.profile-cover__hint {
    margin-top: var(--space-2);
}

/* ---- Edit form -------------------------------------------------------------------------------- */

.profile-form {
    padding: var(--space-6);
}

.profile-form__section {
    margin: 0 0 var(--space-6);
    padding: 0;
    border: none;
}

.profile-form__section:last-of-type {
    margin-bottom: 0;
}

.profile-form__section-title {
    margin: 0 0 var(--space-5);
    padding: 0 0 var(--space-3);
    width: 100%;
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--colour-ink-quiet);
    border-bottom: 1px solid var(--colour-border);
}

/* ---- Responsive ------------------------------------------------------------------------------- */

@media (max-width: 640px) {
    .profile-page {
        padding: var(--space-5) var(--gutter);
    }

    .profile-card__header {
        flex-wrap: wrap;
        padding: var(--space-5);
    }

    .profile-card__body,
    .profile-form {
        padding: var(--space-5);
    }

    .profile-photo {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        padding: var(--space-5);
        gap: var(--space-5);
    }

    .profile-photo__box {
        margin: 0 auto;
    }

    .profile-cover {
        padding: var(--space-5);
    }

    .profile-card__edit {
        width: 100%;
        text-align: center;
    }

    .profile-meta__row {
        flex-direction: column;
        gap: var(--space-1);
    }
}