/* ============================================
   Base styles for Avatar Grid
   ============================================
   Lives inside the bundle. Don't put tunable values here —
   those belong in avatar-grid-variables.css (Webflow Custom Code)
   and are overridden per instance by the component's props, which
   land on `.avatar-grid` as inline `--avatar-grid-*` properties.

   Layout model
     .avatar-grid        full-width section, min-height N vh, flex-centres the grid
     .avatar-grid__grid  2-column CSS grid of square tiles, in normal flow
     .avatar-grid__item  perspective container (one per tile)
     .avatar-grid__wrap  the animated card — rotateX / skewX / blur (GSAP)
     .avatar-grid__img   the photo — scaleY counter-stretch (GSAP)
*/

.avatar-grid {
  /* ─── Why these aliases exist ──────────────────────────────
     The Custom Code embed declares the public `--avatar-grid-*`
     variables on the `*` selector (required so they inherit into the
     Shadow DOM). `*` matches every element, so a descendant reading a
     public variable directly would pick up the embed's default instead
     of the value the component sets on this root element from its props.
     Inside a Shadow DOM the page's `*` rule can't reach the descendants
     and it happens to work — but nothing should hinge on that. So: read
     the public variables once, here, and let descendants read these
     private `--_ag-*` aliases, which only ever exist on this element and
     therefore always inherit. */
  --_ag-tile-desktop: var(--avatar-grid-tile-desktop, 14rem);
  --_ag-gap-desktop: var(--avatar-grid-gap-desktop, 2.4rem);
  --_ag-width-mobile: var(--avatar-grid-width-mobile, 62%);
  --_ag-gap-mobile: var(--avatar-grid-gap-mobile, 1.6rem);
  --_ag-radius: var(--avatar-grid-radius, 1.6rem);
  --_ag-perspective: var(--avatar-grid-perspective, 800px);
  --_ag-placeholder: var(--avatar-grid-placeholder, #2a2a2a);
  --_ag-photo-opacity: var(--avatar-grid-photo-opacity, 1);

  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: calc(var(--avatar-grid-height-desktop, 300) * 1vh);
  margin: 0;
  padding: 0;
  overflow-x: clip;
  background: var(--avatar-grid-background, transparent);
}

@supports (height: 1svh) {
  .avatar-grid {
    min-height: calc(var(--avatar-grid-height-desktop, 300) * 1svh);
  }
}

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

.avatar-grid__grid {
  display: grid;
  grid-template-columns: repeat(2, var(--_ag-tile-desktop));
  gap: var(--_ag-gap-desktop);
  align-content: center;
  justify-content: center;
}

.avatar-grid__item {
  position: relative;
  z-index: 1;
  margin: 0;
  aspect-ratio: 1;
  perspective: var(--_ag-perspective);
  will-change: transform;
}

.avatar-grid__wrap {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--_ag-radius);
  transform-style: preserve-3d;
  will-change: transform, filter;
  /* Promote to its own layer so the blur filter doesn't re-raster neighbours. */
  isolation: isolate;
}

.avatar-grid__img {
  display: block;
  /* Fades the photo toward whatever sits behind the section, so overlaid
     copy stays readable. GSAP animates transform/filter, never opacity,
     so this is independent of the scroll animation. */
  opacity: var(--_ag-photo-opacity);
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  backface-visibility: hidden;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
}

.avatar-grid__img--placeholder {
  background: var(--_ag-placeholder);
}

/* ─── Mobile ───────────────────────────────────────────────
   Switched by the component via matchMedia (breakpoint is a prop),
   not by a media query, so the breakpoint can be tuned in Webflow. */
.avatar-grid[data-layout='mobile'] {
  min-height: calc(var(--avatar-grid-height-mobile, 100) * 1vh);
}

@supports (height: 1svh) {
  .avatar-grid[data-layout='mobile'] {
    min-height: calc(var(--avatar-grid-height-mobile, 100) * 1svh);
  }
}

.avatar-grid[data-layout='mobile'] .avatar-grid__grid {
  width: var(--_ag-width-mobile);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--_ag-gap-mobile);
}

/* ─── Motion off ───────────────────────────────────────────
   Static grid when the Animation prop is off or the visitor prefers
   reduced motion. GSAP isn't started at all in that case. */
.avatar-grid[data-animate='false'] .avatar-grid__wrap,
.avatar-grid[data-animate='false'] .avatar-grid__img {
  will-change: auto;
}