/* ===========================================================
   Urealm — الرئيسية وصفحة العالم.

   الصفحتان بنفس النسق: بنرٌ عريض، ثمّ عنوان، ثمّ جدار. والتشابه
   مقصود — من عرف الرئيسية عرف صفحة العالم بلا تعلّمٍ ثانٍ.

   والبنر يمتدّ إلى حافّتَي المنفذ ويتجاوز هامشه: صورةٌ محبوسةٌ داخل
   الهامش تبدو بطاقةً كبيرة لا غلافًا للصفحة.
   =========================================================== */

.home,
.realm {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  inline-size: 100%;
  min-inline-size: 0;
}

.home__banner,
.realm .banner {
  /* يبقى داخل مساحة المحتوى: الامتداد بالهامش السالب كان يوسّع
     `.home` أفقيًّا في عارض الملف المحلي RTL، ثمّ يخفي `overflow-x`
     الزيادة ويأكل أول حرف من العناوين. والحواف الهادئة هي حواف
     البنر نفسها في `wall.css`، فلا قصّ حادّ ولا ممر أفقي. */
  margin: 0;
  inline-size: 100%;
  max-inline-size: 100%;
  border-radius: clamp(16px, 2vw, 24px);
}

.home__banner-link {
  display: block;
  inline-size: 100%;
  color: inherit;
  text-decoration: none;
  border-radius: clamp(16px, 2vw, 24px);
  -webkit-tap-highlight-color: transparent;
}
.home__banner-link:hover { text-decoration: none; }
.home__banner-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.home__banner-link .banner { inline-size: 100%; }

/* البنر كله هو زر الاستئناف؛ هذه مجرد إشارة هادئة لا هدف ضغط ثانٍ. */
.home__banner-link { position: relative; }
.home__banner-action {
  position: absolute;
  z-index: 8;
  inset-inline-end: 14px;
  inset-block-end: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-inline-size: calc(100% - 28px);
  padding: 7px 10px;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 10px;
  background: rgb(8 9 11 / 58%);
  color: #fff;
  box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
  backdrop-filter: blur(10px) saturate(1.08);
  -webkit-backdrop-filter: blur(10px) saturate(1.08);
  font-size: var(--t-xs);
  font-weight: var(--w-medium);
  line-height: 1;
  pointer-events: none;
}
[dir="rtl"] .home__banner-action svg { transform: scaleX(-1); }

@media (max-width: 760px) {
  .home__banner,
  .realm .banner {
    border-radius: 16px;
  }
  .home__banner-link { border-radius: 16px; }
}

.home__section { display: flex; flex-direction: column; gap: var(--sp-4); min-inline-size: 0; max-inline-size: 100%; }
.home__section[hidden] { display: none; }

.home__title,
.realm-head__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-tight);
}

.home__title {
  max-inline-size: 100%;
  padding-inline-start: 8px;
  padding-inline-end: 2px;
  font-size: var(--t-md);
}

.realm { gap: var(--sp-6); }

/* ----------------------- صفحةٌ بعنوانٍ وجدار ----------------------- */

.page { display: flex; flex-direction: column; gap: var(--sp-6); }

.page__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-tight);
}

.page__empty { margin: 0; color: var(--fg-mute); font-size: var(--t-sm); }
.page__empty[hidden] { display: none; }

/* التحيّة — عادت من `home.css` القديم بعد أن سقطت في إعادة كتابته. */
.home__head { display: flex; flex-direction: column; gap: var(--sp-2); }

.home__greeting {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: var(--w-semi);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  color: var(--fg);
  text-wrap: balance;
}


/* Desktop uses the available canvas instead of stacking sparse sections. */
.home__collections {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  min-inline-size: 0;
  inline-size: 100%;
}

@media (min-width: 1100px) {
  .home {
    gap: clamp(22px, 2vw, 30px);
  }

  .home__collections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(520px, 100%), 1fr));
    gap: clamp(24px, 2.4vw, 40px);
    align-items: start;
  }

  .home__section {
    gap: 14px;
  }

  .home__title {
    padding-inline: 4px;
  }
}

/* ===========================================================
   Desktop Home hero — صورة يسار + معلومات العالم يمين.
   الجوال يبقى كما هو تمامًا. الصورة نفسها لا تُقص: Banner(home)
   يظل contain، والفاصل بين الصورة والمعلومات يذوب بتدرّج أسود.
   =========================================================== */
.home__banner-info { display: none; }
.home__banner-action--desktop { display: none; }

@media (min-width: 1100px) {
  .home__banner {
    /* أضيق قليلًا من عرض المحتوى الكبير حتى يبقى Hero لا شريطًا ممتدًا. */
    inline-size: min(100%, 1000px);
    max-inline-size: 1000px;
    margin-inline: auto;
  }

  .home__banner-link {
    display: grid;
    grid-template-columns: minmax(0, 72%) minmax(260px, 28%);
    min-block-size: clamp(250px, 18vw, 285px);
    overflow: hidden;
    isolation: isolate;
    direction: ltr; /* يحافظ على الصورة في اليسار في العربي والإنجليزي. */
    background: #000;
    border: 1px solid var(--line);
    border-radius: clamp(18px, 1.5vw, 24px);
  }

  .home__banner-link .banner {
    grid-column: 1;
    grid-row: 1;
    inline-size: 100%;
    block-size: 100%;
    min-block-size: 100%;
    max-block-size: none;
    aspect-ratio: auto;
    border: 0;
    border-radius: clamp(18px, 1.5vw, 24px) 0 0 clamp(18px, 1.5vw, 24px);
  }

  .home__banner-info {
    position: relative;
    z-index: 4;
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    min-inline-size: 0;
    padding: clamp(24px, 2.6vw, 38px) clamp(24px, 2.4vw, 34px);
    background:
      linear-gradient(180deg, rgb(255 255 255 / 2%), transparent 40%),
      #000;
    color: #fff;
  }

  /* الفاصل ليس قصًا مستقيمًا: الصورة تذوب تدريجيًا داخل مساحة المعلومات. */
  .home__banner-info::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset-block: 0;
    /* stylelint-disable-next-line property-disallowed-list --
       فيزيائيّ عمدًا: الحاوية مضبوطة على `direction: ltr` أعلاه حتى
       تبقى الصورة يسارًا في اللغتين، فالتدرّج يذوب عند حافّتها هي —
       ولو صار منطقيًّا لقفز إلى الطرف الآخر بالعربيّة وحدها. */
    left: -120px;
    inline-size: 122px;
    pointer-events: none;
    background: linear-gradient(90deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 28%) 30%, rgb(0 0 0 / 76%) 72%, #000 100%);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }

  .home__banner-copy {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-inline-size: 0;
  }

  [dir='rtl'] .home__banner-info {
    direction: rtl;
    text-align: right;
    align-items: flex-start;
  }

  [dir='ltr'] .home__banner-info {
    direction: ltr;
    text-align: left;
    align-items: flex-start;
  }

  .home__banner-name {
    max-inline-size: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 1.55vw, 1.65rem);
    font-weight: var(--w-semi);
    line-height: var(--lh-tight);
  }

  .home__banner-desc {
    display: -webkit-box;
    margin: 0;
    max-inline-size: 30ch;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    color: rgb(255 255 255 / 68%);
    font-size: var(--t-sm);
    line-height: 1.55;
  }

  .home__banner-meta {
    color: rgb(255 255 255 / 48%);
    font-family: var(--font-mono);
    font-size: var(--t-2xs);
  }

  .home__banner-action--desktop {
    position: static;
    display: inline-flex;
    align-self: flex-start;
    max-inline-size: 100%;
    margin-top: auto;
    padding: 9px 12px;
    border-color: rgb(255 255 255 / 16%);
    background: rgb(255 255 255 / 8%);
    box-shadow: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .home__banner-action--mobile { display: none; }
}