/* ==========================================================
   PROJEKTY — LICZBA KAFELKOW W WIERSZU

   Zasada identyczna jak w module oferty:
   - szeroki obszar modulu: 4 kafelki,
   - waski obszar modulu:   3 kafelki,
   - tablet:                 2 kafelki,
   - telefon:                1 kafelek.

   Container query reaguje na rzeczywista szerokosc modulu, a nie
   calego okna. Dzieki temu uklad dziala tak samo w trybie strony
   szerokiej i waskiej oraz nie rozciaga pojedynczego kafelka.
========================================================== */

.siatka-tresci-obudowa--projekty {
    container-name: projekty;
    container-type: inline-size;
}

.siatka-tresci.siatka-tresci--projekty {
    --projekty-liczba-kolumn: 3;
    --projekty-odstep: 1rem;

    display: flex;
    flex-wrap: wrap;
    gap: var(--projekty-odstep);
    align-items: stretch;
}

.siatka-tresci.siatka-tresci--projekty > .kafelek-tresci--projekt {
    box-sizing: border-box;
    min-width: 0;
    max-width: calc(
        (100% - (var(--projekty-liczba-kolumn) - 1) * var(--projekty-odstep))
        / var(--projekty-liczba-kolumn)
    );
    flex: 0 0 calc(
        (100% - (var(--projekty-liczba-kolumn) - 1) * var(--projekty-odstep))
        / var(--projekty-liczba-kolumn)
    );
}

.siatka-tresci.siatka-tresci--projekty-slider {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-behavior: smooth;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
}

.siatka-tresci.siatka-tresci--projekty-slider::-webkit-scrollbar {
    display: none;
}

.siatka-tresci.siatka-tresci--projekty-slider > .kafelek-tresci--projekt {
    scroll-snap-align: start;
}

.projekty-slider__sterowanie {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    margin-block-start: 1rem;
}

.projekty-slider__przycisk {
    display: inline-grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    padding: 0;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: var(--projekty-sterowanie-tlo, transparent);
    color: var(--projekty-sterowanie-tekst, currentColor);
    font: inherit;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}

.projekty-slider__przycisk:hover:not(:disabled) {
    background: var(--projekty-sterowanie-hover-tlo, currentColor);
    color: var(--projekty-sterowanie-hover-tekst, Canvas);
}

.projekty-slider__przycisk:focus-visible {
    outline: 3px solid var(--projekty-fokus, currentColor);
    outline-offset: 3px;
}

.projekty-slider__przycisk:disabled {
    opacity: 0.38;
    cursor: default;
}

.projekty-slider__stan {
    min-inline-size: 4.5rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    .siatka-tresci.siatka-tresci--projekty-slider {
        scroll-behavior: auto;
    }
}

@container projekty (min-width: 72rem) {
    .siatka-tresci.siatka-tresci--projekty {
        --projekty-liczba-kolumn: 4;
    }
}

@container projekty (max-width: 47.999rem) {
    .siatka-tresci.siatka-tresci--projekty {
        --projekty-liczba-kolumn: 2;
    }
}

@container projekty (max-width: 31.999rem) {
    .siatka-tresci.siatka-tresci--projekty {
        --projekty-liczba-kolumn: 1;
    }
}

/* ==========================================================
   PROJEKTY — WARSTWA ROZSZERZAJACA WSPOLNY KAFELEK TRESCI

   Geometria kafelka, obraz, fokus, hover i podstawowe metadane
   pochodza z components/kafelek-tresci.css w szablonie.
   Ten plik zawiera tylko semantyke projektu i bezpieczne fallbacki.
========================================================== */

.modul-tresci--projekty {
    --kafelek-projekt-status-tlo: var(--kafelek-status-tlo);
    --kafelek-projekt-status-tekst: var(--kafelek-status-tekst);
    --kafelek-projekt-oznaczenie-tlo: var(--kafelek-status-tlo);
    --kafelek-projekt-oznaczenie-tekst: var(--kafelek-status-tekst);
    --projekty-tytul-wysokosc: 3rem;
    --projekty-tytul-czcionka-min: 0.8125rem;
    --projekty-belka-grubosc: 0.25rem;
    --projekty-belka-kolor: var(
        --kafelek-tresci-belka-kolor,
        var(--kolor-akcentowy, currentColor)
    );
}

.kafelek-tresci--projekt .kafelek-tresci__tresc {
    border-block-start: var(--projekty-belka-grubosc) solid var(--projekty-belka-kolor);
}

.kafelek-tresci--projekt-bez-tytulu .kafelek-tresci__tresc {
    min-block-size: 0;
    block-size: 0;
    padding: 0;
    border-block-start: 0;
}

.kafelek-tresci--projekt-bez-tytulu .kafelek-tresci__tytul {
    block-size: 0;
    min-block-size: 0;
    max-block-size: 0;
    margin: 0;
    overflow: visible;
}

.kafelek-tresci--projekt-bez-tytulu {
    position: relative;
}

.kafelek-tresci--projekt-bez-tytulu a.kafelek-tresci__link-glowny::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.kafelek-tresci--projekt-bez-tytulu :is(
    .kafelek-tresci__meta,
    .kafelek-tresci__statusy-nakladka
) {
    position: absolute;
    z-index: 2;
}

/* Elementy reczne, np. logotypy partnerow: pelny obraz bez kadrowania. */
.modul-tresci--projekty-reczne:not(.modul-tresci--projekty-filmy) .kafelek-tresci__media {
    aspect-ratio: 3 / 2;
    min-block-size: 0;
    background: var(--projekty-logo-tlo, #fff);
}

.modul-tresci--projekty-reczne:not(.modul-tresci--projekty-filmy) .kafelek-tresci__obraz {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    padding: clamp(0.75rem, 5%, 1.5rem);
    box-sizing: border-box;
    object-fit: contain;
    object-position: center;
}

.modul-tresci--projekty-filmy .kafelek-tresci__media {
    position: relative;
    aspect-ratio: 16 / 9;
    min-block-size: 0;
    background: #000;
}

.modul-tresci--projekty-filmy .kafelek-tresci__obraz {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    padding: 0;
    object-fit: cover;
    object-position: center;
}

.modul-tresci--projekty-galerie .kafelek-tresci__media {
    aspect-ratio: 4 / 3;
    min-block-size: 0;
}

.modul-tresci--projekty-galerie .kafelek-tresci__obraz {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    padding: 0;
    object-fit: cover;
    object-position: center;
}

.projekty-galerie__filtry {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-end: 1.25rem;
}

.projekty-galerie__filtr {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-block-size: 2.5rem;
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--projekty-filtr-obramowanie, currentColor);
    border-radius: 999px;
    background: var(--projekty-filtr-tlo, transparent);
    color: var(--projekty-filtr-tekst, inherit);
    text-decoration: none;
    font-weight: 650;
}

.projekty-galerie__filtr span {
    font-size: 0.875em;
    opacity: 0.75;
}

.projekty-galerie__filtr:is(:hover, .is-active) {
    background: var(--projekty-filtr-aktywny-tlo, currentColor);
    color: var(--projekty-filtr-aktywny-tekst, Canvas);
}

.projekty-galerie__filtr:focus-visible {
    outline: 3px solid var(--projekty-fokus, currentColor);
    outline-offset: 3px;
}

@media (max-width: 31.999rem) {
    .projekty-galerie__filtry {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-block-end: 0.35rem;
        scrollbar-width: thin;
    }

    .projekty-galerie__filtr {
        flex: 0 0 auto;
    }
}

.projekty-film__odtworz {
    position: absolute;
    inset: 50% auto auto 50%;
    z-index: 2;
    inline-size: clamp(2.75rem, 18%, 4rem);
    aspect-ratio: 1;
    color: var(--projekty-film-przycisk, #c00);
    transform: translate(-50%, -50%);
    pointer-events: none;
    filter: drop-shadow(0 0.2rem 0.35rem rgb(0 0 0 / 0.35));
}

button.projekty-film__odtworz {
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

button.projekty-film__odtworz:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 4px;
    border-radius: 50%;
}

.projekty-film__iframe {
    position: absolute;
    inset: 0;
    z-index: 4;
    inline-size: 100%;
    block-size: 100%;
    border: 0;
    background: #000;
}

.modul-tresci--projekty-filmy .projekty-film__iframe {
    pointer-events: auto;
}

.modul-tresci--projekty-filmy:has(.projekty-film__iframe)
.kafelek-tresci--projekt-bez-tytulu {
    overflow: hidden;
}

.projekty-film__odtworz svg {
    display: block;
    inline-size: 100%;
    block-size: 100%;
}

.kafelek-tresci--projekt:hover .projekty-film__odtworz,
.kafelek-tresci--projekt:focus-within .projekty-film__odtworz {
    transform: translate(-50%, -50%) scale(1.08);
}

@media (prefers-reduced-motion: no-preference) {
    .projekty-film__odtworz {
        transition: transform 160ms ease-out;
    }
}

.kafelek-tresci--projekt .kafelek-tresci__tytul {
    display: -webkit-box;
    block-size: var(--projekty-tytul-wysokosc);
    min-block-size: var(--projekty-tytul-wysokosc);
    max-block-size: var(--projekty-tytul-wysokosc);
    overflow: hidden;
    line-height: 1.5rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* Galeria dziedziczy wspólny wygląd kafelków; różni się tylko limitem dwóch linii. */
.kafelek-tresci--galeria .kafelek-tresci__tytul {
    block-size: 2.6em;
    min-block-size: 2.6em;
    max-block-size: 2.6em;
    margin: 0;
    font-size: 1em;
    line-height: 1.3;
    overflow-wrap: anywhere;
    word-break: normal;
    line-clamp: 2;
    -webkit-line-clamp: 2;
}

/* Paginacja Joomla: bez marginesów odziedziczonych ze zwykłych list. */
.modul-tresci--projekty-galerie nav.pagination__wrapper ul.pagination {
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    margin: 1.25rem 0 0;
    padding: 0;
}

.modul-tresci--projekty-galerie
nav.pagination__wrapper
ul.pagination
> li.page-item {
    margin: 0;
}

.kafelek-tresci--projekt .kafelek-tresci__tytul[data-title-fitting] {
    display: block;
    block-size: auto;
    max-block-size: none;
    overflow: visible;
    -webkit-line-clamp: unset;
}

.kafelek-tresci--projekt .kafelek-tresci__tytul--jedna-linia {
    display: flex;
    align-items: center;
    -webkit-line-clamp: unset;
}

.kafelek-tresci--projekt
.kafelek-tresci__meta-element--oznaczenie-projektu {
    background: var(--kafelek-projekt-oznaczenie-tlo);
    color: var(--kafelek-projekt-oznaczenie-tekst);
}

.kafelek-tresci--projekt
.kafelek-tresci__meta-element--status-projektu {
    background: var(--kafelek-projekt-status-tlo);
    color: var(--kafelek-projekt-status-tekst);
}

/*
 * Punkty rozszerzen dla glownej palety motywu.
 * Jesli zmienne nie sa jeszcze zdefiniowane, kafelki pozostaja
 * zgodne ze wspolnymi kolorami statusow.
 */
.kafelek-tresci--projekt
.kafelek-tresci__meta-element--status-rekrutacja {
    background: var(
        --motyw-projekt-status-rekrutacja-tlo,
        var(--kafelek-projekt-status-tlo)
    );
    color: var(
        --motyw-projekt-status-rekrutacja-tekst,
        var(--kafelek-projekt-status-tekst)
    );
}

.kafelek-tresci--projekt
.kafelek-tresci__meta-element--status-w-trakcie {
    background: var(
        --motyw-projekt-status-w-trakcie-tlo,
        var(--kafelek-projekt-status-tlo)
    );
    color: var(
        --motyw-projekt-status-w-trakcie-tekst,
        var(--kafelek-projekt-status-tekst)
    );
}

.kafelek-tresci--projekt
.kafelek-tresci__meta-element--status-zakonczony {
    background: var(
        --motyw-projekt-status-zakonczony-tlo,
        var(--kafelek-projekt-status-tlo)
    );
    color: var(
        --motyw-projekt-status-zakonczony-tekst,
        var(--kafelek-projekt-status-tekst)
    );
}

@media (forced-colors: active) {
    .kafelek-tresci--projekt
    :is(
        .kafelek-tresci__meta-element--oznaczenie-projektu,
        .kafelek-tresci__meta-element--status-projektu
    ) {
        background: Canvas;
        color: CanvasText;
        border: 1px solid CanvasText;
    }
}