/* Madok Gallery — frontend styles */

.madok-gallery {
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;
	background-color: #4f4d40;
	padding-top: 2rem;
	padding-bottom: 2rem;
}

.madok-gallery-viewport {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
}

.madok-gallery-slides {
	position: relative;
}

.madok-gallery-slide {
	outline: none;
}

.madok-gallery-figure {
	position: relative;
	margin: 0;
	height: 600px;
	padding-left: 8px;
	padding-right: 8px;
	box-sizing: content-box;
}

@media (max-width: 1024px) {
	.madok-gallery-figure {
		height: 500px;
	}
}

@media (max-width: 767px) {
	.madok-gallery-figure {
		height: 300px;
	}
}

.madok-gallery-figure a {
	display: block;
	height: 100%;
	line-height: 0;
}

/* Two-class selector deliberately: Elementor's own base CSS ships
   `.elementor img { height: auto; max-width: 100%; }`, which outranks a
   single-class selector and silently forces images back to full-width/auto-
   height sizing — this must stay at least as specific as that rule. */
.madok-gallery-figure .madok-gallery-image {
	display: block;
	height: 100%;
	width: auto;
	max-width: none;
	object-fit: cover;
}

.madok-gallery-empty-notice {
	padding: 2rem;
	text-align: center;
	color: #9e8a7d;
	background: #f5f5f0;
}

/* Arrows — dedicated flex gutter beside the slides, no button chrome of any
   kind: only the icon itself should ever be visible. Core sizing lives on the
   bare selector; every state gets its own rule rather than a shared comma
   list, since mixing :focus-visible into one invalidates the whole rule on
   some parsers and silently drops the sizing (see madok-project-showcase). */
.madok-gallery-arrow {
	position: relative;
	z-index: 2;
	flex: 0 0 64px;
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	cursor: pointer;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	color: inherit;
}

.madok-gallery-arrow:hover,
.madok-gallery-arrow:focus,
.madok-gallery-arrow:active,
.madok-gallery-arrow:visited {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	outline: none;
}

.madok-gallery-arrow:focus-visible {
	outline: 1px dotted currentColor;
	outline-offset: 4px;
}

.madok-gallery-arrow svg {
	display: block;
	height: 26px;
	width: auto;
	stroke: #d9d9d9;
	fill: none;
	transition: stroke 0.2s ease;
}

@media (max-width: 767px) {
	.madok-gallery-arrow {
		flex-basis: 36px;
	}
}

/* Slick overrides: the widget draws its own arrows, hide slick's defaults and dots */
.madok-gallery-slides .slick-arrow,
.madok-gallery-slides .slick-dots {
	display: none !important;
}

.madok-gallery-slides .slick-slide {
	outline: none;
}