/* Photo Gallery Styles (Albums + Photos + Lightbox) */
:root {
  --pg-bg: #ffffff;
  --pg-surface: #f7f8fa;
  --pg-border: #e0e3e7;
  --pg-shadow-sm: 0 2px 4px -2px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.06);
  --pg-shadow-lg: 0 8px 28px -6px rgba(0,0,0,.18);
  --pg-radius-sm: 6px;
  --pg-radius-md: 10px;
  --pg-radius-lg: 14px;
  --pg-primary: #0d6efd;
  --pg-primary-rgb: 13,110,253;
  --pg-text: #1f2329;
  --pg-muted: #5d6570;
  --pg-accent: #ffb347;
  --pg-transition: .28s cubic-bezier(.22,.7,.34,1);
  --pg-focus-ring: 0 0 0 3px rgba(var(--pg-primary-rgb), .35);
}

/* Section headings */
.media-gallery h3 {
  font-weight: 600;
  letter-spacing: .5px;
  margin-top: 1rem;
  margin-bottom: 1.1rem;
  color: var(--pg-text);
  display: flex;
  align-items: center;
  gap: .55rem;
}
.media-gallery h3:before {
  content: "";
  width: 28px; height: 3px;
  background: linear-gradient(90deg,var(--pg-primary) 0%, var(--pg-accent) 90%);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
}

/* Grid foundations */
.grid { display: grid; gap: 1.1rem; }
.albums-grid { grid-template-columns: repeat(auto-fill,minmax(210px,1fr)); }
.photos-grid { grid-template-columns: repeat(auto-fill,minmax(140px,1fr)); }

/* Shared card style */
.album-item, .photo-item { position: relative; cursor: pointer; }
.album-item:focus-visible, .photo-item:focus-visible { outline: none; box-shadow: var(--pg-focus-ring); border-radius: var(--pg-radius-md); }

/* Thumbnail wrapper */
.thumb {
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--pg-surface);
  border: 1px solid var(--pg-border);
  border-radius: var(--pg-radius-md);
  overflow: hidden;
  position: relative;
  box-shadow: var(--pg-shadow-sm);
  transition: var(--pg-transition);
}
.thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease;
}

/* Album specific hover overlay */
.album-item .thumb:before {
  content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(0,0,0,.0) 40%,rgba(0,0,0,.55) 100%); opacity: 0; transition: var(--pg-transition);
}
.album-item .thumb:hover:before { opacity: 1; }
.album-item .thumb:hover img { transform: scale(1.06); }

/* Photo hover */
.photo-item .thumb:hover img { transform: scale(1.08); }
.photo-item .thumb:hover { box-shadow: var(--pg-shadow-lg); }

/* Album title inside overlay */
.album-title {
  font-weight: 600; font-size: .87rem; letter-spacing: .25px; margin-top: .5rem; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--pg-text); transition: var(--pg-transition);
}
.album-item .thumb:hover + .album-title { color: var(--pg-primary); }

/* Selected album state */
.album-item.active-album .thumb { outline: 3px solid rgba(var(--pg-primary-rgb), .15); box-shadow: 0 4px 16px rgba(var(--pg-primary-rgb), .25); }

/* Hidden items toggle */
.hidden-item { display: none; }
.expanded .hidden-item { display: block; }

/* See more button */
.see-more-wrap { text-align: center; margin: 1.25rem 0 .25rem; }
.see-more-wrap button.btn-gallery-toggle {
  background: linear-gradient(90deg,var(--pg-primary) 0%, var(--pg-accent) 90%);
  color: #fff; border: none; font-weight: 600; letter-spacing: .3px; padding: .65rem 1.15rem; border-radius: var(--pg-radius-sm);
  font-size: .85rem; box-shadow: var(--pg-shadow-sm); cursor: pointer; position: relative; isolation: isolate; transition: var(--pg-transition);
}
.see-more-wrap button.btn-gallery-toggle:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.25) 0 30%, transparent 60%); opacity:.55; mix-blend-mode: overlay; }
.see-more-wrap button.btn-gallery-toggle:hover { transform: translateY(-2px); box-shadow: var(--pg-shadow-lg); }
.see-more-wrap button.btn-gallery-toggle:active { transform: translateY(0); }
.see-more-wrap button.btn-gallery-toggle:focus-visible { outline:none; box-shadow: var(--pg-focus-ring), var(--pg-shadow-sm); }

/* Lightbox */
#lightbox { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 1200; }
#lightbox.open { display: flex; }
#lightbox .lb-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.75); backdrop-filter: blur(2px); }
#lightbox .lb-content { position: relative; max-width: 92%; max-height: 92%; z-index: 2; display: flex; flex-direction: column; align-items: center; }
#lightbox img { max-width: 100%; max-height: 78vh; border-radius: var(--pg-radius-lg); box-shadow: 0 14px 48px -6px rgba(0,0,0,.65); transition: .3s ease; }
#lightbox .lb-close { position: absolute; right: -10px; top: -10px; background: #fff; border: none; width: 42px; height: 42px; border-radius: 50%; cursor: pointer; font-size: 22px; line-height: 1; box-shadow: var(--pg-shadow-lg); display:flex; align-items:center; justify-content:center; }
#lightbox .lb-close:hover { background: var(--pg-primary); color:#fff; }
#lightboxCaption { margin-top: .6rem; color: #fff; max-width: 90%; text-align: center; font-size: .95rem; word-break: break-word; font-weight: 500; letter-spacing:.3px; }

/* Lightbox navigation buttons */
#lightbox button.lb-prev, #lightbox button.lb-next { position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.96); border:0; width:48px; height:48px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:26px; box-shadow:0 4px 14px rgba(0,0,0,.35); transition: var(--pg-transition); }
#lightbox button.lb-prev { left:-26px; }
#lightbox button.lb-next { right:-26px; }
#lightbox button.lb-prev:hover, #lightbox button.lb-next:hover { background: var(--pg-primary); color:#fff; }
#lightbox button.lb-prev:focus-visible, #lightbox button.lb-next:focus-visible { outline:none; box-shadow: var(--pg-focus-ring), 0 4px 14px rgba(0,0,0,.35); }

/* Responsive tweaks */
@media (max-width: 768px) {
  .albums-grid { grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); }
  .photos-grid { grid-template-columns: repeat(auto-fill,minmax(120px,1fr)); }
  #lightbox img { max-height: 70vh; }
}
@media (max-width: 576px) {
  .thumb { aspect-ratio: 1/1; }
  .albums-grid { grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); }
  .photos-grid { grid-template-columns: repeat(auto-fill,minmax(100px,1fr)); }
  #lightbox img { max-height: 65vh; }
  #lightbox button.lb-prev { left:4px; }
  #lightbox button.lb-next { right:4px; }
}
@media (hover: none) {
  .album-item .thumb:hover img, .photo-item .thumb:hover img { transform:none; }
}

/* Utility */
.media-gallery .visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }