/* =============================================================================
   HERO — شركة الإسراء لنقل وتغليف الأثاث
   Tokens inherited from header.css (:root)
   RTL · Bootstrap 5 · Swiper 8 · No animation libraries
   ============================================================================= */

/* ── 1. Section wrapper ─────────────────────────────────────────────────────── */
.heroPremium {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--es-navy);
  font-family: var(--es-font-ui);
}

/* ── 2. Trust strip (above slider, always visible) ──────────────────────────── */
.heroStrip {
  position: relative;
  z-index: 10;
  background: rgba(23, 34, 77, .82);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.heroStrip__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 24px;
  padding: 10px 0;
}

.heroStrip__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255,255,255,.82);
  white-space: nowrap;
}

.heroStrip__item .fas,
.heroStrip__item .fab {
  color: var(--es-orange);
  font-size: 11px;
}

@media (max-width: 575.98px) {
  .heroStrip__inner { gap: 6px 14px; }
  .heroStrip__item  { font-size: 11.5px; }
}

/* ── 3. Swiper container ────────────────────────────────────────────────────── */
.heroSwiper {
  width: 100%;
  height: calc(100svh - 140px);   /* desktop: minus topbar + nav + strip */
  min-height: 480px;
  max-height: 860px;
}

/* Tablet */
@media (max-width: 991.98px) {
  .heroSwiper {
    height: 520px;
    min-height: 420px;
    max-height: 580px;
  }
}

/* Mobile — fixed height, never 100vh */
@media (max-width: 767.98px) {
  .heroSwiper {
    height: 480px;
    min-height: 380px;
    max-height: 520px;
  }
}

@media (max-width: 575.98px) {
  .heroSwiper {
    height: 440px;
    min-height: 360px;
    max-height: 480px;
  }
}

/* ── 4. Slide layout ────────────────────────────────────────────────────────── */
.heroSlide {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

/* Background image — covers the slide */
.heroMedia {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Smooth scale on slide change */
  transition: transform 7000ms cubic-bezier(.25, .46, .45, .94);
  transform: scale(1.04);
}

.swiper-slide-active .heroMedia {
  transform: scale(1);
}

/* Respect reduced-motion: disable the Ken Burns pan */
@media (prefers-reduced-motion: reduce) {
  .heroMedia { transition: none; transform: scale(1); }
}

/* ── 5. Overlay ─────────────────────────────────────────────────────────────── */
.heroOverlay {
  position: absolute;
  inset: 0;
  /* Rich navy gradient — readable text, premium feel */
  background: linear-gradient(
    105deg,
    rgba(23, 34, 77, .78) 0%,
    rgba(23, 34, 77, .52) 55%,
    rgba(23, 34, 77, .30) 100%
  );
}

/* Stronger overlay on mobile for readability */
@media (max-width: 767.98px) {
  .heroOverlay {
    background: rgba(23, 34, 77, .70);
  }
}

/* ── 6. Hero content ────────────────────────────────────────────────────────── */
.heroContent {
  position: relative;
  z-index: 5;
  padding-block: 40px;
  max-width: 700px;
  /* RTL: content starts from the right */
  margin-inline-end: auto;
}

/* Entrance animation — triggered by Swiper active class */
.heroContent {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 600ms ease 200ms,
              transform 600ms cubic-bezier(.22, 1, .36, 1) 200ms;
}

.swiper-slide-active .heroContent {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .heroContent { opacity: 1; transform: none; transition: none; }
}

/* ── 7. Typography ──────────────────────────────────────────────────────────── */
.heroEyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--es-font-ui);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--es-orange);
  letter-spacing: .04em;
  margin: 0 0 14px;
  text-transform: none;
}

.heroEyebrow::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 2px;
  background: var(--es-orange);
  border-radius: 2px;
  flex-shrink: 0;
}

.heroTitle {
  font-family: var(--es-font-brand);
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.22;
  color: #ffffff;
  margin: 0 0 18px;
}

.heroTitle__accent {
  color: var(--es-orange);
  display: block;
}

.heroText {
  font-family: var(--es-font-ui);
  font-size: clamp(14px, 1.6vw, 16.5px);
  line-height: 1.75;
  color: rgba(255, 255, 255, .82);
  margin: 0 0 28px;
  max-width: 560px;
}

/* ── 8. CTA Buttons ─────────────────────────────────────────────────────────── */
.heroActions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.heroBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 50px;
  padding: 0 26px;
  border-radius: 50px;              /* very rounded — consistent with header */
  font-family: var(--es-font-ui);
  font-size: 14.5px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease,
              box-shadow 200ms ease, transform 130ms ease;
}

.heroBtn:focus-visible {
  outline: 3px solid var(--es-orange);
  outline-offset: 3px;
}

.heroBtn:active { transform: scale(.96); }

/* Call — solid orange gradient (primary) */
.heroBtn--call {
  background: linear-gradient(135deg, #f9a13a 0%, var(--es-orange) 50%, #e8780a 100%);
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(246, 135, 18, .38);
}
.heroBtn--call:hover,
.heroBtn--call:focus-visible {
  background: linear-gradient(135deg, #faa940 0%, var(--es-orange-dark) 100%);
  color: #ffffff;
  box-shadow: 0 8px 28px rgba(246, 135, 18, .50);
}

/* WhatsApp — ghost white (secondary) */
.heroBtn--wa {
  background: rgba(255,255,255,.12);
  color: #ffffff;
  border-color: rgba(255,255,255,.55);
  backdrop-filter: blur(4px);
}
.heroBtn--wa:hover,
.heroBtn--wa:focus-visible {
  background: rgba(255,255,255,.22);
  border-color: #ffffff;
  color: #ffffff;
}

.heroBtn .fas,
.heroBtn .fab { font-size: 14px; }

@media (max-width: 399.98px) {
  .heroBtn { height: 46px; padding: 0 18px; font-size: 13.5px; }
}

/* ── 9. Pagination tabs ─────────────────────────────────────────────────────── */
.heroTabs {
  position: absolute;
  bottom: 28px;
  inset-inline-start: 0;
  inset-inline-end: 0;
  z-index: 20;
  display: flex;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
}

/* Each bullet rendered by Swiper's renderBullet */
.heroTabs .swiper-pagination-bullet {
  pointer-events: auto;
  height: 36px;
  padding: 0 16px;
  border-radius: 50px;
  background: rgba(255,255,255,.18);
  border: 1.5px solid rgba(255,255,255,.35);
  backdrop-filter: blur(6px);
  color: rgba(255,255,255,.80);
  font-family: var(--es-font-ui);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  opacity: 1;
  transition: background 200ms ease, border-color 200ms ease,
              color 200ms ease, transform 200ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.heroTabs .swiper-pagination-bullet:hover {
  background: rgba(255,255,255,.28);
  border-color: rgba(255,255,255,.70);
  color: #ffffff;
}

.heroTabs .swiper-pagination-bullet-active {
  background: var(--es-orange);
  border-color: var(--es-orange);
  color: #ffffff;
  transform: scale(1.06);
  box-shadow: 0 4px 14px rgba(246,135,18,.40);
}

@media (max-width: 575.98px) {
  .heroTabs { bottom: 18px; gap: 6px; }
  .heroTabs .swiper-pagination-bullet {
    height: 30px;
    padding: 0 11px;
    font-size: 11px;
  }
}

/* ── 10. Navigation arrows ──────────────────────────────────────────────────── */
.heroNav {
  position: absolute;
  bottom: 28px;
  inset-inline-end: 20px;
  z-index: 20;
  display: flex;
  gap: 8px;
}

.heroArrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  border: 1.5px solid rgba(255,255,255,.35);
  backdrop-filter: blur(6px);
  color: rgba(255,255,255,.85);
  font-size: 14px;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease,
              color 180ms ease, transform 130ms ease;
}

.heroArrow:hover {
  background: var(--es-orange);
  border-color: var(--es-orange);
  color: #ffffff;
}

.heroArrow:focus-visible {
  outline: 3px solid var(--es-orange);
  outline-offset: 2px;
}

.heroArrow:active { transform: scale(.92); }

.heroArrow.swiper-button-disabled {
  opacity: .35;
  pointer-events: none;
}

@media (max-width: 575.98px) {
  .heroNav { display: none; }   /* arrows hidden on very small screens — tabs suffice */
}

/* ── 11. Swiper overrides ───────────────────────────────────────────────────── */
/* Remove Swiper's own navigation arrows (we use custom ones) */
.heroSwiper .swiper-button-next,
.heroSwiper .swiper-button-prev { display: none !important; }

/* ── 12. Print ──────────────────────────────────────────────────────────────── */
@media print {
  .heroPremium { display: none; }
}