/* ==========================================================================
   BAR3AM — Section: kifayat  («شركة كفايات التعليمية» — operator panel)
   Depends on tokens.css + base.css (.container .section .deco .reveal …)

   No Figma node exists for this section. Its geometry follows the house dark
   panel established in css/cambridge.css — 1152px inset panel, r=28, 56px
   inner padding, the same deco vocabulary (filled circle · thick ring · two
   dots · ghost wordmark) — but the band is centred one-column copy instead of
   the two-column split, and it re-tints the gradient to the navy pair so the
   section reads as a different surface from the Cambridge panel above it.

   DIRECTION: the page is `direction: rtl`, so inline-START is the visual RIGHT
   and inline-END the visual LEFT. Every offset below is logical on purpose.
   ========================================================================== */

.kifayat {
  padding-block: 64px;
  /* different band colour from the white sections around it */
  background: var(--c-bg);
  /* base.css clips the bleed of the sections it knows about; this one is new,
     so it clips its own. `clip`, not `hidden`, to keep sticky ancestors sane. */
  overflow-x: clip;
}

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

/* ---- Panel -------------------------------------------------------------- */
.kifayat__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  inline-size: 100%;
  border-radius: 28px;                      /* house panel radius */
  padding-block: 64px;
  padding-inline: 56px;

  /* the requested pair: --c-navy → --c-navy-fig, on the Cambridge panel angle
     so both dark bands sit on the same light axis */
  background: linear-gradient(150.945deg, var(--c-navy) 0%, var(--c-navy-fig) 71.429%);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--c-navy-deep) 40%, transparent);
  color: var(--c-text-on-dark);
}

/* ---- Content column ----------------------------------------------------- */
.kifayat__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.kifayat__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  inline-size: 100%;
  max-inline-size: 860px;
  text-align: center;
}

.kifayat__title {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--c-text-on-dark);
  text-wrap: balance;
}

/* accents the company name only — the sentence itself is unchanged */
.kifayat__accent { color: var(--c-yellow-fig); }

.kifayat__desc {
  max-inline-size: 780px;
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  color: var(--c-text-on-dark-2);
}

/* ---- Group logos strip -------------------------------------------------- */
/* Hairline above the strip instead of a separate element, so the rule can
   never drift away from the block it belongs to. */
.kifayat__group {
  inline-size: 100%;
  max-inline-size: 860px;
  padding-block-start: 32px;
  border-block-start: 1px solid color-mix(in srgb, var(--c-text-on-dark) 16%, transparent);
}

.kifayat__group-title {
  margin-block-end: 20px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-normal);
  color: var(--c-text-on-dark-2);
  text-align: center;
}

.kifayat__logos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

/* Neutral placeholder tile — deliberately nameless until the real group logos
   land (see the TODO in sections/kifayat.html). */
/* Light tiles: every one of the four school marks is drawn for a white
   background (alsahil and furqan publish no light-on-dark variant), so the
   tile carries the light surface rather than the logos being recoloured. */
/* SOLID white tiles — not a translucent wash.
   Every one of these four marks carries dark navy Arabic lettering drawn for a
   white page. Over anything semi-transparent the panel's purple bleeds through
   and the wordmarks stop being legible, which is exactly what a tinted tile
   did here. `var(--c-card)` is also a plain colour, so unlike a color-mix()
   value it still resolves on older mobile browsers — if it ever fails, the
   tile is simply white rather than invisible. */
.kifayat__logo {
  display: flex;
  border-radius: 14px;                      /* house tile radius */
  background: var(--c-card);
  border: 1px solid color-mix(in srgb, var(--c-navy-deep) 10%, transparent);
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

.kifayat__logo:hover,
.kifayat__logo:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--c-navy-deep) 38%, transparent);
}

.kifayat__logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  min-block-size: 108px;
  padding: 18px 22px;
}

/* The four marks differ wildly in aspect (513x443 stacked vs 900x230 wide), so
   they are capped on BOTH axes and centred — one shared height would blow the
   stacked one out of its tile. */
.kifayat__logo img {
  max-inline-size: 100%;
  max-block-size: 68px;
  inline-size: auto;
  block-size: auto;
  object-fit: contain;
}

/* الساحل is the only stacked mark (crest over wordmark, ~1.16:1). Capped at the
   same 58px as the ~3:1 marks it renders barely 67px wide and reads as the odd
   one out, so it gets a taller cap to carry the same optical weight. */
.kifayat__logo--stacked img { max-block-size: 88px; }

/* ---- Decorations (behind the content, non-interactive) ------------------ */
.kifayat__circle,
.kifayat__ring,
.kifayat__dot,
.kifayat__ghost {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

/* filled disc bleeding off the top-left corner */
.kifayat__circle {
  inline-size: 240px;
  block-size: 240px;
  inset-block-start: -96px;
  inset-inline-end: -72px;                  /* RTL end = visual left */
  background: color-mix(in srgb, var(--c-primary) 68%, transparent);
}

/* thick ring bleeding off the bottom-right corner */
.kifayat__ring {
  inline-size: 168px;
  block-size: 168px;
  inset-block-end: -66px;
  inset-inline-start: -54px;                /* RTL start = visual right */
  background: none;
  border: 14px solid color-mix(in srgb, var(--c-green-fig) 62%, transparent);
}

.kifayat__dot--yellow {
  inline-size: 22px;
  block-size: 22px;
  inset-block-start: 54px;
  inset-inline-start: 52px;
  background: var(--c-yellow-fig);
  opacity: 0.85;
}

.kifayat__dot--green {
  inline-size: 16px;
  block-size: 16px;
  inset-block-end: 58px;
  inset-inline-end: 82px;
  background: var(--c-green-fig);
  opacity: 0.85;
}

/* Ghost wordmark, same idea as .cambridge__ghost. Arabic script, so it keeps
   the page's RTL inline axis — no `direction` flip here. */
.kifayat__ghost {
  inset-block-end: 4px;
  inset-inline-end: 28px;                   /* RTL end = visual left */
  font-size: clamp(70px, 10vw, 132px);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: color-mix(in srgb, var(--c-text-on-dark) 6%, transparent);
  user-select: none;
  -webkit-user-select: none;
  transform: rotate(-6deg);
}

/* ==========================================================================
   Responsive — 1280 / 1024 / 768 / 390
   ========================================================================== */

@media (max-width: 1080px) {
  .kifayat { padding-block: 48px; }

  .kifayat__panel {
    border-radius: var(--r-xl);
    padding-block: 48px;
    padding-inline: clamp(20px, 4vw, 40px);
  }

  .kifayat__inner { gap: 32px; }

  .kifayat__circle {
    inline-size: 176px;
    block-size: 176px;
    inset-block-start: -78px;
    inset-inline-end: -62px;
  }

  .kifayat__ring {
    inline-size: 124px;
    block-size: 124px;
    border-width: 11px;
    inset-block-end: -50px;
    inset-inline-start: -40px;
  }

  .kifayat__dot--yellow {
    inline-size: 16px;
    block-size: 16px;
    inset-block-start: 24px;
    inset-inline-start: 24px;
  }

  .kifayat__dot--green { inset-block-end: 28px; inset-inline-end: 28px; }
}

@media (max-width: 768px) {
  .kifayat__logos { gap: 12px; }
  .kifayat__logo-link { min-block-size: 88px; padding: 14px 16px; }
  .kifayat__logo img { max-block-size: 54px; }
  .kifayat__logo--stacked img { max-block-size: 70px; }
}

@media (max-width: 620px) {
  .kifayat { padding-block: 40px; }

  .kifayat__panel {
    border-radius: var(--r-lg);
    padding-block: 40px;
  }

  .kifayat__inner { gap: 26px; }
  .kifayat__head  { gap: 12px; }

  .kifayat__desc { line-height: var(--lh-normal); }

  .kifayat__group { padding-block-start: 24px; }
  .kifayat__group-title { margin-block-end: 16px; }

  /* 4 → 2 columns; the tiles stay square-ish rather than turning into bars */
  .kifayat__logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .kifayat__ghost { inset-inline-end: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .kifayat__logo:hover { transform: none; }
}