/*
 * Atlobni - Hero Desktop Only
 * مستقل عن style.css
 * لا يؤثر على نسخة الجوال
 */

@media (min-width: 761px) {
  /* زيادة ارتفاع الـHero لسطح المكتب فقط */
  .hero {
    height: 340px;
    background: #0d2537;
  }

  /*
   * دمج ناعم بين الصورة واللون الداكن خلف النصوص.
   * لا يغيّر مكان الصورة أو النص.
   */
  .hero-photo {
    width: 53%;
    background-color: #0d2537;
  }

  .hero-overlay {
    background:
      linear-gradient(
        90deg,
        rgba(9, 28, 42, 0) 0%,
        rgba(9, 28, 42, 0.02) 24%,
        rgba(9, 28, 42, 0.18) 40%,
        rgba(9, 28, 42, 0.55) 53%,
        rgba(13, 37, 55, 0.90) 66%,
        #0d2537 78%,
        #0d2537 100%
      );
  }

  /* انتقال بصري إضافي عند حافة الصورة بدون تغيير موضعها */
  .hero-photo::after {
    content: "";
    position: absolute;
    top: 0;
    right: -1px;
    bottom: 0;
    width: 24%;
    pointer-events: none;
    background: linear-gradient(
      90deg,
      rgba(13, 37, 55, 0) 0%,
      rgba(13, 37, 55, 0.35) 48%,
      rgba(13, 37, 55, 0.92) 100%
    );
  }

  .hero-inner {
    height: 100%;
  }
}