/**
 * MC ViewKit – Custom Styles
 *
 * @package MC_ViewKit
 */

/* =============================================================================
   Pagination (Bootstrap-style)
   ============================================================================= */

.mcvk-pagination {
	margin: 2rem 0;
	text-align: left;
}

.mcvk-pagination ul {
	display: inline-flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0;
}

.mcvk-pagination .mcvk-page-item a,
.mcvk-pagination .mcvk-page-item span {
	display: block;
	padding: 0.375rem 0.75rem;
	font-size: var(--mcvk-pag-font-size, inherit);
	color: var(--mcvk-pag-color, inherit);
	text-decoration: none;
	background-color: var(--mcvk-pag-bg, #fff);
	border: 1px solid var(--mcvk-pag-border-color, #dee2e6);
	line-height: 1.5;
	transition: color 0.15s ease-in-out,
	            background-color 0.15s ease-in-out,
	            border-color 0.15s ease-in-out;
}

/* Collapse double borders between adjacent items. */
.mcvk-pagination .mcvk-page-item + .mcvk-page-item a,
.mcvk-pagination .mcvk-page-item + .mcvk-page-item span {
	margin-left: -1px;
}

/* First item rounded left. */
.mcvk-pagination .mcvk-page-item:first-child a,
.mcvk-pagination .mcvk-page-item:first-child span {
	border-top-left-radius: var(--mcvk-pag-border-radius, 0.25rem);
	border-bottom-left-radius: var(--mcvk-pag-border-radius, 0.25rem);
}

/* Last item rounded right. */
.mcvk-pagination .mcvk-page-item:last-child a,
.mcvk-pagination .mcvk-page-item:last-child span {
	border-top-right-radius: var(--mcvk-pag-border-radius, 0.25rem);
	border-bottom-right-radius: var(--mcvk-pag-border-radius, 0.25rem);
}

/* Hover state. */
.mcvk-pagination .mcvk-page-item a:hover,
.mcvk-pagination .mcvk-page-item a:focus {
	z-index: 2;
	color: var(--mcvk-pag-hover-color, inherit);
	background-color: var(--mcvk-pag-hover-bg, #e9ecef);
	border-color: var(--mcvk-pag-hover-border-color, #dee2e6);
}

/* Active / current page. */
.mcvk-pagination .mcvk-page-item.active span {
	z-index: 3;
	color: var(--mcvk-pag-active-color, #fff);
	background-color: var(--mcvk-pag-active-bg, #0d6efd);
	border-color: var(--mcvk-pag-active-border-color, #0d6efd);
}

/* Dots / ellipsis. */
.mcvk-pagination .mcvk-page-item .dots {
	color: var(--mcvk-pag-color, inherit);
	background-color: var(--mcvk-pag-bg, #fff);
	cursor: default;
}

/* =============================================================================
   Grid – Boxed Thumbnail
   ============================================================================= */

.grid-image.boxed img {
	object-fit: contain;
}

/* =============================================================================
   Related items – layout container
   Replaces the theme's .container on the related-items wrapper so the plugin
   controls width/centering regardless of the active theme.
   ============================================================================= */

.mc-container {
	width: 100%;
	max-width: var( --mc-container-max-width, 1200px );
	margin-right: auto;
	margin-left: auto;
	padding-right: var( --mc-container-padding-x, 1rem );
	padding-left: var( --mc-container-padding-x, 1rem );
}