/**
 * promo-banner.css
 * Block: acf/promo-banner (varianty grey / green), načítané len keď je blok na stránke
 *
 * Dekor (oblúk, tieň pod autom, stmavenie) = path data 1:1 z Figmy (block-grey.svg / block-green.svg),
 * viewBox 1200×483, preto data-URI SVG.
 * Fotka auta = štvorcový export z Figmy (1440×1440, priehľadné pozadie), pozícia v % podľa Figmy.
 */

.promo-banner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    min-height: 483px;
    border-radius: 30px;
    overflow: hidden;
    isolation: isolate;
    background: #edeff4;
    color: #262626;
}

.promo-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 483' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='o' x1='600' y1='0' x2='1002.3' y2='382.15' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-opacity='0'/%3E%3Cstop offset='1'/%3E%3C/linearGradient%3E%3ClinearGradient id='s' x1='1012.58' y1='352.726' x2='621.368' y2='371.629' gradientUnits='userSpaceOnUse'%3E%3Cstop/%3E%3Cstop offset='1' stop-opacity='.8'/%3E%3C/linearGradient%3E%3Cfilter id='b' x='-20%25' y='-50%25' width='140%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='14.6'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='1200' height='483' fill='url(%23o)' fill-opacity='.3'/%3E%3Cpath d='M477 493.322C1068.74 432.059 1131.82-13.3 1131.82-304H1336C1336-304 1300.62 407.133 886.262 664.198 663.787 802.22 477 860 477 860z' fill='%23262626'/%3E%3Cpath filter='url(%23b)' fill='url(%23s)' fill-opacity='.9' d='M653.64 359.35 850.125 295.14C850.951 294.87 851.762 294.674 852.62 294.541 938.821 281.241 1118.08 253.405 1155.58 246.904 1202.68 238.739 1305.4 248.664 1311.29 252.396 1315.82 255.267 1293.25 295.873 1280.05 318.124 1279.04 319.833 1277.71 321.322 1276.14 322.54L1184.96 393.28C1182.54 395.152 1180.72 397.676 1179.69 400.554L1178.2 404.752C1175.87 411.271 1169.63 415.556 1162.71 415.403 1146.51 415.046 1125.45 414.703 1120.46 415.077 1112.56 415.669 1038.32 417.521 1032.27 417.974 1026.22 418.427 866.123 435.522 852.064 435.184 841.034 434.919 737.523 417.408 684.214 408.181 682.157 407.825 680.226 407.075 678.459 405.963L650.085 388.098C638.616 380.877 640.758 363.56 653.64 359.35z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.promo-banner-content {
    position: relative;
    z-index: 2;
    padding: 44px 0 44px 56px;
}

.promo-banner-logo {
    display: block;
    width: auto;
    height: 81px;
    margin-bottom: 25px;
}

.promo-banner-title {
    margin-bottom: 20px;
    color: inherit;
}

.promo-banner-text {
    max-width: 480px;
    margin: 0 0 35px;
    font-weight: 400;
}

.promo-banner-media {
    position: absolute;
    inset: 0;
    margin: 0;
    pointer-events: none;
}

/* grey: Figma x=621.7 y=-147 w=707 */
.promo-banner-image {
    position: absolute;
    left: 51.8%;
    top: -30.4%;
    width: 58.9%;
    height: auto;
    max-width: none;
}

/* ===== green ===== */
.promo-banner.style-green {
    background: linear-gradient(130deg, #1fefa5 0%, #3dcb98 100%);
    color: #fff;
}

.promo-banner.style-green::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 483' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='-121.322' y1='354.411' x2='538.371' y2='368.329' gradientUnits='userSpaceOnUse'%3E%3Cstop/%3E%3Cstop offset='1' stop-opacity='.8'/%3E%3C/linearGradient%3E%3Cfilter id='b' x='-20%25' y='-50%25' width='140%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='14.6'/%3E%3C/filter%3E%3C/defs%3E%3Cpath filter='url(%23b)' fill='url(%23s)' fill-opacity='.9' d='M505.832 355.771 148.771 249.739C147.938 249.492 147.125 249.318 146.263 249.209 0.824 230.803-303.409 192-366.982 182.751-446.677 171.157-619.206 192.576-628.959 199.131-636.582 204.254-595.302 273.69-572.238 310.133-571.176 311.812-569.818 313.255-568.215 314.43L-407.169 432.495C-404.705 434.301-402.81 436.775-401.708 439.623L-394.974 457.018C-392.476 463.472-386.122 467.586-379.211 467.236-351.419 465.825-309.406 463.914-300.146 464.355-286.801 464.99-161.696 464.709-151.492 465.195-141.288 465.681 129.116 487.137 152.776 485.925 171.487 484.965 347.633 450.194 436.33 432.335 438.377 431.923 440.263 431.126 441.999 429.966L510.167 384.412C521.435 376.882 518.824 359.629 505.832 355.771z'/%3E%3C/svg%3E");
}

/* stmavenie spodku NAD fotkou (Figma: y=108–483, čierna 0 → 30 %) */
.promo-banner.style-green .promo-banner-media::after {
    content: '';
    position: absolute;
    inset: 22.4% 0 0;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .3));
}

.promo-banner.style-green .promo-banner-content {
    grid-column: 2;
    padding: 44px 56px 44px 0;
}

/* green: Figma x=-376.6 y=-267.6 w=932.2 */
.promo-banner.style-green .promo-banner-image {
    left: -31.4%;
    top: -55.4%;
    width: 77.7%;
}

/* green: Figma x=47 y=306 h=134 */
.promo-banner.style-green .promo-banner-logo {
    position: absolute;
    z-index: 1;
    left: 3.9%;
    bottom: 8.9%;
    height: 134px;
    margin: 0;
}

@media (max-width: 991px) {
    .promo-banner {
        grid-template-columns: 1fr;
        align-items: start;
        min-height: 0;
    }

    .promo-banner::before {
        display: none;
    }

    .promo-banner-content,
    .promo-banner.style-green .promo-banner-content {
        grid-column: 1;
        padding: 30px 25px 5px;
    }

    .promo-banner-media {
        position: relative;
        inset: auto;
        aspect-ratio: 16 / 9;
        overflow: hidden;
    }

    /* štvorcový export auta -> vystrihnúť len pás s autom */
    .promo-banner-image,
    .promo-banner.style-green .promo-banner-image {
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 55%;
    }

    .promo-banner.style-green .promo-banner-logo {
        height: 64px;
        left: 15px;
        bottom: 12px;
    }
}

/* Mobil podľa Figmy (390×544): grey = Frame 11, green = Frame 13. Hodnoty v % šírky karty. */
@media (max-width: 767px) {
    .promo-banner {
        display: flex;
        flex-direction: column;
    }

    .promo-banner-content,
    .promo-banner.style-green .promo-banner-content {
        padding: 30px 50px 0 30px;
    }

    .promo-banner .promo-banner-logo {
        height: 50px;
        margin-bottom: 12px;
    }

    .promo-banner .promo-banner-title {
        font-size: 25px;
        line-height: 1.28;
        margin-bottom: 15px;
    }

    .promo-banner .promo-banner-text {
        font-size: 14px;
        line-height: 1.5;
        margin-bottom: 25px;
    }

    /* fotka v toku pod textom, presahuje cez okraje karty */
    .promo-banner-media {
        position: static;
        aspect-ratio: auto;
        overflow: visible;
    }

    .promo-banner-image,
    .promo-banner.style-green .promo-banner-image {
        position: relative;
        left: auto;
        top: auto;
        height: auto;
        object-fit: fill;
    }

    /* grey: pozadie tmavne smerom dole + oblúk za autom (Frame 11).
       Štvorec šírky karty pri spodku, aby kruh vyšiel v % (karta má premenlivú výšku). */
    .promo-banner.style-grey {
        background: linear-gradient(to bottom, #eaedf2 40%, #b4b7ba);
    }

    .promo-banner.style-grey::before {
        display: block;
        top: auto;
        aspect-ratio: 1;
        background: radial-gradient(142.9% 142.9% at -7.7% -7.2%,
            transparent 75.2%, #262626 75.4%, #262626 99.8%, transparent 100%);
    }

    .promo-banner.style-grey .promo-banner-image {
        width: 89.7%;
        margin: -22% 0 -11.5% 16.4%;
    }

    /* green: auto hore cez horný a ľavý okraj, logo na aute (Frame 13) */
    .promo-banner.style-green .promo-banner-media {
        display: contents;
    }

    .promo-banner.style-green .promo-banner-image {
        order: -1;
        width: 127%;
        margin: -36% 0 -34% -37.5%;
        filter: drop-shadow(0 18px 14px rgba(0, 0, 0, .35));
    }

    .promo-banner.style-green .promo-banner-logo {
        top: 30px;
        bottom: auto;
        left: 30px;
        height: 72px;
    }

    .promo-banner.style-green .promo-banner-content {
        padding-bottom: 37px;
    }
}