/* =========================================================================
   Sekcja "Nasz zespół" (#zespol)

   Wygląd kart jest budowany klasami Tailwinda — dokładnie tymi samymi,
   których używają pozostałe sekcje serwisu. Tutaj są WYŁĄCZNIE trzy rzeczy,
   których nie ma w gotowym, przepalonym buildzie assets/css/output.css:

     1. trzecia kolumna od breakpointu lg  (brak klasy lg:grid-cols-3)
     2. przycinanie zdjęć do kadru         (brak klasy object-cover)
     3. skracanie długich opisów           (brak klas line-clamp-*)

   Kolory podane wprost, bo to zwykły arkusz bez konfiguracji Tailwinda:
     secondary #1E40AF · primary #00AEEF
   ========================================================================= */

/* 1. Trzecia kolumna dopiero od 1024px — przy md karty z p-8 byłyby za wąskie. */
@media (min-width: 1024px) {
    .team-grid--lg3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* 2. Zabezpieczenie kadru: gdyby kiedyś trafiło niekwadratowe zdjęcie,
      przytnie się zamiast rozciągnąć. */
.team-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Karta jako kolumna — dzięki temu "Rozwiń" trzyma się dołu i przyciski
   w jednym wierszu są na tej samej wysokości. */
.team-card {
    display: flex;
    flex-direction: column;
}

/* 3. Skracanie opisu do 6 linii.
      Włącza je dopiero skrypt (klasa .team-grid--clamped) — bez JS opisy
      pokazują się w całości i nic nie znika. */
.team-grid--clamped .team-bio {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    overflow: hidden;
}

/* Po rozwinięciu wracamy do display:block — -webkit-box bez limitu linii
   potrafi psuć odstępy. */
.team-grid--clamped .team-card.is-open .team-bio {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
}

/* --- przycisk "Rozwiń" --------------------------------------------------
   Granat, a nie primary: #00AEEF na bieli daje kontrast 2,6:1, czyli poniżej
   progu WCAG AA, a to element klikalny. */

.team-more {
    display: none;
    align-self: center;
    margin-top: auto;
    padding: 1rem 0 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: .875rem;
    font-weight: 600;
    color: #1e40af;
    cursor: pointer;
}

/* Widoczny tylko tam, gdzie opis faktycznie się nie mieści. */
.team-card.has-overflow .team-more {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.team-more::after {
    content: "";
    width: .4rem;
    height: .4rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .2s ease;
}

.team-card.is-open .team-more::after {
    transform: translateY(1px) rotate(-135deg);
}

.team-more:hover {
    color: #00aeef;
}

.team-more:focus-visible {
    outline: 2px solid #1e40af;
    outline-offset: 3px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .team-more::after {
        transition: none;
    }
}