/* ═══════════════════════════════════════════════════════════════
   ZDJĘCIA EKSPERTÓW — obróbka kolorystyczna
   ═══════════════════════════════════════════════════════════════
   Wspólne dla kart na stronie głównej i nagłówków na profilach,
   żeby dostrajać kolory w jednym miejscu.

   Surowe zdjęcia są ciepłe i naturalne, a serwis chłodny
   i fioletowy. Zamiast zabierać fotografii własny kolor,
   nakładamy kilka warstw, które przesuwają ją w stronę palety:

     1. img       – lekki filtr kontrastu, kolor niemal nietknięty
     2. tint      – fiolet w trybie „soft-light”
     3. warm      – złote światło od góry, trzyma żywy odcień skóry
     4. scrim     – wtopienie dołu w tło karty
     5. vignette  – przyciemnione rogi, wzrok idzie na twarz

   Tryb „soft-light” jest tu kluczowy — tylko przesuwa barwę,
   zamiast ją podmieniać. (Wcześniejszy tryb „color” zabierał
   zdjęciu cały własny kolor i twarze wychodziły szaro-sine.)

   Chcesz mocniejszy albo słabszy fiolet? Zmień opacity
   w regule .expert-photo-tint.

   Wszystkie warstwy siedzą w .expert-photo-layer, żeby przy
   brakującym pliku usunąć je jednym ruchem i odsłonić ikonę.
   ═══════════════════════════════════════════════════════════════ */

.expert-photo-layer {
  position: absolute;
  inset: 0;
  z-index: 15;
  pointer-events: none;
}

.expert-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  filter: saturate(0.96) contrast(1.04);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.expert-photo-tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, #9060ff 0%, #6d28d9 55%, #4c1d95 100%);
  mix-blend-mode: soft-light;
  opacity: 0.85;
}

.expert-photo-warm {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 85% 65% at 50% 18%,
    rgba(251,191,36,0.5) 0%, rgba(253,230,138,0.18) 40%, transparent 75%);
  mix-blend-mode: soft-light;
}

.expert-photo-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(46,16,101,0.2) 0%,
    transparent 30%,
    rgba(13,6,32,0.3) 76%,
    rgba(13,6,32,0.88) 100%);
}

.expert-photo-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 85% 80% at 50% 40%,
    transparent 58%, rgba(13,6,32,0.34) 100%);
}

/* Delikatne przybliżenie przy najechaniu na kartę */
.expert-card:hover .expert-photo { transform: scale(1.05); }

/* ── Nagłówek na stronie profilu ──────────────────────────────
   Zdjęcie wypełnia całą szerokość karty zamiast wisieć
   w oderwanym kółku. Dół jest mocniej wygaszony, bo leży
   pod nim imię eksperta — musi być czytelne. */
.profile-hero {
  position: relative;
  overflow: hidden;
  height: 22rem;
  background: linear-gradient(135deg, #2e1065 0%, #4c1d95 50%, #2e1065 100%);
}
@media (min-width: 1024px) {
  .profile-hero { height: 24rem; }
}

/* Kadr trzymamy nieco wyżej — na profilu widać większy fragment
   sylwetki, więc twarz musi zostać w górnej części kadru. */
.profile-hero .expert-photo { object-position: center 16%; }

/* Winieta lżejsza niż na karcie: kadr jest tu wyższy i węższy,
   więc pełne przyciemnienie rogów zjadałoby kontur sylwetki. */
.profile-hero .expert-photo-vignette {
  background: radial-gradient(ellipse 95% 88% at 50% 42%,
    transparent 64%, rgba(13,6,32,0.28) 100%);
}

/* Mocniejsze wygaszenie dołu — pod spodem leży podpis */
.profile-hero .expert-photo-scrim {
  background: linear-gradient(180deg,
    rgba(46,16,101,0.18) 0%,
    transparent 26%,
    rgba(13,6,32,0.55) 62%,
    rgba(13,6,32,0.96) 100%);
}

/* Podpis na zdjęciu */
.profile-hero-caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 30;
  padding: 1.5rem 1.75rem 1.75rem;
}

/* Ikona zastępcza — widoczna tylko, gdy brakuje pliku zdjęcia */
.profile-hero-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
.profile-hero-fallback > div {
  width: 8rem;
  height: 8rem;
  opacity: 0.85;
}