/* ==========================================================
   Shared Hero Styles
   التنسيق المشترك لهيرو صفحات الخدمات

   ملاحظة:
   صفحة فعاليات النخبة الملكية لديها Hero مخصص بها
   باسم .events-page-hero
   ولذلك تم استثناؤها من بعض القواعد العامة أدناه.
   ========================================================== */


/* ==========================================================
   HERO BASE
   ========================================================== */

.service-detail-hero,
.water-hero,
.charter-hero,
.ron-hero,
.cls-hero {
  position: relative;
  min-height: 340px !important;

  display: flex;
  align-items: center;

  overflow: hidden;

  isolation: isolate;

  border-bottom: 0 !important;
}


/* ==========================================================
   الطبقة السينمائية العامة

   لا يتم تطبيقها على events-page-hero
   لأن صفحة الفعاليات لديها overlay خاص بها.
   ========================================================== */

.service-detail-hero:not(.events-page-hero)::after,
.water-hero::after,
.charter-hero::after,
.ron-hero::after,
.cls-hero::after {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 0;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(10, 10, 18, .9) 0%,
      rgba(10, 10, 18, .68) 48%,
      rgba(10, 10, 18, .3) 100%
    );
}


/* ==========================================================
   ترتيب محتوى Hero

   مهم:
   استثناء events-page-hero لأن events-hero-copy
   يتم التحكم في موضعها من style.css الخاص بالفعاليات.
   ========================================================== */

.service-detail-hero:not(.events-page-hero)
  > :not(image-slot):not(.site-breadcrumbs),

.water-hero
  > :not(image-slot):not(.site-breadcrumbs),

.charter-hero
  > :not(image-slot):not(.site-breadcrumbs),

.ron-hero
  > :not(image-slot):not(.site-breadcrumbs),

.cls-hero
  > :not(image-slot):not(.site-breadcrumbs) {

  position: relative;

  z-index: 1;
}


/* ==========================================================
   ألوان العناوين العامة

   لا يتم تطبيق قاعدة Cairo القديمة على Hero الفعاليات.
   لون عنوان الفعاليات يتم التحكم به من style.css الخاص بالصفحة.
   ========================================================== */

.service-detail-hero:not(.events-page-hero)
  [style*="font-family:'Cairo'"],

.water-hero h1,
.charter-hero h1,
.ron-hero > div:first-child,
.cls-hero > div {

  color: #fff !important;

  text-shadow:
    0 3px 16px rgba(0, 0, 0, .9) !important;
}


/* ==========================================================
   إزالة زخارف Hero القديمة
   ========================================================== */

.service-detail-hero svg,
.service-detail-hero img,

.water-hero .water-ornament,
.water-hero .water-eyebrow,

.charter-hero > div > p:first-child,

.ron-hero svg,

.cls-hero svg {

  display: none !important;
}


/* ==========================================================
   Breadcrumbs
   ========================================================== */

.service-detail-hero .site-breadcrumbs,
.water-hero .site-breadcrumbs,
.charter-hero .site-breadcrumbs,
.ron-hero .site-breadcrumbs,
.cls-hero .site-breadcrumbs {

  position: absolute !important;

  z-index: 30 !important;
}


/* ==========================================================
   HERO STATS

   بعض صفحات السفاري تحتوي جدول معلومات داخل Hero.
   نخفيه هنا لأن التفاصيل موجودة داخل محتوى الصفحة.
   ========================================================== */

.service-detail-hero div:has(> sc-for[list*="heroStats"]),
.site-service-hero div:has(> sc-for[list*="heroStats"]),
.service-detail-hero [class*="hero-stats"],
.site-service-hero [class*="hero-stats"] {

  display: none !important;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 640px) {

  .service-detail-hero,
  .water-hero,
  .charter-hero,
  .ron-hero,
  .cls-hero {

    min-height: 300px !important;

  }

}