/*
 * Die Aktionszeile im Kopf eines fremden Profils (5.10.44): Follow oder
 * Unfollow, Confirm Account, Message.
 *
 * Eine Zeile, auch bei 320 CSS-Pixeln. Die Zellen teilen sich die Breite zu
 * gleichen Teilen (flex: 1 1 0), deshalb braucht es keine Zaehlung und keine
 * leeren Spalten: stehen nur eine oder zwei Aktionen da, nehmen sie die
 * verfuegbare Breite und sehen nicht nach einem Dreierraster mit Luecke aus.
 *
 * Welche Aktion erscheint, entscheiden weiter Folgen, TrustRollout und die
 * Bedingung am Message-Knopf. Hier steht nur, wie sie aussieht.
 *
 * Nach folgen.css und community-trust.css: dort stehen die Knoepfe in ihrer
 * Grundform, hier wird ihnen nur die Zeile gegeben. Hover und Unfollow
 * behalten ihre Farben aus folgen.css. Logische Eigenschaften: rechts-nach-links
 * stimmt ohne eigene Regel, und das margin-left der alten Reihe ist weg.
 */

/* Der Kopf zentriert seine Kinder (align-items) - ohne eigene Breite waere
   der Infoblock nur so breit wie sein Inhalt und die Zellen so schmal wie
   ihr laengstes Wort. */
.user-profile__info {
    width: 100%;
}

.user-profile__info .button-area {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
}

.user-profile__info .button-area > .aw-folgen,
.user-profile__info .button-area > .aw-trust-cta,
.user-profile__info .button-area > .message-btn {
    display: inline-flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    max-width: 200px;
    min-height: 44px;
    margin: 0;
    padding: 6px 12px;
    border: 1px solid hsl(var(--dark)/0.2);
    border-radius: 14px;
    background-color: hsl(var(--white));
    color: hsl(var(--dark));
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    /* Ein langes Wort einer Uebersetzung bricht in der Zelle um, statt sie
       oder die Seite zu sprengen. */
    white-space: normal;
    overflow-wrap: anywhere;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

.user-profile__info .button-area > .aw-folgen:not(.aw-folgen--gefolgt):hover,
.user-profile__info .button-area > .aw-trust-cta:not(.aw-trust-cta--done):hover,
.user-profile__info .button-area > .message-btn:hover {
    border-color: hsl(var(--base));
    color: hsl(var(--base));
}

/* Bestaetigt: Haken und Wort sagen es, nicht nur die Farbe. */
.user-profile__info .button-area > .aw-trust-cta--done {
    border-color: var(--aw-trust-violet);
    color: var(--aw-trust-violet);
}

.user-profile__info .button-area > .aw-trust-cta--done::before {
    content: "\2713";
    flex: none;
    font-weight: 700;
}

/* Die Spende steht nicht in der Dreierzeile, sondern auf eigener Zeile. */
.user-profile__info .button-area > .donate {
    flex: 1 0 100%;
}

.user-profile__info .button-area > .donate button {
    min-height: 44px;
    margin: 0;
}

/* Der vollstaendige Name steht im aria-label; die Kurzform ist nur zu sehen. */
.aw-pa-kurz {
    display: none;
}

@media (max-width: 575.98px) {
    .user-profile__info .button-area {
        gap: 6px;
        max-width: none;
    }

    .user-profile__info .button-area > .aw-folgen,
    .user-profile__info .button-area > .aw-trust-cta,
    .user-profile__info .button-area > .message-btn {
        max-width: none;
        padding: 4px;
        font-size: 13px;
    }

    .aw-pa-lang {
        display: none;
    }

    .aw-pa-kurz {
        display: inline;
    }
}

@media (prefers-reduced-motion: reduce) {
    .user-profile__info .button-area > .aw-folgen,
    .user-profile__info .button-area > .aw-trust-cta,
    .user-profile__info .button-area > .message-btn {
        transition: none;
    }
}