/* White/Black minimal theme - scoped to avoid conflicts */
.vde-albums{
  --vde-bg:#ffffff;
  --vde-fg:#111111;
  --vde-muted:#5b5b5b;
  --vde-border:#e7e7e7;
  --vde-shadow: 0 6px 22px rgba(0,0,0,.06);
  --vde-radius:14px;
  --vde-gap:16px;

  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--vde-gap);
}
.vde-albums[data-columns="1"]{ grid-template-columns: repeat(1, minmax(0, 1fr)); }
.vde-albums[data-columns="2"]{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vde-albums[data-columns="3"]{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vde-albums[data-columns="4"]{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vde-albums[data-columns="5"]{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
.vde-albums[data-columns="6"]{ grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* theme-safe button reset */
.vde-album-card{
  -webkit-appearance: none !important;
  appearance: none !important;
  border: 1px solid var(--vde-border) !important;
  background: var(--vde-bg) !important;
  color: var(--vde-fg) !important;
  border-radius: var(--vde-radius) !important;
  box-shadow: var(--vde-shadow) !important;
  padding: 14px !important;
  text-align:left !important;
  cursor:pointer !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
  display:flex !important;
  flex-direction:column !important;
  gap: 12px !important;
  text-decoration: none !important;
}
.vde-album-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(0,0,0,.08) !important;
}
/* Only show focus ring for keyboard (fix black border on click) */
.vde-album-card:focus{ outline: none !important; }
.vde-album-card:focus-visible{
  outline: 2px solid #111 !important;
  outline-offset: 3px !important;
}

.vde-album-preview{
  position:relative !important;
  border-radius: 12px !important;
  background:#fff !important;
  border:1px solid var(--vde-border) !important;
  aspect-ratio: 4/3 !important;
  overflow:hidden !important;
}
.vde-album-empty{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--vde-muted);
  font-size: 14px;
}

/* ===== Folder stack effect (3–4 images) =====
   Use strong specificity + fixed sizing to survive theme CSS.
*/
.vde-album-preview img.vde-album-img{
  position:absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: calc(100% - 18px) !important;
  height: calc(100% - 18px) !important;
  object-fit: cover !important;
  display:block !important;
  max-width:none !important;
  border:1px solid var(--vde-border) !important;
  border-radius: 12px !important;
  background:#fff !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.06) !important;
}
.vde-album-preview img.vde-layer-1{ transform: translate(0px,0px) !important; z-index:4; opacity:1 !important; }
.vde-album-preview img.vde-layer-2{ transform: translate(6px,6px) !important; z-index:3; opacity:.97 !important; }
.vde-album-preview img.vde-layer-3{ transform: translate(12px,12px) !important; z-index:2; opacity:.93 !important; }
.vde-album-preview img.vde-layer-4{ transform: translate(18px,18px) !important; z-index:1; opacity:.90 !important; }

.vde-album-meta{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.vde-album-title{
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  color: #111 !important;
}
.vde-album-date{
  font-size: 13px;
  color: var(--vde-muted) !important;
}

/* ===== Modal slideshow ===== */
.vde-modal{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display:none;
  align-items:center;
  justify-content:center;
  padding: 18px;
  background: rgba(255,255,255,.96); /* light overlay */
  backdrop-filter: blur(3px);
}
.vde-modal[aria-hidden="false"]{ display:flex; }

.vde-modal, .vde-modal *{ box-sizing:border-box !important; }

.vde-modal-card{
  width:min(1100px, 100%);
  height: min(92vh, 860px) !important;
  background: #fff !important;
  border: 1px solid var(--vde-border) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.12) !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
}
.vde-modal-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--vde-border);
}
.vde-modal-title{
  font-weight: 700;
  font-size: 14px;
  color:#111 !important;
  display:flex;
  flex-direction:column;
  gap: 2px;
  min-width: 0;
}
.vde-modal-title span:first-child{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vde-modal-title span:last-child{ font-weight:500; color:var(--vde-muted) !important; font-size: 12px; }

.vde-icon-btn{
  -webkit-appearance:none !important;
  appearance:none !important;
  border:1px solid var(--vde-border) !important;
  background:#fff !important;
  color:#111 !important;
  border-radius: 12px !important;
  padding: 8px 10px !important;
  cursor:pointer !important;
  text-decoration:none !important;
}
.vde-icon-btn:hover{ box-shadow: 0 6px 18px rgba(0,0,0,.08) !important; }

.vde-modal-body{
  display:flex;
  flex-direction:column;
  gap: 10px;
  padding: 12px;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important; /* no vertical scroll */
}
.vde-stage{
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  border: 1px solid var(--vde-border);
  border-radius: 14px;
  overflow:hidden;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
}
.vde-stage img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  background:#fff;
  display:block;
}
.vde-nav{
  position:absolute;
  inset: 0;
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 10px;
}
.vde-nav button{
  -webkit-appearance:none !important;
  appearance:none !important;
  pointer-events:auto;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border:1px solid var(--vde-border) !important;
  background: rgba(255,255,255,.92) !important;
  color:#111 !important;
  cursor:pointer;
  padding: 0 !important;
  line-height: 1 !important;
}
.vde-nav button:hover{ box-shadow: 0 10px 22px rgba(0,0,0,.10) !important; }

.vde-caption{
  font-size: 13px;
  color: var(--vde-muted) !important;
  min-height: 18px;
}

/* Thumbs: show full thumbnails, hide scrollbar UI */
.vde-thumbs{
  display:flex;
  gap: 8px;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  height: 74px !important;
  padding: 10px 2px 8px !important;
  align-items:center !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.vde-thumbs::-webkit-scrollbar{ display:none !important; }

.vde-thumbs button{
  -webkit-appearance:none !important;
  appearance:none !important;
  border:1px solid var(--vde-border) !important;
  border-radius: 12px !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0 !important;
  width: 78px !important;
  height: 58px !important;
  overflow:hidden !important;
  background:#fff !important;
  cursor:pointer;
  flex: 0 0 auto;
}
.vde-thumbs img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}
.vde-thumbs button[aria-current="true"]{
  outline: 2px solid #111 !important;
  outline-offset: 2px !important;
}
.vde-thumbs button:focus{ outline: none !important; }
.vde-thumbs button:focus-visible{
  outline: 2px solid #111 !important;
  outline-offset: 2px !important;
}

@media (max-width: 820px){
  .vde-albums{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vde-album-preview img.vde-layer-4{ display:none !important; }
}
@media (max-width: 520px){
  .vde-albums{ grid-template-columns: repeat(1, minmax(0, 1fr)); }
}

/* FIX: Long event title overflow (wrap inside card) */
.vde-albums .vde-album-card{
  white-space: normal !important;   /* theme nowrap override */
}

.vde-albums .vde-album-meta{
  min-width: 0 !important;          /* flex shrink allow */
}

.vde-albums .vde-album-title{
  display: block !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important; /* breaks long words */
  word-break: break-word !important;
  line-height: 1.25 !important;
}