.gdrive-grid{display:grid;gap:16px}
.gdrive-cols-2{grid-template-columns:repeat(2,1fr)}
.gdrive-cols-3{grid-template-columns:repeat(3,1fr)}
.gdrive-cols-4{grid-template-columns:repeat(4,1fr)}
.gdrive-cols-5{grid-template-columns:repeat(5,1fr)}
.gdrive-cols-6{grid-template-columns:repeat(6,1fr)}
@media (max-width:900px){.gdrive-grid{grid-template-columns:repeat(2,1fr)!important}}
@media (max-width:600px){.gdrive-grid{grid-template-columns:1fr!important}}
.gdrive-grid-item{margin:0}
.gdrive-grid-thumb{padding:0;border:0;background:transparent;cursor:pointer;display:block;width:100%;position:relative}
.gdrive-grid-thumb img{width:100%;height:auto;display:block;object-fit:cover;aspect-ratio:1/1;border-radius:6px}
.gdg-play-badge{position:absolute;right:8px;bottom:8px;font-size:20px;background:rgba(0,0,0,.65);color:#fff;border-radius:20px;padding:4px 8px;line-height:1}
.gdrive-grid-caption{margin-top:6px;font-size:.95rem;line-height:1.3}
.gdg-artist{font-weight:600}.gdg-title{opacity:.9}

/* Modal */
.gdrive-grid-modal{position:fixed;inset:0;display:none;z-index:999999}
.gdrive-grid-modal[aria-hidden=false]{display:block}
.gdrive-grid-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.75)}
.gdrive-grid-modal-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:94vw;max-height:94vh;margin:0;color:#fff}
.gdrive-grid-modal-media img,.gdrive-grid-modal-media video{max-width:95vw;max-height:85vh;width:auto;height:auto;display:block;margin:0 auto;border-radius:8px}
.gdrive-grid-modal-media video{background:#000}

.gdrive-grid-modal-close{position:absolute;top:-12px;right:-12px;width:36px;height:36px;border-radius:50%;border:none;background:#fff;color:#000;font-size:22px;cursor:pointer}
.gdrive-grid-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:none;border-radius:50%;background:rgba(255,255,255,.9);color:#000;font-size:26px;cursor:pointer}
.gdrive-grid-prev{left:-56px}.gdrive-grid-next{right:-56px}
@media (max-width:900px){.gdrive-grid-prev{left:8px}.gdrive-grid-next{right:8px}}
.gdrive-grid-sentinel{width:100%;height:1px}

/* Caption right link icon */
.gdg-download-link{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.15);transition:transform .15s ease,background .15s ease;color:#fff}
.gdg-download-link:hover{transform:scale(1.05);background:rgba(255,255,255,.25)}
.gdg-download-link svg{display:block;fill:currentColor}


/* --- Stylish caption bar & spacious modal --- */
.gdrive-grid-modal-content{
  padding: 24px 16px 28px;   /* space to top/bottom */
  box-sizing: border-box;
}
.gdrive-grid-modal-media{
  display:flex;
  align-items:center;
  justify-content:center;
}
.gdrive-grid-modal-media img,
.gdrive-grid-modal-media video{
  max-height: 74vh;          /* leave room for caption */
  max-width: 94vw;
  width:auto;
  height:auto;
  object-fit: contain;
}




.gdg-download-link{
  color:#fff;                 /* white icon */
  background: rgba(255,255,255,.12);
  width: 36px;
  height: 36px;
  border-radius: 10px;
}
.gdg-download-link:hover{
  background: rgba(255,255,255,.2);
  transform: translateY(-1px);
}


/* --- Overlay caption sits on the image bottom, 80% transparent (0.2 opacity) --- */
.gdrive-grid-modal-content{ padding: 16px 12px; }
.gdrive-grid-modal-media{ position: relative; display:flex; align-items:center; justify-content:center; }
.gdrive-grid-modal-media img,
.gdrive-grid-modal-media video{ max-height: 76vh; max-width: 94vw; }



/* Typography inside caption */
.gdg-cap-text{ display: flex; flex-direction: column; line-height: 1.35; }
.gdg-cap-artist{ font-size: .9rem; opacity: .9; }
.gdg-cap-title{ font-size: 1.1rem; font-weight: 700; }

/* Icon style stays white */
.gdg-download-link{ color:#fff; background: rgba(255,255,255,0.12); width:36px; height:36px; border-radius:10px; }
.gdg-download-link:hover{ background: rgba(255,255,255,0.22); transform: translateY(-1px); }


/* Updated overlay caption: 20% transparent black background and match image width */
.gdrive-grid-modal-cap{
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.8); /* 20% transparent */
  color: #fff;
  margin: 0;
  padding: 14px 18px;
  border-radius: 0 0 12px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%; /* match image width */
  box-sizing: border-box;
}
.gdrive-grid-modal-media{ position: relative; display:flex; align-items:center; justify-content:center; }
.gdrive-grid-modal-media img,
.gdrive-grid-modal-media video{ max-height: 76vh; max-width: 94vw; display:block; }


/* Nav buttons disabled state */
.gdrive-grid-nav.is-disabled{opacity:.35;pointer-events:none}

/* Loader bar (indeterminate) */
.gdg-loader{position:absolute;left:0;right:0;top:0;height:3px;background:rgba(255,255,255,.2);overflow:hidden;border-radius:2px;display:none}
.gdg-loader::after{content:'';position:absolute;left:-30%;width:30%;top:0;bottom:0;background:#fff;animation:gdg-slide 1.2s linear infinite}
@keyframes gdg-slide{0%{left:-30%}50%{left:50%}100%{left:100%}}

/* Place loader above the image content area */
.gdrive-grid-modal-content{position:relative}


/* Layering & sizing fixes */
.gdrive-grid-modal-content{position:relative}
.gdrive-grid-modal-media{position:relative; display:flex; align-items:center; justify-content:center;}
.gdrive-grid-modal-cap{
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  background: rgba(0,0,0,0.8); /* 20% transparent */
  color:#fff;
  margin:0;
  padding:14px 18px;
  border-radius:0 0 12px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  width:auto;              /* JS setzt exakte Breite = Medienbreite */
  max-width:94vw;
  box-sizing:border-box;
  z-index:2;
}
.gdrive-grid-nav{ z-index:3; }  /* Pfeile liegen über der Caption */
.gdg-cap-text{ display:flex; flex-direction:column; line-height:1.35; }
.gdg-cap-artist{ font-size:.9rem; opacity:.9; }
.gdg-cap-title{ font-size:1.1rem; font-weight:700; }

/* Ensure nav buttons are always visible inside the viewport and on top of the image */
.gdrive-grid-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;height:44px;border:none;border-radius:50%;
  background:#fff;color:#000;font-size:24px;line-height:44px;text-align:center;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  z-index:5;
}
.gdrive-grid-prev{ left:12px; }
.gdrive-grid-next{ right:12px; }
.gdrive-grid-nav.is-disabled{ opacity:.35; pointer-events:none; }

/* Caption exactly as wide as media (JS sets width) and centered at bottom */
.gdrive-grid-modal-media{ position:relative; }
.gdrive-grid-modal-cap{
  position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  padding:14px 18px; border-radius:0 0 12px 12px;
  background:rgba(0,0,0,.8); color:#fff; display:flex; gap:16px;
  align-items:center; justify-content:space-between; width:auto; max-width:none;
  z-index:4;
}