/* =========================================================
   DockB Hamburg — Widok profilu członka (/mitglied/)
   Standard: BEM + mobile-first flexbox, bez nth-child/JS-hacków.
   Ładowane po custom.css. Wzorzec referencyjny — patrz STANDARDS.md.

   Układ (odwzorowanie produkcji):
     LEWA  (__aside) — zdjęcie + kontakt (adres/telefon/mobil/email/www/social) z ikonami
     PRAWA (__main)  — imię, rola, logo, bio
   Ikony: font "dockb-font-icons" (ładowany z dist/app.css).
   ========================================================= */

/* --- Ukrycie natywnego widoku UM (tylko VIEW; EDIT/.um-editing nietknięte) ---
   Theme renderuje własny nagłówek (.member-profile) z własnym przyciskiem edit, więc
   chowamy cały natywny .um-header i wiersz pól _um_row_1. Sekcja spotkań (_um_row_2) zostaje. */
.um-viewing .um-header,
.um-viewing .um-form .um-profile-body ._um_row_1 {
    display: none !important;
}

/* --- Czyszczenie złych praktyk layoutu (scoped do strony profilu) ---
   1) Para hacków: globalny `article{padding-top:clamp(...)}` był kasowany przez
      `.um-viewing{margin-top:-clamp(...)}` (identyczny clamp). Na profilu nie ma banera,
      więc zerujemy oba — efekt netto bez zmian, ale bez kruchego sprzężenia. */
body.um-page-user article {
    padding-top: 0;
}

body.um-page-user .um-viewing {
    margin-top: 0 !important;
}

/* 2) Sekcja spotkań (_um_row_2.meetings-invitations) była Bootstrapowym .container
   (wyśrodkowany, max-width 1140 → margin auto) z paddingiem gutter wymuszanym przez dist
   regułą (0,6,1) !important. Wyrównujemy do tej samej ramy co reszta profilu (flush-left);
   selektor z body.um-page-user ma wyższą specyficzność (0,7,1) niż reguła dist. */
body.um-page-user .entry-content .um-viewing .um-form .um-profile-body ._um_row_2.meetings-invitations {
    max-width: none !important;
    width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: var(--mp-gutter) !important;
    padding-right: var(--mp-gutter) !important;
}

/* Wspólny boczny gutter strony profilu (jedno źródło dla nagłówka i sekcji spotkań). */
.um-viewing {
    --mp-gutter: clamp(16px, 2.5vw, 40px);
}

/* --- Kontener nagłówka --- */
.um-viewing .member-profile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 2vw, 35px);
    margin-bottom: clamp(35px, 2.865vw, 55px);
    padding-left: var(--mp-gutter);
    padding-right: var(--mp-gutter);
    font-family: "Barlow", sans-serif;
    color: #343a40;
}

/* Zdjęcie bleeduje poza gutter do krawędzi (mobile: obie strony; desktop: tylko lewa). */
.um-viewing .member-profile__photo {
    margin-left: calc(-1 * var(--mp-gutter));
    margin-right: calc(-1 * var(--mp-gutter));
}

/* --- Przycisk edycji profilu (własny profil) — prawy górny róg --- */
.um-viewing .member-profile__edit {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    line-height: 1;
    color: #6fb4dc;
    text-decoration: none;
    transition: color 0.2s;
}

.um-viewing .member-profile__edit:hover {
    color: #ed1c40;
}

/* Mobile: spłaszcz aside (display:contents) tak, by jego dzieci weszły do flexa
   .member-profile i poddały się `order`. UWAGA: na mobile aside MUSI zostać
   `display:contents` — żadnej deklaracji `display:flex` w base, bo nadpisałaby
   contents (równa specyficzność, późniejsza) i zabiła order-trick. Kolumnowy
   aside (display:flex) wraca dopiero w @media (min-width:768px) poniżej.
   Docelowa kolejność mobile: zdjęcie → nazwisko/rola/bio → kontakt. */
.um-viewing .member-profile__aside {
    display: contents;
}
.um-viewing .member-profile__photo   { order: 1; }
.um-viewing .member-profile__main     { order: 2; }
.um-viewing .member-profile__contact  { order: 3; }

/* =========================================================
   LEWA kolumna — zdjęcie + kontakt (style dzieci wspólne dla mobile i desktop)
   ========================================================= */
.um-viewing .member-profile__photo img {
    display: block;
    width: 100%;
    height: auto;
    background-color: rgba(91, 117, 149, 0.1);
}

/* --- Blok kontaktowy --- */
.um-viewing .member-profile__contact {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1vw, 16px);
}

.um-viewing .member-profile__item {
    position: relative;
    margin: 0;
    padding-left: 40px;
    font-size: 1rem;
    font-style: normal;
    line-height: 1.4;
}

.um-viewing .member-profile__item a {
    color: #343a40;
    text-decoration: none;
    word-break: break-word;
}

.um-viewing .member-profile__item a:hover {
    color: #6fb4dc;
}

.um-viewing .member-profile__item--address span {
    display: block;
}

/* Ikony pól kontaktu (dockb-font-icons) */
.um-viewing .member-profile__item::before {
    position: absolute;
    left: 0;
    top: 0.1em;
    width: 30px;
    font-family: "dockb-font-icons";
    color: #000;
    text-align: center;
}

.um-viewing .member-profile__item--address::before  { content: "\e905"; }
.um-viewing .member-profile__item--phone::before    { content: "\e90b"; }
.um-viewing .member-profile__item--mobile::before   { content: "\e90a"; }
.um-viewing .member-profile__item--email::before    { content: "\e909"; }
.um-viewing .member-profile__item--website::before  { content: "\e90c"; }

/* --- Social (ikony brandowe) --- */
.um-viewing .member-profile__socials {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: 0.25rem 0 0;
    padding: 0;
}

.um-viewing .member-profile__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4em;
    height: 1.4em;
    font-family: "dockb-font-icons";
    font-size: 1.25rem;
    color: #000;
    text-decoration: none;
    transition: color 0.2s;
}

.um-viewing .member-profile__social a:hover {
    color: #6fb4dc;
}

.um-viewing .member-profile__social--xing a::before      { content: "\e90d"; }
.um-viewing .member-profile__social--linkedin a::before  { content: "\e908"; }
.um-viewing .member-profile__social--instagram a::before { content: "\e907"; }
.um-viewing .member-profile__social--facebook a::before  { content: "\e906"; }

/* =========================================================
   PRAWA kolumna — imię, rola, logo, bio
   ========================================================= */
.um-viewing .member-profile__main {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.um-viewing .member-profile__name,
.um-viewing .member-profile__role {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
}

.um-viewing .member-profile__name { color: #343a40; }
.um-viewing .member-profile__role { color: #6fb4dc; }

.um-viewing .member-profile__logo {
    display: block;
    width: auto;
    max-width: min(365px, 90%);
    height: auto;
    margin: 1.25rem 0;
}

.um-viewing .member-profile__bio {
    font-size: 1rem;
    text-transform: none;
    overflow-y: auto;
}

.um-viewing .member-profile__bio p {
    margin: 0 0 0.9rem;
}

.um-viewing .member-profile__bio ul {
    padding-left: 25px;
    margin: 0.833rem 0 0;
}

/* =========================================================
   Desktop: dwie kolumny (aside | main), proporcje jak w oryginale
   ========================================================= */
@media (min-width: 768px) {
    .um-viewing .member-profile {
        flex-direction: row;
        align-items: flex-start;
        gap: clamp(25px, 4vw, 70px);
    }

    /* Przywróć aside jako kolumnę (zdjęcie + kontakt razem po lewej). */
    .um-viewing .member-profile__aside {
        display: flex;
        flex-direction: column;
        gap: clamp(15px, 1.6vw, 25px);
        flex: 0 0 37.5%;
        max-width: 37.5%;
        order: 0;
    }

    /* Desktop: zdjęcie bleeduje tylko w lewo (prawa krawędź = kolumna, gap do treści). */
    .um-viewing .member-profile__photo {
        margin-right: 0;
    }

    .um-viewing .member-profile__main {
        flex: 1 1 auto;
        padding-top: clamp(10px, 1.5vw, 30px);
        order: 0;
    }

    .um-viewing .member-profile__name,
    .um-viewing .member-profile__role {
        font-size: 1.667rem;
    }

    .um-viewing .member-profile__bio {
        max-height: 455px;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .um-viewing .member-profile__bio {
        max-height: 545px;
    }
}

@media (min-width: 1200px) {
    .um-viewing .member-profile__name,
    .um-viewing .member-profile__role {
        font-size: 2.083rem;
    }

    .um-viewing .member-profile__bio {
        max-height: 720px;
    }
}