/* ==========================================================================
   DRIVE GALLERY – MASONRY LAYOUT (CENTERED, AUTO-FITTING)
   ========================================================================== */

/*
  Key change:
  - Use column-width instead of fixed column-count.
  - Center the gallery with max-width + margin:auto.
  This keeps albums with 2–3 images centered AND keeps large albums centered too.
*/
.drive-gallery{
  column-width: 280px;         /* target column width */
  column-gap: 14px;

  max-width: 1200px;           /* overall gallery width on desktop */
  margin: 0 auto;              /* center gallery block */
  padding: 0 14px;             /* keep content away from edges */
}

/* Each gallery item behaves like a masonry block */
.drive-gallery > a{
  display: inline-block;
  width: 100%;
  margin: 0 0 14px;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}

/* Thumbnail wrapper */
.drive-thumb-wrap{
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #111;
  border-radius: 10px;

  /* avoids “collapse” while thumbs load */
  min-height: 160px;
}

/* Thumbnails keep natural aspect ratio */
.drive-thumb{
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;     /* change to cover if you want cropping */
  object-position: center;
  transition: opacity 200ms ease;
}

/* Hide the image until it's loaded (skeleton visible) */
.drive-thumb.is-loading{
  opacity: 0;
}

/* Video badge */
.drive-thumb-wrap .badge{
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  letter-spacing: 0.5px;
}

/* Play icon overlay */
.drive-thumb-wrap .play{
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  display: grid;
  place-items: center;
}

.drive-thumb-wrap .play::before{
  content: "";
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
}

.drive-thumb-wrap .play::after{
  content: "";
  margin-left: 4px;
  width: 0;
  height: 0;
  border-left: 16px solid #fff;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  position: absolute;
}

/* Optional subtle hover */
.drive-thumb-wrap:hover{
  transform: translateY(-1px);
  transition: transform 120ms ease;
}


/* ==========================================================================
   THUMBNAIL LOADING UI (SKELETON + SPINNER)
   ========================================================================== */

.drive-thumb-wrap::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.06),
    rgba(255,255,255,0.14),
    rgba(255,255,255,0.06)
  );
  transform: translateX(-100%);
  animation: driveShimmer 1.2s infinite;
  opacity: 0;
  pointer-events: none;
}

.drive-thumb-wrap::after{
  content: "";
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.35);
  border-top-color: rgba(255,255,255,0.9);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: driveSpin 0.9s linear infinite;
  opacity: 0;
  pointer-events: none;
}

/* Show overlays while loading */
.drive-thumb-wrap.loading::before,
.drive-thumb-wrap.loading::after{
  opacity: 1;
}

@keyframes driveShimmer{
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes driveSpin{
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce){
  .drive-thumb-wrap::before,
  .drive-thumb-wrap::after{
    animation: none;
  }
}


/* ==========================================================================
   GLIGHTBOX MODAL – SIZING + ZOOM FIX
   ========================================================================== */

:root{
  --glb-ui-y: 120px;  /* reserved vertical space */
  --glb-ui-x: 120px;  /* reserved horizontal space */
}

/* Make sure wrappers don't clip */
.glightbox-container .gslide-inner-content,
.glightbox-container .ginner-container,
.glightbox-container .gslide-media{
  overflow: visible !important;
}

/* Center everything */
.glightbox-container .ginner-container,
.glightbox-container .gslide-media{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Constrain ONLY in normal (not-zoomed) mode */
.glightbox-container .gslide:not(.zoomed) .gslide-media.gslide-image{
  width: calc(100dvw - var(--glb-ui-x)) !important;
  height: calc(100dvh - var(--glb-ui-y)) !important;
  max-width: calc(100dvw - var(--glb-ui-x)) !important;
  max-height: calc(100dvh - var(--glb-ui-y)) !important;
}

/* Allow zoomed state to expand naturally */
.glightbox-container .gslide.zoomed .gslide-media.gslide-image{
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
}

/* Image element scaling */
.glightbox-container .gslide-media.gslide-image > img{
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
}

/* When zoomed, allow the image to exceed the viewport constraints */
.glightbox-container .gslide.zoomed .gslide-media.gslide-image > img{
  max-width: none !important;
  max-height: none !important;
  object-fit: unset !important;
  cursor: zoom-out;
}

/* Improve affordance */
.glightbox-container .gslide:not(.zoomed) .gslide-media.gslide-image > img{
  cursor: zoom-in;
}

/* EXTERNAL / IFRAME (Drive videos) */
.glightbox-container .gslide-media.gslide-external,
.glightbox-container .gslide-media.gslide-iframe{
  width: calc(100dvw - var(--glb-ui-x)) !important;
  height: calc(100dvh - var(--glb-ui-y)) !important;
  max-width: calc(100dvw - var(--glb-ui-x)) !important;
  max-height: calc(100dvh - var(--glb-ui-y)) !important;
}

/* Fill the box */
.glightbox-container .gslide-media.gslide-external iframe,
.glightbox-container .gslide-media.gslide-iframe iframe{
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  display: block !important;
}

/* Mobile tweaks */
@media (max-width: 768px){
  :root{
    --glb-ui-y: 140px;
    --glb-ui-x: 40px;
  }

  .drive-gallery{
    column-width: 220px;
    max-width: 100%;
    padding: 0 10px;
  }
}
/* ==========================================================================
   SMALL-ALBUM CENTERING (1–4 items)
   Switch from columns masonry → centered grid for tiny albums
   ========================================================================== */

/* 1–4 items: use a centered grid instead of columns */
.drive-gallery:has(> a:nth-child(-n+4):last-child) {
  column-width: auto;
  column-gap: 0;
  max-width: 900px;         /* keeps small albums from looking too wide */
  margin: 0 auto;

  display: grid;
  gap: 14px;
  justify-content: center;
  grid-template-columns: repeat(2, minmax(260px, 360px));
}

/* 1 item: single centered column */
.drive-gallery:has(> a:nth-child(1):last-child) {
  grid-template-columns: minmax(260px, 520px);
}

/* 2 items: two centered columns */
.drive-gallery:has(> a:nth-child(2):last-child) {
  grid-template-columns: repeat(2, minmax(260px, 360px));
}

/* 3 items: still 2 columns; third wraps and remains centered */
.drive-gallery:has(> a:nth-child(3):last-child) {
  grid-template-columns: repeat(2, minmax(260px, 360px));
}

/* 4 items: clean 2x2 centered grid */
.drive-gallery:has(> a:nth-child(4):last-child) {
  grid-template-columns: repeat(2, minmax(260px, 360px));
}

/* Make sure items behave properly in grid mode */
.drive-gallery:has(> a:nth-child(-n+4):last-child) > a {
  margin: 0;                /* grid gap handles spacing */
  width: 100%;
}