/* =========================================================
   NÁŠ TÝM – vodorovná táhnutelná řada DVOJIC karet (jedna dvojice =
   jeden člověk): fotková karta VLEVO + textová karta VPRAVO, těsně
   vedle sebe (VEDLE, ne pod sebou - to byl krátkodobý omyl v jedné
   z předchozích verzí, kdy se dvojice omylem přeskupila do sloupce).

   Fotková karta (.team-photo-card-*) má PŘESNĚ stejnou šířku a styl
   jako karta země na /destinace/ (např. "Uganda") - hodnoty změřené
   přímo na produkci (style.css, .destinations-page .destinations-country-grid
   > * - TOHLE pravidlo, ne obecné .home-country-card z
   destination-cards.css, vyhrává na /destinace/ díky vyšší specificitě):
   4:5 fotka bez zaoblení, gradient, jméno + role přes fotku dole. Textová
   karta má STEJNOU šířku i výšku (stejný aspect-ratio 4:5) a stojí
   HNED VEDLE fotky, ne pod ní - obsahuje POUZE hlavní text, žádný další
   nadpis ani destinace (ta zůstává v datech/administraci, viz
   inc/team.php, jen se na kartě nezobrazuje).

   V jednu chvíli je vidět jen JEDNA CELÁ dvojice (foto+text vedle sebe)
   + náznak další dvojice dalšího člověka na okraji ("peek") - proto má
   .team-row-inner vlastní omezenou šířku (ne celý min(1180px, 100%)
   kontejner), i když začíná na stejném levém okraji jako hero a úvodní
   text. Táhnutí řeší sdílený assets/js/momentum-drag.js přes main.js
   (viz data-slider / data-slider-row níže).
   ========================================================= */

.team-page {
    --team-paper: #f5f2eb;
    --team-card-bg: #f0ede6;
    --team-ink: #141414;
    --team-muted: #6d6962;
    --team-line: #d9d4ca;
    /*
     * Šířka fotkové/textové karty (obě stejné, vedle sebe) - PŘESNÁ
     * kopie pravidla, kterým se na produkci řídí Uganda karta na
     * /destinace/ (style.css:
     *   .destinations-page .destinations-country-grid > *
     *   { flex: 0 0 clamp(280px, 31vw, 430px) !important; }
     * ). Používáme stejný clamp (dolní mez 280px, horní strop 430px,
     * mezitím 31vw) - NE vzorec z /kontinent/.../ (destination-cards.css),
     * který na stejné jméno karty ("Uganda") používá jinou, bez stropu
     * rostoucí formuli - ta dřívější verze tuhle stránku matematicky
     * sladila se špatnou referencí, proto pořád vypadala menší, i když
     * lokální testy proti /kontinent/.../ vycházely na 0px rozdíl.
     */
    --team-card-width: clamp(280px, 31vw, 430px);
    background: var(--team-paper);
    color: var(--team-ink);
}

/*
 * Hero (.cesty-directory-hero) má vlastní spodní padding 9vh - proto
 * tady navrch stačí malé odsazení (stejný řád jako navazující sekce
 * na jiných "directory" stránkách, např. .cesty-directory-filters),
 * jinak text nad kartami působí jako osamocený blok uprostřed stránky.
 */
.team-intro {
    padding: 26px 5vw 4px;
}

/*
 * Stejná šířka/vystředění jako .cesty-directory-hero-inner (hero obsah
 * nad touto sekcí) - aby text začínal na STEJNÉM levém okraji jako
 * nadpis a podtext v banneru. Samotný odstavec má pak vlastní
 * max-width kvůli čitelnosti (viz níže), ale zůstává zarovnaný vlevo
 * uvnitř tohohle kontejneru, ne vycentrovaný sám o sobě.
 */
.team-intro-inner {
    width: min(1180px, 100%);
    margin: 0 auto;
}

.team-intro-inner p {
    max-width: 760px;
    margin: 0 0 1em;
    color: var(--team-muted);
    font-size: clamp(17px, 1.6vw, 20px);
    line-height: 1.6;
}

.team-intro-inner p:last-child {
    margin-bottom: 0;
}

.team-row-section {
    padding: 52px 0 90px;
}

/*
 * Levý okraj sedí na stejném vzorci jako .cesty-directory-hero-inner /
 * .team-intro-inner (max(5vw, (100% - 1180px)/2)) - dvojice karet
 * začíná na STEJNÉM levém okraji jako hero a úvodní text. Šířka okna
 * je ÚMYSLNĚ omezená na jednu dvojici (foto+text VEDLE SEBE, tedy
 * 2 × --team-card-width + mezera mezi nimi) + pevný "peek" pruh (120px)
 * další dvojice - ne na celý min(1180px,100%) kontejner. Protože
 * --team-card-width na širokých monitorech ROSTE (do stropu 430px,
 * stejně jako karta "Uganda" na /destinace/), musí se s ním úměrně
 * roztahovat i tohle okno, jinak by se na širokém monitoru druhá karta
 * dvojice (text) do okna ani celá nevešla a peek dalšího člověka by
 * nebyl vidět.
 */
.team-row-inner {
    width: min(
        calc(2 * var(--team-card-width) + 3px + 120px),
        calc(100% - 2 * max(5vw, calc((100% - 1180px) / 2)))
    );
    margin-left: max(5vw, calc((100% - 1180px) / 2));
    margin-right: auto;
}

.team-empty {
    margin: 0;
    padding: 0 5vw;
    color: var(--team-muted);
    font-size: 16px;
}

.team-row {
    display: flex;
    align-items: flex-start;
    /* Mezera MEZI dvojicemi různých lidí - uvnitř dvojice je mezera skoro nulová, viz .team-pair. */
    gap: 28px;
    width: 100%;
    padding: 0 0 8px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    cursor: grab;
}

.team-row::-webkit-scrollbar {
    display: none;
}

.team-pair {
    display: flex;
    flex: 0 0 auto;
    /* "Těsně vedle sebe" - dvojice foto/text drží skoro u sebe, jako jeden celek. */
    gap: 3px;
    scroll-snap-align: start;
}

/*
 * Šířka obou karet dvojice (foto i text mají STEJNOU šířku, vedle sebe)
 * - viz --team-card-width výše (.team-page), stejná hodnota jako karta
 * "Uganda" na /destinace/: 280px je SPODNÍ hranice (karta se pod ní
 * nikdy nezmenší), nad ~2038px šířky viewportu (kde vzorec překročí
 * 280px) ale karta ROSTE stejně jako Uganda až do stropu 430px.
 */
.team-photo-card,
.team-text-card {
    flex: 0 0 var(--team-card-width);
}

/*
 * Obě karty dvojice mají stejný poměr stran 4:5 - stejná hodnota jako
 * .home-country-card-image na produkci (destination-cards.css) - aby
 * byly doslova stejně vysoké, ne jen podobně velké, i když stojí vedle
 * sebe.
 */
.team-photo-card-image,
.team-text-card-inner {
    aspect-ratio: 4 / 5;
    box-sizing: border-box;
}

.team-photo-card-image {
    position: relative;
    overflow: hidden;
    border-radius: 0;
    background: #191919;
}

.team-photo-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-photo-card-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(155deg, #ded4bd 0%, #cdbfa0 100%);
    color: #6d5b3c;
    font-family: var(--msn-display-serif, Georgia, serif);
    font-size: clamp(34px, 4vw, 48px);
    font-weight: 500;
}

.team-photo-card-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.10) 55%, transparent 75%);
}

/* left/right/bottom insety a typografie - přesné hodnoty ze změřené produkční .home-country-card-content / h3 / .continent-card-countries. */
.team-photo-card-content {
    position: absolute;
    z-index: 2;
    left: 25px;
    right: 25px;
    bottom: 24px;
    color: #fff;
}

.team-photo-card-content h3 {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    font-size: clamp(25px, 2.3vw, 36px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.025em;
}

.team-photo-card-role {
    max-width: 100%;
    margin: 10px 0 0;
    color: rgba(255,255,255,.74);
    font-size: clamp(13px, .95vw, 16px);
    font-weight: 400;
    line-height: 1.42;
}

/*
 * Textová karta obsahuje POUZE hlavní text - žádný nadpis, žádná
 * destinace. Border zůstává (ohraničená karta vedle fotky bez rámečku).
 */
.team-text-card-inner {
    display: flex;
    flex-direction: column;
    /* Ne "center" - text musí začínat nahoře, jinak nesedí na jméno/roli, které jsou v sousední fotokartě přišpendlené dole. */
    justify-content: flex-start;
    padding: 26px 25px;
    border: 1px solid var(--team-line);
    background: var(--team-card-bg);
}

.team-text-card-text {
    /* Výchozí stav: text oříznutý na pár řádků, delší text doplní JS tlačítkem "Číst dál". */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 9;
    overflow: hidden;
}

.team-text-card-text.is-expanded {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}

.team-text-card-text p {
    margin: 0 0 1em;
    color: var(--team-ink);
    font-size: 14px;
    line-height: 1.55;
}

.team-text-card-text p:last-child {
    margin-bottom: 0;
}

.team-text-card-toggle {
    display: block;
    /* Prohlížeče centrují text uvnitř <button> ve výchozím stylu - .team-text-card-inner je flex sloupec s výchozím align-items:stretch, takže tlačítko dostane plnou šířku karty a bez týhle řádky by pak jeho text vypadal na střed místo zarovnaný vlevo jako zbytek bio textu nad ním. */
    text-align: left;
    margin: 16px 0 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--team-ink);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* "display: block" výše má vyšší specificitu než výchozí [hidden]{display:none} prohlížeče - musí se přebít zvlášť. */
.team-text-card-toggle[hidden] {
    display: none;
}

.team-text-card-toggle:hover,
.team-text-card-toggle:focus-visible {
    color: var(--team-muted);
}

@media (max-width: 760px) {
    .team-intro {
        padding: 24px 20px 4px;
    }

    .team-intro-inner {
        width: 100%;
        max-width: none;
    }

    .team-row-section {
        padding: 38px 0 60px;
    }

    /*
     * Na mobilu je "okno" na 1 dvojici + peek prostě celá šířka
     * obrazovky (mínus okraj) - dvojice samotná je zmenšená tak, aby se
     * do ní i s kouskem další dvojice vešla.
     */
    .team-row-inner {
        width: 100%;
        margin-left: 0;
    }

    .team-row {
        gap: 14px;
        padding: 0 20px 8px;
        scroll-padding-left: 20px;
        scroll-padding-right: 20px;
    }

    /*
     * Foto+text vedle sebe (jako na desktopu) by na 375-430px šířky
     * obrazovky obě karty zúžilo na nečitelnou miniaturu - proto se
     * dvojice na mobilu přeskupí do SLOUPCE (foto NAHOŘE velké a
     * dominantní, text POD ním), stejný princip, jaký byl (chybně)
     * použitý pro DESKTOP v commitu 3bcfeea - tady na mobilu je
     * sloupec správně, protože je to jediný způsob, jak fotka může
     * zůstat velká a text čitelný. Pevná mezera do okraje okna (60px)
     * nechá vždycky vykouknout kousek další dvojice vpravo - stejný
     * princip "peek" pruhu jako na desktopu (tam 120px z 2 karet vedle
     * sebe), jen přepočítaný na jednu, plnou šířku sloupcové dvojice.
     */
    .team-pair {
        flex-direction: column;
        flex: 0 0 calc(100% - 60px);
        gap: 10px;
    }

    .team-photo-card,
    .team-text-card {
        flex: 0 0 auto;
        width: 100%;
    }

    /* Textová karta je tu POD fotkou, ne vedle ní - nemá tedy vynucený aspect-ratio 4:5 (ten platí jen pro layout vedle sebe na desktopu), výška se řídí obsahem. */
    .team-text-card-inner {
        aspect-ratio: auto;
        padding: 18px 16px;
    }

    .team-photo-card-content {
        left: 15px;
        right: 15px;
        bottom: 14px;
    }

    .team-photo-card-content h3 {
        font-size: 20px;
    }

    .team-text-card-text {
        -webkit-line-clamp: 7;
    }
}