/* SPARK Logistics — Split video hero + highlights bar */

.hero {
  position: relative;
  min-block-size: 100vh;   /* fallback */
  min-block-size: 100dvh;
  display: grid;
  grid-template-columns: var(--hero-split-a) var(--hero-split-b);
  background: var(--color-navy);
}

/* Mobile / tablet: stacked panels (side-by-side split is desktop-only) */
@media (max-width: 1023px) {
  .hero {
    grid-template-columns: 1fr;
    min-block-size: 0;
  }
}

/* Desktop split: two panels whose widths GSAP animates via --hero-split-* */
.hero-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  isolation: isolate;
  color: var(--color-white);
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  transform-origin: center;
  will-change: transform;
}

.hero-media img,
.hero-media video {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.hero-panel .video-overlay {
  z-index: 1;
  background:
    linear-gradient(to top, rgba(7, 28, 51, 0.94), rgba(7, 28, 51, 0.38) 52%, rgba(7, 28, 51, 0.3));
}

.hero-content {
  position: relative;
  z-index: var(--z-content);
  width: min(35rem, 92%);
  padding-block-end: clamp(5.5rem, 12vh, 8rem);
  padding-inline-start: clamp(1.5rem, 4vw, 4.5rem);
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--color-secondary);
}

html[lang="ar"] .hero-tag { letter-spacing: 0; }

.hero-tag::before {
  content: "";
  inline-size: 2rem;
  block-size: 2px;
  background: currentColor;
}

.hero-title {
  margin-block-start: 1.1rem;
  font-size: var(--fs-display);
  color: var(--color-white);
  max-inline-size: 14ch;
}

.hero-desc {
  margin-block-start: 1.15rem;
  max-inline-size: 30rem;
  color: var(--color-text-inverse-muted);
}

.hero-actions {
  margin-block-start: 1.9rem;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
}

.hero-cta { --btn-slide: #ffffff; }
.hero-cta:hover, .hero-cta:focus-visible { color: var(--color-primary); }

.hero-more {
  /* Extra info list — always visible on every device */
  display: grid;
  gap: 0.55rem;
  margin-block-start: 1.6rem;
}

.hero-more li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.93rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

.hero-more .icon {
  color: var(--color-secondary);
  inline-size: 1.15rem;
  block-size: 1.15rem;
}

.hero-divider {
  position: absolute;
  inset-block-start: 0;
  inset-block-end: 0;
  inset-inline-start: var(--hero-split-a);
  z-index: 2;
  inline-size: 1px;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.55) 22%, rgba(255, 255, 255, 0.55) 78%, transparent);
  pointer-events: none;
}

/* Scroll cue */
.hero-scroll-cue {
  position: absolute;
  inset-block-end: 1.6rem;
  inset-inline-start: 50%;
  translate: -50% 0;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 0.45rem;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-decoration: none;
}

.hero-scroll-cue::after {
  content: "";
  inline-size: 1px;
  block-size: 2.4rem;
  background: currentColor;
  animation: cue-drop 2.2s var(--ease-out) infinite;
  transform-origin: top;
}

@keyframes cue-drop {
  0% { transform: scaleY(0); }
  45% { transform: scaleY(1); transform-origin: top; }
  46% { transform-origin: bottom; }
  90%, 100% { transform: scaleY(0); transform-origin: bottom; }
}

/* Mobile / tablet: stacked panels */
@media (max-width: 1023px) {
  .hero {
    grid-template-columns: 1fr;
    min-block-size: 0;
  }

  .hero-panel {
    min-block-size: min(88vh, 47rem);   /* fallback */
    min-block-size: min(88dvh, 47rem);
  }

  .hero-content {
    padding-block-end: 3.5rem;
    width: min(38rem, calc(100% - 2.5rem));
    margin-inline: auto;
  }

  .hero-divider,
  .hero-scroll-cue { display: none; }

  .hero-actions { gap: 0.9rem; }

  .hero-actions .btn { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 400px) {
  .hero-panel { min-block-size: min(82vh, 42rem); min-block-size: min(82dvh, 42rem); }

  .hero-content { width: calc(100% - 2.25rem); padding-block-end: 3rem; }

  .hero-title { font-size: clamp(1.9rem, 8.6vw, 2.4rem); }

  .hero-desc { font-size: 0.95rem; }
}

/* ---------------------------------------------------- Hero highlights */
.highlights {
  position: relative;
  background: var(--color-primary);
  color: var(--color-white);
}

.highlights-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  background: rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.highlight-cell {
  display: grid;
  gap: 0.9rem;
  padding: clamp(1.6rem, 2.6vw, 2.4rem);
  background: var(--color-primary);
}

.highlight-cell .icon {
  inline-size: 2.4rem;
  block-size: 2.4rem;
  stroke-width: 1.4;
  color: var(--color-secondary);
}

.highlight-cell strong {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: var(--lh-snug);
  color: var(--color-white);
}

.highlight-cell span {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.75);
}

.highlights-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  padding-block-start: 2.5rem;
  margin-block-start: 0;
}

.highlights-wrap { padding-block: clamp(2.5rem, 5vw, 4rem); }

@media (max-width: 900px) {
  .highlights-inner {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .highlight-cell {
    border-block-end: 1px solid rgba(255, 255, 255, 0.14);
  }

  .highlight-cell:last-child { border-block-end: 0; }
}