/**
 * Image Carousel — front-end styles.
 *
 * Loaded via block.json's `style`, so it is only enqueued on pages that
 * actually contain the block. Also used for the editor preview.
 *
 * The track is a native scroll-snap strip, so the carousel still swipes and
 * scrolls if view.js never runs. Controls stay hidden until view.js adds
 * .is-ready.
 *
 * Styles (picked in the editor's Styles panel):
 *   Classic — default. Arrows and counter over the image.
 *   Cards   — rounded cards, next image peeks in, controls bar below.
 */

.mining-image-carousel {
	--mic-ratio: 16/9;
	--mic-cols: 1;
	--mic-peek: 0;
	--mic-gap: 0px;
	--mic-radius: 0px;
	--mic-navy: #221e72;
	--mic-navy-dark: #16134f;
	--mic-ink: #101223;
	--mic-line: #e2e4eb;
	--mic-frame-bg: #f1f2f4;

	container: mic / inline-size;
	position: relative;
	margin: 32px 0;
}

.mining-image-carousel.has-columns {
	--mic-gap: 12px;
}

.mining-image-carousel__stage {
	position: relative;
}

.mining-image-carousel__track {
	/* Slides in view: the column count plus any peek of the next one. */
	--mic-pv: calc( var( --mic-cols ) + var( --mic-peek ) );

	position: relative;
	display: flex;
	gap: var( --mic-gap );
	align-items: flex-start;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
}

/*
 * Keep the scrollbar until the arrows exist — without JavaScript it is the
 * only cue on desktop that there is more than one image.
 */
.mining-image-carousel.is-ready .mining-image-carousel__track {
	scrollbar-width: none;
}

.mining-image-carousel.is-ready .mining-image-carousel__track::-webkit-scrollbar {
	display: none;
}

.mining-image-carousel__track:focus-visible {
	outline: 2px solid var( --mic-navy );
	outline-offset: 2px;
}

.mining-image-carousel__slide {
	flex: 0 0 calc( ( 100% - ( var( --mic-pv ) - 1 ) * var( --mic-gap ) ) / var( --mic-pv ) );
	min-width: 0;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

/* Fewer columns as the article column narrows. */
@container mic ( max-width: 700px ) {
	.mining-image-carousel__track {
		--mic-pv: calc( min( var( --mic-cols ), 3 ) + var( --mic-peek ) );
	}
}

@container mic ( max-width: 520px ) {
	.mining-image-carousel__track {
		--mic-pv: calc( min( var( --mic-cols ), 2 ) + var( --mic-peek ) );
	}
}

/* Phones: one image at a time, with the next one peeking in. */
@container mic ( max-width: 400px ) {
	.has-columns .mining-image-carousel__track {
		--mic-pv: 1.25;
	}
}

.mining-image-carousel__frame {
	position: relative;
	overflow: hidden;
	aspect-ratio: var( --mic-ratio );
	border-radius: var( --mic-radius );
	background: var( --mic-frame-bg );
}

.mining-image-carousel__img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	-webkit-user-drag: none;
	user-select: none;
}

.mining-image-carousel--fit-contain .mining-image-carousel__img {
	object-fit: contain;
}

/*
 * "Original" — every image keeps its own shape; tall ones are capped and
 * letterboxed. Width stays 100% so the img's width/height attributes give it
 * a size before it loads — with width:auto it collapses to 0×0 and a lazy
 * image never starts loading.
 */
.mining-image-carousel--original .mining-image-carousel__frame {
	aspect-ratio: auto;
}

.mining-image-carousel--original .mining-image-carousel__img {
	height: auto;
	max-height: 80vh;
	object-fit: contain;
}

/* Image link to the full-screen viewer. */
.mining-image-carousel__zoom {
	display: block;
	height: 100%;
	border: 0;
	box-shadow: none;
}

.mining-image-carousel--original .mining-image-carousel__zoom {
	height: auto;
}

/* Inset, because the frame clips anything drawn outside it. */
.mining-image-carousel__zoom:focus-visible {
	outline: 3px solid var( --mic-navy );
	outline-offset: -3px;
}

/* ---------------------------------------------------------------------------
 * Mouse dragging (view.js). Touch swiping is native and needs none of this.
 * ------------------------------------------------------------------------- */

@media ( hover: hover ) and ( pointer: fine ) {
	.mining-image-carousel.is-ready:not( .is-static ) .mining-image-carousel__track {
		cursor: grab;
	}

	.mining-image-carousel.has-lightbox .mining-image-carousel__zoom {
		cursor: zoom-in;
	}
}

.mining-image-carousel.is-dragging .mining-image-carousel__track,
.mining-image-carousel.is-dragging .mining-image-carousel__zoom {
	cursor: grabbing;
	user-select: none;
}

/* Snapping is paused while dragging and while easing to the drop target. */
.mining-image-carousel.is-free .mining-image-carousel__track {
	scroll-snap-type: none;
	scroll-behavior: auto;
}

/* ---------------------------------------------------------------------------
 * Controls — Classic layout (the base the Cards style rearranges).
 *
 * Arrows and counter sit over the image; .mining-image-carousel__controls is
 * only a wrapper, so its children position against the block wrapper.
 * ------------------------------------------------------------------------- */

.mining-image-carousel__controls {
	display: none;
}

.mining-image-carousel.is-ready .mining-image-carousel__controls {
	display: block;
}

/* Everything fits in view — nothing to page through. */
.mining-image-carousel.is-static .mining-image-carousel__controls {
	display: none;
}

.mining-image-carousel__arrow {
	position: absolute;
	/* Centred on the active image; view.js sets --mic-frame-h. */
	top: calc( var( --mic-frame-h, 50% ) / 2 );
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #ffffff;
	color: var( --mic-navy );
	line-height: 0;
	box-shadow: 0 1px 2px rgba( 16, 18, 35, 0.12 ), 0 4px 14px rgba( 16, 18, 35, 0.18 );
	cursor: pointer;
	transform: translateY( -50% );
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.mining-image-carousel__arrow svg {
	width: 22px;
	height: 22px;
	transition: transform 0.2s ease;
}

.mining-image-carousel__arrow--prev {
	left: 12px;
}

.mining-image-carousel__arrow--next {
	right: 12px;
}

/* The white ring keeps a navy button visible over dark photos. */
.mining-image-carousel__arrow:hover {
	background: var( --mic-navy );
	color: #ffffff;
	box-shadow: 0 0 0 2px #ffffff, 0 6px 20px rgba( 16, 18, 35, 0.35 );
	transform: translateY( -50% ) scale( 1.06 );
}

/* The chevron nudges the way it points. */
.mining-image-carousel__arrow--prev:hover svg {
	transform: translateX( -2px );
}

.mining-image-carousel__arrow--next:hover svg {
	transform: translateX( 2px );
}

.mining-image-carousel__arrow:active {
	background: var( --mic-navy-dark );
	color: #ffffff;
	box-shadow: 0 0 0 2px #ffffff, 0 1px 4px rgba( 16, 18, 35, 0.25 );
	transform: translateY( -50% ) scale( 0.94 );
}

.mining-image-carousel__counter {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba( 16, 18, 35, 0.66 );
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
	color: #ffffff;
	pointer-events: none;
}

/* "2 / 6" means little when several images are in view. */
.mining-image-carousel.has-columns .mining-image-carousel__counter {
	display: none;
}

.mining-image-carousel__progress {
	display: none;
}

.mining-image-carousel__progress-bar {
	display: block;
	height: 100%;
	background: var( --mic-navy );
	transform: scaleX( 0 );
	transform-origin: left center;
	transition: transform 0.2s ease;
}

/* ---------------------------------------------------------------------------
 * Cards — rounded cards, the next one peeking in, and a controls bar below:
 *   [counter] [progress ———] [‹] [›]
 * ------------------------------------------------------------------------- */

.mining-image-carousel.is-style-cards {
	--mic-radius: 14px;
	--mic-gap: 16px;
	--mic-peek: 0.2;
}

.is-style-cards .mining-image-carousel__slide {
	transition: opacity 0.3s ease;
}

/* The peeking (not fully in view) cards step back. */
.is-style-cards.is-ready .mining-image-carousel__slide:not( .is-visible ) {
	opacity: 0.45;
}

.is-style-cards.is-ready .mining-image-carousel__controls {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 16px;
}

.is-style-cards.is-static .mining-image-carousel__controls {
	display: none;
}

.is-style-cards .mining-image-carousel__arrow {
	position: static;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border: 1.5px solid #cfd2dc;
	background: #ffffff;
	color: var( --mic-navy );
	box-shadow: none;
	transform: none;
}

.is-style-cards .mining-image-carousel__arrow:hover {
	border-color: var( --mic-navy );
	background: var( --mic-navy );
	color: #ffffff;
	box-shadow: 0 4px 12px rgba( 34, 30, 114, 0.28 );
	transform: translateY( -1px );
}

.is-style-cards .mining-image-carousel__arrow:active {
	border-color: var( --mic-navy-dark );
	background: var( --mic-navy-dark );
	box-shadow: none;
	transform: scale( 0.94 );
}

.is-style-cards .mining-image-carousel__counter {
	position: static;
	flex: 0 0 auto;
	padding: 0;
	background: none;
	font-size: 14px;
	letter-spacing: 0.02em;
	color: var( --mic-ink );
}

.is-style-cards .mining-image-carousel__progress {
	display: block;
	flex: 1 1 auto;
	height: 3px;
	overflow: hidden;
	border-radius: 3px;
	background: var( --mic-line );
}

/* ---------------------------------------------------------------------------
 * Full-screen viewer (view.js builds it on first click).
 *
 * A native <dialog> in the top layer, so no z-index fight with sticky
 * headers or ads. Its buttons use box-shadow rather than borders so the
 * theme's button:hover / :focus border colours cannot leak in.
 * ------------------------------------------------------------------------- */

html.mining-lightbox-open {
	overflow: hidden;
}

.mining-image-carousel-lightbox {
	position: fixed;
	inset: 0;
	width: 100vw;
	max-width: none;
	height: 100vh;
	height: 100dvh;
	max-height: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	background: transparent;
	color: #ffffff;
}

.mining-image-carousel-lightbox::backdrop {
	background: rgba( 8, 9, 20, 0.94 );
}

.mining-image-carousel-lightbox[open] {
	animation: mining-lightbox-in 0.2s ease-out;
}

.mining-image-carousel-lightbox[open]::backdrop {
	animation: mining-lightbox-fade 0.2s ease-out;
}

@keyframes mining-lightbox-in {
	from {
		opacity: 0;
		transform: scale( 0.98 );
	}
}

@keyframes mining-lightbox-fade {
	from {
		opacity: 0;
	}
}

.mining-image-carousel-lightbox__track {
	display: flex;
	width: 100%;
	height: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.mining-image-carousel-lightbox__track::-webkit-scrollbar {
	display: none;
}

.mining-image-carousel-lightbox__slide {
	box-sizing: border-box;
	display: flex;
	flex: 0 0 100%;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 72px 96px;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.mining-image-carousel-lightbox__img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
	border-radius: 4px;
	box-shadow: 0 20px 60px rgba( 0, 0, 0, 0.5 );
	user-select: none;
	-webkit-user-drag: none;
}

/* Counter on the left, close on the right, over a soft top fade. */
.mining-image-carousel-lightbox__bar {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px 14px 24px;
	background: linear-gradient( rgba( 8, 9, 20, 0.6 ), rgba( 8, 9, 20, 0 ) );
	pointer-events: none;
}

.mining-image-carousel-lightbox__counter {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.06em;
	font-variant-numeric: tabular-nums;
	opacity: 0.85;
}

.mining-image-carousel-lightbox__close,
.mining-image-carousel-lightbox__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.12 );
	color: #ffffff;
	line-height: 0;
	box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.28 );
	cursor: pointer;
	pointer-events: auto;
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.mining-image-carousel-lightbox__close {
	width: 44px;
	height: 44px;
}

.mining-image-carousel-lightbox__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	width: 52px;
	height: 52px;
	transform: translateY( -50% );
}

.mining-image-carousel-lightbox__arrow--prev {
	left: 24px;
}

.mining-image-carousel-lightbox__arrow--next {
	right: 24px;
}

.mining-image-carousel-lightbox__close:hover,
.mining-image-carousel-lightbox__arrow:hover {
	background: #ffffff;
	color: var( --mic-navy, #221e72 );
	box-shadow: 0 6px 20px rgba( 0, 0, 0, 0.35 );
}

.mining-image-carousel-lightbox__close:hover {
	transform: rotate( 90deg );
}

.mining-image-carousel-lightbox__arrow:hover {
	transform: translateY( -50% ) scale( 1.06 );
}

.mining-image-carousel-lightbox__close:active {
	transform: rotate( 90deg ) scale( 0.92 );
}

.mining-image-carousel-lightbox__arrow:active {
	transform: translateY( -50% ) scale( 0.94 );
}

.mining-image-carousel-lightbox__close:focus-visible,
.mining-image-carousel-lightbox__arrow:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
}

.mining-image-carousel-lightbox.is-single .mining-image-carousel-lightbox__arrow,
.mining-image-carousel-lightbox.is-single .mining-image-carousel-lightbox__counter {
	display: none;
}

.mining-image-carousel-lightbox__status {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
}

/* Phones: edge-to-edge image; swiping is the main way to move. */
@media ( max-width: 781px ) {
	.mining-image-carousel-lightbox__slide {
		padding: 64px 0;
	}

	/* Flush images — a shadow would spill onto the neighbouring one. */
	.mining-image-carousel-lightbox__img {
		border-radius: 0;
		box-shadow: none;
	}

	.mining-image-carousel-lightbox__arrow {
		width: 40px;
		height: 40px;
		background: rgba( 8, 9, 20, 0.45 );
	}

	.mining-image-carousel-lightbox__arrow--prev {
		left: 8px;
	}

	.mining-image-carousel-lightbox__arrow--next {
		right: 8px;
	}
}

/* ---------------------------------------------------------------------------
 * Misc
 * ------------------------------------------------------------------------- */

/* Keyboard focus ring for both styles — last, so no style's shadow hides it. */
.mining-image-carousel .mining-image-carousel__arrow:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px #ffffff, 0 0 0 5px var( --mic-navy );
}

/* Announces "2 of 6" to screen readers; never visible. */
.mining-image-carousel__status {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
}

/* Editor only — shown when every selected image has been deleted. */
.mining-image-carousel__notice {
	margin: 0;
	padding: 12px 14px;
	border-radius: 8px;
	background: #f1f2f4;
	font-size: 14px;
}

@media ( max-width: 781px ) {
	.mining-image-carousel__arrow {
		width: 38px;
		height: 38px;
	}

	.mining-image-carousel__arrow--prev {
		left: 8px;
	}

	.mining-image-carousel__arrow--next {
		right: 8px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.mining-image-carousel__track {
		scroll-behavior: auto;
	}

	.mining-image-carousel *,
	.mining-image-carousel-lightbox,
	.mining-image-carousel-lightbox * {
		transition: none !important;
		animation: none !important;
	}

	.mining-image-carousel-lightbox::backdrop {
		animation: none !important;
	}
}