/*
 * Profile-photo frames (crop-to-frame addendum, IM P0, 2026-10-02).
 *
 * Owner: "Profile photo cuts off head." Every frame used to centre-crop, and a
 * centre crop of a portrait in a wider frame removes the top, where the head is.
 *
 *   .im-photo-frame  the one large profile-photo perimeter: 4:5 portrait,
 *                    cover, anchored near the top (50% 20%).
 *   .im-photo-focus  an <img> that fills a frame its parent already sizes
 *                    (aspect-ratio on the wrapper): same top anchor.
 *   .im-photo-thumb  square and circular thumbnails / avatars: 50% 25%.
 *
 * A member-saved crop (IM P1) is served as an already-cropped variant, so these
 * anchors only decide what an uncropped photo shows. Pure CSS: no layout script.
 */
.im-photo-frame {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 20%;
}

.im-photo-focus {
  object-fit: cover;
  object-position: 50% 20%;
}

.im-photo-thumb {
  object-fit: cover;
  object-position: 50% 25%;
}

/*
 * Profile gallery (crop-to-frame addendum section 3, IM P1): one large 4:5
 * frame and up to four square thumbnails, in a row under the frame or a column
 * beside it where the layout is wide. Thumbnails are buttons; the page swaps
 * the activated one into the frame.
 */
.im-gallery {
  display: grid;
  gap: 0.5rem;
  max-width: 28rem;
}

.im-gallery__frame {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0.75rem;
  overflow: hidden;
  background: transparent;
  cursor: zoom-in;
}

.im-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}

.im-gallery__thumb {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 0;
  border-radius: 0.5rem;
  overflow: hidden;
  background: transparent;
  cursor: pointer;
}

.im-gallery__thumb img {
  display: block;
  width: 100%;
  height: 100%;
}

@media (min-width: 40rem) {
  .im-gallery {
    grid-template-columns: minmax(0, 1fr) 5rem;
    max-width: 34rem;
    align-items: start;
  }

  .im-gallery__thumbs {
    grid-template-columns: 1fr;
  }
}