.pag {
  --pag-columns-desktop: 3;
  --pag-columns-tablet: 2;
  --pag-columns-mobile: 1;
  --pag-photo-columns-desktop: 4;
  --pag-photo-columns-tablet: 3;
  --pag-photo-columns-mobile: 2;
  --pag-gap: 14px;
  --pag-radius: 8px;
  --pag-spacing: 20px;
  --pag-title-size: 30px;
  --pag-font-size: 16px;
  --pag-animation-speed: 420ms;
  --pag-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
  --pag-ratio: 4/5;
  --pag-mosaic-row-height: 190px;
  --pag-font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --pag-text: #111111;
  --pag-bg: #ffffff;

  /*
   * Basis for card-relative typography. Derived from the viewport divided by
   * the active column count, so the title follows the card and not the window.
   * JS overrides it inline with the measured card width once the grid is laid
   * out. Deliberately NOT a container query: `container-type` anywhere in the
   * card subtree stops the card's height from propagating to Elementor's flex
   * containers, which collapses the wrapper and lets the footer overlap.
   */
  --pag-title-basis: calc(6.8vw / var(--pag-columns-mobile, 1));

  position: relative;
  color: var(--pag-text, #111111);
  background: var(--pag-bg, #ffffff);
  font-family: var(--pag-font-family, "Montserrat", "Helvetica Neue", Arial, sans-serif);
  font-size: var(--pag-font-size);
  line-height: 1.45 !important;
  padding: var(--pag-spacing);
  border-radius: var(--pag-radius);
  isolation: isolate;
}

.pag * {
  box-sizing: border-box !important;
}

.pag h1,
.pag h2,
.pag h3,
.pag h4,
.pag p,
.pag figure {
  margin: 0 !important;
}

.pag img {
  display: block !important;
  border: 0 !important;
  box-shadow: none;
  max-width: 100% !important;
}

.pag__album-grid,
.pag__photo-grid {
  display: grid !important;
  gap: var(--pag-gap);
}

.pag__album-grid {
  grid-template-columns: repeat(var(--pag-columns-mobile), minmax(0, 1fr));
}

.pag__photo-grid {
  margin-top: 4px;
}

.pag--layout-grid .pag__photo-grid {
  grid-template-columns: repeat(var(--pag-photo-columns-mobile), minmax(0, 1fr));
}

.pag--layout-mosaic .pag__photo-grid {
  display: flex !important;
  flex-wrap: wrap;
  gap: 2px;
}

.pag__album-card,
.pag__photo-button,
.pag__back,
.pag__lightbox button {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Hard reset against Elementor/theme button styling collisions */
.pag .pag__album-card,
.pag .pag__photo-button,
.pag .pag__back {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
  height: auto !important;
  color: inherit !important;
  text-decoration: none !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

.pag .pag__photo-button {
  line-height: 0 !important;
}

.pag .pag__album-card * {
  font-family: inherit !important;
}

.pag__album-card {
  text-align: left !important;
  cursor: pointer !important;
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  position: relative;
}

.pag .pag__album-card .pag__album-media-wrap,
.pag .pag__album-card .pag__album-title,
.pag .pag__album-card .pag__album-description {
  display: block !important;
}

.pag__album-media-wrap,
.pag__photo-button {
  display: block;
  width: 100%;
  border-radius: var(--pag-radius);
  overflow: hidden;
  box-shadow: var(--pag-shadow);
}

.pag__album-media,
.pag__photo-button img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  transition: transform var(--pag-animation-speed) ease, opacity var(--pag-animation-speed) ease;
}

.pag__album-media-wrap {
  aspect-ratio: var(--pag-ratio);
  position: relative;
}

/* Cover must fill the whole ratio box, otherwise the light gradient
   (and the dark title on it) ends up over empty background. */
.pag .pag__album-media-wrap .pag__album-media {
  height: 100% !important;
  object-fit: cover;
}

.pag__album-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(12px, calc(var(--pag-title-basis) * 0.8), 26px)
           clamp(10px, calc(var(--pag-title-basis) * 0.65), 20px)
           clamp(8px, calc(var(--pag-title-basis) * 0.5), 16px);
  background: linear-gradient(to top, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.65) 38%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 36%;
  max-height: 100%;
  overflow: hidden;
}

.pag--layout-mosaic .pag__photo-item {
  margin: 0 !important;
  width: auto;
  flex: 0 0 auto;
  overflow: hidden;
}

.pag--layout-mosaic .pag__photo-button {
  height: 100%;
  border-radius: 0;
  box-shadow: none;
}

.pag--layout-grid .pag__photo-button {
  aspect-ratio: var(--pag-ratio);
}

.pag--layout-grid .pag__photo-button img {
  height: 100%;
  object-fit: cover;
}

.pag--layout-mosaic .pag__photo-button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pag__album-title {
  display: block;
  margin-top: 0;
  font-size: clamp(0.95rem, var(--pag-title-basis), 1.9rem);
  /* 1.06 clipped the accents on uppercase diacritics (Í, Á, Ř, Ž). */
  line-height: 1.18 !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #0b0b0b !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
  white-space: normal !important;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  text-overflow: clip !important;
  max-width: 100%;
}

.pag__album-description,
.pag__caption {
  margin-top: 6px !important;
  display: block;
  font-size: 0.95em;
  line-height: 1.45;
  opacity: 0.9;
  white-space: normal !important;
  overflow-wrap: break-word;
}

.pag__album-description {
  max-width: 100%;
  color: rgba(0, 0, 0, 0.82);
  font-size: clamp(0.78rem, calc(var(--pag-title-basis) * 0.44), 1rem);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pag__panel-title {
  margin: 0 0 16px !important;
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  line-height: 1.25 !important;
  font-weight: 600 !important;
  white-space: normal !important;
  overflow-wrap: break-word;
}

.pag__back {
  cursor: pointer;
  margin-bottom: 20px;
  padding: 10px 16px;
  border-radius: calc(var(--pag-radius) * 0.75);
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
  width: auto !important;
  display: inline-block !important;
}

.pag--button-minimal .pag__back {
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.pag--button-outline .pag__back {
  border: 1.5px solid currentColor;
}

.pag--button-solid .pag__back {
  background: currentColor;
  color: #fff;
}

.pag__back:hover,
.pag__back:focus-visible {
  transform: translateY(-1px);
}

.pag__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #dedede, #f5f5f5);
}

.pag__overview,
.pag__albums-view,
.pag__gallery-view {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--pag-animation-speed) ease, transform var(--pag-animation-speed) ease;
}

.pag__overview[hidden],
.pag__albums-view[hidden],
.pag__gallery-view[hidden],
.pag__group-panel[hidden],
.pag__album-panel[hidden] {
  display: none;
}

.pag .pag__view-leave {
  opacity: 0;
  transform: translateY(14px);
}

.pag .pag__view-enter {
  opacity: 0;
  transform: translateY(-14px);
}

.pag--anim-fade .pag__view-leave,
.pag--anim-fade .pag__view-enter {
  transform: none;
}

.pag__group-panel .pag__album-grid {
  margin-top: 4px;
}

.pag--hover-lift .pag__album-card:hover .pag__album-media,
.pag--hover-lift .pag__album-card:focus-visible .pag__album-media {
  transform: translateY(-2px);
}

.pag--hover-zoom .pag__album-card:hover .pag__album-media,
.pag--hover-zoom .pag__album-card:focus-visible .pag__album-media,
.pag__photo-button:hover img,
.pag__photo-button:focus-visible img {
  transform: scale(1.04);
}

.pag--hover-fade .pag__album-card:hover .pag__album-media,
.pag--hover-fade .pag__album-card:focus-visible .pag__album-media {
  opacity: 0.9;
}

.pag__album-card:focus-visible,
.pag__back:focus-visible,
.pag__photo-button:focus-visible,
.pag__lightbox button:focus-visible {
  outline: 2px solid currentColor !important;
  outline-offset: 3px;
}

/* The lightbox is moved to <body> at runtime so no theme header,
   stacking context or transformed ancestor can cover it. */
.pag__lightbox {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.95);
  z-index: 2147483000 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.pag__lightbox[hidden] {
  display: none !important;
}

.pag__lightbox-image {
  max-width: min(1200px, 92vw);
  max-height: 90vh;
  object-fit: contain;
  position: relative;
  z-index: 1;
}

.pag__lightbox-close,
.pag__lightbox-nav {
  position: absolute;
  z-index: 2;
  color: #fff;
  font-size: 30px;
  cursor: pointer;
  line-height: 1;
  width: 48px;
  height: 48px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45) !important;
  -webkit-tap-highlight-color: transparent;
  transition: background 160ms ease;
}

.pag__lightbox-close:hover,
.pag__lightbox-nav:hover {
  background: rgba(0, 0, 0, 0.75) !important;
}

.pag__lightbox-close {
  top: calc(16px + env(safe-area-inset-top, 0px));
  right: calc(16px + env(safe-area-inset-right, 0px));
}

.pag__lightbox-nav--prev {
  left: calc(12px + env(safe-area-inset-left, 0px));
  top: 50%;
  transform: translateY(-50%);
}

.pag__lightbox-nav--next {
  right: calc(12px + env(safe-area-inset-right, 0px));
  top: 50%;
  transform: translateY(-50%);
}

@media (max-width: 600px) {
  .pag__lightbox {
    padding: 16px;
  }

  .pag__lightbox-image {
    max-width: 100%;
    max-height: 78vh;
  }

  .pag__lightbox-close,
  .pag__lightbox-nav {
    width: 44px;
    height: 44px;
    font-size: 26px;
  }

  .pag__lightbox-nav--prev,
  .pag__lightbox-nav--next {
    top: auto;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    transform: none;
  }
}

/* Scroll lock that keeps the reading position on iOS/Android. */
.pag-no-scroll {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
}

@media (min-width: 768px) {
  .pag {
    --pag-title-basis: calc(6.8vw / var(--pag-columns-tablet, 2));
  }

  .pag__album-grid {
    grid-template-columns: repeat(var(--pag-columns-tablet), minmax(0, 1fr));
  }

  .pag--layout-grid .pag__photo-grid {
    grid-template-columns: repeat(var(--pag-photo-columns-tablet), minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .pag {
    --pag-title-basis: calc(6.8vw / var(--pag-columns-desktop, 3));
  }

  .pag__album-grid {
    grid-template-columns: repeat(var(--pag-columns-desktop), minmax(0, 1fr));
  }

  .pag--layout-grid .pag__photo-grid {
    grid-template-columns: repeat(var(--pag-photo-columns-desktop), minmax(0, 1fr));
  }
}