/* ==========================================================================
   SEKCJA: perspektywa założyciela
   --------------------------------------------------------------------------
   Z makiety 137:869: 1440×785, padding 96 / 80, dwie kolumny, odstęp 72.
     zdjęcie   460 × 593, promień 24, wygaszenie u dołu
     karta     404 × 76, na y = 480 zdjęcia (nachodzi na nie o 113 px)
     tekst     748: etykieta → H2 32/38 → akapit wyróżniony → 3 akapity
   ========================================================================== */

.fc-founder {
  padding-block: var(--fc-sp-96);
}

.fc-founder__grid {
  display: grid;
  grid-template-columns: 460px minmax(0, 1fr);
  gap: var(--fc-sp-72);
  align-items: start;
}

/* ---------------------------------------------------------------------------
   ZDJĘCIE + KARTA Z NAZWISKIEM
   --------------------------------------------------------------------------- */
.fc-founder__media {
  position: relative;
  height: 593px;
  border-radius: var(--fc-radius-2xl);
  overflow: hidden;
}

.fc-founder__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/*
 * Wygaszenie u dołu zdjęcia. W makiecie realizuje je maska na zdjęciu;
 * w CSS ten sam efekt daje warstwa gradientu do koloru tła — i jest tańsza
 * niż `mask-image`, bo nie wymusza osobnej warstwy kompozycji.
 */
.fc-founder__fade {
  position: absolute;
  inset: auto 0 0;
  height: 40%;
  background: linear-gradient(180deg, rgba(13, 16, 21, 0) 0%, var(--fc-color-bg) 100%);
  pointer-events: none;
}

/* W makiecie karta stoi na y = 480.5 przy zdjęciu wysokim na 593 i sama ma
   76 px, więc od dołu dzieli ją 36.5 px — nie 40. */
.fc-founder__card {
  position: absolute;
  left: var(--fc-sp-28);
  bottom: var(--fc-sp-36);
  width: 404px;
  max-width: calc(100% - 2 * var(--fc-sp-28));
  display: flex;
  flex-direction: column;
  gap: var(--fc-sp-2);
  padding: var(--fc-sp-18) var(--fc-sp-22);
  border: var(--fc-border-width) solid var(--fc-color-hairline-name);
  border-radius: var(--fc-radius-lg);
  /* Czerń 84 % — karta stoi na zdjęciu, a nie na tle strony; szkło z bieli
     byłoby na jasnej koszuli nieczytelne. */
  background: rgba(0, 0, 0, .84);
}

.fc-founder__name {
  margin: 0;
  font-family: var(--fc-font-heading);
  font-weight: var(--fc-fw-extrabold);
  font-size: var(--fc-fs-card-title);
  line-height: var(--fc-lh-auto);
  color: var(--fc-color-text);
}

.fc-founder__role {
  margin: 0;
  font-weight: var(--fc-fw-medium);
  font-size: var(--fc-fs-caption);
  line-height: var(--fc-lh-caption);
  letter-spacing: var(--fc-ls-caption);
  color: var(--fc-color-text-muted);
}

/* ---------------------------------------------------------------------------
   KOLUMNA TEKSTU — jeden odstęp 18 px na wszystko
   --------------------------------------------------------------------------- */
.fc-founder__body {
  display: flex;
  flex-direction: column;
  gap: var(--fc-sp-18);
  min-width: 0;
}


.fc-founder__title {
  margin: 0;
  font-weight: var(--fc-fw-black);
  font-size: var(--fc-fs-h3-md);
  line-height: var(--fc-lh-h3-md);
  letter-spacing: var(--fc-ls-h3);
}

/* Akapit wyróżniony: Inter Bold i BIEL — w makiecie to jedyne zdanie
   w tej kolumnie, które nie jest wyszarzone. */
.fc-founder__intro {
  margin: 0;
  font-weight: var(--fc-fw-bold);
  font-size: var(--fc-fs-lead);
  line-height: var(--fc-lh-lead);
  color: var(--fc-color-text);
}

.fc-founder__text {
  margin: 0;
  font-size: var(--fc-fs-lead);
  line-height: var(--fc-lh-lead);
  color: var(--fc-color-text-muted);
}

/* ==========================================================================
   RESPONSYWNOŚĆ — INTERPRETACJA, BRAK W DESIGNIE
   ========================================================================== */

@media (max-width: 1199.98px) {
  /* Kolumna 460 px zostawia tekstowi mniej niż 500 px, przy akapitach
     mających w makiecie 748 — zdjęcie idzie wtedy nad tekst. */
  .fc-founder__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--fc-sp-40);
  }

  .fc-founder__media {
    max-width: 460px;
  }
}

@media (max-width: 899.98px) {
  .fc-founder {
    padding-block: var(--fc-sp-64);
  }

  .fc-founder__media {
    height: 460px;
  }

  .fc-founder__card {
    width: auto;
    right: var(--fc-sp-28);
  }
}