/* PESYJE CATEGORIES TIRANA HERO V1
   Approved Tirana composition, while keeping the real Blade copy/search interactive. */

.pesyje-categories-v20 .pc-v20-hero-wrap {
    min-height: 540px;
    padding-top: 46px !important;
    padding-bottom: 38px !important;
    background: #ffffff !important;
    isolation: isolate;
}

/* Use the approved artwork as the visual layer. */
.pesyje-categories-v20 .pc-v20-hero-wrap::before {
    content: "" !important;
    position: absolute !important;
    z-index: 0 !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-image: url('/images/pesyje-categories-tirana-hero-v1.webp') !important;
    background-repeat: no-repeat !important;
    background-position: right center !important;
    background-size: auto 112% !important;
    pointer-events: none !important;
}

/* Hide the baked UI on the left side of the artwork, so live translated HTML stays clean. */
.pesyje-categories-v20 .pc-v20-hero-wrap::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        #ffffff 0%,
        #ffffff 34%,
        rgba(255,255,255,.995) 41%,
        rgba(255,255,255,.97) 47%,
        rgba(255,255,255,.78) 53%,
        rgba(255,255,255,.28) 60%,
        rgba(255,255,255,0) 68%
    );
}

.pesyje-categories-v20 .pc-v20-hero-grid {
    position: relative;
    z-index: 2;
    min-height: 456px !important;
    grid-template-columns: minmax(430px, .84fr) minmax(620px, 1.16fr) !important;
    gap: 20px !important;
}

.pesyje-categories-v20 .pc-v20-copy {
    position: relative;
    z-index: 3;
    max-width: 650px;
    padding: 6px 0 12px !important;
}

.pesyje-categories-v20 .pc-v20-eyebrow {
    margin-bottom: 20px !important;
    padding: 8px 14px !important;
    border-color: rgba(7,143,138,.17) !important;
    background: rgba(7,143,138,.07) !important;
    box-shadow: 0 5px 14px rgba(7,143,138,.04);
}

.pesyje-categories-v20 .pc-v20-title {
    max-width: 620px !important;
    font-size: clamp(48px, 4.15vw, 70px) !important;
    line-height: .99 !important;
    letter-spacing: -3.2px !important;
}

.pesyje-categories-v20 .pc-v20-lead {
    max-width: 600px !important;
    margin-top: 20px !important;
    font-size: 17px !important;
    line-height: 1.58 !important;
}

.pesyje-categories-v20 .pc-v20-search {
    width: min(100%, 650px) !important;
    margin-top: 28px !important;
    padding: 9px 9px 9px 20px !important;
    border-radius: 16px !important;
    box-shadow: 0 14px 34px rgba(22,54,68,.10) !important;
}

.pesyje-categories-v20 .pc-v20-search input {
    height: 48px !important;
    font-size: 14px !important;
}

.pesyje-categories-v20 .pc-v20-search button {
    width: 52px !important;
    height: 52px !important;
    border-radius: 13px !important;
}

.pesyje-categories-v20 .pc-v20-benefits {
    gap: 10px !important;
    margin-top: 19px !important;
}

.pesyje-categories-v20 .pc-v20-benefits span {
    padding: 9px 13px !important;
    border: 1px solid #e5ecee !important;
    border-radius: 11px !important;
    background: rgba(255,255,255,.94) !important;
    box-shadow: 0 4px 14px rgba(22,54,68,.045);
    font-size: 11px !important;
}

/* The approved hero already contains the complete Tirana composition and category markers. */
.pesyje-categories-v20 .pc-v20-scene {
    min-height: 456px !important;
    pointer-events: none !important;
}

.pesyje-categories-v20 .pc-v20-city,
.pesyje-categories-v20 .pc-v20-city-exact,
.pesyje-categories-v20 .pc-v20-city-exact-logo,
.pesyje-categories-v20 .pc-v20-pin,
.pesyje-categories-v20 .pc-v20-city-svg,
.pesyje-categories-v20 .pc-v20-star3d {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Dark mode keeps the hero readable without turning the photo muddy. */
html[data-pesyje-theme="dark"] .pesyje-categories-v20 .pc-v20-hero-wrap {
    background: rgb(var(--background_color)) !important;
}

html[data-pesyje-theme="dark"] .pesyje-categories-v20 .pc-v20-hero-wrap::before {
    filter: brightness(.62) saturate(.82) contrast(1.04);
}

html[data-pesyje-theme="dark"] .pesyje-categories-v20 .pc-v20-hero-wrap::after {
    background: linear-gradient(
        90deg,
        rgb(var(--background_color)) 0%,
        rgb(var(--background_color)) 35%,
        rgba(var(--background_color),.99) 42%,
        rgba(var(--background_color),.95) 49%,
        rgba(var(--background_color),.72) 55%,
        rgba(var(--background_color),.24) 62%,
        rgba(var(--background_color),0) 70%
    );
}

html[data-pesyje-theme="dark"] .pesyje-categories-v20 .pc-v20-benefits span {
    border-color: rgb(var(--border_color)) !important;
    background: rgba(var(--elements_inner_background_color),.92) !important;
}

/* Tablet: keep the real copy first, then show the Tirana artwork as its own visual panel. */
@media (max-width: 1199.98px) {
    .pesyje-categories-v20 .pc-v20-hero-grid {
        grid-template-columns: minmax(390px, .92fr) minmax(470px, 1.08fr) !important;
    }
    .pesyje-categories-v20 .pc-v20-title {
        font-size: clamp(44px, 4.5vw, 60px) !important;
    }
}

@media (max-width: 991.98px) {
    .pesyje-categories-v20 .pc-v20-hero-wrap {
        min-height: 0;
        padding: 34px 24px 28px !important;
        background: #fff !important;
    }
    .pesyje-categories-v20 .pc-v20-hero-wrap::before,
    .pesyje-categories-v20 .pc-v20-hero-wrap::after {
        display: none !important;
    }
    .pesyje-categories-v20 .pc-v20-hero-grid {
        grid-template-columns: 1fr !important;
        gap: 22px !important;
        min-height: 0 !important;
    }
    .pesyje-categories-v20 .pc-v20-copy {
        max-width: 760px;
    }
    .pesyje-categories-v20 .pc-v20-title {
        max-width: 680px !important;
        font-size: clamp(44px, 7vw, 60px) !important;
    }
    .pesyje-categories-v20 .pc-v20-search {
        width: min(100%, 680px) !important;
    }
    .pesyje-categories-v20 .pc-v20-scene {
        display: block !important;
        min-height: 350px !important;
        margin-top: 2px !important;
        border: 1px solid var(--pc-soft-border);
        border-radius: 24px;
        background-image: url('/images/pesyje-categories-tirana-hero-v1.webp');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 69% center;
        box-shadow: 0 15px 34px rgba(22,54,68,.08);
        overflow: hidden;
    }
    html[data-pesyje-theme="dark"] .pesyje-categories-v20 .pc-v20-hero-wrap {
        background: rgb(var(--background_color)) !important;
    }
    html[data-pesyje-theme="dark"] .pesyje-categories-v20 .pc-v20-scene {
        filter: brightness(.68) saturate(.82);
        border-color: rgb(var(--border_color));
    }
}

@media (max-width: 767.98px) {
    .pesyje-categories-v20 .pc-v20-hero-wrap {
        padding: 24px 15px 22px !important;
    }
    .pesyje-categories-v20 .pc-v20-title {
        font-size: 38px !important;
        line-height: 1 !important;
        letter-spacing: -2px !important;
    }
    .pesyje-categories-v20 .pc-v20-lead {
        margin-top: 15px !important;
        font-size: 14px !important;
    }
    .pesyje-categories-v20 .pc-v20-search {
        margin-top: 19px !important;
        padding: 7px 7px 7px 15px !important;
    }
    .pesyje-categories-v20 .pc-v20-search input {
        height: 42px !important;
        font-size: 13px !important;
    }
    .pesyje-categories-v20 .pc-v20-search button {
        width: 46px !important;
        height: 46px !important;
    }
    .pesyje-categories-v20 .pc-v20-benefits {
        margin-top: 13px !important;
    }
    .pesyje-categories-v20 .pc-v20-benefits span {
        padding: 7px 9px !important;
        font-size: 9.5px !important;
    }
    .pesyje-categories-v20 .pc-v20-scene {
        min-height: 255px !important;
        border-radius: 18px;
        background-position: 70% center;
    }
}

@media (max-width: 420px) {
    .pesyje-categories-v20 .pc-v20-title {
        font-size: 34px !important;
        letter-spacing: -1.7px !important;
    }
    .pesyje-categories-v20 .pc-v20-scene {
        min-height: 220px !important;
        background-position: 72% center;
    }
}