.ta-related-projects {
  background: var(--ta-color-page-bg);
  color: var(--ta-color-navy-deep);
  font-family: var(--ta-font-primary);
  padding-block: var(--ta-section-padding-y);
}

.ta-related-projects .ta-related-projects__container {
  width: min(100% - calc(var(--ta-container-padding-x) * 2), var(--ta-container-max-width));
  margin-inline: auto;
  padding: var(--ta-space-7);
  overflow: hidden;
  background: var(--ta-news-card-bg);
  border: var(--ta-news-card-border-width) solid var(--ta-news-card-border-color);
  border-radius: var(--ta-news-card-radius);
  box-shadow: var(--ta-news-card-shadow);
}

.ta-related-projects .ta-related-projects__header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--ta-space-5);
  margin-block-end: var(--ta-space-6);
}

.ta-related-projects .ta-related-projects__title {
  margin: 0 0 var(--ta-space-2);
  color: var(--ta-color-navy-deep);
  font-size: var(--ta-type-section-title-size);
  font-weight: var(--ta-type-section-title-weight);
  line-height: var(--ta-type-section-title-line-height);
  letter-spacing: var(--ta-type-section-title-letter-spacing);
}

.ta-related-projects .ta-related-projects__title-line {
  display: block;
  width: var(--ta-footer-icon-size);
  height: var(--ta-menu-active-height);
  border-radius: var(--ta-menu-active-radius);
  background: var(--ta-color-turquoise);
}

.ta-related-projects .ta-related-projects__controls {
  display: flex;
  gap: var(--ta-space-3);
}

.ta-related-projects .ta-related-projects__control {
  width: var(--ta-news-carousel-control-size);
  height: var(--ta-news-carousel-control-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: var(--ta-news-card-border-width) solid var(--ta-color-border-light);
  border-radius: var(--ta-radius-circle);
  background: var(--ta-color-white);
  color: var(--ta-color-turquoise);
  font-size: var(--ta-news-carousel-control-icon-size);
  cursor: pointer;
  transition:
    background var(--ta-transition-normal),
    color var(--ta-transition-normal),
    transform var(--ta-transition-normal);
}

.ta-related-projects .ta-related-projects__control:hover {
  background: var(--ta-color-turquoise);
  color: var(--ta-color-white);
  transform: translateY(calc(var(--ta-space-1) * -1));
}

.ta-related-projects .ta-related-projects__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  scroll-behavior: smooth;
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
  touch-action: pan-y;
  user-select: none;
}

.ta-related-projects .ta-related-projects__viewport::-webkit-scrollbar {
  display: none;
}

.ta-related-projects .ta-related-projects__viewport.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
}

.ta-related-projects .ta-related-projects__track {
  display: flex;
  gap: var(--ta-news-card-gap);
  width: max-content;
  padding-block-end: var(--ta-space-2);
}

.ta-related-projects .ta-related-projects__card {
  width: var(--ta-related-project-card-size);
  flex: 0 0 var(--ta-related-project-card-size);
  overflow: hidden;
  border-radius: var(--ta-news-card-radius);
  background: var(--ta-projects-card-bg);
  box-shadow: var(--ta-projects-card-shadow);
  scroll-snap-align: start;
}

.ta-related-projects .ta-related-projects__card a {
  position: relative;
  display: block;
  width: var(--ta-related-project-card-size);
  height: var(--ta-related-project-card-size);
  color: var(--ta-color-white);
  text-decoration: none;
}

.ta-related-projects .ta-related-projects__card img {
  display: block;
  width: var(--ta-related-project-card-size);
  height: var(--ta-related-project-card-size);
  object-fit: cover;
  pointer-events: none;
}

.ta-related-projects .ta-related-projects__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--ta-space-1);
  padding: var(--ta-space-4);
  background: linear-gradient(
    to top,
    rgba(21, 47, 112, 0.96),
    rgba(21, 47, 112, 0.10)
  );
}

.ta-related-projects .ta-related-projects__overlay strong {
  font-size: var(--ta-type-card-title-size);
  font-weight: var(--ta-type-card-title-weight);
  line-height: var(--ta-type-card-title-line-height);
}

.ta-related-projects .ta-related-projects__overlay small {
  color: var(--ta-projects-location-color);
  font-size: var(--ta-type-meta-size);
  font-weight: var(--ta-type-meta-weight);
}

.ta-related-projects .ta-related-projects__empty {
  margin: 0;
  padding: var(--ta-space-6);
  text-align: center;
  color: var(--ta-news-excerpt-color);
}