/* ===========================================================================
   09 — CTA BAND

   The panel geometry below was read off the live reference at a 1440px
   viewport with aeline/_work/cta.mjs, after scrolling the whole page. Those
   numbers are kept because the panel is the visual bookend to the hero and
   the two have to match:
     · the background is a PHOTOGRAPH, not a colour — <img> 1416x487,
       object-fit cover, inside a 24px-radius panel inset 12px from the page
       edge, i.e. the same construction as the hero
     · a second layer sits on top of it: a bottom-up gradient scrim,
       linear-gradient(rgba(55,149,215,0), rgb(0,70,120)), opacity .58,
       mix-blend-mode multiply, starting 124px down the panel
     · the button is 48px tall on --lime-soft with a 40px circle — it is NOT
       the hero's .btn--go (44px, --lime, 32px circle), so it gets its own
       class rather than a silent override of a shared one

   What changed for OSUS: the 40px avatar row is gone, so the first row is now
   a 20px mono kicker. The copy column's rhythm is re-tuned around that below.

   RTL: this stylesheet serves both directions. Every inline offset is
   logical, the arrow is mirrored (the photograph and the scrim are not), the
   mono tracking is dropped in Arabic because it breaks the letter joins, and
   the rolling label gets 4px more room in Arabic so descenders are not
   clipped by its overflow:hidden.
   =========================================================================== */

/* Outer section 1440x511 = the 1416x487 panel plus a 12px gutter all round,
   matching --hero-inset.
   Padding, not margin: the live wrapper's own box is the full 1440x511, and
   padding also keeps the gutter from collapsing into a neighbouring section. */
.cta {
  padding: var(--hero-inset);
}

.cta-panel {
  position: relative;
  isolation: isolate;             /* keeps the scrim's multiply inside the panel */
  min-height: 487px;              /* measured panel height */
  border-radius: var(--hero-r);   /* 24px, same as the hero */
  padding: 40px;                  /* measured; content therefore starts at x52 */
  overflow: hidden;
  display: flex;
  align-items: center;
  /* Fallback only — visible if media/meadow-sky.jpg is absent. Approximates
     the photo's own top-to-bottom run: open sky into a green meadow. */
  background: linear-gradient(180deg, #86ccf3 0%, #4ba5dd 42%, #5c8f52 74%, #2f5c2c 100%);
}

/* A photograph is never mirrored, in either direction. */
.cta-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;              /* measured objectFit */
  object-position: 50% 50%;       /* measured objectPosition */
  z-index: -2;
}

/* The veil. NOT decoration — it is the only thing that makes white body text
   legal on a photograph. Measured before it existed, white over the panel came
   out at 3.06:1 behind the sub at 900px wide, where 16px text needs 4.5:1; the
   48px heading passed on the large-text rule but the sub and the kicker did
   not, at every width, in both languages. A photo cannot be relied on for a
   contrast floor, so the floor is put under it here.
   Above 1280 the copy occupies the first half of the panel, so the veil falls
   off across the second half and the photograph stays visible where it is not
   being read over. That falloff is direction-bearing: the copy sits at the
   inline start, so RTL flips it below. */
.cta-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to right,
      rgba(2, 46, 79, .66) 0%,
      rgba(2, 46, 79, .44) 46%,
      rgba(2, 46, 79, .12) 74%,
      rgba(2, 46, 79, .04) 100%);
}

/* Measured: position absolute, inset 124px 0 0 0 on a 487px panel (= 363px
   tall), opacity .58, mix-blend-mode multiply. Expressed as a percentage so
   the ratio survives the panel growing at narrow widths: 124/487 = 25.46%.
   The two horizontal values are both 0, so this shorthand is direction-safe. */
.cta-scrim {
  position: absolute;
  inset: 25.46% 0 0 0;
  background: linear-gradient(180deg, rgba(55, 149, 215, 0) 0%, rgb(0, 70, 120) 100%);
  opacity: .58;
  mix-blend-mode: multiply;
  z-index: -1;
  pointer-events: none;
}

/* -- the copy column ------------------------------------------------------ */

/* Was 654px when row 1 was a 40px avatar strip. Widened to 720 because the
   heading's editorial break has to hold in BOTH languages: at 654 the English
   "Every decision has a foundation," wrapped, and the section showed three
   lines where the copy is written as two. Measured: that line sets at 635px.
   The rows are now 20 + 28 + 112 + 16 + sub + 28 + 48, which centres inside
   the 407px of content box the 487px panel leaves. */
.cta-copy {
  position: relative;
  width: 720px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;        /* flex axis, not text axis — safe under RTL */
  gap: 28px;
  color: #fff;
  text-align: start;
}

/* row 1 — the kicker that replaced "Trusted over 5,000+" and its faces.
   Square dot, matching the shared .eyebrow, but lime so it reads on the
   photograph. */
.cta-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.92);
}
.cta-kicker::before {
  content: '';
  width: 4px;
  height: 4px;
  background: var(--lime);
  flex: none;
}

/* row 2 — heading + sub */
.cta-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Two spans, not a wrap: the line break is editorial and must survive
   translation, and the two languages break at different widths. */
.cta-h2 {
  margin: 0;
  max-width: 720px;
  font-size: 48px;
  line-height: 56.16px;
  font-weight: 500;
  letter-spacing: -0.06em;        /* -2.88px at 48px */
  color: #fff;
}
.cta-h2 span { display: block; }
/* Same dimming the hero gives its second line — that is what ties the two
   photographic panels together as a pair. */
.cta-h2__b { color: rgba(255, 255, 255, 0.75); }

/* Narrower than the heading on purpose: 720px of 16px text is past a
   comfortable measure, and the ragged edge under a two-line heading reads as
   a mistake. */
.cta-sub {
  max-width: 560px;
  color: #fff;
}

/* row 3 — the pill. Shell height 48: 4 + 40 + 4 round the circle. */
.cta-actions { display: flex; }

.cta-btn {
  height: 48px;
  padding-block: 4px;
  padding-inline: 16px 4px;       /* measured; text sits 16px inside the start */
  gap: 4px;                       /* measured */
  border-radius: 48px;            /* measured */
  background: var(--lime-soft);   /* rgb(214,253,112) — lighter than the hero's --lime */
  color: var(--ink);
  overflow: hidden;               /* measured: both label copies are clipped */
}
.cta-btn:hover { background: var(--lime); }
.cta-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* The label rolls one line height on hover. --roll is a variable because
   Arabic needs 24px where Latin needs 20px: the wrapper clips, and IBM Plex
   Sans Arabic drops below a 20px box at 14px. */
.cta-btn__label {
  --roll: 20px;
  display: block;
  height: var(--roll);
  padding-inline: 4px;            /* measured on the label wrapper */
  overflow: hidden;
}
.cta-btn__label span {
  display: block;
  height: var(--roll);
  line-height: var(--roll);
  transition: transform .38s cubic-bezier(.22, .61, .36, 1);
}
.cta-btn:hover .cta-btn__label span { transform: translateY(calc(var(--roll) * -1)); }

.cta-btn__go {
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;                   /* 4px inside the 48px pill */
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
}
/* Measured offsets inside the circle: the visible copy centred at (10,10),
   the incoming copy waiting at start-bottom. inset-inline-start, so in Arabic
   the incoming copy waits at the RIGHT-bottom instead — it has to travel the
   same way the mirrored arrow points. */
.cta-btn__go svg {
  position: absolute;
  width: 20px;                    /* measured icon box, larger than the hero's 16px */
  height: 20px;
  transition: transform .38s cubic-bezier(.22, .61, .36, 1);
}
.cta-btn__go svg:first-child { top: 10px;  inset-inline-start: 10px; }
.cta-btn__go svg + svg       { top: 30px;  inset-inline-start: -10px; }
.cta-btn:hover .cta-btn__go svg { transform: translate(20px, -20px); }

/* ============================================================== RTL ==== */

/* The arrow is a direction-bearing glyph: it points up-and-forward, so it has
   to be mirrored. Its travel is mirrored with it — translate is physical, so
   forward means -20px here. scaleX is applied last in the list, i.e. the
   element mirrors about its own centre and then moves. */
[dir="rtl"] .cta-btn__go svg { transform: scaleX(-1); }
[dir="rtl"] .cta-btn:hover .cta-btn__go svg { transform: translate(-20px, -20px) scaleX(-1); }

/* The veil falls off away from the copy, and the copy changes side. CSS has
   no logical keyword for a gradient axis, so the flip is explicit. */
[dir="rtl"] .cta-panel::before {
  background: linear-gradient(to left,
      rgba(2, 46, 79, .66) 0%,
      rgba(2, 46, 79, .44) 46%,
      rgba(2, 46, 79, .12) 74%,
      rgba(2, 46, 79, .04) 100%);
}

/* Positive tracking breaks the joins between Arabic letters. .mono sets
   +0.12em globally; both places this section uses it are cancelled here.
   The font swap is the same defect one step earlier: --mono resolves to Geist
   Mono, which has no Arabic, so the LETTERS fell back to whatever Arabic face
   the machine had while the SPACE kept coming from the monospace face — visible
   as a hole in the middle of "جاهزون للبدء". Naming the face makes the whole
   run come from one font.

   That name used to be 'IBM Plex Sans Arabic', which is NOT one of the five
   faces this page loads. On a machine that happens to have it installed these
   two elements were drawn in a sixth face nobody chose, and on every other
   machine they were not — the same page, two different typefaces, depending on
   the visitor. --sans resolves to Mirza here, which is the face Ahmad picked. */
[dir="rtl"] .cta-kicker,
[dir="rtl"] .cta-btn {
  letter-spacing: 0;
  font-family: var(--sans);
}

/* Arabic needs a little more leading, and less negative tracking, than Latin
   at the same size — body sets -0.02em and the h2 -0.06em, both of which
   squeeze the joins at these sizes. */
[dir="rtl"] .cta-kicker { line-height: 24px; }
[dir="rtl"] .cta-h2 { line-height: 1.32; letter-spacing: -0.02em; }
[dir="rtl"] .cta-sub { line-height: 30px; letter-spacing: 0; }
[dir="rtl"] .cta-btn__label { --roll: 24px; }

/* ======================================================= RESPONSIVE ==== */

@media (max-width: 1279px) {
  .cta-panel { min-height: 440px; padding: 32px; }
  .cta-copy  { width: 100%; gap: 24px; }
  .cta-h2    { font-size: clamp(30px, 4.4vw, 48px); line-height: 1.17; max-width: 100%; }
  .cta-sub   { max-width: 560px; }
  [dir="rtl"] .cta-h2 { line-height: 1.32; }

  /* Below this the copy spans ~94% of the panel, so a horizontal falloff
     would leave the end of every line unprotected. The veil goes near-uniform
     instead — vertical, therefore the same in both directions. */
  .cta-panel::before,
  [dir="rtl"] .cta-panel::before {
    background: linear-gradient(to bottom,
        rgba(2, 46, 79, .34) 0%,
        rgba(2, 46, 79, .46) 100%);
  }
}

@media (max-width: 809px) {
  .cta { padding: 8px; }          /* matches the hero's gutter at this breakpoint */
  .cta-panel { min-height: 420px; padding: 24px; border-radius: 20px; }
  .cta-copy  { gap: 20px; }
  .cta-h2    { font-size: clamp(26px, 7.4vw, 36px); }
  .cta-head  { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .cta-btn__label span,
  .cta-btn__go svg { transition: none; }
  .cta-btn:hover .cta-btn__label span { transform: none; }
  .cta-btn:hover .cta-btn__go svg { transform: none; }
  [dir="rtl"] .cta-btn:hover .cta-btn__go svg { transform: scaleX(-1); }
}