/* ════════════════════════════════════════════════════════════════
   صفحة خط الإنتاج.

   الهوية نفسها التى فى بقية الموقع: أسود وذهبى وخط Cairo. والفارق
   عن صفحة المنتج مقصود — خط الإنتاج ليس معدةً واحدة بل رحلة، فبنيت
   الصفحة حول تلك الرحلة.

   المقاسات كلها بوحدات نسبية وشبكات تنهار من عمودين إلى عمود، فلا
   يوجد فى الملف عرضٌ ثابت بالبكسل يكسر شاشةً صغيرة.
   ════════════════════════════════════════════════════════════════ */

.line-page {
    --l-ink: #0a0a0a;
    --l-gold: #d4a017;
    --l-gold-soft: #f0c75e;
    --l-soft: #faf6ec;
    --l-border: #e8dfc4;
    --l-muted: #6b6b6b;
}

/* ══════════ الترويسة ══════════ */

.line-hero {
    background: linear-gradient(160deg, #0a0a0a 0%, #1c1a13 100%);
    color: #fff;
    padding: 46px 0 40px;
}

.line-hero__kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
    margin-bottom: 14px;
    border: 1px solid rgba(240, 199, 94, .4);
    border-radius: 30px;
    color: var(--l-gold-soft);
    font-size: .82rem;
    font-weight: 600;
}

.line-hero h1 {
    margin: 0 0 10px;
    font-size: clamp(1.55rem, 4vw, 2.5rem);
    font-weight: 900;
    line-height: 1.3;
    color: #fff;
}

.line-hero__sub {
    margin: 0;
    max-width: 720px;
    color: #cfcabb;
    font-size: 1.02rem;
}

/* ── الأرقام البارزة ── */

.line-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
    gap: 12px;
    margin-top: 26px;
}

.line-stat {
    padding: 14px 16px;
    border: 1px solid rgba(240, 199, 94, .22);
    border-radius: 13px;
    background: rgba(255, 255, 255, .06);
}

.line-stat i { color: var(--l-gold-soft); font-size: 1.05rem; }

.line-stat b {
    display: block;
    margin-top: 6px;
    color: #fff;
    font-size: 1.3rem;
    font-weight: 900;
    line-height: 1.35;
}

.line-stat span {
    display: block;
    color: #a8a294;
    font-size: .79rem;
    font-weight: 600;
}

/* ══════════ الأقسام ══════════ */

.line-sec { padding: 44px 0; }
.line-sec--soft { background: var(--l-soft); }
.line-sec--top { padding-top: 38px; }

.line-head { margin-bottom: 22px; }

.line-head span {
    display: block;
    color: var(--l-gold);
    font-size: .83rem;
    font-weight: 800;
    letter-spacing: .5px;
}

.line-head h2 {
    margin: 4px 0 0;
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: 900;
    color: var(--l-ink);
}

.line-head p {
    margin: 8px 0 0;
    max-width: 640px;
    color: var(--l-muted);
    font-size: .94rem;
}

/* ══════════ الصور + باختصار ══════════ */

.line-top {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 22px;
    align-items: start;
}

.line-gallery__main {
    width: 100%;
    border-radius: 15px;
    border: 1px solid var(--l-border);
}

.line-gallery__thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap: 8px;
    margin-top: 8px;
}

.line-thumb {
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: none;
    cursor: pointer;
    overflow: hidden;
    line-height: 0;
}

.line-thumb img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 9px;
    opacity: .72;
    transition: opacity .15s ease;
}

.line-thumb:hover img { opacity: .92; }
.line-thumb.is-active img { opacity: 1; outline: 2px solid var(--l-gold); outline-offset: -2px; }
.line-thumb:focus-visible { outline: 2px solid var(--l-gold); outline-offset: 2px; }

.line-brief {
    padding: 22px;
    border: 1px solid var(--l-border);
    border-radius: 16px;
    background: #fff;
}

.line-brief__label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #1f7a4d;
    font-size: .86rem;
    font-weight: 800;
}

.line-brief p { margin: 10px 0 0; font-size: 1rem; line-height: 1.8; }

.line-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 10px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.line-facts li {
    padding: 10px 13px;
    border: 1px solid var(--l-border);
    border-radius: 11px;
    background: var(--l-soft);
}

.line-facts span { display: block; color: var(--l-muted); font-size: .76rem; font-weight: 700; }
.line-facts b { display: block; margin-top: 2px; font-size: .95rem; font-weight: 900; }

/* ══════════ رحلة العلف ══════════

   الخيط الرأسى والأرقام على جانبه: الشكل نفسه يقول إن هذه خطوات
   متتابعة لا قائمة مبعثرة. ويبقى رأسيًا على كل المقاسات — الرحلة
   الحقيقية رأسية، والمصنع يُبنى طابقًا فوق طابق. */

.line-flow-section { padding: 44px 0; background: var(--l-soft); }

.line-flow {
    position: relative;
    padding-inline-start: 38px;
}

.line-flow::before {
    content: "";
    position: absolute;
    inset-inline-start: 15px;
    top: 14px;
    bottom: 14px;
    width: 2px;
    background: linear-gradient(180deg, var(--l-gold) 0%, var(--l-border) 100%);
}

.line-step {
    position: relative;
    margin-bottom: 12px;
    padding: 15px 18px;
    border: 1px solid var(--l-border);
    border-radius: 14px;
    background: #fff;
    transition: box-shadow .18s ease, transform .18s ease;
}

.line-step:hover {
    box-shadow: 0 6px 22px rgba(212, 160, 23, .14);
    transform: translateX(-3px);
}

/* الرقم يُقرأ من data-n لا من عدّاد CSS: المرحلة قد تُحذف من
   المحرّر فيعيد جافاسكربت الترقيم، والسمة تتغيّر معه. */
.line-step::before {
    content: attr(data-n);
    position: absolute;
    inset-inline-start: -38px;
    top: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    border-radius: 50%;
    background: var(--l-gold);
    color: var(--l-ink);
    font-size: .9rem;
    font-weight: 900;
    box-shadow: 0 0 0 4px var(--l-soft);
}

.line-step__title {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin: 0;
    font-size: 1.03rem;
    font-weight: 800;
}

.line-step__title > i { color: var(--l-gold); }

.line-step p {
    margin: 5px 0 0;
    color: var(--l-muted);
    font-size: .9rem;
}

.line-step__note {
    display: inline-block;
    margin-top: 7px;
    padding: 3px 10px;
    border: 1px dashed var(--l-border);
    border-radius: 20px;
    background: #fff8e6;
    color: #8a6d3b;
    font-size: .79rem;
}

.line-step__link {
    margin-inline-start: auto;
    color: var(--l-gold);
    font-size: .83rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.line-step__link:hover { text-decoration: underline; }

/* ── المرحلة الاختيارية ──
   باهتة بإطار متقطّع: تقول «خيار» لا «نقص». */

.line-step.is-optional {
    opacity: .74;
    border-style: dashed;
}

.line-step__tag {
    padding: 2px 9px;
    border-radius: 20px;
    background: #eee;
    color: #666;
    font-size: .72rem;
    font-weight: 700;
}

/* ══════════ المواصفات ══════════ */

.line-specs { overflow-x: auto; }

.line-specs table {
    width: 100%;
    min-width: 320px;
    border-collapse: collapse;
    border: 1px solid var(--l-border);
    border-radius: 13px;
    overflow: hidden;
    background: #fff;
}

.line-specs th {
    padding: 12px 15px;
    background: var(--l-ink);
    color: var(--l-gold-soft);
    font-size: .88rem;
    text-align: start;
}

.line-specs td {
    padding: 11px 15px;
    border-top: 1px solid var(--l-border);
    font-size: .92rem;
}

.line-specs tbody tr:nth-child(even) td { background: #fcfaf4; }

/* ══════════ المميزات ══════════ */

.line-bullets {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.line-bullets li {
    display: flex;
    gap: 10px;
    padding: 11px 15px;
    border: 1px solid var(--l-border);
    border-radius: 11px;
    background: #fff;
    font-size: .93rem;
}

.line-bullets i { margin-top: 5px; color: var(--l-gold); }

/* ══════════ نصّ المحتوى ══════════ */

.line-content { font-size: 1rem; line-height: 1.9; }
.line-content h2 { font-size: 1.35rem; font-weight: 900; margin: 22px 0 10px; }
.line-content h3 { font-size: 1.12rem; font-weight: 800; margin: 18px 0 8px; }
.line-content img { border-radius: 12px; }

/* ══════════ الفيديو والمجسّم ══════════ */

.line-media {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}

.line-media__box { min-width: 0; }

/* ══════════ اطلب عرض سعر ══════════ */

.line-cta {
    padding: 30px;
    border-radius: 18px;
    background: linear-gradient(160deg, #0a0a0a, #241f14);
    color: #fff;
    text-align: center;
}

.line-cta h2 { margin: 0 0 8px; font-size: clamp(1.2rem, 3vw, 1.5rem); font-weight: 900; color: #fff; }
.line-cta p { margin: 0 0 18px; color: #cfcabb; }

.line-cta__btn {
    display: inline-block;
    margin: 5px;
    padding: 12px 30px;
    border-radius: 11px;
    background: var(--l-gold);
    color: var(--l-ink);
    font-weight: 900;
    text-decoration: none;
}

.line-cta__btn:hover { background: var(--l-gold-soft); color: var(--l-ink); }

.line-cta__btn--ghost {
    background: transparent;
    border: 1px solid var(--l-gold);
    color: var(--l-gold);
}

.line-cta__btn--ghost:hover { background: rgba(212, 160, 23, .12); color: var(--l-gold-soft); }

/* ══════════ الشاشات الصغيرة ══════════ */

@media (max-width: 820px) {
    .line-top { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
    .line-hero { padding: 34px 0 30px; }
    .line-sec, .line-flow-section { padding: 32px 0; }
    .line-brief { padding: 17px; }
    .line-cta { padding: 24px 18px; }

    /* الرقم يصغر ويقترب فيبقى للنصّ عرضٌ يُقرأ */
    .line-flow { padding-inline-start: 30px; }
    .line-flow::before { inset-inline-start: 12px; }
    .line-step { padding: 13px 15px; }
    .line-step::before { inset-inline-start: -30px; width: 25px; height: 25px; font-size: .8rem; }

    /* الرابط تحت العنوان لا بجواره: لا يتّسع السطر للاثنين */
    .line-step__link { margin-inline-start: 0; width: 100%; margin-top: 4px; }
}

@media (prefers-reduced-motion: reduce) {
    .line-step { transition: none; }
    .line-step:hover { transform: none; }
}


/* ══════════ عنوان الطور ══════════

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

.line-phase {
    position: relative;
    margin: 26px 0 14px;
}

.line-phase:first-child { margin-top: 0; }

.line-phase span {
    display: inline-block;
    padding: 5px 15px;
    border-radius: 30px;
    background: var(--l-ink);
    color: var(--l-gold-soft);
    font-size: .81rem;
    font-weight: 800;
    letter-spacing: .3px;
}

/* الدائرة الصغيرة على الخيط عند بداية كل طور */
.line-phase::before {
    content: "";
    position: absolute;
    inset-inline-start: -30px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--l-ink);
    box-shadow: 0 0 0 4px var(--l-soft);
}

@media (max-width: 575.98px) {
    .line-phase::before { inset-inline-start: -25px; width: 12px; height: 12px; }
}


/* ══════════ ظهور تدريجى عند التمرير ══════════

   المرحلة تبدأ خافتةً قليلًا ومزاحةً بضعة بكسلات، وتستقرّ حين تدخل
   الشاشة. الحركة صغيرة عمدًا — تعطى إحساس التتابع بلا أن تلفت
   النظر إلى نفسها.

   والافتراض أنها ظاهرة: الفئة تُضاف بجافاسكربت، فمن أطفأه أو تعثّر
   عنده رأى الرحلة كاملة. لا شىء يختفى بسبب سكربت لم يعمل. */

.line-flow.has-reveal .line-step {
    opacity: .001;
    transform: translateY(14px);
    transition: opacity .45s ease, transform .45s ease;
}

.line-flow.has-reveal .line-step.is-in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .line-flow.has-reveal .line-step {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* ══════════ الطباعة ══════════

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

@media print {
    .line-hero {
        background: none;
        color: #000;
        padding: 0 0 12px;
        border-bottom: 2px solid #000;
    }

    .line-hero h1, .line-stat b { color: #000; }
    .line-hero__sub, .line-stat span { color: #333; }
    .line-stat { border: 1px solid #999; background: none; }
    .line-hero__kicker { border-color: #999; color: #333; }

    .line-step, .line-phase span, .line-specs th {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .line-phase span, .line-specs th { background: none; color: #000; border: 1px solid #000; }
    .line-step::before { background: none; border: 1px solid #000; color: #000; box-shadow: none; }
    .line-step:hover { transform: none; box-shadow: none; }

    .line-flow.has-reveal .line-step { opacity: 1; transform: none; }

    /* الروابط والدعوة والمعرض لا معنى لها على الورق */
    .line-step__link, .line-cta, .line-gallery__thumbs, .line-media { display: none; }
}


/* ══════════ الخط الجديد: صندوق الصورة الفارغ ══════════

   لا يُرسم للزائر أصلًا — شرطه فى الخادم. وهو موجود ليكون فى مكان
   الصورة ما يُضغط: الخط الجديد بلا صورة، والفراغ لا يُمسك. */

.line-gallery__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    aspect-ratio: 4 / 3;
    border: 2px dashed rgba(212, 160, 23, .45);
    border-radius: 15px;
    background: rgba(212, 160, 23, .05);
    color: #8a6d3b;
    font-size: .93rem;
    font-weight: 600;
    cursor: pointer;
}

.line-gallery__empty i { font-size: 2rem; opacity: .55; }
.line-gallery__empty:hover { background: rgba(212, 160, 23, .11); border-color: var(--l-gold); }