﻿/* ===== إطار خفيف لطيف حول كل إعلان ===== */
.advertise-grid--portrait .advertise-item,
.advertise-grid--landscape .advertise-item {
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

    .advertise-grid--portrait .advertise-item:hover,
    .advertise-grid--landscape .advertise-item:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 28px rgba(0,0,0,.12);
        border-color: rgba(0,0,0,.14);
    }

/* ===== توسيط الإعلان في منتصف الصفحة عند وجود عنصر واحد فقط ===== */
/* :only-child يعني أن العنصر هو الوحيد داخل الشبكة */
.advertise-grid--portrait:has(.advertise-item:only-child),
.advertise-grid--landscape:has(.advertise-item:only-child) {
    display: flex;
    justify-content: center;
}

    .advertise-grid--landscape:has(.advertise-item:only-child) .advertise-item {
        width: 100%;
        max-width: 600px;
        height: 350px;
        max-height: 250px;
    }

    .advertise-grid--portrait:has(.advertise-item:only-child) .advertise-item {
        width: 100%;
        max-width: 300px;
        height: 350px;
        max-height: 550px;
    }