/* --------------------------------------------------------------------------
   Logo Wall Cycle — premium bordered cells + blurred logo swaps
   Dark logos on a soft light surface
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  color: #131313;
  background-color: #e8e6e3;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  display: block;
  max-width: 100%;
  -webkit-user-drag: none;
  user-select: none;
}

/* Full-viewport stage */
.section-resource {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 5vw;
}

.section-resource__max-width {
  width: 100%;
  max-width: 60em;
}

/* --------------------------------------------------------------------------
   Logo wall grid — separated cells with borders
   -------------------------------------------------------------------------- */

.logo-wall {
  display: flex;
  justify-content: center;
  width: 100%;
}

.logo-wall__collection {
  width: 100%;
  border: 1px solid rgba(19, 19, 19, 0.12);
  overflow: hidden;
  background: transparent;
}

.logo-wall__list {
  display: flex;
  flex-flow: row wrap;
  /* Outer edges of the grid lines live on the collection;
     each cell draws right + bottom borders only */
}

.logo-wall__item {
  width: 25%; /* 4 columns desktop */
  position: relative;
  border-right: 1px solid rgba(19, 19, 19, 0.1);
  border-bottom: 1px solid rgba(19, 19, 19, 0.1);
  background: transparent;
}

/* Kill outer-edge double lines so the collection border stays clean */
.logo-wall__item:nth-child(4n) {
  border-right: none;
}

/* Row 2 ends the visible wall on desktop (8 items) — drop bottom border */
.logo-wall__item:nth-child(n + 5):nth-child(-n + 8) {
  border-bottom: none;
}

/* Hide overflow slots: desktop shows 8 (4×2), rest feed the pool */
[data-logo-wall-list] [data-logo-wall-item]:nth-child(n + 9) {
  display: none;
}

/* Cell shell — aspect ratio + clip for the premium swap */
.logo-wall__logo {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* 3:2 aspect ratio spacer */
.logo-wall__logo-before {
  width: 100%;
  padding-top: 66.66%;
  pointer-events: none;
}

/* Logo layer — blur is applied here so img can keep its dark invert */
.logo-wall__logo-target {
  position: absolute;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 66.66%;
  height: 40%;
  /* Unitless px amount — GSAP animates this cleanly */
  --logo-blur: 0;
  filter: blur(calc(var(--logo-blur) * 1px));
  will-change: transform, opacity, filter;
  transform-origin: center center;
  backface-visibility: hidden;
}

.logo-wall__logo-img {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  /*
    CDN logos are often white SVGs.
    Invert them to dark ink on the light surface.
  */
  filter: brightness(0) saturate(100%);
  opacity: 0.9;
}

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */

/* Tablet: 3 columns, show 6 logos */
@media screen and (max-width: 991px) {
  .logo-wall__item {
    width: 33.333%;
  }

  /* Reset desktop edge rules */
  .logo-wall__item:nth-child(4n) {
    border-right: 1px solid rgba(19, 19, 19, 0.1);
  }

  .logo-wall__item:nth-child(n + 5):nth-child(-n + 8) {
    border-bottom: 1px solid rgba(19, 19, 19, 0.1);
  }

  /* 3-col: every 3rd has no right border */
  .logo-wall__item:nth-child(3n) {
    border-right: none;
  }

  /* Bottom row of 6 (items 4–6) */
  .logo-wall__item:nth-child(n + 4):nth-child(-n + 6) {
    border-bottom: none;
  }

  [data-logo-wall-list] [data-logo-wall-item]:nth-child(n + 7) {
    display: none;
  }
}

/* Phone: 2 columns, show 6 logos */
@media screen and (max-width: 479px) {
  .logo-wall__item {
    width: 50%;
  }

  .logo-wall__item:nth-child(3n) {
    border-right: 1px solid rgba(19, 19, 19, 0.1);
  }

  .logo-wall__item:nth-child(n + 4):nth-child(-n + 6) {
    border-bottom: 1px solid rgba(19, 19, 19, 0.1);
  }

  /* 2-col: even items no right border */
  .logo-wall__item:nth-child(2n) {
    border-right: none;
  }

  /* Bottom row of 6 (items 5–6) */
  .logo-wall__item:nth-child(n + 5):nth-child(-n + 6) {
    border-bottom: none;
  }

  [data-logo-wall-list] [data-logo-wall-item]:nth-child(n + 7) {
    display: none;
  }

  .logo-wall__logo-target {
    width: 58%;
    height: 36%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-wall__logo-target {
    will-change: auto;
  }
}