/* public/assets/ui/framework/11_profile_public_media.css
   KomodUI Public Profile Media v0.1
   Works/Portfolio grids + thumbnails + lightbox safety.
*/

/* =========================
   Global media safety inside profile
   ========================= */

.pp-container img,
.pp-container video {
  max-width: 100%;
  height: auto;
}

/* Any clickable media wrapper must not overflow */
.pp-lightbox-trigger,
.pp-work-card,
.pp-portfolio-item {
  min-width: 0;
}

/* =========================
   Works grid (orders photos)
   ========================= */

.pp-works-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

@media (max-width: 992px) {
  .pp-works-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 576px) {
  .pp-works-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

/* Work card media */
.pp-work-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

/* The thumb should have stable aspect ratio */
.pp-work-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/* Caption overlay must not force width */
.pp-work-caption-overlay,
.pp-work-meta,
.pp-work-client,
.pp-work-client-label {
  min-width: 0;
}

.pp-work-caption-overlay {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* =========================
   Portfolio grid
   ========================= */

.pp-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

@media (max-width: 992px) {
  .pp-portfolio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 576px) {
  .pp-portfolio-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

/* Portfolio item */
.pp-portfolio-item {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.pp-portfolio-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/* Portfolio caption safety */
.pp-portfolio-caption {
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* =========================
   Lightbox overlay safety (if present)
   ========================= */

.pp-modal-overlay,
.pp-modal {
  max-width: 100%;
}

.pp-modal {
  overflow: hidden;
}

.pp-modal-body {
  min-width: 0;
}

/* Any image used in preview/lightbox should never stretch */
#pl-img,
.pp-lightbox-img,
.pp-modal img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}