.abcweb-portfolio { padding: 60px 80px; background: #fff; }
.abcweb-portfolio__filters { display: flex; justify-content: center; flex-wrap: wrap; gap: 0; padding-bottom: 20px; border-bottom: 1px solid #e5e5e5; margin-bottom: 40px; }
.abcweb-portfolio__filter-tab { padding: 15px 30px; background: transparent; border: none; font-size: 14px; color: #666; cursor: pointer; position: relative; transition: color .3s ease; white-space: nowrap; }
.abcweb-portfolio__filter-tab::after { content: ''; position: absolute; left: 0; bottom: 0px; width: 100%; height: 2px; background: #b3924a; transform: scaleX(0); transform-origin: left center; transition: transform .45s cubic-bezier(.4,0,.2,1), opacity .45s ease; }
.abcweb-portfolio__filter-tab:hover { color: #333; }
.abcweb-portfolio__filter-tab:hover::after { transform: scaleX(.35); opacity: .35; }
.abcweb-portfolio__filter-tab.is-active { color: #000; font-weight: 600; }
.abcweb-portfolio__filter-tab.is-active::after { transform: scaleX(1); opacity: 1; transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .3s ease; }
.abcweb-portfolio__filter-tab.is-leaving::after { transform: scaleX(0); transform-origin: right center; opacity: 0; transition: transform .35s cubic-bezier(.4,0,1,1), opacity .35s ease; }

.abcweb-portfolio__featured { position: relative; margin-bottom: 40px; }
.abcweb-portfolio__featured-panel { display: none; gap: 60px; align-items: center; }
.abcweb-portfolio__featured-panel.is-active { display: flex; }
.abcweb-portfolio__featured-image { flex: 0 0 60%; min-width: 0; display: block; border-radius: 8px; overflow: hidden; }
.abcweb-portfolio__featured-image picture { display: block; }
.abcweb-portfolio__featured-image img { width: 100%; max-width: 100%; height: auto; display: block; transition: opacity .3s ease; }
.abcweb-portfolio__featured-image:hover img { opacity: .92; }
.abcweb-portfolio__featured-quote { position: relative; flex: 1 1 auto; min-width: 0; padding: 40px; background: #f9f9f9; border-radius: 8px; margin: 0; }
.abcweb-portfolio__quote-tail { position: absolute; left: -20px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-right: 20px solid #f9f9f9; }
.abcweb-portfolio__quote-icon { position: absolute; top: 20px; left: 30px; font-size: 80px; line-height: 1; color: #b3924a; opacity: .3; font-family: Georgia, serif; }
.abcweb-portfolio__quote-text { position: relative; z-index: 1; margin: 0 0 30px; font-size: 18px; line-height: 1.8; color: #333; font-style: italic; }
.abcweb-portfolio__quote-author { padding-top: 20px; border-top: 1px solid #e5e5e5; display: flex; flex-direction: column; gap: 5px; }
.abcweb-portfolio__quote-author strong { font-size: 14px; color: #000; font-weight: 600; }
.abcweb-portfolio__quote-author span { font-size: 13px; color: #666; }

.abcweb-portfolio__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 50px; }
.abcweb-portfolio__card { min-width: 0; transition: transform .4s ease; }
.abcweb-portfolio__card[hidden] { display: none; }
.abcweb-portfolio__card:hover { transform: translateY(-5px); }
.abcweb-portfolio__card-media { position: relative; display: block; overflow: hidden; border-radius: 8px; background: #f5f5f5; }
.abcweb-portfolio__card-media picture { display: block; }
.abcweb-portfolio__card-media img { width: 100%; max-width: 100%; height: auto; display: block; transition: transform .4s ease; }
.abcweb-portfolio__card:hover .abcweb-portfolio__card-media img { transform: scale(1.05); }
.abcweb-portfolio__card-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.6); color: #fff; font-size: 16px; font-weight: 500; letter-spacing: 1px; opacity: 0; transition: opacity .3s ease; }
.abcweb-portfolio__card:hover .abcweb-portfolio__card-overlay { opacity: 1; }
.abcweb-portfolio__card-body { padding: 25px 10px 10px; }
.abcweb-portfolio__card-title { margin: 0 0 15px; font-size: 18px; font-weight: 500; color: #000; }
.abcweb-portfolio__card-tags { list-style: none !important; margin: 0; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 10px; }
.abcweb-portfolio__card-tags li { padding: 8px 16px; border: 1px solid #000; border-radius: 25px; font-size: 11px; color: #000; background: #fff; letter-spacing: .5px; text-transform: uppercase; }

@media (max-width: 1024px) {
    /* w kolumnie os glowna to wysokosc, wiec szerokosc musi wymuszac align-items/width,
       inaczej align-items:center daje elementom szerokosc naturalna zdjecia (1000px) */
    .abcweb-portfolio__featured-panel { flex-direction: column; align-items: stretch; gap: 40px; }
    .abcweb-portfolio__featured-image { flex: 0 0 auto; width: 100%; }
    .abcweb-portfolio__featured-quote { width: 100%; }
    .abcweb-portfolio__quote-tail { display: none; }
    .abcweb-portfolio__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}
@media (max-width: 768px) {
    .abcweb-portfolio__filter-tab { padding: 12px 20px; font-size: 13px; }
    .abcweb-portfolio__quote-text { font-size: 16px; }
    .abcweb-portfolio__featured-quote { padding: 30px; }
}

/* PortfolioElement (custom element carousel) */
.portfolio-element .swiper-slide .image-element { width: 100%; padding: 0; }
.portfolio-element .image-link { display: block; overflow: hidden; border-radius: 8px; }
.portfolio-element .image-wrapper { position: relative; display: block; width: 100%; margin: 0; overflow: hidden; border-radius: 8px; background: #f5f5f5; }
.portfolio-element .image-wrapper img { width: 100%; height: auto; display: block; transition: transform .4s ease; }
.portfolio-element .image-link:hover .image-wrapper img { transform: scale(1.05); }
.portfolio-element .image-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.6); color: #fff; font-size: 16px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.portfolio-element .image-link:hover .image-overlay { opacity: 1; }
.portfolio-element .image-info { margin-top: 1.25rem; width: 100%; text-align: left; }
.portfolio-element .image-info .title { display: block; font-size: 18px; font-weight: 500; color: #000; margin-bottom: 15px; }
.portfolio-element .image-info .description { display: block; }
.portfolio-element .image-info .details { display: flex; flex-wrap: wrap; gap: 10px; }
.portfolio-element .image-info .details .tag { display: inline-block; padding: 8px 16px; border: 1px solid #000; border-radius: 25px; font-size: 11px; color: #000; background: #fff; letter-spacing: .5px; text-transform: uppercase; line-height: 1; }


/* XXL larger desktops >= 1400 */
@media screen and (min-width: 1400px) {
}
/* XL large desktops >= 1200 */
@media screen and (max-width: 1399.98px) {
}
@media screen and (min-width: 1200px) {
}
/* LG desktops >= 992 */
@media screen and (max-width: 1199.98px) {
    .abcweb-portfolio {
        padding: 2rem;
    }
}
@media screen and (min-width: 992px) {
}
/* MD tablets >= 768 */
@media screen and (max-width: 991.98px) {
}
@media screen and (min-width: 768px) {
}
/* SM phones >= 576 */
@media screen and (max-width: 767.98px) {
    .abcweb-portfolio {
        padding: 2rem 1rem;
    }
    .abcweb-portfolio__filters {
        margin-bottom: 24px;
    }
    .abcweb-portfolio__featured {
        margin-bottom: 24px;
    }
    .abcweb-portfolio__featured-panel {
        gap: 24px;
    }
    .abcweb-portfolio__grid {
        gap: 1.5rem;
    }
}
@media screen and (min-width: 576px) {
}
/* XS small phones < 576 */
@media screen and (max-width: 575.98px) {
    .abcweb-portfolio {
        padding: 1.5rem .75rem;
    }
    .abcweb-portfolio__filter-tab {
        padding: 10px 12px;
        font-size: 11px;
    }
    .abcweb-portfolio__featured-quote {
        padding: 24px 20px;
    }
    .abcweb-portfolio__quote-icon {
        top: 12px;
        left: 16px;
        font-size: 56px;
    }
    /* dlugie zlozenia niemieckie (WASCHTISCHUNTERSCHRANK, LED-Hintergrundbeleuchtung)
       nie miesza sie w jednej linii - dzielenie wyrazow wg lang="de-DE" */
    .abcweb-portfolio__quote-text {
        margin-bottom: 20px;
        font-size: 15px;
        line-height: 1.7;
        -webkit-hyphens: auto;
        hyphens: auto;
    }
    .abcweb-portfolio__quote-author strong {
        font-size: 13px;
    }
    .abcweb-portfolio__quote-author span {
        font-size: 12px;
    }
    .abcweb-portfolio__card-body {
        padding: 18px 0 0;
    }
    .abcweb-portfolio__card-title {
        margin-bottom: 12px;
        font-size: 15px;
        line-height: 1.4;
        -webkit-hyphens: auto;
        hyphens: auto;
    }
    .abcweb-portfolio__card-overlay {
        font-size: 14px;
    }
    .abcweb-portfolio__card-tags {
        gap: 8px;
    }
    .abcweb-portfolio__card-tags li {
        padding: 6px 11px;
        font-size: 10px;
        letter-spacing: .3px;
        overflow-wrap: break-word;
    }
}
/* XXS najmniejsze telefony (iPhone SE / mini, 360-380px) */
@media screen and (max-width: 380px) {
    .abcweb-portfolio {
        padding: 1.25rem .625rem;
    }
    .abcweb-portfolio__filter-tab {
        padding: 9px 10px;
        font-size: 10px;
    }
    .abcweb-portfolio__featured-quote {
        padding: 20px 16px;
    }
    .abcweb-portfolio__quote-text {
        font-size: 14px;
    }
    .abcweb-portfolio__card-title {
        font-size: 14px;
    }
    .abcweb-portfolio__card-tags {
        gap: 6px;
    }
    .abcweb-portfolio__card-tags li {
        padding: 5px 10px;
        font-size: 9px;
        letter-spacing: .2px;
    }
}