/* ============================================
   نُزه - نظام الأبعاد المتجاوب
   responsive.css   (يُحمَّل آخر ملف ليعلو على البقية)

   نقاط الانكسار المعتمدة:
     جوال    (Mobile)   →  < 640px    الأساس، بلا استعلام
     تابلت   (Tablet)   →  ≥ 768px    md
     كمبيوتر (Desktop)  →  ≥ 1024px   lg
   ============================================ */

/* --------------------------------------------------------------
   الأساس: الجوال (< 640px)
   -------------------------------------------------------------- */
:root {
    --app-max-width: 100%;
    --gutter: var(--spacing-lg);
}

body { align-items: stretch; }

/* العرض يُقاد بالمتغيّر وحده، فيتغيّر تلقائياً عند كل نقطة انكسار */
.app-container { max-width: var(--app-max-width); }

/* الشريط السفلي هو ملاح التطبيق الوحيد — يبقى أسفل في كل المقاسات */
.top-nav { display: none !important; }

/* بطاقات الرحلات تمرّر أفقياً على الجوال */
.trip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* الشاشات الضيقة جداً وحدها تنزل لعمود واحد.
   كان الحدّ 400px، وهو يبتلع 390px — مقاس آيفون 12 حتى 15 — و360px
   مقاس أكثر الأندرويد. فكان أكثر من يفتح الموقع يرى بطاقة عملاقة
   واحدة في الصف، والقائمة تطول حتى لا يُقارَن شيء بشيء.
   وعمودان في 358px يعطيان 173px للبطاقة، وهو أوسع من بطاقة الرئيسية
   المقصوصة أصلاً. فالحدّ عند 330px: دونه لا يتّسع عمودان. */
@media (max-width: 330px) {
    .trip-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------
   تابلت: ≥ 768px  (md)
   -------------------------------------------------------------- */
@media (min-width: 768px) {
    :root {
        --app-max-width: 720px;
        --gutter: var(--spacing-xxl);
        --header-height: 120px;
    }

    .main-content { padding-inline: var(--gutter); }

    .header-bar__logo-img { height: 95px; }
    .header-bar__login,
    .header-bar__help { font-size: 12px; padding: 12px 24px; }

    /* السلايدر أطول قليلاً ليملأ العرض الجديد */
    .hero-slider { height: 240px; }
    .slide-content h3 { font-size: var(--font-size-xl); }

    /* ثلاثة أعمدة للرحلات */
    .trip-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    /* البطاقة تتّسع مع الشاشة: 165px مقاس الجوال حيث العرض ضيق،
       وعلى التابلت تبقى صغيرةً بلا سبب. */
    .trip-card { width: 220px; }

    /* صفوف الشركات والمرشدين عمودان */
    .partner-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* بطاقات المعلومات في صفحة التفاصيل: أربعة أعمدة */
    .fact-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    .detail__hero img { height: 320px; }

    /* الحجوزات والمقالات بعرض مريح */
    .booking-card__img img { width: 120px; height: 120px; }
    .article-card img { width: 160px; height: 120px; }

    .page-head__title { font-size: var(--font-size-xxl); }

    /* نماذج الدخول والملف الشخصي لا تتمدد أكثر من اللازم */
    .auth-container,
    .profile-container { max-width: 520px; margin-inline: auto; }
}

/* --------------------------------------------------------------
   كمبيوتر: ≥ 1024px  (lg)
   -------------------------------------------------------------- */
@media (min-width: 1024px) {
    :root {
        --app-max-width: 1120px;
        --gutter: 40px;
        --header-height: 130px;
    }

    /* الهيدر: الشعار يمين، والأزرار على الطرفين */
    .header-bar { padding-inline: var(--gutter); }
    .header-bar__logo-img { height: 110px; }

    /* أربعة أعمدة للرحلات */
    .trip-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    /* شرائط الرحلات في الرئيسية تتحول من تمرير أفقي إلى شبكة */
    .trip-cards-container {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        overflow: visible;
        gap: var(--spacing-lg);
    }
    .trip-card { width: auto; min-width: 0; }

    /* الشركات والمرشدون ثلاثة أعمدة */
    .partner-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    /* صفحة التفاصيل: عمودان — المحتوى وصندوق حجز ملاصق.
       ولمن فيه صندوق وحده: بدونه يبقى العمود الثاني فارغاً ويُضغط
       المحتوى في ثلثَي عرضه بلا سبب يراه أحد. */
    .detail--booking {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 340px;
        grid-template-areas:
            "hero     booking"
            "head     booking"
            "operator booking"
            "facts    booking"
            "content  booking";
        column-gap: var(--spacing-xxl);
        align-items: start;
    }
    .detail__hero    { grid-area: hero; }
    .detail__head    { grid-area: head; }
    /* بلا خانة مسمّاة كان الشريط يُوضَع تلقائياً بعد كل المحتوى،
       فيظهر بعيداً عن الرحلة التي ينتمي إليها */
    .operator-strip  { grid-area: operator; }
    .fact-grid       { grid-area: facts; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .booking-box {
        grid-area: booking;
        position: sticky;
        top: var(--spacing-lg);
        margin-top: 0;
    }
    .detail--booking > section:not(.booking-box),
    .detail--booking > .trip-section { grid-column: 1; }

    /* وبلا صندوق: عمود واحد، ونصٌّ لا يطول حتى تضيع العين في العودة
       إلى أوّل السطر. */
    .detail:not(.detail--booking) .fact-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .detail__hero img { height: 380px; }

    /* داخل العمود الضيق لصفحة التفاصيل: عمودان لا أربعة */
    .detail .trip-cards-container,
    .detail .partner-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* الاستكشاف: الفلاتر في صف واحد مريح */
    .filters__row { max-width: 640px; }
    .quick-search { max-width: 560px; margin-inline: auto; }

    /* المقالات في شبكة */
    .article-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .booking-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* الخريطة تملأ المساحة تحت الهيدر بدل الشاشة كاملة */
    .map-container { position: relative; height: calc(100vh - 220px); width: 100%; }
    #realMap { border-radius: var(--border-radius-lg); overflow: hidden; }
    .map-header { top: var(--spacing-lg); width: min(560px, 90%); }

    /* الملف الشخصي: عمودان */
    .profile-container { max-width: 760px; }
    .stat-row { max-width: 560px; }
}

/* --------------------------------------------------------------
   شاشات عريضة جداً: ≥ 1440px
   -------------------------------------------------------------- */
/* --------------------------------------------------------------
   الشريط السفلي: ثابت أسفل الشاشة في كل المقاسات
   -------------------------------------------------------------- */
.bottom-nav {
    max-width: var(--app-max-width);
    border-radius: 0;
}

@media (min-width: 768px) {
    /* على الشاشات الأوسع يصبح لوحاً عائماً أنيقاً، لكنه يبقى أسفل */
    .bottom-nav {
        max-width: min(var(--app-max-width), 620px);
        inset-block-end: var(--spacing-md);
        border-radius: var(--border-radius-pill);
        border: 1px solid var(--color-gold-border);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
        padding-inline: var(--spacing-sm);
    }
    .app-container { padding-bottom: calc(var(--navbar-height) + 36px); }
}

@media (min-width: 1440px) {
    :root { --app-max-width: 1280px; }
    .trip-grid,
    .trip-cards-container { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .partner-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}