/* ================================================================
   VDE Event Albums – Folder-style frontend theme
   ================================================================ */

.vde-albums {
  --vde-fg:         #111111;
  --vde-muted:      #5b5b5b;
  --vde-border:     #e7e7e7;
  --vde-gap:        24px;
  --vde-folder-bg:  #FBBF24;  /* warm amber – folder body  */
  --vde-folder-tab: #F59E0B;  /* slightly darker – folder tab */

  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)); }

/* ── Album card (button reset) ──────────────────────────────── */
.vde-album-card {
  -webkit-appearance: none !important;
  appearance:         none !important;
  border:       none !important;
  background:   transparent !important;
  box-shadow:   none !important;
  padding:      0 !important;
  margin:       0 !important;
  text-align:   left !important;
  cursor:       pointer !important;
  color:        var(--vde-fg) !important;
  text-decoration: none !important;
  display:      flex !important;
  flex-direction: column !important;
  gap:          10px !important;
  overflow:     visible !important;  /* allow folder tab pseudo-element to show */
  white-space:  normal !important;
}
.vde-album-card:focus         { outline: none !important; }
.vde-album-card:focus-visible .vde-album-preview {
  outline:        2px solid #111 !important;
  outline-offset: 3px !important;
}

/* ── Folder shape ───────────────────────────────────────────── */
.vde-album-preview {
  position:      relative !important;
  margin-top:    22px !important;       /* clears space for the tab */
  background:    var(--vde-folder-bg) !important;
  border-radius: 0 16px 16px 16px !important; /* no top-left = classic folder */
  padding:       12px !important;
  border:        none !important;
  overflow:      visible !important;
  box-shadow:
    0 6px 20px rgba(0,0,0,.14),
    0 2px 6px  rgba(0,0,0,.10) !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
}

/* Folder tab — sits in the margin-top gap above the folder body */
.vde-album-preview::before {
  content:       '' !important;
  position:      absolute !important;
  top:           -22px !important;
  left:          0 !important;
  width:         42% !important;
  height:        24px !important;
  background:    var(--vde-folder-tab) !important;
  border-radius: 8px 8px 0 0 !important;
}

.vde-album-card:hover .vde-album-preview {
  transform:  translateY(-4px) !important;
  box-shadow:
    0 14px 36px rgba(0,0,0,.18),
    0 4px  10px rgba(0,0,0,.12) !important;
}

/* Loading state */
.vde-album-card.vde-loading .vde-album-preview {
  opacity: 0.65 !important;
  cursor:  wait !important;
}

/* ── 2×2 photo mosaic inside the folder ─────────────────────── */
.vde-album-photos {
  display:               grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows:    1fr 1fr !important;
  gap:                   3px !important;
  border-radius:         10px !important;
  overflow:              hidden !important;
  aspect-ratio:          4 / 3 !important;
  background:            rgba(0,0,0,.10) !important;
}

.vde-album-photos .vde-album-img {
  position:    static !important;
  transform:   none !important;
  width:       100% !important;
  height:      100% !important;
  object-fit:  cover !important;
  display:     block !important;
  max-width:   none !important;
  border:      none !important;
  border-radius: 0 !important;
  box-shadow:  none !important;
  background:  #d4a840 !important;
  opacity:     1 !important;
}

/* 1 photo → full mosaic */
.vde-album-photos.vde-photos-1 .vde-album-img {
  grid-column: 1 / -1 !important;
  grid-row:    1 / -1 !important;
}

/* 2 photos → side by side, each full height */
.vde-album-photos.vde-photos-2 .vde-album-img {
  grid-row: 1 / -1 !important;
}

/* 3 photos → first spans full left column, two stack on right */
.vde-album-photos.vde-photos-3 .vde-album-img:first-child {
  grid-row: 1 / -1 !important;
}

/* 4 photos → natural 2×2 (no extra rule needed) */

/* Empty album placeholder */
.vde-album-empty {
  grid-column: 1 / -1;
  grid-row:    1 / -1;
  display:     flex;
  align-items: center;
  justify-content: center;
  color:       rgba(0,0,0,.4);
  font-size:   13px;
}

/* ── Photo count badge (bottom-right of folder) ─────────────── */
.vde-photo-count {
  position:      absolute !important;
  bottom:        10px !important;
  right:         10px !important;
  background:    rgba(0,0,0,.45) !important;
  color:         #fff !important;
  font-size:     11px !important;
  font-weight:   700 !important;
  padding:       3px 8px !important;
  border-radius: 20px !important;
  line-height:   1.4 !important;
  letter-spacing: .02em !important;
  pointer-events: none !important;
}

/* ── Album metadata (title + date below folder) ─────────────── */
.vde-album-meta {
  display:        flex !important;
  flex-direction: column !important;
  gap:            3px !important;
  min-width:      0 !important;
  padding:        0 2px !important;
}

.vde-album-title {
  font-size:    14px !important;
  font-weight:  700 !important;
  line-height:  1.3 !important;
  color:        #111 !important;
  display:      block !important;
  max-width:    100% !important;
  white-space:  normal !important;
  overflow-wrap: anywhere !important;
  word-break:   break-word !important;
}

.vde-album-date {
  font-size: 12px !important;
  color:     var(--vde-muted) !important;
}

/* ── No albums message ──────────────────────────────────────── */
.vde-albums-empty {
  grid-column: 1 / -1;
  text-align:  center;
  padding:     48px 20px;
  color:       var(--vde-muted);
}

/* ================================================================
   Modal slideshow
   ================================================================ */
.vde-modal {
  position:   fixed;
  inset:      0;
  z-index:    99999;
  display:    none;
  align-items: center;
  justify-content: center;
  padding:    18px;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(4px);
}
.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 24px 80px rgba(0,0,0,.35) !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 16px;
  border-bottom:   1px solid var(--vde-border);
  flex-shrink:     0;
}

.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 12px !important;
  cursor:        pointer !important;
  text-decoration: none !important;
  font-size:     16px !important;
  line-height:   1 !important;
  flex-shrink:   0;
}
.vde-icon-btn:hover { box-shadow: 0 4px 12px rgba(0,0,0,.10) !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;
}

.vde-stage {
  position:        relative;
  flex:            1 1 auto;
  min-height:      0;
  border:          1px solid var(--vde-border);
  border-radius:   14px;
  overflow:        hidden;
  background:      #f9f9f9;
  display:         flex;
  align-items:     center;
  justify-content: center;
}
.vde-stage img {
  width:       100%;
  height:      100%;
  object-fit:  contain;
  background:  #f9f9f9;
  display:     block;
}

.vde-nav {
  position:        absolute;
  inset:           0;
  pointer-events:  none;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0 12px;
}
.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;
  font-size:     22px !important;
  box-shadow:    0 2px 8px rgba(0,0,0,.08) !important;
}
.vde-nav button:hover { box-shadow: 0 8px 22px rgba(0,0,0,.14) !important; }

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

/* Thumbnail strip */
.vde-thumbs {
  display:    flex;
  gap:        6px;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  height:     70px !important;
  padding:    4px 2px !important;
  align-items: center !important;
  scrollbar-width:    none !important;
  -ms-overflow-style: none !important;
  flex-shrink: 0;
}
.vde-thumbs::-webkit-scrollbar { display: none !important; }

.vde-thumbs button {
  -webkit-appearance: none !important;
  appearance: none !important;
  border:        2px solid transparent !important;
  border-radius: 8px !important;
  padding:       0 !important;
  margin:        0 !important;
  line-height:   0 !important;
  width:         64px !important;
  height:        58px !important;
  overflow:      hidden !important;
  background:    #ececec !important;
  cursor:        pointer;
  flex:          0 0 auto;
  transition:    border-color .12s ease !important;
}
.vde-thumbs img {
  width:      100% !important;
  height:     100% !important;
  object-fit: cover !important;
  display:    block !important;
}
.vde-thumbs button[aria-current="true"] {
  border-color: #111 !important;
}
.vde-thumbs button:focus         { outline: none !important; }
.vde-thumbs button:focus-visible {
  outline:        2px solid #111 !important;
  outline-offset: 2px !important;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .vde-albums { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 600px) {
  .vde-albums { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .vde-album-title { font-size: 13px !important; }
}
@media (max-width: 340px) {
  .vde-albums { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
}