.profileHeader__container {
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    background-color: var(--color-iceland-100, #FBF9F6);

    @media (min-width: 960px) {
        padding-bottom: 112px;
    }
}

.profileHeader__header-and-aboutMe-wrapper {
    @media (min-width: 960px) {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
}

.profileHeader__header-wrapper {
    display: flex;
    padding: var(--section-padding-lg, 64px) var(--spacing-x3, 24px) var(--section-padding-lg, 64px) var(--spacing-x3, 24px);
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
    align-self: stretch;
    width: 100%;
    max-height: fit-content;
    border: 1px solid var(--color-iceland-500, #D1C9B8);
    background: var(--color-iceland-200, #F9F6F0);

    @media (min-width: 960px) {
        display: flex;
        width: 424px;
        padding: 24px;
        align-items: center;
        gap: 32px;

        border-radius: 142px 0 0 0;
        margin-top: -300px;
        margin-left: var(--section-padding-md, 80px);
    }
}

.profileHeader__header-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    align-self: stretch;
    position: relative;
    width: 100%;

    @media (min-width: 960px) {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        align-self: stretch;
        justify-content: center;
    }
}

.profileHeader__header-background {
    width: 100%;
    height: 240px;
    align-self: stretch;
    background-size: cover;

    @media (min-width: 960px) {
        height: 536px;
    }
}

.profileHeader__thumb {
    height: 112px;
    width: 112px;
    background-size: cover;
    border-top-left-radius: 40px;
    border-bottom-right-radius: 40px;
    border: 2px solid white;

    position: absolute;
    top: -140px;

    @media (min-width: 960px) {
        position: static;
        width: 376px;
        height: 376px;
        align-self: stretch;
        aspect-ratio: 1/1;
        border-radius: 120px 0;
    }

}

.profileHeader__name {
    font: var(--font-title-lg);
    color: var(--color-iceland-1000);
    margin-bottom: 0px;
    text-align: center;
}

.profileHeader__location {
    color: var(--color-contrast-200);
    font: var(--font-body-lg);
    margin-bottom: 0px;
}

.profileHeader__prefix {
    font: var(--font-overline-lg);
    color: var(--color-iceland-1000);
    margin-bottom: 0px;
    text-transform: uppercase;
    letter-spacing: 1.8px;
}

.profileHeader__content-container {
    display: flex;
    padding: 8px 0;
    flex-direction: column;
    gap: 12px;
    align-self: stretch;

    @media (min-width: 960px) {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.profileHeader__expertise-tags {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    gap: 8px;
    align-self: stretch;
    flex-wrap: wrap;

    @media (min-width: 960px) {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.profileHeader__temp-badge {
    display: flex;
    height: 28px;
    min-width: 28px;
    padding: 0 var(--sizing-xs, 8px);
    justify-content: center;
    align-items: center;
    gap: var(--sizing-4xs, 0);

    border-radius: var(--border-radius-s, 4px);
    background: var(--color-iceland-400, #EDE6D5);

    font: var(--font-body-xxs);
    font-weight: 600;
    color: var(----color-iceland-800);
}

.profileHeader__vertical-line {
    display: none;
    width: 1px;
    height: 40px;
    background-color: var(--color-iceland-500);

    @media (min-width: 960px) {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.profileHeader__buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    align-self: stretch;
}

.profileHeader__contact-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 56px;
    font: var(--font-body-sm);
    font-weight: 600;
    line-height: 25px;
    color: var(--color-contrast-100, #FFFFFF);
    border-radius: var(--border-radius-2xl, 40px);
    background: var(--color-iceland-1000, #1D1C1A);
    border: 2px solid transparent;
    /* prevents layout shift */
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.profileHeader__contact-button:hover {
    background: var(--color-iceland-900, #34322E);
}

.profileHeader__contact-button:active {
    background: var(--color-iceland-900, #34322E);
    border-color: var(--color-iceland-400, #EDE6D5);
}


.profileHeader__subscribe-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 56px;
    font: var(--font-body-sm);
    font-weight: 600;
    line-height: 25px;
    border: 2px solid var(--color-iceland-1000, #1D1C1A);
    border-radius: var(--border-radius-2xl, 40px);
    color: var(--color-iceland-1000, #1D1C1A) !important;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.profileHeader__subscribe-button:hover,
.profileHeader__subscribe-button:active {
    border-radius: var(--Number-borderRadius-3xl, 40px);
    border-color: var(--color-iceland-800, #524F48);
    color: var(--color-iceland-800, #524F48);
}


.profileHeader__social-icons {
    width: 100%;
}

.profileHeader__social-icons ul {
    display: flex;
    height: 46.714px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 40px;
    padding: 0;
    margin: 0;
}

.profileHeader__social-icons li {
    list-style-type: none;
}