/* ==========================================================================
   SEKCJA: partnerzy w modelu franczyzowym („O nas")
   --------------------------------------------------------------------------
   Z makiety 137:884: 1440×695, tło biel 2 %, padding 96 / 80, dwie kolumny
   765 + 410 z odstępem 72.
     lewa   nagłówek (gap 14) → 50 → akapity 18/28
     prawa  pasek zakładek → 39 → zdjęcie 410×421 + karta 313×80

   Pasek zakładek i przełączanie zdjęć obsługuje initTabs() w main.js —
   po atrybutach `data-fc-tab-media` / `data-fc-tab-name`, nie po klasach.
   ========================================================================== */

.fc-partners-model {
  padding-block: var(--fc-sp-96);
  background: var(--fc-glass-2);
}

.fc-partners-model__grid {
  display: grid;
  grid-template-columns: minmax(0, 765px) 410px;
  gap: var(--fc-sp-72);
  align-items: start;
}

/* ---------------------------------------------------------------------------
   KOLUMNA TEKSTU
   --------------------------------------------------------------------------- */
.fc-partners-model__body {
  display: flex;
  flex-direction: column;
  gap: var(--fc-sp-48);
  min-width: 0;
}

.fc-partners-model__head {
  display: flex;
  flex-direction: column;
  gap: var(--fc-sp-14);
  /* Nagłówek ma w makiecie 460 px, akapity poniżej 765 — łamanie tytułu
     jest częścią projektu, nie efektem szerokości kolumny. */
  max-width: 460px;
}


.fc-partners-model__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);
}

.fc-partners-model__subtitle {
  margin: 0;
  font-family: var(--fc-font-heading);
  font-weight: var(--fc-fw-semibold);
  font-size: var(--fc-fs-btn-lg);
  line-height: var(--fc-lh-auto);
  color: var(--fc-color-text);
  opacity: .8;
}

.fc-partners-model__text {
  display: flex;
  flex-direction: column;
  /* W makiecie akapity rozdziela pusty wiersz o wysokości 28 px —
     czyli jeden wiersz tekstu, a nie dowolnie dobrany margines. */
  gap: var(--fc-sp-28);
}

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

/* ---------------------------------------------------------------------------
   KOLUMNA ZE ZDJĘCIEM
   --------------------------------------------------------------------------- */
/* Odstęp zakładki → zdjęcie ma w makiecie 39 px (pasek kończy się na 43,
   maska zaczyna na 82). To jeden piksel od skali, więc zamiast dokładać
   token na wartość z zaokrąglenia — korekta przy najbliższej. */
.fc-partners-model__aside {
  display: flex;
  flex-direction: column;
  gap: calc(var(--fc-sp-40) - 1px);
}

/*
 * ⚠️ `align-self` JEST TU KONIECZNE.
 *
 * `.fc-tabs` jest `inline-flex`, więc sam z siebie ma szerokość zakładek —
 * 233 px w makiecie. Ale jako dziecko kolumny flex dostaje domyślne
 * `align-items: stretch`, które w osi poprzecznej (tu: poziomej) rozciąga
 * go na całe 410 px kolumny. Pasek robił się wtedy szeroki na całe zdjęcie,
 * z zakładkami wciśniętymi w lewy róg.
 *
 * Na stronie głównej problem nie występuje, bo tam ten sam pasek jest
 * pozycjonowany bezwzględnie i w ogóle nie uczestniczy w układzie kolumny.
 */
.fc-partners-model__tabs {
  align-self: flex-start;
}

/*
 * Zdjęcia leżą na sobie absolutnie i przenikają przy zmianie zakładki,
 * więc scena musi mieć jawną wysokość — stos absolutnych dzieci jej
 * nie niesie. Ta sama konstrukcja co w sekcji 07 na stronie głównej.
 */
.fc-partners-model__stage {
  position: relative;
  height: 421px;
}

.fc-partners-model__media {
  position: absolute;
  inset: 0;
  z-index: var(--fc-z-base);
  overflow: hidden;
  border-radius: var(--fc-radius-2xl);
  background: var(--fc-color-media-bg);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--fc-transition-slow);
}

.fc-partners-model__media.is-active {
  opacity: 1;
  visibility: visible;
}

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

/* Wygaszenie dołu zdjęcia — karta z nazwiskiem ma na czym stanąć. */
.fc-partners-model__fade {
  position: absolute;
  inset: auto 0 0;
  height: 45%;
  background: linear-gradient(180deg, rgba(13, 16, 21, 0) 0%, rgba(13, 16, 21, .85) 100%);
  pointer-events: none;
}

/*
 * Karta z nazwiskiem leży W CAŁOŚCI NA ZDJĘCIU, 32 px nad jego dolną krawędzią.
 *
 * Poprzednia wersja miała `bottom: -49px`, czyli karta wychodziła poza kadr.
 * Wzięło się to z odczytania y karty (486.5) względem grupy 137:892, która
 * zaczyna się na y = 96, zamiast względem maski zdjęcia 137:899, która zaczyna
 * się na y = 178. Poprawnie: karta 486.5…566.5 przy zdjęciu 178…599, czyli
 * 32.5 px zapasu pod kartą. Zaokrąglamy do tokenu 32.
 *
 * Ten sam układ mają dwie pozostałe karty z nazwiskiem w serwisie i tam był
 * policzony dobrze: `testimonial.css` (20.54 px) i `founder.css` (36 px).
 */
.fc-partners-model__card {
  position: absolute;
  left: var(--fc-sp-48);
  bottom: var(--fc-sp-32);
  z-index: var(--fc-z-raised);
  width: 313px;
  max-width: calc(100% - var(--fc-sp-48));
  display: flex;
  flex-direction: column;
  gap: var(--fc-sp-2);
  padding: var(--fc-sp-18) var(--fc-sp-20);
  border: var(--fc-border-width) solid var(--fc-color-hairline-name);
  border-radius: var(--fc-radius-lg);
  background: var(--fc-glass-8);
  backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--fc-transition-slow);
}

.fc-partners-model__card.is-active {
  opacity: 1;
  visibility: visible;
}

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

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

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

@media (max-width: 1199.98px) {
  /* Kolumna zdjęcia ma stałe 410 px; poniżej ~1100 px tekstowi zostaje
     mniej niż 500 z 765 z makiety. Zdjęcie idzie wtedy pod tekst. */
  .fc-partners-model__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--fc-sp-56);
  }

  /* Karta z nazwiskiem mieści się w kadrze zdjęcia, więc kolumna nie
     potrzebuje już zapasu pod spodem — zostaje samo ograniczenie szerokości. */
  .fc-partners-model__aside {
    max-width: 410px;
  }
}

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

  .fc-partners-model__stage {
    height: 360px;
  }

  .fc-partners-model__card {
    left: var(--fc-sp-20);
    max-width: calc(100% - 2 * var(--fc-sp-20));
  }
}