/* ============================================================
   HP BLOK: Festivaly (psy-promo)
   Nahraj na FTP: /user/documents/userfiles/custom-hp-festivaly.css
   ============================================================ */

.psy-promo {
    display: flex;
    align-items: stretch;
    background: #000000;
    border: 1px solid #222222;
    border-radius: 24px;
    overflow: hidden;
    height: 400px;
    max-width: 1500px;
    margin: 32px auto;
}

.psy-promo__left {
    flex: 0 0 40%;
    padding: 60px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 25px;
}

.psy-promo__title {
    font-family: 'Poppins', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    line-height: 1.25;
}

.psy-promo__text {
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem;
    font-weight: 500;
    color: rgba(255,255,255,0.75);
    line-height: 1.55;
    margin: 0;
}

.psy-promo__btn {
    display: inline-block;
    padding: 12px 25px;
    background: #ffffff;
    border-radius: 6px;
    color: #000000 !important;
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    text-decoration: none !important;
    align-self: flex-start;
    transition: background .2s, color .2s;
}

.psy-promo__btn:hover {
    background: #86efac;
    color: #000000 !important;
}

.psy-promo__right {
    flex: 0 0 60%;
    overflow: hidden;
    position: relative;
}

.psy-promo__right::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 100%;
    background: linear-gradient(to right, #000000, transparent);
    z-index: 2;
    pointer-events: none;
}

.psy-promo__right img {
    position: absolute;
    top: -15%;
    left: 0;
    width: 100%;
    height: 130%;
    object-fit: cover;
    object-position: center;
    display: block;
    will-change: transform;
}

@media (max-width: 768px) {
    .psy-promo {
        flex-direction: column;
        height: auto;
        max-width: 100%;
    }
    .psy-promo__left {
        padding: 20px 25px;
        gap: 10px;
    }
    .psy-promo__right {
        flex: none;
        width: 100%;
        height: 220px;
    }
    .psy-promo__right::before {
        width: 100%;
        height: 20px;
        top: 0;
        background: linear-gradient(to bottom, #000000, transparent);
    }
    .psy-promo__right img {
        position: absolute;
        top: 0;
        height: 100%;
    }
}