/**
 * PWD Animations - Image Strip widget stylesheet.
 * Loaded together with pwd-animations-core.css.
 *
 * HTML and CSS only. A flex row of overlapping images: the one under the
 * pointer or holding keyboard focus gets a larger flex-grow, so it widens while
 * the others narrow. The bottom left corner of every closed image is cut with
 * clip-path (a rectangular bite that shows the image behind it); the cut is
 * removed on the open image and on the one after it. Each image is sized from
 * container query units so it does not rescale while the strip moves.
 *
 * Elementor and themes style bare ul, li, img and a elements, so every rule is
 * scoped under .pwd-is and goes two or three classes deep.
 */

.pwd-is {
	--pwd-is-h: 420px;
	--pwd-is-ov: 120px;
	--pwd-is-grow: 6;
	--pwd-is-n: 4;
	--pwd-is-nw: var(--pwd-is-ov);
	--pwd-is-nh: 40%;
	--pwd-is-bw: 5px;
	--pwd-is-bc: #fff;
	--pwd-is-dur: 0.4s;
	--pwd-is-scrim: rgba(0, 0, 0, 0.45);
	position: relative;
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	container-type: inline-size;
}

.pwd-is .pwd-is__list {
	display: flex;
	flex-direction: row;
	height: var(--pwd-is-h);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pwd-is .pwd-is__item {
	position: relative;
	flex: 1 1 0;
	box-sizing: border-box;
	min-width: 0;
	margin: 0 0 0 calc(var(--pwd-is-ov) * -1);
	padding: 0;
	overflow: hidden;
	border: var(--pwd-is-bw) solid var(--pwd-is-bc);
	background-color: #222;
	list-style: none;
	clip-path: polygon(0 0, 100% 0, 100% 100%, var(--pwd-is-nw) 100%, var(--pwd-is-nw) calc(100% - var(--pwd-is-nh)), 0 calc(100% - var(--pwd-is-nh)));
	transition: flex-grow var(--pwd-is-dur) ease-in-out, clip-path var(--pwd-is-dur) ease-in-out;
}

/* The first image has nothing behind it, so it keeps its corner */
.pwd-is .pwd-is__item:first-child {
	margin-left: 0;
	--pwd-is-nw: 0px;
	--pwd-is-nh: 0%;
}

/* Open image: it widens, and it and the image after it lose the corner cut */
.pwd-is .pwd-is__item:hover,
.pwd-is .pwd-is__item:focus-within {
	flex-grow: var(--pwd-is-grow);
	--pwd-is-nw: 0px;
	--pwd-is-nh: 0%;
}

.pwd-is .pwd-is__item:hover + .pwd-is__item,
.pwd-is .pwd-is__item:focus-within + .pwd-is__item {
	--pwd-is-nw: 0px;
	--pwd-is-nh: 0%;
}

.pwd-is .pwd-is__item:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -8px;
}

/* Shade behind the title */
.pwd-is .pwd-is__item::before {
	content: "";
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 55%;
	background: linear-gradient(to bottom, var(--pwd-is-scrim), transparent);
	pointer-events: none;
}

/* Image: as wide as the open image, so it never rescales while the strip moves */
.pwd-is .pwd-is__item .pwd-is__img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: cover;
	object-position: left center;
}

@supports (width: 1cqw) {
	.pwd-is .pwd-is__item .pwd-is__img {
		width: calc((100cqw + (var(--pwd-is-n) - 1) * var(--pwd-is-ov)) * var(--pwd-is-grow) / (var(--pwd-is-grow) + var(--pwd-is-n) - 1));
	}
}

/* Title: always visible, on top */
.pwd-is .pwd-is__title {
	position: absolute;
	z-index: 2;
	top: 0;
	right: 0;
	left: 0;
	margin: 0;
	padding: 16px 18px;
	overflow: hidden;
	color: #fff;
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.2;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pwd-is.pwd-is--num .pwd-is__title {
	padding-right: 3.2em;
}

/* Number: pops in on the open image */
.pwd-is .pwd-is__num {
	position: absolute;
	z-index: 2;
	top: 16px;
	right: 18px;
	color: #fff;
	font-size: 1.25rem;
	line-height: 1.2;
	transform: scale(0);
	transition: transform 0.15s ease-in-out;
}

.pwd-is .pwd-is__item:hover .pwd-is__num,
.pwd-is .pwd-is__item:focus-within .pwd-is__num {
	transform: scale(1);
}

/* Button: only on the open image. Hidden ones are also unfocusable, so a
   keyboard visitor tabs to the image first, which opens it. */
.pwd-is .pwd-is__btn {
	position: absolute;
	z-index: 3;
	bottom: 18px;
	left: 18px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	max-width: calc(100% - 36px);
	padding: 10px 18px;
	border-radius: 8px;
	background-color: #fff;
	color: #111;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(10px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s, background-color var(--pwd-is-bt, 0.25s) ease, color var(--pwd-is-bt, 0.25s) ease;
}

.pwd-is .pwd-is__item:hover .pwd-is__btn,
.pwd-is .pwd-is__item:focus-within .pwd-is__btn {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	transition: opacity var(--pwd-is-dur) ease calc(var(--pwd-is-dur) * 0.6), transform var(--pwd-is-dur) ease calc(var(--pwd-is-dur) * 0.6), visibility 0s linear 0s, background-color var(--pwd-is-bt, 0.25s) ease, color var(--pwd-is-bt, 0.25s) ease;
}

.pwd-is .pwd-is__btn .pwd-is__btn-icon {
	display: inline-flex;
	align-items: center;
	line-height: 1;
}

.pwd-is .pwd-is__btn .pwd-is__btn-icon i,
.pwd-is .pwd-is__btn .pwd-is__btn-icon svg {
	width: 1em;
	height: 1em;
	font-size: 1em;
	line-height: 1;
	fill: currentColor;
}

/* Icon with no text: a square button (round with a large radius) */
.pwd-is .pwd-is__btn.pwd-is__btn--icononly {
	aspect-ratio: 1 / 1;
}

@media (prefers-reduced-motion: reduce) {
	.pwd-is .pwd-is__item,
	.pwd-is .pwd-is__num,
	.pwd-is .pwd-is__btn {
		transition: none;
	}
}