/* Shared directional controls use local line icons and inherit their color
 * from the stateful control around them. */
.directional-control {
  --directional-control-pill-background: #fff;
  --directional-control-pill-width: 53px;
  --directional-control-pill-height: 32px;
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 53px;
  height: 32px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--iel-radius-pill);
  background: transparent;
  color: #323232;
  line-height: 0;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow var(--iel-motion-fast) var(--iel-motion-ease);
}
.directional-control:not(.directional-control--location):not(.directional-control--pagination)::before {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: var(--directional-control-pill-width);
  height: var(--directional-control-pill-height);
  border-radius: var(--iel-radius-pill);
  background: var(--directional-control-pill-background);
  content: '';
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.directional-control:not(.directional-control--location):not(.directional-control--pagination)
  > .directional-control__icon {
  position: relative;
  z-index: 1;
}
.directional-control__icon,
.directional-icon,
.iel-faq-chevron,
.lower-step-chevron,
.navigation-chevron,
.publication-back__icon,
.center-player-source__icon {
  display: block;
  max-width: none;
  background-color: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  pointer-events: none;
  filter: none;
}
.directional-control__icon {
  -webkit-mask-image: url('../images/imgVector3.svg');
  mask-image: url('../images/imgVector3.svg');
}
.directional-icon,
.iel-faq-chevron,
.lower-step-chevron,
.navigation-chevron,
.publication-back__icon,
.center-player-source__icon {
  -webkit-mask-image: url('../icons/arrow-right.svg');
  mask-image: url('../icons/arrow-right.svg');
}
/* Compact pagination and disclosure indicators use a chevron instead of an
 * action arrow while retaining the same currentColor and mask contract. */
.directional-control__pagination-icon,
.iel-faq-chevron,
.lower-step-chevron,
.navigation-chevron {
  -webkit-mask-image: url('../icons/chevron-right.svg');
  mask-image: url('../icons/chevron-right.svg');
}
.directional-control__icon {
  width: 20px;
  height: 14px;
}
.directional-control--prev .directional-control__icon,
.directional-icon--prev,
.publication-back__icon {
  transform: rotate(180deg);
}
.directional-control:disabled,
.directional-control[aria-disabled='true'],
.directional-control.is-disabled {
  --directional-control-pill-background: #f8f8f8;
  opacity: 1;
  color: #d2d2d2;
  filter: none;
  cursor: default;
}
.upper-slider-controls button.directional-control:disabled,
.lower-controls button.directional-control:disabled,
.center-controls button.directional-control:disabled {
  opacity: 1;
}
.directional-control:hover,
.directional-control:disabled:hover,
.directional-control[aria-disabled='true']:hover,
.directional-control.is-disabled:hover {
  filter: none;
}
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
  .directional-control:not(.directional-control--pagination):not(:disabled):not([aria-disabled='true']):not(
      .is-disabled
    ):hover {
    box-shadow: 2px 4px 16px rgb(0 0 0 / 16%);
  }
}
.directional-control:focus-visible {
  outline: 3px solid var(--iel-color-focus);
  outline-offset: 4px;
}

/* Keep the public slider families on one measured gap and reset legacy
 * background/inline arrow rules. */
.upper-slider-controls,
.lower-controls,
.center-controls,
.lower-review-controls {
  gap: 7px;
}
.upper-slider-controls .directional-control,
.lower-controls .directional-control,
.center-controls .directional-control,
.lower-review-controls .directional-control {
  width: 53px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--iel-radius-pill);
  background: transparent;
  color: #323232;
}
.upper-slider-controls .directional-control__icon,
.lower-controls .directional-control__icon,
.center-controls .directional-control__icon,
.lower-review-controls .directional-control__icon,
.team-list-controls .directional-control__icon {
  width: 20px;
  height: 14px;
}
.upper-slider-controls .directional-control:disabled,
.upper-slider-controls .directional-control[aria-disabled='true'],
.upper-slider-controls .directional-control.is-disabled,
.lower-controls .directional-control:disabled,
.lower-controls .directional-control[aria-disabled='true'],
.lower-controls .directional-control.is-disabled,
.center-controls .directional-control:disabled,
.center-controls .directional-control[aria-disabled='true'],
.center-controls .directional-control.is-disabled,
.lower-review-controls .directional-control:disabled,
.lower-review-controls .directional-control[aria-disabled='true'],
.lower-review-controls .directional-control.is-disabled {
  --directional-control-pill-background: #f8f8f8;
  color: #d2d2d2;
}

/* Location controls are transparent, absolute overlays from Figma 418:739.
 * The enlarged box is a hit target and never participates in gallery flow. */
.directional-control.directional-control--location {
  position: absolute;
  z-index: 2;
  width: 76px;
  height: 112px;
  min-width: 0;
  padding: 20px;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  color: #fff;
  transform: translateY(-50%);
}
.lower-location-prev.directional-control--location {
  top: 50%;
  left: 3.5%;
}
.lower-location-next.directional-control--location {
  top: 50%;
  right: 3.5%;
}
.directional-control.directional-control--location .directional-control__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 38px;
  height: 72px;
  -webkit-mask-image: url('../images/imgVector4.svg');
  mask-image: url('../images/imgVector4.svg');
  transform: translate(-50%, -50%);
}
.directional-control.directional-control--location.directional-control--prev .directional-control__icon {
  transform: translate(-50%, -50%);
}
.directional-control.directional-control--location.directional-control--next .directional-control__icon {
  left: 50%;
  -webkit-mask-image: url('../images/imgVector5.svg');
  mask-image: url('../images/imgVector5.svg');
  transform: translate(-50%, -50%) scaleX(-1);
}

/* Public pagination follows the Figma text layer rather than laying each
 * number out as an independent flex slot. Route styles only add spacing. */
.pagination {
  position: relative;
  display: block;
  width: min(746.273px, 100%);
  height: 31.77px;
  margin-inline: auto;
}
.pagination__numbers {
  position: absolute;
  top: 3.14px;
  left: 0;
  display: block;
  width: 100%;
  height: 26px;
  overflow: visible;
  color: #3b3b3b;
  font-size: 20px;
  line-height: 26px;
  letter-spacing: 10px;
  text-align: center;
  white-space: pre;
}
.pagination-number {
  display: inline-block;
  vertical-align: middle;
  width: auto;
  min-width: 0;
  height: 26px;
  padding: 0;
  border-radius: 0;
  color: inherit;
  font-size: inherit;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: inherit;
  text-decoration: none;
}
.pagination__numbers [aria-current='page'] {
  position: relative;
  z-index: 0;
  display: inline-block;
  vertical-align: middle;
  width: auto;
  min-width: 0;
  height: 26px;
  border-radius: 0;
  isolation: isolate;
  color: #fff;
  background: transparent;
  letter-spacing: inherit;
}
.pagination__numbers [aria-current='page']::before {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: calc(50% - 5px);
  width: 31.77px;
  height: 31.77px;
  border-radius: 50%;
  background: #3b3b3b;
  content: '';
  pointer-events: none;
  transform: translate(-50%, -50%);
}
/* The text layer's tracking is for single-digit numbers; applying it between
 * two digits would push the active label beyond the fixed marker. */
.pagination__numbers .pagination-number--multi-digit {
  letter-spacing: 0;
}
.pagination__numbers [aria-current='page'].pagination-number--multi-digit::before {
  left: 50%;
}
.pagination .directional-control--pagination {
  position: absolute;
  z-index: 1;
  top: 0;
  display: grid;
  place-items: center;
  width: 31.77px;
  min-width: 31.77px;
  height: 31.77px;
  min-height: 31.77px;
  padding: 0;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  color: #3b3b3b;
}
.pagination .directional-control--pagination.directional-control--prev {
  left: 57.95px;
}
.pagination .directional-control--pagination.directional-control--next {
  right: 57.95px;
}
.pagination .directional-control__pagination-icon {
  position: static;
  width: 24.5392px !important;
  height: 24.5392px !important;
}
.pagination .directional-control--pagination.directional-control--prev .directional-control__pagination-icon {
  transform: rotate(180deg);
}
.pagination .directional-control--pagination[aria-disabled='true'],
.pagination .directional-control--pagination.is-disabled {
  opacity: 0.45;
}

/* One-way CTAs use the action-arrow family without adopting a pill. */
.directional-icon {
  width: 20px;
  height: 14px;
  color: #323232;
}
.directional-icon--light {
  color: #fff;
  filter: none;
}
/* Detail links share the lawyer-card circle.  Directory links keep a larger
 * transparent keyboard/touch target while the visible circle stays aligned
 * with the homepage cards. */
.detail-action {
  --detail-action-hit-size: 31px;
  --detail-action-circle-size: 31px;
  --detail-action-icon-width: 16px;
  --detail-action-icon-height: 15px;
  display: grid;
  place-items: center;
  width: var(--detail-action-hit-size);
  height: var(--detail-action-hit-size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  isolation: isolate;
  filter: none;
}

/* Published detail links own the whole card while keeping the authored arrow
 * circle anchored at the card edge. Pending preview buttons retain their
 * existing action target. */
.detail-action.upper-profile-more[href],
.detail-action.directory-team-member-link[href] {
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  cursor: pointer;
  z-index: 2;
}
.detail-action.upper-profile-more[href]::before,
.detail-action.directory-team-member-link[href]::before {
  top: auto;
  left: auto;
  right: var(--detail-action-visual-right);
  bottom: var(--detail-action-visual-bottom);
  transform: none;
}
.detail-action.upper-profile-more[href] .directional-icon,
.detail-action.directory-team-member-link[href] .directional-icon {
  position: absolute;
  right: calc(
    var(--detail-action-visual-right) + (var(--detail-action-circle-size) - var(--detail-action-icon-width)) / 2
  );
  bottom: calc(
    var(--detail-action-visual-bottom) + (var(--detail-action-circle-size) - var(--detail-action-icon-height)) / 2
  );
}
.detail-action.directory-team-member-link {
  --detail-action-hit-size: 44px;
}
.detail-action::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: var(--detail-action-circle-size);
  height: var(--detail-action-circle-size);
  border-radius: 50%;
  background: #535353;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: background-color var(--iel-motion-fast) ease;
}
.detail-action .directional-icon {
  position: relative;
  z-index: 1;
  width: var(--detail-action-icon-width);
  height: var(--detail-action-icon-height);
}

@media (hover: hover) and (pointer: fine) {
  .detail-action:hover::before {
    background: #ff0000;
  }
}
.detail-action:focus-visible::before {
  background: #ff0000;
}
@media (prefers-reduced-motion: reduce) {
  .detail-action::before {
    transition: none;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .directional-control {
    --directional-control-pill-width: 46px;
    --directional-control-pill-height: 28px;
  }
  .upper-slider-controls,
  .lower-controls,
  .center-controls,
  .lower-review-controls {
    gap: 6px;
  }
  .upper-slider-controls .directional-control,
  .lower-controls .directional-control,
  .center-controls .directional-control,
  .lower-review-controls .directional-control {
    min-width: 46px;
    width: 46px;
    height: 28px;
  }
  .upper-slider-controls .directional-control__icon,
  .lower-controls .directional-control__icon,
  .center-controls .directional-control__icon,
  .lower-review-controls .directional-control__icon,
  .team-list-controls .directional-control__icon {
    width: 18px;
    height: 13px;
  }
}

@media (max-width: 767px), (pointer: coarse) and (min-width: 768px) and (max-width: 1199px) {
  .directional-control {
    --directional-control-pill-width: 33px;
    --directional-control-pill-height: 20px;
  }
  .upper-slider-controls,
  .lower-controls,
  .center-controls,
  .lower-review-controls {
    gap: 4px;
  }
  .upper-slider-controls .directional-control,
  .lower-controls .directional-control,
  .center-controls .directional-control,
  .lower-review-controls .directional-control {
    min-width: 44px;
    width: 44px;
    height: 44px;
  }
  .upper-slider-controls .directional-control__icon,
  .lower-controls .directional-control__icon,
  .center-controls .directional-control__icon,
  .lower-review-controls .directional-control__icon,
  .team-list-controls .directional-control__icon {
    width: 13px;
    height: 9px;
  }
  .detail-action {
    --detail-action-hit-size: 30px;
    --detail-action-circle-size: 30px;
    --detail-action-icon-width: 16px;
    --detail-action-icon-height: 15px;
  }
  /* Figma 445:810 mobile chevrons; retain a transparent enlarged hit area. */
  .directional-control.directional-control--location {
    width: 48px;
    height: 60px;
    min-width: 48px;
    padding: 15px;
  }
  .directional-control.directional-control--location .directional-control__icon {
    width: 16px;
    height: 30px;
  }
  .directional-control.directional-control--location.directional-control--prev .directional-control__icon {
    transform: translate(-50%, -50%);
  }
  .directional-control.directional-control--location.directional-control--next .directional-control__icon {
    left: 50%;
    transform: translate(-50%, -50%) scaleX(-1);
  }
}

@media (max-width: 767px), (pointer: coarse) and (min-width: 768px) and (max-width: 1199px) {
  .pagination {
    height: 31.77px;
  }
  .pagination__numbers {
    top: 3.14px;
    height: 26px;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 8px;
    white-space: nowrap;
  }
  .pagination__numbers [aria-current='page']::before {
    left: calc(50% - 4px);
    width: 22px;
    height: 22px;
  }
  .pagination .directional-control--pagination {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .directional-control,
  .directional-control__icon,
  .directional-icon {
    transition: none;
  }
}

/* Keep slider hit areas inside their measured control rows at every breakpoint. */
.upper-slider-controls,
.lower-controls,
.center-controls,
.iel-home .upper-intro > .upper-slider-controls,
.iel-home .upper-profiles > .upper-slider-controls,
.iel-home .upper-women .upper-profiles > .upper-slider-controls,
.iel-home .upper-prosecutors .upper-profiles--prosecutors > .upper-slider-controls {
  min-height: 32px;
}

@media (768px <= width <= 1199px) {
  .upper-slider-controls,
  .lower-controls,
  .center-controls,
  .iel-home .upper-intro > .upper-slider-controls,
  .iel-home .upper-profiles > .upper-slider-controls,
  .iel-home .upper-women .upper-profiles > .upper-slider-controls,
  .iel-home .upper-prosecutors .upper-profiles--prosecutors > .upper-slider-controls {
    min-height: 28px;
  }
}

@media (width <= 767px) {
  .upper-slider-controls,
  .lower-controls,
  .center-controls {
    min-height: 44px;
  }

  .iel-home .upper-intro > .upper-slider-controls,
  .iel-home .upper-profiles > .upper-slider-controls {
    min-height: 44px;
  }

  .iel-home .upper-intro > .upper-slider-controls {
    margin-top: 8px;
  }

  .iel-home .upper-intro-grid {
    margin-top: 13px;
  }

  .iel-home .upper-profiles > .upper-slider-controls {
    margin: -12px 0 13px;
  }

  .iel-home .lower-news .lower-controls,
  .iel-home .lower-insights .lower-controls {
    margin-block: -12px;
  }

  .center-intros .center-controls {
    margin: 13px 0;
  }

  .iel-home .upper-women .upper-profiles > .upper-slider-controls,
  .iel-home .upper-prosecutors .upper-profiles--prosecutors > .upper-slider-controls {
    min-height: 44px;
    margin: -12px 0 13px;
  }
}