.gawpg-wrapper{box-sizing:border-box;width:100%;flex:1 1 100%;min-width:0;font-family:inherit;line-height:1.5}
.gawpg-wrapper *,.gawpg-wrapper *::before,.gawpg-wrapper *::after{box-sizing:inherit}

/* Effective column count per breakpoint. The renderers set the inputs as
   inline vars (--gawpg-cols, and optionally --gawpg-cols-tablet /
   --gawpg-cols-mobile from the widget's responsive control or shortcode
   atts); the stylesheet resolves which one applies at the current width.
   Inline styles can't be overridden by media queries, hence the
   indirection. Fallbacks reproduce the historical behavior (tablet
   inherits desktop, mobile forces 2). Shared by grid and Pro masonry. */
.gawpg-wrapper{--gawpg-cols-eff:var(--gawpg-cols,4)}
@media (max-width:1024px){.gawpg-wrapper{--gawpg-cols-eff:var(--gawpg-cols-tablet,var(--gawpg-cols,4))}}
@media (max-width:768px){.gawpg-wrapper{--gawpg-cols-eff:var(--gawpg-cols-mobile,2)}}

/* align-items:start — a grid row is as tall as its tallest item; without
   this, engines may stretch shorter items past their declared
   aspect-ratio (visible with aspect "original" or 16:9 video thumbs
   mixed into a 1:1 grid), which re-crops the image differently at each
   viewport width. Items keep their own proportional height instead. */
.gawpg-wrapper.gawpg-layout-grid{display:grid;width:100%;flex:1 1 100%;min-width:0;align-self:stretch;justify-self:stretch;box-sizing:border-box;align-items:start;gap:var(--gawpg-gap,12px);grid-template-columns:repeat(var(--gawpg-cols-eff,4),1fr)}
.gawpg-item{position:relative;margin:0;overflow:hidden;border-radius:8px;cursor:pointer}
.gawpg-item a{display:block;width:100%;height:100%;color:inherit;text-decoration:none}
.gawpg-item img{display:block;width:100%;height:100%;object-fit:cover;transform-origin:center center;transition:transform .4s ease,filter .4s ease}
.gawpg-item .gawpg-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:48px;color:#fff;background:rgba(0,0,0,.3);pointer-events:none}
.gawpg-caption{position:absolute;left:0;right:0;bottom:0;padding:8px 12px;background:linear-gradient(transparent,rgba(0,0,0,.7));color:#fff;font-size:13px;margin:0}

/* Video slide inside the PhotoSwipe lightbox (YouTube in Free; the Pro
   providers reuse the same class). The slide container spans the whole
   viewport — center the player and never let it exceed the screen. */
.pswp .gawpg-pswp-video{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.pswp .gawpg-pswp-video iframe{width:min(100%,1280px);aspect-ratio:16/9;height:auto;max-height:100%;border:0}

/* Hover: overlay-dark (Free default)
   — gradient overlay fades in over the whole image on hover (visible
     even when no caption is set)
   — if a caption is present, it appears in fade together with the
     gradient, sitting near the bottom of the item */
.gawpg-hover-overlay-dark .gawpg-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 15, 46, 0.55);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
  z-index: 1;
}
.gawpg-hover-overlay-dark .gawpg-item:hover::after { opacity: 1; }
.gawpg-hover-overlay-dark .gawpg-caption {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease;
  z-index: 2;
  background: transparent;
  inset: auto 0 0 0;
  padding: 16px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.gawpg-hover-overlay-dark .gawpg-item:hover .gawpg-caption {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   Album cards — Free (minimal style)
   ============================================================ */

/* Same per-breakpoint resolution as .gawpg-wrapper above; the album's
   historical defaults were 2 columns ≤768px and 1 column ≤480px, kept
   here as the fallbacks when the widget/shortcode doesn't set the
   tablet/mobile vars. */
.gawpg-album-wrapper {
  --gawpg-album-cols-eff: var(--gawpg-cols, 2);
  display: grid;
  width: 100%;
  flex: 1 1 100%;
  min-width: 0;
  align-self: stretch;
  justify-self: stretch;
  box-sizing: border-box;
  gap: var(--gawpg-gap, 16px);
  grid-template-columns: repeat(var(--gawpg-album-cols-eff, 2), 1fr);
  position: relative; /* contains the absolutely-positioned hidden block */
}

@media (max-width: 1024px) {
  .gawpg-album-wrapper {
    --gawpg-album-cols-eff: var(--gawpg-cols-tablet, var(--gawpg-cols, 2));
  }
}

@media (max-width: 768px) {
  .gawpg-album-wrapper {
    --gawpg-album-cols-eff: var(--gawpg-cols-mobile, 2);
  }
}

@media (max-width: 480px) {
  .gawpg-album-wrapper {
    --gawpg-album-cols-eff: var(--gawpg-cols-mobile, 1);
  }
}

.gawpg-album-card {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
  cursor: pointer;
  background: #f3f4f6; /* light placeholder only visible while image loads */
  min-height: 180px; /* safety net: card stays visible even if aspect-ratio fails */
}

/* KEY FIX: button must be position:absolute filling the card so its height
   comes from the card's aspect-ratio directly. Using width/height:100% on a
   <button> child does NOT reliably propagate from a parent whose height is
   computed only from aspect-ratio (especially in Elementor's preview iframe). */
.gawpg-album-card__link {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}

.gawpg-album-card__cover {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  /* var so a user-set cover size applies at rest too, not only on hover */
  background-size: var(--gawpg-cover-size, 100%);
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #f3f4f6;
  transition: background-size 0.5s ease;
}

.gawpg-album-card:hover .gawpg-album-card__cover {
  /* gentle zoom-in on hover; respects the user-set size via calc()
     by adding 5 percentage points */
  background-size: calc(var(--gawpg-cover-size, 100%) + 5%);
}

.gawpg-album-card__info {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  color: #fff;
  background: linear-gradient(180deg, transparent 40%, rgba(10, 15, 46, 0.92));
  pointer-events: none;
  z-index: 1;
}

.gawpg-album-card__count {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 99px;
  background: rgba(0, 196, 240, 0.2);
  color: #00C4F0;
  border: 1px solid rgba(0, 196, 240, 0.3);
  align-self: flex-start;
  margin-bottom: 8px;
}

.gawpg-album-card__title {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Placeholder when cover can't be resolved */
.gawpg-album-card--placeholder {
  background: linear-gradient(135deg, #4B10CC, #7B3AE0);
}

.gawpg-album-card__placeholder {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80px;
  color: rgba(255, 255, 255, 0.4);
  background: linear-gradient(135deg, #4B10CC, #7B3AE0);
  pointer-events: none;
}

/* Hide gallery wrapper visually but keep it accessible to PhotoSwipe.
   Selector is scoped to a DIRECT child of .gawpg-album-wrapper so these
   sr-only rules cannot accidentally match any other element in the page. */
.gawpg-album-wrapper > .gawpg-album-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.gawpg-album-wrapper > .gawpg-album-hidden,
.gawpg-album-wrapper > .gawpg-album-hidden * {
  pointer-events: none;
}

.gawpg-album-wrapper > .gawpg-album-hidden a {
  pointer-events: auto; /* PhotoSwipe needs to enumerate these */
}

/* (Removed) A previous "container query fallback" block declared
   container-type on .gawpg-album-wrapper and then targeted the wrapper
   itself inside @container — container queries only match against an
   ANCESTOR container, so the whole block never applied. Narrow-context
   column reduction is handled by the viewport media queries above. */

/* ============================================================
   Elementor widget-level fill: defeat centred flex Containers that
   would otherwise shrink the widget to its natural content width.
   Targets the Elementor widget element (not theme-side widgets,
   which use a different class).
   ============================================================ */
.elementor-widget.elementor-widget-global-ai-gallery,
.elementor-widget.elementor-widget-global-ai-album {
  width: 100%;
  max-width: 100%;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  min-width: 0;
}

.elementor-widget.elementor-widget-global-ai-gallery > .elementor-widget-container,
.elementor-widget.elementor-widget-global-ai-album > .elementor-widget-container {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.gawpg-album-card__desc {
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.85);
  margin: 6px 0 0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}