/**
 * BEFORE / AFTER labels over the merged pictures.
 * The merged picture is a single image, so the labels assume the split is in the middle.
 * Turn off on Before and after → Gallery Layout, with define('PGSA_LAYOUT_PICTURE_LABELS', false) or the "pgsa_layout_picture_labels" filter.
 * The label texts come from the same settings page (--pgsa-label-before / --pgsa-label-after).
 */

#pgsa-container .photogallery-post-pictures__gallery__figure::before,
#pgsa-container .photogallery-post-pictures__gallery__figure::after,
.pgsa-labels::before,
.pgsa-labels::after {
    position: absolute;
    bottom: 12px;
    z-index: 2;
    padding: 3px 7px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #333;
    background: #fff;
    pointer-events: none;
}

#pgsa-container .photogallery-post-pictures__gallery__figure::before,
.pgsa-labels::before {
    content: var(--pgsa-label-before, "Before");
    left: 12px;
}

#pgsa-container .photogallery-post-pictures__gallery__figure::after,
.pgsa-labels::after {
    content: var(--pgsa-label-after, "After");
    left: calc(50% + 12px);
}

/* Blurred like the explicit picture under them, until the gallery plugin's script swaps in the original */
#pgsa-container .photogallery-post-pictures__gallery__figure:has(.photogallery_swappable_image)::before,
#pgsa-container .photogallery-post-pictures__gallery__figure:has(.photogallery_swappable_image)::after,
.pgsa-labels:has(.photogallery_swappable_image)::before,
.pgsa-labels:has(.photogallery_swappable_image)::after {
    filter: blur(4px);
}