/* AD MAX Képek widget — parallax képrács / átfedő páros a Rolunk-sablon stílusában. */
/* — Motor: reveal kezdőállapot (html.am-anim = fut a JS) + parallax rétegpromóció — */

.am-par {
    will-change: transform;
}

/* — Közös képdoboz (18px kerekítés, lágy nagy árnyék, cover kitöltés) — */
.am-parx-item {
    height: 100%;
}

.am-parx-par {
    height: 100%;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.28);
}

.am-parx-par img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* — Rács (montázs) — */
.am-parx-grid {
    display: grid;
    grid-template-columns: var(--tpl, repeat(3, 1fr));
    gap: 16px;
    height: var(--h, 268px);
}

/* — Átfedő páros (történet) — */
.am-parx-story {
    position: relative;
    height: var(--sh, 482px);
}

.am-parx-story .am-parx-item {
    z-index: 1;
}

.am-parx-story::before {
    content: "";
    position: absolute;
    inset: 21px;
    border-radius: 23px;
    background: linear-gradient(150deg, #E3F3EC, #A7EBDD);
    opacity: 0.45;
}

/* „Színes" háttér: telített zsálya→teál panel + menta karika a képek mögött. */
.am-parx-story--szines::before {
    inset: 0;
    background: linear-gradient(150deg, #5FBDA8, #2C8B74);
    opacity: 1;
    box-shadow: 0 36px 80px rgba(44, 139, 116, .22);
}

.am-parx-story--szines::after {
    content: "";
    position: absolute;
    top: -7%;
    right: 6%;
    width: 116px;
    height: 116px;
    border-radius: 50%;
    background: #A7EBDD;
    opacity: .5;
}

.am-parx-story .am-parx-item {
    position: absolute;
}

.am-parx-story .am-parx-item:nth-child(1) {
    top: 0;
    left: -27px;
    width: 400px;
    height: 286px;
}

.am-parx-story .am-parx-item:nth-child(2) {
    bottom: 0;
    right: -27px;
    width: 368px;
    height: 268px;
}

@media (max-width: 767px) {
    .am-parx-item--csak-desktop {
        display: none;
    }

    .am-parx-grid {
        grid-template-columns: 1fr;
        height: auto;
        grid-auto-rows: 200px;
    }

    .am-parx-story {
        height: auto;
    }

    .am-parx-story::before,
    .am-parx-story--szines::before,
    .am-parx-story--szines::after {
        display: none;
    }

    .am-parx-story .am-parx-item {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        width: 100%;
        height: 220px;
        margin-bottom: 16px;
    }
}