/* ==========================================================================
   BAR3AM — Cambridge section  (Figma 2483:2839 / panel 2483:2840)
   Inset rounded navy panel on a white page background.

   Every value in the first half of this file is Figma's own, measured at the
   1280 canvas: panel 1152×480 @ r=28, content frame 1040×229 inset 56px from
   the panel edges, tiles 258×96 @ r=14, badge 273×49 at 41/57 from the top
   right corner. Breakpoints below 1280 are ours — Figma has none.
   ========================================================================== */

.cambridge {
  /* Figma's "Auto" line height resolves from Tajawal's typo metrics (~1.2em).
     Chrome's `line-height: normal` uses the win metrics instead (~1.5em), which
     would push every Figma `leading-[normal]` box 25% too tall. Pin it. */
  --cambridge-lh-auto: 1.2;

  padding-block: 64px;          /* Figma section py-64 */
  background: var(--c-card);
}

/* Gutter wrapper. NOT `.container` — that would cap the panel at 1104px;
   Figma's panel is 1152px wide at the 1280 canvas, so the wrapper is
   1152 + 2×24 and the padding is what shrinks first. */
.cambridge__wrap {
  inline-size: 100%;
  max-inline-size: calc(var(--container) + 48px);
  margin-inline: auto;
  padding-inline: 24px;
}

/* ---- Panel -------------------------------------------------------------- */
.cambridge__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;

  inline-size: 100%;
  min-block-size: 480px;                    /* Figma h-480 */
  border-radius: 28px;                      /* Figma r-28, not --r-2xl */
  /* Figma: linear-gradient(150.945deg, #135BB0 0%, #0B3D7A 71.429%) */
  background: linear-gradient(150.945deg, var(--c-primary) 0%, var(--c-navy-fig) 71.429%);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--c-navy) 44%, transparent);

  /* content frame sits at y=136, is 229 tall, panel is 480 → 115 below */
  padding-block: 136px 115px;
  padding-inline: 56px;
}

/* ---- Layout ------------------------------------------------------------- */
/* Figma 2487:2890 — 1040×229, row, space-between, centered cross-axis.
   RTL puts the copy column at the visual right and the tile grid at the left,
   exactly as the Figma canvas (which is already the RTL rendering). */
.cambridge__inner {
  z-index: 2;                   /* flex item — no `position` needed */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-block-size: 229px;
}

/* ---- Copy column (Figma 2487:2888 — w 483, col, gap 24) ----------------- */
.cambridge__text {
  flex: 0 1 483px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;      /* RTL start = visual right, as in Figma */
  gap: 24px;
}

.cambridge__copy {
  display: flex;
  flex-direction: column;
  gap: 12px;                    /* Figma 2487:2891 */
  inline-size: 100%;
}

/* Badge — Figma 2483:2846: absolute 273×49 at top 41 / right 57 of the panel.
   `.cambridge__text` and `.cambridge__inner` are deliberately un-positioned so
   the containing block is the panel itself. */
.cambridge__chip {
  position: absolute;
  inset-block-start: 41px;
  inset-inline-start: 57px;     /* RTL start = visual right */
  z-index: 3;                   /* Figma paints the badge over the yellow dot */

  justify-content: center;
  min-inline-size: 273px;
  max-inline-size: 100%;
  block-size: 49px;
  padding-inline: 14px;
  padding-block: 6px;
  overflow: hidden;

  font-size: 17px;
  font-weight: var(--fw-bold);
  line-height: var(--cambridge-lh-auto);
  color: var(--c-yellow-fig);   /* Figma #FFC93D — not white */
  background: color-mix(in srgb, var(--c-text-on-dark) 12%, transparent);
}

/* Figma 2483:2880 — Tajawal Bold 30, white, w 480 */
.cambridge__title {
  font-size: 30px;
  font-weight: var(--fw-bold);
  line-height: var(--cambridge-lh-auto);
  color: var(--c-text-on-dark);
  text-align: start;
}

/* The accent paints the promise only — «الإنجليزية اليوم...» stays white. */
.cambridge__accent { color: var(--c-yellow-fig); }

/* Figma 2483:2876 — Tajawal Medium 18/1.6, rgba(255,255,255,.85), w 458 */
.cambridge__desc {
  max-inline-size: 458px;
  font-size: 18px;
  font-weight: var(--fw-medium);
  line-height: 1.6;
  color: color-mix(in srgb, var(--c-text-on-dark) 85%, transparent);
  text-align: start;
}

/* ---- Cambridge logo — dark source bitmap inverted to white for the panel -- */
.cambridge__logo {
  margin: 0;
  padding: 0;
  max-inline-size: 280px;
}

.cambridge__logo img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  /* Source logo is naturally dark/black — shown as-is per design request. */
  filter: none;
  opacity: 1;
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

.cambridge__logo img:hover {
  opacity: 1;
  transform: scale(1.03);
}

/* CTA — Figma 2483:2877 is a 10px-radius rectangle, px 24 / py 14, #FFC93D on
   #0B3D7A, shadow 0 6px 12px rgba(0,0,0,.25). `.btn` in base.css is a 50px
   pill; overridden here only (base.css is not ours to edit). */
.cambridge__cta {
  block-size: auto;
  padding-block: 14px;
  padding-inline: 24px;
  border-radius: 10px;
  font-size: var(--fs-body);
  line-height: var(--cambridge-lh-auto);
  color: var(--c-navy-fig);
  background: var(--c-yellow-fig);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}
.cambridge__cta:hover { background: var(--c-yellow); }   /* keeps .btn's lift */

/* ---- Feature tiles ------------------------------------------------------ */
/* Figma 2483:2848 — 2 rows × 2 tiles of 258×96, gap 16 both axes. */
.cambridge__tiles {
  flex: 0 1 532px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.cambridge__tile {
  display: flex;
  align-items: center;
  gap: 12px;
  min-block-size: 96px;
  padding: 16px;
  border-radius: 14px;          /* Figma r-14, not --r-md */
  background: color-mix(in srgb, var(--c-text-on-dark) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-text-on-dark) 18%, transparent);
  transition: transform var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

.cambridge__tile:hover {
  transform: translateY(-3px);
  background: color-mix(in srgb, var(--c-text-on-dark) 17%, transparent);
  border-color: color-mix(in srgb, var(--c-text-on-dark) 30%, transparent);
}

.cambridge__tile-text {
  flex: 1 0 0;
  min-inline-size: 0;
  font-size: 15px;
  font-weight: var(--fw-bold);
  line-height: var(--cambridge-lh-auto);
  color: var(--c-text-on-dark);
  text-align: start;
}

/* Icon badge leads the tile — RTL start = the visual RIGHT edge, where Figma
   puts it (the tile row is `justify-end` with the icon last on an LTR canvas). */
.cambridge__tile-icon {
  order: -1;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 42px;
  block-size: 42px;
  border-radius: var(--r-pill);
  color: var(--c-navy-fig);     /* Figma icon stroke #0B3D7A */
}

/* Figma's per-tile fills stay on their grid positions, whatever copy each tile
   carries: #FFC93D top-left · #21A859 top-right · #E1EFFF bottom-right (nearest
   token: --c-tile-1) · white bottom-left. */
.cambridge__tile-icon--yellow { background: var(--c-yellow-fig); }
.cambridge__tile-icon--green  { background: var(--c-green-fig); }
.cambridge__tile-icon--white  { background: var(--c-card); }
.cambridge__tile-icon--sky    { background: var(--c-tile-1); }

/* Image-based icon — e.g. Cambridge logo */
.cambridge__tile-icon--img img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  border-radius: inherit;
}

/* ---- Decorations (behind content, non-interactive) ---------------------- */
.cambridge__circle,
.cambridge__ring,
.cambridge__dot,
.cambridge__ghost,
.cambridge__crest {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

/* Figma 2483:2841 — 220px circle, #FFC93D @ 90%, top -87 / left -63 */
.cambridge__circle {
  inline-size: 220px;
  block-size: 220px;
  inset-block-start: -87px;
  inset-inline-end: -63px;      /* RTL end = visual left */
  background: var(--c-yellow-fig);
  opacity: 0.9;
}

/* Figma 2483:2842 — 150px ring, 14px #21A859 @ 80%, bottom -60 / right -48 */
.cambridge__ring {
  inline-size: 150px;
  block-size: 150px;
  inset-block-end: -60px;
  inset-inline-start: -48px;    /* RTL start = visual right */
  background: none;
  border: 14px solid var(--c-green-fig);
  opacity: 0.8;
}

/* Figma 2483:2843 — 26px #FFC93D at top 60 / right 46 */
.cambridge__dot--yellow {
  inline-size: 26px;
  block-size: 26px;
  inset-block-start: 60px;
  inset-inline-start: 46px;
  background: var(--c-yellow-fig);
}

/* Figma 2483:2844 — 18px #21A859 at bottom 47 / left 70 */
.cambridge__dot--green {
  inline-size: 18px;
  block-size: 18px;
  inset-block-end: 47px;
  inset-inline-end: 70px;
  background: var(--c-green-fig);
}

/* Ghost wordmark — Figma 2483:2845: Tajawal Bold 150px, rgba(255,255,255,.06),
   rotated -8°, un-rotated box landing at left 41 / bottom 19 of the panel. */
.cambridge__ghost {
  inset-block-end: 19px;
  /* NOTE: `direction: ltr` below flips this element's own inline axis, so
     inline-START here resolves to the visual LEFT — which is where Figma
     puts the ABC wordmark. Do not "correct" this to inline-end. */
  inset-inline-start: 41px;
  direction: ltr;
  font-size: 150px;
  font-weight: var(--fw-bold);          /* Figma: Tajawal Bold, not Black */
  line-height: var(--cambridge-lh-auto);
  color: color-mix(in srgb, var(--c-text-on-dark) 6%, transparent);
  user-select: none;
  -webkit-user-select: none;
  /* Figma seats the baseline with Tajawal's typo metrics, Chrome with the win
     metrics, so the glyphs sit 0.18em lower inside the same 1.2em line box.
     Measured against the Figma render; kept in `em` so it scales with the
     smaller font sizes used below 1080px. */
  transform: translate(-0.02em, -0.18em) rotate(-8deg);
}

/* Crest banner — Figma 2483:2881/2882: 56×126 at top 0 / left 56,
   fill #0B2A4F (≈ --c-navy-deep), drop shadow dx -5 dy 1 blur 2 @ 33%. */
.cambridge__crest {
  inset-block-start: 0;
  inset-inline-end: 56px;       /* RTL end = visual left */
  inline-size: 56px;
  block-size: 126px;
  filter: drop-shadow(-5px 1px 2px rgba(0, 0, 0, 0.33));
}

.cambridge__crest-body   { fill: var(--c-navy-deep); }
.cambridge__crest-shield { fill: var(--c-yellow-fig); }
.cambridge__crest-mark   { fill: var(--c-text-on-dark); }

/* ==========================================================================
   Responsive — ours, not Figma's. The panel keeps its exact 1152px geometry
   down to a 1200px viewport; below that it fluidly shrinks, then stacks.
   ========================================================================== */

/* Squeezing 483 + 532 into less than ~920px starts crushing the tile copy,
   so stack the two columns instead. */
@media (max-width: 1080px) {
  .cambridge { padding-block: 48px; }

  .cambridge__panel {
    min-block-size: 0;
    border-radius: var(--r-xl);
    padding-block: 40px 44px;
    padding-inline: clamp(20px, 4vw, 40px);
  }

  .cambridge__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
    min-block-size: 0;
  }

  .cambridge__text,
  .cambridge__tiles { flex: 1 1 auto; }

  .cambridge__chip {         /* back into the flow, above the title */
    position: static;
    min-inline-size: 0;
    align-self: flex-start;
  }

  .cambridge__title { font-size: clamp(22px, 3.2vw, 28px); }
  .cambridge__desc  { max-inline-size: none; font-size: clamp(15px, 2vw, 17px); }
  .cambridge__logo  { max-inline-size: 220px; }

  .cambridge__ghost {
    font-size: clamp(72px, 11vw, 110px);
    inset-block-end: 12px;
    inset-inline-start: 16px;   /* ltr context — see note above */
  }

  .cambridge__crest {
    inline-size: 44px;
    block-size: 99px;
    inset-inline-end: 28px;
  }

  .cambridge__circle {
    inline-size: 160px;
    block-size: 160px;
    inset-block-start: -70px;
    inset-inline-end: -56px;
  }

  .cambridge__ring {
    inline-size: 110px;
    block-size: 110px;
    border-width: 10px;
    inset-block-end: -44px;
    inset-inline-start: -36px;
  }

  .cambridge__dot--yellow {
    inline-size: 18px;
    block-size: 18px;
    inset-block-start: 22px;
    inset-inline-start: 22px;
  }

  .cambridge__dot--green { inset-block-end: 26px; inset-inline-end: 26px; }
}

@media (max-width: 620px) {
  .cambridge__panel {
    border-radius: var(--r-lg);
    padding-block: 52px 40px;   /* clears the crest banner */
  }

  .cambridge__inner { gap: 26px; }
  .cambridge__text  { gap: 18px; }

  .cambridge__chip {
    block-size: auto;
    min-block-size: 40px;
    padding-block: 8px;
    font-size: var(--fs-sm);
  }

  .cambridge__tiles { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .cambridge__tile  { min-block-size: 76px; }
  .cambridge__logo  { max-inline-size: 180px; }

  .cambridge__cta {
    inline-size: 100%;
    padding-inline: 16px;
    font-size: var(--fs-sm);
  }

  .cambridge__ghost { font-size: 72px; inset-block-end: 10px; }

  .cambridge__crest {
    inline-size: 32px;
    block-size: 72px;
    inset-inline-end: 20px;
  }
}