/* Q3Rally Frontend Styles v0.9.2 (scoped) */
.q3r-mini-gallery{
  --q3r-gap: var(--q3r-grid-gap, 8px);
  --q3r-h:   var(--q3r-slide-h,  520px);
  --q3r-th:  var(--q3r-slide-th, 84px);
  --q3r-cols:var(--q3r-grid-cols,3);
  font:inherit;
}

/* Toolbar */
.q3r-mg-toolbar{display:flex;align-items:center;justify-content:space-between;margin:0 0 .6rem;gap:.6rem;flex-wrap:wrap}

/* Mode-Toggle Buttons */
.q3r-mg-mode-toggle{display:inline-flex;gap:4px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:3px}
.q3r-mg-mode-btn{
  appearance:none;border:none;border-radius:7px;
  width:34px;height:30px;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;color:#8a93a8;cursor:pointer;font-size:16px;
  transition:background .15s,color .15s;
}
.q3r-mg-mode-btn:hover{color:#e2e8f0}
.q3r-mg-mode-btn.is-active{background:rgba(17,81,211,.75);color:#fff;box-shadow:0 2px 8px rgba(17,81,211,.3)}

/* Slideshow Toggle */
.q3r-mg-switch{
  display:inline-flex;align-items:center;gap:.5rem;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:#e2e8f0;border-radius:999px;padding:.3rem .75rem;
  border:1px solid rgba(255,255,255,.15);
  font-size:.85rem;font-weight:600;letter-spacing:.02em;
  box-shadow:0 2px 12px rgba(0,0,0,.2);
  cursor:pointer;transition:background .15s,border-color .15s;
}
.q3r-mg-switch:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.25)}
.q3r-mg-switch input{accent-color:#1151d3}

/* Grid-Ansicht */
.q3r-mg-grid{
  display:grid;
  grid-template-columns:repeat(var(--q3r-cols), minmax(var(--q3r-grid-thumb, 200px), 1fr));
  gap:var(--q3r-gap);
}
.q3r-mg-grid-item{
  position:relative;display:block;overflow:hidden;
  border-radius:10px;border:1px solid rgba(255,255,255,.08);
  background:#0b1020;aspect-ratio:1/1;
  transition:transform .15s,box-shadow .15s,border-color .15s;
  cursor:pointer;
}
.q3r-mg-grid-item img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .2s;
}
.q3r-mg-grid-item:hover{
  transform:translateY(-2px);
  border-color:rgba(17,81,211,.6);
  box-shadow:0 6px 24px rgba(0,0,0,.4);
}
.q3r-mg-grid-item:hover img{transform:scale(1.04)}
.q3r-mg-grid-cap{
  position:absolute;bottom:0;left:0;right:0;
  padding:.4rem .6rem;
  background:rgba(11,16,32,.8);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  color:#e2e8f0;font-size:.8rem;
  transform:translateY(100%);transition:transform .2s;
}
.q3r-mg-grid-item:hover .q3r-mg-grid-cap{transform:translateY(0)}

/* Hauptbild */
.q3r-mg-main{
  position:relative;border-radius:16px;overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  background:#0b1020;margin-bottom:12px;
  box-shadow:0 8px 32px rgba(0,0,0,.4);
}
.q3r-mg-main img{display:block;width:100%;height:var(--q3r-h);object-fit:contain;background:#0b1020}
.q3r-mg-caption{
  padding:.5rem .85rem;color:#bec3cf;
  background:rgba(11,16,32,.75);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-top:1px solid rgba(255,255,255,.07);
  font-size:.9rem;
}

/* Thumbnail-Leiste */
.q3r-mg-thumbs{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px}
.q3r-mg-track{
  display:flex;gap:var(--q3r-gap);overflow:auto;padding:4px;scroll-behavior:smooth;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent;
}
.q3r-mg-track::-webkit-scrollbar{height:6px}
.q3r-mg-track::-webkit-scrollbar-track{background:transparent}
.q3r-mg-track::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:4px}
.q3r-mg-track::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.28)}

/* Thumbnails */
.q3r-mg-thumb{
  display:block;flex:0 0 auto;padding:0;background:transparent;cursor:pointer;
  border-radius:10px;border:2px solid transparent;
  transition:transform .15s,border-color .15s,box-shadow .15s;
  overflow:hidden;
}
.q3r-mg-thumb img{display:block;border-radius:8px;height:var(--q3r-th);width:auto;}
.q3r-mg-thumb:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.35)}
.q3r-mg-thumb.is-active{
  border-color:#1151d3;
  box-shadow:0 0 0 3px rgba(17,81,211,.25),0 4px 16px rgba(0,0,0,.3);
}

/* Pfeile */
.q3r-mg-nav{
  appearance:none;border:1px solid rgba(255,255,255,.15);border-radius:999px;
  width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:#e2e8f0;cursor:pointer;
  box-shadow:0 2px 12px rgba(0,0,0,.25);
  transition:background .15s,border-color .15s,transform .15s;
  font-size:18px;
}
.q3r-mg-nav:hover{
  background:#1151d3;border-color:#1151d3;color:#fff;
  transform:scale(1.08);box-shadow:0 4px 18px rgba(17,81,211,.4);
}

/* Lightbox */
.q3r-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.88);display:none;align-items:center;justify-content:center;z-index:9999;flex-direction:column;gap:0}
.q3r-lightbox.is-open{display:flex}
.q3r-lightbox__img-wrap{max-width:min(96vw,1400px);max-height:calc(90vh - 110px);position:relative;display:flex;align-items:center;justify-content:center}
.q3r-lightbox__img-wrap img{width:auto;height:auto;max-width:100%;max-height:calc(90vh - 110px);display:block;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.5)}
/* Meta: Titel + Caption */
.q3r-lightbox__meta{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:8px 16px 0;max-width:min(96vw,900px);text-align:center;
}
.q3r-lightbox__title{color:#f1f5f9;font-size:.95rem;font-weight:600;}
.q3r-lightbox__caption{color:#94a3b8;font-size:.85rem;}
/* Controls */
.q3r-lightbox__controls{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 0 6px;flex-wrap:wrap}
.q3r-lightbox__counter{color:#94a3b8;font-size:.82rem;font-weight:600;min-width:48px;text-align:center;}
.q3r-lightbox__close,.q3r-lightbox__prev,.q3r-lightbox__next,
.q3r-lightbox__fs,.q3r-lightbox__dl,.q3r-lightbox__sh{
  position:static;transform:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.1);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:999px;
  cursor:pointer;font-size:16px;line-height:1;
  box-shadow:0 2px 12px rgba(0,0,0,.3);
  transition:background .15s,border-color .15s,transform .15s;
}
.q3r-lightbox__prev,.q3r-lightbox__next{width:48px;height:48px;font-size:22px;}
.q3r-lightbox__close{width:38px;height:38px;font-size:15px;background:rgba(255,255,255,.07);}
.q3r-lightbox__fs,.q3r-lightbox__dl,.q3r-lightbox__sh{width:auto;height:36px;font-size:.82rem;background:rgba(255,255,255,.07);padding:0 .7rem;gap:.3rem;}
.q3r-lightbox__dl span,.q3r-lightbox__sh span{font-size:.82rem;font-weight:600;}
.q3r-lightbox__prev:hover,.q3r-lightbox__next:hover{background:#1151d3;border-color:#1151d3;transform:scale(1.08)}
.q3r-lightbox__close:hover{background:rgba(220,40,40,.75);border-color:rgba(220,40,40,.5);transform:scale(1.08)}
.q3r-lightbox__fs:hover,.q3r-lightbox__dl:hover,.q3r-lightbox__sh:hover{background:rgba(255,255,255,.2);transform:scale(1.08)}

/* Single image wrapper */
.q3r-single-img{margin:.25rem 0}
.q3r-single-img__img{
  display:inline-block;max-width:100%;height:auto;
  border-radius:12px;border:1px solid rgba(255,255,255,.1);
  background:#0b1020;box-shadow:0 4px 20px rgba(0,0,0,.3);
}

@media (max-width:720px){
  .q3r-mg-nav{display:none}
  .q3r-mg-track{gap:6px}
  .q3r-mg-main img{height:min(var(--q3r-h),60vh)}
  .q3r-mg-grid{grid-template-columns:repeat(2,1fr)}
}


/* ---- Gallery Tabs (Shortcode: q3r_gallery_tabs) ---- */
.q3r-gallery-tabs-wrap { font: inherit; }

.q3r-gallery-tabs {
  position: sticky;
  top: var(--q3r-sticky-top, 0px);
  z-index: 50;
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin: 0 0 1rem;
  padding: .3rem .3rem .35rem;
  background: rgba(11,16,32,.92);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.1);
  border-radius: 10px 10px 0 0;
  overflow-x: auto;
  scrollbar-width: thin;
  box-shadow: 0 2px 12px rgba(0,0,0,.2);
}
.q3r-gallery-tab {
  appearance: none; border: none; background: transparent;
  color: #8a93a8; padding: .45rem .85rem;
  border-radius: 7px; font-weight: 600; font-size: .9rem;
  cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s;
  border-bottom: 2px solid transparent;
  display: inline-flex; align-items: center; gap: .45rem;
}
.q3r-tab-cover {
  width: 22px; height: 22px; border-radius: 4px;
  object-fit: cover; opacity: .7;
  transition: opacity .15s;
}
.q3r-gallery-tab:hover .q3r-tab-cover,
.q3r-gallery-tab.is-active .q3r-tab-cover { opacity: 1; }
.q3r-tab-badge {
  background: rgba(255,255,255,.12); color: #8a93a8;
  font-size: .72rem; font-weight: 700;
  padding: 1px 6px; border-radius: 20px; min-width: 20px; text-align: center;
  transition: background .15s, color .15s;
}
.q3r-gallery-tab.is-active .q3r-tab-badge {
  background: rgba(255,255,255,.25); color: #fff;
}
.q3r-gallery-tab:hover { color: #e2e8f0; }
.q3r-gallery-tab.is-active {
  background: rgba(17,81,211,.7);
  color: #fff;
  border-bottom-color: #1151d3;
}
.q3r-gallery-tab:focus-visible { outline: 2px solid #1151d3; outline-offset: 2px; }
.q3r-gallery-tab-panel { margin-bottom: 1.5rem; }
.q3r-gallery-tab-panel.is-fading-in {
  animation: q3r-fade-in calc(var(--q3r-tab-fade, 1) * 0.3s) ease both;
}
@keyframes q3r-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (max-width: 600px) {
  .q3r-gallery-tabs { border-radius: 8px 8px 0 0; gap: .3rem; }
  .q3r-gallery-tab { padding: .4rem .65rem; font-size: .85rem; }
}