/*
 * باکس تبلیغاتی انتهای مقاله (ArticleCta)
 * هم در صفحه‌ی مقاله‌ی سایت و هم در پیش‌نمایش فرم ادمین استفاده می‌شود،
 * برای همین به کلاس‌های Tailwind سایت وابسته نیست.
 * قالب: resources/views/frontend/blog/partials/article-cta.blade.php
 */
.article-cta {
    --cta-red: #df0a0a;
    --cta-navy: #00008b;

    position: relative;
    overflow: hidden;
    margin-top: 2.5rem;
    padding: 2rem;
    border-radius: 1.5rem;
    background: linear-gradient(to left, var(--cta-red) 0%, var(--cta-red) 50%, var(--cta-navy) 100%);
    color: #fff;
    box-shadow: 0 25px 50px -12px rgba(223, 10, 10, .25);
    text-align: center;
}

.article-cta [hidden] {
    display: none !important;
}

.article-cta__glow {
    position: absolute;
    width: 16rem;
    height: 16rem;
    border-radius: 9999px;
    filter: blur(64px);
    pointer-events: none;
}

.article-cta__glow--a {
    top: -6rem;
    left: -6rem;
    background: rgba(255, 255, 255, .1);
}

.article-cta__glow--b {
    bottom: -6rem;
    right: -6rem;
    background: rgba(0, 0, 0, .1);
}

.article-cta__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.article-cta__text {
    flex: 1 1 auto;
    min-width: 0;
}

.article-cta__badge {
    display: inline-block;
    margin-bottom: .75rem;
    padding: .25rem .75rem;
    border-radius: 9999px;
    /* پس‌زمینه‌ی تیره‌تر از قرمز تا متن ۱۱ پیکسلی سفید کنتراست کافی داشته باشد */
    background: rgba(0, 0, 0, .18);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
    font-size: 11px;
    font-weight: 900;
    line-height: 1.6;
}

.article-cta__title {
    margin: 0 0 .5rem;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1.6;
}

.article-cta__desc {
    margin: 0;
    color: #fff;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.75rem;
}

.article-cta__actions {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    flex-shrink: 0;
    width: 100%;
}

.article-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .875rem 1.75rem;
    border-radius: 1rem;
    font-size: .875rem;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.article-cta__btn:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

.article-cta__btn--primary {
    background: #fff;
    color: var(--cta-red);
    font-weight: 900;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
}

.article-cta__btn--primary:hover {
    color: var(--cta-red);
    transform: translateY(-4px);
}

.article-cta__btn--secondary {
    border: 1px solid rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .15);
    color: #fff;
    font-weight: 700;
    backdrop-filter: blur(8px);
}

.article-cta__btn--secondary:hover {
    color: #fff;
    background: rgba(255, 255, 255, .25);
}

@media (min-width: 640px) {
    .article-cta__actions {
        flex-direction: row;
        justify-content: center;
        width: auto;
    }
}

@media (min-width: 768px) {
    .article-cta {
        padding: 2.5rem;
        text-align: right;
    }

    .article-cta__inner {
        flex-direction: row;
        gap: 2.5rem;
    }

    .article-cta__title {
        font-size: 1.5rem;
    }

    .article-cta__desc {
        font-size: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .article-cta__btn {
        transition: none;
    }

    .article-cta__btn--primary:hover {
        transform: none;
    }
}