/* ============================================================
   SIMS — الموقع الإلكتروني الرسمي (الواجهة العامة)
   File : wwwroot/css/sims-public.css
   ------------------------------------------------------------
   مبدأ العزل: لا قاعدة واحدة هنا تسري خارج `body.pub`.
   شاشات الموظفين والمستفيدين لا تُحمّل هذا الملف أصلاً، ولو
   حُمّل بالخطأ فلن يمسّها لأن كل محدِّد مسبوقٌ بـ .pub

   مبدأ الهوية: لا لون مكتوب يدوياً. كل متغيّر هنا مشتقٌّ من
   sims-tokens.css — فتبديل الثيم (marine/sharjah/gray/gold)
   أو الوضع (light/dark) من زرّ الهيدر ينعكس على الموقع فوراً.

   مبدأ الاتجاه: الخصائص المنطقية (inline-start/end) أولاً،
   وما تعذّر منها يُكتب تحت [dir="rtl"] و [dir="ltr"] هنا —
   لا ملفّ اتجاهٍ ثانٍ.

   وضعان للجسم:
     body.pub.pub-deck  → الرئيسية: شرائح بملء الشاشة، بلا تمرير
     body.pub.pub-flow  → الصفحات الداخلية: تمرير طبيعي
   ============================================================ */

/* ============================================================
   1) الرموز — مشتقّة من نظام التصميم
   ============================================================ */
/* ============================================================
   1) لوحة النادي الرسميّة
   ------------------------------------------------------------
   الموقعُ العامّ هويّةُ النادي أمام الجمهور، لا تفضيلاً شخصيّاً.
   فكان يرث ثيمات شاشات الموظّفين الأربعة (marine/sharjah/gray/gold)
   فينقلب لونُ الجهة الحكوميّة بنقرةٍ من موظّف. صار له لوحتُه الثابتة
   من ألوان العلامة الثلاثة التي اعتمدها صاحب النظام:

       الأزرق  #4D89D4      الأحمر  #C7380D      الرماديّ  #F1F1F2

   وكلُّ لونٍ أدناه مشتقٌّ من هذه الثلاثة. الطباعةُ والحركةُ وأنصافُ
   الأقطار تبقى من نظام التصميم (--font-display / --dur / --radius)
   فلا يفترق الموقعُ عن النظام في بنيته، ويفترق عنه في هويّته وحدها.

   تبديلُ اللوحة كلِّها = تعديل الأسطر الستّة الأولى في كلٍّ من
   الوضعين أدناه، ولا شيء غيرها.
   ============================================================ */
.pub{
    /* --- ألوان العلامة الثلاثة --- */
    --pub-brand-blue: #4D89D4;
    --pub-brand-red:  #C7380D;
    --pub-brand-mist: #F1F1F2;

    /* --- الوضع الفاتح --- */
    --pub-bg:        var(--pub-brand-mist);
    --pub-bg2:       #E3E7EC;
    --pub-surface:   #FFFFFF;
    --pub-surface-2: #FFFFFF;
    --pub-veil:      rgba(77, 137, 212, .07);

    --pub-fg:    #16202E;
    --pub-muted: #4E5A6E;
    --pub-faint: #8A93A3;
    --pub-line:  rgba(22, 32, 46, .13);
    --pub-ghost: rgba(22, 32, 46, .055);

    /* الأزرق ثلاثُ درجات:
       accent      = العلامة كما هي — للزخرفة والحدود والنصّ الكبير
       accent-ink  = أغمق، للنصّ بحجمه العاديّ وخلفيّة الأزرار (تباينٌ ٦٫٤ : ١ مع الأبيض)
       accent-deep = أغمق منه، لحالة المرور */
    --pub-accent:      var(--pub-brand-blue);
    --pub-accent-ink:  #245BA3;
    --pub-accent-deep: #17427A;
    --pub-on-accent:   #FFFFFF;

    /* الأحمر لونُ الإبراز: العناوين الفوقيّة والفواصل والنقطة النشطة */
    --pub-highlight:      var(--pub-brand-red);
    --pub-highlight-soft: rgba(199, 56, 13, .12);
    --pub-highlight-grad: linear-gradient(135deg, #4D89D4, #C7380D);

    --pub-ok:       #157A45;  --pub-ok-soft:  rgba(21, 122, 69, .12);
    --pub-err:      #B01E30;  --pub-err-soft: rgba(176, 30, 48, .11);

    --pub-shadow:     0 2px 16px rgba(22, 32, 46, .08);
    --pub-shadow-lg:  0 24px 60px rgba(22, 32, 46, .20);
    --pub-shadow-btn: 0 10px 24px rgba(36, 91, 163, .30);

    /* اللون الوحيد غير المشتقّ، وثباتُه مقصود: نصٌّ فوق صورةٍ فوتوغرافية
       (غطاء المعرض وعارض الصور). خلفيّتُه الصورةُ لا سطحُ الموقع، فلو
       اشتُقّ من --pub-fg لانقلب داكناً في الوضع الفاتح واختفى. */
    --pub-on-media: #FFFFFF;

    --pub-pad-x: clamp(20px, 5vw, 64px);
    --pub-head-h: 78px;
    --pub-ease: cubic-bezier(.7, 0, .3, 1);
}

/* --- الوضع الداكن: اللوحة نفسها بدرجاتٍ تُقرأ على العمق --- */
[data-mode="dark"] .pub{
    --pub-bg:        #0B1420;
    --pub-bg2:       #102031;
    --pub-surface:   #142335;
    --pub-surface-2: #1A2C42;
    --pub-veil:      rgba(255, 255, 255, .04);

    --pub-fg:    #EDF1F6;
    --pub-muted: #A6B3C6;
    --pub-faint: #71809A;
    --pub-line:  rgba(255, 255, 255, .11);
    --pub-ghost: rgba(255, 255, 255, .055);

    /* الأزرق يُفتَح ليُقرأ على العمق، والحبرُ فوقه ينقلب داكناً */
    --pub-accent:      #6FA4E4;
    --pub-accent-ink:  #6FA4E4;
    --pub-accent-deep: #93BDEE;
    --pub-on-accent:   #08121E;

    --pub-highlight:      #F2683C;
    --pub-highlight-soft: rgba(242, 104, 60, .16);
    --pub-highlight-grad: linear-gradient(135deg, #6FA4E4, #F2683C);

    --pub-ok:       #3ECF7E;  --pub-ok-soft:  rgba(62, 207, 126, .14);
    --pub-err:      #F26B7A;  --pub-err-soft: rgba(242, 107, 122, .13);

    --pub-shadow:     0 2px 16px rgba(0, 0, 0, .45);
    --pub-shadow-lg:  0 24px 60px rgba(0, 0, 0, .60);
    --pub-shadow-btn: 0 10px 24px rgba(0, 0, 0, .55);
}

/* ============================================================
   2) الجسم — التهيئة منطوقةٌ بالصنف، لا على html/body العامّين
   ============================================================ */
.pub{
    margin: 0;
    font-family: var(--font-body);
    color: var(--pub-fg);
    line-height: 1.85;
    background: linear-gradient(180deg, var(--pub-bg), var(--pub-bg2));
    background-attachment: fixed;
}
/* منع التمرير مقصورٌ على وضع الشرائح وحده */
.pub-deck{ overflow: hidden; height: 100%; }
html:has(> body.pub-deck){ overflow: hidden; height: 100%; }

.pub *, .pub *::before, .pub *::after{ box-sizing: border-box; }
.pub img{ max-width: 100%; display: block; }
.pub a{ color: inherit; text-decoration: none; }
.pub h1, .pub h2, .pub h3, .pub h4{
    font-family: var(--font-display);
    margin: 0;
    line-height: 1.35;
    color: var(--pub-fg);
}
.pub p{ margin: 0 0 .9rem; }
.pub :focus-visible{
    outline: none;
    box-shadow: 0 0 0 3px rgba(77, 137, 212, .45);
    border-radius: 8px;
}

/* ============================================================
   3) عناصر مشتركة
   ============================================================ */
.pub .pub-wrap{
    width: 100%;
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: var(--pub-pad-x);
}
.pub .pub-eyebrow{
    color: var(--pub-highlight);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .18em;
    margin-bottom: .55rem;
}
.pub .pub-title{
    font-size: clamp(1.7rem, 3.6vw, 2.9rem);
    font-weight: 700;
    margin-bottom: 1.4rem;
    position: relative;
    padding-bottom: .7rem;
}
.pub .pub-title .ac{ color: var(--pub-accent); }
.pub .pub-title::after{
    content: "";
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    width: 58px; height: 3px; border-radius: 3px;
    background: linear-gradient(90deg, var(--pub-accent), var(--pub-highlight));
}
[dir="ltr"] .pub .pub-title::after{ background: linear-gradient(270deg, var(--pub-accent), var(--pub-highlight)); }

/* أغمقُ من --muted بقدرٍ يجاوز حدّ WCAG AA للنصّ العاديّ (كان ٣٫٩ : ١) */
.pub .pub-lead{ color: color-mix(in srgb, var(--pub-muted) 62%, var(--pub-fg)); font-size: 1.02rem; max-width: 62ch; }

.pub .pub-btn{
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--pub-accent-ink); color: var(--pub-on-accent);
    padding: .78rem 1.7rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font: inherit; font-weight: 600; font-size: .93rem;
    cursor: pointer;
    transition: transform var(--dur) var(--pub-ease),
                background var(--dur) ease, box-shadow var(--dur) ease;
}
.pub .pub-btn:hover{ background: var(--pub-accent-deep); transform: translateY(-3px); box-shadow: var(--pub-shadow-btn); }
.pub .pub-btn.ghost{
    background: transparent; color: var(--pub-fg); border-color: var(--pub-line);
}
.pub .pub-btn.ghost:hover{ border-color: var(--pub-highlight); color: var(--pub-highlight); background: transparent; box-shadow: none; }
.pub .pub-btn svg{ width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; }
/* السهم ينعكس مع الاتجاه */
[dir="rtl"] .pub .pub-btn svg.arrow{ transform: scaleX(-1); }

/* ============================================================
   4) الهيدر
   ============================================================ */
.pub .pub-head{
    position: fixed; inset-block-start: 0; inset-inline: 0;
    height: var(--pub-head-h);
    display: flex; align-items: center; gap: 1rem;
    padding-inline: var(--pub-pad-x);
    z-index: 60;
    transition: background var(--dur) ease, box-shadow var(--dur) ease, backdrop-filter var(--dur) ease;
}
.pub .pub-head.solid,
.pub-flow .pub-head{
    background: color-mix(in srgb, var(--pub-bg) 88%, transparent);
    backdrop-filter: blur(14px);
    box-shadow: 0 1px 0 var(--pub-line);
}
.pub .pub-brand{ display: flex; align-items: center; gap: .7rem; cursor: pointer; }
.pub .pub-brand img{ width: 46px; height: 46px; object-fit: contain; }
.pub .pub-brand > span{ display: flex; flex-direction: column; }
.pub .pub-brand .bn{
    display: block;
    font-family: var(--font-display);
    font-size: 1.02rem; font-weight: 700; line-height: 1.3;
}
.pub .pub-brand .bs{ display: block; font-size: .68rem; color: var(--pub-muted); line-height: 1.3; }

.pub .pub-head-mid{
    display: flex; align-items: center; gap: 1.4rem;
    margin-inline: auto;
    font-size: .82rem; color: var(--pub-muted);
    /* تُخفى فوق صورة البطل: نصٌّ رماديٌّ على صورةٍ لا يُقرأ. تظهر حين
       يصير الهيدر صلباً (أيّ شريحةٍ بعد الأولى، وكلُّ صفحةٍ داخلية). */
    opacity: 0; visibility: hidden;
    transition: opacity var(--dur) ease, visibility var(--dur) ease;
}
.pub .pub-head.solid .pub-head-mid{ opacity: 1; visibility: visible; }
.pub .pub-head-mid .sep{ width: 1px; height: 16px; background: var(--pub-highlight); transform: rotate(18deg); }

.pub .pub-head-acts{ display: flex; align-items: center; gap: .55rem; }
.pub .pub-ico{
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid var(--pub-line);
    background: transparent; color: var(--pub-fg);
    display: grid; place-items: center; cursor: pointer;
    transition: border-color var(--dur) ease, color var(--dur) ease;
}
.pub .pub-ico:hover{ border-color: var(--pub-highlight); color: var(--pub-highlight); }
.pub .pub-ico svg{ width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.pub .pub-ico.filled svg{ fill: currentColor; stroke: none; }

/* أيقونة الوضع: شمس في الفاتح، قمر في الداكن */
.pub .pub-ico .i-moon{ display: none; }
[data-mode="dark"] .pub .pub-ico .i-sun{ display: none; }
[data-mode="dark"] .pub .pub-ico .i-moon{ display: block; }

/* منتقي اللغة */
.pub .pub-lang{ position: relative; }
.pub .pub-lang-list{
    position: absolute; inset-block-start: calc(100% + 8px); inset-inline-end: 0;
    background: var(--pub-surface); border: 1px solid var(--pub-line);
    border-radius: var(--radius); box-shadow: var(--pub-shadow-lg);
    padding: .35rem; min-width: 138px;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: all var(--dur) ease; z-index: 70;
}
.pub .pub-lang.open .pub-lang-list{ opacity: 1; visibility: visible; transform: translateY(0); }
.pub .pub-lang-list button{
    display: block; width: 100%; text-align: start;
    background: none; border: 0; font: inherit; font-size: .88rem;
    color: var(--pub-fg); padding: .45rem .7rem; border-radius: 8px; cursor: pointer;
}
.pub .pub-lang-list button:hover{ background: var(--pub-veil); }
.pub .pub-lang-list button.on{ color: var(--pub-accent-ink); font-weight: 700; }

.pub .pub-burger{ display: flex; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.pub .pub-burger span{ display: block; width: 26px; height: 2px; background: var(--pub-fg); border-radius: 2px; transition: var(--dur); }

/* ============================================================
   5) القائمة المنزلقة
   ============================================================ */
.pub .pub-backdrop{
    position: fixed; inset: 0; z-index: 75;
    background: rgba(6, 12, 22, .58);
    opacity: 0; visibility: hidden; transition: .4s;
}
.pub .pub-backdrop.open{ opacity: 1; visibility: visible; }

.pub .pub-menu{
    position: fixed; inset-block: 0; inset-inline-end: 0;
    width: 430px; max-width: 88vw; z-index: 85;
    background: var(--pub-surface);
    border-inline-start: 1px solid var(--pub-line);
    display: flex; flex-direction: column; justify-content: center;
    padding-inline: clamp(28px, 6vw, 64px);
    transition: transform .5s var(--pub-ease);
    box-shadow: var(--pub-shadow-lg);
}
[dir="rtl"] .pub .pub-menu{ transform: translateX(-100%); }
[dir="ltr"] .pub .pub-menu{ transform: translateX(100%); }
.pub .pub-menu.open{ transform: translateX(0) !important; }

.pub .pub-menu nav{ display: flex; flex-direction: column; gap: .1rem; }
.pub .pub-menu nav a{
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2.6vw, 1.75rem);
    font-weight: 500; color: var(--pub-muted);
    padding: .42rem 0; cursor: pointer;
    transition: color var(--dur) ease, padding-inline-start var(--dur) ease;
}
.pub .pub-menu nav a:hover{ color: var(--pub-fg); padding-inline-start: .5rem; }
.pub .pub-menu nav a.active{ color: var(--pub-accent-ink); }

.pub .pub-menu-foot{ margin-top: 2.4rem; }
.pub .pub-socials{ display: flex; gap: 1.1rem; margin-bottom: 1rem; }
.pub .pub-socials a{ color: var(--pub-muted); transition: var(--dur); }
.pub .pub-socials a:hover{ color: var(--pub-highlight); transform: translateY(-3px); }
.pub .pub-socials svg{ width: 17px; height: 17px; fill: currentColor; }
.pub .pub-menu-foot p{ color: var(--pub-faint); font-size: .78rem; margin: 0; }

.pub .pub-menu-x{
    position: absolute; inset-block-start: 26px; inset-inline-end: 30px;
    font-size: 2rem; line-height: 1; cursor: pointer; color: var(--pub-fg);
    background: none; border: 0;
}

/* ============================================================
   6) نظام الشرائح (الرئيسية وحدها)
   ============================================================ */
.pub .pub-deck-el{
    position: fixed; inset: 0;
    transition: transform .9s var(--pub-ease);
    will-change: transform;
}
.pub .pub-slide{
    height: 100vh; height: 100dvh; width: 100%;
    display: flex; align-items: center;
    position: relative; overflow: hidden;
}
.pub .pub-slide-in{
    width: 100%; max-height: 100vh; max-height: 100dvh;
    overflow: auto; scrollbar-width: none;
    padding-block: calc(var(--pub-head-h) + 18px) 26px;
}
.pub .pub-slide-in::-webkit-scrollbar{ display: none; }
.pub .pub-slide.alt{ background: var(--pub-veil); }

/* الكلمة العملاقة في خلفية الشريحة.
   ------------------------------------------------------------
   في القالب الأصل كانت عموديّةً (writing-mode: vertical-rl)، وهو
   يليق باللاتينيّة. جرّبتُها بالعربيّة فانقلبت الحروفُ على جنبها
   ولم تُقرأ — والخطُّ العربيُّ متّصلٌ لا يحتمل التدوير. فصارت
   أفقيّةً ضخمةً عند حافّة البداية، تُقتطع بالحافّة فتبقى زخرفةً
   لا نصّاً يُزاحم. وتخدم الاتجاهين والخمسَ لغات بقاعدةٍ واحدة. */
.pub .pub-slide[data-word]::before{
    content: attr(data-word);
    position: absolute;
    inset-block-end: -.14em;
    inset-inline-start: -.06em;
    font-family: var(--font-display);
    font-size: clamp(64px, 11vw, 190px);
    font-weight: 700; line-height: .82;
    color: var(--pub-ghost); letter-spacing: -.01em;
    pointer-events: none; z-index: 0; white-space: nowrap;
    max-width: 100%; overflow: hidden;
}
.pub .pub-slide[data-word] .pub-slide-in{ position: relative; z-index: 1; }

/* النقاط الجانبية */
.pub .pub-dots{
    position: fixed; inset-inline-end: 30px; inset-block-start: 50%;
    transform: translateY(-50%);
    display: flex; flex-direction: column; gap: 15px; z-index: 50;
}
.pub .pub-dots a{
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--pub-faint); opacity: .55; cursor: pointer;
    transition: var(--dur);
}
.pub .pub-dots a.active{ background: var(--pub-highlight); opacity: 1; transform: scale(1.5); }
.pub .pub-dots a:hover{ background: var(--pub-highlight); opacity: 1; }

/* ============================================================
   7) شريحة البطل
   ============================================================ */
.pub .pub-hero{ display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; }
.pub .pub-hero-txt{ padding-inline: var(--pub-pad-x); position: relative; z-index: 5; }
.pub .pub-hero-txt h1{
    font-size: clamp(2.1rem, 5.4vw, 4.2rem);
    font-weight: 700; line-height: 1.22; letter-spacing: -.01em;
}
.pub .pub-hero-txt h1 .hl{ color: var(--pub-accent); }
.pub .pub-hero-txt h1 .lt{ font-weight: 300; color: var(--pub-muted); }
.pub .pub-hero-txt .pub-lead{ margin-top: 1.1rem; font-size: 1.06rem; }
.pub .pub-hero-cta{ display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 2rem; }

.pub .pub-hero-img{ position: absolute; inset-block: 0; inset-inline-end: 0; width: 48%; }
.pub .pub-hero-img img, .pub .pub-hero-img svg{ width: 100%; height: 100%; object-fit: cover; }
.pub .pub-hero-img::before{
    content: ""; position: absolute; inset-inline: 0; inset-block-start: 0;
    height: calc(var(--pub-head-h) + 34px); z-index: 1;
    background: linear-gradient(180deg, var(--pub-bg), transparent);
}
.pub .pub-hero-img::after{
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to var(--pub-fade-dir, left),
        var(--pub-bg) 0%, color-mix(in srgb, var(--pub-bg) 45%, transparent) 18%, transparent 55%);
}
/* الصورة في الجهة المنتهية: يسارُ العربية ويمينُ الإنجليزية.
   فالتلاشي يبدأ من حافّتها الملاصقة للنصّ لا من الطرف الخارجيّ. */
[dir="rtl"] .pub .pub-hero-img{ --pub-fade-dir: left; }
[dir="ltr"] .pub .pub-hero-img{ --pub-fade-dir: right; }

.pub .pub-hero-foot{
    position: absolute; inset-block-end: 0; inset-inline: 0;
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem var(--pub-pad-x); z-index: 6;
    color: var(--pub-faint); font-size: .76rem;
}
.pub .pub-scroll-hint{ display: flex; align-items: center; gap: .55rem; color: var(--pub-muted); font-size: .78rem; }
.pub .pub-scroll-hint i{
    width: 20px; height: 32px; border: 1px solid var(--pub-line); border-radius: 12px;
    position: relative; display: inline-block;
}
.pub .pub-scroll-hint i::after{
    content: ""; position: absolute; inset-inline-start: 50%; top: 6px;
    width: 3px; height: 6px; border-radius: 2px; background: var(--pub-highlight);
    transform: translateX(-50%); animation: pub-wheel 1.7s infinite;
}
@keyframes pub-wheel{ 0%{ opacity: 0; top: 5px; } 45%{ opacity: 1; } 100%{ opacity: 0; top: 18px; } }

/* ============================================================
   8) البطاقات والشبكات
   ============================================================ */
.pub .pub-grid{ display: grid; gap: 1.3rem; }
.pub .pub-grid.c2{ grid-template-columns: repeat(2, 1fr); }
.pub .pub-grid.c3{ grid-template-columns: repeat(3, 1fr); }
.pub .pub-grid.c4{ grid-template-columns: repeat(4, 1fr); }

.pub .pub-card{
    background: var(--pub-surface);
    border: 1px solid var(--pub-line);
    border-radius: var(--radius);
    padding: 1.7rem 1.5rem;
    transition: transform var(--dur) ease, border-color var(--dur) ease, box-shadow var(--dur) ease;
}
.pub .pub-card:hover{ transform: translateY(-6px); border-color: var(--pub-highlight); box-shadow: var(--pub-shadow); }
.pub .pub-card .ic{
    width: 52px; height: 52px; border-radius: 14px;
    background: var(--pub-highlight-soft); display: grid; place-items: center; margin-bottom: 1rem;
}
.pub .pub-card .ic svg{ width: 24px; height: 24px; stroke: var(--pub-highlight); fill: none; stroke-width: 1.7; }
.pub .pub-card h3{ font-size: 1.06rem; margin-bottom: .45rem; }
.pub .pub-card p{ color: var(--pub-muted); font-size: .89rem; margin: 0; line-height: 1.75; }

/* الأرقام */
.pub .pub-stat{ text-align: center; }
.pub .pub-stat b{
    display: block; font-family: var(--font-display);
    font-size: clamp(2rem, 4.6vw, 3.2rem); font-weight: 700;
    background: var(--pub-highlight-grad);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    line-height: 1.15;
}
.pub .pub-stat span{ color: var(--pub-muted); font-size: .85rem; }

/* ============================================================
   9) الأخبار
   ============================================================ */
.pub .pub-news{ display: grid; gap: 1.3rem; }
.pub .pub-news.c3{ grid-template-columns: repeat(3, 1fr); }
.pub .pub-news-item{
    background: var(--pub-surface);
    border: 1px solid var(--pub-line);
    border-radius: var(--radius);
    overflow: hidden; display: flex; flex-direction: column;
    transition: transform var(--dur) ease, border-color var(--dur) ease, box-shadow var(--dur) ease;
}
.pub .pub-news-item:hover{ transform: translateY(-6px); border-color: var(--pub-highlight); box-shadow: var(--pub-shadow); }
.pub .pub-news-item .ph{ height: 178px; overflow: hidden; background: var(--pub-veil); }
.pub .pub-news-item .ph img{ width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.pub .pub-news-item:hover .ph img{ transform: scale(1.07); }
.pub .pub-news-item .bd{ padding: 1.1rem 1.2rem 1.3rem; flex: 1; display: flex; flex-direction: column; }
.pub .pub-news-item .dt{ color: var(--pub-highlight); font-size: .74rem; font-weight: 600; letter-spacing: .06em; margin-bottom: .4rem; }
.pub .pub-news-item h3{ font-size: 1rem; margin-bottom: .5rem; }
.pub .pub-news-item p{ color: var(--pub-muted); font-size: .86rem; margin: 0 0 .9rem; flex: 1; }
.pub .pub-news-item .more{ color: var(--pub-accent-ink); font-size: .82rem; font-weight: 600; }

/* ============================================================
   10) المعرض
   ============================================================ */
.pub .pub-gal{ display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; }
.pub .pub-gal-item{
    position: relative; height: 210px; border-radius: var(--radius-sm);
    overflow: hidden; cursor: pointer; background: var(--pub-veil);
}
.pub .pub-gal-item img{ width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.pub .pub-gal-item:hover img{ transform: scale(1.08); }
.pub .pub-gal-item .ov{
    position: absolute; inset: 0; opacity: 0;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 1rem; transition: opacity var(--dur) ease;
    background: linear-gradient(0deg, rgba(22, 32, 46, .92), transparent 72%);
    color: var(--pub-on-media);
}
.pub .pub-gal-item:hover .ov{ opacity: 1; }
.pub .pub-gal-item .ov h4{ font-size: .95rem; color: var(--pub-on-media); }
.pub .pub-gal-item .ov span{ font-size: .76rem; opacity: .85; }

/* عارض الصورة */
.pub .pub-lightbox{
    position: fixed; inset: 0; z-index: 120;
    background: rgba(4, 8, 15, .93);
    display: grid; place-items: center; padding: 3rem 1.2rem;
    opacity: 0; visibility: hidden; transition: .35s;
}
.pub .pub-lightbox.open{ opacity: 1; visibility: visible; }
.pub .pub-lightbox img{ max-width: min(1100px, 92vw); max-height: 82vh; border-radius: var(--radius-sm); }
.pub .pub-lightbox .cap{ color: var(--pub-on-media); text-align: center; margin-top: .9rem; font-size: .9rem; }
.pub .pub-lb-x{
    position: absolute; inset-block-start: 22px; inset-inline-end: 26px;
    font-size: 2.2rem; color: var(--pub-on-media); background: none; border: 0; cursor: pointer; line-height: 1;
}
.pub .pub-lb-nav{
    position: absolute; inset-block-start: 50%; transform: translateY(-50%);
    width: 46px; height: 46px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08);
    color: var(--pub-on-media); cursor: pointer; display: grid; place-items: center;
}
.pub .pub-lb-nav.prev{ inset-inline-start: 22px; }
.pub .pub-lb-nav.next{ inset-inline-end: 22px; }
.pub .pub-lb-nav svg{ width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
[dir="rtl"] .pub .pub-lb-nav svg{ transform: scaleX(-1); }

/* ============================================================
   11) مجلس الإدارة
   ============================================================ */
.pub .pub-board{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.pub .pub-member{
    background: var(--pub-surface); border: 1px solid var(--pub-line);
    border-radius: var(--radius); padding: 1.5rem 1rem; text-align: center;
    transition: transform var(--dur) ease, border-color var(--dur) ease;
}
.pub .pub-member:hover{ transform: translateY(-5px); border-color: var(--pub-highlight); }
.pub .pub-member .av{
    width: 76px; height: 76px; border-radius: 50%;
    margin: 0 auto .8rem; display: grid; place-items: center;
    background: var(--pub-highlight-soft); color: var(--pub-highlight);
    font-family: var(--font-display); font-size: 1.5rem; font-weight: 700;
    border: 2px solid var(--pub-highlight);
}
.pub .pub-member h4{ font-size: .96rem; margin-bottom: .2rem; }
.pub .pub-member span{ color: var(--pub-muted); font-size: .8rem; }

/* ============================================================
   12) التواصل
   ============================================================ */
.pub .pub-contact{ display: grid; grid-template-columns: .85fr 1.15fr; gap: 2.6rem; }
.pub .pub-cline{ display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.4rem; }
.pub .pub-cline .ic{
    width: 44px; height: 44px; border-radius: 12px; flex: 0 0 auto;
    background: var(--pub-highlight-soft); display: grid; place-items: center;
}
.pub .pub-cline .ic svg{ width: 20px; height: 20px; stroke: var(--pub-highlight); fill: none; stroke-width: 1.8; }
.pub .pub-cline h4{ font-size: .92rem; margin-bottom: .15rem; }
.pub .pub-cline p{ color: var(--pub-muted); font-size: .87rem; margin: 0; }

.pub .pub-form{ display: grid; gap: .9rem; }
.pub .pub-form .row2{ display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.pub .pub-form input, .pub .pub-form textarea, .pub .pub-form select{
    width: 100%;
    background: var(--pub-surface); color: var(--pub-fg);
    border: 1px solid var(--pub-line); border-radius: var(--radius-sm);
    padding: .8rem 1rem; font: inherit; font-size: .92rem;
    transition: border-color var(--dur) ease, box-shadow var(--dur) ease;
}
.pub .pub-form textarea{ resize: vertical; min-height: 132px; }
.pub .pub-form input:focus, .pub .pub-form textarea:focus{
    outline: none; border-color: var(--pub-highlight);
    box-shadow: 0 0 0 3px var(--pub-highlight-soft);
}
.pub .pub-form ::placeholder{ color: var(--pub-faint); }
.pub .pub-form .pub-btn{ justify-self: start; }

.pub .pub-note{
    border-radius: var(--radius-sm); padding: .8rem 1.1rem;
    font-size: .88rem; border: 1px solid;
}
.pub .pub-note.ok{ background: var(--pub-ok-soft); border-color: var(--pub-ok); color: var(--pub-ok); }
.pub .pub-note.err{ background: var(--pub-err-soft); border-color: var(--pub-err); color: var(--pub-err); }

/* حقل الفخّ — مخفيٌّ عن الإنسان، مرئيٌّ للآلة */
.pub .pub-trap{ position: absolute; inset-inline-start: -9999px; opacity: 0; height: 0; }

/* ============================================================
   13) الصفحات الداخلية (تمرير طبيعي)
   ============================================================ */
.pub-flow{ min-height: 100vh; display: flex; flex-direction: column; }
.pub-flow .pub-body{ flex: 1; padding-block: calc(var(--pub-head-h) + 2.6rem) 3.6rem; }
.pub-flow .pub-page-head{
    padding-block: 1rem 2.2rem;
    border-bottom: 1px solid var(--pub-line);
    margin-bottom: 2.4rem;
}
.pub .pub-crumb{ font-size: .8rem; color: var(--pub-muted); margin-bottom: .6rem; }
.pub .pub-crumb a:hover{ color: var(--pub-highlight); }
.pub .pub-crumb .sp{ margin-inline: .4rem; color: var(--pub-faint); }

.pub .pub-foot{
    border-top: 1px solid var(--pub-line);
    background: var(--pub-veil);
    padding-block: 2.2rem 1.4rem;
}
.pub .pub-foot-in{
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
}
.pub .pub-foot small{ color: var(--pub-faint); font-size: .78rem; }
.pub .pub-foot nav{ display: flex; gap: 1.1rem; flex-wrap: wrap; font-size: .84rem; }
.pub .pub-foot nav a{ color: var(--pub-muted); }
.pub .pub-foot nav a:hover{ color: var(--pub-highlight); }

/* مقالة الخبر */
.pub .pub-article{ max-width: 820px; margin-inline: auto; }
.pub .pub-article .hero-ph{
    height: clamp(220px, 34vw, 400px); border-radius: var(--radius);
    overflow: hidden; margin-bottom: 1.8rem; background: var(--pub-veil);
}
.pub .pub-article .hero-ph img{ width: 100%; height: 100%; object-fit: cover; }
.pub .pub-article .meta{ color: var(--pub-highlight); font-size: .8rem; font-weight: 600; margin-bottom: .5rem; }
.pub .pub-article h1{ font-size: clamp(1.5rem, 3.2vw, 2.3rem); margin-bottom: 1.2rem; }
.pub .pub-article .body p{ color: var(--pub-muted); font-size: .98rem; line-height: 2; }

/* لوح محتوى نصّي */
.pub .pub-panel{
    background: var(--pub-surface); border: 1px solid var(--pub-line);
    border-radius: var(--radius); padding: 1.9rem 1.7rem;
}
.pub .pub-panel h3{ font-size: 1.1rem; margin-bottom: .7rem; }
.pub .pub-panel p{ color: var(--pub-muted); font-size: .92rem; }
.pub .pub-panel ul{ margin: 0; padding-inline-start: 1.2rem; color: var(--pub-muted); font-size: .92rem; }
.pub .pub-panel li{ margin-bottom: .45rem; }

.pub .pub-empty{
    text-align: center; padding: 3.5rem 1rem; color: var(--pub-muted);
    border: 1px dashed var(--pub-line); border-radius: var(--radius);
}

/* ============================================================
   المرساة — علامة الموقع البصريّة
   ------------------------------------------------------------
   جُرّبت أوّلاً في رأس عمود النقاط فسقطت التجربة: صورةٌ معدنيّةٌ
   بحبلٍ ملتفّ مضغوطةٌ في ثلاثين بكسلاً تفقد تفاصيلَها فتصير شكلاً
   رماديّاً غامضاً، ووظيفتُها مكرّرةٌ لأنّ النقطة الأولى تفعل فعلها.

   القاعدة التي خرجنا بها: هذا أصلٌ فوتوغرافيٌّ لا أيقونةٌ مسطّحة،
   فيُعامَل معاملةَ الصورة — كبيراً وخافتاً ونادراً، لا صغيراً
   متكرّراً. فصار في ثلاثة مواضع كلُّها كبيرة:

     أ) علامةٌ مائيّةٌ خلف نصّ شريحة البطل — أوّل ما يقع عليه البصر
     ب) ختمٌ يقتطعه طرفُ الشاشة في الشرائح الست الباقية
     ج) فاصلُ التذييل في الصفحات الداخلية (لا شرائحَ فيها)

   وهي دائماً خلف المحتوى (z-index: 0) وبشفافيّةٍ لا تُزاحم نصّاً.
   ============================================================ */

/* أ) علامةُ البطل المائيّة — في جهة النصّ، خلفه */
.pub .pub-hero::before{
    content: "";
    position: absolute; z-index: 0; pointer-events: none;
    inset-block-start: 50%;
    /* جهةُ البداية: يمينُ العربية ويسارُ الإنجليزية — أي جهةُ النصّ.
       وُضعت أوّلاً في جهة النهاية فاختفت تحت الصورة الفوتوغرافيّة. */
    inset-inline-start: 5%;
    width: clamp(260px, 29vw, 460px);
    aspect-ratio: 228 / 311;
    transform: translateY(-50%);
    background: url("../img/site/anchor.png") center/contain no-repeat;
    opacity: .11;
}
[data-mode="dark"] .pub .pub-hero::before{ opacity: .13; }

/* ب) ختمُ الحافّة — الشرائح الست التي تحمل الكلمة الخلفيّة.
      الكلمةُ عند بداية الأسفل والمرساةُ عند نهاية الوسط، فلا يلتقيان. */
.pub .pub-slide[data-word]::after{
    content: "";
    position: absolute; z-index: 0; pointer-events: none;
    inset-block-start: 46%;
    inset-inline-end: -9%;
    width: clamp(240px, 27vw, 430px);
    aspect-ratio: 228 / 311;
    transform: translateY(-50%);
    background: url("../img/site/anchor.png") center/contain no-repeat;
    opacity: .055;
}
[data-mode="dark"] .pub .pub-slide[data-word]::after{ opacity: .085; }

/* ج) فاصل التذييل: المرساة على خطٍّ شعريّ ينفتح من طرفيها */
.pub .pub-anchor-rule{
    display: flex; align-items: center; gap: 1.1rem;
    width: min(560px, 78%); margin: 0 auto 1.6rem;
}
.pub .pub-anchor-rule::before,
.pub .pub-anchor-rule::after{
    content: ""; flex: 1; height: 1px;
    background: linear-gradient(90deg, transparent, var(--pub-line), transparent);
}
.pub .pub-anchor-rule img{ width: 30px; height: auto; opacity: .5; }
[data-mode="dark"] .pub .pub-anchor-rule img{ opacity: .62; }

/* احتياطٌ للقائمة الفارغة — لا يظهر ما دام هناك محتوى */
.pub .pub-empty::before{
    content: ""; display: block;
    width: 46px; height: 62px; margin: 0 auto 1rem;
    background: url("../img/site/anchor.png") center/contain no-repeat;
    opacity: .35;
}
[data-mode="dark"] .pub .pub-empty::before{ opacity: .5; }

/* ============================================================
   14) الاستجابة
   ============================================================ */
@media (max-width: 1080px){
    .pub .pub-grid.c4, .pub .pub-board{ grid-template-columns: repeat(2, 1fr); }
    .pub .pub-head-mid{ display: none; }
}
@media (max-width: 900px){
    .pub .pub-slide[data-word]::before,
    .pub .pub-slide[data-word]::after,
    .pub .pub-hero::before{ display: none; }
    .pub .pub-slide-in{ padding-block: calc(var(--pub-head-h) + 12px) 22px; }

    .pub .pub-hero{ grid-template-columns: 1fr; }
    .pub .pub-hero-img{ inset: 0; width: 100%; opacity: .22; }
    .pub .pub-hero-img::before{
    content: ""; position: absolute; inset-inline: 0; inset-block-start: 0;
    height: calc(var(--pub-head-h) + 34px); z-index: 1;
    background: linear-gradient(180deg, var(--pub-bg), transparent);
}
.pub .pub-hero-img::after{ background: linear-gradient(180deg, var(--pub-bg) 4%, transparent 60%, var(--pub-bg) 100%); }
    .pub .pub-hero-txt{ position: relative; z-index: 2; }

    .pub .pub-grid.c2, .pub .pub-grid.c3, .pub .pub-grid.c4,
    .pub .pub-news.c3, .pub .pub-contact, .pub .pub-board{ grid-template-columns: 1fr; }
    .pub .pub-gal{ grid-template-columns: repeat(2, 1fr); }
    .pub .pub-gal-item{ height: 150px; }
    .pub .pub-form .row2{ grid-template-columns: 1fr; }

    .pub .pub-dots{ inset-inline-end: 12px; gap: 11px; }
    .pub .pub-dots a{ width: 7px; height: 7px; }
    .pub .pub-hero-foot .pub-scroll-hint{ display: none; }
}
@media (max-width: 560px){
    .pub .pub-brand .bs{ display: none; }
    .pub .pub-gal{ grid-template-columns: 1fr; }
    .pub .pub-gal-item{ height: 190px; }
}

@media (prefers-reduced-motion: reduce){
    .pub .pub-deck-el{ transition: none; }
    .pub *, .pub *::before, .pub *::after{ animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================
   15) الطباعة
   ============================================================ */
@media print{
    .pub .pub-head, .pub .pub-menu, .pub .pub-backdrop,
    .pub .pub-dots, .pub .pub-foot, .pub .pub-lightbox,
    .pub .pub-anchor-rule{ display: none !important; }
    .pub-deck{ overflow: visible !important; }
    .pub .pub-deck-el{ position: static !important; transform: none !important; }
    .pub .pub-slide{ height: auto !important; page-break-after: always; }
}