.portfolio-page {

    padding: 58px 7% 70px;

    background: linear-gradient(180deg, #FFFDFC 0%, #FBF6F2 100%);

}



.portfolio-page-top {

    width: min(1280px, 100%);

    margin: 0 auto 28px;

}



.portfolio-page-grid {

    width: min(1280px, 100%);

    margin: 0 auto;

    display: grid;

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

    gap: 16px;

}



.portfolio-page-grid .portfolio-item {

    position: relative;

    display: block;

    overflow: hidden;

    width: 100%;

    max-width: none;

    border-radius: 8px;

    background: #EBD8CA;

    box-shadow: 0 14px 32px rgba(79, 61, 50, .08);

}



.portfolio-page-grid .portfolio-item.hidden,

.portfolio-page-grid .portfolio-item.is-collapsed {

    display: none;

}



.portfolio-page-grid .portfolio-item img {

    width: 100%;

    aspect-ratio: 1 / 1.2;

    display: block;

    object-fit: cover;

    object-position: center top;

}



.portfolio-page-grid .portfolio-item:hover img {

    transform: scale(1.045);

}



.portfolio-page-grid .portfolio-item::after {

    content: "";

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    height: 42%;

    background: linear-gradient(180deg, transparent, rgba(55, 38, 30, .58));

    opacity: 1;

    transition: opacity .3s ease;

    pointer-events: none;

}



.portfolio-caption {

    position: absolute;

    left: 18px;

    right: 18px;

    bottom: 18px;

    z-index: 2;

    color: #fff;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    text-align: center;

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

}



.portfolio-page.is-filtered .portfolio-caption,

.portfolio-page.is-filtered .portfolio-item::after {

    opacity: 0;

}



.portfolio-load-more {

    min-height: 46px;

    margin: 34px auto 0;

    padding: 0 34px;

    display: none;

    justify-content: center;

    align-items: center;

    gap: 10px;

    border: 1px solid #C89B7B;

    border-radius: 999px;

    background: transparent;

    color: #8A6753;

    cursor: pointer;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1.2px;

    transition: background .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease;

}



.portfolio-load-more.is-visible {

    display: flex;

}



.portfolio-load-more:hover {

    background: #C89B7B;

    color: #fff;

    transform: translateY(-3px);

    box-shadow: 0 12px 28px rgba(200, 143, 108, .25);

}



.portfolio-item.hidden,

.portfolio-item.is-collapsed {

    display: none;

}



@media (max-width: 1200px) {

    .portfolio-page-grid {

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

    }

}



@media (max-width: 992px) {

    .portfolio-page-grid {

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

    }

}



@media (max-width: 768px) {

    .portfolio-page {

        padding: 46px 5% 56px;

    }



    .portfolio-page-grid {

        width: min(1280px, 100%);

        margin: 0 auto;

        display: grid;

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

        justify-content: stretch;

        gap: 12px;

    }



    .portfolio-page-grid .portfolio-item {

        max-width: none;

        border-radius: 14px;

    }



    .portfolio-page-grid .portfolio-item img {

        aspect-ratio: 1 / 1.2;

        object-position: center;

    }



    .portfolio-caption {

        left: 12px;

        right: 12px;

        bottom: 14px;

        font-size: 11px;

        letter-spacing: 1px;

    }

}



@media (max-width: 480px) {

    .portfolio-page {

        padding: 38px 5% 48px;

    }



    .portfolio-page-grid {

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

        gap: 10px;

    }



    .portfolio-load-more {

        width: 100%;

        max-width: 300px;

    }

}





.portfolio-hero {

    position: relative;

    min-height: 330px;

    display: flex;

    align-items: center;

    padding: 70px 7% 62px;

    background:

        url("../images/omnie-background.png")

        center center / cover no-repeat;

    overflow: hidden;

}



.portfolio-hero-inner {

    width: min(1180px, 100%);

    margin: 0 auto;

    display: flex;

    justify-content: center;

    align-items: center;

}



.portfolio-hero-content {

    position: relative;

    max-width: 720px;

    padding: 28px 42px 32px;

    border-radius: 30px;

    text-align: center;

    background:

        linear-gradient(

            135deg,

            rgba(255, 253, 252, .34) 0%,

            rgba(248, 241, 236, .18) 100%

        );

    backdrop-filter: blur(6px);

    box-shadow: 0 18px 44px rgba(79, 61, 50, .06);

}



.portfolio-hero h1 {

    margin: 0;

    font-family: "Cormorant Garamond", serif;

    color: #7A5545;

    font-size: clamp(42px, 5vw, 78px);

    font-weight: 400;

    line-height: 1.05;

    letter-spacing: 9px;

    text-transform: uppercase;

}



.portfolio-heading-heart {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 12px;

    margin: 18px 0 24px;

}



.portfolio-heading-heart span {

    width: 26px;

    height: 1px;

    background: rgba(200, 155, 123, .48);

}



.portfolio-heading-heart strong {

    color: #C89B7B;

    font-size: 16px;

    font-weight: 400;

    line-height: 1;

}



.portfolio-hero p {

    max-width: 520px;

    margin: 0 auto;

    color: #5F4738;

    font-size: 16px;

    line-height: 1.8;

}



@media (max-width: 900px) {

    .portfolio-hero {

        min-height: 280px;

        padding: 58px 24px 54px;

        background-position: center center;

    }



    .portfolio-hero h1 {

        font-size: clamp(38px, 8vw, 58px);

        letter-spacing: 5px;

    }

}



@media (max-width: 560px) {

    .portfolio-hero {

        min-height: 245px;

        padding: 46px 18px 44px;

        background-position: 52% center;

    }



    .portfolio-hero-content {

        padding: 18px 14px 22px;

        border-radius: 22px;

        background:

            linear-gradient(

                135deg,

                rgba(255, 253, 252, .50) 0%,

                rgba(248, 241, 236, .50) 100%

            );

    }



    .portfolio-hero h1 {

        font-size: 34px;

        letter-spacing: 3px;

    }



    .portfolio-hero p {

        font-size: 15px;

        line-height: 1.7;

    }

}



@media (min-width: 1600px) {

    .portfolio-hero {

        min-height: 420px;

        padding: 90px 8%;

    }



    .portfolio-hero-inner {

        width: min(1480px, 100%);

    }

}



@media (min-width: 2200px) {

    .portfolio-hero {

        min-height: 520px;

        padding: 120px 10%;

    }



    .portfolio-hero h1 {

        font-size: 88px;

    }



    .portfolio-hero p {

        font-size: 18px;

    }

}

/* ZOBACZ WIĘCEJ — docelowy rozmiar po poprawieniu struktury HTML. */
.portfolio-load-more.is-visible{
    width:190px;
    max-width:190px;
    min-width:190px;
    min-height:46px;
    margin:28px auto 0;
    padding:0 18px;
    box-sizing:border-box;
}

@media (max-width:480px){
    .portfolio-load-more.is-visible{
        width:196px;
        max-width:196px;
        min-width:196px;
        min-height:44px;
        margin:26px auto 0;
    }
}