/* Profile responsive layout repair — July 24, 2026
   The current collage uses two nested columns. Older fixed-aspect and direct-child
   grid rules caused those columns to overflow the layout on tablet widths. */

/* Let the nested photo columns establish the collage's true height at every size. */
.page-profile .person-collage {
  aspect-ratio: auto !important;
  block-size: auto !important;
  min-block-size: 0 !important;
  grid-template-rows: none !important;
  grid-auto-rows: auto !important;
  column-count: auto !important;
  columns: auto !important;
  overflow: visible !important;
}

.page-profile .person-collage__column {
  position: static !important;
  block-size: auto !important;
  min-block-size: 0 !important;
}

@media (max-width: 820px) {
  .page-profile .about-layout,
  .page-profile .person-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: clamp(34px, 6vw, 48px) !important;
    align-items: start !important;
  }

  /* A sticky image in a single-column layout can cover the content while scrolling. */
  .page-profile .about-visual,
  .page-profile .person-collage {
    position: static !important;
    inset: auto !important;
    top: auto !important;
  }

  .page-profile .about-content,
  .page-profile .person-content {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    padding-top: 0 !important;
  }

  /* Keep the seven personal photos compact instead of creating one very long stack. */
  .page-profile .person-collage {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(12px, 2.6vw, 18px) !important;
    width: min(100%, 680px) !important;
    max-width: 680px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .page-profile .person-collage__column {
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(12px, 2.6vw, 18px) !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .page-profile .person-image,
  .page-profile .person-image:nth-child(n) {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    transform: none !important;
  }

  .page-profile .person-image img,
  .page-profile .person-image:nth-child(n) img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    transform: none !important;
  }
}

@media (max-width: 560px) {
  .page-profile .about-page {
    padding-right: 16px !important;
    padding-left: 16px !important;
  }

  .page-profile .about-shell {
    width: 100% !important;
    max-width: 100% !important;
  }

  .page-profile .person-layout,
  .page-profile .about-layout {
    gap: 30px !important;
  }

  .page-profile .person-collage,
  .page-profile .person-collage__column {
    gap: 12px !important;
  }

  .page-profile .profile-actions {
    width: min(100%, 310px) !important;
    max-width: 100% !important;
  }
}



/* Preserve the same two-column collage composition on all phone widths.
   Only the column width and gaps shrink to fit the available screen. */
@media (max-width: 560px) {
  .page-profile .person-collage {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: clamp(8px, 2.7vw, 12px) !important;
  }

  .page-profile .person-collage__column {
    gap: clamp(8px, 2.7vw, 12px) !important;
  }

  .page-profile .person-image,
  .page-profile .person-image:nth-child(n),
  .page-profile .person-image img,
  .page-profile .person-image:nth-child(n) img {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

@media (max-width: 340px) {
  .page-profile .about-page {
    padding-right: 12px !important;
    padding-left: 12px !important;
  }

  .page-profile .person-collage,
  .page-profile .person-collage__column {
    gap: 7px !important;
  }
}