/* ── Hero ───────────────────────────────────────────────────────────── */
.page-hero {
  position: relative;
  height: clamp(160px, 25vw, 300px);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.38);
}
.page-hero-placeholder {
  background: linear-gradient(135deg, #1a3d2b 0%, #2d5a3d 40%, #3d2b6b 100%);
}
.page-hero-placeholder::after { background: rgba(0,0,0,0.15); }
.page-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  text-align: center;
  padding: 2rem clamp(1rem,4vw,3rem);
}
.page-hero-inner h1 {
  color: #fff;
  font-size: clamp(2.2rem,5.5vw,4rem);
  font-weight: 800;
  margin: 0;
  text-shadow: 0 3px 20px rgba(0,0,0,0.55);
  line-height: 1.15;
}

/* ── Filter tabs ────────────────────────────────────────────────────── */
.gal-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  margin-bottom: 2rem;
}
.gal-tab {
  padding: .4rem 1.1rem;
  border-radius: 20px;
  font-size: .85rem;
  font-weight: 700;
  border: 1.5px solid #ddd8f0;
  background: #fff;
  color: #555;
  cursor: pointer;
  transition: all .15s;
}
.gal-tab:hover  { border-color: #6d4fc2; color: #6d4fc2; }
.gal-tab.active { background: #6d4fc2; border-color: #6d4fc2; color: #fff; }

/* ── Album grid ─────────────────────────────────────────────────────── */
.album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-bottom: 3rem;
}
.album-card {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #ebebf2;
  box-shadow: 0 2px 16px rgba(60,50,100,.07);
  background: #fff;
  cursor: pointer;
  text-decoration: none;
  display: block;
  transition: box-shadow .18s, transform .18s;
}
.album-card:hover {
  box-shadow: 0 8px 32px rgba(60,50,100,.16);
  transform: translateY(-3px);
}
.album-thumb {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: linear-gradient(135deg,#1a3d2b,#3d2b6b);
}
.album-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s;
}
.album-card:hover .album-thumb img { transform: scale(1.04); }
.album-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 40%, rgba(0,0,0,.6));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: .85rem 1rem;
}
.album-cat {
  position: absolute;
  top: .65rem;
  left: .65rem;
  display: inline-block;
  padding: .18rem .6rem;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 700;
  background: rgba(109,79,194,.9);
  color: #fff;
}
.album-title {
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
}
.album-count {
  color: rgba(255,255,255,.75);
  font-size: .78rem;
  margin-top: .2rem;
}

/* ── Photo grid (album detail) ──────────────────────────────────────── */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .85rem;
  margin-bottom: 3rem;
}
@media (max-width: 991px) {
  .photo-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 767px) {
  .photo-grid { grid-template-columns: repeat(3, 1fr); gap: .6rem; }
}
@media (max-width: 575px) {
  .photo-grid { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
}
.photo-item { display: block; text-decoration: none; }
.photo-thumb {
  aspect-ratio: 4/3;
  border-radius: 10px;
  overflow: hidden;
  background: #f0edf8;
  position: relative;
}
.photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .25s, opacity .15s;
}
.photo-item:hover .photo-thumb img { transform: scale(1.06); opacity: .92; }
.photo-thumb::after {
  content: '⤢';
  position: absolute;
  top: .5rem;
  right: .5rem;
  background: rgba(0,0,0,.45);
  color: #fff;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  opacity: 0;
  transition: opacity .15s;
}
.photo-item:hover .photo-thumb::after { opacity: 1; }
.photo-caption {
  font-size: .78rem;
  color: #666;
  margin-top: .35rem;
  text-align: center;
  line-height: 1.4;
}

/* ── Back link / breadcrumb ─────────────────────────────────────────── */
.gal-back {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .85rem;
  font-weight: 600;
  color: #6d4fc2;
  text-decoration: none;
  margin-bottom: 1rem;
}
.gal-back:hover { color: #4c3d8f; }
.gal-album-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: 1.5rem;
}
.gal-album-header h2 {
  font-size: clamp(1.3rem,2.5vw,1.8rem);
  font-weight: 800;
  margin: 0;
}
.gal-album-cat {
  padding: .2rem .7rem;
  border-radius: 20px;
  font-size: .78rem;
  font-weight: 700;
  background: #ede9f8;
  color: #6d4fc2;
}

/* ── Lightbox ───────────────────────────────────────────────────────── */
.lb-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.88);
  z-index: 9900;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s;
}
.lb-overlay.open { opacity: 1; pointer-events: auto; }
.lb-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: min(90vw, 900px);
  max-height: 90vh;
}
.lb-content img {
  max-width: 100%;
  max-height: calc(90vh - 2.5rem);
  border-radius: 14px;
  object-fit: contain;
  display: block;
}
.lb-caption {
  color: rgba(255,255,255,.7);
  font-size: .82rem;
  margin-top: .6rem;
  text-align: center;
}
.lb-close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  border: none;
  color: #fff;
  font-size: 1.3rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
  z-index: 9901;
  line-height: 1;
}
.lb-close:hover { background: rgba(255,255,255,.32); }
.lb-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  border: none;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
  z-index: 9901;
  line-height: 1;
  padding: 0;
}
.lb-nav:hover { background: rgba(255,255,255,.28); }
.lb-prev { left: 1rem; }
.lb-next { right: 1rem; }

/* ── Empty state ────────────────────────────────────────────────────── */
.gal-empty {
  text-align: center;
  color: #aaa;
  padding: 4rem 0;
  font-size: 1rem;
}
.gal-empty i { font-size: 3rem; display: block; margin-bottom: .75rem; color: #ddd; }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 575px) {
  .album-grid  { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
  .gal-filters { gap: .35rem; }
  .gal-tab     { font-size: .78rem; padding: .3rem .8rem; }
}