/* ============================================================
   تصحيحاتُ الجوّال.

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

   والقاعدةُ هنا: ما لا يتّسع عرضاً يُمرَّر أفقياً في مكانه، وما
   يتراكب يُفصل سطراً. ولا يُصغَّر الخطُّ تحت اثني عشر بكسلاً — القراءةُ
   على الجوّال أهمُّ من إقحام كلّ شيءٍ في شاشة.
   ============================================================ */

@media (max-width: 640px) {

  /* ————— شريطُ المعرض: طرفان يتراكبان ————— */
  /*
   * «حمّل الملف التعريفي» و«تحت الإنشاء · مميز» كانا في صفٍّ واحدٍ
   * مطلقَي الموضع من الطرفين، فيلتقيان في المنتصف ويقرأ الزائرُ
   * نصفَ كلمة.
   */
  .g-main .g-top {
    inset-inline-start: 10px !important;
    top: 10px !important;
    max-width: calc(100% - 20px);
  }

  .g-main .g-tags {
    top: 56px !important;
    inset-inline-end: 10px !important;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    max-width: calc(100% - 20px);
  }

  .g-chip {
    font-size: 12px !important;
    padding: 7px 11px !important;
  }

  /* ————— صفُّ الأقسام: سطرٌ يُمرَّر لا ثلاثةُ أسطر ————— */
  #amtar-hero-cats {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-inline: 14px !important;
  }

  #amtar-hero-cats::-webkit-scrollbar { display: none; }
  #amtar-hero-cats > * { flex: 0 0 auto; }

  /* ————— شريطُ البحث ————— */
  /*
   * جُرّب سطران — الحقلُ فوق والأدواتُ تحته — فخرج الشريطُ مئةً
   * وسبعةَ عشرَ بكسلاً وفيه فراغٌ كبيرٌ إلى جانب الحقل. والعناصرُ
   * مجموعةً لا تتجاوز مئةً وستّين بكسلاً عرضاً، فيبقى للكتابة مثلُها
   * في سطرٍ واحد. فرجع السطرُ الواحدُ وضُيّقت حواشيه.
   */
  .amtar-hero-search-wrap > div {
    flex-wrap: nowrap !important;
    gap: 6px !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
  }

  #amtar-hero-search {
    flex: 1 1 auto !important;
    order: 0 !important;
    min-width: 0;
    padding: 4px 2px !important;
    font-size: 13px !important;
  }

  .amtar-hero-search-wrap > div > span:first-child { order: -1 !important; flex: 0 0 auto; }

  #amtar-hero-mic { order: 1 !important; flex: 0 0 auto; margin: 0 !important; }
  #amtar-hero-ai { order: 2 !important; flex: 0 0 auto; padding-inline: 10px !important;
    font-size: 11px !important; }
  #amtar-hero-searchBtn { order: 3 !important; flex: 0 0 auto; padding-inline: 12px !important;
    font-size: 12px !important; }

  /* ————— البطاقاتُ عمودٌ واحد ————— */
  #amtar-search-grid {
    grid-template-columns: 1fr !important;
  }

  /* ————— الجداولُ والنصوصُ الطويلة تُمرَّر في مكانها ————— */
  table { display: block; overflow-x: auto; max-width: 100%; }
  pre, code { overflow-x: auto; max-width: 100%; }

  /* ————— ولا تخرج صورةٌ عن حدّها ————— */
  img, video, iframe { max-width: 100%; height: auto; }

  /* ————— أزرارُ اللمس لا تصغر عن أربعٍ وأربعين ————— */
  .leaflet-bar a, .amtar-mapstyle a { min-height: 38px; display: flex !important;
    align-items: center; justify-content: center; }
}

/* ————— مبدّلُ نمط الخريطة: أفقيٌّ على الجوّال ————— */
@media (max-width: 520px) {
  .amtar-mapstyle { flex-direction: row !important; }
  .amtar-mapstyle a { border-bottom: 0 !important; border-inline-end: 1px solid #eef2f1; }
  .amtar-mapstyle a:last-child { border-inline-end: 0; }
}

/* ============================================================
   الأحجامُ على الجوّال.

   كتلةُ البحث كانت تأكل ٤٧٧ بكسلاً من شاشةٍ طولُها ٨١٢ — أي
   ستّين بالمئة قبل أن يرى الزائرُ نتيجةً واحدة. وصورةُ البطاقة
   ٤:٣ تأخذ ٢٥٠ بكسلاً، فلا يظهر من البطاقة إلا صورتُها.

   فتُضيَّق الحواشي وتُجمع أزرارُ الفلترة في سطرٍ واحد، وتُقصَّر
   الصورةُ إلى ١٦:٩ — وهي نسبةُ الصورة المعتادة أصلاً.

   والانتقاءُ هنا مطوَّلٌ عمداً: amtar-pc.css يكتب النسبةَ بـ
   `.amtar-project-card .amtar-card-media` و!important، و
   amtar-tabs-consolidate.js يكتب الشبكةَ بـ `#amtar-search-hero`.
   فلا ينفع انتقاءٌ أقصرُ منهما ولو حمل !important.
   ============================================================ */

@media (max-width: 640px) {

  /* ————— كتلةُ البحث ————— */
  #amtar-search-hero div.amtar-hero-tabs-wrap { padding-block: 10px !important; }
  #amtar-search-hero div.amtar-hero-search-wrap { padding-block: 6px 4px !important; }
  .amtar-hero-search-wrap > div { padding: 8px 12px !important; }

  /* الفلاتر والترتيب والخريطة في سطرٍ واحد بدل سطرين */
  #amtar-search-hero div.amtar-hero-filters {
    grid-template-columns: 1fr 1fr 1fr !important;
    padding-block: 6px 10px !important;
  }
  /* الثلاثةُ تُثبَّت في الصفّ الأوّل صراحةً: بينها عنصرٌ فارغٌ
     بلا ارتفاعٍ يشغل خانةً فيدفع «الخريطة» إلى صفٍّ ثانٍ. */
  #amtar-search-hero div.amtar-hero-filters > div:not(.amtar-hero-sort) { display: none !important; }
  #amtar-search-hero div.amtar-hero-filters > #amtar-open-filters { grid-area: 1 / 1 !important; }
  #amtar-search-hero div.amtar-hero-filters > .amtar-hero-sort { grid-area: 1 / 2 !important; }
  #amtar-search-hero div.amtar-hero-filters > a { grid-area: 1 / 3 !important; }
  #amtar-search-hero div.amtar-hero-filters > a,
  #amtar-search-hero div.amtar-hero-filters > button,
  #amtar-search-hero div.amtar-hero-filters .amtar-hero-sort > summary {
    height: 38px !important;
    min-height: 38px !important;
    padding: 8px 6px !important;
    font-size: 11.5px !important;
  }
  #amtar-search-hero div.amtar-hero-filters .amtar-hero-sort { height: 38px !important; }

  #amtar-hero-cats { padding-block: 8px !important; }

  /* ————— صورةُ البطاقة ————— */
  .amtar-project-card .amtar-card-media,
  .property-card .pc-media,
  #amtar-search-grid .amtar-card-media,
  #amtar-search-grid .pc-media { aspect-ratio: 16 / 9 !important; }

  /* ————— بطاقةُ المشروع: حواشٍ أضيق ————— */
  .amtar-project-card .amtar-card-media { margin: 6px !important; }
  .amtar-project-card > h3 { font-size: 16px !important; margin-top: 8px !important; }
  .amtar-project-card > div:nth-last-child(2) { margin-top: 10px !important; }
  .amtar-project-card > div:last-child {
    margin: 10px 12px 12px !important;
    padding-top: 10px !important;
  }
}

/* ============================================================
   قائمةُ الجوّال — شكلُها.

   الروابطُ صُحّحت في amtar-menu-sync.js، لكنّ الشكلَ بقي على حاله:
   لوحٌ رماديٌّ شفّافٌ بضبابةٍ خلفه، وخطٌّ أبيضُ نحيفٌ فوقه. فإذا
   كانت الصفحةُ تحته فاتحةً لم يُقرأ منه حرف — وهذا ما رآه صاحبُ
   العمل: قائمةٌ باهتةٌ لا تكاد تُبين.

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

@media (max-width: 1023px) {

  /* أرضُ القائمة */
  [class*="bg-[rgba(120,130,140,0.28)]"] {
    background: linear-gradient(165deg, #12463C 0%, #0C2F29 54%, #07201C 100%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* صفُّ الشعار والإغلاق */
  [class*="bg-[rgba(120,130,140,0.28)]"] > div > div:first-child {
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .10);
  }

  [class*="bg-[rgba(120,130,140,0.28)]"] > div > div:first-child button {
    width: 40px; height: 40px; border-radius: 12px;
    background: rgba(255, 255, 255, .07);
    display: flex; align-items: center; justify-content: center;
    font-size: 26px !important; font-weight: 300 !important;
  }

  /* البنود */
  [class*="bg-[rgba(120,130,140,0.28)]"] .mt-10 { margin-top: 20px !important; }

  [class*="bg-[rgba(120,130,140,0.28)]"] .mt-10 > a {
    padding: 14px 6px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    border-radius: 10px;
    transition: background .15s;
  }

  [class*="bg-[rgba(120,130,140,0.28)]"] .mt-10 > a:last-child { border-bottom: 0; }
  [class*="bg-[rgba(120,130,140,0.28)]"] .mt-10 > a:active {
    background: rgba(255, 255, 255, .07);
  }

  [class*="bg-[rgba(120,130,140,0.28)]"] .mt-10 > a span {
    font-size: 16.5px !important;
    font-weight: 600 !important;
    color: #EAF2EF !important;
    letter-spacing: 0;
  }

  /* السهمُ صورةٌ داكنة، فيُقلب أبيضَ خافتاً ليُرى على الأخضر */
  [class*="bg-[rgba(120,130,140,0.28)]"] .mt-10 > a img {
    width: 15px !important; height: 15px !important;
    filter: brightness(0) invert(1);
    opacity: .42 !important;
  }

  /* الشعارُ الأبيضُ يظهر على الأخضر، ولا حاجة لخفضه */
  [class*="bg-[rgba(120,130,140,0.28)]"] > div > div:first-child img { opacity: 1; }

  /* مساحةُ الأمان أسفل شاشات الجوّال */
  [class*="bg-[rgba(120,130,140,0.28)]"] > div {
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  }
}