/* .jb-album sits on each album page's section: account.php reuses .newGalleryBox and .regularContent. */
.jb-album .ce_text { margin: 0 0 32px; }
.jb-album .ce_text p { max-width: 75ch; }
.jb-album .ce_text p:last-child { margin-bottom: 0; }
.jb-album .ce_text strong { color: #fff; font-weight: 600; }
.jb-album .newGalleryBox { margin: 0 0 28px; }
.jb-album .newGalleryBox p { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.jb-album .newGalleryBox .jb-btn { margin: 0; }
.jb-album .fullWidth { margin: 40px 0 0; padding-top: 20px; color: var(--jb-muted); border-top: 1px solid var(--jb-line); font-size: 14px; }

/* Album tiles. Flex rather than grid so the bare "0 results" text spans the row. */
.mod_ed_gallery_list { display: flex; flex-wrap: wrap; gap: 28px 20px; color: var(--jb-muted); }
.mod_ed_gallery_list .item { display: flex; flex-direction: column; width: calc((100% - 60px) / 4); min-width: 0; }
.mod_ed_gallery_list .item figure { order: -1; }
.mod_ed_gallery_list figure a { display: block; overflow: hidden; background: var(--jb-raise); border-radius: 12px; transition: box-shadow 0.15s ease; }
.mod_ed_gallery_list .item img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border: 0; }
/* getAlbums() falls back to this light placeholder for albums without photos. */
.mod_ed_gallery_list img[src$="/img/3.jpg"] { opacity: 0.22; }
.mod_ed_gallery_list .item h2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  margin: 12px 0 2px;
  overflow: hidden;
  color: #fff;
  font: 600 17px/1.25 var(--jb-display);
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
  transition: color 0.15s ease;
}
.mod_ed_gallery_list .info { font-size: 13px; line-height: 1.4; }
body.jb .mod_ed_gallery_list .info a { color: var(--jb-pink); text-decoration: underline; text-underline-offset: 2px; }
body.jb .mod_ed_gallery_list .info a:hover { color: #fff; }

/* One album: the meta line sits under the heading, above the photos. */
.mod_ed_gallery_reader { display: flex; flex-direction: column; }
.mod_ed_gallery_reader h1 { order: -2; overflow-wrap: anywhere; }
.mod_ed_gallery_reader .info { order: -1; margin: -4px 0 28px; color: var(--jb-muted); font-size: 14px; }
.mod_ed_gallery_reader .info > div { display: flex; flex-wrap: wrap; align-items: center; }
.mod_ed_gallery_reader .info span::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 12px; vertical-align: middle; border-radius: 50%; background: var(--jb-pink); }
/* masonry.pkgd positions each figure inline once the images load; keep them in the grid. */
.jb-album #images { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; height: auto !important; }
.jb-album #images .masonryImage { position: static !important; }
.jb-album #images figure a { display: block; overflow: hidden; background: var(--jb-raise); border-radius: 10px; transition: box-shadow 0.15s ease; }
.jb-album #images img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border: 0; }
/* Fancybox 2 lightbox, loaded only by album.php; its 15px frame padding is set inline.
   album.php links jquery.fancybox.css after these sheets, so body.jb is what lets these rules win. */
body.jb .fancybox-overlay { background: rgba(0, 0, 0, 0.85); }
body.jb .fancybox-skin { background: var(--jb-raise); border-radius: 14px; }
body.jb .fancybox-opened .fancybox-skin { box-shadow: 0 0 0 1px var(--jb-edge), 0 24px 60px rgba(0, 0, 0, 0.6); }
body.jb .fancybox-inner { border-radius: 10px; }

/* Add and edit album */
.jb-album #fileupload { max-width: 640px; }
#fileupload .mandatory { color: var(--jb-pink); }
#fileupload .readerGallery { margin: 4px 0 24px; }
#fileupload #images { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
#fileupload .delete { margin: 8px 0 0; font-size: 13px; }
body.jb #fileupload .delete a { color: #ff9db0; text-decoration: underline; text-underline-offset: 2px; }
body.jb #fileupload .delete a:hover { color: #fff; }
#fileupload input.save { margin-top: 8px; }

@media (hover: hover) {
  .mod_ed_gallery_list .item:hover figure a,
  .jb-album #images figure a:hover { box-shadow: 0 0 0 2px var(--jb-pink); }
  .mod_ed_gallery_list .item:hover h2 { color: var(--jb-pink); }
}

@media (max-width: 1000px) {
  .mod_ed_gallery_list { column-gap: 16px; }
  .mod_ed_gallery_list .item { width: calc((100% - 32px) / 3); }
}

@media (max-width: 640px) {
  .jb-album .newGalleryBox { margin-bottom: 24px; }
  .jb-album .ce_text { margin-bottom: 28px; }
  .jb-album .fullWidth { margin-top: 32px; }
  .mod_ed_gallery_list { gap: 20px 12px; }
  .mod_ed_gallery_list .item { width: calc((100% - 12px) / 2); }
  .mod_ed_gallery_list figure a { border-radius: 10px; }
  .mod_ed_gallery_list .item h2 { margin-top: 8px; font-size: 16px; }
  .mod_ed_gallery_reader .info { margin-bottom: 22px; }
  .jb-album #images { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  #fileupload input.save { width: 100%; }
}