/* New rows reuse Framer's row + card classes, so they inherit Framer's
   exact layout, border, and responsive behavior. Only the trailing solo
   card needs its own sizing rule (so a single card doesn't expand to
   fill the whole row via flex:1 0 0).

   Framer's runtime adds a whileHover scale(1.02) to the existing photo
   cards. Our new cards aren't in React's tree so the runtime skips them
   — we replicate the same hover behavior here in CSS. */

[data-gl-photo-card][data-solo="1"] {
  flex: 0 0 285px !important;
}

/* Make sure the image inside our cards is always dead-centered and
   covers the card. Authoritative — overrides anything Framer's CSS
   might do to img descendants. */
[data-gl-photo-card] > [data-framer-background-image-wrapper] {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden;
}
[data-gl-photo-card] > [data-framer-background-image-wrapper] > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
  display: block !important;
}

@media (max-width: 720px) {
  [data-gl-photo-card][data-solo="1"] {
    flex: 0 0 500px !important;
    width: 100% !important;
  }
}

/* Hover match — scale 1.02, custom ease-out, transform-origin center.
   Gated to fine pointers so touch devices don't fire phantom hovers. */
[data-gl-photo-card] {
  transition: transform 280ms cubic-bezier(0.23, 1, 0.32, 1);
  transform-origin: center center;
}
@media (hover: hover) and (pointer: fine) {
  [data-gl-photo-card]:hover {
    transform: scale(1.02);
    z-index: 2; /* lift above neighbors so the edges don't clip */
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-gl-photo-card] {
    transition: none;
  }
  [data-gl-photo-card]:hover {
    transform: none;
  }
}