/* ── Super Ads — Card 3 (Modern/Premium) — Front-end styles ── */

@keyframes sa-c3-pulse {
    0%, 100% { box-shadow: 0 4px 16px var(--sa-c3-pulse, rgba(59,130,246,0.45)); }
    50%       { box-shadow: 0 4px 28px var(--sa-c3-pulse, rgba(59,130,246,0.7)),
                            0 0 0 5px   var(--sa-c3-pulse, rgba(59,130,246,0.12)); }
}

/* ── Card wrapper (link) ── */
.sa-card3 {
    display:         flex;
    align-items:     stretch;
    text-decoration: none !important;
    color:           inherit;
    border-radius:   20px;
    overflow:        hidden;
    position:        relative;
    background:
        linear-gradient(var(--sa-c3-bg, #fff), var(--sa-c3-bg, #fff)) padding-box,
        linear-gradient(135deg, var(--sa-c3-from, #3b82f6), var(--sa-c3-to, #ec4899)) border-box;
    border:          2.5px solid transparent;
    box-shadow:      0 4px 24px rgba(0,0,0,0.09), 0 1px 6px rgba(0,0,0,0.05);
    transition:      box-shadow 0.28s ease, transform 0.24s ease;
    cursor:          pointer;
}

.sa-card3:hover {
    box-shadow: 0 12px 40px rgba(0,0,0,0.16), 0 2px 8px rgba(0,0,0,0.07);
    transform:  translateY(-3px);
}

.sa-card3:active {
    transform: translateY(0) scale(0.99);
}

/* ── Image column ── */
.sa-card3__img-wrap {
    flex-shrink: 0;
    width:       195px;
    min-height:  155px;
    overflow:    hidden;
    position:    relative;
    background:  #f1f5f9;
}

.sa-card3__img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform 0.35s ease;
}

.sa-card3:hover .sa-card3__img {
    transform: scale(1.04);
}

.sa-card3__img-placeholder {
    width:           100%;
    height:          100%;
    min-height:      155px;
    background:      #f1f5f9;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       42px;
    color:           #cbd5e1;
}

/* ── Text body ── */
.sa-card3__body {
    flex:           1;
    padding:        24px 30px;
    display:        flex;
    flex-direction: column;
    justify-content: center;
    gap:            8px;
    min-width:      0;
    background:     var(--sa-c3-bg, #fff);
}

.sa-card3__title {
    font-size:      20px;
    font-weight:    800;
    color:          #0f172a;
    margin:         0 0 4px;
    padding:        0;
    line-height:    1.22;
    letter-spacing: -0.3px;
}

.sa-card3__subtitle {
    font-size:   14px;
    color:       #64748b;
    margin:      0;
    line-height: 1.6;
}

/* ── Button ── */
.sa-card3__btn-wrap {
    margin-top: 14px;
    align-self: center;
}

.sa-card3__btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    padding:         12px 34px;
    font-size:       13px;
    font-weight:     700;
    letter-spacing:  0.8px;
    border-radius:   50px;
    text-transform:  uppercase;
    cursor:          pointer;
    line-height:     1;
    border:          none;
    background:      linear-gradient(135deg, var(--sa-c3-from, #3b82f6), var(--sa-c3-to, #ec4899));
    animation:       sa-c3-pulse 2s ease-in-out infinite;
    transition:      filter 0.22s, transform 0.18s;
    user-select:     none;
    white-space:     nowrap;
}

.sa-card3__btn::after {
    content:    ' →';
    display:    inline-block;
    margin-left: 6px;
    transition: transform 0.22s ease;
}

.sa-card3:hover .sa-card3__btn {
    filter:    brightness(1.08);
    transform: scale(1.04);
}

.sa-card3:hover .sa-card3__btn::after {
    transform: translateX(4px);
}

/* ── Responsive: Mobile ── */
@media (max-width: 600px) {
    .sa-card3 {
        flex-direction: column;
    }

    .sa-card3__img-wrap {
        width:        100%;
        height:       auto;
        min-height:   unset;
        aspect-ratio: 1 / 1;
    }

    .sa-card3__img {
        width:      100%;
        height:     100%;
        object-fit: cover;
    }

    .sa-card3__img-placeholder {
        width:        100%;
        height:       auto;
        min-height:   unset;
        aspect-ratio: 1 / 1;
    }

    .sa-card3__body {
        padding:     22px 22px 26px;
        align-items: center;
        text-align:  center;
    }

    .sa-card3__title {
        font-size: 22px;
    }

    .sa-card3__subtitle {
        font-size: 14px;
    }

    .sa-card3__btn-wrap {
        margin-top: 16px;
    }
}