/* IPS Draggable Image Cards - base structural styles.
 * Colors, sizes, and spacing that are user configurable are applied inline
 * or through Elementor selectors from the widget controls. This file only
 * holds the structural rules the interaction depends on.
 */

.ips-dic-viewport-clip {
	position: relative;
	left: 50%;
	width: 100vw;
	margin-left: -50vw;
	overflow: hidden;
	/* The throw-away animation can rotate a card up to the configured Throw
	 * Rotation (45 degrees by default), which makes its visual bounding box
	 * much taller than the image itself. This padding/negative-margin pair
	 * gives that motion a large invisible buffer to move through before
	 * anything is clipped, without changing where this element actually
	 * sits in the page (the padding and margin cancel each other out), so
	 * the page's own scrollable height is never affected by the throw. */
	padding-top: 100vh;
	padding-bottom: 100vh;
	margin-top: -100vh;
	margin-bottom: -100vh;
}

.ips-dic-wrapper {
	position: relative;
	width: 100%;
	box-sizing: border-box;
}

/* Invisible element matching the top card's markup exactly (same classes,
 * so it picks up the same Image Settings and Card Content styling). It sits
 * in normal document flow, unlike the stack and buttons which are both
 * absolutely positioned, so it is what actually gives the wrapper its
 * height: the widget now takes exactly as much vertical space as the image
 * itself needs, instead of a separately configured fixed stack height. */
.ips-dic-sizer {
	visibility: hidden;
	pointer-events: none;
	display: flex;
	justify-content: center;
}

.ips-dic-sizer.ips-dic-card {
	position: static;
	transform: none !important;
	cursor: default;
	z-index: auto;
	left: auto;
	top: auto;
}

.ips-dic-mode-content .ips-dic-sizer {
	flex-direction: column;
	width: fit-content;
	margin: 0 auto;
}

.ips-dic-buttons {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 0 0 auto;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.35s ease;
}

.ips-dic-buttons.ips-dic-buttons-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.ips-dic-buttons.ips-dic-buttons-hidden {
	display: none;
}

.ips-dic-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	border: none;
	white-space: nowrap;
	transition: all 0.3s ease;
}

.ips-dic-btn:focus {
	outline: none;
}

.ips-dic-stack-outer {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.ips-dic-stack {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	position: relative;
}

.ips-dic-card {
	position: absolute;
	pointer-events: auto;
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
	touch-action: none;
	will-change: transform;
	box-sizing: border-box;
	z-index: 2;
	-webkit-user-drag: none;
	user-drag: none;
	-webkit-touch-callout: none;
}

.ips-dic-card:active {
	cursor: grabbing;
}

.ips-dic-card-media {
	-webkit-user-drag: none;
	user-drag: none;
	-webkit-touch-callout: none;
	user-select: none;
	-webkit-user-select: none;
	pointer-events: none;
}

/* Image only mode: the card matches the stack's full height exactly, so
 * what you set in Image Settings is what actually renders. Rotation
 * overflow (a rotated rectangle's bounding box is taller than the image
 * itself) is handled by the generous invisible buffer on
 * .ips-dic-viewport-clip instead of shrinking the image, so the configured
 * size is never silently reduced. */
.ips-dic-mode-image .ips-dic-card {
	height: 100%;
	max-width: 90%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ips-dic-mode-image .ips-dic-card-media {
	max-height: 100%;
	max-width: 100%;
	width: auto;
	height: auto;
	display: block;
	object-fit: contain;
}

/* Content mode: fixed size card with image, title, description, and tags */
.ips-dic-mode-content .ips-dic-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.ips-dic-mode-content .ips-dic-card-media {
	width: 100%;
	display: block;
	object-fit: cover;
}

.ips-dic-card-body {
	display: flex;
	flex-direction: column;
}

.ips-dic-card-title {
	margin: 0;
}

.ips-dic-card-description {
	margin: 0;
}

.ips-dic-card-tags {
	margin: 0;
}

.ips-dic-empty-notice {
	padding: 2rem;
	text-align: center;
	border: 2px dashed rgba(0, 0, 0, 0.15);
	border-radius: 8px;
	width: 100%;
}