.prp-demo-ad {
    width: 100%;
    margin: 1.75rem 0;
    border-radius: 20px;
    background: #163d34;
    box-shadow: 0 16px 40px rgba(17, 48, 40, .18);
    overflow: hidden;
}

.prp-demo-ad > a {
    position: relative;
    min-height: 220px;
    display: flex;
    align-items: center;
    color: #fff;
    text-decoration: none;
    isolation: isolate;
    overflow: hidden;
}

.prp-demo-ad-image,
.prp-demo-ad-shade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.prp-demo-ad-image {
    z-index: -2;
    object-fit: cover;
    object-position: center 56%;
    transition: transform .5s ease;
}

.prp-demo-ad-shade {
    z-index: -1;
    background: linear-gradient(90deg, rgba(7, 29, 25, .94) 0%, rgba(10, 40, 34, .8) 38%, rgba(10, 35, 30, .24) 72%, rgba(10, 35, 30, .08) 100%);
}

.prp-demo-ad > a:hover .prp-demo-ad-image { transform: scale(1.035); }

.prp-demo-ad-label {
    position: absolute;
    top: .75rem;
    right: .85rem;
    padding: .25rem .55rem;
    border-radius: 999px;
    background: rgba(8, 27, 23, .62);
    color: rgba(255, 255, 255, .86);
    font-size: .62rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    backdrop-filter: blur(5px);
}

.prp-demo-ad-content {
    width: min(560px, 62%);
    padding: 2.2rem 2.4rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.prp-demo-ad-copy { display: flex; flex-direction: column; }
.prp-demo-ad-copy small { margin-bottom: .55rem; color: #f3c66d; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.prp-demo-ad-copy strong { color: #fff; font-size: clamp(1.7rem, 3.2vw, 2.8rem); line-height: .98; letter-spacing: -.035em; text-shadow: 0 2px 18px rgba(0, 0, 0, .25); }
.prp-demo-ad-action { margin-top: 1.15rem; padding: .68rem .9rem; border-radius: 9px; background: #ef7c36; color: #fff; font-size: .82rem; font-weight: 800; box-shadow: 0 8px 22px rgba(0, 0, 0, .2); }

.prp-demo-ad--leaderboard > a { min-height: 180px; }
.prp-demo-ad--leaderboard .prp-demo-ad-content { width: min(610px, 58%); }
.prp-demo-ad--leaderboard .prp-demo-ad-copy strong { font-size: clamp(1.65rem, 2.7vw, 2.5rem); }

.prp-demo-ad--inline > a { min-height: 270px; }
.prp-demo-ad--inline .prp-demo-ad-image { object-position: center 54%; }

.prp-demo-ad--compact > a { min-height: 150px; }
.prp-demo-ad--compact .prp-demo-ad-content { padding-top: 1.35rem; padding-bottom: 1.35rem; }
.prp-demo-ad--compact .prp-demo-ad-copy strong { font-size: clamp(1.4rem, 2.5vw, 2.1rem); }
.prp-demo-ad--compact .prp-demo-ad-action { margin-top: .8rem; }

.prp-demo-ad--sidebar { margin: 0; }
.prp-demo-ad--sidebar > a { min-height: 390px; align-items: flex-end; }
.prp-demo-ad--sidebar .prp-demo-ad-image { object-position: 64% center; }
.prp-demo-ad--sidebar .prp-demo-ad-shade { background: linear-gradient(0deg, rgba(6, 28, 23, .96) 0%, rgba(7, 34, 28, .74) 45%, rgba(7, 30, 25, .08) 82%); }
.prp-demo-ad--sidebar .prp-demo-ad-content { width: 100%; padding: 2rem 1.5rem; }
.prp-demo-ad--sidebar .prp-demo-ad-copy strong { font-size: 2.15rem; }
.prp-demo-ad--sidebar .prp-demo-ad-action { font-size: .74rem; }

.prp-demo-ad--card { max-width: 520px; margin: 1.75rem auto; }
.prp-demo-ad--card > a { min-height: 390px; align-items: flex-end; }
.prp-demo-ad--card .prp-demo-ad-image { object-position: center; }
.prp-demo-ad--card .prp-demo-ad-shade { background: linear-gradient(0deg, rgba(6, 28, 23, .97) 0%, rgba(7, 34, 28, .68) 42%, rgba(7, 30, 25, .05) 78%); }
.prp-demo-ad--card .prp-demo-ad-content { width: 100%; padding: 2rem 1.6rem; }
.prp-demo-ad--card .prp-demo-ad-copy strong { font-size: 2.2rem; }

@media (max-width: 767.98px) {
    .prp-demo-ad > a { min-height: 270px; align-items: flex-end; }
    .prp-demo-ad-image { object-position: 62% center; }
    .prp-demo-ad-shade { background: linear-gradient(0deg, rgba(6, 28, 23, .96) 0%, rgba(7, 34, 28, .7) 55%, rgba(7, 30, 25, .08) 100%); }
    .prp-demo-ad-content { width: 100%; padding: 3rem 1.3rem 1.4rem; }
    .prp-demo-ad-copy strong { font-size: 2rem; }
    .prp-demo-ad-action { font-size: .72rem; }
}

@media (prefers-reduced-motion: reduce) {
    .prp-demo-ad-image { transition: none; }
}
