/* ==========================================================================
   LawFiq — Mediation gateway
   Additions on top of sections.css. The gateway is the quiet wing of the
   site: light ground, no photograph, one typographic device. Everything
   else is composed from the shared primitives. Logical properties only.
   ========================================================================== */

/* --------------------------------------------------------------------
   Hero — light, spacious, type-led.
   The single device is the word الصُّلح set live in Amiri (English page)
   or "Sulh" in Source Serif italic (Arabic page). It is typography, not
   calligraphy: one word, one rule, one caption.
   -------------------------------------------------------------------- */
.page-hero--sulh .page-hero__inner {
  padding-block: clamp(4rem, 3rem + 4vw, 7rem);
}

.page-hero--sulh .page-hero__grid {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: end;
}

.sulh-mark {
  justify-self: end;
  text-align: end;
  border-inline-end: 2px solid var(--color-gold);
  padding-inline-end: clamp(1.5rem, 1rem + 2vw, 3rem);
  padding-block: var(--space-2);
}

.sulh-mark__word {
  display: block;
  font-family: var(--font-arabic-display);
  font-weight: 400;
  font-size: clamp(5rem, 3.5rem + 7vw, 10rem);
  /* Amiri's deep descenders (the final ح) need the taller line box, or
     the word overprints the caption beneath it. */
  line-height: 1.5;
  color: var(--color-navy);
}

.sulh-mark__word--latin {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(4rem, 3rem + 6vw, 8.5rem);
  line-height: 1;
  letter-spacing: -0.01em;
}

.sulh-mark__caption {
  margin-block-start: var(--space-4);
  margin-inline-start: auto;
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  max-inline-size: 20rem;
}

@media (max-width: 899px) {
  /* Match sections.css's mobile collapse — the override above outranks it */
  .page-hero--sulh .page-hero__grid {
    grid-template-columns: 1fr;
  }

  .sulh-mark {
    justify-self: start;
    text-align: start;
    border-inline-end: 0;
    border-inline-start: 2px solid var(--color-gold);
    padding-inline-end: 0;
    padding-inline-start: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  }

  .sulh-mark__word {
    font-size: clamp(4rem, 3rem + 6vw, 6rem);
  }

  .sulh-mark__word--latin {
    font-size: clamp(3.5rem, 2.5rem + 5vw, 5rem);
  }

  .sulh-mark__caption {
    margin-inline-start: 0;
  }
}

/* --------------------------------------------------------------------
   The mediator — the page's one human image, at real scale: the
   approved portrait in the plaque mat beside the role, defined.
   -------------------------------------------------------------------- */
.mediator {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--space-10) clamp(3rem, 2rem + 4vw, 6rem);
  align-items: start;
}

@media (max-width: 899px) {
  .mediator {
    grid-template-columns: 1fr;
  }
}

.mediator__figure {
  margin: 0;
  border: var(--hairline) solid var(--color-gold);
  padding: clamp(0.625rem, 0.5rem + 0.5vw, 1rem);
  max-inline-size: 360px;
}

.mediator__figure img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.mediator__name {
  font-size: var(--text-2xl);
  margin-block-end: var(--space-1);
}

.mediator__role {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-gold-ink);
  margin-block-end: var(--space-5);
}