/* ==========================================================================
   Hero slider — height and presentation, driven by HeroUI.

   THE HEIGHT FIX
   --------------
   The old rule was `min-height: 88vh`. On mobile, `vh` measures the viewport
   as though the browser toolbars were hidden, so the bottom of the hero sits
   underneath the address bar — the well-known "100vh lies" problem.

   `svh` measures the SMALL viewport (toolbars visible), so nothing is ever
   cut off. Every height below therefore writes two lines:

       min-height: 88vh;    <- older browsers stop here
       min-height: 88svh;   <- everyone else uses this

   The vh line MUST come first: a browser that does not understand svh simply
   discards that declaration and keeps the previous one.
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  overflow: hidden;
  background: var(--plum, #2e1a24);

  /* fallback first, then the modern unit — see the note above */
  min-height: var(--hero-h-fb, 88vh);
  min-height: var(--hero-h, 88svh);
}

/* A floor in px so a short laptop window never crushes the hero. */
.hero[data-hero-min] { min-height: max(var(--hero-h, 88svh), var(--hero-min, 460px)); }

/* --- aspect mode: the image ratio decides the height --- */
.hero[data-hero-mode="aspect"] {
  min-height: 0;
  aspect-ratio: var(--hero-aspect, 16 / 9);
  height: auto;
}

/* --- fixed mode: an exact pixel height --- */
.hero[data-hero-mode="fixed"] {
  min-height: var(--hero-fixed, 640px);
}

/* --- auto mode: the content decides --- */
.hero[data-hero-mode="auto"] {
  min-height: 0;
  padding-block: clamp(60px, 8vw, 130px);
}

/* ---------------- content placement ---------------- */
.hero[data-hero-valign="top"]    { align-items: flex-start; }
.hero[data-hero-valign="center"] { align-items: center; }
.hero[data-hero-valign="bottom"] { align-items: flex-end; }

.hero .hero-inner {
  max-width: var(--hero-text-w, 640px);
  padding-block: var(--hero-pad, 60px);
}

/* Flow-relative so it mirrors between Arabic and English on its own. */
.hero[data-hero-align="center"] .wrap { display: flex; justify-content: center; }
.hero[data-hero-align="center"] .hero-inner,
.hero[data-hero-align="center"] .hero-slides { text-align: center; }
.hero[data-hero-align="center"] .hero-cta { justify-content: center; }

.hero[data-hero-align="end"] .wrap { display: flex; justify-content: flex-end; }
.hero[data-hero-align="end"] .hero-inner { text-align: start; }

/* ---------------- imagery ---------------- */
.hero-bg::after {
  /* The scrim strength is a setting; the direction still follows the language. */
  opacity: var(--hero-overlay, .55);
}

.hero-bg .slide {
  transition: opacity var(--hero-speed, 1800ms) ease;
}

/* Ken Burns is opt-in — it is motion, and motion has a cost. */
.hero[data-hero-kb="0"] .hero-bg .slide.active { animation: none; transform: none; }

/* --- slide transition styles --- */
.hero[data-hero-trans="none"] .hero-bg .slide { transition: none; }
.hero[data-hero-trans="slide"] .hero-bg .slide {
  transition: opacity var(--hero-speed, 1800ms) ease,
              transform var(--hero-speed, 1800ms) cubic-bezier(.2, .6, .2, 1);
  transform: translateX(6%) scale(1.04);
}
html[dir="rtl"] .hero[data-hero-trans="slide"] .hero-bg .slide { transform: translateX(-6%) scale(1.04); }
.hero[data-hero-trans="slide"] .hero-bg .slide.active { transform: translateX(0) scale(1.05); }

/* ---------------- scroll cue ---------------- */
.hero[data-hero-cue="0"] .hero-scroll { display: none; }

/* ---------------- mobile ---------------- */
@media (max-width: 860px) {
  .hero {
    min-height: var(--hero-h-m-fb, 78vh);
    min-height: var(--hero-h-m, 78svh);
  }
  .hero[data-hero-min] {
    min-height: max(var(--hero-h-m, 78svh), var(--hero-min-m, 380px));
  }
  /* A fixed pixel height rarely survives a phone — cap it at the viewport. */
  .hero[data-hero-mode="fixed"] {
    min-height: min(var(--hero-fixed, 640px), 88vh);
    min-height: min(var(--hero-fixed, 640px), 88svh);
  }
  .hero[data-hero-align="end"] .wrap { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg .slide,
  .hero-bg .slide.active { animation: none !important; transition: opacity .2s linear; transform: none; }
}