/**
 * @file user.css
 * Benutzerprofile – Default-/Volltextansicht (templates/content/user.html.twig).
 * Mobile-first, Design-Tokens.
 *
 * Aufbau: Foto (quadratisch, abgerundete Ecken) links als Float, der Text
 * (Name/Pronomen/Position/Unternehmen/Bio) umfließt es rechts und läuft
 * unterhalb des Bildes auf volle Breite weiter. Mobil gestapelt: Foto oben,
 * Text darunter, alles linksbündig.
 */

.profile {
  max-width: var(--layout-width);
  margin: 0 auto var(--space-2xl);
}

/* Float-Container aufräumen, damit nachfolgende Inhalte nicht mitfließen. */
.profile::after {
  content: "";
  display: block;
  clear: both;
}

/* ========================================================================
   Foto – quadratisch, abgerundete Ecken, kein Rahmen
   (gleiche Bildsprache wie die Kompakt-Kachel .profile-card__picture)
   ======================================================================== */
.profile__picture {
  width: 100%;
  /* Mobil nicht über die volle Tablet-Breite aufblasen. */
  max-width: 24rem;
  aspect-ratio: 1;
  margin-bottom: var(--space-md);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-grey-200);
}

@media (min-width: 768px) {
  .profile__picture {
    float: left;
    width: clamp(14rem, 33%, 22rem);
    max-width: none;
    margin: 0 var(--space-xl) var(--space-md) 0;
  }
}

/* Drupal-Wrapper (field/field__item, ggf. Link) auf volle Fläche ziehen. */
.profile__picture .field,
.profile__picture .field__item,
.profile__picture a,
.profile__picture picture {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
}

.profile__picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ----- Platzhalter ohne Bild: Fläche mit Initiale ----- */
.profile__picture--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--color-accent) 25%, var(--color-white));
}

.profile__initial {
  font-family: var(--font-heading);
  font-size: clamp(4.5rem, 16vw, 8rem);
  font-weight: 700;
  line-height: 1;
  color: var(--color-dark);
}

/* ========================================================================
   Inhalt – Name, Pronomen, Rolle, Bio
   ======================================================================== */
.profile__content {
  min-width: 0;
}

/* Name + Pronomen in einer Zeile, an der Basislinie ausgerichtet;
   bei langen Namen rutschen die Pronomen in die nächste Zeile. */
.profile__name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3xs) var(--space-sm);
}

.profile__name {
  margin: 0;
  font-size: var(--font-size-h1);
  font-weight: 700;
  line-height: var(--line-height-heading);
  overflow-wrap: break-word;
}

/* Pronomen: dezent, leicht hochgestellt hinter dem Namen. */
.profile__pronouns {
  font-size: var(--font-size-sm);
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-text-muted);
  transform: translateY(-0.5em);
}

/* Position: leichter und kleiner als der Name. */
.profile__position {
  margin-top: var(--space-2xs);
  font-size: clamp(1.2rem, 1rem + 1.2vw, 1.6rem);
  font-weight: 400;
  line-height: 1.3;
}

/* Unternehmen: kursiv abgesetzt (wie in der Kompakt-Kachel). */
.profile__company {
  margin-top: var(--space-3xs);
  font-size: var(--font-size-base);
  font-style: italic;
  line-height: 1.4;
  color: var(--color-text-muted);
}

.profile__company a {
  color: inherit;
}

/* ----- Bio ----- */
.profile__bio {
  /* Lesemaß für den Fließtext; neben dem Float ist der Bereich ohnehin
     schmaler, unterhalb des Bildes greift die Grenze. */
  max-width: 100%;
  margin-top: var(--space-lg);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

.profile__bio > :last-child,
.profile__bio p:last-child {
  margin-bottom: 0;
}

/* ----- Social-Media-/Web-Links: Icon + Label als Pills ----- */
.profile__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-xs);
  margin: var(--space-lg) 0 0;
  padding: 0;
  list-style: none;
}

.profile__social-item {
  margin: 0;
}

.social-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 2.25rem;
  padding: var(--space-3xs) var(--space-sm) var(--space-3xs) var(--space-xs);
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-text);
  text-decoration: none;
  border: 2px solid var(--color-text);
  border-radius: 999px;
  transition: background var(--transition-base), color var(--transition-base);
}

.social-link:hover,
.social-link:focus-visible {
  color: var(--color-white);
  background: var(--color-text);
}

/* Icon als CSS-Mask: das SVG liefert nur die Form, die Farbe kommt über
   currentColor vom Link (inkl. Hover-Invertierung). Dateien:
   images/icons/social/{platform}.svg (Ionicons; Bluesky/Substack: Simple
   Icons – siehe README dort). */
.social-icon {
  flex: none;
  width: 1.25em;
  height: 1.25em;
  background-color: currentColor;
  -webkit-mask: var(--social-icon) center / contain no-repeat;
  mask: var(--social-icon) center / contain no-repeat;
}

.social-icon--instagram { --social-icon: url("../images/icons/social/instagram.svg"); }
.social-icon--facebook  { --social-icon: url("../images/icons/social/facebook.svg"); }
.social-icon--tiktok    { --social-icon: url("../images/icons/social/tiktok.svg"); }
.social-icon--x         { --social-icon: url("../images/icons/social/x.svg"); }
.social-icon--bluesky   { --social-icon: url("../images/icons/social/bluesky.svg"); }
.social-icon--mastodon  { --social-icon: url("../images/icons/social/mastodon.svg"); }
.social-icon--substack  { --social-icon: url("../images/icons/social/substack.svg"); }
.social-icon--youtube   { --social-icon: url("../images/icons/social/youtube.svg"); }
.social-icon--linkedin  { --social-icon: url("../images/icons/social/linkedin.svg"); }
.social-icon--xing      { --social-icon: url("../images/icons/social/xing.svg"); }
.social-icon--website   { --social-icon: url("../images/icons/social/website.svg"); }

/* Hostnamen (Websites) können lang sein – notfalls umbrechen. */
.social-link__label {
  overflow-wrap: anywhere;
}

/* Weitere im Display aktivierte Felder unter der Bio. */
.profile__extra {
  margin-top: var(--space-lg);
}

.profile__extra .field {
  margin-bottom: var(--space-sm);
}

/* ========================================================================
   Drupal-Field-Wrapper neutralisieren
   ======================================================================== */
/* Labels sind durch das Layout selbsterklärend (Name, Pronomen, Rolle, Bio). */
.profile .field__label {
  display: none;
}

.profile__pronouns .field,
.profile__pronouns .field__item,
.profile__position .field,
.profile__position .field__item,
.profile__company .field,
.profile__company .field__item {
  display: inline;
  margin: 0;
}

/* ========================================================================
   Personen-Kachel – Darstellungsmodus „kompakt" (user--kompakt.html.twig)
   Genutzt u. a. für Speaker*innen/Moderation am Inhaltstyp „session".

   Vertikale Kachel: großes quadratisches Bild mit abgerundeten Ecken,
   darunter Name und Position in Versalien, Unternehmen als dritte Zeile.
   ======================================================================== */
.profile-card {
  min-width: 0;
}

/* ----- Bild: quadratisch, volle Kachelbreite, abgerundete Ecken ----- */
.profile-card__picture {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-grey-200);
}

.profile-card__picture .field,
.profile-card__picture .field__item,
.profile-card__picture a,
.profile-card__picture picture {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
}

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

.profile-card__picture--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--color-accent) 25%, var(--color-white));
}

.profile-card__initial {
  font-family: var(--font-heading);
  font-size: clamp(3rem, 10vw, 5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--color-dark);
}

/* ----- Textblock unter dem Bild ----- */
.profile-card__info {
  min-width: 0;
  margin-top: var(--space-sm);
}

.profile-card__name {
  font-size: var(--font-size-base);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.25;
  overflow-wrap: break-word;
}

.profile-card__name a {
  color: inherit;
  text-decoration: none;
}

.profile-card__name a:hover,
.profile-card__name a:focus-visible {
  background: var(--underline-equals);
}

/* Position: Versalien wie der Name, aber leichter. */
.profile-card__position {
  margin-top: var(--space-3xs);
  font-size: var(--font-size-base);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

/* Unternehmen: kursiv abgesetzt (wie die Website-Zeile im Vorbild). */
.profile-card__company {
  margin-top: var(--space-2xs);
  font-size: var(--font-size-base);
  font-style: italic;
  line-height: 1.3;
  color: var(--color-text-muted);
}

/* Feld-Wrapper in der Kachel neutralisieren (Labels sind selbsterklärend). */
.profile-card .field__label {
  display: none;
}

.profile-card__position .field,
.profile-card__position .field__item,
.profile-card__company .field,
.profile-card__company .field__item {
  display: inline;
  margin: 0;
}