/* =============================================================
   شريط التعليق فوق صور المنشورات (overlay ثنائي اللغة)
   التنسيق العام يأتي من متغيرات CSS (:root) المحقونة من الإعدادات.
   حجم الخط بوحدة cqw ليتدرّج مع حجم الصورة (container query).
   ============================================================= */

/* الحاوية التي تحوي الصورة + الشريط تصبح حاوية استعلام */
.cap-host {
    container-type: inline-size;
    position: relative;
}

.cap-strip {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: var(--cap-w, 100%);
    min-height: var(--cap-h, 13%);
    background: var(--cap-bg, #2c3e50);
    color: var(--cap-color, #ffffff);
    /* احتياطي بالبكسل ثم cqw المتدرّج */
    font-size: 18px;
    font-size: var(--cap-fz, 3.4cqw);
    font-weight: 700;
    line-height: 1.35;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.45em 1em;
    box-sizing: border-box;
    z-index: 3;
    pointer-events: none;
    word-break: break-word;
}