/* About page — research theme stills inside accordions */

/* Rows are not height-matched: each frame follows its own image so nothing is
   letterboxed, and align-items keeps the gutters even. */
.entry-content .md-theme-gallery,
.wp-block-post-content .md-theme-gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
	gap: 1rem;
	margin: 1.5rem 0 2rem;
}

.entry-content .md-theme-gallery__item,
.wp-block-post-content .md-theme-gallery__item {
	margin: 0;
	padding: 0;
}

.entry-content .md-theme-gallery__image,
.wp-block-post-content .md-theme-gallery__image {
	display: block;
	width: 100%;
	height: auto;
	background: var(--md-color-subtle, #f3f3f3);
	border-radius: var(--md-radius-pill, 0.25rem);
}

/* Added by theme-lightbox.js, so the still stays a plain image without scripting. */
.entry-content .md-theme-gallery__button,
.wp-block-post-content .md-theme-gallery__button {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	border-radius: var(--md-radius-pill, 0.25rem);
	cursor: zoom-in;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.md-theme-gallery__button:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(28, 27, 26, 0.16);
}

.md-theme-gallery__button:focus-visible {
	outline: var(--md-focus-outline, 2px solid color-mix(in srgb, var(--md-color-contrast, #1c1b1a) 70%, transparent));
	outline-offset: var(--md-focus-outline-offset, 2px);
}

.entry-content .md-theme-gallery__caption,
.wp-block-post-content .md-theme-gallery__caption {
	margin: 0.5rem 0 0;
	font-family: var(--wp--preset--font-family--inclusive-sans, "Inclusive Sans", system-ui, sans-serif);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	line-height: 1.4;
	color: color-mix(in srgb, var(--md-color-contrast, #1c1b1a) 70%, transparent);
}

@media (max-width: 30rem) {
	.entry-content .md-theme-gallery,
	.wp-block-post-content .md-theme-gallery {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.md-theme-gallery__button,
	.md-theme-gallery__button:hover {
		transition: none;
		transform: none;
	}
}

/* Enlarged still — mirrors the team profile dialog (blurred page, centred panel) */

body.md-lightbox-open {
	overflow: hidden;
	position: fixed;
	width: 100%;
}

.md-lightbox[hidden] {
	display: none !important;
}

.md-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding:
		max(var(--md-space, 1.5rem), env(safe-area-inset-top, 0px))
		max(var(--md-space, 1.5rem), env(safe-area-inset-right, 0px))
		max(var(--md-space, 1.5rem), env(safe-area-inset-bottom, 0px))
		max(var(--md-space, 1.5rem), env(safe-area-inset-left, 0px));
}

.md-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.88);
	backdrop-filter: blur(0);
	-webkit-backdrop-filter: blur(0);
	opacity: 0;
	cursor: zoom-out;
	transition:
		opacity 240ms ease-out,
		backdrop-filter 320ms ease-out,
		-webkit-backdrop-filter 320ms ease-out;
}

html[data-md-theme="dark"] .md-lightbox__backdrop {
	background: rgba(0, 0, 0, 0.88);
}

.md-lightbox.is-open .md-lightbox__backdrop {
	opacity: 1;
	backdrop-filter: var(--md-glass-blur, saturate(160%) blur(14px));
	-webkit-backdrop-filter: var(--md-glass-blur, saturate(160%) blur(14px));
}

.md-lightbox__dialog {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
	padding: var(--md-space, 1.5rem);
	background: var(--md-color-surface, #fff);
	color: var(--md-color-contrast, #1c1b1a);
	border-radius: var(--md-radius, 0.5rem);
	box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.2);
	font-family: var(--wp--preset--font-family--inclusive-sans, "Inclusive Sans", system-ui, sans-serif);
	opacity: 0;
	transform: translateY(0.65rem);
	transition:
		opacity 300ms ease-out 90ms,
		transform 300ms cubic-bezier(0.22, 1, 0.36, 1) 90ms;
}

.md-lightbox.is-open .md-lightbox__dialog {
	opacity: 1;
	transform: translateY(0);
}

.md-lightbox__image {
	display: block;
	max-width: 100%;
	/* Leave room for the caption and the panel's own padding. */
	max-height: max(8rem, calc(100dvh - 10rem));
	width: auto;
	height: auto;
	margin: 0 auto;
	border-radius: var(--md-radius-pill, 0.25rem);
}

.md-lightbox__caption {
	flex-shrink: 0;
	margin: var(--md-space, 1.5rem) 0 0;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	line-height: 1.4;
	text-align: center;
	color: color-mix(in srgb, var(--md-color-contrast, #1c1b1a) 70%, transparent);
}

html[data-md-theme="dark"] .md-lightbox__caption {
	color: color-mix(in srgb, var(--md-color-contrast, #f5f5f4) 75%, transparent);
}

.md-lightbox__caption[hidden] {
	display: none;
}

/* Sits on the panel corner so the image keeps even space on all sides. */
.md-lightbox__close {
	position: absolute;
	top: -0.75rem;
	right: -0.75rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--md-color-surface, #fff);
	color: var(--md-color-contrast, #1c1b1a);
	box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.18);
	font: inherit;
	cursor: pointer;
}

.md-lightbox__close:hover {
	background: color-mix(in srgb, var(--md-color-contrast, #1c1b1a) 8%, var(--md-color-surface, #fff));
}

.md-lightbox__close:focus-visible {
	outline: var(--md-focus-outline, 2px solid color-mix(in srgb, var(--md-color-contrast, #1c1b1a) 70%, transparent));
	outline-offset: var(--md-focus-outline-offset, 2px);
}

/* Thin 1px cross like the header and team pop-up icons (the disc stays: it floats over the panel corner and backdrop). */
.md-lightbox__close-icon {
	position: relative;
	display: block;
	flex: 0 0 auto;
	width: 1.125rem;
	height: 1.125rem;
	font-size: 0;
	line-height: 0;
	transition: opacity var(--md-transition-duration, 0.2s) var(--md-transition-ease, cubic-bezier(0.2, 0, 0, 1));
}

.md-lightbox__close-icon::before,
.md-lightbox__close-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(1.125rem * 1.4142);
	height: var(--md-details-marker-stroke, 1px);
	background: currentColor;
	transform: translate(-50%, -50%) rotate(45deg);
}

.md-lightbox__close-icon::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
	.md-lightbox--reduced-motion,
	.md-lightbox--reduced-motion * {
		transition: none !important;
		transform: none !important;
		animation: none !important;
	}

	.md-lightbox--reduced-motion .md-lightbox__backdrop,
	.md-lightbox--reduced-motion .md-lightbox__dialog {
		opacity: 1;
		transform: none;
	}

	.md-lightbox__backdrop {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		background: rgba(255, 255, 255, 0.95);
	}

	html[data-md-theme="dark"] .md-lightbox__backdrop {
		background: rgba(0, 0, 0, 0.95);
	}
}