/* four_part_banner_display.css - بازنویسی شده با پالت Dark Navy (بدون گرادیانت) */
@import url('colorpalette.css');

/* =========================================================
   چهار بنر در یک سطر - Dark Navy Design
   ========================================================= */
.my-4 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
}

.four-part-banner-container {
    --banner-radius: var(--radius-lg, 14px);
    --banner-shadow-sm: var(--shadow-sm, 0 2px 8px rgba(0,0,0,0.20));
    --banner-shadow-hover: var(--shadow-md, 0 6px 18px rgba(0,0,0,0.25));
    --transition-smooth: var(--transition-normal, 250ms ease);
}

/* =========================================================
   کارت بنر
   ========================================================= */
.four-part-banner-item {
    position: relative;
    border-radius: var(--banner-radius);
    overflow: hidden;
    background-color: var(--bg-surface, #152640);
    box-shadow: var(--banner-shadow-sm);
    transition: box-shadow var(--transition-smooth), 
                border-color var(--transition-smooth),
                background-color var(--transition-smooth);
    height: 100%;
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
    padding: 0 !important;
}

/* حذف جابجایی (translateY) در هاور - فقط سایه و رنگ تغییر می‌کند */
.four-part-banner-item:hover {
    box-shadow: var(--banner-shadow-hover);
    border-color: var(--border-strong, rgba(255,255,255,0.30));
    background-color: var(--bg-surface-hover, #1D2E4A);
}

/* =========================================================
   لینک بنر
   ========================================================= */
.four-part-banner-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    position: relative;
    z-index: 2;
    overflow: hidden;
    padding: 10px;
}

.four-part-banner-link:hover {
    text-decoration: none;
}

/* =========================================================
   تصویر بنر - ارتفاع واقعی تصویر (بدون برش)
   ========================================================= */
.four-part-banner-img {
    width: 100%;
    height: auto;
    object-fit: contain;
    /* حذف transition transform برای جلوگیری از زوم */
    background-color: var(--bg-elevated, #1D2E4A);
    display: block;
    border-radius: 15px;
}

/* 
   حذف کامل افکت زوم در هاور:
   قاعده زیر حذف شده است
   .four-part-banner-item:hover .four-part-banner-img {
       transform: scale(1.06);
   }
*/

/* =========================================================
   پلاسهولدر (زمانی که تصویر وجود ندارد)
   ========================================================= */
.four-part-banner-placeholder {
    width: 100%;
    min-height: 220px;
    height: auto;
    background-color: var(--bg-elevated, #1D2E4A);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-muted, #8190A5);
    border: 2px dashed var(--border-subtle, rgba(255,255,255,0.06));
    border-radius: var(--banner-radius);
    transition: all var(--transition-smooth);
    padding: 1.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* افکت نقطه‌چین پویا روی پلاسهولدر */
.four-part-banner-placeholder::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background-image: radial-gradient(circle at 30% 40%, rgba(53, 125, 246, 0.04) 1px, transparent 1px),
                      radial-gradient(circle at 70% 60%, rgba(53, 125, 246, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0;
    transition: opacity var(--transition-smooth);
    pointer-events: none;
}

.four-part-banner-item:hover .four-part-banner-placeholder::before {
    opacity: 1;
}

.four-part-banner-item:hover .four-part-banner-placeholder {
    border-color: var(--blue, #357DF6);
    background-color: var(--blue-soft, #1A2A45);
}

.four-part-banner-placeholder i {
    font-size: 2.8rem;
    margin-bottom: 0.8rem;
    opacity: 0.35;
    color: var(--text-muted, #8190A5);
    transition: all var(--transition-smooth);
}

.four-part-banner-item:hover .four-part-banner-placeholder i {
    opacity: 0.8;
    color: var(--blue-light, #70A1FF);
    transform: scale(1.1) rotate(-4deg);
}

.four-part-banner-placeholder span {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-muted, #8190A5);
    background-color: var(--bg-surface, #152640);
    padding: 0.5rem 1.5rem;
    border-radius: var(--radius-full, 9999px);
    transition: all var(--transition-smooth);
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
}

.four-part-banner-item:hover .four-part-banner-placeholder span {
    background-color: var(--blue, #357DF6);
    color: var(--text-white, #FFFFFF);
    border-color: var(--blue, #357DF6);
    box-shadow: var(--shadow-blue, 0 6px 20px rgba(53,125,246,0.25));
}

/* =========================================================
   برچسب روی تصویر (بج)
   ========================================================= */
.four-part-banner-item .banner-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background-color: var(--red, #FF3333);
    color: var(--text-white, #FFFFFF);
    padding: 0.3rem 1rem;
    border-radius: var(--radius-full, 9999px);
    font-size: 0.7rem;
    font-weight: 600;
    z-index: 5;
    box-shadow: var(--shadow-red, 0 6px 20px rgba(255,51,51,0.20));
    opacity: 0;
    transform: translateY(-10px) scale(0.9);
    transition: all var(--transition-smooth);
    letter-spacing: 0.5px;
}

.four-part-banner-item:hover .banner-badge {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* =========================================================
   Overlay پایین تصویر
   ========================================================= */
.four-part-banner-item .banner-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem 1.5rem 1.5rem;
    background: linear-gradient(to top, var(--bg-overlay, rgba(7,15,26,0.75)), transparent);
    color: var(--text-white, #FFFFFF);
    z-index: 3;
    opacity: 0;
    transform: translateY(20px);
    transition: all var(--transition-smooth);
    pointer-events: none;
}

.four-part-banner-item:hover .banner-overlay {
    opacity: 1;
    transform: translateY(0);
}

.banner-overlay-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
    color: var(--text-white, #FFFFFF);
}

.banner-overlay-subtitle {
    font-size: 0.8rem;
    color: var(--text-secondary, #D7DFEB);
    opacity: 0.8;
}

/* =========================================================
   دکمه CTA داخل بنر
   ========================================================= */
.four-part-banner-item .banner-cta {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background-color: var(--bg-surface, #152640);
    color: var(--blue, #357DF6);
    padding: 0.5rem 1.5rem;
    border-radius: var(--radius-full, 9999px);
    font-weight: 600;
    font-size: 0.8rem;
    z-index: 5;
    opacity: 0;
    transition: all var(--transition-smooth);
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,0.20));
    text-decoration: none;
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    pointer-events: none;
}

.four-part-banner-item:hover .banner-cta {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.four-part-banner-item .banner-cta:hover {
    background-color: var(--blue, #357DF6);
    color: var(--text-white, #FFFFFF);
    border-color: var(--blue, #357DF6);
    box-shadow: var(--shadow-blue, 0 6px 20px rgba(53,125,246,0.25));
    text-decoration: none;
}

/* =========================================================
   رسپانسیو
   ========================================================= */

/* دسکتاپ بزرگ: 4 ستون - ارتفاع بر اساس تصویر واقعی */
@media (min-width: 992px) {
    .four-part-banner-container .row {
        --bs-gutter-x: 1.5rem;
    }

    /* در دسکتاپ هیچ ارتفاع ثابتی اعمال نمی‌شود
       ارتفاع از تصویر واقعی می‌آید */
    .four-part-banner-img {
        height: auto;
        max-height: none;
    }

    .four-part-banner-placeholder {
        min-height: 220px;
    }

    .four-part-banner-item {
        border-radius: var(--radius-xl, 18px);
    }
}

/* تبلت: 2 ستون - ارتفاع ثابت */
@media (max-width: 991.98px) and (min-width: 768px) {
    .four-part-banner-img,
    .four-part-banner-placeholder {
        height: 210px;
        min-height: 210px;
        object-fit: cover;
    }

    .four-part-banner-item {
        border-radius: var(--radius-lg, 14px);
    }

    .four-part-banner-placeholder i {
        font-size: 2.4rem;
    }

    .four-part-banner-container .row {
        --bs-gutter-y: 1rem;
    }
}

/* موبایل: 1 ستون - ارتفاع ثابت */
@media (max-width: 767.98px) {
    .four-part-banner-container .row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .four-part-banner-img,
    .four-part-banner-placeholder {
        height: 190px;
        min-height: 190px;
        object-fit: cover;
    }

    .four-part-banner-item {
        border-radius: var(--radius-lg, 14px);
        margin-bottom: 0.5rem;
    }

    .four-part-banner-placeholder i {
        font-size: 2rem;
    }

    /* مخفی کردن المان‌های اضافی در موبایل برای سادگی */
    .four-part-banner-item .banner-badge,
    .four-part-banner-item .banner-cta,
    .four-part-banner-item .banner-overlay {
        display: none;
    }

    .four-part-banner-container .row {
        --bs-gutter-y: 1rem;
    }
}

/* موبایل‌های بسیار کوچک */
@media (max-width: 375px) {
    .four-part-banner-img,
    .four-part-banner-placeholder {
        height: 160px;
        min-height: 160px;
    }

    .four-part-banner-placeholder i {
        font-size: 1.6rem;
    }

    .four-part-banner-placeholder span {
        font-size: 0.75rem;
        padding: 0.3rem 1rem;
    }
}

/* =========================================================
   حالت خالی (بدون بنر)
   ========================================================= */
.text-center.py-5 {
    background-color: var(--bg-surface, #152640);
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
    border-radius: var(--radius-xl, 18px);
    padding: 3rem 2rem !important;
    margin: 2rem 0;
}

.text-center.py-5 i {
    color: var(--text-muted, #8190A5);
    transition: all var(--transition-smooth);
    opacity: 0.3;
}

.text-center.py-5:hover i {
    color: var(--blue, #357DF6);
    transform: scale(1.1);
    opacity: 0.6;
}

.text-center.py-5 p {
    font-size: 1.1rem;
    color: var(--text-muted, #8190A5);
    margin-bottom: 0;
}

/* =========================================================
   انیمیشن ورود
   ========================================================= */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.four-part-banner-item {
    animation: fadeInUp 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    opacity: 0;
}

.four-part-banner-item:nth-child(1) { animation-delay: 0.05s; }
.four-part-banner-item:nth-child(2) { animation-delay: 0.12s; }
.four-part-banner-item:nth-child(3) { animation-delay: 0.19s; }
.four-part-banner-item:nth-child(4) { animation-delay: 0.26s; }

/* =========================================================
   حالت دارک مود (که در واقع همه‌چیز دارک است)
   ========================================================= */
@media (prefers-color-scheme: dark) {
    .four-part-banner-item {
        background-color: var(--bg-surface, #152640);
        border-color: var(--border-subtle, rgba(255,255,255,0.06));
    }

    .four-part-banner-placeholder {
        background-color: var(--bg-elevated, #1D2E4A);
        border-color: var(--border-subtle, rgba(255,255,255,0.06));
        color: var(--text-muted, #8190A5);
    }

    .four-part-banner-item:hover .four-part-banner-placeholder {
        background-color: var(--blue-soft, #1A2A45);
        border-color: var(--blue, #357DF6);
    }

    .four-part-banner-placeholder i,
    .four-part-banner-placeholder span {
        color: var(--text-secondary, #D7DFEB);
    }

    .four-part-banner-item:hover .four-part-banner-placeholder span {
        background-color: var(--blue, #357DF6);
        color: var(--text-white, #FFFFFF);
        border-color: var(--blue, #357DF6);
    }

    .four-part-banner-item .banner-cta {
        background-color: var(--bg-surface, #152640);
        color: var(--blue-light, #70A1FF);
        border-color: var(--border-subtle, rgba(255,255,255,0.06));
    }

    .four-part-banner-item .banner-cta:hover {
        background-color: var(--blue, #357DF6);
        color: var(--text-white, #FFFFFF);
        border-color: var(--blue, #357DF6);
    }

    .text-center.py-5 {
        background-color: var(--bg-surface, #152640);
        border-color: var(--border-subtle, rgba(255,255,255,0.06));
    }
}