/* ============================================================
   PARTNERS.CSS
   "Trusted collaborators and strategic partners" — heading
   left, five partner logos in a justified row below.
   No card background; sits directly on page colour (#f0f2f4).

   INNER CONTENT WIDTH
   Figma: px-[228px] at 1440px canvas → 1440 - 456 = 984px.
   Matched with max-width: 984px; margin: 0 auto.
   ============================================================ */


/* ------------------------------------------------------------
   1. SECTION WRAPPER
   ------------------------------------------------------------ */
.partners {
  padding: 75px 0 30px;
  width: 100%;
  margin-top: var(--sp-4);
}

.partners__inner {
  max-width: 984px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;                /* Figma: gap-[40.5px] */
}


/* ------------------------------------------------------------
   2. HEADING
   ------------------------------------------------------------ */
.partners__heading {
  display: flex;
  flex-direction: column;
  gap: 2px;                 /* Figma: gap-[1.5px] */
}

.partners__label {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 12px;
  line-height: 21px;
  color: #111111;
}

.partners__title {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: 45px;
  line-height: 52.5px;
  letter-spacing: -0.05em;
  color: #111111;
}


/* ------------------------------------------------------------
   3. LOGO ROW
   Five logos, space-between, all greyscale at 40% opacity.
   Figma: mix-blend-luminosity opacity-40 on every logo.
   ------------------------------------------------------------ */
.partners__logos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* Shared greyscale treatment for every simple logo <img> */
.partner-logo {
  display: block;
  mix-blend-mode: luminosity;
  opacity: 0.4;
  object-fit: contain;
  flex-shrink: 0;
}


/* ------------------------------------------------------------
   4. SNAPMINT LOGO  (assembled from 8 individual letter SVGs)

   Figma positions each letter as: inset[top% right% bottom% left%]
   within a 122.25 × 48 px container, with transform:
     rotate(-180deg) scaleX(-1) = scaleY(-1)
   (the SVG paths are stored upside-down; scaleY(-1) corrects them)

   Pixel positions derived from:
     left  = left%  × 122.25
     top   = top%   × 48
     width = (100% - left% - right%) × 122.25
     height = (100% - top% - bottom%) × 48
   ------------------------------------------------------------ */
.partner-snapmint {
  position: relative;
  width: 122.25px;
  height: 48px;
  flex-shrink: 0;
  mix-blend-mode: luminosity;
  opacity: 0.4;
}

.snap-letter {
  position: absolute;
  transform: scaleY(-1);    /* corrects upside-down SVG export */
  object-fit: fill;
  max-width: none;
}

/* s  */ .snap-s  { left:   0.17px; top: 15.93px; width: 12.71px; height: 15.00px; }
/* n  */ .snap-n1 { left:  14.41px; top: 15.93px; width: 14.89px; height: 14.80px; }
/* a  */ .snap-a  { left:  30.39px; top: 15.94px; width: 14.08px; height: 15.02px; }
/* p  */ .snap-p  { left:  46.84px; top: 15.98px; width: 15.89px; height: 20.01px; }
/* m  */ .snap-m  { left:  64.87px; top: 16.39px; width: 23.60px; height: 14.34px; }
/* i  */ .snap-i  { left:  91.70px; top: 10.92px; width:  2.76px; height: 19.81px; }
/* n  */ .snap-n2 { left:  98.22px; top: 16.39px; width: 13.05px; height: 14.34px; }
/* t  */ .snap-t  { left: 113.39px; top: 13.18px; width:  8.86px; height: 17.67px; }


/* ------------------------------------------------------------
   5. RESPONSIVE
   ------------------------------------------------------------ */

/* Constrain inner to viewport on medium screens */
@media (max-width: 1060px) {
  .partners__inner {
    padding: 0 24px;
  }
}

/* Tablet — wrap logos into two rows */
@media (max-width: 860px) {
  .partners__title {
    font-size: 34px;
    line-height: 42px;
  }

  .partners__logos {
    flex-wrap: wrap;
    gap: 32px 40px;
    justify-content: center;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .partners {
    padding: 48px 0;
  }

  .partners__inner {
    gap: 28px;
  }

  .partners__title {
    font-size: 28px;
    line-height: 36px;
  }

  .partners__logos {
    gap: 24px 32px;
  }
}