/**
 * Support Museum section styles.
 *
 * Figma 2267:10421 — fixed 340px cards on desktop hover.
 * Mobile / tablet (< 64rem): always show full card (photo, copy, CTA).
 * Desktop (64rem+): idle = icon + title; hover = icon travels + copy / CTA.
 */

.support-museum {
	--sm-pad-block-start: 1.875rem;
	--sm-pad-block-end: 3.75rem;
	--sm-header-pad-block: 2rem;
	--sm-grid-gap: 1.6875rem;
	--sm-card-h: 21.25rem; /* 340px */
	--sm-card-radius: 0.75rem;
	--sm-card-pad-block: 1.5rem; /* keep CTA inside 340px */
	--sm-card-pad-inline: clamp(1.25rem, 3vw, 2.625rem);
	--sm-icon-size: 5rem;
	--sm-icon-pad: 0.875rem;
	--sm-icon-glyph: 3rem;
	--sm-title-size: clamp(1.125rem, 1.6vw, 1.375rem);
	--sm-headline-size: var(--type-h2-size);
	--sm-idle-gap: 1.875rem;
	--sm-copy-gap: 1rem;
	--sm-stack-gap: 1.75rem; /* lead ↔ CTA — fits fixed height */
	--sm-content-max: 22rem;
	--sm-media-base: #323232;
	--sm-image-opacity: 0.3;
	--sm-ease: ease;
	--sm-duration: 0.4s;
	--sm-icon-active-left: calc(
		50% + min(var(--sm-content-max), calc(100% - 2 * var(--sm-card-pad-inline))) / 2
			- var(--sm-icon-size)
	);

	padding-block: var(--sm-pad-block-start) var(--sm-pad-block-end);
	color: var(--color-navy);
	background-color: var(--color-white);
}

.support-museum__inner {
	display: flex;
	flex-direction: column;
	gap: 0.4375rem;
	width: 100%;
	max-width: var(--container-outer-max);
	margin-inline: auto;
	padding-inline: var(--container-pad-inline);
}

.support-museum__header {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding-block: var(--sm-header-pad-block);
}

.support-museum__headline {
	margin: 0;
	width: 100%;
	max-width: 48.875rem;
	font-family: var(--font-family-display);
	font-size: var(--sm-headline-size);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.01em;
	text-align: center;
	color: var(--color-navy);
	overflow-wrap: break-word;
}

.support-museum__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sm-grid-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.support-museum__card {
	position: relative;
	isolation: isolate;
	min-height: var(--sm-card-h);
	overflow: hidden;
	border-radius: var(--sm-card-radius);
	background-color: var(--color-navy);
	color: var(--color-white);
}

.support-museum__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	background-color: var(--sm-media-base);
	opacity: 1;
	transition: opacity var(--sm-duration) var(--sm-ease);
}

.support-museum__image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
	opacity: var(--sm-image-opacity);
	transform: scale(1);
	transition: transform 0.55s var(--sm-ease);
}

/* ——— Mobile / tablet: flow layout, full data always visible ——— */
.support-museum__body {
	position: relative;
	z-index: 1;
	min-height: var(--sm-card-h);
}

.support-museum__panel {
	box-sizing: border-box;
	padding: var(--sm-card-pad-block) var(--sm-card-pad-inline);
	transition: opacity var(--sm-duration) var(--sm-ease);
}

.support-museum__panel--idle {
	display: none;
}

.support-museum__panel--active {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: var(--sm-stack-gap);
	min-height: var(--sm-card-h);
	opacity: 1;
	pointer-events: auto;
}

.support-museum__lead {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	width: 100%;
	max-width: var(--sm-content-max);
}

.support-museum__icon-slot {
	flex-shrink: 0;
	width: var(--sm-icon-size);
	height: var(--sm-icon-size);
}

.support-museum__icon {
	position: absolute;
	z-index: 2;
	top: var(--sm-card-pad-block);
	left: var(--sm-icon-active-left);
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--sm-icon-size);
	height: var(--sm-icon-size);
	padding: var(--sm-icon-pad);
	border-radius: 50%;
	background-color: var(--color-white);
	color: var(--color-navy);
	transform: none;
	transition:
		top var(--sm-duration) var(--sm-ease),
		left var(--sm-duration) var(--sm-ease),
		transform var(--sm-duration) var(--sm-ease);
}

.support-museum__icon-img {
	display: block;
	width: var(--sm-icon-glyph);
	height: var(--sm-icon-glyph);
	object-fit: contain;
}

.support-museum__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sm-copy-gap);
	width: 100%;
}

.support-museum__panel--active .support-museum__title {
	text-align: left;
}

.support-museum__title {
	margin: 0;
	font-family: var(--font-family-display);
	font-size: var(--sm-title-size);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.01em;
	text-align: center;
	color: var(--color-white);
	overflow-wrap: break-word;
}

.support-museum__rule {
	display: block;
	width: 100%;
	height: 0;
	margin: 0;
	border: 0;
	border-bottom: 0.5px solid var(--color-light-outline);
}

.support-museum__description {
	margin: 0;
	width: 100%;
	font-family: var(--font-family-sans);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0;
	text-align: left;
	color: var(--color-white);
	overflow-wrap: break-word;
}

.support-museum__cta {
	flex-shrink: 0;
	max-width: 100%;
	--btn-outline-padding-block: 0.4375rem;
	--btn-outline-padding-inline: 1.5rem;
	--btn-outline-font-size: 0.9375rem;
}

.support-museum__cta-label {
	white-space: normal;
	text-align: center;
}

@media (min-width: 48rem) {
	.support-museum__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ——— Desktop: idle + hover reveal ——— */
@media (min-width: 64rem) {
	.support-museum__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.support-museum__card {
		height: var(--sm-card-h);
		min-height: 0;
	}

	.support-museum__media {
		opacity: 0;
	}

	.support-museum__image {
		transform: scale(1.04);
	}

	.support-museum__body {
		position: absolute;
		inset: 0;
		min-height: 0;
	}

	.support-museum__panel {
		position: absolute;
		inset: 0;
	}

	.support-museum__panel--idle {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: var(--sm-idle-gap);
		opacity: 1;
	}

	.support-museum__panel--active {
		min-height: 0;
		opacity: 0;
		pointer-events: none;
	}

	.support-museum__icon {
		top: 50%;
		left: 50%;
		transform: translate(-50%, calc(-50% - (var(--sm-idle-gap) + 1.5rem) / 2));
	}

	.support-museum__card:hover .support-museum__media,
	.support-museum__card:focus-within .support-museum__media {
		opacity: 1;
	}

	.support-museum__card:hover .support-museum__image,
	.support-museum__card:focus-within .support-museum__image {
		transform: scale(1);
	}

	.support-museum__card:hover .support-museum__icon,
	.support-museum__card:focus-within .support-museum__icon {
		top: var(--sm-card-pad-block);
		left: var(--sm-icon-active-left);
		transform: none;
	}

	.support-museum__card:hover .support-museum__panel--idle,
	.support-museum__card:focus-within .support-museum__panel--idle {
		opacity: 0;
		pointer-events: none;
	}

	.support-museum__card:hover .support-museum__panel--active,
	.support-museum__card:focus-within .support-museum__panel--active {
		opacity: 1;
		pointer-events: auto;
	}
}

/* Touch laptop / desktop — no hover: keep full data open */
@media (min-width: 64rem) and (hover: none) {
	.support-museum__media {
		opacity: 1;
	}

	.support-museum__image {
		transform: scale(1);
	}

	.support-museum__icon {
		top: var(--sm-card-pad-block);
		left: var(--sm-icon-active-left);
		transform: none;
	}

	.support-museum__panel--idle {
		opacity: 0;
		pointer-events: none;
	}

	.support-museum__panel--active {
		opacity: 1;
		pointer-events: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.support-museum__media,
	.support-museum__image,
	.support-museum__panel,
	.support-museum__icon {
		transition: none;
	}

	.support-museum__image {
		transform: none;
	}
}