/* =============================================================================
   Teamseite (/ueber-rhein-physio/team) – Karten mit Porträt, Bezeichnung und Kurztext.
   Die Personen kommen aus Orbit (lib/team.php). Baut auf main.css und pages.css auf.
   ============================================================================= */

.team { padding-block: var(--space-section); background: var(--foam); border-radius: var(--r-xl) var(--r-xl) 0 0; }

/* Raster: eine, zwei, drei Spalten. Die letzte Karte (.member-fill) füllt die Reihe auf. */
.team__grid { display: grid; gap: clamp(1rem, 1.6vw, 1.75rem); }
@media (min-width: 36em) { .team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60em) { .team__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Person ---------- */
.member { display: grid; grid-template-rows: auto 1fr; border-radius: var(--r-l); background: var(--white); overflow: hidden; scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.member__photo { position: relative; aspect-ratio: 4 / 5; background: var(--mist); overflow: hidden; }
.member__photo picture, .member__photo img { display: block; width: 100%; height: 100%; }
.member__photo img { object-fit: cover; transition: scale 1.2s var(--ease); }
@media (hover: hover) { .member:hover .member__photo img { scale: 1.035; } }
/* Ohne Porträt: Initialen in der Schrift der Überschriften */
.member__initials {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(4rem, 12vw, 7rem); letter-spacing: -.02em;
  color: var(--blue-800); background: linear-gradient(160deg, var(--mist), var(--foam));
}
/* Einspaltig braucht die Fläche ohne Porträt nicht die volle Höhe eines Fotos. */
@media (max-width: 35.99em) { .member__photo--leer { aspect-ratio: 5 / 3; } }
.member__body { display: grid; align-content: start; gap: .5rem; padding: clamp(1.25rem, 2vw, 1.9rem); }
.member__name { font-size: var(--fs-h3); font-weight: 400; letter-spacing: -.025em; line-height: 1.15; color: var(--ink); text-wrap: balance; }
.member__role { margin-bottom: .35rem; font-size: var(--fs-label); font-weight: 500; letter-spacing: .2em; text-transform: uppercase; line-height: 1.5; color: var(--blue-800); }
.member__text { font-size: var(--fs-small); line-height: 1.6; color: var(--text); }
.member__more { justify-self: start; margin-top: .5rem; font-size: var(--fs-small); }

/* ---------- Abschlusskarte: füllt die letzte Reihe ---------- */
.member-fill { display: grid; min-height: 16rem; border-radius: var(--r-l); background: var(--ink); overflow: hidden; }
.member-fill__link { display: grid; align-content: end; gap: .9rem; padding: clamp(1.5rem, 2.6vw, 2.5rem); color: var(--white); transition: background .5s var(--ease); }
.member-fill .eyebrow { color: var(--blue); }
.member-fill .eyebrow::before { background: var(--blue); }
.member-fill .display { color: var(--white); }
.member-fill .display em { color: var(--blue); }
.member-fill__text { max-width: 30em; font-size: var(--fs-small); line-height: 1.6; color: rgba(255, 255, 255, .78); }
.member-fill .link-arrow { justify-self: start; font-size: var(--fs-small); }
@media (hover: hover) {
  .member-fill__link:hover { background: var(--ink-2); }
  .member-fill__link:hover .link-arrow { background-size: 0 1px; background-position: 100% 100%; }
  .member-fill__link:hover .link-arrow svg { transform: translateX(.3em); }
}
/* Zwei Spalten: Bei gerader Personenzahl nimmt die Karte eine ganze Reihe, sonst den freien Platz. */
@media (min-width: 36em) and (max-width: 59.99em) {
  .member-fill[data-rest2="0"] { grid-column: 1 / -1; min-height: 0; }
}
/* Drei Spalten: Rest 1 → zwei Plätze frei, Rest 2 → ein Platz frei, Rest 0 → ganze Reihe. */
@media (min-width: 60em) {
  .member-fill[data-rest3="1"] { grid-column: span 2; }
  .member-fill[data-rest3="0"] { grid-column: 1 / -1; min-height: 0; }
}
/* Als ganze Reihe: Text links, Verweis rechts */
@media (min-width: 60em) {
  .member-fill[data-rest3="0"] .member-fill__link { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 3rem; }
  .member-fill[data-rest3="0"] .member-fill__link > :not(.link-arrow) { grid-column: 1; }
  .member-fill[data-rest3="0"] .link-arrow { grid-column: 2; grid-row: 1 / span 3; align-self: end; }
}