/* All-photos simple viewer */
.lightbox{ position: fixed; inset: 0; background: rgba(0,0,0,.9); z-index: 9999; }
.lightbox-fig{ display:flex; flex-direction:column; align-items:center; justify-content:center; height: calc(100vh - 6rem); margin: 0; }
.lightbox-fig img{ max-width: 96vw; max-height: 80vh; width: auto; height: auto; object-fit: contain; }
.lightbox .lightbox-close{ position: fixed; top: 1rem; right: 1rem; background: transparent; border: 1px solid #fff; color:#fff; border-radius: .5rem; padding: .4rem .6rem; cursor: pointer; }
.lb-prev, .lb-next{ position: fixed; top: 50%; transform: translateY(-50%); background: transparent; border:none; color:#fff; font-size:2rem; cursor:pointer; }
.lb-prev{ left: 1rem; } .lb-next{ right: 1rem; }


/* Overview grid for All Photos */
.allphotos-overview{ background: rgba(0,0,0,.94); }
.ap-header{ position: sticky; top: 0; display:flex; align-items:center; gap:1rem; padding: .8rem 1rem; background: rgba(0,0,0,.9); z-index: 2; }
.ap-title{ font-weight: 700; font-size: 1.1rem; color:#fff; }
.ap-meta{ color:#ddd; font-size:.95rem; }
.ap-actions{ margin-left:auto; }
.ap-close{ background: transparent; border: 1px solid #fff; color:#fff; border-radius: .5rem; padding: .3rem .6rem; cursor: pointer; }
.ap-grid{
  height: calc(100vh - 7.5rem);
  overflow: auto;
  display: grid;
  align-items: stretch;                 /* stretch cells' content */
  grid-template-columns: repeat(6, minmax(180px, 1fr));
  gap: 16px;
  padding: 16px 20px;
}
.ap-cell{
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;    /* square cell ensures height */
  cursor: pointer;
  background: #111;
  border-radius: .25rem;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset;
}
.ap-cell img{
  position: static;          /* no absolute -> participates in layout */
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0 !important;
  filter: none;
}
.ap-footer{ position: sticky; bottom: 0; display:flex; justify-content:center; padding:.6rem; background: rgba(0,0,0,.9); }
.ap-start{ background: transparent; border: 1px solid #fff; color:#fff; border-radius: .6rem; padding: .5rem .9rem; cursor: pointer; }
.lb-overview{ position: fixed; top: 1rem; left: 1rem; background: transparent; border: 1px solid #fff; color:#fff; border-radius: .5rem; padding: .3rem .6rem; cursor: pointer; }


/* === Updated: Overview grid layout to 6 columns, ~5 rows visible === */
.allphotos-overview{ background: rgba(0,0,0,.94); }
.ap-header{ position: sticky; top: 0; display:flex; align-items:center; gap:1rem; padding: .8rem 1rem; background: rgba(0,0,0,.9); z-index: 2; }
.ap-title{ font-weight: 700; font-size: 1.1rem; color:#fff; }
.ap-meta{ color:#ddd; font-size:.95rem; }
.ap-actions{ margin-left:auto; }
.ap-close{ background: transparent; border: 1px solid #fff; color:#fff; border-radius: .5rem; padding: .3rem .6rem; cursor: pointer; }

/* The grid: fixed 6 columns, sufficient gap, scrollable area */
.ap-grid{
  height: calc(100vh - 7.5rem);
  overflow: auto;
  display: grid;
  align-items: stretch;                 /* stretch cells' content */
  grid-template-columns: repeat(6, minmax(180px, 1fr));
  gap: 16px;
  padding: 16px 20px;
}

.ap-cell{
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;    /* square cell ensures height */
  cursor: pointer;
  background: #111;
  border-radius: .25rem;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset;
}

.ap-cell img{
  position: static;          /* no absolute -> participates in layout */
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0 !important;
  filter: none;
}

.ap-footer{ position: sticky; bottom: 0; display:flex; justify-content:center; padding:.6rem; background: rgba(0,0,0,.9); z-index: 2; }
.ap-start{ background: transparent; border: 1px solid #fff; color:#fff; border-radius: .6rem; padding: .5rem .9rem; cursor: pointer; }

/* Button to jump back to overview in fullscreen */
.lb-overview{ position: fixed; top: 1rem; left: 1rem; background: transparent; border: 1px solid #fff; color:#fff; border-radius: .5rem; padding: .3rem .6rem; cursor: pointer; }


/* === Enlarged Overview Grid & Reset === */
.ap-grid{
  height: calc(100vh - 7.5rem);
  overflow: auto;
  display: grid;
  align-items: stretch;                 /* stretch cells' content */
  grid-template-columns: repeat(6, minmax(180px, 1fr));
  gap: 16px;
  padding: 16px 20px;
}
.ap-cell{
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;    /* square cell ensures height */
  cursor: pointer;
  background: #111;
  border-radius: .25rem;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset;
}
.ap-cell img{
  position: static;          /* no absolute -> participates in layout */
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0 !important;
  filter: none;
}

/* Hover affordance */
.ap-cell:hover{ outline: 2px solid rgba(255,255,255,.2); outline-offset: 0; }

/* Responsive columns */
@media (max-width: 1400px){
  .ap-grid{
  height: calc(100vh - 7.5rem);
  overflow: auto;
  display: grid;
  align-items: stretch;                 /* stretch cells' content */
  grid-template-columns: repeat(6, minmax(180px, 1fr));
  gap: 16px;
  padding: 16px 20px;
}
}
@media (max-width: 1100px){
  .ap-grid{
  height: calc(100vh - 7.5rem);
  overflow: auto;
  display: grid;
  align-items: stretch;                 /* stretch cells' content */
  grid-template-columns: repeat(6, minmax(180px, 1fr));
  gap: 16px;
  padding: 16px 20px;
}
}
@media (max-width: 800px){
  .ap-grid{
  height: calc(100vh - 7.5rem);
  overflow: auto;
  display: grid;
  align-items: stretch;                 /* stretch cells' content */
  grid-template-columns: repeat(6, minmax(180px, 1fr));
  gap: 16px;
  padding: 16px 20px;
}
}
@media (max-width: 600px){
  .ap-grid{
  height: calc(100vh - 7.5rem);
  overflow: auto;
  display: grid;
  align-items: stretch;                 /* stretch cells' content */
  grid-template-columns: repeat(6, minmax(180px, 1fr));
  gap: 16px;
  padding: 16px 20px;
}
}


/* === Fix: ensure images fill the grid cells === */
.ap-grid{ align-content: start; }

.ap-cell{
  display: flex;                 /* let content stretch */
  align-items: stretch;
  justify-content: stretch;
  padding: 0;                    /* no inner padding */
}

.ap-cell img{
  flex: 1 1 auto;
  width: 100% !important;        /* override any global img rules */
  height: 100% !important;       /* fill the square */
  max-width: none !important;    /* don't shrink due to global max-width */
  max-height: none !important;
  object-fit: cover;
  display: block;
  border: 0;
  border-radius: 0 !important;
  box-shadow: none;
}


/* === Robust square grid: padding-top trick === */
.ap-grid{
  height: calc(100vh - 7.5rem);
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(6, minmax(180px, 1fr));
  gap: 16px;
  padding: 16px 20px;
  align-content: start;
}

.ap-cell{
  position: relative;
  display: block;
  width: 100%;
  cursor: pointer;
  background: #111;
  border-radius: .25rem;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset;
}

/* Reserve square height independent of browser aspect-ratio quirks */
.ap-cell::before{
  content: "";
  display: block;
  padding-top: 100%; /* square */
}

/* Fill the square */
.ap-cell img{
  position: absolute !important;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  border-radius: 0 !important;
  max-width: none !important;
  max-height: none !important;
}

/* Hover outline */
.ap-cell:hover{ outline: 2px solid rgba(255,255,255,.2); outline-offset: 0; }

/* Responsive columns */
@media (max-width: 1400px){
  .ap-grid{ grid-template-columns: repeat(5, minmax(160px, 1fr)); }
}
@media (max-width: 1100px){
  .ap-grid{ grid-template-columns: repeat(4, minmax(150px, 1fr)); }
}
@media (max-width: 800px){
  .ap-grid{ grid-template-columns: repeat(3, minmax(140px, 1fr)); }
}
@media (max-width: 600px){
  .ap-grid{ grid-template-columns: repeat(2, minmax(140px, 1fr)); }
}


/* === ALL-PHOTOS OVERVIEW HOTFIX (inline to bypass cache) === */
.allphotos-overview .ap-grid{
  height: calc(100vh - 7.5rem);
  overflow: auto;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(180px, 1fr)) !important;
  gap: 16px !important;
  padding: 16px 20px !important;
  align-content: start !important;
}

.allphotos-overview .ap-cell{
  position: relative !important;
  display: block !important;
  width: 100% !important;
  overflow: hidden !important;
  background: #111 !important;
  border-radius: .25rem !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset !important;
}

.allphotos-overview .ap-cell::before{
  content: "" !important;
  display: block !important;
  padding-top: 100% !important;
}

.allphotos-overview .ap-cell img{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  display: block !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}


/* === Hard fix: fixed-height cells to avoid collapse === */
.allphotos-overview .ap-grid{
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 14px !important;
  padding: 14px 18px !important;
  align-content: start !important;
}

.allphotos-overview .ap-cell{
  position: relative !important;
  display: block !important;
  height: 220px !important;     /* fixed height for square-ish thumbnails */
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  background: #111 !important;
  border-radius: .25rem !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset !important;
}

.allphotos-overview .ap-cell::before{ content:none !important; } /* disable previous square trick */

.allphotos-overview .ap-cell img{
  position: static !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  display: block !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}


/* === Close-Button oben rechts fixieren === */
.allphotos-overview .ap-close {
  position: fixed !important;
  top: 1rem !important;
  right: 1rem !important;
  z-index: 10000 !important;
  background: rgba(0,0,0,0.7) !important;
  border: 1px solid #fff !important;
  color: #fff !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  border-radius: .5rem !important;
  padding: .4rem .7rem !important;
  cursor: pointer !important;
  transition: background .2s ease-in-out;
}
.allphotos-overview .ap-close:hover {
  background: rgba(255,255,255,0.25) !important;
}