/**
 * OIC Card Engine v3.0 — البنية الهيكلية
 * ═══════════════════════════════════════════
 * هذا الملف للهيكل فقط — لا ألوان، لا خلفيات، لا أنماط.
 * الألوان والأنماط في card-theme.css
 *
 *  1. المتغيرات  2. الهيكل    3. الاتجاهات
 *  4. المقاسات   5. العناصر   6. أشكال الصورة
 *  7. الفجوات    8. الشبكة    9. التجاوب
 * ═══════════════════════════════════════════ */

/* ── 1. CSS Variables ── */
.oic-card {
    --card-img-h: 170px;
    --card-title-fs: 1rem;
    --card-text-fs: 0.85rem;
    --card-meta-fs: 0.82rem;
    --card-cat-fs: 0.78rem;
    --card-pad: 10px;
    --card-gap: 6px;
    --card-radius: var(--radius, 12px);
    --card-shadow: var(--shadow, none);
    --card-transition: all 0.35s cubic-bezier(0.25,0.46,0.45,0.94);
}

/* ── 2. Card Base ── */
.oic-card{position:relative;display:flex;flex-direction:column;border-radius:var(--card-radius);overflow:hidden;box-shadow:var(--card-shadow);transition:var(--card-transition)}
.oic-card__media{position:relative;overflow:hidden;flex-shrink:0}
.oic-card__media img{width:100%;height:var(--card-img-h);object-fit:cover;display:block;transition:var(--card-transition)}
.oic-card__body{display:flex;flex-direction:column;gap:var(--card-gap);padding:var(--card-pad);flex:1;justify-content:flex-start}

/* ── 3. Direction ── */

/* عمودي */
.card--v{flex-direction:column}

/* أفقي */
.card--h{flex-direction:row}
.card--h .oic-card__media{width:40%;min-width:140px;flex-shrink:0}
.card--h .oic-card__media img{height:100%;min-height:180px;object-fit:cover}
.card--h .oic-card__body{justify-content:center}
.card--h .oic-card__cat{position:static;order:1;margin-bottom:0}
.card--h .oic-card__meta{position:static;order:2;backdrop-filter:none;padding:0;margin:0}

/* أفقي معكوس */
.card--h-rev{flex-direction:row-reverse}
.card--h-rev .oic-card__media{width:40%;min-width:140px;flex-shrink:0}
.card--h-rev .oic-card__media img{height:100%;min-height:180px;object-fit:cover}
.card--h-rev .oic-card__cat{position:static;order:1;margin-bottom:0}
.card--h-rev .oic-card__meta{position:static;order:2;backdrop-filter:none;padding:0;margin:0}

/* تراكبي */
.card--o{flex-direction:column}
.card--o .oic-card__media{position:absolute;inset:0}
.card--o .oic-card__media>a>img,.card--o .oic-card__media>a>picture img{height:100%;position:absolute;inset:0;width:100%;object-fit:cover}
.card--o .oic-card__body{position:relative;z-index:2;justify-content:flex-end;min-height:var(--card-img-h);display:flex;flex-direction:column}
.card--o::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.85) 0%,rgba(0,0,0,0.3) 40%,transparent 70%);z-index:1;pointer-events:none}

/* ترتيب عناصر التراكبي */
.card--o .oic-card__cat{order:1}
.card--o .oic-card__meta{order:2;margin-bottom:4px}
.card--o .oic-card__title{order:3}
.card--o .oic-card__excerpt{order:4}
.card--o .oic-card__tags{order:5}
.card--o .oic-card__btn{order:6}

/* حماية النص التراكبي */
.card--o .oic-card__title{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:1rem}
.card--o .oic-card__excerpt{-webkit-line-clamp:2}
.card--o.card--hero .oic-card__title{font-size:1.8rem}
.card--o.card--hero .oic-card__excerpt{-webkit-line-clamp:4;font-size:1rem}

/* ── 4. Sizes ── */
.card--hero{--card-img-h:320px;--card-title-fs:1.6rem;--card-text-fs:0.9rem;--card-meta-fs:0.78rem;--card-cat-fs:0.82rem;--card-pad:14px;--card-gap:8px}
.card--lg{--card-img-h:220px;--card-title-fs:1.15rem;--card-text-fs:0.85rem;--card-meta-fs:0.75rem;--card-cat-fs:0.78rem;--card-pad:12px;--card-gap:6px}
.card--md{--card-img-h:170px;--card-title-fs:1rem;--card-text-fs:0.82rem;--card-meta-fs:0.72rem;--card-cat-fs:0.75rem;--card-pad:10px;--card-gap:5px}
.card--sm{--card-img-h:140px;--card-title-fs:0.92rem;--card-text-fs:0.78rem;--card-meta-fs:0.68rem;--card-cat-fs:0.72rem;--card-pad:8px;--card-gap:4px}
.card--xs{--card-img-h:80px;--card-title-fs:0.9rem;--card-text-fs:0.75rem;--card-meta-fs:0.7rem;--card-cat-fs:0.7rem;--card-pad:6px;--card-gap:3px}
.card--xs.card--h .oic-card__media{width:100px;min-width:100px}
.card--xs.card--h .oic-card__media img{min-height:var(--card-img-h)}

/* ── 5. Elements (هيكل فقط — بدون ألوان) ── */
.oic-card__cat{order:1;position:absolute;top:8px;right:8px;z-index:2;display:inline-block;font-size:var(--card-cat-fs);font-weight:700;padding:2px 10px;border-radius:var(--radius-sm,6px);text-decoration:none;transition:all 0.2s;width:fit-content}
.oic-card__meta{order:2;position:absolute;top:8px;left:8px;z-index:2;display:flex;align-items:center;gap:8px;font-size:0.7rem;padding:3px 8px;border-radius:var(--radius-sm,6px);backdrop-filter:blur(4px);margin:0}
.oic-card__title{order:3;font-size:var(--card-title-fs);font-weight:700;line-height:1.4;margin:0}
.oic-card__title a{text-decoration:none}
.oic-card__excerpt{order:4;font-size:var(--card-text-fs);line-height:1.7;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:0}
.oic-card__tags{order:5;display:flex;flex-wrap:wrap;gap:4px}
.oic-card__tag{font-size:0.7rem;padding:3px 10px;border-radius:var(--radius-sm,6px);text-decoration:none;transition:all 0.2s}
.oic-card__btn{order:6;display:inline-flex;align-items:center;gap:6px;padding:8px 20px;border-radius:8px;text-decoration:none;font-size:var(--card-text-fs);font-weight:600;width:fit-content;transition:var(--card-transition)}
.oic-card__avatar{width:24px;height:24px;border-radius:50%;vertical-align:middle}
.oic-card__placeholder{display:flex;align-items:center;justify-content:center;height:var(--card-img-h);text-decoration:none}

/* شارات التصنيف */
.oic-card__cat--badge{padding:3px 10px;border-radius:var(--radius-sm,4px);font-size:0.75rem;font-weight:700}
.oic-card__cat--pill{padding:4px 14px;border-radius:50px}
.oic-card__cat--underline{padding-bottom:2px}

/* أنماط الأزرار (هيكل) */
.oic-card__btn--outline{border:2px solid}
.oic-card__btn--pill{border-radius:50px}
.oic-card__btn--subtle{background:transparent!important;padding:0}
.oic-card__btn--subtle:hover{gap:10px}

/* القائمة */
.oic-view-list .oic-card__meta{order:99;margin-top:auto}
.oic-view-list .oic-card__title{flex-grow:0}

/* بسيط */
.card--simple .oic-card__body{padding:15px;gap:8px}
.card--simple .oic-card__cat{font-weight:800;padding:0;font-size:0.75rem}
.card--simple .oic-card__cat::before{content:'● '}
.card--simple .oic-card__title{font-size:1rem;line-height:1.5}
.card--simple .oic-card__btn{display:none}
.card--simple .oic-card__tag{display:none}
.card--simple .oic-card__meta{margin-top:auto}

/* ── 6. Image Shapes ── */
.card-img--sq .oic-card__media img{aspect-ratio:1/1;height:auto}
.card-img--circ .oic-card__media{width:80px;height:80px;border-radius:50%;margin:var(--card-pad);flex-shrink:0}
.card-img--circ .oic-card__media img{height:100%;border-radius:50%}
.card-img--none .oic-card__media{display:none}
.card-img--inset .oic-card__media{margin:var(--card-pad);border-radius:calc(var(--card-radius) - 4px);overflow:hidden}
.card-img--inset .oic-card__media img{border-radius:inherit}
.card-img--inset.card--h .oic-card__media{margin-inline-end:0}
.card-img--inset.card--h-rev .oic-card__media{margin-inline-start:0}

/* ── 7. Spacing ── */

/* ── 8. Grid ── */
.oic-grid{display:grid;gap:10px}
.oic-grid--1{grid-template-columns:1fr}
.oic-grid--2{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.oic-grid--3{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.oic-grid--4{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.oic-grid--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.oic-card--span-2{grid-column:span 2}
.oic-card--span-2 .oic-card__media img{height:260px}
@media(max-width:1200px){.oic-grid--5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:800px){.oic-grid--5{grid-template-columns:repeat(2,minmax(0,1fr))}.oic-card--span-2{grid-column:span 1}.oic-card--span-2 .oic-card__media img{height:200px}}
@media(max-width:500px){.oic-grid--5{grid-template-columns:1fr}}

/* ── 9. Responsive ── */
@media(max-width:639px){
    .card--h,.card--h-rev{flex-direction:column}
    .card--h .oic-card__media,.card--h-rev .oic-card__media{width:100%;min-width:auto}
    .card--h .oic-card__media img,.card--h-rev .oic-card__media img{height:var(--card-img-h);min-height:auto}
    .card--h .oic-card__cat,.card--h-rev .oic-card__cat{position:absolute;top:8px;right:8px}
    .card--h .oic-card__meta,.card--h-rev .oic-card__meta{position:absolute;top:8px;left:8px;backdrop-filter:blur(4px);padding:3px 8px}
    .card--hero{--card-img-h:250px;--card-title-fs:1.5rem}
}

/* ── Animations ── */
@keyframes oicFadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.oic-animate{opacity:0;animation:oicFadeInUp 0.7s ease forwards}
.oic-animate:nth-child(1){animation-delay:.1s}.oic-animate:nth-child(2){animation-delay:.2s}.oic-animate:nth-child(3){animation-delay:.3s}.oic-animate:nth-child(4){animation-delay:.4s}.oic-animate:nth-child(5){animation-delay:.5s}
.oic-animate:nth-child(6){animation-delay:.6s}.oic-animate:nth-child(7){animation-delay:.7s}.oic-animate:nth-child(8){animation-delay:.8s}.oic-animate:nth-child(9){animation-delay:.9s}.oic-animate:nth-child(10){animation-delay:1s}

/* ── حركة دخول الكارد — IntersectionObserver ── */
.oic-card.oic-anim{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.oic-card.oic-anim.oic-visible{opacity:1;transform:translateY(0)}
/* تأخير تصاعدي للكروت */
.oic-card.oic-anim:nth-child(1){transition-delay:.05s}
.oic-card.oic-anim:nth-child(2){transition-delay:.1s}
.oic-card.oic-anim:nth-child(3){transition-delay:.15s}
.oic-card.oic-anim:nth-child(4){transition-delay:.2s}
.oic-card.oic-anim:nth-child(5){transition-delay:.25s}
.oic-card.oic-anim:nth-child(6){transition-delay:.3s}
.oic-card.oic-anim:nth-child(7){transition-delay:.35s}
.oic-card.oic-anim:nth-child(8){transition-delay:.4s}
/* احترام إعداد تقليل الحركة */
@media(prefers-reduced-motion:reduce){.oic-card.oic-anim{opacity:1;transform:none;transition:none}}

/* الزوايا */
.card--sharp{--card-radius:0!important;border-radius:0!important}.card--soft{--card-radius:var(--radius-sm,6px)!important;border-radius:var(--radius-sm,6px)!important}.card--round{--card-radius:var(--radius,16px)!important;border-radius:var(--radius,16px)!important}.card--pill{--card-radius:28px!important;border-radius:28px!important}

/* الظل — تجاوز يدوي */
.card--shadow-none{--card-shadow:none!important;box-shadow:none!important}
.card--shadow-sm{--card-shadow:var(--shadow-sm,0 1px 3px rgba(0,0,0,.08))!important;box-shadow:var(--shadow-sm,0 1px 3px rgba(0,0,0,.08))!important}
.card--shadow-md{--card-shadow:var(--shadow-md,0 4px 12px rgba(0,0,0,.12))!important;box-shadow:var(--shadow-md,0 4px 12px rgba(0,0,0,.12))!important}
.card--shadow-lg{--card-shadow:var(--shadow,0 8px 24px rgba(0,0,0,.18))!important;box-shadow:var(--shadow,0 8px 24px rgba(0,0,0,.18))!important}

/* الظل عند الهوفر — يكبر قليلاً */
.oic-card:hover{box-shadow:var(--shadow-md, 0 4px 12px rgba(0,0,0,.1))}

/* طبقات التراكبي */
.card-overlay--solid::after{background:rgba(0,0,0,0.5)!important}
.card-overlay--rainbow::after{background:linear-gradient(135deg,rgba(255,0,0,0.3),rgba(255,165,0,0.2),rgba(0,128,0,0.2),rgba(0,0,255,0.3))!important;mix-blend-mode:overlay}
.card-overlay--none::after{display:none}

/* ═══ 10. الكارد الذكي المتكيف — Container Queries ═══ */
/* الكارد يتكيّف تلقائياً مع المساحة المتاحة */

/* الشبكة تكون container */
.oic-grid,.oic-sb-grid{container-type:inline-size}

/* عند المساحة الضيقة: يخفي العناصر الثانوية ويصغّر الخط */
@container (max-width: 280px) {
    .oic-card__excerpt{display:none}
    .oic-card__tags{display:none}
    .oic-card__btn{display:none}
    .oic-card__title{font-size:0.85rem;-webkit-line-clamp:2}
    .oic-card__meta{font-size:0.65rem}
    .oic-card{--card-pad:6px;--card-gap:3px;--card-img-h:100px}
}

/* مساحة متوسطة: يخفي المقتطف ويقلل السطور */
@container (min-width: 281px) and (max-width: 380px) {
    .oic-card__excerpt{-webkit-line-clamp:2}
    .oic-card__btn{display:none}
    .oic-card__title{-webkit-line-clamp:2;font-size:0.9rem}
    .oic-card{--card-pad:8px;--card-gap:4px;--card-img-h:130px}
}

/* مساحة واسعة: يظهر كل شيء */
@container (min-width: 500px) {
    .oic-card__excerpt{-webkit-line-clamp:4}
    .card--h .oic-card__media{width:45%;min-width:45%;flex-shrink:0}
}

/* ═══ خلفية الكارد الذكية — oic-card-bg-wrap ═══ */
.oic-card-bg-wrap {
    border-radius: var(--radius, 12px);
    overflow: hidden;
}
/* .oic-card من smart-card.php */
.oic-card-bg-wrap .oic-card {
    background: inherit;
}
/* .oic-card من registry/cards.php — inline style يتجاوز inherit */
/* نستخدم !important لتجاوز background:#fff الـ inline */
.oic-card-bg-wrap div[class*="oic-card"],
.oic-card-bg-wrap .oic-reg .oic-card,
.oic-card-bg-wrap [style*="background:#fff"],
.oic-card-bg-wrap [style*="background: #fff"] {
    background: inherit !important;
}
.oic-card-bg-wrap[style*="background-image"] .oic-card,
.oic-card-bg-wrap[style*="background-image"] [style*="background"] {
    background: transparent !important;
}