/* HyperKit - Showcase
 *
 * A portfolio piece list: images and videos, a caption under each, and an
 * optional lightbox. Deliberately plain. It is not a bento and does not
 * pretend to pack cleverly; a portfolio is a sequence of pieces, and the only
 * layout decision worth having is how wide each one sits.
 *
 * That decision is one rule:
 *
 *     flex: 0 0 calc((100% - (n - 1) * gap) / n)
 *
 * n is 1, 2 or 3, a custom property Elementor rewrites per breakpoint, so
 * "full width on desktop, half on tablet, full on a phone" is a number rather
 * than a second set of rules, and the gap is subtracted exactly instead of
 * being approximated with percentages.
 *
 * MEDIA IS NOT CROPPED BY DEFAULT. A portfolio piece has a shape the author
 * chose, and cropping it to a uniform tile is the one thing that makes a
 * portfolio look like a stock gallery. `aspect-ratio` is opt-in.
 */

.hk-sw {
	--hk-sw-gap: 28px;
	--hk-sw-radius: 14px;
	--hk-sw-inset: 0px;
	--hk-sw-plate: transparent;

	--hk-sw-title: #111111;
	--hk-sw-meta: rgba(17, 17, 17, .55);

	--hk-sw-lift: 0px;
	--hk-sw-zoom: 1;
	--hk-sw-dur: .5s;
	--hk-sw-ease: cubic-bezier(.22, 1, .36, 1);

	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--hk-sw-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hk-sw__piece {
	--hk-sw-n: 1;
	flex: 0 0 calc((100% - (var(--hk-sw-n) - 1) * var(--hk-sw-gap)) / var(--hk-sw-n));
	max-width: 100%;
	min-width: 0;
}

/* The clickable part is a button when it opens the lightbox and an anchor when
   it goes somewhere, so the control matches what it actually does. Both are
   reset here, because Hello Elementor and most themes style buttons hard and a
   bare `background: none` on the resting state alone would lose the moment the
   theme styles :hover. */
.hk-sw__open,
.hk-sw .hk-sw__open:hover,
.hk-sw .hk-sw__open:focus,
.hk-sw .hk-sw__open:active {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	text-align: inherit;
	text-transform: none;
	letter-spacing: normal;
	-webkit-appearance: none;
	appearance: none;
}

.hk-sw__open {
	cursor: zoom-in;
}

.hk-sw__piece--link .hk-sw__open {
	cursor: pointer;
}

.hk-sw__frame {
	position: relative;
	overflow: hidden;
	padding: var(--hk-sw-inset);
	border-radius: var(--hk-sw-radius);
	background: var(--hk-sw-plate);
	transform: translate3d(0, 0, 0);
	transition: transform var(--hk-sw-dur) var(--hk-sw-ease),
		box-shadow var(--hk-sw-dur) var(--hk-sw-ease);
}

.hk-sw__media {
	display: block;
	overflow: hidden;
	/* Concentric with the plate when the media is inset, and the plate's own
	   radius when it is not. One expression, no second rule. */
	border-radius: max(0px, calc(var(--hk-sw-radius) - var(--hk-sw-inset)));
	line-height: 0;
	background: rgba(17, 17, 17, .04);
}

/* Two classes: Elementor's `.elementor img { height:auto; max-width:100%;
   border-radius:0 }` is (0,1,1) and beats a bare element selector. */
.hk-sw .hk-sw__media img,
.hk-sw .hk-sw__media video {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	border-radius: 0;
	transition: transform .7s var(--hk-sw-ease);
}

/* Opt-in shape. Without it the piece keeps the proportions it was made in. */
.hk-sw__piece--shaped .hk-sw__media {
	aspect-ratio: var(--hk-sw-ratio, 4 / 3);
}

.hk-sw .hk-sw__piece--shaped .hk-sw__media img,
.hk-sw .hk-sw__piece--shaped .hk-sw__media video {
	height: 100%;
	object-fit: var(--hk-sw-fit, cover);
	object-position: center;
}

.hk-sw__piece:hover .hk-sw__frame {
	transform: translate3d(0, calc(var(--hk-sw-lift) * -1), 0);
}

.hk-sw__piece:hover .hk-sw__media img,
.hk-sw__piece:hover .hk-sw__media video {
	transform: scale(var(--hk-sw-zoom));
}

.hk-sw__open:focus-visible {
	outline: 3px solid var(--hk-sw-title);
	outline-offset: 4px;
	border-radius: var(--hk-sw-radius);
}

/* A play marker, so a video reads as a video before it starts. */
.hk-sw__play {
	position: absolute;
	z-index: 2;
	left: calc(var(--hk-sw-inset) + 14px);
	bottom: calc(var(--hk-sw-inset) + 14px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(17, 17, 17, .72);
	color: #fff;
	pointer-events: none;
}

.hk-sw .hk-sw__play svg {
	width: 14px;
	height: 14px;
}

/* =========================================================================
   Caption
   ========================================================================= */

.hk-sw__cap {
	padding-top: 12px;
}

.hk-sw .hk-sw__cap-title {
	margin: 0;
	color: var(--hk-sw-title);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -.01em;
}

.hk-sw .hk-sw__cap-meta {
	margin: 3px 0 0;
	color: var(--hk-sw-meta);
	font-size: 13px;
	line-height: 1.5;
}

/* =========================================================================
   Lightbox
   =========================================================================
   One overlay per widget, appended to the widget rather than to <body>: the
   custom properties above are scoped to .hk-sw, and a panel parked on <body>
   would lose every one of them. */

.hk-sw__box {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: clamp(16px, 4vw, 48px);
	background: rgba(12, 12, 14, .93);
}

.hk-sw__box.is-open {
	display: flex;
}

.hk-sw__box-inner {
	position: relative;
	max-width: 100%;
	max-height: 100%;
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: center;
}

/* The media is capped by the VIEWPORT, not by a width, so a tall piece and a
   wide one are both fully visible without either being upscaled. */
.hk-sw .hk-sw__box-inner img,
.hk-sw .hk-sw__box-inner video {
	display: block;
	max-width: 100%;
	max-height: calc(100vh - clamp(96px, 14vw, 180px));
	width: auto;
	height: auto;
	border-radius: 8px;
	background: #000;
}

.hk-sw__box-cap {
	max-width: 68ch;
	color: rgba(255, 255, 255, .82);
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
}

.hk-sw__box-cap b {
	display: block;
	color: #fff;
	font-weight: 600;
}

.hk-sw__box-btn,
.hk-sw .hk-sw__box-btn:hover,
.hk-sw .hk-sw__box-btn:focus {
	position: absolute;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.hk-sw .hk-sw__box-btn:hover {
	background: rgba(255, 255, 255, .22);
}

.hk-sw .hk-sw__box-btn svg {
	width: 20px;
	height: 20px;
}

.hk-sw__box-close {
	top: clamp(10px, 3vw, 26px);
	right: clamp(10px, 3vw, 26px);
	position: fixed;
}

.hk-sw__box-prev {
	left: clamp(10px, 3vw, 26px);
	top: 50%;
	transform: translateY(-50%);
	position: fixed;
}

.hk-sw__box-next {
	right: clamp(10px, 3vw, 26px);
	top: 50%;
	transform: translateY(-50%);
	position: fixed;
}

/* Only one piece: nothing to step through. */
.hk-sw__box--single .hk-sw__box-prev,
.hk-sw__box--single .hk-sw__box-next {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.hk-sw__frame,
	.hk-sw .hk-sw__media img,
	.hk-sw .hk-sw__media video {
		transition-duration: .01ms !important;
	}

	.hk-sw__piece:hover .hk-sw__frame,
	.hk-sw__piece:hover .hk-sw__media img,
	.hk-sw__piece:hover .hk-sw__media video {
		transform: none;
	}
}