.realizations__intro {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	max-width: 56.25rem;
	margin-block-end: var(--space-5);
}

.realizations__heading {
	max-width: 100%;
	overflow-wrap: anywhere;
	font-size: var(--font-size-3xl);
	line-height: var(--line-height-heading);
	letter-spacing: var(--letter-spacing-tight);
}

.realizations__lead {
	margin: 0;
	max-width: 100%;
	color: var(--color-text-muted);
	font-family: var(--font-sans);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-regular);
	line-height: 1.45;
}

.realizations__layout {
	--bs-gutter-y: var(--space-3);
}

.realizations__layout > [class*="col-"] {
	max-width: 100%;
	min-width: 0;
}

.realizations__map {
	position: relative;
	width: 100%;
	max-width: 35.75rem;
	margin-inline: auto;
	overflow: visible;
}

.realizations__map-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 572 / 556;
	object-fit: contain;
	pointer-events: none;
	user-select: none;
}

.realizations__pin {
	position: absolute;
	left: var(--pin-x);
	top: var(--pin-y);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	transform: translate(-50%, -50%);
	cursor: pointer;
	transition: transform 0.2s ease, z-index 0s;
}

.realizations__pin.is-active {
	z-index: 4;
}

.realizations__pin-icon {
	display: block;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background-color: transparent;
	background-image: url("../../assets/icons/map-pin.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 2rem 2rem;
	box-shadow: 0 0.25rem 0.75rem color-mix(in srgb, var(--color-accent) 28%, transparent);
	transition: width 0.2s ease, height 0.2s ease, background-image 0.2s ease, background-size 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, filter 0.2s ease;
}

.realizations__pin:hover .realizations__pin-icon,
.realizations__pin:focus-visible .realizations__pin-icon {
	transform: translateY(-0.125rem) scale(1.08);
	filter: brightness(1.06);
	box-shadow: 0 0.5rem 1.25rem color-mix(in srgb, var(--color-accent) 42%, transparent);
}

.realizations__pin.is-active .realizations__pin-icon,
.realizations__pin[aria-pressed="true"] .realizations__pin-icon {
	width: 2.5rem;
	height: 2.5rem;
	background-color: transparent;
	background-image: url("../../assets/icons/map-pin-active.svg");
	background-size: 2.5rem 2.5rem;
	box-shadow: 0 0.5rem 1.25rem color-mix(in srgb, var(--color-bg-dark) 32%, transparent);
	filter: none;
	transform: none;
}

.realizations__pin.is-active:hover .realizations__pin-icon,
.realizations__pin.is-active:focus-visible .realizations__pin-icon,
.realizations__pin[aria-pressed="true"]:hover .realizations__pin-icon,
.realizations__pin[aria-pressed="true"]:focus-visible .realizations__pin-icon {
	transform: translateY(-0.125rem) scale(1.04);
	box-shadow: 0 0.65rem 1.5rem color-mix(in srgb, var(--color-bg-dark) 38%, transparent);
}

.realizations__stage {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100%;
}

.realizations__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-3);
	max-width: 34.5rem;
}

.realizations__card.is-changing {
	opacity: 0;
	transform: translateY(0.5rem);
}

.realizations__card.is-active {
	opacity: 1;
	transform: none;
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.realizations__place {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	margin: 0;
	color: var(--color-accent);
	font-size: var(--font-size-base);
	line-height: var(--line-height-body);
}

.realizations__marker {
	display: block;
	flex-shrink: 0;
	width: 0.875rem;
	height: 1.125rem;
	background-color: var(--color-accent);
	-webkit-mask: url("../../assets/icons/map-marker.svg") center / contain no-repeat;
	mask: url("../../assets/icons/map-marker.svg") center / contain no-repeat;
}

.realizations__title {
	margin: 0;
	max-width: 100%;
	color: var(--color-text-heading);
	font-family: var(--font-sans);
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-heading);
	letter-spacing: var(--letter-spacing-tight);
	overflow-wrap: anywhere;
}

.realizations__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	max-width: 100%;
}

.realizations__actions .btn {
	max-width: 100%;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.realizations__actions .btn--light .btn__icon {
	background-color: var(--color-accent);
}

.realizations__actions .btn--light:hover .btn__icon,
.realizations__actions .btn--light:focus-visible .btn__icon {
	background-color: var(--color-accent);
}

.realizations__actions .btn:hover,
.realizations__actions .btn:focus-visible {
	transform: translateY(-0.125rem);
}

.realizations__actions .btn--dark:hover,
.realizations__actions .btn--dark:focus-visible {
	background-color: var(--color-button-dark-hover);
	box-shadow: 0 0.5rem 1.25rem color-mix(in srgb, var(--color-bg-dark) 22%, transparent);
}

.realizations__actions .btn--light:hover,
.realizations__actions .btn--light:focus-visible {
	background-color: var(--color-bg-elevated-2);
	box-shadow: 0 0.5rem 1.25rem color-mix(in srgb, var(--color-bg-dark) 10%, transparent);
}

.realizations__actions .btn:active {
	transform: none;
	box-shadow: none;
}

.realizations__archive-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.realizations__archive-item {
	margin: 0;
	padding: 0;
}

.realizations__archive-link {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--color-bg-elevated-2);
	text-decoration: none;
	transition: color 0.2s ease;
}

.realizations__archive-link:hover .realizations__archive-title,
.realizations__archive-link:focus-visible .realizations__archive-title {
	color: var(--color-accent);
}

.realizations__archive-title {
	margin: 0;
	color: var(--color-text-heading);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-heading);
	letter-spacing: var(--letter-spacing-tight);
	transition: color 0.2s ease;
}

.realizations__content {
	max-width: 45rem;
	margin-block-start: var(--space-3);
}

.realizations__content > *:first-child {
	margin-top: 0;
}

.realizations__content > *:last-child {
	margin-bottom: 0;
}

@media (min-width: 992px) {
	.realizations__stage {
		padding-inline-start: 2rem;
	}
}

@media (max-width: 1199.98px) {
	.realizations__title {
		font-size: clamp(1.25rem, 1rem + 1.5vw, var(--font-size-2xl));
	}
}

@media (max-width: 991.98px) {
	.realizations__intro {
		align-items: center;
		margin-block-end: var(--space-3);
		text-align: center;
	}

	.realizations__stage {
		align-items: center;
	}

	.realizations__card {
		align-items: center;
		max-width: none;
		text-align: center;
	}

	.realizations__place {
		justify-content: center;
	}

	.realizations__actions {
		width: 100%;
		justify-content: center;
	}
}

@media (max-width: 575.98px) {
	.realizations__actions .btn {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.realizations__card.is-changing,
	.realizations__card.is-active {
		transform: none;
		transition: none;
	}
}