/* ==========================================================================
   BAR3AM — Footer  (Figma 2475:2401 · inner 2475:2402)
   Owns: .footer*  — no other section may use this prefix.
   Every desktop value below is taken verbatim from get_design_context.
   ========================================================================== */

.footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* 2475:2402 fill #082B59 — derived from --c-navy-fig so no hex is hardcoded */
  background: color-mix(in srgb, var(--c-navy-fig) 73%, black);
  color: var(--c-text-on-dark);
  /* pt 56 / pb 28 */
  padding-block: 56px 28px;
}

/* ---- Education line-art backdrop ---------------------------------------
   Three 208×239 windows onto assets/img/edu-pattern.png, each a different
   zoom/offset, pinned to the top edge and drawn at 38% — no invert, no blend:
   the PNG is already light grey strokes on transparent, exactly as Figma
   composites it over the navy.
   -------------------------------------------------------------------------- */
.footer__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.footer__bg {
  position: absolute;
  display: block;
  inset-block-start: 0;
  inline-size: 208px;
  block-size: 239px;
  opacity: 0.38;
  background-image: url("../assets/img/edu-pattern.png");
  background-repeat: no-repeat;
  /* NOTE: the artwork is a fixed composition, not mirrored content, so each
     crop below keeps Figma's own left/top offset into the source bitmap.
     background-position is unaffected by `direction` — do not flip it. */
}

/* 2475:2439 — visual left, scale 1052.96%, offset −436.5% / −350.45% */
.footer__bg--a {
  inset-inline-end: 0; /* rtl page → visual left */
  background-size: 2190px 2190px;
  background-position: -908px -838px;
}

/* 2475:2440 — x 503 of 1280 (39.3%), scale 902.88%, offset −587.63% / −549.54% */
.footer__bg--b {
  inset-inline-end: 39.3%;
  background-size: 1878px 1878px;
  background-position: -1222px -1313px;
}

/* 2475:2441 — visual right, scale 820.06%, offset −166.7% / −118.41% */
.footer__bg--c {
  inset-inline-start: 0; /* rtl page → visual right */
  background-size: 1706px 1706px;
  background-position: -347px -283px;
}

/* ---- Inner stack (2475:2402) — 28px between columns, rule and copyright -- */
.footer__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

/* ---- Columns (2475:2403) ------------------------------------------------
   Not an even 4-up grid: Figma sizes each column to its content and spreads
   them with space-between across 1152, with the brand column fixed at 280.
   -------------------------------------------------------------------------- */
.footer__grid {
  display: grid;
  grid-template-columns: 280px auto auto auto;
  justify-content: space-between;
  align-items: start;
  gap: 32px;
  inline-size: 100%;
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-inline-size: 0;
}

/* 2475:2404 — the operator column (was the social column) uses a 14px gap */
.footer__col--owner { gap: 14px; }

/* ---- Brand column (2475:2433) ------------------------------------------- */
.footer__col--brand { inline-size: 280px; }

/* Stacked mark sits above the school name. Intrinsic 130×85 is declared on the
   element too, so the column reserves its box before the SVG paints. */
.footer__logo {
  inline-size: 130px;
  block-size: auto;
  margin-block-end: 2px;
}

.footer__brand {
  /* long school name now — holds the Figma 22px on desktop, eases to 18px
     once the 280px column gives way to the stacked layout */
  font-size: clamp(18px, 1.6vw + 2px, 22px);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  color: var(--c-text-on-dark);
  text-wrap: balance;
}

.footer__about {
  font-size: 13px;
  font-weight: var(--fw-medium);
  line-height: 1.2;
  color: color-mix(in srgb, var(--c-text-on-dark) 65%, transparent);
}

/* ---- Column headings — plain #FFC93D, 16px bold. No underline rule. ----- */
.footer__heading {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--c-yellow-fig);
}

/* ---- Link lists --------------------------------------------------------- */
.footer__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* flex items, not inline content: keeps each row exactly one 1.2em line tall
   instead of inheriting the 16px/1.5 body strut from the <li> line box */
.footer__list li { display: flex; }

.footer__link {
  display: inline-block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  color: color-mix(in srgb, var(--c-text-on-dark) 85%, transparent);
  transition: color var(--dur-fast) var(--ease);
}

.footer__link:hover,
.footer__link:focus-visible {
  color: var(--c-yellow-fig);
}

/* ---- Operator mark — replaces the old social pills ---------------------
   kifayat.sa publishes two variants; the white one is used because this footer
   is a dark panel and the colour version's grey Arabic lettering disappears on
   it. Capped by height so the 290x106 bitmap keeps its ratio. */
.footer__owner {
  display: inline-flex;
  align-items: center;
  opacity: 0.9;
  transition: opacity var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}

.footer__owner img {
  inline-size: auto;
  block-size: 46px;
  max-inline-size: 100%;
}

.footer__owner:hover,
.footer__owner:focus-visible {
  opacity: 1;
  transform: translateY(-2px);
}

/* ---- Rule + copyright (2475:2437 / 2475:2438) --------------------------- */
.footer__divider {
  inline-size: 100%;
  block-size: 1px;
  border: 0;
  background: color-mix(in srgb, var(--c-text-on-dark) 12%, transparent);
}

.footer__copy {
  font-size: 12.5px;
  font-weight: var(--fw-medium);
  line-height: 1.2;
  text-align: center;
  color: color-mix(in srgb, var(--c-text-on-dark) 55%, transparent);
}

/* ==========================================================================
   Responsive — Figma has no breakpoints below 1280; these are ours.
   4 columns → 2 → 1.
   ========================================================================== */
@media (max-width: 960px) {
  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    gap: 32px 24px;
  }

  .footer__col--brand { inline-size: auto; }
  .footer__about { max-inline-size: 320px; }
  .footer__bg--b { display: none; }
}

@media (max-width: 560px) {
  .footer {
    padding-block: 44px 24px;
  }

  .footer__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }

  .footer__about { max-inline-size: none; }

  .footer__logo { inline-size: 112px; }

  .footer__copy {
    font-size: var(--fs-xs);
    line-height: var(--lh-normal);
  }

  .footer__bg {
    inline-size: 160px;
    block-size: 200px;
  }
}