/* Profile Gallery styles: simple comments added by me to explain sections. */



:root{ --gap:24px; --maxw:1200px; }


.masonry{
  column-count: 4;
  column-gap: var(--gap);
  max-width: var(--maxw);
  margin: 0 auto 80px;
  padding: 0 var(--gap);
}
/* Responsive styles */
@media (max-width:1200px){ .masonry{ column-count:3; } }
/* Responsive styles */
@media (max-width:900px) { .masonry{ column-count:2; } }
/* Responsive styles */
@media (max-width:560px) { .masonry{ column-count:1; } }

.masonry-item{
  display:inline-block;
  width:100%;
  margin:0 0 var(--gap);
  break-inside: avoid;
}

.masonry-link{ display:block; text-decoration:none; }


.masonry img{
  display:block;
  width:100%;
  height:auto !important;
  aspect-ratio:auto !important;
  object-fit:contain !important;
  border-radius:16px;
  background:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  transition:transform .15s ease, box-shadow .15s ease;
}
.masonry img:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 28px rgba(0,0,0,.12);
}

.masonry-empty{
  text-align:center;
  color:#6a5669;
}


.masonry .post-card,
.masonry .media{
  background:transparent;
  border:0;
  box-shadow:none;
  padding:0;
}
.masonry .media{
  height:auto;
  aspect-ratio:auto;
}
.masonry .thumbnail-image{
  width:100%;
  height:auto !important;
  aspect-ratio:auto !important;
  object-fit:contain !important;
  border-radius:16px;
}



.profile-page .post-card,
.profile-page .yt-card { position: relative; }

.profile-page .delete-inline-form{
  position:absolute;
  top:10px; right:10px;
  z-index:3;
  margin:0;
}

.profile-page .delete-inline-btn{
  background:#A68CA5;
  color:#000;
  padding:6px 12px;
  border-radius:999px;
  border:none;
  font-size:.8rem;
  font-weight:700;
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transform:translateY(-2px);
  transition:opacity .15s ease, transform .15s ease, background-color .2s ease;
}
.profile-page .delete-inline-btn:hover{ background:#7F627D; color:#fff; }

.profile-page .post-card:hover .delete-inline-btn,
.profile-page .yt-card:hover   .delete-inline-btn{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}


.profile-page .yt-card{ cursor:pointer; position:relative; }


.profile-page .yt-card .card-overlay{
  position:absolute; inset:0;
  z-index: 2;            
  display:block;
}


.profile-page .yt-card .meta,
.profile-page .yt-card .thumb{ position:relative; z-index:1; }


.profile-page .yt-card .delete-inline-form{
  position:absolute; top:8px; right:8px;
  z-index: 3;
  opacity: 0;
  transition: opacity .15s ease;
}
.profile-page .yt-card:hover .delete-inline-form{ opacity:1; }


.profile-page .delete-inline-btn{
  background-color:#7F627D;
  color:#fff;
  font-weight:700;
  font-size:.78rem;
  padding:6px 12px;
  border:none;
  border-radius:999px;
  cursor:pointer;
}
.profile-page .delete-inline-btn:hover{ background-color:#5C475B; }




:root{ --gap:24px; --maxw:1200px; }


.profile-page .masonry{
  
  column-width: 320px;
  column-gap: 1.5rem;
  max-width: var(--maxw);
  margin: 0 auto 80px;
  padding: 2rem;
}
/* Responsive styles */
@media (max-width:1100px){ .profile-page .masonry{ column-width: 280px; } }
/* Responsive styles */
@media (max-width:768px){  .profile-page .masonry{ column-width: 220px; padding: 1.25rem; } }
/* Responsive styles */
@media (max-width:480px){  .profile-page .masonry{ column-width: 180px; padding: 1rem; } }


.profile-page .masonry-item{
  display:inline-block;
  width:100%;
  margin:0 0 1.5rem;
  break-inside: avoid-column;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  position:relative;     
  contain: paint;        
}

.profile-page .masonry-empty{
  text-align:center; color:#6a5669; width:100%;
}

.profile-page .masonry-link{ display:block; text-decoration:none; }


.profile-page .post-card,
.profile-page .post-card .media{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  height:auto !important;
}


.profile-page .masonry img,
.profile-page .post-card .thumbnail-image{
  display:block;
  width:100%;
  height:auto !important;
  aspect-ratio:auto !important;
  object-fit:contain !important;
  border-radius:16px;
  background:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  transition: transform .15s ease;
  transform: translateZ(0);
  will-change: transform;
  -webkit-backface-visibility: hidden;
}


.profile-page .masonry-item:hover .thumbnail-image,
.profile-page .masonry-item:hover img{
  transform: translateY(-2px);
}


.profile-page .delete-inline-form{
  position:absolute; top:10px; right:10px; z-index:2; margin:0;
  opacity:0; transform:translateY(-4px); pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.profile-page .masonry-item:hover .delete-inline-form{
  opacity:1; transform:none; pointer-events:auto;
}
.profile-page .delete-inline-btn{
  background:#7F627D; color:#fff; font-weight:700; font-size:.78rem;
  padding:6px 12px; border:none; border-radius:999px; cursor:pointer;
}
.profile-page .delete-inline-btn:hover{ background:#5C475B; }


.profile-page .yt-card{ position:relative; cursor:pointer; }
.profile-page .yt-card .card-overlay{ position:absolute; inset:0; z-index:2; display:block; }
.profile-page .yt-card .meta,
.profile-page .yt-card .thumb{ position:relative; z-index:1; }
.profile-page .yt-card .delete-inline-form{ position:absolute; top:8px; right:8px; z-index:3; opacity:0; transition:opacity .15s ease; }
.profile-page .yt-card:hover .delete-inline-form{ opacity:1; }