/* ==========================================================================
   طبقة الصنعة — تُحمَّل بعد كل المكوّنات فتَحكم فوقها.

   ثلاثة مبادئ:
   ١. الغلاف والقلب: لا سطح يجلس على الخلفية مسطّحًا. غلاف بحافة وحشوة،
      وقلب داخله بنصف قطر محسوب فتتراكز المنحنيات.
   ٢. الحافة شعيرة شفّافة لا رمادي مصمت، والفصل بظلّ منتشر لا بخطّ.
   ٣. الحركة بمنحنى فيزيائي، والدخول بكشف متدرّج — ويظهر كل شيء
      كاملًا إن غاب الجافاسكربت.
   ========================================================================== */

/* --- الغلاف والقلب --- */

.jl-shell {
    padding: var(--shell-pad);
    background: var(--edge-soft);
    border: 1px solid var(--edge);
    border-radius: var(--r-shell);
}

.jl-core {
    background: var(--surface);
    border: 1px solid var(--edge);
    border-radius: var(--r-core);
    box-shadow: var(--sheen);
}

/* --- الترويسة: جزيرة طافية --- */

.jl-site-header {
    position: sticky;
    top: 0;
    z-index: 30;
    background: none;
    border: 0;
    padding-block: var(--space-4) 0;
    display: block;
}

.jl-site-header__shell {
    max-width: var(--container);
    margin-inline: auto;
    background: color-mix(in srgb, var(--surface) 62%, transparent);
    backdrop-filter: blur(18px) saturate(140%);
    box-shadow: var(--shadow-1);
}

.jl-site-header__core {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-3) var(--space-4);
    background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.jl-site-header .jl-brand {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -0.03em;
    color: var(--ink);
    text-decoration: none;
    margin-inline-end: auto;
}

.jl-site-nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.jl-site-nav__link {
    display: block;
    padding: 8px var(--space-3);
    border-radius: var(--r-pill);
    font-size: 14.5px;
    color: var(--muted);
    text-decoration: none;
    transition: color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}

.jl-site-nav__link:hover {
    color: var(--ink);
    background: var(--edge-soft);
}

.jl-site-nav__link[aria-current='page'] {
    color: var(--ink);
    background: var(--edge-soft);
    box-shadow: none;
    font-weight: 500;
}

.jl-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.jl-site-nav__cta,
.jl-theme-toggle {
    border-radius: var(--r-pill);
    font-size: 14px;
    transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out),
        background var(--dur-1) var(--ease-out);
}

.jl-site-nav__cta {
    padding: 9px var(--space-4);
    background: var(--ink);
    color: var(--surface);
    border: 0;
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--shadow-1);
}

.jl-site-nav__cta:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-2);
}

.jl-site-nav__cta:active {
    transform: scale(0.98);
}

.jl-theme-toggle {
    padding: 8px var(--space-3);
    background: transparent;
    border: 1px solid var(--edge);
    color: var(--muted);
    cursor: pointer;
}

.jl-theme-toggle:hover {
    color: var(--ink);
    background: var(--edge-soft);
}

/* --- الهيرو: انقسام تحريري --- */

.jl-hero {
    background: none;
    border: 0;
    padding-block: var(--space-9) var(--space-8);
    margin-block-end: 0;
    position: relative;
    overflow: clip;
}

/*
 * هالة واحدة خافتة خلف الهيرو. ثابتة ولا تلتقط المؤشّر، فلا تكلّف
 * إعادة رسم أثناء التمرير.
 */
.jl-hero::before {
    content: '';
    position: absolute;
    inset-block-start: -30%;
    inset-inline-start: -10%;
    inline-size: 60%;
    block-size: 130%;
    background: radial-gradient(closest-side, var(--accent-soft), transparent 70%);
    opacity: 0.7;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   صورة الهيرو

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

   والتدرّج يبدأ من جهة النصّ لا من أعلى: النصّ في RTL يبدأ يمينًا،
   فالحجاب أكثفُ هناك وأخفّ حيث لا يقع عليه حرف.
   -------------------------------------------------------------------------- */

.jl-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: clip;
}

.jl-hero__media .jl-photo {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    opacity: 0.3;

    /* تلاشٍ إلى أسفل: بدونه ينتهي المشهد بخطٍّ أفقيّ حادّ يكشف أنه
       مستطيل ملصق لا خلفيةٌ للصفحة. */
    mask-image: linear-gradient(to bottom, #000 55%, transparent);
}

/*
 * الليلي يحتاج شدّةً أعلى لا أقلّ: السطح شبه أسود، فالصورة المكتومة
 * تذوب فيه فتصير لطخةً لا مشهدًا. تُرفع الشدّة ويُخفض السطوع قليلًا
 * كي تبقى وراء النصّ لا تنافسه.
 */
[data-theme='dark'] .jl-hero__media .jl-photo {
    opacity: 0.38;
    filter: brightness(0.85) saturate(0.9);
}

.jl-hero__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to var(--flow-end, left),
        var(--bg) 20%,
        color-mix(in srgb, var(--bg) 70%, transparent) 55%,
        color-mix(in srgb, var(--bg) 35%, transparent)
    );
}

.jl-hero__inner {
    position: relative;
    z-index: 1;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    gap: var(--space-8);
}

.jl-hero__eyebrow {
    border-radius: var(--r-pill);
    border-color: var(--edge);
    background: var(--surface);
    color: var(--muted);
    font-size: 11.5px;
    letter-spacing: 0.08em;
    box-shadow: var(--shadow-1);
}

.jl-hero__title {
    font-size: clamp(38px, 5.6vw, 68px);
    line-height: 1.08;
    letter-spacing: -0.04em;
    max-width: 14ch;
}

.jl-hero__lede {
    font-size: 18px;
    max-width: 44ch;
}

.jl-hero__form {
    max-width: none;
}

.jl-hero .jl-search__row {
    border: 1px solid var(--edge);
    border-radius: var(--r-pill);
    padding: var(--shell-pad);
    background: var(--surface);
    box-shadow: var(--shadow-2);
    gap: var(--space-1);
}

.jl-hero .jl-search__row:focus-within {
    border-color: var(--edge);
    box-shadow: var(--shadow-3);
}

.jl-hero .jl-search__row input[type='search'] {
    padding-inline: var(--space-5);
    border-radius: var(--r-pill);
}

.jl-hero .jl-search__row select {
    border: 0;
    border-radius: var(--r-pill);
    padding-inline: var(--space-4);
}

.jl-hero .jl-search__row button {
    border-radius: var(--r-pill);
    padding: 14px var(--space-6);
    transition: transform var(--dur-1) var(--ease-out), filter var(--dur-1) var(--ease-out);
}

.jl-hero .jl-search__row button:active {
    transform: scale(0.98);
}

.jl-stats {
    gap: var(--space-6);
}

.jl-stats__num {
    font-size: 34px;
    letter-spacing: -0.03em;
}

/* --- لوحة الهيرو الحيّة --- */

.jl-hero__shell {
    box-shadow: var(--shadow-3);
}

.jl-hero__core {
    padding: var(--space-5);
}

.jl-hero__panel-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
    padding-block-end: var(--space-3);
    border-block-end: 1px solid var(--edge);
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.jl-pulse {
    inline-size: 7px;
    block-size: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent);
    animation: jl-pulse 2.4s var(--ease-out) infinite;
}

@keyframes jl-pulse {
    70% { box-shadow: 0 0 0 8px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

.jl-mini {
    margin: 0;
    padding: 0;
    list-style: none;
}

.jl-mini__item + .jl-mini__item {
    border-block-start: 1px solid var(--edge-soft);
}

.jl-mini__link {
    display: grid;
    gap: 3px;
    padding: var(--space-3) var(--space-3);
    margin-inline: calc(var(--space-3) * -1);
    border-radius: var(--radius);
    text-decoration: none;
    transition: background var(--dur-1) var(--ease-out);
}

.jl-mini__link:hover {
    background: var(--edge-soft);
}

.jl-mini__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 15px;
    color: var(--ink);
}

.jl-mini__meta {
    font-size: 12.5px;
    color: var(--muted);
}

.jl-mini__pay {
    direction: ltr;
    unicode-bidi: isolate;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13px;
    color: var(--accent-text);
    font-variant-numeric: tabular-nums;
}

.jl-mini__all {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-block-start: var(--space-4);
    font-size: 14px;
    font-weight: 500;
    color: var(--accent-text);
    text-decoration: none;
}

/* السهم داخل قرصه الخاص — لا يقف عاريًا بجانب النصّ. */
.jl-chev {
    inline-size: 26px;
    block-size: 26px;
    border-radius: 50%;
    background: var(--accent-soft);
    display: grid;
    place-items: center;
    transition: transform var(--dur-2) var(--ease-spring), background var(--dur-1) var(--ease-out);
}

/*
 * الحدّان المنطقيّان end + block-end بدوران 45°: في RTL يقع inline-end
 * يسارًا فيشير السهم يسارًا، وفي LTR يمينًا — أي في اتجاه القراءة دائمًا
 * بلا قاعدة مستقلّة لكل اتجاه.
 */
.jl-chev::before {
    content: '';
    inline-size: 6px;
    block-size: 6px;
    border-inline-end: 1.5px solid var(--accent);
    border-block-end: 1.5px solid var(--accent);
    transform: rotate(45deg);
    margin-inline-end: 2px;
}

.jl-mini__all:hover .jl-chev {
    transform: translateX(-3px);
}

/* --- الأقسام والبطاقات --- */

.jl-home-section {
    max-width: var(--container);
    margin-block-end: var(--space-9);
}

.jl-section-head {
    border: 0;
    padding-block-end: 0;
    margin-block-end: var(--space-5);
}

.jl-section-head__title {
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 800;
    letter-spacing: -0.03em;
}

.jl-section-head__more {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.jl-collection-card,
.jl-split__panel,
.jl-notice,
.jl-term-grid a,
article.jl-job-card {
    border: 1px solid var(--edge);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
    transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out),
        border-color var(--dur-2) var(--ease-out);
}

.jl-collection-card:hover,
.jl-term-grid a:hover,
article.jl-job-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-2);
    border-color: var(--edge);
}

.jl-collection-card {
    padding: var(--space-5);
    border-radius: var(--r-shell);
}

.jl-split__panel,
.jl-notice {
    border-radius: var(--r-shell);
    padding: var(--space-7);
}

/* --------------------------------------------------------------------------
   صور البطاقات واللوحات

   الصورة تجلس خلف النصّ لا فوقه ولا مكانه: البطاقة تبقى بطاقةً يُقرأ
   عنوانها، والصورة تعطيها موضوعًا. ومنطقُها واحد في الموضعين، فتُكتب
   مرّة: تملأ السطح، وتتلاشى من جهة النصّ، وتخفت حتى لا تنافس ما فوقها.
   -------------------------------------------------------------------------- */

.jl-collection-card,
.jl-split__panel {
    position: relative;
    isolation: isolate;
    overflow: clip;
}

.jl-collection-card__media,
.jl-split__media {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: block;
    pointer-events: none;
}

.jl-collection-card__media .jl-photo,
.jl-split__media .jl-photo {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    opacity: 0.16;
}

[data-theme='dark'] .jl-collection-card__media .jl-photo,
[data-theme='dark'] .jl-split__media .jl-photo {
    opacity: 0.24;
    filter: brightness(0.9) saturate(0.9);
}

/* الحجاب من جهة النصّ: كثيفٌ حيث تقع الحروف، ورقيقٌ حيث لا تقع. */
.jl-collection-card__media::after,
.jl-split__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to var(--flow-end, left),
        var(--surface) 30%,
        color-mix(in srgb, var(--surface) 55%, transparent)
    );
}

/* البطاقة تُضيء صورتها عند المرور — إشارةٌ إلى أنها رابط لا لوحة. */
.jl-collection-card:hover .jl-photo,
.jl-split__panel:hover .jl-photo {
    opacity: 0.24;
    transition: opacity var(--dur-2) var(--ease-out);
}

[data-theme='dark'] .jl-collection-card:hover .jl-photo,
[data-theme='dark'] .jl-split__panel:hover .jl-photo {
    opacity: 0.34;
}

article.jl-job-card {
    border-inline-start-width: 1px;
    padding: var(--space-5);
}

article.jl-job-card:hover {
    border-inline-start-color: var(--edge);
}

/* --- الأزرار --- */

.jl-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 13px var(--space-6);
    border-radius: var(--r-pill);
    box-shadow: var(--shadow-1);
    transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}

.jl-button:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-2);
}

.jl-button:active {
    transform: scale(0.98);
}

/* --- الكشف عند التمرير --- */

/*
 * الإخفاء مشروط بوجود الجافاسكربت: بدونه تظهر الصفحة كاملة، وهو
 * الوضع الافتراضي. عنصر مخفيّ لا يعيده شيء أسوأ من عنصر بلا حركة.
 */
.js [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
}

.js [data-reveal].is-in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .js [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .jl-pulse {
        animation: none;
    }
}

/* --- الاستجابة --- */

@media (max-width: 980px) {
    .jl-hero__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-6);
    }

    .jl-hero {
        padding-block: var(--space-7) var(--space-6);
    }
}

@media (max-width: 720px) {
    .jl-site-header {
        padding-block-start: var(--space-2);
    }

    .jl-site-header__core {
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .jl-hero .jl-search__row {
        border-radius: var(--r-shell);
    }

    .jl-hero .jl-search__row input[type='search'],
    .jl-hero .jl-search__row select,
    .jl-hero .jl-search__row button {
        flex: 1 1 100%;
        border-radius: var(--radius);
    }

    .jl-split__panel,
    .jl-notice,
    .jl-collection-card {
        padding: var(--space-5);
    }
}

/* --- مرساة البطاقة --- */

article.jl-job-card {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        'mark title   title'
        'mark company company'
        'mark meta    foot';
    column-gap: var(--space-4);
}

.jl-job-card__mark {
    grid-area: mark;
    align-self: start;
    inline-size: 44px;
    block-size: 44px;
    border-radius: var(--radius);
    border: 1px solid var(--edge);
    background: var(--surface-2);
    display: grid;
    place-items: center;
    overflow: hidden;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 17px;
    color: var(--muted);
    user-select: none;
}

.jl-job-card__mark img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
    padding: 5px;
}

@media (max-width: 560px) {
    article.jl-job-card {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            'mark title'
            'mark company'
            'meta meta'
            'foot foot';
    }
}

/* ==========================================================================
   الهوية اللونية والأيقونات
   ========================================================================== */

/* --- الأيقونات --- */

.jl-icon {
    inline-size: 1em;
    block-size: 1em;
    flex: 0 0 auto;
    vertical-align: -0.14em;
    margin-inline-end: 6px;
    color: currentColor;
    opacity: 0.72;
}

.jl-job-card__meta .jl-icon {
    font-size: 15px;
}

.jl-job-card__remote .jl-icon,
.jl-icon--pay {
    opacity: 1;
    color: var(--accent-text);
}

.jl-icon--pay {
    font-size: 15px;
}

/* --- العلامة --- */

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

.jl-brand__mark {
    inline-size: 30px;
    block-size: 30px;
    border-radius: 9px;
    box-shadow: var(--shadow-1);
}

/* --------------------------------------------------------------------------
   النصّ الملوَّن يأخذ --accent-text لا --accent

   ‏#18DCFF على أبيض 1.65:1. أي نصّ به على سطح فاتح غير مقروء، فالنصوص
   والروابط تُصرَف إلى الدرجة الأعمق من نفس العائلة، ويبقى اللون الساطع
   للأسطح الممتلئة وحدها.
   -------------------------------------------------------------------------- */

.jl-section-head__more,
.jl-notice__link,
.jl-mini__all,
.jl-mini__pay,
.jl-job-card__title a:hover,
.jl-job-card__company a:hover,
.jl-term-grid a:hover,
.jl-collection-card:hover .jl-collection-card__title,
.jl-site-nav__link:hover,
.jl-facet a[aria-current='true'],
.jl-filters a[aria-current='true'],
.jl-job-card__remote {
    color: var(--accent-text);
}

.jl-chev {
    background: var(--accent-soft);
}

.jl-chev::before {
    border-color: var(--accent-text);
}

/* --- الأسطح الممتلئة: هنا يعيش اللون الساطع --- */

/* كل سطح ممتلئ باللون في المنصّة يأخذ التدرّج نفسه — الهوية واحدة
   سواء كان الزرّ في الهيرو أو في لوحة صاحب العمل. */
.jl-button,
.jl-hero .jl-search__row button,
.jl-search__row button,
.jl-apply,
button.jl-apply,
.jl-account form button[type="submit"],
.jl-account--employer .jl-emp-btn--primary,
.jl-account--employer .jl-emp-actions button.jl-emp-actions__go,
.jl-account--employer .jl-applicant__decide button,
.jl-account--employer .jl-emp-filter button,
.jl-companies-page .page-numbers.current,
.jl-meter__fill,
.jl-account--employer .jl-emp-meter__fill {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
    color: var(--accent-ink);
    border: 0;
    font-weight: 700;
}

.jl-button--ghost {
    background: transparent;
    color: var(--accent-text);
    border: 1px solid var(--edge);
}

.jl-button--ghost:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.jl-site-nav__cta {
    background: var(--ink);
    color: var(--surface);
}

.jl-pulse {
    background: var(--brand-2);
}

/* الحافة المميّزة على البطاقة والتنبيه تأخذ اللون الساطع نفسه —
   الحافة سطحٌ لا نصّ، فلا يقيّدها التباين النصّي. */
.jl-notice {
    border-inline-start-color: var(--brand-2);
}

article.jl-job-card:hover {
    border-inline-start-color: var(--brand-2);
}

/* --- هالة الهيرو بلون الهوية --- */

.jl-hero::before {
    background: radial-gradient(closest-side,
        color-mix(in srgb, var(--brand) 26%, transparent),
        transparent 72%);
    opacity: 0.55;
}

[data-theme='dark'] .jl-hero::before {
    opacity: 0.22;
}

/* --------------------------------------------------------------------------
   مرساة البطاقة حين لا شعار

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

   والاشتقاق من الاسم لا عشوائيّ: الشركة نفسها تحمل هيئتها نفسها في كل
   صفحة وفي كل زيارة، وإلا لم تكن علامةً بل زخرفةً متبدّلة.
   -------------------------------------------------------------------------- */

.jl-job-card__mark {
    background: var(--accent-soft);
    color: var(--accent-text);
    border-color: var(--edge);
}

.jl-job-card__mark--v0 { background: linear-gradient(140deg, var(--accent-soft), color-mix(in srgb, var(--brand) 18%, var(--surface))); }
.jl-job-card__mark--v1 { background: linear-gradient(210deg, var(--accent-soft), color-mix(in srgb, var(--brand-2) 22%, var(--surface))); }
.jl-job-card__mark--v2 { background: linear-gradient(60deg, color-mix(in srgb, var(--brand) 14%, var(--surface)), var(--accent-soft)); }
.jl-job-card__mark--v3 { background: linear-gradient(300deg, var(--accent-soft), color-mix(in srgb, var(--accent) 20%, var(--surface))); }
.jl-job-card__mark--v4 { background: linear-gradient(20deg, color-mix(in srgb, var(--brand-2) 16%, var(--surface)), var(--accent-soft)); }
.jl-job-card__mark--v5 { background: linear-gradient(255deg, var(--accent-soft), color-mix(in srgb, var(--brand) 24%, var(--surface))); }

/* --- الأيقونة الدائرية: تسبق العنوان في البطاقات واللوحين والتنبيه --- */

.jl-collection-card__icon,
.jl-split__icon,
.jl-notice__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 42px;
    block-size: 42px;
    margin-block-end: var(--space-3);
    border-radius: 13px;
    background: var(--accent-soft);
    color: var(--accent-text);
    /* حافة داخلية فاتحة تعطي القرص سُمكًا بدل أن يبدو بقعةً مسطّحة. */
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 60%);
    transition: transform var(--dur-2) var(--ease-out),
                background-color var(--dur-2) var(--ease-out);
}

[data-theme='dark'] .jl-collection-card__icon,
[data-theme='dark'] .jl-split__icon,
[data-theme='dark'] .jl-notice__icon {
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%);
}

.jl-collection-card__icon .jl-icon,
.jl-split__icon .jl-icon,
.jl-notice__icon .jl-icon {
    inline-size: 21px;
    block-size: 21px;
}

/* البطاقة كلّها هي المحفّز، فالقرص يتحرّك عند تمرير المؤشّر عليها. */
.jl-collection-card:hover .jl-collection-card__icon {
    transform: translateY(-2px);
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    color: var(--accent-ink);
}

/* التنبيه تحذيرٌ لا ترويج: يبقى محايدًا حتى لا يُقرأ كدعوة. */
.jl-notice__icon {
    background: var(--surface-2);
    color: var(--ink);
}

/* --- أيقونة زرّ البحث --- */

.jl-hero .jl-search__row button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.jl-hero .jl-search__row button .jl-icon {
    inline-size: 17px;
    block-size: 17px;
    stroke-width: 1.7;
}

/* --- البطاقة العريضة: الراتب في عمود مُعلَن لا في فراغ --- */

/* عند 900px فأكثر تتّسع البطاقة حتى يبتعد الراتب عن العنوان مسافةً
   تُقرأ كفراغ لا كتنسيق. الفصل بخطّ شعري وعمود ثابت يعيدها بنيةً. */
@media (min-width: 900px) {
    article.jl-job-card {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            'mark title   foot'
            'mark company foot'
            'mark meta    foot';
        align-items: center;
    }

    .jl-job-card__foot {
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        gap: var(--space-1);
        margin: 0;
        padding-inline-start: var(--space-5);
        border-inline-start: 1px solid var(--edge-soft);
        text-align: end;
        min-inline-size: 150px;
    }
}

/* الأيقونة والراتب وحدةٌ واحدة: بدونها يفصلهما التكديس العمودي سطرين. */
.jl-job-card__pay {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

/* --- نسيج خلفي على الألواح الكبيرة --- */

/* لوح فارغ بلون واحد يقرأ مسطّحًا مهما حسُن ظلّه. النسيج يمنحه سطحًا،
   وهو متلاشٍ ومحصور في ::after فلا يعترض نقرًا ولا يعيد الرسم. */
.jl-split__panel,
.jl-hero__panel {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.jl-split__panel::after,
.jl-hero__panel::after {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    inline-size: 240px;
    block-size: 240px;
    background: url('../../img/mesh.svg') no-repeat 0 0 / 240px 240px;
    opacity: 0.5;
    pointer-events: none;
    z-index: -1;
}

[data-theme='dark'] .jl-split__panel::after,
[data-theme='dark'] .jl-hero__panel::after {
    opacity: 0.32;
}