/* ==========================================================================
   Clients — "Our clients" heading + three full-bleed logo marquees.
   Figma "Home Page": y 1197 → 1921 (desktop). "Mobile Home": y 879 → 1362.
   Uses the shared .marquee / .marquee__track component (and its keyframes)
   from base.css; only the loop duration is tuned here (see .clients__track).

   Logo exports (assets/, 2x, shown at half size, white on transparent):
     Rectangle_43  JLL                     Rectangle_154 The Loft
     Rectangle_177 Geelong Grammar School  Rectangle_67  Mosaic
     Rectangle_66  Create Fertility        Rectangle_161 Collab Brindabella
     Rectangle_162 El Jannah               Rectangle_163 Zest Specialty Coffee
     Rectangle_157 1800 We Store It        Rectangle_164 CDIC
     Rectangle_168 Aston Homes             Rectangle_152 Oakleigh Dental
     Rectangle_159 Arki                    Rectangle_167 Miglas
     Rectangle_68  Melbourne Connect       Rectangle_69  St Francis Xavier College
   Client change #16 (sheet updated 29 Sep): MX's own logo set, "ordered how we'd like them to appear" —
   SharePoint Handover Files/Client logos/ROW 1 (12), ROW 2 (11), ROW 3 (12); each logo once, no repeats.
   Their files are 1x tiles with the padding baked in: the 16 that match the Figma exports above keep those
   2x files; the other 19 are 2x tiles in assets/logos/clients/ (480 × 190, shown 240 × 95 — "sm"), drawn
   from the Figma's full-size artwork at exactly the tile position in MX's file.
   ========================================================================== */

.section--clients {
  --logo-gap: 17px;   /* row 1 + 3 gap (Figma mean ≈ 17 / 21) */
  --row-h: 120px;     /* row box = tallest logo (GGS crest, 300×120) */
  --nudge: 1;         /* multiplier for the per-logo optical nudges below */
  /* Hero content ends at y≈1025 (its 1436 bound is only the fixed side tab):
     (1197 − 1025) / 2 ≈ 86. Bottom: (2154 − 1921) / 2 ≈ 116.5, less the 6.5px
     the 120px row-3 box (1808→1928) overshoots the 1921 bound. */
  padding-top: 86px;
  padding-bottom: 110px;
}

/* ---- Heading block (inside .container, x = 100) --------------------------- */
.section--clients .clients__title {
  margin-top: 28px;                 /* eyebrow bottom 1222 → heading 1250 */
  max-width: 729px;
  font-family: var(--font-display);
  font-weight: 400;                 /* Blauer Nue Regular */
  font-size: 48px;
  line-height: 1.23;
}

.section--clients .clients__rule {
  margin-top: 42px;                 /* heading bottom 1309 → line 1351 */
  border-top-width: 2px;            /* Line 58: 125 × 2px, #63f9a2 */
}

/* ---- Logo rows (full-bleed marquees) -------------------------------------- */
.section--clients .clients__rows {
  display: flex;
  flex-direction: column;
  margin-top: 62px;                 /* line bottom 1353 → row-1 box top 1415 (centre 1475) */
}
.section--clients .clients__row--2 { margin-top: 74.5px; }  /* row centres 1474.5 → 1669 */
.section--clients .clients__row--3 { margin-top: 78.5px; }  /* 1669 → 1867.5 */

.section--clients .clients__track {
  height: var(--row-h);
  align-items: center;
  /* 11–12 logos a row (was 7): base.css's 45s × 12/7, so the drift keeps its old speed (≈45px/s at 1920) */
  animation-duration: 77s;
}

/* One list = one loop cycle; the second (aria-hidden) list is the seamless
   duplicate. The trailing padding equals the gap so translateX(-50%) lands
   exactly on the seam. Cycles (#16 set, 29 Sep): row 1 = 3253px, row 2 = 2980px, row 3 = 3277px
   (all ≥ 1920 + a logo, so no blank space and no logo twice on screen at the
   design width). */
.section--clients .clients__logos {
  display: flex;
  align-items: center;
  flex: none;
  gap: var(--logo-gap);
  padding-right: var(--logo-gap);
}
.section--clients .clients__logos li { flex: none; }
.section--clients .clients__logo { display: block; }

/* Row gaps (Figma mean ≈ 17 / 19 / 22). MX's tiles carry their own padding, so the old per-logo
   hand-placement nudges (tied to the Figma's order) are gone. */
.section--clients .clients__row--2 { --logo-gap: 19px; }
.section--clients .clients__row--3 { --logo-gap: 22px; }

/* ---- Tablet (not in the Figma — logos scaled to 0.8) ----------------------- */
@media (max-width: 1024px) {
  .section--clients {
    --logo-gap: 14px;
    --row-h: 96px;
    --nudge: 0.8;
    padding-top: 64px;
    padding-bottom: 80px;
  }
  .section--clients .clients__title { font-size: 40px; }
  .section--clients .clients__rule { margin-top: 36px; }
  .section--clients .clients__rows { margin-top: 50px; }
  .section--clients .clients__row--2 { margin-top: 60px; --logo-gap: 15px; --row2-extra: 22px; }
  .section--clients .clients__row--3 { margin-top: 63px; --logo-gap: 18px; }
  .section--clients .clients__logo { width: auto; height: 85px; }
  .section--clients .clients__logo--lg { height: 96px; }
  .section--clients .clients__logo--sm { height: 76px; }
  .section--clients .clients__row--1 .clients__track { margin-left: -147px; }
  .section--clients .clients__row--2 .clients__track { margin-left: -57px; }
  .section--clients .clients__row--3 .clients__track { margin-left: -144px; }
}

/* ---- Mobile (Figma "Mobile Home", 402 wide) -------------------------------- */
@media (max-width: 640px) {
  .section--clients {
    --logo-gap: 11px;               /* ~163px pitch for 152px logos */
    --row-h: 69px;                  /* GGS crest at mobile scale (173 × 69) */
    --nudge: 0.575;                 /* mobile logos are drawn at 0.575× (267 → 152) */
    padding-top: 44px;              /* (879 − 791.65) / 2 */
    padding-bottom: 35px;           /* (1439 − 1362) / 2, less the 3.5px box overshoot */
  }
  .section--clients .eyebrow { gap: 12px; margin-left: 4px; }   /* dot x = 24, text x = 42 */
  .section--clients .clients__title {
    margin-top: 12px;               /* eyebrow bottom 899 → heading 911 */
    font-size: 36px;                /* 2 lines: "We’ve proudly / helped grow" */
  }
  .section--clients .clients__rule {
    width: 64px;                    /* Line 73: 64 × 2px */
    margin-top: 32px;               /* heading bottom 999.6 → line 1031 */
  }
  .section--clients .clients__rows { margin-top: 39px; }        /* line bottom 1033 → row-1 box top 1072 (centre 1106.5) */
  .section--clients .clients__row--2 { margin-top: 42px; --logo-gap: 11px; --row2-extra: 12px; }  /* centre 1217.5 */
  .section--clients .clients__row--3 { margin-top: 44.5px; --logo-gap: 24px; }                    /* centre 1331 */
  .section--clients .clients__logo { width: auto; height: 61px; }      /* 267×106 → 152×61 */
  .section--clients .clients__logo--lg { height: 69px; }                /* 300×120 → 173×69 */
  .section--clients .clients__logo--sm { height: 55px; }                /* 240×95 → 137×55 */
  .section--clients .clients__row--1 .clients__track { margin-left: -206px; }  /* JLL at x = −43 */
  .section--clients .clients__row--2 .clients__track { margin-left: -141px; }  /* Arki at x = −141 */
  .section--clients .clients__row--3 .clients__track { margin-left: -217px; }  /* The Loft at x = −39 */
}