/* ============================================================
   COMPONENT: Client / Partner Logos
   FILE: assets/css/partners.css
   Depends on: partners.html
   Loaded after statistics.css, before the next Stage 5 section's
   CSS (Phase 1.0 §6, in build order).

   Surface System usage (Master Roadmap Stage 5.2): every logo
   tile reuses the existing `.surface--solid` card treatment from
   surfaces.css untouched — no new card/background system is
   defined here. The section background is a plain, tokenized
   solid color (the same "solid color band" pattern statistics.css
   already uses for its own background), creating visual rhythm
   between the white Statistics section above and whatever surface
   Stage 5.3 chooses next.

   Hover pattern (Master Roadmap Stage 5.2 — "reuses the Button/
   Surface hover pattern, no new effect"): the values below are
   copied directly from buttons.css's `.btn--secondary:hover` /
   `.btn--primary:hover` rules (border-color: var(--color-navy),
   background tint of rgba(navy, 0.04), shadow escalation from
   --shadow-sm to --shadow-md, a 1px lift) rather than inventing a
   new transform, timing curve, or effect.
   ============================================================ */

.partners {
 background-color: var(--color-navy);
  padding-block: var(--space-10);
}

.partners__inner {
  text-align: center;
}

.partners__heading {
  margin: 0 0 var(--space-2);
  color: var(--color-white);
  font-size: var(--text-h3);
}

.partners__subheading {
  max-width: 640px;
  margin: 0 auto var(--space-6);
  color: var(--color-white);
  font-size: var(--text-body);
}

/* ------------------------------------------------------------
   GRID
   2 columns on mobile, 3 on tablet, a single row of 6 on desktop
   — mirrors the column-count progression statistics.css already
   uses for its own grid.
------------------------------------------------------------ */
.partners__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);

  list-style: none;
}

/* ------------------------------------------------------------
   TILE
   `.surface--solid` (surfaces.css) supplies the white background,
   hairline border, radius and resting shadow. Only tile-specific
   layout (sizing, centering, the hover/logo treatment) is added
   here, scoped under .partners__item so nothing here leaks into
   the global surface system.
------------------------------------------------------------ */
.partners__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  padding: var(--space-3) var(--space-4);

  transition:
    border-color var(--duration-fast) var(--ease-premium),
    background-color var(--duration-fast) var(--ease-premium),
    box-shadow var(--duration-fast) var(--ease-premium),
    transform var(--duration-fast) var(--ease-premium);
}

/* Hover/focus treatment copied from buttons.css's secondary/
   primary hover values — see file header note. */
.partners__item:hover {
  border-color: rgba(var(--color-navy-rgb), 0.3);
  background-color: rgba(var(--color-navy-rgb), 0.04);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.partners__logo {
  max-width: 180px;
  max-height: 55px;
  width: auto;
  height: auto;
  object-fit: contain;

  opacity: 0.72;
  transition: opacity var(--duration-fast) var(--ease-premium);
}

.partners__item:hover .partners__logo {
  opacity: 1;
}

/* ------------------------------------------------------------
   RESPONSIVE
   Breakpoint values copied from tokens.css's documented
   reference values, same convention statistics.css uses.
------------------------------------------------------------ */

/* Tablet: 3 columns */
@media (min-width: 768px) {
  .partners__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }

  .partners__logo {
    max-width: 150px;
    max-height: 40px;
  }
}

/* Desktop and up: single row of six */
@media (min-width: 1024px) {
  .partners {
    padding-block: var(--space-12);
  }

  .partners__grid {
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-3);
  }

  .partners__item {
    min-height: 104px;
    padding: var(--space-3);
  }

  .partners__logo {
    max-width: 130px;
    max-height: 38px;
  }
}

/* Small mobile: tighten spacing, avoid an overly tall stack */
@media (max-width: 479px) {
  .partners {
    padding-block: var(--space-8);
  }

  .partners__grid {
    gap: var(--space-2);
  }

  .partners__item {
    min-height: 84px;
    padding: var(--space-2) var(--space-3);
  }

  .partners__logo {
    max-width: 110px;
    max-height: 30px;
  }
}

/* ------------------------------------------------------------
   REDUCED MOTION
   The only motion here is the hover lift/opacity fade, both
   already short and non-looping; per the project's existing
   reduced-motion convention (base.css does not force a blanket
   override, individual components opt out of their own motion),
   remove the transform lift specifically for users who have
   requested less motion. Opacity/border/shadow changes remain,
   since they are not motion, only a state change.
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .partners__item:hover {
    transform: none;
  }
}