/*
 * ════════════════════════════════════════════════════════════════
 * OIC base.css — أساسيات HTML عامة (مستخرج من variables.css v1.1.1020)
 * ════════════════════════════════════════════════════════════════
 *
 * يحوي:
 *  - Reset الأساسي (تم الاحتفاظ به في variables.css لأنه يعتمد على :root)
 *  - Typography (h1-h6, p)
 *  - Containers + Section
 *  - Layout helpers (flow, stack, inline, grid)
 *  - Element contexts (data-el-context)
 *  - Media helpers (.media, .thumb, .img-cover)
 *  - Text helpers (truncate, clamp)
 *  - Entry content / prose
 *  - Inputs
 *  - Utilities صغيرة (.hidden, .w-full, .rounded-*, .shadow-*)
 *
 * 📌 قاعدة ذهبية: هذا الملف للأساسيات فقط — لا تضع قواعد لمكوّنات كاملة
 *    مثل .oic-card أو .oic-btn هنا. ملفاتها المخصصة:
 *    - .oic-card  → assets/css/card-engine.css
 *    - .oic-btn   → assets/css/components/buttons.css
 *    - .oic-social → assets/css/components/social.css
 *    - .badge     → assets/css/components/badge.css
 *
 * ════════════════════════════════════════════════════════════════
 */

/* ─── Typography ─── */
h1,h2,h3,h4,h5,h6,.heading{
  margin:0; font-family:var(--font-family-heading); font-weight:var(--weight-bold);
  line-height:var(--leading-snug); letter-spacing:var(--tracking-tight); color:var(--color-heading); overflow-wrap:anywhere;
}
h1,.h1{font-size:clamp(1.75rem,4vw,var(--font-5xl));}
h2,.h2{font-size:clamp(1.5rem,3.4vw,var(--font-4xl));}
h3,.h3{font-size:clamp(1.25rem,2.8vw,var(--font-3xl));}
h4,.h4{font-size:clamp(1.125rem,2.2vw,var(--font-2xl));}
h5,.h5{font-size:clamp(1rem,1.8vw,var(--font-xl));}
h6,.h6{font-size:clamp(.9375rem,1.4vw,var(--font-lg));}
p,.text{ margin:0; color:var(--text-color); line-height:var(--leading-relaxed); overflow-wrap:anywhere; }
.text-xs{font-size:var(--font-xs);} .text-sm{font-size:var(--font-sm);} .text-base{font-size:var(--font-base);} .text-md{font-size:var(--font-md);} .text-lg{font-size:var(--font-lg);} .text-xl{font-size:var(--font-xl);}
.text-soft{color:var(--color-text-soft);} .text-center{text-align:center;} .text-right{text-align:right;} .text-left{text-align:left;}
.weight-regular{font-weight:var(--weight-regular);} .weight-medium{font-weight:var(--weight-medium);} .weight-semibold{font-weight:var(--weight-semibold);} .weight-bold{font-weight:var(--weight-bold);} .weight-extrabold{font-weight:var(--weight-extrabold);}

/* ─── Containers & Sections ─── */
.oic-container,.container{ width:min(100%,var(--container-xl)); margin-inline:auto; padding-inline:var(--container-pad-x); }
.oic-container--wide,.container-wide{ width:min(100%,var(--container-2xl)); margin-inline:auto; padding-inline:var(--container-pad-x); }
.oic-container--content,.container-content{ width:min(100%,var(--content-max)); margin-inline:auto; padding-inline:var(--container-pad-x); }
.section{ position:relative; padding-block:var(--space-8); }
@media (min-width:768px){ .section{ padding-block:var(--space-12);} }

/* ─── Layout helpers ─── */
.flow > * + *{ margin-top:var(--space-4);} .flow-sm > * + *{margin-top:var(--space-3);} .flow-lg > * + *{margin-top:var(--space-6);} 
.stack{ display:flex; flex-direction:column; gap:var(--space-4);} .stack-sm{gap:var(--space-3);} .stack-lg{gap:var(--space-6);} 
.inline{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3);} 

/* ─── Grid ─── */
.grid{ display:grid; gap:var(--gap-4);} .grid-1{grid-template-columns:var(--grid-cols-1);} .grid-2{grid-template-columns:var(--grid-cols-2);} .grid-3{grid-template-columns:var(--grid-cols-3);} .grid-4{grid-template-columns:var(--grid-cols-4);} .grid-5{grid-template-columns:var(--grid-cols-5);} .grid-6{grid-template-columns:var(--grid-cols-6);} 
.grid-auto-xs{grid-template-columns:var(--grid-auto-xs);} .grid-auto-sm{grid-template-columns:var(--grid-auto-sm);} .grid-auto-md{grid-template-columns:var(--grid-auto-md);} .grid-auto-lg{grid-template-columns:var(--grid-auto-lg);} 
.gap-0{gap:var(--gap-0);} .gap-1{gap:var(--gap-1);} .gap-2{gap:var(--gap-2);} .gap-3{gap:var(--gap-3);} .gap-4{gap:var(--gap-4);} .gap-5{gap:var(--gap-5);} .gap-6{gap:var(--gap-6);} .gap-8{gap:var(--gap-8);} 
@media (max-width:767.98px){ .grid-mobile-1{grid-template-columns:1fr!important;} .grid-mobile-2{grid-template-columns:repeat(2,minmax(0,1fr))!important;} }
@media (max-width:420px){ .grid-micro-4{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap-3);} .grid-micro-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-3);} .grid-heavy-3,.grid-heavy-4{grid-template-columns:1fr!important;} }

/* ─── Element contexts (data-el-context) ─── */
[data-el-context="l1"]{ --el-title-size:var(--font-3xl); --el-title-line-height:var(--leading-snug); --el-text-size:var(--font-lg); --el-text-line-height:var(--leading-relaxed); --el-icon-size:46px; --el-image-height:280px; --el-gap:var(--space-4); --el-padding:var(--space-4); --el-radius:var(--radius-xl); }
[data-el-context="l2"]{ --el-title-size:var(--font-2xl); --el-title-line-height:var(--leading-snug); --el-text-size:var(--font-sm); --el-text-line-height:var(--leading-normal); --el-icon-size:32px; --el-image-height:200px; --el-gap:var(--space-3); --el-padding:var(--space-3); --el-radius:var(--radius-lg); }
[data-el-context="inline"]{ --el-title-size:var(--font-lg); --el-title-line-height:var(--leading-snug); --el-text-size:var(--font-xs); --el-text-line-height:var(--leading-normal); --el-icon-size:16px; --el-image-height:120px; --el-gap:var(--space-2); --el-padding:var(--space-2); --el-radius:var(--radius-md); }

/* ─── Media helpers (.media — حاوية وسائط عامة، ليست .oic-card__media) ─── */
.media{ position:relative; display:block; overflow:hidden; border-radius:var(--media-radius); background:var(--color-bg-soft);} 
.media > img,.media > video,.media > iframe{ width:100%; height:100%; object-fit:var(--media-fit); object-position:var(--media-position);} 
.media--square{aspect-ratio:var(--ratio-square);} .media--landscape{aspect-ratio:var(--ratio-video);} .media--photo{aspect-ratio:var(--ratio-photo);} .media--portrait{aspect-ratio:var(--ratio-portrait);} .media--wide{aspect-ratio:var(--ratio-wide);} 
.img-cover{width:100%;height:100%;object-fit:cover;} .img-contain{width:100%;height:100%;object-fit:contain;}
.thumb-xs,.thumb-sm,.thumb-md,.thumb-lg,.thumb-xl{ border-radius:var(--radius-lg); overflow:hidden; flex-shrink:0; }
.thumb-xs{width:40px;height:40px;} .thumb-sm{width:56px;height:56px;} .thumb-md{width:72px;height:72px;} .thumb-lg{width:96px;height:96px;} .thumb-xl{width:128px;height:128px;}
@media (max-width:420px){ .thumb-xl{width:96px;height:96px;} .thumb-lg{width:80px;height:80px;} .thumb-md{width:64px;height:64px;} }

/* ─── Text helpers ─── */
.truncate-1{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.clamp-1,.clamp-2,.clamp-3,.clamp-4{ display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; }
.clamp-1{-webkit-line-clamp:1;} .clamp-2{-webkit-line-clamp:2;} .clamp-3{-webkit-line-clamp:3;} .clamp-4{-webkit-line-clamp:4;} 
.title-clamp{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.text-clamp{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
@media (max-width:767.98px){ .mobile-title-sm{font-size:var(--font-base)!important; line-height:var(--leading-snug);} .mobile-text-sm{font-size:var(--font-sm)!important; line-height:var(--leading-normal);} .mobile-clamp-1{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; overflow:hidden;} .mobile-clamp-2{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;} .mobile-hide{display:none!important;} }

/* ─── Entry content / Prose ─── */
.entry-content,.prose{ max-width:100%; overflow-wrap:anywhere; word-break:break-word; }
.entry-content > * + *,.prose > * + *{ margin-top:var(--space-4);} 
.entry-content img,.entry-content iframe,.entry-content video,.prose img,.prose iframe,.prose video{ max-width:100%; height:auto; }
.entry-content table,.prose table{ width:100%; border-collapse:collapse; display:block; overflow-x:auto; white-space:nowrap; }
.entry-content pre,.prose pre{ overflow-x:auto; padding:var(--space-4); border-radius:var(--radius-lg); background:var(--color-bg-soft); font-family:var(--font-family-mono);} 

/* ─── Form inputs (عامة) ─── */
.input,input:not([type="checkbox"]):not([type="radio"]),select,textarea{ width:100%; min-height:var(--input-md-h); padding-inline:var(--input-md-px); padding-block:var(--space-2); font-size:var(--input-md-font); line-height:var(--leading-normal); border:var(--border-1) solid var(--color-border); border-radius:var(--radius-lg); background:#fff; color:var(--color-text);} 
textarea{ min-height:120px; resize:vertical;} 
.input:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:none; box-shadow:var(--focus-ring); border-color:var(--primary-400);} 

/* ─── Small Utilities ─── */
.hidden{display:none!important;} .w-full{width:100%;} .h-full{height:100%;} .min-w-0{min-width:0;} .overflow-hidden{overflow:hidden;} 
.rounded-none{border-radius:var(--radius-none);} .rounded-sm{border-radius:var(--radius-sm);} .rounded-md{border-radius:var(--radius-md);} .rounded-lg{border-radius:var(--radius-lg);} .rounded-xl{border-radius:var(--radius-xl);} .rounded-full{border-radius:var(--radius-full);} 
.shadow-none{box-shadow:var(--shadow-none);} .shadow-sm{box-shadow:var(--shadow-sm);} .shadow-md{box-shadow:var(--shadow-md);} .shadow-lg{box-shadow:var(--shadow-lg);} .shadow-xl{box-shadow:var(--shadow-xl);} 
.bg-soft{background:var(--color-bg-soft);} .bg-surface{background:var(--color-surface);} .border{border:var(--border-1) solid var(--color-border);} .border-strong{border:var(--border-1) solid var(--color-border-strong);} 

/* ─── Accessibility ─── */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after{ animation-duration:0.01ms!important; transition-duration:0.01ms!important; scroll-behavior:auto!important;}
}
@media (forced-colors: active) {
  /* عناصر forced-colors تنتقل لملفاتها (buttons.css, social.css) */
}