/* OFAIR homepage hero full-width restoration — 2026-09-13
   Full-bleed photographic hero with centered editorial content. */

.hero {
  min-height: 100svh !important;
  padding-top: 78px !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
  background: var(--ofair-navy) !important;
  color: #F2EFE6 !important;
  border-bottom: 1px solid var(--ofair-line) !important;
}

.hero-photo {
  position: absolute !important;
  inset: 78px 0 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  background: var(--ofair-navy) !important;
  border: 0 !important;
}

.hero-poster {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  filter: brightness(.56) saturate(.8) contrast(1.04) !important;
}

.hero-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  filter: brightness(.60) saturate(.8) contrast(1.03) !important;
}

.hero-photo::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  background:
    linear-gradient(90deg,
      rgba(8,17,28,.34) 0%,
      rgba(8,17,28,.42) 28%,
      rgba(8,17,28,.52) 52%,
      rgba(8,17,28,.64) 74%,
      rgba(8,17,28,.76) 100%),
    linear-gradient(180deg,
      rgba(8,17,28,.08) 0%,
      rgba(8,17,28,.12) 58%,
      rgba(8,17,28,.72) 100%) !important;
}

.watermark-hero {
  width: min(38vw, 520px) !important;
  left: -74px !important;
  top: 7% !important;
  opacity: .10 !important;
  z-index: 3 !important;
}

.hero-grid {
  position: relative !important;
  z-index: 4 !important;
  width: min(1320px, calc(100% - 72px)) !important;
  min-height: calc(100svh - 78px) !important;
  padding: 72px 0 158px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.hero-brand-focus,
.hero-copy {
  width: min(860px, 94vw) !important;
  max-width: 860px !important;
  min-height: 0 !important;
  margin-inline: auto !important;
  padding: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 16px !important;
}

.hero-brand-focus::before {
  width: min(100%, 720px) !important;
  margin-inline: auto !important;
  background: var(--ofair-gold) !important;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.18)) !important;
}

.hero-brand-focus::after {
  content: "إدارة متكاملة. قيمة مستدامة.\Aنعتني بالمكان، ونرتقي بتجربته كل يوم." !important;
  white-space: pre-line !important;
  color: #F2EFE6 !important;
  font-size: clamp(18px, 1.75vw, 27px) !important;
  line-height: 1.45 !important;
  max-width: 820px !important;
  margin-inline: auto !important;
  text-align: center !important;
  text-shadow: 0 2px 20px rgba(0,0,0,.28);
}

.hero-actions-centered {
  width: 100% !important;
  justify-content: center !important;
  margin-top: 2px !important;
}

.hero .btn-ghost {
  color: #F2EFE6 !important;
  border-color: rgba(242,239,230,.34) !important;
  background: rgba(8,17,28,.20) !important;
  backdrop-filter: blur(8px);
}

.hero .btn-ghost:hover {
  border-color: var(--ofair-gold) !important;
}

.hero-strip {
  z-index: 5 !important;
}

:root[data-theme="light"] .hero,
:root[data-theme="dark"] .hero {
  color: #F2EFE6 !important;
}

@media (max-width: 1100px) {
  .hero-grid {
    width: min(100% - 48px, 1120px) !important;
  }

  .hero-brand-focus,
  .hero-copy {
    width: min(800px, 95vw) !important;
  }

  .hero-brand-focus::before {
    width: min(88vw, 660px) !important;
  }
}

@media (max-width: 980px) {
  .hero {
    min-height: 760px !important;
    padding-top: 72px !important;
    display: flex !important;
  }

  .hero-photo {
    position: absolute !important;
    inset: 72px 0 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    border: 0 !important;
  }

  .hero-photo::after {
    background:
      linear-gradient(180deg,
        rgba(8,17,28,.20) 0%,
        rgba(8,17,28,.42) 42%,
        rgba(8,17,28,.88) 82%,
        rgba(8,17,28,.96) 100%) !important;
  }

  .hero-grid {
    min-height: 688px !important;
    padding: 48px 0 172px !important;
    justify-content: center !important;
  }

  .hero-brand-focus,
  .hero-copy {
    width: min(760px, 100%) !important;
    max-width: 760px !important;
    margin-inline: auto !important;
    align-items: center !important;
    text-align: center !important;
  }

  .hero-brand-focus::before {
    width: min(84vw, 610px) !important;
    margin-inline: auto !important;
  }

  .hero-brand-focus::after {
    max-width: 720px !important;
    margin-inline: auto !important;
    text-align: center !important;
    font-size: clamp(18px, 3.5vw, 25px) !important;
    line-height: 1.45 !important;
  }

  .hero-actions-centered {
    justify-content: center !important;
  }

  .watermark-hero {
    width: 360px !important;
    left: -120px !important;
    top: 12% !important;
    opacity: .07 !important;
  }
}

@media (max-width: 640px) {
  .hero {
    min-height: 660px !important;
    padding-top: 68px !important;
  }

  .hero-photo {
    inset: 68px 0 0 !important;
  }

  .hero-grid {
    width: calc(100% - 28px) !important;
    min-height: 592px !important;
    padding: 26px 0 160px !important;
  }

  .hero-brand-focus,
  .hero-copy {
    width: 100% !important;
    align-items: center !important;
    text-align: center !important;
    gap: 12px !important;
  }

  .hero-brand-focus::before {
    width: min(92vw, 520px) !important;
    margin-inline: auto !important;
  }

  .hero-brand-focus::after {
    max-width: 96vw !important;
    margin-inline: auto !important;
    text-align: center !important;
    font-size: clamp(16px, 4.7vw, 21px) !important;
    line-height: 1.4 !important;
  }

  .hero-actions-centered {
    justify-content: center !important;
  }

  .watermark-hero {
    width: 250px !important;
    left: -88px !important;
    top: 14% !important;
    opacity: .06 !important;
  }
}

@media (max-width: 430px) {
  .hero {
    min-height: 620px !important;
  }

  .hero-grid {
    min-height: 552px !important;
    padding-bottom: 150px !important;
  }

  .hero-brand-focus::before {
    width: 94vw !important;
  }

  .hero-brand-focus::after {
    font-size: 16px !important;
    line-height: 1.38 !important;
  }
}