/**
 * Diploma gallery and education carousel, About page (ID 1180) only.
 * All selectors are scoped to explicit editor-assigned classes.
 * Does not change global Gutenberg Gallery/Image, buttons or site sections.
 */

/* --------------------------------------------------------------------------
   Shared document cards
   -------------------------------------------------------------------------- */

.mb-documents-gallery.wp-block-gallery.has-nested-images,
.mb-documents-carousel.wp-block-gallery.has-nested-images {
	--mb-doc-gap: 1.125rem;
	--mb-doc-surface: var(--wp--preset--color--surface);
	--mb-doc-line: var(--wp--custom--card--border-color);
	--mb-doc-text: var(--wp--preset--color--text-secondary);
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
}

.mb-documents-gallery.wp-block-gallery.has-nested-images > figure.wp-block-image,
.mb-documents-carousel.wp-block-gallery.has-nested-images > figure.wp-block-image {
	box-sizing: border-box;
	min-width: 0;
	max-width: none !important;
	margin: 0 !important;
	padding: 0.875rem;
	border: 1px solid var(--mb-doc-line);
	border-radius: 12px;
	background: var(--mb-doc-surface);
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 0.75rem;
	overflow: hidden;
}

.mb-documents-gallery.wp-block-gallery.has-nested-images > figure.wp-block-image img,
.mb-documents-carousel.wp-block-gallery.has-nested-images > figure.wp-block-image img {
	box-sizing: border-box;
	display: block;
	width: 100% !important;
	max-width: 100% !important;
	object-fit: contain !important;
	object-position: center;
	margin: 0 auto;
	border-radius: 3px;
	background: transparent;
}

/* Gallery captions are regular text, never a gradient overlay over diplomas. */
.mb-documents-gallery.wp-block-gallery.has-nested-images > figure.wp-block-image figcaption,
.mb-documents-carousel.wp-block-gallery.has-nested-images > figure.wp-block-image figcaption {
	box-sizing: border-box;
	position: static !important;
	inset: auto !important;
	flex: 0 0 auto;
	width: 100% !important;
	max-width: 100% !important;
	margin: auto 0 0 !important;
	padding: 0 !important;
	background: none !important;
	color: var(--mb-doc-text) !important;
	font-size: 0.875rem;
	line-height: 1.45;
	text-align: center;
	text-shadow: none !important;
}

/* Preserve the native WordPress image lightbox trigger and keyboard focus. */
.mb-documents-gallery.wp-block-gallery.has-nested-images > figure.wp-block-image:focus-within,
.mb-documents-carousel.wp-block-gallery.has-nested-images > figure.wp-block-image:focus-within {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Main diploma gallery: 3 / 2 / 1 columns
   -------------------------------------------------------------------------- */

.mb-documents-gallery.wp-block-gallery.has-nested-images {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: stretch;
	gap: var(--mb-doc-gap) !important;
}

.mb-documents-gallery.wp-block-gallery.has-nested-images > figure.wp-block-image {
	width: 100% !important;
	height: 100%;
}

.mb-documents-gallery.wp-block-gallery.has-nested-images > figure.wp-block-image img {
	height: clamp(190px, 25vw, 310px) !important;
}

/* --------------------------------------------------------------------------
   Additional documents carousel: horizontal native scrolling + scroll snap
   -------------------------------------------------------------------------- */

.mb-documents-carousel.wp-block-gallery.has-nested-images {
	--mb-doc-card-width: calc((100% - 3 * var(--mb-doc-gap)) / 4);
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: stretch;
	gap: var(--mb-doc-gap) !important;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-inline: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 0;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.mb-documents-carousel.wp-block-gallery.has-nested-images::-webkit-scrollbar {
	display: none;
}

.mb-documents-carousel.wp-block-gallery.has-nested-images > figure.wp-block-image {
	width: var(--mb-doc-card-width) !important;
	min-width: var(--mb-doc-card-width) !important;
	flex: 0 0 var(--mb-doc-card-width) !important;
	height: auto;
	scroll-snap-align: start;
}

.mb-documents-carousel.wp-block-gallery.has-nested-images > figure.wp-block-image img {
	height: 195px !important;
}

/* JavaScript places the controls immediately before the gallery. */
.mb-documents-carousel__controls {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 0.5rem;
	margin-block: 0 0.875rem;
}

.mb-documents-carousel__button {
	box-sizing: border-box;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid var(--wp--custom--divider-strong);
	border-radius: 50%;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--structure);
	font: inherit;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.18s ease, background-color 0.18s ease;
}

.mb-documents-carousel__button svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@media (hover: hover) and (pointer: fine) {
	.mb-documents-carousel__button:hover {
		border-color: var(--wp--preset--color--accent);
		background: var(--wp--preset--color--section-background);
	}
}

.mb-documents-carousel__button:focus-visible,
.mb-documents-carousel.wp-block-gallery.has-nested-images:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

/* Optional editor wrapper: heading on the left, navigation on the right. */
.mb-documents-carousel-section.mb-documents-carousel-section--ready {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 1rem;
	row-gap: 1rem;
}

.mb-documents-carousel-section--ready > :is(h2, h3).wp-block-heading {
	grid-column: 1;
	grid-row: 1;
	min-width: 0;
	margin: 0 !important;
}

.mb-documents-carousel-section--ready > .mb-documents-carousel__controls {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
}

.mb-documents-carousel-section--ready > .mb-documents-carousel.wp-block-gallery {
	grid-column: 1 / -1;
	grid-row: 2;
	margin: 0 !important;
}

/* --------------------------------------------------------------------------
   Breakpoints (scoped: other Gutenberg galleries remain unchanged)
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
	.mb-documents-carousel.wp-block-gallery.has-nested-images {
		--mb-doc-card-width: calc((100% - 2 * var(--mb-doc-gap)) / 3);
	}
}

@media (max-width: 700px) {
	.mb-documents-gallery.wp-block-gallery.has-nested-images {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mb-documents-carousel.wp-block-gallery.has-nested-images {
		--mb-doc-card-width: calc((100% - var(--mb-doc-gap)) / 2);
	}

	.mb-documents-gallery.wp-block-gallery.has-nested-images > figure.wp-block-image img {
		height: 260px !important;
	}
}

@media (max-width: 440px) {
	.mb-documents-gallery.wp-block-gallery.has-nested-images {
		grid-template-columns: minmax(0, 1fr);
	}

	.mb-documents-carousel.wp-block-gallery.has-nested-images {
		--mb-doc-card-width: 83%;
	}

	.mb-documents-gallery.wp-block-gallery.has-nested-images > figure.wp-block-image img {
		height: 320px !important;
	}

	.mb-documents-carousel.wp-block-gallery.has-nested-images > figure.wp-block-image img {
		height: 220px !important;
	}

	.mb-documents-carousel__button {
		width: 40px;
		height: 40px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mb-documents-carousel__button {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   WordPress core Gallery lightbox – temporary original-ratio compatibility fix
   Gutenberg #79040 (fixed upstream 2026-09-28, not in WordPress 7.1 core).
   The lightbox is outside the Gallery in the DOM, so thumbnail rules cannot
   affect its images. Keep this scoped to the About page only.
   Reassess and remove once the upstream fix is shipped in WordPress core.
   -------------------------------------------------------------------------- */

/* The lightbox container must not inherit the aspect ratio of the thumbnail. */
body.page-id-1180 .wp-lightbox-overlay:is(.active, .show-closing-animation) .lightbox-image-container {
	width: min(calc(100vw - 6rem), 1400px) !important;
	height: calc(100vh - 6rem) !important;
	height: calc(100dvh - 6rem) !important;
}

body.page-id-1180 .wp-lightbox-overlay:is(.active, .show-closing-animation) .lightbox-image-container .wp-block-image {
	width: 100% !important;
	height: 100% !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
}

body.page-id-1180 .wp-lightbox-overlay:is(.active, .show-closing-animation) .lightbox-image-container .wp-block-image img {
	width: 100% !important;
	height: 100% !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: contain !important;
	object-position: center !important;
}

/* The native zoom starts from the cropped thumbnail's geometry. Use a fade
   instead to avoid jumping when changing to the image's natural proportions. */
@keyframes mb-document-lightbox-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes mb-document-lightbox-fade-out {
	from { opacity: 1; }
	to { opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) {
	body.page-id-1180 .wp-lightbox-overlay.zoom.active .lightbox-image-container {
		animation: mb-document-lightbox-fade-in 0.25s ease-out both !important;
	}

	body.page-id-1180 .wp-lightbox-overlay.zoom.show-closing-animation:not(.active) .lightbox-image-container {
		animation: mb-document-lightbox-fade-out 0.25s ease-in both !important;
	}
}

@media (max-width: 700px) {
	body.page-id-1180 .wp-lightbox-overlay:is(.active, .show-closing-animation) .lightbox-image-container {
		width: calc(100vw - 1.5rem) !important;
		height: calc(100vh - 7rem) !important;
		height: calc(100dvh - 7rem) !important;
	}
}