.professionals {
  background-color: var(--surface-muted);
  padding: var(--section-space) 0 calc(var(--section-space) + 8px);
}

.professionals__container {
  width: min(var(--container-max), calc(100% - var(--container-inline)));
  margin: 0 auto;
}

.professionals__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.professionals__title {
  max-width: 13ch;
  font-family: var(--font-heading);
  font-size: var(--section-title-size);
  line-height: var(--section-title-line-height);
  font-weight: 700;
  letter-spacing: var(--section-title-spacing);
  color: var(--text-primary);
  text-wrap: balance;
}

.professionals__title span {
  color: var(--green-primary);
}

.professionals__controls {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.professionals__arrow {
  --control-hover-shadow: var(--shadow-control-strong-hover);
  --control-active-shadow: var(--shadow-control-strong-active);
  --control-focus-ring: var(--interaction-focus-ring-neutral);

  width: 48px;
  height: 48px;
  border: 1px solid rgba(0, 57, 77, 0.1);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.9);
  color: var(--text-primary);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-card);
  transition: var(--control-transition);
}

.professionals__arrow svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.professionals__arrow:disabled {
  opacity: 0.4;
  box-shadow: none;
  cursor: default;
}

.professionals__carousel {
  --slide-gap: 20px;
  margin-top: var(--section-content-gap);
}

.professionals__viewport {
  overflow: hidden;
}

.professionals__track {
  display: flex;
  margin-left: calc(var(--slide-gap) * -1);
  touch-action: pan-y pinch-zoom;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}

.professionals__track:active {
  cursor: grabbing;
}

.professionals__slide {
  min-width: 0;
  flex: 0 0 calc((100% - (var(--slide-gap) * 3)) / 4);
  padding-left: var(--slide-gap);
}

.professionals__card {
  display: grid;
  gap: 16px;
  transition: transform 220ms ease;
}

.professionals__media {
  overflow: hidden;
  border-radius: 34px;
  background: var(--surface-soft);
  box-shadow: var(--shadow-card-strong);
  aspect-ratio: 0.82;
  transition:
    transform 220ms ease,
    box-shadow 220ms ease;
}

.professionals__media picture {
  width: 100%;
  height: 100%;
  display: block;
}

.professionals__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  transform: scale(var(--professional-image-zoom, 1.06));
}

.professionals__content {
  display: grid;
  gap: 5px;
  padding-inline: 4px;
}

.professionals__meta {
  display: grid;
  gap: 2px;
}

.professionals__name {
  font-family: var(--font-heading);
  font-size: 1.16rem;
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.professionals__role {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--section-subtitle-size);
  line-height: 1.3;
  font-weight: 700;
  color: var(--green-primary);
}

.professionals__credential {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.8rem;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-secondary);
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity 180ms ease,
    transform 220ms ease;
}

.professionals__credential-slot {
  min-height: 1.1rem;
  position: relative;
  overflow: hidden;
}

.professionals__dots {
  margin-top: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.professionals__dot {
  width: 8px;
  height: 8px;
  border: none;
  border-radius: 999px;
  background: rgba(0, 57, 77, 0.16);
  transition: var(--control-transition);
}

.professionals__dot--active {
  width: 28px;
  background: var(--primary-dark);
}

@media (hover: hover) and (pointer: fine) {
  .professionals__arrow:hover:not(:disabled) {
    border-color: rgba(0, 57, 77, 0.16);
    background: var(--primary-dark);
    color: #ffffff;
  }

  .professionals__card:hover {
    transform: translateY(-4px);
  }

  .professionals__card:hover .professionals__media {
    box-shadow: 0 22px 48px rgba(8, 37, 50, 0.11);
  }

  .professionals__card--has-credential:hover .professionals__credential {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1199px) {
  .professionals {
    padding: var(--section-space) 0 calc(var(--section-space) + 10px);
  }

  .professionals__title {
    font-size: var(--section-title-size);
  }

  .professionals__carousel {
    --slide-gap: 18px;
    margin-top: 34px;
  }

  .professionals__slide {
    flex-basis: calc((100% - (var(--slide-gap) * 2)) / 3);
  }

  .professionals__media {
    border-radius: 30px;
  }

  .professionals__name {
    font-size: 1.04rem;
  }

  .professionals__role {
    font-size: var(--section-subtitle-size);
  }
}

@media (max-width: 1024px) {
  .professionals__header {
    align-items: center;
  }

  .professionals__carousel {
    --slide-gap: 16px;
    margin-top: 30px;
  }

  .professionals__slide {
    flex-basis: calc((100% - var(--slide-gap)) / 2.3);
  }

  .professionals__card {
    gap: 15px;
  }

  .professionals__card--has-credential {
    cursor: pointer;
    touch-action: manipulation;
  }

  .professionals__card--has-credential .professionals__meta {
    position: relative;
    padding-right: 16px;
  }

  .professionals__card--has-credential .professionals__meta::after {
    content: "";
    position: absolute;
    top: 5px;
    right: 2px;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid rgba(0, 57, 77, 0.42);
    border-bottom: 1.5px solid rgba(0, 57, 77, 0.42);
    transform: rotate(45deg);
    transition:
      transform 200ms ease,
      border-color 200ms ease,
      opacity 200ms ease;
    opacity: 0.9;
  }

  .professionals__card--has-credential:active {
    transform: translateY(-1px);
  }

  .professionals__card--has-credential:active .professionals__media {
    box-shadow: 0 18px 38px rgba(8, 37, 50, 0.12);
  }

  .professionals__card--credential-open {
    transform: translateY(-2px);
  }

  .professionals__card--credential-open .professionals__media {
    box-shadow: 0 22px 44px rgba(8, 37, 50, 0.14);
  }

  .professionals__card--credential-open .professionals__meta::after {
    transform: translateY(2px) rotate(-135deg);
    border-color: rgba(13, 129, 91, 0.88);
    opacity: 1;
  }

  .professionals__card--credential-open .professionals__credential {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 899px) {
  .professionals__header {
    align-items: center;
  }

  .professionals__title {
    max-width: 12ch;
    font-size: 2.16rem;
  }

  .professionals__arrow {
    width: 44px;
    height: 44px;
  }

  .professionals__carousel {
    --slide-gap: 16px;
  }

  .professionals__slide {
    flex-basis: calc((100% - var(--slide-gap)) / 2.15);
  }

  .professionals__media {
    border-radius: 26px;
  }

  .professionals__media img {
    transform: scale(var(--professional-image-zoom, 1.05));
  }
}

@media (max-width: 767px) {
  .professionals {
    padding: calc(var(--section-space) - 2px) 0 calc(var(--section-space) + 4px);
  }

  .professionals__header {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .professionals__title {
    max-width: 20ch;
    margin: 0 auto;
    font-size: clamp(2rem, 8vw, 2.34rem);
    text-align: center;
  }

  .professionals__controls {
    justify-content: center;
  }

  .professionals__arrow {
    width: 42px;
    height: 42px;
  }

  .professionals__carousel {
    --slide-gap: 14px;
    margin-top: 22px;
  }

  .professionals__slide {
    flex-basis: 86%;
  }

  .professionals__card {
    gap: 12px;
  }

  .professionals__media {
    border-radius: 24px;
  }

  .professionals__media img {
    transform: scale(var(--professional-image-zoom, 1.04));
  }

  .professionals__content {
    gap: 4px;
    padding-inline: 2px;
  }

  .professionals__name {
    font-size: 1rem;
  }

  .professionals__role {
    font-size: var(--section-subtitle-size);
  }

  .professionals__credential {
    font-size: 0.76rem;
    line-height: 1.32;
  }

  .professionals__credential-slot {
    min-height: 1rem;
  }

  .professionals__dots {
    margin-top: 18px;
  }
}