/**
 * Base styles for the "Image + copyright" Bricks element.
 * Place next to image-copyright.php in your child theme.
 * Everything here is overridable from the element's style controls.
 *
 * Positioning keys off .image-copyright, which the element adds either to its
 * root (normal case) or to a fallback wrapper, so both markup shapes work.
 *
 * The note rules are written as `.image-copyright > .image-copyright__note`
 * (two classes) rather than on the class alone, so theme rules like
 * `.brxe-image figcaption` don't win. That keeps the base free of !important
 * while the element's own style controls — which Bricks scopes to the root id —
 * still override everything here.
 */

.image-copyright,
.image-copyright__wrap {
	--ic-offset-x: 0px;
	--ic-offset-y: 0px;
	--ic-radius: 0.2rem;

	position: relative;
	display: block;
	margin: 0;
	max-width: 100%;
}

.image-copyright__wrap {
	display: block;
	width: 100%;
	line-height: 0;
}

.image-copyright > img,
.image-copyright > a > img,
.image-copyright__wrap > img,
.image-copyright__wrap > a > img {
	display: block;
	max-width: 100%;
}

.image-copyright > .image-copyright__note,
.image-copyright__wrap > .image-copyright__note {
	position: absolute;
	z-index: 1;
	margin: 0;
	padding: 0.1rem;
	max-width: 60%;
	font-size: 0.7rem;
	line-height: 1.4;
	text-align: right;
	color: inherit;
	background: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(0.2rem);
	-webkit-backdrop-filter: blur(0.2rem);
	pointer-events: none;
	overflow-wrap: anywhere;
}

/* Corner positions — the radius always rounds the corner facing the image */

.pos-top-left > .image-copyright__note {
	top: var(--ic-offset-y);
	left: var(--ic-offset-x);
	text-align: left;
	border-bottom-right-radius: var(--ic-radius);
}

.pos-top-right > .image-copyright__note {
	top: var(--ic-offset-y);
	right: var(--ic-offset-x);
	border-bottom-left-radius: var(--ic-radius);
}

.pos-bottom-left > .image-copyright__note {
	bottom: var(--ic-offset-y);
	left: var(--ic-offset-x);
	text-align: left;
	border-top-right-radius: var(--ic-radius);
}

.pos-bottom-right > .image-copyright__note {
	bottom: var(--ic-offset-y);
	right: var(--ic-offset-x);
	border-top-left-radius: var(--ic-radius);
}

/* Caption below the image instead of on top of it */

.pos-below > .image-copyright__note,
.image-copyright.pos-below > .image-copyright__note {
	position: static;
	display: block;
	margin-top: var(--ic-offset-y);
	padding: 0;
	max-width: 100%;
	background: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border-radius: 0;
	opacity: 0.7;
}

/* Vertical strip along the edge, as stock agencies use */

.is-vertical > .image-copyright__note {
	writing-mode: vertical-rl;
	text-orientation: mixed;
}

.is-vertical.pos-bottom-left > .image-copyright__note,
.is-vertical.pos-bottom-right > .image-copyright__note {
	transform: rotate(180deg);
}

/* Reveal on hover */

.is-hover > .image-copyright__note {
	opacity: 0;
	transition: opacity 0.25s ease;
}

.is-hover:hover > .image-copyright__note,
.is-hover:focus-within > .image-copyright__note {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.is-hover > .image-copyright__note {
		transition: none;
	}
}