/* ================================================
   IMAGE TEXT OVERLAY — قراءة احترافية فوق أي صورة
   v2.2.0 — يُحمّل بعد style.css ليتجاوز قواعد اللون الأسود
   ================================================ */

/* --- Scoped reset: لا تطبّق فرض اللون الأسود داخل هذه الحاويات --- */
.img-text-hero,
.img-text-hero *,
.thesis-discussion-hero,
.thesis-discussion-hero *,
.hero-over-image,
.hero-over-image *,
.program-detail-hero,
.program-detail-hero *,
.text-on-dark-surface,
.text-on-dark-surface *,
.on-image-readable,
.on-image-readable *,
.premium-card .card-img,
.premium-card .card-img *,
.activity-card .card-img,
.activity-card .card-img *,
.program-card-image,
.program-card-image * {
    border-color: transparent !important;
}

/* ================================================
   UNIVERSAL: أي بطاقة/صورة + نص فوقها
   (activity, thesis, programs, premium cards)
   ================================================ */
.on-image-readable,
.card-img,
.activity-card .card-img,
.premium-card .card-img,
.img-placeholder:has(> img) {
    position: relative;
    isolation: isolate;
}

/* Scrim تلقائي — CSS + JS fallback class */
.on-image-readable::after,
.card-img::after,
.activity-card .card-img::after,
.premium-card .card-img::after,
.img-placeholder:has(> img)::after,
.on-image-scrim {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg,
            rgba(15, 23, 42, 0.2) 0%,
            rgba(15, 23, 42, 0.08) 40%,
            rgba(15, 23, 42, 0.5) 75%,
            rgba(15, 23, 42, 0.82) 100%
        ),
        linear-gradient(90deg, rgba(15, 23, 42, 0.35) 0%, transparent 55%);
}

.on-image-scrim {
    content: none;
}

/* شارات وتواريخ فوق الصور — أبيض دائماً */
.on-image-label,
.card-date,
.activity-type-badge,
.program-badge-degree,
.card-img .card-date,
.card-img .activity-type-badge,
.activity-card .card-date,
.activity-card .activity-type-badge,
.premium-card .card-date,
.premium-card .program-tag,
.program-card-image .program-badge-degree {
    z-index: 2 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75), 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
}

.card-date,
.activity-card .card-date,
.premium-card .card-date {
    background: linear-gradient(135deg, #6C4CF1, #8B5CF6) !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 12px rgba(108, 76, 241, 0.4);
}

.activity-type-badge,
.activity-card .activity-type-badge {
    background: rgba(15, 23, 42, 0.88) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-weight: 700 !important;
}

.program-badge-degree,
.program-card-image .program-badge-degree {
    background: rgba(15, 23, 42, 0.88) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.program-card-image::after {
    z-index: 1;
    background:
        linear-gradient(180deg,
            rgba(15, 23, 42, 0.15) 0%,
            rgba(15, 23, 42, 0.45) 60%,
            rgba(15, 23, 42, 0.85) 100%
        ) !important;
}

/* أيقونات داخل الشارات */
.card-date [data-lucide],
.activity-type-badge [data-lucide],
.program-badge-degree [data-lucide],
.on-image-readable .on-image-label [data-lucide] {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* legacy: details-hero-img إن وُجد */
.details-modal-content .img-placeholder {
    position: relative;
    min-height: 200px;
}

.details-modal-content .img-placeholder::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, transparent 30%, rgba(15, 23, 42, 0.75) 100%);
    pointer-events: none;
}

.details-modal-content .details-hero-img {
    position: relative;
    z-index: 0;
}

/* ================================================
   COMPONENT: img-text-hero
   ================================================ */
.img-text-hero,
.thesis-discussion-hero {
    position: relative;
    width: 100%;
    min-height: 280px;
    height: clamp(220px, 38vw, 380px);
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    isolation: isolate;
    background: #0f172a;
}

.img-text-hero--modal,
.thesis-discussion-hero {
    height: clamp(240px, 42vw, 360px);
    min-height: 240px;
}

.img-text-hero__bg,
.thesis-discussion-hero__bg,
#td-modal-banner {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    filter: brightness(0.92) saturate(1.05);
}

/* طبقة تظليل متعددة الطبقات — تضمن contrast على أي صورة */
.img-text-hero__scrim,
.thesis-discussion-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg,
            rgba(15, 23, 42, 0.35) 0%,
            rgba(15, 23, 42, 0.15) 35%,
            rgba(15, 23, 42, 0.55) 65%,
            rgba(15, 23, 42, 0.92) 100%
        ),
        linear-gradient(90deg,
            rgba(15, 23, 42, 0.45) 0%,
            transparent 50%
        );
}

/* زجاج خلف النص — للعناوين الطويلة */
.img-text-hero__content,
.thesis-discussion-hero__content {
    position: relative;
    z-index: 3;
    width: 100%;
    padding: 24px 28px 28px;
    direction: rtl;
    text-align: right;
}

.img-text-hero__glass,
.thesis-discussion-hero__glass {
    background: rgba(15, 23, 42, 0.42);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    padding: 18px 20px;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* --- Typography on image --- */
.img-text-hero__badge,
.thesis-discussion-hero__badge,
#td-modal-badge {
    display: inline-block !important;
    margin-bottom: 10px !important;
    padding: 5px 14px !important;
    border-radius: 999px !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em;
    background: linear-gradient(135deg, #6C4CF1, #8B5CF6) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(108, 76, 241, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

.img-text-hero__title,
.thesis-discussion-hero__title,
#td-modal-title {
    margin: 0 0 6px 0 !important;
    font-size: clamp(1.25rem, 4vw, 1.85rem) !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    color: #ffffff !important;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.8),
        0 4px 16px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(0, 0, 0, 0.3) !important;
}

.img-text-hero__subtitle,
.thesis-discussion-hero__subtitle,
#td-modal-subtitle {
    margin: 0 !important;
    font-size: clamp(0.88rem, 2.5vw, 1.05rem) !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    color: rgba(226, 232, 240, 0.95) !important;
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.85),
        0 2px 10px rgba(0, 0, 0, 0.45) !important;
}

/* زر إغلاق فوق الصورة */
.img-text-hero__close,
.thesis-discussion-hero__close {
    position: absolute !important;
    top: 16px !important;
    left: 16px !important;
    right: auto !important;
    z-index: 10 !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: rgba(15, 23, 42, 0.55) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    font-size: 1.4rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: background 0.2s ease, transform 0.2s ease;
}

.img-text-hero__close:hover,
.thesis-discussion-hero__close:hover {
    background: rgba(15, 23, 42, 0.75) !important;
    transform: scale(1.05);
}

/* ================================================
   React / Tailwind hero pages (ProgramDetails)
   ================================================ */
.hero-over-image h1,
.hero-over-image h2,
.hero-over-image h3,
.hero-over-image p,
.hero-over-image span,
.hero-over-image div,
.hero-over-image label,
.hero-over-image strong,
.hero-over-image a:not(.btn-primary):not(.btn-secondary) {
    /* Tailwind text-white/text-slate-300 override */
}

.hero-over-image .text-white,
.hero-over-image h1.text-white,
.hero-over-image h2.text-slate-300,
.hero-over-image .text-slate-300,
.hero-over-image .text-white\/90,
.hero-over-image [class*="text-white"] {
    color: #ffffff !important;
}

.hero-over-image .text-slate-300,
.hero-over-image h2.text-slate-300 {
    color: #cbd5e1 !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

.hero-over-image h1 {
    text-shadow:
        0 2px 6px rgba(0, 0, 0, 0.75),
        0 4px 20px rgba(0, 0, 0, 0.45) !important;
}

.hero-over-image .bg-blue-600,
.hero-over-image .bg-white\/20 {
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.hero-over-image [data-lucide] {
    stroke: currentColor !important;
}

/* ================================================
   CTA cards on dark / gradient backgrounds
   ================================================ */
.text-on-dark-surface h1,
.text-on-dark-surface h2,
.text-on-dark-surface h3,
.text-on-dark-surface h4,
.text-on-dark-surface p,
.text-on-dark-surface span,
.text-on-dark-surface a,
.text-on-dark-surface label {
    color: #ffffff !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.text-on-dark-surface .text-blue-100,
.text-on-dark-surface p.text-blue-100 {
    color: #dbeafe !important;
}

.text-on-dark-surface [data-lucide] {
    color: inherit !important;
    stroke: currentColor !important;
}

/* ================================================
   Premium cards — badges over thumbnail images
   ================================================ */
.premium-card .card-img {
    position: relative;
}

.premium-card .card-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(15, 23, 42, 0.65) 100%);
    pointer-events: none;
    z-index: 1;
}

.premium-card .card-date,
.premium-card .program-tag {
    z-index: 2 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.premium-card .program-tag {
    background: rgba(15, 23, 42, 0.82) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.premium-card .card-date {
    background: linear-gradient(135deg, #6C4CF1, #8B5CF6) !important;
    color: #ffffff !important;
}

.premium-card .program-tag i,
.premium-card .program-tag [data-lucide] {
    color: #fbbf24 !important;
    stroke: #fbbf24 !important;
}

/* ================================================
   Details modal — hero integrated layout
   ================================================ */
.details-modal-content .img-text-hero {
    border-radius: 0;
}

.details-modal-content .details-body {
    background: #ffffff !important;
}

/* ================================================
   Mobile adjustments
   ================================================ */
@media (max-width: 768px) {
    .img-text-hero__content,
    .thesis-discussion-hero__content {
        padding: 16px 16px 20px;
    }

    .img-text-hero__glass,
    .thesis-discussion-hero__glass {
        padding: 14px 16px;
        border-radius: 14px;
    }

    .img-text-hero__close,
    .thesis-discussion-hero__close {
        top: 12px !important;
        left: 12px !important;
        width: 38px !important;
        height: 38px !important;
    }
}

@media (max-width: 480px) {
    .img-text-hero,
    .thesis-discussion-hero {
        min-height: 220px;
        height: clamp(220px, 55vw, 300px);
    }
}