/* =========================
   Desktop Header Fix
========================= */

@media (min-width: 1024px) {

  /* الهيدر */
  #mainnav {
    height: 80px !important;
    min-height: 80px !important;
  }

  /* العناصر الداخلية للهيدر */
  #mainnav > div,
  #mainnav .inner,
  #mainnav .inner > div {
    height: 100% !important;
    min-height: 80px !important;
  }

  /* الصف اللي فيه الأيقونات + اللوجو + المنيو */
  #mainnav .grid.grid-cols-5 {
    height: 80px !important;
    min-height: 80px !important;

    align-items: center !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* توسيط الثلاث أجزاء */
  #mainnav .grid.grid-cols-5 > div {
    height: 100% !important;

    display: flex !important;
    align-items: center !important;
  }

  /* اللوجو */
  #mainnav .navbar-brand {
    height: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  /* حجم اللوجو */
  #mainnav .navbar-brand img {
    width: 80px !important;
    height: auto !important;
    max-height: 60px !important;

    display: block !important;
    object-fit: contain !important;

    margin: 0 !important;
  }
}

/* =========================
   Desktop
========================= */
@media (min-width: 768px) {
  section[id^="art-banner-"] {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 2 / 1 !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  section[id^="art-banner-"] > .container {
    width: 100% !important;
    height: 100% !important;
  }
}


/* =========================
   Mobile
========================= */
@media (max-width: 767px) {
  section[id^="art-banner-"] {
    width: 100% !important;

    /* صورة الموبايل 9:16 */
    aspect-ratio: 9 / 16 !important;

    height: auto !important;
    min-height: 0 !important;

    /* تظهر الصورة بالكامل بدون قص */
    background-size: 100% 100% !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    padding: 0 !important;
  }

  section[id^="art-banner-"] > .container {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    padding: 0 !important;
  }

  section[id^="art-banner-"] .art-banner-header {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
  }
}