/*
 * VOMA Child Theme – team.css
 *
 * Team-/Ansprechpartner-Karte: Foto, Zuständigkeits-Badge, Name, Text,
 * Direkt-Buchungslink. Erste Verwendung: /termin/ (Gruppe A).
 *
 * Quellen:
 *   06_Standards/CI/COMPONENTS.md – Karten-/Radius-/Schatten-Werte
 *   06_Standards/DEVELOPMENT/CSS-TOKENS.md – Token-Register
 */

/* ============================================================
   SECTION + GRID
   ============================================================ */

.voma-team {
  padding-block: var(--voma-space-7) var(--voma-space-8);
}

.voma-team__inner {
  max-width: var(--voma-max-service);
  margin-inline: auto;
  /* Kein eigenes horizontales Padding mehr – kommt von .site-content
     (Mobile-Design-System, docs/components/mobile-design-system.md). */
}

.voma-team__grid {
  display: grid;
  gap: var(--voma-space-6);
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .voma-team__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   KARTE
   UX-Review 02.07.2026: 220px-Foto in kartenbreiter Box wirkte wie
   ein Passfoto auf leerer Fläche (Feedback: „nicht hochwertig genug").
   Neues Konzept: Portrait als eigenständiges, freischwebendes Element
   mit eigenem Verlauf-Rahmen und Schatten statt Bild-in-Box; Karte
   zentriert statt linksbündig, CTA als leiser Text-Link (Muster aus
   .voma-tile__cta-label/-arrow, cards.css) statt Pill-Button, der mit
   dem Gesicht um Aufmerksamkeit konkurriert.
   ============================================================ */

.voma-team__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #ffffff;
  border: var(--voma-border);
  border-radius: var(--voma-radius-card);
  box-shadow: var(--voma-shadow-card);
  /* Oben mehr Raum reserviert, als das Foto braucht – der negative
     margin-top des Fotos zieht es über diesen Rand hinaus (siehe
     .voma-team__photo). overflow bleibt bewusst sichtbar (nicht
     hidden), sonst würde die Karte das überstehende Foto abschneiden. */
  padding: 68px var(--voma-space-6) var(--voma-space-6);
  overflow: visible;
}

.voma-team__photo {
  width: 168px;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  /* 68px Karten-Padding minus 84px negativer Versatz = Foto ragt
     16px über die Kartenoberkante hinaus („leicht herausragen"). */
  margin: -84px auto 0;
  padding: 8px;
  border-radius: 26px;
  /* Sehr helle Fläche/Verlauf hinter dem Portrait statt eines echten
     Freistellers (dafür bräuchte es neue Quellfotos) – der 8px
     Innenabstand lässt den Verlauf als schmalen Rand ums Foto sichtbar
     bleiben statt vom Bild komplett überdeckt zu werden. */
  background: linear-gradient(160deg, #eef4ef 0%, #ffffff 65%);
  box-shadow:
    0 20px 34px -14px rgba(17, 24, 39, .30),
    0 2px 8px rgba(17, 24, 39, .06);
}

.voma-team__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Kopf bekommt oben Luft statt an der Kante zu kleben, Fokus bleibt
     auf Kopf/Schulterbereich statt auf der Brust. */
  object-position: 50% 15%;
  display: block;
  border-radius: 18px;
}

.voma-team__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--voma-space-2);
  margin-top: var(--voma-space-4);
}

.voma-team__badge {
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--voma-green-dark);
  background: rgba(82, 177, 101, .12);
  border-radius: var(--voma-radius-pill);
  padding: 4px var(--voma-space-3);
}

.voma-team__name {
  font-size: 22px;
  font-weight: 900;
  color: #111827;
  margin: 0;
}

.voma-team__text {
  font-size: 15.5px;
  line-height: 1.7;
  color: #1f2933;
  /* Schmalere Textspalte als die Kartenbreite – lange Zeilen unter
     einem zentrierten, schmalen Foto wirken sonst unausgewogen. */
  max-width: 30ch;
  margin: 0;
}

.voma-team__cta {
  margin-top: var(--voma-space-2);
  text-decoration: none;
}

/* Text-Link mit Pfeil – identisches Interaktionsmuster wie
   .voma-tile__cta-label/-arrow (cards.css), hier eigenständig
   gehalten, da jede Komponentendatei ihre Klassen selbst besitzt
   (Konvention dieses Theme, siehe Datei-Header in cards.css/hero.css). */
.voma-team__cta-label {
  display: inline-flex;
  align-items: center;
  gap: var(--voma-space-1);
  font-size: 14px;
  font-weight: 800;
  color: var(--voma-green);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition:
    color var(--voma-transition-base),
    text-decoration-color var(--voma-transition-base);
}

.voma-team__cta-arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform var(--voma-transition-base);
}

.voma-team__cta:hover .voma-team__cta-label,
.voma-team__cta:focus-visible .voma-team__cta-label {
  color: var(--voma-green-dark);
  text-decoration-color: currentColor;
}

.voma-team__cta:hover .voma-team__cta-arrow,
.voma-team__cta:focus-visible .voma-team__cta-arrow {
  transform: translateX(4px);
}

/* ============================================================
   DESKTOP BREAKPOINT (≥ 64rem)
   UX-Review 02.07.2026 (Runde 2): das zentrierte Floating-Avatar-
   Konzept wurde für eine schmale, einspaltige Mobile-Karte entworfen.
   Bei 2 Spalten in --voma-max-service ist jede Karte ~500–530px
   breit – der zentrierte, auf 30ch begrenzte Textblock lässt links
   und rechts wieder große ungenutzte Weißflächen, dasselbe Problem
   wie zuvor, nur eine Ebene tiefer. Ein zentriertes Avatar-Konzept
   skaliert strukturell nicht auf breite Karten.

   Lösung: horizontales Split-Panel-Layout, Foto als eigene volle
   Spalte statt schwebendem Avatar. Kein neues Muster – spiegelt das
   bereits etablierte Desktop-Verhalten von .voma-hero (Text/Bild
   nebeneinander ab 64rem), konsistent mit dem bestehenden System.
   ============================================================ */

@media (min-width: 64rem) {
  .voma-team__card {
    flex-direction: row;
    align-items: stretch;
    text-align: left;
    padding: 0;
    /* Foto-Panel bekommt seinen Radius über overflow:hidden auf der
       Karte selbst zugeschnitten, statt eigenen Radius zu berechnen. */
    overflow: hidden;
  }

  .voma-team__photo {
    /* Setzt die Floating-Avatar-Werte zurück – wird hier zur vollen
       Panel-Spalte statt schwebendem Element.
       Premium-Feinschliff 04.07.2026: von 42% auf 48% verbreitert.
       Die Quellfotos sind quadratisch (800x800), das Panel aber
       hochformatig (volle Kartenhöhe, schmale Breite) – object-fit:
       cover schneidet dadurch bei jedem Portrait seitlich einen
       erheblichen Teil weg. Bei Felix' Foto sitzen die Schultern im
       Quellbild bereits nah am Rand, wodurch der Beschnitt dort viel
       stärker auffällt als bei Steffis Foto (das von Haus aus mehr
       Rand/Haare als Puffer hat). Ein breiteres Panel braucht weniger
       Beschnitt für beide Karten – der eigentliche Engpass (zu wenig
       Rand im Quellfoto von Felix) bleibt aber nur mit einem neu
       zugeschnittenen Foto vollständig lösbar. */
    width: 48%;
    aspect-ratio: auto;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: linear-gradient(160deg, #eef4ef 0%, #f7f8f9 100%);
    box-shadow: none;
  }

  .voma-team__photo img {
    border-radius: 0;
    object-position: 50% 22%;
  }

  .voma-team__body {
    flex: 1;
    min-width: 0;
    align-items: flex-start;
    text-align: left;
    margin-top: 0;
    gap: var(--voma-space-3);
    padding: 40px 40px;
  }

  .voma-team__name {
    font-size: 26px;
  }

  .voma-team__text {
    max-width: 38ch;
  }
}