/* =========================================================
   ROZMIAR MINIATURY - KOMPUTER
========================================================= */

:root {
    --photo-size: 150px;
}


/* =========================================================
   BREADCRUMBS
========================================================= */

.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    color: #94a3b8;
}


/* =========================================================
   NAGŁÓWEK ALBUMU
========================================================= */

.album-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 35px;
}

.album-description {
    margin-top: 10px;
    color: #cbd5e1;
    line-height: 1.6;
}

.album-photo-count {
    margin-top: 14px;
    color: #94a3b8;
}


/* =========================================================
   PRZYCISKI NAGŁÓWKA ALBUMU
========================================================= */

.button-group {
    display: flex;
    align-items: stretch;
    gap: 12px;
}

.button-group form {
    display: flex;
    margin: 0;
}

.button-group .button,
.button-group button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 100%;
}


/* =========================================================
   ALBUMY UŻYTKOWNIKA — SIATKA
========================================================= */

.user-albums-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            190px
        );

    gap: 16px;

    justify-content: start;
    align-items: stretch;

    margin-top: 25px;
    margin-bottom: 40px;
}


/* =========================================================
   ALBUMY UŻYTKOWNIKA — KAFEL
========================================================= */

.user-album-card {
    display: flex;
    flex-direction: column;

    width: 190px;
    min-width: 0;

    overflow: hidden;

    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;

    background: rgba(255,255,255,.05);

    color: inherit;
    text-decoration: none;

    box-shadow:
        0 6px 18px rgba(0,0,0,.20);

    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

.user-album-card:hover {
    transform: translateY(-3px);

    border-color:
        rgba(96,165,250,.35);

    box-shadow:
        0 10px 24px rgba(0,0,0,.28);

    text-decoration: none;
}


/* =========================================================
   ALBUMY UŻYTKOWNIKA — OKŁADKA
========================================================= */

.user-album-cover {
    position: relative;

    display: block;

    width: 100%;

    aspect-ratio: 16 / 10;

    overflow: hidden;

    background:
        rgba(255,255,255,.04);
}

.user-album-cover img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .28s ease;
}

.user-album-card:hover
.user-album-cover img {
    transform: scale(1.04);
}


/* =========================================================
   ALBUMY UŻYTKOWNIKA — BRAK OKŁADKI
========================================================= */

.user-album-cover-placeholder {
    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 6px;

    width: 100%;
    height: 100%;

    color: #94a3b8;
}

.user-album-cover-placeholder span {
    font-size: 28px;
}

.user-album-cover-placeholder small {
    font-size: 12px;
}


/* =========================================================
   ALBUMY UŻYTKOWNIKA — TREŚĆ
========================================================= */

.user-album-content {
    display: flex;
    flex: 1;
    flex-direction: column;

    padding: 12px;
}

.user-album-header {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 8px;
}

.user-album-header h2 {
    margin: 0;

    min-width: 0;

    color: #ffffff;

    font-size: 16px;
    line-height: 1.25;
}


/* =========================================================
   ALBUMY UŻYTKOWNIKA — OPIS
========================================================= */

.user-album-description {
    margin: 9px 0 0;

    color: #aeb9c5;

    font-size: 12px;
    line-height: 1.4;
}


/* =========================================================
   ALBUMY UŻYTKOWNIKA — INFORMACJE
========================================================= */

.user-album-meta {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 8px;

    margin-top: auto;
    padding-top: 12px;

    color: #94a3b8;

    font-size: 11px;

    white-space: nowrap;
}


/* =========================================================
   SIATKA ZDJĘĆ I FILMÓW
========================================================= */

.photo-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(
                var(--photo-size),
                var(--photo-size)
            )
        );

    justify-content: center;

    gap: 14px;

    margin-top: 30px;
    margin-bottom: 40px;
}


/* =========================================================
   KAFEL ZDJĘCIA / FILMU
========================================================= */

.photo-card {
    position: relative;

    width: var(--photo-size);

    aspect-ratio: 1 / 1;

    overflow: hidden;

    border-radius: 16px;

    background: rgba(255,255,255,.05);

    border: 1px solid rgba(255,255,255,.10);

    box-shadow:
        0 8px 24px rgba(0,0,0,.22);

    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

.photo-card:hover {
    transform: translateY(-3px);

    border-color:
        rgba(96,165,250,.38);

    box-shadow:
        0 12px 30px rgba(0,0,0,.30);
}

.photo-link {
    position: relative;

    display: block;

    width: 100%;
    height: 100%;

    overflow: hidden;
}

.photo-card img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition:
        transform .25s ease;
}

.photo-card:hover img {
    transform: scale(1.035);
}


/* =========================================================
   INFORMACJE NA MINIATURZE — OVERLAY
========================================================= */

.media-overlay {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 3;

    display: flex;
    flex-direction: column;

    gap: 3px;

    padding: 28px 9px 8px;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.88) 0%,
            rgba(0,0,0,.58) 55%,
            rgba(0,0,0,0) 100%
        );

    color: #ffffff;

    opacity: 0;

    transform:
        translateY(5px);

    pointer-events: none;

    transition:
        opacity .20s ease,
        transform .20s ease;
}


.media-overlay-name {
    display: block;

    overflow: hidden;

    color: #ffffff;

    font-size: 11px;
    font-weight: 600;

    line-height: 1.25;

    text-overflow: ellipsis;
    white-space: nowrap;

    text-shadow:
        0 1px 3px rgba(0,0,0,.85);
}


.media-overlay-date {
    display: block;

    color: #cbd5e1;

    font-size: 10px;
    line-height: 1.2;

    white-space: nowrap;

    text-shadow:
        0 1px 3px rgba(0,0,0,.85);
}


@media (hover: hover) and (pointer: fine) {

    .photo-card:hover
    .media-overlay {

        opacity: 1;

        transform:
            translateY(0);
    }

}


/* =========================================================
   FILM — KAFEL
========================================================= */

.video-card {
    aspect-ratio: auto;
    align-self: start;

    background:
        linear-gradient(
            145deg,
            rgba(30,41,59,.95),
            rgba(15,23,42,.98)
        );
}

.video-card .photo-link {
    position: relative;

    height: auto;
    aspect-ratio: 1 / 1;

    display: flex;

    align-items: center;
    justify-content: center;

    color: white;

    text-decoration: none;
}

.video-title {
box-sizing: border-box;
width: 100%;
max-width: 100%;
min-width: 0;
margin: 8px 0 0;
padding: 0 8px;
color: inherit;
font-size: 0.95rem;
font-weight: 600;
line-height: 1.4;
text-align: center;
white-space: normal;
overflow-wrap: anywhere;
}

.video-placeholder {
    position: absolute;

    inset: 0;

    gap: 8px;

    background:
        radial-gradient(
            circle at center,
            rgba(59,130,246,.13),
            rgba(15,23,42,.96)
        );
}

.video-placeholder .photo-missing-icon {
    display: none;
}

.video-placeholder div:last-child {
    margin-top: 55px;

    color: #94a3b8;

    font-size: 12px;

    text-transform: uppercase;
    letter-spacing: .8px;
}


/* =========================================================
   FILM — PRZYCISK PLAY
========================================================= */

.video-play-badge {
    position: absolute;

    top: 50%;
    left: 50%;

    z-index: 4;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

    padding-left: 4px;

    border: 1px solid rgba(255,255,255,.30);
    border-radius: 50%;

    background: rgba(0,0,0,.62);

    color: #ffffff;

    font-size: 25px;
    line-height: 1;

    box-shadow:
        0 6px 20px rgba(0,0,0,.40);

    transform:
        translate(-50%, -50%);

    transition:
        transform .20s ease,
        background .20s ease,
        border-color .20s ease;
}

.video-card:hover
.video-play-badge {
    background:
        rgba(37,99,235,.88);

    border-color:
        rgba(255,255,255,.60);

    transform:
        translate(-50%, -50%)
        scale(1.08);
}


/* =========================================================
   WYBÓR OKŁADKI ALBUMU
========================================================= */

.photo-cover-form {
    position: absolute;

    top: 8px;
    right: 8px;

    z-index: 5;

    margin: 0;
    padding: 0;
}

.photo-cover-button {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    padding: 0;
    margin: 0;

    border: 1px solid rgba(255,255,255,.25);
    border-radius: 50%;

    background: rgba(0,0,0,.62);

    color: #ffffff;

    font-size: 23px;
    line-height: 1;

    cursor: pointer;

    box-shadow:
        0 4px 12px rgba(0,0,0,.35);

    transition:
        background .20s ease,
        transform .20s ease,
        border-color .20s ease;
}

.photo-cover-button:hover {
    background: rgba(0,0,0,.82);

    border-color:
        rgba(255,255,255,.55);

    transform: scale(1.08);
}


/* =========================================================
   AKTUALNA OKŁADKA
========================================================= */

.photo-card-cover {
    border-color:
        rgba(250,204,21,.75);

    box-shadow:
        0 0 0 2px rgba(250,204,21,.18),
        0 10px 28px rgba(0,0,0,.28);
}

.photo-cover-badge {
    position: absolute;

    top: 8px;
    right: 8px;

    z-index: 5;

    padding: 7px 10px;

    border-radius: 10px;

    background:
        rgba(0,0,0,.72);

    color: #fde047;

    font-size: 12px;
    font-weight: 700;

    line-height: 1;

    box-shadow:
        0 4px 12px rgba(0,0,0,.35);

    pointer-events: none;
}


/* =========================================================
   BRAK MINIATURY
========================================================= */

.photo-missing {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 10px;

    color: #94a3b8;

    text-align: center;
}

.photo-missing-icon {
    font-size: 34px;
}


/* =========================================================
   LIGHTBOX ZDJĘĆ
========================================================= */

.photo-lightbox {
    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 30px 90px;

    background:
        rgba(0,0,0,.94);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .28s ease,
        visibility .28s ease;
}

.photo-lightbox.active {
    opacity: 1;
    visibility: visible;
}

.photo-lightbox-content {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;
}


/* =========================================================
   LIGHTBOX ZDJĘĆ — ANIMACJA OBRAZU
========================================================= */

.photo-lightbox-content img {
    display: block;

    max-width: 90vw;
    max-height: 90vh;

    width: auto;
    height: auto;

    object-fit: contain;

    border-radius: 12px;

    opacity: 0;

    transform:
        scale(.94);

    box-shadow:
        0 25px 80px rgba(0,0,0,.75);

    transition:
        opacity .25s ease,
        transform .25s ease;
}

.photo-lightbox.active
.photo-lightbox-content img {
    opacity: 1;

    transform:
        scale(1);
}


/* =========================================================
   LIGHTBOX FILMU
========================================================= */

.video-lightbox {
    background:
        rgba(0,0,0,.96);
}

.video-lightbox-content {
    width: auto;
    height: auto;

    max-width: 92vw;
    max-height: 90vh;
}

.video-lightbox-player {
    display: block;

    width: auto;
    height: auto;

    max-width: 92vw;
    max-height: 86vh;

    background: #000000;

    border-radius: 10px;

    outline: none;

    box-shadow:
        0 20px 70px rgba(0,0,0,.75);
}


/* =========================================================
   ZAMKNIĘCIE LIGHTBOXA
========================================================= */

.photo-lightbox-close {
    position: absolute;

    top: 22px;
    right: 28px;

    z-index: 10;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 50px;
    height: 50px;

    padding: 0;

    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;

    background:
        rgba(255,255,255,.12);

    -webkit-backdrop-filter:
        blur(10px);

    backdrop-filter:
        blur(10px);

    color: #ffffff;

    font-size: 34px;
    line-height: 1;

    cursor: pointer;

    box-shadow:
        0 6px 20px rgba(0,0,0,.22);

    transition:
        background .20s ease,
        border-color .20s ease,
        transform .20s ease;
}

.photo-lightbox-close:hover {
    background:
        rgba(255,255,255,.22);

    border-color:
        rgba(255,255,255,.32);

    transform:
        scale(1.08);
}


/* =========================================================
   POBIERANIE ZDJĘCIA
========================================================= */

.photo-lightbox-download {
    position: absolute;

    top: 22px;
    right: 90px;

    z-index: 10;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 50px;
    height: 50px;

    padding: 0;

    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;

    background:
        rgba(255,255,255,.12);

    -webkit-backdrop-filter:
        blur(10px);

    backdrop-filter:
        blur(10px);

    color: #ffffff;

    font-size: 27px;
    font-weight: 700;
    line-height: 1;

    text-decoration: none;

    cursor: pointer;

    box-shadow:
        0 6px 20px rgba(0,0,0,.22);

    transition:
        background .20s ease,
        border-color .20s ease,
        transform .20s ease;
}

.photo-lightbox-download:hover {
    background:
        rgba(255,255,255,.22);

    border-color:
        rgba(255,255,255,.32);

    color: #ffffff;

    text-decoration: none;

    transform:
        scale(1.08);
}

.photo-lightbox-download:focus-visible {
    outline: 2px solid rgba(255,255,255,.85);
    outline-offset: 3px;
}


/* =========================================================
   STRZAŁKI LIGHTBOXA ZDJĘĆ
========================================================= */

.photo-lightbox-nav {
    position: absolute;

    top: 50%;

    z-index: 5;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 58px;
    height: 76px;

    padding: 0;

    border: 1px solid rgba(255,255,255,.15);
    border-radius: 18px;

    background:
        rgba(255,255,255,.10);

    -webkit-backdrop-filter:
        blur(12px);

    backdrop-filter:
        blur(12px);

    color: #ffffff;

    font-size: 50px;
    line-height: 1;

    cursor: pointer;

    box-shadow:
        0 8px 24px rgba(0,0,0,.22);

    transform:
        translateY(-50%);

    transition:
        background .20s ease,
        border-color .20s ease,
        transform .20s ease,
        box-shadow .20s ease;
}

.photo-lightbox-nav:hover {
    background:
        rgba(255,255,255,.22);

    border-color:
        rgba(255,255,255,.30);

    box-shadow:
        0 10px 30px rgba(0,0,0,.30);
}

.photo-lightbox-prev {
    left: 25px;
}

.photo-lightbox-next {
    right: 25px;
}


/* =========================================================
   BLOKADA PRZEWIJANIA
========================================================= */

body.lightbox-open {
    overflow: hidden;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .user-albums-grid {

        grid-template-columns:
            repeat(
                auto-fill,
                175px
            );

        gap: 14px;
    }

    .user-album-card {
        width: 175px;
    }

}


/* =========================================================
   TELEFON
========================================================= */

@media (max-width: 700px) {

    :root {
        --photo-size: 120px;
    }


    .album-header {
        flex-direction: column;
    }


    .user-albums-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 10px;
    }


    .user-album-card {
        width: 100%;
    }


    .user-album-content {
        padding: 10px;
    }


    .user-album-header h2 {
        font-size: 15px;
    }


    .user-album-description {
        font-size: 12px;
    }


    .user-album-meta {
        gap: 5px;
        padding-top: 10px;
        font-size: 10px;
    }


    .media-overlay {
        display: none;
    }


    .photo-cover-button {
        width: 32px;
        height: 32px;

        font-size: 20px;
    }


    .photo-cover-badge {
        padding: 6px 8px;

        font-size: 10px;
    }


    .video-play-badge {
        width: 44px;
        height: 44px;

        font-size: 21px;
    }


    .photo-lightbox {
        padding: 12px 55px;
    }


    .photo-lightbox-content img {
        max-width: 94vw;
        max-height: 86vh;
    }


    .video-lightbox {
        padding: 12px;
    }


    .video-lightbox-content {
        max-width: 96vw;
        max-height: 88vh;
    }


    .video-lightbox-player {
        max-width: 96vw;
        max-height: 82vh;
    }


    .photo-lightbox-close {
        top: 12px;
        right: 12px;

        width: 44px;
        height: 44px;
    }


    .photo-lightbox-download {
        top: 12px;
        right: 66px;

        width: 44px;
        height: 44px;

        font-size: 24px;
    }


    .photo-lightbox-nav {
        width: 42px;
        height: 58px;

        font-size: 38px;

        background:
            rgba(0,0,0,.45);

        -webkit-backdrop-filter:
            blur(8px);

        backdrop-filter:
            blur(8px);
    }


    .photo-lightbox-prev {
        left: 6px;
    }


    .photo-lightbox-next {
        right: 6px;
    }

}

    .media-bulk-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        margin: 18px 0;
        padding: 12px;
        background: rgba(0, 0, 0, 0.04);
        border-radius: 10px;
    }

    .media-select-label {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 6;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        background: rgba(0, 0, 0, 0.65);
        border-radius: 8px;
        cursor: pointer;
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
    }

    .media-select-checkbox {
        width: 20px;
        height: 20px;
        margin: 0;
        cursor: pointer;
        accent-color: #d9363e;
    }

    .photo-card:has(.media-select-checkbox:checked) {
        outline: 3px solid #d9363e;
        outline-offset: -3px;
    }

    .media-selected-count {
        margin-left: auto;
        font-weight: 600;
    }

    .media-metadata-overlay {
        position: absolute;
        left: 10px;
        bottom: 10px;
        z-index: 3;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
        max-width: calc(100% - 20px);
        pointer-events: none;
    }

    .media-metadata-line {
        display: block;
        max-width: 100%;
        padding: 4px 7px;
        overflow: hidden;
        color: #ffffff;
        font-size: 12px;
        line-height: 1.25;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
        background: rgba(0, 0, 0, 0.58);
        border-radius: 6px;
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
    }

    .media-pagination {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 7px;
        margin: 24px 0 8px;
    }

    .media-pagination a,
    .media-pagination span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 38px;
        min-height: 38px;
        padding: 6px 10px;
        border-radius: 8px;
        text-decoration: none;
    }

    .media-pagination a {
        color: inherit;
        background: rgba(0, 0, 0, 0.06);
    }

    .media-pagination a:hover {
        background: rgba(0, 0, 0, 0.12);
    }

    .media-pagination-current {
        color: #ffffff;
        font-weight: 700;
        background: #d9363e;
    }

    .media-pagination-disabled {
        opacity: 0.45;
    }

    .media-page-summary {
        margin: 10px 0 0;
        text-align: center;
        opacity: 0.75;
    }

    @media (max-width: 600px) {

        .media-bulk-actions {
            align-items: stretch;
        }

        .media-selected-count {
            width: 100%;
            margin-left: 0;
        }

        .media-metadata-overlay {
            left: 8px;
            bottom: 8px;
        }

        .media-metadata-line {
            padding: 3px 6px;
            font-size: 11px;
        }
    }