/* ==========================================================================
   قواعد الجوال — ملف مستقل يُحمَّل بعد site.css
   يُعيد ضبط كل ما تراكم من قواعد متضاربة
   ========================================================================== */

@media (max-width: 980px) {

    /* ---------- الأساس ---------- */
    html, body { overflow-x: hidden; }
    .wrap { padding-inline: 20px; max-width: 100%; }

    /* ---------- الترويسة ---------- */
    .site-header .header-row { height: 68px; gap: 12px; }
    .site-header .brand img { width: 42px; height: 42px; }
    .site-header .brand b { font-size: 16px; }
    .site-header .brand small { display: none; }

    .burger { display: block; margin-inline-start: auto; z-index: 62; }

    /* الدرج: مخفي كليًا ما لم يُفتح */
    .site-nav {
        position: fixed;
        top: 0;
        bottom: 0;
        inset-inline-end: 0;
        width: 270px;
        max-width: 80vw;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0;
        padding: 84px 22px 24px;
        background: #FFFCF8;
        box-shadow: -12px 0 44px rgba(20, 32, 58, .2);
        transform: translateX(100%);
        transition: transform .28s ease;
        overflow-y: auto;
        z-index: 61;
    }
    html[dir="rtl"] .site-nav {
        inset-inline-end: auto;
        inset-inline-start: 0;
        transform: translateX(-100%);
        box-shadow: 12px 0 44px rgba(20, 32, 58, .2);
    }

    body.menu-open .site-nav { transform: translateX(0) !important; }
    body.menu-open::after {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(20, 32, 58, .45);
        z-index: 60;
    }

    .site-nav > a {
        padding: 14px 2px;
        border-bottom: 1px solid rgba(34, 53, 91, .12);
        font-size: 16px;
    }
    .site-nav .lang { width: 100%; margin-top: 16px; }
    .site-nav .lang-menu { position: static; box-shadow: none; width: 100%; margin-top: 8px; }

    /* ---------- الواجهة ---------- */
    .hero { padding: 30px 0 44px; }
    .hero-grid { display: block; }
    .hero-text h1 { font-size: clamp(28px, 8vw, 38px); max-width: none; }
    .hero-text .lead { max-width: none; font-size: 15px; }
    .hero-actions { flex-direction: column; align-items: stretch; }
    .hero-actions .btn { text-align: center; }
    .hero-meta { gap: 26px; }

    /* لوحات الصور: شبكة بسيطة داخل الحاوية */
    .hero-shots {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin: 30px 0 0;
        padding: 0;
    }
    .shot {
        position: relative;
        margin: 0;
        aspect-ratio: 3 / 4;
        border-radius: 3px;
        overflow: hidden;
        background: var(--sand);
        box-shadow: 0 8px 22px rgba(20, 32, 58, .14);
        animation: none;
        transform: none;
        opacity: 1;
    }
    .shot img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 42%;
        opacity: 0;
        transform: none;
        transition: opacity 1s ease;
    }
    /* أول صورة ظاهرة دائمًا — لا اعتماد على الجافاسكربت */
    .shot img:first-of-type { opacity: 1; }
    .shot img.is-on { opacity: 1; }
    .shot figcaption { padding: 18px 10px 9px; font-size: 11px; }

    /* ---------- الأقسام ---------- */
    .band, .rail-band, .slider-band, .rows-band { padding: 44px 0; }
    .rail-head, .slider-head, .band-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 22px;
    }
    .rail-head h2, .slider-head h2, .band-head h2 { font-size: 26px; }

    /* السكك: تمرير أفقي داخل الشاشة */
    .rail, .slider {
        margin: 0;
        padding: 6px 20px 24px;
        gap: 14px;
    }
    .tcard, .pcard, .rail-card { margin: 0; flex-basis: 78vw; }
    .pcard-down { margin-top: 0; }
    .slider-tools { width: 100%; justify-content: space-between; }

    /* ---------- التفاصيل ---------- */
    .detail-inner { padding: 40px 20px 44px; }
    .detail-inner h1 { font-size: clamp(26px, 7vw, 36px); }
    .layout, .trip-body .layout, .about-grid, .contact-grid { display: block; }
    .side, .side-sticky { position: static; margin-top: 32px; }
    .side .trip-map { height: 320px; }
    .price-box { max-width: none; }

    .days li { gap: 14px; padding-bottom: 26px; }
    .day-no { width: 38px; height: 38px; font-size: 15px; }
    .days li:not(:last-child)::before { inset-inline-start: 18px; top: 42px; }

    /* ---------- الشبكات ---------- */
    .grid { grid-template-columns: 1fr; gap: 18px; }
    .gallery { grid-template-columns: 1fr 1fr; gap: 10px; }
    .videos { grid-template-columns: 1fr; }
    .services { grid-template-columns: 1fr; }
    .trust-grid { grid-template-columns: 1fr 1fr; gap: 22px; }
    .trust-grid > div::after { display: none; }

    /* ---------- النماذج ---------- */
    .contact-form .grid-2 { display: block; }
    .services-bar { flex-direction: column; align-items: stretch; }
    .request-actions { width: 100%; }
    .request-actions .btn { flex: 1; justify-content: center; text-align: center; }

    /* ---------- التذييل ---------- */
    .site-footer .dunes { height: 54px; margin-top: -1px; }
    .footer-grid { display: block; padding-block: 26px; }
    .footer-grid > div { margin-bottom: 28px; }
    .footer-grid a { display: block; width: fit-content; margin-bottom: 9px; }
    .footer-langs a { display: inline-block; margin-inline-end: 14px; }
    .footer-contact a, .footer-contact span { direction: ltr; unicode-bidi: isolate; }
    html[dir="rtl"] .footer-contact a, html[dir="rtl"] .footer-contact span { text-align: right; }
}

@media (max-width: 560px) {
    .hero-shots { grid-template-columns: 1fr 1fr; }
    .gallery { grid-template-columns: 1fr; }
    .trust-grid { grid-template-columns: 1fr; }
    .tcard, .pcard, .rail-card { flex-basis: 84vw; }
}

@media (prefers-reduced-motion: reduce) {
    .site-nav { transition: none; }
}

/* المُبدِّل مخفي بصريًا لكنه يبقى فعّالًا */
.menu-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    clip-path: inset(50%);
}

/* ==========================================================================
   فتح الدرج — آخر قاعدة، أعلى خصوصية
   ========================================================================== */
@media (max-width: 980px) {
    body.menu-open header.site-header nav.site-nav {
        transform: translateX(0) !important;
    }
    html[dir="rtl"] body.menu-open header.site-header nav.site-nav {
        transform: translateX(0) !important;
    }
    body.menu-open { overflow: hidden; }
}

/* ==========================================================================
   لون روابط الدرج — آخر قاعدة على الإطلاق
   ========================================================================== */
@media (max-width: 980px) {
    body.menu-open nav.site-nav {
        background: #FFFCF8 !important;
    }
    body.menu-open nav.site-nav a,
    body.menu-open nav.site-nav summary,
    body.menu-open nav.site-nav code {
        color: #14203A !important;
        -webkit-text-fill-color: #14203A !important;
        opacity: 1 !important;
        font-size: 16px !important;
    }
    body.menu-open nav.site-nav .lang summary {
        border: 1px solid rgba(34, 53, 91, .2) !important;
        background: #fff !important;
    }
}

@media (max-width: 980px) {
    .burger {
        background: none;
        border: 0;
        padding: 8px;
        cursor: pointer;
        display: block;
        margin-inline-start: auto;
    }
}

/* ---------- الدرج: كامل تحت الترويسة ---------- */
@media (max-width: 980px) {
    body.menu-open nav.site-nav {
        top: 68px;
        height: calc(100dvh - 68px);
        padding: 20px 22px 32px;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    body.menu-open .site-header { z-index: 62; }
}

/* ---------- الدرج: كامل تحت الترويسة ---------- */
@media (max-width: 980px) {
    body.menu-open nav.site-nav {
        top: 68px;
        height: calc(100dvh - 68px);
        padding: 20px 22px 32px;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    body.menu-open .site-header { z-index: 62; }
}

/* ---------- الدرج: حواف نظيفة ---------- */
@media (max-width: 980px) {
    body.menu-open nav.site-nav {
        top: 0;
        height: 100dvh;
        padding-top: 84px;
        border-start-start-radius: 0;
    }
    /* الترويسة فوق الدرج فيبقى الشعار والبرغر ظاهرين */
    body.menu-open .site-header {
        z-index: 63;
        background: rgba(255, 252, 248, .96);
        backdrop-filter: blur(10px);
    }
    /* البرغر يصير علامة إغلاق */
    body.menu-open .burger svg { transform: rotate(90deg); transition: transform .25s ease; }
}

/* ---------- الدرج في RTL ---------- */
@media (max-width: 980px) {
    html[dir="rtl"] nav.site-nav {
        inset-inline-start: 0;
        inset-inline-end: auto;
        left: 0;
        right: auto;
        transform: translateX(-100%);
    }
    html[dir="rtl"] body.menu-open nav.site-nav {
        transform: translateX(0) !important;
        top: 0;
        height: 100dvh;
        padding-top: 84px;
    }
    /* اللوحات العربية أيضًا من أعلى الشاشة */
    html[dir="rtl"] body.menu-open .site-header { z-index: 63; }
}

/* ==========================================================================
   الفتح — آخر قاعدة في الملف، لا شيء بعدها
   ========================================================================== */
@media (max-width: 980px) {
    body.menu-open .site-nav,
    html[dir="rtl"] body.menu-open .site-nav {
        transform: translateX(0) !important;
        top: 0 !important;
        height: 100dvh !important;
        padding-top: 84px !important;
    }
}

/* ==========================================================================
   الجوال: لا إخفاء بالانتظار — المحتوى ظاهر دائمًا
   ========================================================================== */
@media (max-width: 980px) {
    [data-reveal],
    [data-reveal]:not(.is-in) {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ---------- بطاقات بحجم معقول على الجوال ---------- */
@media (max-width: 980px) {
    .grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }

    .card-media {
        aspect-ratio: 16 / 10;
        max-height: 240px;
    }
    .card-body { padding: 16px 18px 20px; }
    .card-body h3 { font-size: 19px; }
    .card-body p { font-size: 14px; }

    /* لا تنتظر التمرير لتحميل أول ست صور */
    .grid > :nth-child(-n+6) img { content-visibility: visible; }
}

@media (max-width: 560px) {
    .grid { grid-template-columns: 1fr; }
    .card-media { aspect-ratio: 16 / 9; max-height: 200px; }
}