/*
 * =====================================================================
 * شاشةُ اختيار نوع الدخول — Entry chooser
 * =====================================================================
 * **معجمٌ ببادئة `entry-`**، لا يشارك الهبوطَ ولا الإدارةَ ولا البوابة.
 *
 * **والسببُ أن هذه الصفحةَ تُقدِّم بوابتين ولا تسكن إحداهما**: أنماطُ الهبوط
 * تحمل قائمتَه وأقسامَه التسويقيّة، **وصفحةُ مفترقٍ لا تحتاج منها سطرًا**،
 * وحملُها كلَّها لأجل أربع بطاقاتٍ يجرّ خمسةً وثلاثين كيلوبايتًا بلا مستعمِل.
 *
 * **ولا لونَ خامًّا**: الرموزُ من `themes/*.css` — **ومنها رموزُ الهبوط
 * (`--color-landing-*`)** لأن هذه الصفحةَ في شجرته البصريّة وإن لم تحمل
 * أنماطَه — والبنيويّةُ من `core/css/base.css`.
 *
 * **ونقطةُ توقّفٍ اثنتان**: 980 تُسقط لوحةَ الجانب تحت الأبواب، و768 تجعل
 * البطاقةَ صفًّا — **والحدُّ الذي ينكسر عنده الشيء هو الحدُّ الذي يُنظر إليه**.
 */

.entry-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--color-landing-bg);
}

.entry-shell {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding-inline: var(--space-5);
}

.entry-skip {
    position: absolute;
    inset-inline-start: -9999px;
    top: var(--space-2);
    z-index: 30;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-md);
}

.entry-skip:focus {
    inset-inline-start: var(--space-4);
}

/* ==================== الشريطُ العلويّ ==================== */

/*
 * **وأرضيّةُ الشريط رمزٌ خاصٌّ بها** — **ولا تُشتقّ من `--color-landing-deep`**:
 * ذاك يقلب دورَه بين السمتين فيصلح حبرًا ولا يصلح أرضيّة.
 */
.entry-strip {
    background-color: var(--color-entry-bar);
    color: var(--color-entry-bar-ink);
}

.entry-strip-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    min-height: 46px;
    padding-block: var(--space-2);
}

.entry-phone {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-entry-bar-ink);
    font-size: var(--text-sm);
    font-weight: 700;
}

.entry-phone:hover {
    color: var(--color-landing-gold);
}

.entry-phone svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.entry-tools {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.entry-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background-color: rgba(255, 255, 255, .12);
    color: var(--color-entry-bar-ink);
    font-family: inherit;
    font-size: calc(var(--text-sm) * .95);
    font-weight: 700;
    cursor: pointer;
    transition: background-color var(--transition), border-color var(--transition);
}

.entry-tool:hover {
    border-color: rgba(255, 255, 255, .45);
    background-color: rgba(255, 255, 255, .2);
    color: var(--color-entry-bar-ink);
}

.entry-tool-icon {
    min-width: 34px;
    padding-inline: var(--space-2);
}

.entry-tool svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ==================== شريطُ العلامة ==================== */

.entry-brandbar {
    border-bottom: 1px solid var(--border);
    background-color: var(--surface);
}

.entry-brandbar-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding-block: var(--space-4);
}

.entry-logo {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.entry-mark {
    width: 54px;
    height: 54px;
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.entry-mark-crescent {
    fill: var(--color-landing-gold);
    stroke: none;
}

.entry-mark-pulse {
    stroke: var(--primary);
}

.entry-brandbar-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

.entry-brandbar-copy strong {
    color: var(--color-landing-deep);
    font-size: var(--text-lg);
}

.entry-brandbar-copy small {
    color: var(--text-muted);
    font-size: var(--text-sm);
}

/* ==================== الجسم ==================== */

.entry-main {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    padding-block: var(--space-8);
    background-color: var(--color-landing-hero);
    overflow: hidden;
}

/*
 * **نقشُ الخلفيّة شبكةٌ لا صورة**: تدرّجان متقاطعان **بلا طلبِ شبكةٍ ولا
 * كيلوبايتٍ يُحمَّل** — وهو نظيرُ ما تفعله ترويسةُ الهبوط حرفًا.
 */
.entry-pattern {
    position: absolute;
    inset: 0;
    opacity: .5;
    background-image:
        linear-gradient(var(--color-landing-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--color-landing-line) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(circle at 50% 40%, var(--text), transparent 72%);
}

.entry-grid {
    position: relative;
    display: grid;
    grid-template-columns: .82fr 1.18fr;
    align-items: center;
    gap: var(--space-8);
}

/* ==================== لوحةُ الجانب ==================== */

.entry-aside {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--color-landing-line);
    border-radius: 22px;
    background-color: var(--color-landing-glass);
    /* **وزجاجٌ خلف اللوحة** — **ونقشُ الخلفيّة يبقى مرئيًّا تحتها** فلا تصير كتلةً مصمتة. */
    backdrop-filter: blur(6px);
    box-shadow: 0 18px 44px var(--color-landing-glow);
}

/* ==================== صورةُ المبنى ==================== */

/*
 * **والنسبةُ مثبَّتة** — **وصورةٌ ترتفع أو تنخفض عند التحميل تقفز بالتخطيط**،
 * وأبعادُ المرفوعة غيرُ معلومةٍ وقتَ الرسم.
 */
/*
 * **والنسبةُ مثبَّتة** — **وصورةٌ ترتفع أو تنخفض عند التحميل تقفز بالتخطيط**،
 * وأبعادُ المرفوعة غيرُ معلومةٍ وقتَ الرسم.
 */
.entry-visual {
    position: relative;
    margin: 0;
    aspect-ratio: 5 / 4;
    overflow: hidden;
    border-radius: 16px;
    background-color: var(--color-landing-hero);
}

/*
 * **والقصُّ من الأعلى لا من الوسط**: مبنًى مصوَّرٌ من أسفلَ ثقلُه في أعلاه —
 * **ووسطُ الصورةِ جدارٌ لا مبنى**. وقِيس ذلك: قصٌّ تلقائيٌّ بالوسط ابتلع
 * السماءَ وشكلَ الكتلة فصارت الصورةُ نسيجًا لا عمارة.
 */
.entry-visual-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

/*
 * **وصورةٌ نهاريّةٌ ساطعةٌ وسط صفحةٍ داكنة تُبهر العين** — فتُخفَّض قليلًا في
 * السمة الداكنة. **وليس لونًا يُعرَّف خارج ملفّ السمة**، بل مرشِّحٌ على الصورة.
 */
:root[data-theme="dark"] .entry-visual-photo {
    filter: brightness(.9) saturate(.94);
}

.entry-aside-copy {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-inline: var(--space-2);
}

.entry-aside-kicker {
    align-self: flex-start;
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-landing-line);
    border-radius: var(--radius-full);
    background-color: var(--surface);
    color: var(--primary);
    font-size: calc(var(--text-sm) * .92);
    font-weight: 800;
}

.entry-aside-title {
    margin: 0;
    color: var(--color-landing-deep);
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: 1.55;
}

.entry-aside-title em {
    display: block;
    color: var(--primary);
    font-style: normal;
}

.entry-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 0;
}

.entry-stat {
    padding: var(--space-3);
    border: 1px solid var(--color-landing-line);
    border-radius: 14px;
    background-color: var(--surface);
    text-align: center;
}

.entry-stat-value {
    color: var(--primary-dark);
    font-size: var(--text-lg);
    font-weight: 800;
}

.entry-stat-label {
    margin: var(--space-1) 0 0;
    color: var(--text-muted);
    font-size: calc(var(--text-sm) * .95);
}

/* ==================== الأبواب ==================== */

.entry-choice {
    display: flex;
    flex-direction: column;
}

.entry-eyebrow {
    display: inline-flex;
    align-self: flex-start;
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-landing-line);
    border-radius: var(--radius-full);
    background-color: var(--surface);
    color: var(--primary);
    font-size: calc(var(--text-sm) * .95);
    font-weight: 800;
}

/*
 * **والعنوانُ يتنفّس مع الشاشة** (`clamp`): **مقاسٌ ثابتٌ يصغر على المكتب
 * ويكبر على الهاتف** — والحدّان مكتوبان فلا ينفلت.
 */
.entry-heading {
    margin: var(--space-2) 0 var(--space-5);
    color: var(--color-landing-deep);
    font-size: clamp(1.75rem, 3.4vw, 2.6rem);
    letter-spacing: -.02em;
    line-height: 1.2;
}

.entry-doors {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.entry-door {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-5);
    /* **ومكانُ السهم محجوزٌ لا متروك** — **ونصٌّ يمرّ تحته يُقرأ مقطوعًا**. */
    padding-inline-end: var(--space-8);
    border: 1px solid var(--border);
    border-radius: 18px;
    background-color: var(--surface);
    box-shadow: var(--shadow-sm);
    color: var(--text);
    overflow: hidden;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

/*
 * **وشريطُ اللون يظهر عند التصويب** — **وحدٌّ يتلوّن وحدَه يُقرأ عيبًا في
 * الرسم**، وهذا يقول «هذه البطاقةُ هي المقصودة» بلا أن يزيح شيئًا.
 */
.entry-door::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 4px;
    background-color: var(--primary);
    opacity: 0;
    transition: opacity var(--transition);
}

.entry-door:hover {
    border-color: var(--color-landing-accent);
    box-shadow: 0 16px 36px var(--color-landing-glow);
    color: var(--text);
    transform: translateY(-3px);
}

.entry-door:hover::before,
.entry-door:focus-visible::before {
    opacity: 1;
}

.entry-door-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    border-radius: 15px;
    background-color: var(--color-primary-soft);
    color: var(--primary-dark);
    transition: background-color var(--transition), color var(--transition), transform var(--transition);
}

.entry-door:hover .entry-door-icon {
    transform: scale(1.06);
    background-color: var(--primary);
    color: var(--on-accent);
}

.entry-door-icon svg {
    width: 27px;
    height: 27px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.entry-door-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.entry-door-title {
    color: var(--color-landing-deep);
    font-size: var(--text-md);
    font-weight: 800;
}

.entry-door-text {
    color: var(--text-muted);
    font-size: var(--text-sm);
    line-height: 1.7;
}

/*
 * **وسطرُ «بحساب المنشأة» يُقال قبل الضغط لا بعده**: ثلاثُ بطاقاتٍ تقود إلى
 * بابٍ واحد (‏قرارُ المالك أن تكون أربعًا كالمرجع)، **ومن ضغط «الأطباء» ثمّ
 * وجد شاشةً باسمٍ آخر يظنّ أنه أخطأ الطريق**.
 */
.entry-door-hint {
    align-self: flex-start;
    margin-top: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    background-color: var(--surface-muted);
    color: var(--text-muted);
    font-size: calc(var(--text-sm) * .85);
    font-weight: 700;
}

/* **والسهمُ يقول إن البطاقةَ تقود إلى مكان** — ولا يُقرأ نصًّا فهو زخرفة. */
.entry-door-go {
    position: absolute;
    inset-inline-end: var(--space-4);
    top: var(--space-5);
    color: var(--border-strong);
    transition: color var(--transition), transform var(--transition);
}

.entry-door:hover .entry-door-go {
    color: var(--primary);
    transform: translateX(3px);
}

[dir="rtl"] .entry-door:hover .entry-door-go {
    transform: translateX(-3px);
}

.entry-door-go svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* **والسهمُ يتّجه مع القراءة**: يمينًا في اللاتينيّة، ويسارًا في العربيّة. */
[dir="rtl"] .entry-door-go svg {
    transform: scaleX(-1);
}

/* ==================== التذييل ==================== */

.entry-footer {
    background-color: var(--color-entry-bar);
    color: var(--color-entry-bar-ink);
}

.entry-footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-2) var(--space-5);
    padding-block: var(--space-4);
    text-align: center;
}

.entry-footer-line {
    font-size: var(--text-sm);
    opacity: .9;
}

.entry-footer-line strong {
    color: var(--color-landing-gold);
}

.entry-footer-rights {
    flex-basis: 100%;
    padding-top: var(--space-2);
    border-top: 1px solid rgba(255, 255, 255, .16);
    font-size: calc(var(--text-sm) * .9);
    opacity: .75;
}

/* ==================== اللوح والهاتف ==================== */

@media (max-width: 979px) {
    .entry-grid {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    /* **والأبوابُ أوّلًا على اللوح** — **ومن جاء ليدخل لا ليقرأ إحصاءً**. */
    .entry-choice {
        order: -1;
    }
}

@media (max-width: 767px) {
    .entry-shell {
        padding-inline: var(--space-4);
    }

    .entry-main {
        padding-block: var(--space-6);
    }

    .entry-doors,
    .entry-stats {
        grid-template-columns: 1fr;
    }

    .entry-brandbar-inner {
        gap: var(--space-3);
    }

    /* **والسهمُ يُخفى على الهاتف فيُستردّ مكانُه** — البطاقةُ عرضُ الشاشة كلِّه. */
    .entry-door {
        padding-inline-end: var(--space-5);
    }

    .entry-door-go {
        display: none;
    }
}

/* **ومن طلب سكونَ الحركة طلبه لأنّها تؤذيه**. */
@media (prefers-reduced-motion: reduce) {
    .entry-page *,
    .entry-page *::before,
    .entry-page *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}