/**
 * --------------------------------------------------------
 * WP Custom Gallery
 * Responsive Styles
 * --------------------------------------------------------
 */

/*----------------------------------------------------------
Large Desktop (≥1400px)
----------------------------------------------------------*/

@media (min-width: 1400px) {

	.wpcg-gallery {
		max-width: 600px;
	}

	.wpcg-stage {
		height: 450px;
	}
}

/*----------------------------------------------------------
Desktop (1024px–1399px)
----------------------------------------------------------*/

@media (min-width: 1024px) and (max-width: 1399px) {

	.wpcg-gallery {
		max-width: 600px;
	}

	.wpcg-stage {
		height: 450px;
	}

	.wpcg-nav {
		opacity: 1;
		visibility: visible;
	}

	.wpcg-gallery:hover .wpcg-nav {
		opacity: 1;
		visibility: visible;
	}

	.wpcg-overlay {
		opacity: 1;
	}

	.wpcg-gallery:hover .wpcg-overlay {
		opacity: 1;
	}
}

/*----------------------------------------------------------
Tablet Landscape
----------------------------------------------------------*/

@media (min-width: 768px) and (max-width: 1023px) {

	.wpcg-gallery {
		max-width: 100%;
	}

	.wpcg-stage {
		aspect-ratio: 4 / 3;
		height: auto;
	}

	.wpcg-nav {
		width: 44px;
		height: 44px;
		opacity: 1;
		visibility: visible;
	}

	.wpcg-overlay {
		opacity: 1;
		padding: 12px;
	}

	.wpcg-toolbar-btn {
		width: 40px;
		height: 40px;
	}

	.wpcg-toolbar-btn svg {
		width: 18px;
		height: 18px;
	}
}

/*----------------------------------------------------------
Mobile
----------------------------------------------------------*/

@media (max-width: 767px) {

	.wpcg-gallery {
		width: 100%;
		max-width: 100%;
		border-radius: 0;
	}

	.wpcg-stage {
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 3;
	}

	.wpcg-image {
		object-fit: cover;
	}

	.wpcg-nav {
		width: 42px;
		height: 42px;

		opacity: 1;
		visibility: visible;

		top: 50%;
	}

	.wpcg-nav-prev {
		left: 10px;
	}

	.wpcg-nav-next {
		right: 10px;
	}

	.wpcg-overlay {

		padding: 10px;

		opacity: 1;

	}

	.wpcg-counter {

		font-size: 12px;

	}

	.wpcg-toolbar {

		gap: 6px;

	}

	.wpcg-toolbar-btn {

		width: 38px;
		height: 38px;

	}

	.wpcg-toolbar-btn svg {

		width: 18px;
		height: 18px;

	}

	.wpcg-modal-stage {

		padding: 12px;

	}

	.wpcg-modal-footer {

		padding: 12px;

		flex-wrap: wrap;

		gap: 12px;

	}

	.wpcg-modal-caption {

		width: 100%;

		order: 3;

		text-align: center;

		padding: 0;

	}

	.wpcg-modal-counter {

		margin: 0;

	}

	.wpcg-modal-toolbar {

		margin-left: auto;

	}
}

/*----------------------------------------------------------
Small Mobile
----------------------------------------------------------*/

@media (max-width: 480px) {

	.wpcg-nav {

		width: 38px;
		height: 38px;

	}

	.wpcg-nav svg {

		width: 18px;
		height: 18px;

	}

	.wpcg-toolbar-btn {

		width: 36px;
		height: 36px;

	}

	.wpcg-toolbar-btn svg {

		width: 16px;
		height: 16px;

	}

	.wpcg-modal-prev,
	.wpcg-modal-next {

		width: 38px;
		height: 38px;

		margin-top: -19px;

	}

	.wpcg-modal-close {

		width: 38px;
		height: 38px;

	}

	.wpcg-modal-action {

		width: 36px;
		height: 36px;

	}

	.wpcg-modal-action svg {

		width: 18px;
		height: 18px;

	}

	.wpcg-modal-caption {

		font-size: 13px;

	}

	.wpcg-modal-counter {

		font-size: 12px;

	}
}

/*----------------------------------------------------------
Landscape Phones
----------------------------------------------------------*/

@media (max-width: 900px) and (orientation: landscape) {

	.wpcg-modal-stage {

		padding: 20px 60px;

	}

	.wpcg-modal-footer {

		padding: 10px 16px;

	}

	.wpcg-modal-caption {

		font-size: 13px;

	}

}

/*----------------------------------------------------------
Touch Devices
----------------------------------------------------------*/

@media (hover: none) {

	.wpcg-nav {

		opacity: 1 !important;
		visibility: visible !important;

	}

	.wpcg-overlay {

		opacity: 1 !important;

	}

	.wpcg-toolbar {

		opacity: 1 !important;

		transform: none !important;

	}

	.wpcg-toolbar-btn::after {

		display: none;

	}

}

/*----------------------------------------------------------
Reduced Motion
----------------------------------------------------------*/

@media (prefers-reduced-motion: reduce) {

	.wpcg-gallery *,
	.wpcg-modal * {

		animation: none !important;
		transition: none !important;

	}

}