/* ==========================================================================
   Clients — "In Good Company" (ships to WordPress as assets/css/clients.css)
   Markup: tools/sections/clients-page.mjs. Hero and closing invitation reuse the
   Agency page's components (agency.css).
   01 Hero · 02 Libya (logo wall) · 03 International work (the editorial chapter)
   · 04 Egypt (an intimate wall beside its own introduction) · 05 Closing.
   White logos on the stage, unframed: no cards, tiles or borders. Each logo's
   height comes from its shape (--f, set by the renderer from its aspect ratio).
   ========================================================================== */

/* ---------- 01 Hero ---------- */
.cl-hero { padding-block-end: var(--space-8); }
.cl-hero__title { font-size: clamp(3rem, 0.4rem + 10.2vw, 13rem); line-height: 0.9; }
:lang(ar) .cl-hero__title { font-size: clamp(2.75rem, 0.6rem + 8vw, 10rem); line-height: 1.25; }
.cl-hero__intro { color: var(--cm-ink-200); }

/* ---------- Chapters (Libya, Egypt) ---------- */
.cl-chapter { position: relative; padding-block: calc(var(--space-section) * 0.6) var(--space-section); }
.cl-chapter .section-mark { margin-block-end: var(--space-7); }
.cl-chapter__intro {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); row-gap: var(--space-5);
  align-items: end; margin-block-end: clamp(var(--space-8), 6vw, var(--space-10));
}
.cl-chapter__title { grid-column: 1 / 8; margin: 0; }
.cl-chapter__line {
  grid-column: 8 / -1; margin: 0; padding-block-end: 0.35em;
  font-size: var(--text-lead); font-weight: var(--weight-light); line-height: 1.55; color: var(--cm-ink-200); max-inline-size: 34ch; text-wrap: pretty;
}
:lang(ar) .cl-chapter__line { line-height: 1.9; }

/* ---------- The wall: centred rows, so a short last row sits in the middle ---------- */
.cl-wall {
  --logo-h: clamp(3.5rem, 1.6rem + 3.4vw, 6.5rem);   /* height of a square mark */
  --cols: 5;
  display: flex; flex-wrap: wrap; justify-content: center;
  margin: 0; padding: 0; list-style: none;
  row-gap: clamp(var(--space-6), 3vw, var(--space-9));
}
.cl-logo {
  flex: 0 0 calc(100% / var(--cols)); min-inline-size: 0;
  display: grid; place-items: center;
  block-size: calc(var(--logo-h) * 1.5); padding-inline: clamp(var(--space-3), 1.6vw, var(--space-6));
  transition: opacity var(--dur-ui) var(--ease-standard);
}
.cl-logo img {
  display: block; block-size: calc(var(--logo-h) * var(--f, 1)); inline-size: auto; max-inline-size: 100%;
  object-fit: contain; -webkit-user-drag: none; user-select: none;
}
@media (hover: hover) and (pointer: fine) {
  .cl-wall:hover .cl-logo { opacity: 0.42; transition-delay: 0s; }
  .cl-wall .cl-logo:hover { opacity: 1; }
}
.has-reveal .cl-logo[data-reveal].is-in { transition-delay: var(--d, 0ms); }

/* ---------- 03 International work: the editorial chapter ----------
   Three words set as a staircase across the page: heavy at the start, thin
   stepped in, heavy pushed to the end. As the chapter passes, the lines drift a
   few percent in opposite directions (--p from clients-page.js; no script or
   reduced motion: still). The statement answers from the opposite corner. */
.cl-intl {
  position: relative; isolation: isolate; overflow: clip;
  padding-block: calc(var(--space-section) * 0.9) var(--space-section);
  border-block: var(--border-hair);
}
.cl-intl::before {   /* the page's orange lead on the hairline */
  content: ""; position: absolute; inset-block-start: -1px;
  inset-inline-start: max(var(--page-gutter), (100% - var(--page-max)) / 2 + var(--page-gutter));
  inline-size: 4rem; block-size: 2px; background: var(--cm-orange);
}
.cl-intl__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); }
.cl-intl__label { grid-column: 1 / -1; margin: 0 0 var(--space-7); color: var(--cm-ink-300); }
.cl-intl__title {
  grid-column: 1 / -1; margin: 0; display: grid;
  font-size: clamp(3.5rem, 0.6rem + 12.4vw, 15.5rem); line-height: 0.88; letter-spacing: var(--tracking-display);
}
:lang(ar) .cl-intl__title { font-size: clamp(3.25rem, 0.8rem + 10vw, 12.5rem); line-height: 1.2; }
.cl-intl__line { display: block; }
.cl-intl__in { display: inline-block; --shift: calc((var(--p, 0.5) - 0.5) * 7vw * var(--dir)); }
.cl-intl__line--1 .cl-intl__in { transform: translateX(calc(var(--shift) * -1)); }
.cl-intl__line--2 { padding-inline-start: calc(100% * 3 / 12); }
.cl-intl__line--2 .cl-intl__in { transform: translateX(var(--shift)); color: var(--cm-ink-100); }
.cl-intl__line--3 { justify-self: end; }
.cl-intl__line--3 .cl-intl__in { transform: translateX(calc(var(--shift) * -1)); }
.cl-intl__text {
  grid-column: 1 / 6; margin: var(--space-8) 0 0;
  font-size: var(--text-lead); font-weight: var(--weight-light); line-height: 1.55; color: var(--cm-ink-200); max-inline-size: 38ch; text-wrap: pretty;
}
:lang(ar) .cl-intl__text { line-height: 1.9; }

/* ---------- 04 Egypt: its introduction beside a smaller, closer wall ---------- */
.cl-egypt { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: start; }
.cl-egypt__head { grid-column: 1 / 6; position: sticky; inset-block-start: calc(var(--header-h) + var(--space-6)); }
.cl-egypt .cl-chapter__intro { display: block; margin-block-end: 0; }
.cl-egypt .cl-chapter__title { font-size: clamp(2.4rem, 1.2rem + 3.6vw, 5.5rem); }
.cl-egypt .cl-chapter__line { margin-block-start: var(--space-5); padding: 0; }
.cl-wall--intimate { grid-column: 7 / -1; --cols: 3; --logo-h: clamp(3.75rem, 2rem + 3.2vw, 6.75rem); justify-content: flex-start; padding-block-start: var(--space-4); }
.cl-wall--intimate .cl-logo { block-size: calc(var(--logo-h) * 1.8); }

/* ---------- 05 Closing ---------- */
.cl-cta__title { max-inline-size: 13em; }
.cl-cta__line { margin: 0; font-size: var(--text-lead); font-weight: var(--weight-light); color: var(--cm-ink-200); }

/* ---------- Tablet and phone ---------- */
@media (max-width: 1023px) {
  .cl-wall { --cols: 3; }
  .cl-chapter__title, .cl-chapter__line { grid-column: 1 / -1; }
  .cl-chapter__line { padding: 0; }
  .cl-intl__text { grid-column: 1 / 10; }
  .cl-egypt__head { grid-column: 1 / -1; position: static; margin-block-end: var(--space-8); }
  .cl-wall--intimate { grid-column: 1 / -1; justify-content: center; }
}
@media (max-width: 599px) {
  .cl-wall { --cols: 2; --logo-h: 3.25rem; row-gap: var(--space-6); }
  .cl-wall--intimate { --cols: 2; --logo-h: 3.5rem; }
  .cl-logo { padding-inline: var(--space-3); }
  .cl-intl__line--2 { padding-inline-start: 12%; }
  .cl-intl__text { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .cl-intl__in { transform: none !important; } }
.motion-reduce .cl-intl__in { transform: none !important; }