/* ==========================================================================
   BAR3AM — HERO
   Figma: 2475:2026 — 1280 x 787 (header 144 + hero band 643)
     text column   2475:2045  x 604..1216, y 210..720   (612 x 510)
     video card    2486:186   x  62..622,  y 337..652   (560 x 315)
   Every desktop number below is the literal Figma value at 1280.
   Depends on tokens.css + base.css (.eyebrow .btn .btn--primary .reveal .sr-only).
   Full-bleed: NOT wrapped in .container.
   ========================================================================== */

.hero {
  position: relative;
  overflow: clip;

  /* Same wash as .header (2475:2031 is one 1280x832 rect anchored at canvas
     y=0), shifted up by the header height so the two halves line up. */
  background: var(--grad-hero) 50% calc(-1 * var(--header-h)) / 100% var(--grad-hero-h) no-repeat,
              var(--c-card);

  /* Figma: band y 144..787, text column y 210..720 → 66 above, 67 below */
  padding-block: clamp(40px, 5.2vw, 66px) clamp(40px, 5.3vw, 67px);
}

/* Figma canvas is 1280 wide: card left edge x=62, text right edge x=1216. */
.hero__inner {
  inline-size: 100%;
  max-inline-size: 1280px;
  margin-inline: auto;
  padding-inline: 64px 62px;   /* inline-start = right = 64 · inline-end = left = 62 */

  display: grid;
  /* The card is a fixed 560 as long as there is room for it; the text column
     takes whatever is left (612 in Figma, 562 here — the 18px the two columns
     overlap in the design is slack the right-aligned text never uses). */
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  column-gap: 32px;
  align-items: center;
}

/* ==========================================================================
   TEXT COLUMN — Figma 2475:2045 · gaps 70 / 48 / 70, items aligned inline-start
   ========================================================================== */

.hero__text {
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* = inline-start = right in RTL */
}

/* ---- Eyebrow (2475:2046) — Bold 14 #424242 · 14px gap · 24x3 rule -------- */
.hero__eyebrow {
  gap: 14px;
  color: var(--c-ink-700);
  margin-block-end: clamp(32px, 5.5vw, 70px);
}
.hero__eyebrow::after {
  order: -1;                 /* Figma puts the rule at the inline-start */
  inline-size: 24px;
  block-size: 3px;
  background: var(--c-primary);
}

/* ---- Title (2475:2051) — Tajawal Bold 24, black, accent #21A85A ---------- */
.hero__title {
  font-size: var(--fs-h2);   /* 24px */
  font-weight: var(--fw-bold);
  line-height: 1.215;        /* Figma auto-leading for Tajawal */
  color: var(--c-ink-1000);
  margin-block-end: 32px;
}

.hero__accent { color: var(--c-green-fig); }   /* #21A85A */

/* ---- Lead (2475:2052) — Tajawal Regular 19 #171717, width 530 ------------ */
.hero__lead {
  font-size: var(--fs-h3);   /* 19px */
  font-weight: var(--fw-regular);
  line-height: 1.215;
  color: var(--c-ink-900);
  max-inline-size: 530px;
  margin-block-end: 48px;
}

/* ---- CTA (2475:2056) — 212 x 50, r10, Bold 18, no shadow ---------------- */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-block-end: clamp(32px, 5.5vw, 70px);
}

.hero__cta {
  inline-size: 212px;
  block-size: 50px;
  padding-inline: 10px;
  border-radius: 10px;       /* Figma uses a 10px rectangle, not a pill */
  font-size: var(--fs-body-lg);   /* 18px */
  line-height: 1;
  box-shadow: none;
}

/* Secondary CTA — same 50px pill-less shape as the primary, outlined instead
   of filled. Not a base.css variant: it exists only next to .hero__cta. Width
   follows its (shorter) label rather than the Figma 212, so the pair fits the
   text column; the ≤600 rule below overrides it back to full width. */
.hero__cta--tel {
  inline-size: auto;
  min-inline-size: 150px;
  padding-inline: 22px;
  background: var(--c-card);
  color: var(--c-primary);
  border: 1.5px solid var(--c-primary);
}
.hero__cta--tel:hover {
  background: color-mix(in srgb, var(--c-primary) 8%, var(--c-card));
}

/* ---- Features (2475:2058) — rows 24, gap 14, icon 20, inner gap 6 -------- */
.hero__features {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hero__feature {
  display: flex;
  align-items: center;
  gap: 6px;
  min-block-size: 24px;
  font-size: var(--fs-body);      /* 16px */
  font-weight: var(--fw-bold);
  line-height: 1.215;
  color: var(--c-ink-600);        /* #5E5E5E */
}

.hero__check {
  inline-size: 20px;
  block-size: 20px;
  flex: none;
  color: var(--c-green-fig);
}

/* ==========================================================================
   VISUAL COLUMN
   The box of .hero__visual IS the 560 x 315 video card. Every decoration is
   offset from it as a percentage of that box, so the cluster scales as one.
   ========================================================================== */

.hero__visual {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 560 / 315;
  justify-self: end;          /* = inline-end = left in RTL → card at x=62 */

  /* Figma centres the text column in the band but drops the card 29px below
     that centre line (card y 337..652 vs band centre 465.5). A top margin of
     2 x 29 shifts the centred box down by exactly 29. */
  margin-block-start: 58px;
}

.hero__dome,
.hero__burst,
.hero__ring,
.hero__dot,
.hero__sparkle {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

/* ---- Domes (2475:2033 / 2475:2034) --------------------------------------
   Circles clipped to their top 62.43% — Figma exports them as half-domes. --- */
.hero__dome {
  aspect-ratio: 1;
  border-radius: 50%;
  clip-path: inset(0 0 37.57% 0);
}

/* 2475:2034 — 519px outline */
.hero__dome--ring {
  inline-size: 92.679%;
  inset-inline-end: 4.464%;
  inset-block-start: -36.508%;
  border: 1.5px solid color-mix(in srgb, var(--c-primary) 78%, transparent);
}

/* 2475:2033 — 497px filled */
.hero__dome--fill {
  inline-size: 88.75%;
  inset-inline-end: 6.429%;
  inset-block-start: -33.016%;
  background: linear-gradient(
    115deg,
    color-mix(in srgb, var(--c-primary) 46%, var(--c-card)) 0%,
    color-mix(in srgb, var(--c-primary) 60%, var(--c-card)) 100%
  );
}

/* ---- Burst marks (2475:2039) --------------------------------------------
   Figma draws this as a solid #E6AE0B rectangle behind an alpha mask
   ("Mask group" 2475:2039 / "Rectangle 3" 2475:2041). Hand-redrawing it as
   three <rect>s only ever approximated the real strokes, so Figma's own
   exported artwork is used instead.

   The obvious version of this is `background: var(--c-yellow)` + `mask:
   url(...)`, which would keep the ink on the token. It is NOT used: Chrome
   treats every file:// document as an opaque origin and silently drops a
   tainted mask image, so the marks vanish whenever index.html is opened
   straight off disk — which README.md explicitly supports. The brand orange
   is therefore baked into assets/img/hero-burst.png (recoloured from
   hero-burst-mask.png, alpha preserved). If --c-yellow ever changes, that PNG
   has to be regenerated with it.

   The artwork's 187:130 box is wider than Figma's 110.647 x 94.807 frame, so
   the width is scaled to 136.38 / 560 = 24.354% — that lands it at the SAME
   rendered height (94.807px) with its inline-end edge still pinned to Figma's x. */
.hero__burst {
  inline-size: 24.354%;
  block-size: auto;
  inset-inline-end: 80.506%;
  inset-block-start: -35.759%;
}

/* ---- Dashed circle (2486:722) — 150px ----------------------------------- */
.hero__ring {
  inline-size: 26.786%;
  aspect-ratio: 1;
  inset-inline-end: -3.214%;
  inset-block-start: -14.286%;
  border: 3px dashed var(--c-yellow-fig);
  border-radius: 50%;
}

/* ---- Dots (2486:723 / 2486:724) ----------------------------------------- */
.hero__dot {
  aspect-ratio: 1;
  border-radius: 50%;
}

/* 20px */
.hero__dot--yellow {
  inline-size: 3.571%;
  inset-inline-end: -0.357%;
  inset-block-start: 112.698%;
  background: var(--c-yellow-fig);
}

/* 14px */
.hero__dot--green {
  inline-size: 2.5%;
  inset-inline-end: 103.571%;
  inset-block-start: 7.937%;
  background: var(--c-green-fig);
}

/* ---- Sparkles (2486:725 / 2486:726) ------------------------------------- */
.hero__sparkle {
  block-size: auto;
  aspect-ratio: 1;
}

/* 30px yellow */
.hero__sparkle--lg {
  inline-size: 5.357%;
  inset-inline-end: 104.464%;
  inset-block-start: 58.73%;
  color: var(--c-yellow-fig);
}

/* 18px green */
.hero__sparkle--sm {
  inline-size: 3.214%;
  inset-inline-end: -7.5%;
  inset-block-start: 23.81%;
  color: var(--c-green-fig);
}

/* ==========================================================================
   VIDEO CARD — Figma 2486:186 «منطقة الفيديو»
   560 x 315 outer · 5px white border · r20 · 0 20 40 rgba(11,43,82,.35)
   The 5px border is inside the 560 x 315 box, so every child below is a
   percentage of the 550 x 305 CONTENT box — which is what Figma measures:
     شارة    13,13   (padding 14/8, text 110x11 Bold 13)
     play    248,126 53x53   → dead centre of 550 x 305
     الوقت    45,248  Medium 12 / 90% white
     track   45,272  460 x 6  r3  white 25%
     fill    375,272 130 x 6  #FFC93D          → 130/460 = 28.261%
     knob    368,268 14 x 14  white            → centred on the fill edge
   ========================================================================== */

.hero__card {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  border: 5px solid var(--c-card);
  border-radius: 20px;
  box-shadow: 0 20px 40px color-mix(in srgb, var(--c-navy-deep) 35%, transparent);
  background: var(--c-navy-deep);
}

/* ---- Footage ------------------------------------------------------------
   Figma fills the whole 550 x 305 content box with the still. Without this
   rule the <img> fell back to its 480 x 270 attribute size and left the card's
   navy background showing down the inline-end and bottom edges. --------------- */
.hero__media {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Slider skin — kept because js/main.js still ships initHeroSlider(); it is
   inert until a .hero__slider with .hero__slide children exists in the markup. */
.hero__slider {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}

.hero__slide {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s var(--ease);
  will-change: opacity;
}
.hero__slide--active { opacity: 1; }

/* 2486:187 / 2486:188 — two soft glows washed over the footage */
.hero__card::before,
.hero__card::after {
  content: "";
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side,
              color-mix(in srgb, var(--c-card) 38%, transparent), transparent);
}
.hero__card::before {          /* 260px at (-75, -95) */
  inline-size: 47.273%;
  aspect-ratio: 1;
  inset-inline-end: -13.636%;
  inset-block-start: -31.148%;
}
.hero__card::after {           /* 180px at (435, 195) */
  inline-size: 32.727%;
  aspect-ratio: 1;
  inset-inline-end: 79.091%;
  inset-block-start: 63.934%;
}

/* ---- Label (2486:720) — 50% primary, WHITE Bold 13, r5 — not a pill ----- */
.hero__badge {
  position: absolute;
  z-index: 3;
  inset-block-start: 4.262%;    /* 13 / 305 */
  inset-inline-start: 2.364%;   /* 13 / 550 */
  display: inline-flex;
  align-items: center;
  padding-inline: 14px;
  padding-block: 8px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--c-primary) 50%, transparent);
  color: var(--c-text-on-dark);
  font-size: 13px;
  font-weight: var(--fw-bold);
  line-height: 1;
  white-space: nowrap;
}

/* ---- Play button (2487:2887) — 53px, dead centre ------------------------ */
.hero__play {
  position: absolute;
  z-index: 3;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(50%, -50%);
  display: grid;
  place-items: center;
  inline-size: clamp(40px, 9.636%, 60px);   /* 53 / 550 */
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c-card);
  color: var(--c-primary);
  cursor: pointer;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--c-navy-deep) 28%, transparent);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.hero__play svg {
  inline-size: 32%;
  block-size: auto;
  margin-inline-start: 7%;   /* optical centring of the triangle */
}

.hero__play:hover {
  transform: translate(50%, -50%) scale(1.08);
  background: var(--c-bg);
}
.hero__play:active { transform: translate(50%, -50%) scale(1); }

/* ---- Timecode (2486:719) ------------------------------------------------ */
.hero__time {
  position: absolute;
  z-index: 3;
  inset-block-start: 81.311%;   /* 248 / 305 */
  /* A timecode is always read left-to-right — under the page's RTL direction
     "0:45 / 2:30" reorders to "2:30 / 0:45". Forcing `direction: ltr` fixes
     the reading order, and because logical insets resolve against the
     element's OWN direction, inline-start now means the physical left, which
     is where Figma puts it (x=45). Do not "correct" this to inline-end. */
  direction: ltr;
  inset-inline-start: 8.182%;   /* left 45 / 550 */
  font-size: var(--fs-xs);      /* 12px */
  font-weight: var(--fw-medium);
  line-height: 1;
  color: color-mix(in srgb, var(--c-text-on-dark) 90%, transparent);
}

/* ---- Progress bar (2486:716 / 717 / 718) --------------------------------
   track 45,272 460x6 r3 white 25% · fill 375,272 130x6 · knob 368,268 14x14.
   Figma's fill sits at the FAR END of the track (x 375..505 of 45..505) and the
   knob is centred on the fill's leading edge (x 375). `direction: ltr` on the
   track keeps those physical x values readable — inline-start is then the
   physical left, exactly as Figma measures. Do not "correct" it to rtl. */
.hero__track {
  position: absolute;
  z-index: 3;
  direction: ltr;
  inset-block-start: 89.18%;    /* 272 / 305 */
  inset-inline-start: 8.182%;   /* 45 / 550  */
  inline-size: 83.636%;         /* 460 / 550 */
  block-size: 6px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--c-text-on-dark) 25%, transparent);
}

.hero__fill {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: 28.261%;         /* 130 / 460 */
  border-radius: 3px;
  background: var(--c-yellow-fig);   /* Figma #FFC93D → brand orange */
}

.hero__knob {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: calc(28.261% - 7px);   /* centred on the fill's edge */
  inline-size: 14px;
  block-size: 14px;
  border-radius: 50%;
  background: var(--c-card);
  transform: translateY(-50%);
}

/* ---- Slider dots (inert — no .hero__dot-btn in the markup) -------------- */
.hero__dots {
  position: absolute;
  z-index: 3;
  inset-block-end: 12px;
  inset-inline: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.hero__dot-btn {
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c-text-on-dark) 45%, transparent);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              inline-size var(--dur) var(--ease);
  border: 0;
  padding: 0;
}

.hero__dot-btn--active {
  background: var(--c-text-on-dark);
  inline-size: 24px;
  border-radius: 5px;
}

/* ==========================================================================
   VIDEO DIALOG — not in Figma. Opened from .hero__play, closed with the X,
   the backdrop, or Esc. Styled to read as the same card, blown up.
   ========================================================================== */

.hero__modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 48px);

  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.hero__modal.is-open { opacity: 1; }

/* Must come after the display rule above, or `hidden` loses. */
.hero__modal[hidden] { display: none; }

.hero__modal-sheet {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--c-navy-deep) 82%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  cursor: pointer;
}

.hero__modal-dialog {
  position: relative;
  /* 16:9, capped so it never overflows the viewport. */
  inline-size: min(960px, 100%, calc((100vh - 160px) * 16 / 9));
  /* Explicit height: on large screens cap at 540px or viewport,
     on small screens the media-query below overrides this. */
  block-size: min(540px, calc(100vh - 160px));

  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 5px solid var(--c-card);
  border-radius: 14px;
  background: var(--c-ink-1000);
  box-shadow: 0 20px 40px color-mix(in srgb, var(--c-navy-deep) 45%, transparent);

  transform: scale(0.96) translateY(10px);
  transition: transform var(--dur) var(--ease);
}
.hero__modal.is-open .hero__modal-dialog { transform: none; }

.hero__modal-stage {
  flex: 1 1 auto;
  min-block-size: 0;
  position: relative;
}

/* Buffering spinner. Sits over the <video>, which is still showing its poster,
   so a slow connection reads as "loading" instead of a dead black box.
   js/main.js toggles .is-loading on waiting / canplay. */
.hero__modal-stage.is-loading::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset-block-start: 50%;
  inset-inline-start: 50%;   /* RTL: matches .hero__play's centring trick */
  inline-size: 46px;
  block-size: 46px;
  border: 3px solid color-mix(in srgb, var(--c-text-on-dark) 26%, transparent);
  border-block-start-color: var(--c-text-on-dark);
  border-radius: 50%;
  transform: translate(50%, -50%);
  animation: hero-spin 0.8s linear infinite;
  pointer-events: none;
}

@keyframes hero-spin {
  to { transform: translate(50%, -50%) rotate(360deg); }
}

.hero__modal-stage > video,
.hero__modal-stage > iframe {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
  background: var(--c-ink-1000);
  object-fit: contain;
}

/* Fallback line shown when the browser cannot play the file at all. */
.hero__modal-fallback {
  display: grid;
  place-items: center;
  block-size: 100%;
  padding: 24px;
  text-align: center;
  color: var(--c-text-on-dark);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
}
.hero__modal-fallback a { color: var(--c-yellow-fig); text-decoration: underline; }

.hero__modal-close {
  position: absolute;
  z-index: 2;
  inset-block-start: 12px;
  inset-inline-start: 12px;   /* = right in RTL */
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 50%;
  cursor: pointer;
  color: var(--c-text-on-dark);
  background: color-mix(in srgb, var(--c-navy-deep) 55%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.hero__modal-close:hover {
  background: color-mix(in srgb, var(--c-navy-deep) 80%, transparent);
  transform: scale(1.08);
}
.hero__modal-close svg { inline-size: 18px; block-size: 18px; }

/* Scroll lock while the dialog is open (set by js/main.js on <html>). */
.is-video-open,
.is-video-open body { overflow: hidden; }

/* ==========================================================================
   RESPONSIVE — Figma has no breakpoints below 1280; these are ours.
   ========================================================================== */

@media (max-width: 1200px) {
  .hero__inner { padding-inline: clamp(16px, 4.4vw, 56px); }
}

/* Stack to one column, card first. */
@media (max-width: 900px) {
  .hero {
    /* room above the card for the domes (they rise 36.5% of the card height) */
    padding-block: clamp(88px, 17vw, 132px) clamp(48px, 8vw, 72px);
    background-size: 100% 100%;
    background-position: 50% 0;
  }

  .hero__inner {
    grid-template-columns: 1fr;
    row-gap: 48px;
    justify-items: center;
  }

  .hero__visual {
    order: -1;
    justify-self: center;
    max-inline-size: 560px;
    margin-block-start: 0;
  }

  .hero__text {
    align-items: center;
    text-align: center;
    max-inline-size: 560px;
  }

  .hero__lead { max-inline-size: 100%; }

  /* Two buttons now wrap into two rows on narrow screens — keep each row on
     the column's centre line instead of hugging the inline-start edge. */
  .hero__actions { justify-content: center; }

  .hero__features {
    align-items: flex-start;
    text-align: start;
  }

  /* sits below the card, would land in the text */
  .hero__dot--yellow { display: none; }
}

@media (max-width: 600px) {
  .hero__inner { row-gap: 40px; }

  /* leave a little slack so the dashed circle stays on canvas */
  .hero__visual { max-inline-size: calc(100% - 28px); }

  .hero__title { font-size: 22px; }
  .hero__lead  { font-size: var(--fs-body-lg); }   /* 18px */

  .hero__cta { inline-size: 100%; max-inline-size: 260px; }

  .hero__badge { font-size: var(--fs-xs); padding-inline: 10px; padding-block: 6px; }
  .hero__time { display: none; }

  .hero__burst,
  .hero__dot--green,
  .hero__sparkle--lg,
  .hero__sparkle--sm { display: none; }

  .hero__modal { padding: 12px; }
  .hero__modal-dialog {
    border-width: 3px;
    border-radius: 10px;
    /* Google Drive embed has its own toolbar (~50px top + ~50px bottom);
       on narrow screens the 16:9 width-based height is too small (~210px)
       so the video gets cropped. Use a generous height cap instead. */
    inline-size: 100%;
    block-size: min(70vh, calc(100vh - 100px));
  }

  /* Move the close button above the dialog so it doesn't overlap video */
  .hero__modal-close {
    inset-block-start: -44px;
    inset-inline-start: 0;
    inline-size: 36px;
    block-size: 36px;
  }
}

@media (max-width: 380px) {
  .hero__feature { font-size: var(--fs-sm); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__play,
  .hero__play:hover,
  .hero__play:active { transform: translate(50%, -50%); }

  .hero__modal-stage.is-loading::after { animation: none; }

  .hero__modal,
  .hero__modal-dialog,
  .hero__modal-close { transition: none; }
  .hero__modal-dialog { transform: none; }
}